:root{--bg:#fff;--side:#fcfaf8;--fg:#202020;--mut:#808080;--line:#efefef;--hover:#f3f3f3;--acc:#db4c3f;--acc-bg:#ffefe5;--green:#058527;--blue:#246fe0;--purple:#692fc2}
@media(prefers-color-scheme:dark){:root{--bg:#1e1e1e;--side:#282828;--fg:#f0f0f0;--mut:#9a9a9a;--line:#333;--hover:#2d2d2d;--acc:#e3665a;--acc-bg:#3a2723;--green:#4cc366;--blue:#6aa4f5;--purple:#b394ea}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,"Segoe UI",system-ui,sans-serif}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
#layout{display:flex;min-height:100vh}
#sidebar{width:270px;flex:none;background:var(--side);padding:16px 8px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.add-main{display:flex;align-items:center;gap:8px;color:var(--acc);font-weight:600;padding:8px 10px;border-radius:6px;margin-bottom:8px;width:100%;text-align:left}
.add-main:hover{background:var(--hover)}
.plus{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:18px;line-height:1}
nav button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:6px;text-align:left}
nav button:hover{background:var(--hover)}
nav button.active{background:var(--acc-bg);color:var(--acc);font-weight:600}
.lbl{flex:1}.cnt{color:var(--mut);font-size:12px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.side-foot button{font-size:12px;color:var(--mut);text-align:left;padding:5px 10px;border-radius:6px}
.side-foot button:hover{background:var(--hover)}
main{flex:1;min-width:0}
#content{max-width:800px;margin:0 auto;padding:36px 40px 120px}
h1{font-size:26px;margin:0 0 2px;font-weight:700}
.sub{color:var(--mut);font-size:13px;margin-bottom:20px}
h2{font-size:14px;font-weight:700;margin:22px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line)}
h2 small{color:var(--mut);font-weight:400;margin-left:6px}
h2.over{color:var(--acc)}
.task{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid var(--line);position:relative}
.task:hover{background:var(--hover)}
.chk{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--mut);margin-top:1px;display:grid;place-items:center;color:transparent;font-size:12px;padding:0}
.chk:hover{color:var(--mut);background:var(--hover)}
.task.done .chk{background:var(--mut);border-color:var(--mut);color:#fff}
.task.done .t{text-decoration:line-through;color:var(--mut)}
.body{flex:1;min-width:0}
.t{cursor:text;word-break:break-word}
.t-edit{width:100%;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--bg)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin-top:1px;color:var(--mut)}
.d-over{color:var(--acc)}.d-today{color:var(--green)}.d-soon{color:var(--purple)}.d-later{color:var(--blue)}
.acts{display:none;gap:2px;flex:none}
.task:hover .acts,.task.inbox .acts{display:flex}
.acts button{padding:2px 8px;border-radius:5px;font-size:12px;color:var(--mut);border:1px solid var(--line)}
.acts button:hover{background:var(--bg);color:var(--fg)}
.acts input[type=date]{position:absolute;opacity:0;width:0;height:0}
.add-open{display:flex;align-items:center;gap:8px;color:var(--mut);padding:10px 4px;width:100%;text-align:left}
.add-open .plus{background:none;color:var(--acc);font-size:22px}
.add-open:hover{color:var(--acc)}
.quick{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.quick input{width:100%;border:0;outline:0;background:none;font-size:15px;font-weight:500;padding:2px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0;min-height:4px}
.chip{font-size:12px;border:1px solid var(--line);border-radius:5px;padding:1px 8px}
.hint{font-size:12px;color:var(--mut);margin-top:6px}
.quick-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.btn{padding:6px 14px;border-radius:6px;background:var(--hover);font-weight:600}
.btn.pri{background:var(--acc);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.empty{text-align:center;color:var(--mut);padding:60px 0}
.lock{text-align:center;color:var(--mut);padding:50px 0;line-height:1.7}
.lock b{color:var(--fg)}
#fab{display:none}
@media(max-width:760px){
  #layout{display:block}
  #sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;width:auto;flex-direction:row;padding:4px;z-index:5;border-top:1px solid var(--line)}
  #sidebar .add-main,.side-foot{display:none}
  nav{display:flex;width:100%}
  nav button{flex-direction:column;gap:0;align-items:center;font-size:11px;justify-content:center;position:relative}
  nav .cnt{position:absolute;top:0;right:22%}
  #content{padding:20px 16px 150px}
  #fab{display:grid;place-items:center;position:fixed;right:16px;bottom:72px;width:52px;height:52px;border-radius:50%;background:var(--acc);color:#fff;font-size:30px;box-shadow:0 3px 10px rgba(0,0,0,.3);z-index:6}
  .acts{display:flex}
}

.sync{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.dot.ok{background:var(--green)}.dot.syncing{background:var(--blue)}.dot.error{background:var(--acc)}.dot.offline{background:#e0a000}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:20;padding:16px}
.modal[hidden]{display:none}
.card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:20px;width:100%;max-width:380px}
.card h3{margin:0 0 4px}.card input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-top:8px;background:var(--bg)}
.mut{color:var(--mut);font-size:13px;margin:0 0 6px}.msg{font-size:13px;margin-top:8px;min-height:18px;color:var(--acc)}.msg.ok{color:var(--green)}
#content{position:relative}
.sync-pill{display:none;position:absolute;top:14px;right:16px;align-items:center;gap:6px;font-size:12px;color:var(--mut);padding:4px 8px;border:1px solid var(--line);border-radius:12px}
@media(max-width:760px){.sync-pill{display:inline-flex}}