:root { --bg:#f6f7f9; --card:#fff; --ink:#1b1f2a; --muted:#6b7280; --line:#e5e7eb; --accent:#2563eb; --p1:#dc2626; --p2:#d97706; --p3:#9ca3af; --over:#dc2626; --chip:#eef0f4; --done:#9ca3af; }
@media (prefers-color-scheme: dark) { :root { --bg:#111419; --card:#1b1f2a; --ink:#e7e9ee; --muted:#9aa3b2; --line:#2a2f3a; --accent:#60a5fa; --chip:#262b36; --p3:#6b7280; } }
* { box-sizing:border-box } [hidden] { display:none !important } html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.4 -apple-system,system-ui,Segoe UI,Roboto,sans-serif; padding-bottom:env(safe-area-inset-bottom) }
.top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px 6px; position:sticky; top:0; background:var(--bg); z-index:5; flex-wrap:wrap }
.brand { font-weight:700; font-size:20px } .count { font-weight:400; color:var(--muted); font-size:14px; margin-left:4px }
.tabs { display:flex; gap:4px; background:var(--chip); border-radius:10px; padding:3px }
.tabs button { border:0; background:transparent; color:var(--muted); padding:6px 12px; border-radius:8px; font:inherit; font-size:14px; cursor:pointer }
.tabs button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08) }
.quick { display:flex; gap:8px; padding:6px 16px }
.quick input { flex:1; min-width:0 } input, select, textarea, button { font:inherit }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink) }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent }
button { padding:10px 14px; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line) } button.link { background:none; color:var(--muted); padding:4px; text-decoration:underline }
.filters { display:flex; gap:6px; padding:4px 16px; overflow-x:auto; scrollbar-width:none } .filters::-webkit-scrollbar { display:none }
.chipbtn { border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; padding:5px 11px; font-size:13px; cursor:pointer }
.chipbtn.on { background:var(--ink); color:var(--bg); border-color:var(--ink) }
.search { margin:6px 16px; width:calc(100% - 32px); padding:8px 12px; font-size:14px }
main, .top, .quick, .filters, .search { max-width:892px; margin-left:auto; margin-right:auto; width:100% }
main { padding:0 16px 24px }
.search { display:block; width:calc(100% - 32px) }
h2.sec { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 6px; display:flex; justify-content:space-between }
h2.sec.over { color:var(--over) } h3.proj { font-size:14px; margin:12px 0 4px; color:var(--ink) }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.todo { display:flex; gap:10px; padding:10px 12px; border-top:1px solid var(--line); cursor:pointer; align-items:flex-start }
.todo:first-child { border-top:0 } .todo:hover { background:color-mix(in srgb, var(--card) 80%, var(--chip)) }
.todo .box { flex:none; width:22px; height:22px; margin-top:1px; border:2px solid var(--p3); border-radius:50%; background:transparent; padding:0; display:grid; place-items:center; color:#fff }
.todo.p1 .box { border-color:var(--p1) } .todo.p2 .box { border-color:var(--p2) }
.todo .box:hover { background:var(--accent); border-color:var(--accent) }
.todo.done .box { background:var(--done); border-color:var(--done) } .todo.done .t { text-decoration:line-through; color:var(--muted) }
.todo .body { flex:1; min-width:0 } .todo .t { overflow-wrap:anywhere }
.meta { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:3px; font-size:12px; color:var(--muted) }
.meta .due.over { color:var(--over); font-weight:600 } .meta .due.today { color:var(--p2); font-weight:600 }
.meta .wait { color:#7c3aed } .meta .proj::before { content:'#' } .meta .area { background:var(--chip); padding:0 6px; border-radius:6px }
.empty { color:var(--muted); padding:24px; text-align:center }
.drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9 }
.drawer { position:fixed; right:0; top:0; bottom:0; width:min(480px,100%); background:var(--bg); z-index:10; overflow:auto; padding:16px; box-shadow:-4px 0 24px rgba(0,0,0,.2) }
.drawer label { display:block; font-size:13px; color:var(--muted); margin-top:10px } .drawer label > * { margin-top:4px }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px } .drawer form > input[name=title] { font-size:17px; font-weight:600 }
.actions { display:flex; gap:8px; margin-top:14px; align-items:center } .grow { flex:1 }
.muted { color:var(--muted) } .small { font-size:12px } .err { color:var(--p1); min-height:1.2em }
.foot { text-align:center; padding:12px }
.login-body { display:grid; place-items:center; min-height:100vh; margin:0 }
.login-card { width:min(360px,92vw); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; display:grid; gap:10px } .login-card h1 { margin:0 }
@media (max-width:520px) { .top { padding:10px 12px 4px } .quick, .filters, .search { padding-left:12px; padding-right:12px } .search { margin-left:12px; margin-right:12px; width:calc(100% - 24px) } main { padding:0 12px 24px } }

