:root{--bg:#f7f6f2;--card:#ffffff;--border:#e3e0d6;--border-strong:#cfcbbd;--ink:#26312b;--muted:#77806f;--accent:#2f6b4f;--accent-soft:#e5efe7;--accent-deep:#1d4534;--danger:#a03c2e;--radius:10px;--font-body:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;--font-display:Georgia,"Times New Roman",serif}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5}h1,h2{font-family:var(--font-display);font-weight:500;letter-spacing:.01em}button{font-family:inherit;cursor:pointer}input,select{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.page{max-width:820px;margin:0 auto;padding:32px 20px 64px}.topbar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}.topbar h1{font-size:26px;margin:0}.topbar .who{color:var(--muted);font-size:13px;display:flex;gap:12px;align-items:baseline}.linklike{background:none;border:none;padding:0;color:var(--accent);font-size:13px;text-decoration:underline}.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:12px;gap:12px;margin-bottom:24px}.metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.metric .label{font-size:12px;color:var(--muted);margin:0 0 4px}.metric .value{font-size:22px;font-weight:600;margin:0}.weeknav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.weeknav .range{font-family:var(--font-display);font-size:17px}.weeknav .navbtn,.weeknav a{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--ink);text-decoration:none}.grid-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}table.habits{width:100%;border-collapse:collapse}table.habits td,table.habits th{padding:8px 6px;text-align:center;font-size:13px;border-bottom:1px solid var(--border)}table.habits tr:last-child td{border-bottom:none}table.habits th{color:var(--muted);font-weight:500;font-size:12px}table.habits td.today,table.habits th.today{background:var(--accent-soft)}td.habit-name{text-align:left;padding-left:14px;min-width:170px}td.habit-name .name{font-weight:500}td.habit-name .cat{font-size:11px;color:var(--muted)}.check{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-strong);background:var(--card);padding:0;color:transparent;transition:background .12s ease}.check[data-checked=true]{background:var(--accent);border-color:var(--accent-deep);color:#fff;font-weight:700}.check:disabled{opacity:.5}.del{background:none;border:none;color:var(--danger);font-size:16px;padding:2px 8px}.category-row td{background:var(--bg);text-align:left;padding-left:14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.add-form{display:flex;gap:8px;margin-top:16px}.add-form input[type=text]{flex:1 1}.btn-primary{background:var(--accent);border:1px solid var(--accent-deep);color:#fff;border-radius:8px;padding:9px 16px;font-size:14px}.btn-primary:hover{background:var(--accent-deep)}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.auth-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:32px 28px}.auth-card h1{font-size:22px;margin:0 0 4px}.auth-card .sub{color:var(--muted);font-size:13px;margin:0 0 20px}.auth-card form{gap:12px}.auth-card form,.auth-card label{display:flex;flex-direction:column}.auth-card label{font-size:13px;color:var(--muted);gap:4px}.auth-card .error{color:var(--danger);font-size:13px;margin:0}.auth-card .switch{margin-top:16px;font-size:13px;color:var(--muted)}.auth-card .switch a{color:var(--accent)}.empty{padding:28px;text-align:center;color:var(--muted);font-size:14px}@media (max-width:640px){td.habit-name{min-width:120px}.check{width:24px;height:24px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}