:root{--bg:#f4f5f7;--surface:#fff;--text:#1c1c1f;--muted:#6b6b73;--border:#e3e4e8;--border-strong:#c4c6cd;--accent:#3b5bdb;--accent-soft:#e7ecff;--on-accent:#fff;--ok:#2b8a3e;--ok-bg:#e9f7ec;--danger:#c92a2a;--danger-bg:#fdecec;--warn-bg:#fff4d6;--warn-text:#7a5300;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--bg:#141417;--surface:#1f1f24;--text:#ececf1;--muted:#9a9aa3;--border:#2e2e35;--border-strong:#4a4a53;--accent:#748ffc;--accent-soft:#252c4a;--on-accent:#0f1222;--ok:#51cf66;--ok-bg:#16301c;--danger:#ff8787;--danger-bg:#3a1c1c;--warn-bg:#3a2f10;--warn-text:#ffd875}}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}h1{margin:0 0 4px;font-size:1.75rem;line-height:1.2}.mock-banner{background:var(--warn-bg);color:var(--warn-text);text-align:center;padding:6px 12px;font-size:.8rem}.container{max-width:520px;margin:0 auto;padding:20px 16px 48px}.muted{color:var(--muted);margin:0}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.btn{min-height:44px;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:10px;padding:0 16px;font-weight:600;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-ghost{color:var(--text);border-color:var(--border);background:0 0}.btn-google{background:var(--surface);width:100%;color:var(--text);border-color:var(--border-strong)}.btn-block{width:100%}.g-badge{background:var(--accent-soft);width:22px;height:22px;color:var(--accent);border-radius:50%;place-items:center;font-size:.8rem;font-weight:700;display:grid}.link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:none;margin:0 auto;padding:10px 0 0;display:block}.input{border:1px solid var(--border-strong);background:var(--surface);width:100%;min-height:44px;color:var(--text);font:inherit;border-radius:10px;padding:0 12px;font-size:16px}.input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:#0000}.alert,.notice{border-radius:10px;margin:0;padding:10px 12px;font-size:.9rem}.alert{background:var(--danger-bg);color:var(--danger)}.notice{background:var(--ok-bg);color:var(--ok)}.auth{padding-top:16px}.brand{text-align:center;margin-bottom:20px}.logo{background:var(--accent);width:56px;height:56px;color:var(--on-accent);border-radius:16px;place-items:center;margin:0 auto 12px;font-size:28px;font-weight:700;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}.card h2{margin:0 0 4px;font-size:1.2rem}.card h2+.muted{margin-bottom:16px}.tabs{background:var(--bg);border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:16px;padding:4px;display:grid}.tab{min-height:38px;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;font-weight:600}.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}.divider{color:var(--muted);align-items:center;gap:12px;margin:16px 0;font-size:.85rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.stack{flex-direction:column;gap:14px;display:flex}.field{flex-direction:column;gap:6px;font-size:.9rem;font-weight:500;display:flex}.field small{font-weight:400}.hint{text-align:center;color:var(--muted);margin-top:16px;font-size:.85rem}.legal-links{text-align:center;color:var(--muted);margin-top:20px;font-size:.85rem}.legal-links a{color:var(--muted)}.topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.who{align-items:center;gap:10px;min-width:0;display:flex}.who>div{min-width:0}.avatar{background:var(--accent-soft);width:36px;height:36px;color:var(--accent);border-radius:50%;flex-shrink:0;place-items:center;font-weight:700;display:grid}.who-name{font-size:.9rem;font-weight:600}.who-email{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.add-form{gap:8px;margin:16px 0;display:flex}.add-form .input{flex:1;min-width:0}.add-form+.alert{margin-bottom:12px}.todo-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.todo{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:2px;min-height:56px;padding:4px 4px 4px 6px;display:flex}.todo.editing{padding:10px;display:block}.check{cursor:pointer;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid;position:relative}.check input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.checkmark{border:2px solid var(--border-strong);border-radius:50%;place-items:center;width:24px;height:24px;transition:background .15s,border-color .15s;display:grid}.check input:checked+.checkmark{background:var(--ok);border-color:var(--ok)}.check input:checked+.checkmark:after{content:"";border:solid var(--surface);border-width:0 2px 2px 0;width:6px;height:11px;margin-top:-2px;transform:rotate(45deg)}.check input:focus-visible+.checkmark{outline:2px solid var(--accent);outline-offset:2px}.title{text-align:left;min-width:0;font:inherit;color:var(--text);cursor:text;overflow-wrap:anywhere;background:0 0;border:none;flex:1;padding:10px 4px}.todo.done .title{color:var(--muted);text-decoration:line-through}.icon-btn{min-width:44px;height:44px;color:var(--muted);cursor:pointer;font:inherit;background:0 0;border:none;border-radius:10px;flex-shrink:0;place-items:center;font-size:.8rem;font-weight:600;display:grid}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{background:var(--bg);color:var(--text)}.icon-btn.danger:hover{color:var(--danger)}.icon-btn.confirm{background:var(--danger-bg);color:var(--danger);padding:0 10px}.edit-form{flex-direction:column;gap:8px;display:flex}.edit-actions{justify-content:flex-end;gap:8px;display:flex}.field-error{color:var(--danger);margin:6px 0 0;font-size:.85rem}.empty{text-align:center;color:var(--muted);border:1px dashed var(--border-strong);border-radius:12px;padding:40px 16px}.skeleton{background:linear-gradient(90deg, var(--surface), var(--bg), var(--surface));background-size:200% 100%;animation:1.2s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.center{text-align:center;padding-top:40px}