/* ---- ADHD layer: today / focus / snooze ---- */
.view { max-width:892px; margin:0 auto; width:100%; padding:0 16px 24px }
.view .quick, .view .filters { padding-left:0; padding-right:0 } .view .search { margin-left:0; margin-right:0; width:100% } .view main { padding:0 }
.hero { margin:14px 0 8px } .hero h1 { font-size:22px; margin:0 0 4px } .hero p { margin:0; color:var(--muted) }
.big { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:10px 0; box-shadow:0 1px 3px rgba(0,0,0,.05) }
.big.done { opacity:.55 } .big .t { font-size:19px; font-weight:600; line-height:1.3; overflow-wrap:anywhere } .big.done .t { text-decoration:line-through }
.big .n { color:var(--muted); font-size:14px; margin-top:6px; white-space:pre-line; max-height:4.2em; overflow:hidden }
.big .meta { margin-top:8px } .big .btns { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
.big .btns button { padding:10px 14px; border-radius:10px } .btn-done { background:#16a34a } .btn-ghost { background:var(--chip); color:var(--ink) }
.pickrow { display:flex; gap:10px; padding:10px 12px; border-top:1px solid var(--line); cursor:pointer; align-items:flex-start }
.pickrow:first-child { border-top:0 } .pickrow .sq { flex:none; width:22px; height:22px; margin-top:2px; border:2px solid var(--p3); border-radius:6px; display:grid; place-items:center; color:#fff; font-size:14px }
.pickrow.on .sq { background:var(--accent); border-color:var(--accent) } .pickrow.dim { opacity:.45 }
.pickrow .body { flex:1; min-width:0 } .pickrow .sub { font-size:12px; color:var(--muted); margin-top:2px }
.pickbar { position:sticky; bottom:0; background:var(--bg); padding:10px 0 14px; display:flex; align-items:center; gap:10px }
.pickbar .n { font-weight:600 } .pickbar button { flex:1; padding:14px; font-size:16px }
.focus { min-height:60vh; display:flex; flex-direction:column; justify-content:center }
.focus .fcard { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 20px; box-shadow:0 2px 12px rgba(0,0,0,.06) }
.focus .t { font-size:26px; font-weight:700; line-height:1.25; overflow-wrap:anywhere } .focus .n { margin-top:14px; white-space:pre-line; color:var(--ink); font-size:15px; line-height:1.5 }
.focus .meta { margin-top:10px } .focus .btns { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:20px } .focus .btns button { padding:16px 8px; font-size:16px; border-radius:14px }
.focus .pos { text-align:center; color:var(--muted); font-size:13px; margin-top:12px }
.wins { margin-top:20px } .wins h2 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 6px }
.wins ul { list-style:none; margin:0; padding:0 } .wins li { padding:6px 0; border-top:1px solid var(--line); color:var(--muted); text-decoration:line-through }
.wins li:first-child { border-top:0 }
.wrapbtn { margin-top:18px; width:100%; padding:14px; background:var(--chip); color:var(--ink) }
.snooze { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px } button.sm { padding:5px 10px; font-size:13px }
.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:19 }
.sheet { position:fixed; left:0; right:0; bottom:0; background:var(--bg); border-radius:18px 18px 0 0; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); z-index:20; display:grid; gap:8px; max-width:520px; margin:0 auto }
.sheet button { width:100%; padding:14px; font-size:16px; background:var(--card); color:var(--ink); border:1px solid var(--line) } .sheet button.ghost { background:transparent; color:var(--muted) }
.meta .since { color:var(--muted) } .meta .since.old { font-weight:600; color:var(--ink) }
.empty-day { text-align:center; padding:36px 12px; color:var(--muted) } .empty-day h1 { color:var(--ink); font-size:22px; margin:0 0 8px }
.tabs button { padding:6px 10px }