:root { color-scheme: light; --ink:#252724; --muted:#858983; --paper:#f7f7f2; --card:#fffefa; --line:#e7e7df; --green:#2f6b57; --soft-green:#e4f0e8; --orange:#df8157; --shadow:0 14px 38px rgba(45,54,44,.08); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100%,620px); margin:auto; padding:28px 22px calc(100px + env(safe-area-inset-bottom)); }
.topbar,.date-strip,.progress-copy,.section-heading,.task-content,.task-meta,.bottom-nav { display:flex; align-items:center; justify-content:space-between; }
.topbar { align-items:flex-start; margin-bottom:26px; } .eyebrow { margin:0 0 7px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.16em; } h1,h2,h3,p { margin:0; } h1 { font-size:26px; letter-spacing:-.04em; } h2 { font-size:20px; } .icon-button,.close-button { border:0; background:transparent; color:var(--muted); font-size:27px; line-height:1; padding:5px; }
.date-strip { margin-bottom:18px; color:var(--muted); font-size:14px; } .date-strip strong { display:block; margin-top:4px; color:var(--ink); font-size:25px; } .local-badge { padding:7px 10px; border:1px solid var(--line); border-radius:99px; font-size:11px; }
.progress-card { padding:21px; border-radius:20px; background:var(--green); color:#fff; box-shadow:var(--shadow); } .section-label { display:block; margin-bottom:8px; color:#cde0d4; font-size:12px; } .progress-copy strong { font-size:31px; } .progress-copy small { font-size:14px; font-weight:500; opacity:.75; } .progress-percent { font-size:15px; font-weight:700; } .progress-track { height:8px; margin:16px 0 11px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; } .progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:#f4c47f; transition:width .35s ease; } .progress-card p { color:#dbeae0; font-size:12px; }
.task-section { margin-top:32px; } .section-heading { margin-bottom:14px; } .text-button { border:0; padding:5px 0; color:var(--muted); background:transparent; font-size:12px; } .task-list { display:grid; gap:10px; } .task-card { padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--card); box-shadow:0 3px 12px rgba(45,54,44,.03); } .task-content { justify-content:flex-start; gap:13px; } .check-button { flex:0 0 27px; width:27px; height:27px; border:2px solid #c7cec7; border-radius:50%; color:#fff; background:transparent; font-size:16px; line-height:20px; transition:.2s; } .task-card.completed .check-button { border-color:var(--green); background:var(--green); } .task-card.completed .task-title { color:#a1a6a0; text-decoration:line-through; } .task-title { font-size:16px; font-weight:700; } .task-note { margin-top:5px; color:var(--muted); font-size:12px; } .task-actions { display:flex; gap:5px; margin-left:auto; } .task-actions button { border:0; background:transparent; color:#b1b5af; font-size:18px; padding:3px 5px; } .task-meta { margin-top:14px; padding-top:11px; border-top:1px solid #f0f0e9; color:var(--muted); font-size:11px; } .streak { color:var(--orange); font-weight:700; }
.empty-state { padding:36px 20px; border:1px dashed #d6d9d1; border-radius:18px; text-align:center; } .empty-icon { display:block; margin-bottom:12px; color:var(--orange); font-size:25px; } .empty-state h3 { margin-bottom:7px; font-size:16px; } .empty-state p { color:var(--muted); font-size:13px; } .add-button { width:100%; margin-top:18px; padding:16px; border:1px solid #bfd3c6; border-radius:15px; color:var(--green); background:var(--soft-green); font-weight:700; } .add-button span { margin-right:6px; font-size:20px; vertical-align:-1px; }
.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:2; width:min(100%,620px); margin:auto; padding:12px 22px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,254,250,.93); backdrop-filter:blur(12px); } .nav-item { display:grid; gap:4px; justify-items:center; min-width:70px; border:0; color:#a0a59d; background:transparent; font-size:11px; } .nav-item span { font-size:21px; } .nav-item.active { color:var(--green); font-weight:700; }
dialog { width:min(calc(100% - 30px),440px); padding:0; border:0; border-radius:23px; background:transparent; box-shadow:0 20px 70px rgba(25,35,25,.25); } dialog::backdrop { background:rgba(30,36,30,.35); backdrop-filter:blur(3px); } .dialog-card { position:relative; padding:27px; background:var(--card); } .dialog-card h2 { margin-bottom:22px; } .close-button { position:absolute; top:18px; right:18px; } .dialog-card label { display:block; margin:15px 0 7px; font-size:13px; font-weight:700; } label span { color:var(--muted); font-weight:400; } .dialog-card input,.dialog-card select { width:100%; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:#fafaf5; } .dialog-card input:focus,.dialog-card select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,107,87,.12); } .primary-button { width:100%; margin-top:24px; padding:14px; border:0; border-radius:13px; color:#fff; background:var(--green); font-weight:700; } .history-list { display:grid; gap:10px; max-height:45vh; overflow:auto; } .history-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; } .history-row strong { color:var(--green); }
.toggle-row { display:flex !important; align-items:center; gap:9px; margin-top:17px !important; color:var(--ink); } .toggle-row input { position:absolute; width:1px; height:1px; opacity:0; } .toggle { position:relative; width:39px; height:23px; margin-left:auto; border-radius:99px; background:#d5d8d2; transition:.2s; } .toggle::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.16); } .toggle-row input:checked + .toggle { background:var(--green); } .toggle-row input:checked + .toggle::after { transform:translateX(16px); } .reminder-time { color:var(--green); font-weight:700; } .toast { position:fixed; right:18px; bottom:88px; left:18px; z-index:5; width:min(100% - 36px,580px); margin:auto; padding:13px 16px; border-radius:13px; color:#fff; background:#27372d; box-shadow:var(--shadow); font-size:13px; text-align:center; }
@media (min-width:621px) { body { padding:24px 0; } .bottom-nav { border:1px solid var(--line); border-bottom:0; border-radius:20px 20px 0 0; } }