:root{--bg:#fff;--fg:#1b1f24;--mut:#6b7280;--line:#e5e7eb;--card:#f8fafc;--acc:#2f6fde;--red:#d93025;--org:#e8710a}
@media (prefers-color-scheme:dark){:root{--bg:#111418;--fg:#e8eaed;--mut:#9aa0a6;--line:#2a2f36;--card:#1a1e23}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line);z-index:2}
h1{font-size:1.25rem;margin:0}header button{background:none;border:0;font-size:1.3rem}
main{padding:8px 16px 140px;max-width:760px;margin:0 auto}
nav#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav#tabs a{flex:1;text-align:center;padding:8px 0;color:var(--mut);text-decoration:none;font-size:1.2rem}
nav#tabs a span{display:block;font-size:.72rem}nav#tabs a.on{color:var(--acc)}
#fab{position:fixed;right:18px;bottom:78px;width:56px;height:56px;border-radius:50%;border:0;background:var(--acc);color:#fff;font-size:2rem;box-shadow:0 4px 12px #0003}
.sec{margin:18px 0 6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.task{display:flex;gap:12px;align-items:flex-start;padding:12px;margin:6px 0;background:var(--card);border-radius:12px;border-left:4px solid transparent}
.task.p-urgent{border-left-color:var(--red)}.task.p-high{border-left-color:var(--org)}
.task .chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--mut);flex:none;margin-top:2px;background:none}
.task.done .chk{background:var(--acc);border-color:var(--acc)}.task.done .t{text-decoration:line-through;color:var(--mut)}
.task .body{flex:1;min-width:0}.task .t{font-weight:500;overflow-wrap:anywhere}
.meta{font-size:.82rem;color:var(--mut);margin-top:2px}.late{color:var(--red)}
.proj{display:flex;align-items:center;gap:12px;padding:14px;margin:6px 0;background:var(--card);border-radius:12px;color:inherit;text-decoration:none}
.proj .n{flex:1}.badge{background:var(--line);border-radius:10px;padding:1px 8px;font-size:.8rem}
.empty{text-align:center;color:var(--mut);padding:40px 0}
form.stack{display:flex;flex-direction:column;gap:10px}
input,select,textarea,button.btn{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);width:100%}
button.btn{background:var(--acc);color:#fff;border:0;font-weight:600}button.btn.sec2{background:var(--card);color:var(--fg);border:1px solid var(--line)}
.row{display:flex;gap:8px}.row>*{flex:1}
dialog{border:0;border-radius:16px;padding:16px;width:min(560px,94vw);background:var(--bg);color:var(--fg)}dialog::backdrop{background:#0006}
.item{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.item .grow{flex:1;overflow-wrap:anywhere}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.chip{padding:4px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:.85rem}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.err{color:var(--red);font-size:.9rem}.login{max-width:380px;margin:12vh auto}