:root { --navy:#10069f; --ink:#171725; --muted:#626274; --line:#dfdfe8; --bg:#fff; --soft:#f4f4fb; --red:#a62b38; font-family:-apple-system,BlinkMacSystemFont,"IBM Plex Sans",system-ui,sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%; }
body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main { max-width:760px; margin:auto; padding:16px 18px 60px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 21px; }
h1 { margin:0; font:600 30px/1.1 Georgia,serif; letter-spacing:-.035em; color:var(--navy); }
h1 span { font:500 18px/1.1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; letter-spacing:0; }
.header-tools { display:flex; align-items:center; gap:12px; }
#sync-state { color:var(--muted); font-size:12px; }
button { font:inherit; cursor:pointer; }
#account { border:0; background:none; color:var(--navy); font-size:24px; width:32px; height:32px; line-height:1; }
#add-form { display:flex; border-bottom:2px solid var(--navy); align-items:center; }
#add-text { flex:1; min-width:0; border:0; border-radius:0; outline:0; padding:10px 2px 12px; background:transparent; font:16px/1.3 inherit; color:var(--ink); }
#add-form button { background:none; border:0; color:var(--navy); font-size:28px; width:44px; height:44px; }
.matter-line { min-height:37px; display:flex; align-items:center; }
.matter-line button { border:0; background:transparent; color:var(--muted); font-size:12px; padding:5px 2px; }
#clear-matter { font-size:20px; margin-left:4px; }
.tabs { display:flex; border-bottom:1px solid var(--line); gap:25px; margin:14px 0 8px; }
.tabs button { border:0; border-bottom:2px solid transparent; padding:10px 0; background:none; color:var(--muted); font-size:14px; }
.tabs button.active { border-color:var(--navy); color:var(--navy); font-weight:600; }
.group { margin:26px 0 5px; font-size:12px; font-weight:600; letter-spacing:.065em; text-transform:uppercase; color:var(--muted); }
.todo-row { min-height:57px; display:flex; align-items:center; border-bottom:1px solid var(--line); gap:12px; transition:opacity .42s,transform .42s; }
.todo-row.pending { opacity:.56; }
.todo-row.completing { opacity:0; transform:translateX(50px); }
.check { flex:none; width:23px; height:23px; border:1.7px solid var(--navy); border-radius:50%; background:transparent; }
.check:active { background:var(--navy); }
.task-content { min-width:0; flex:1; padding:9px 0; text-align:left; border:0; background:none; display:grid; gap:2px; }
.task-title { font-size:16px; line-height:1.3; overflow-wrap:anywhere; }
.task-detail { color:var(--muted); font-size:12px; line-height:1.3; }
.row-more { border:0; background:none; color:var(--muted); font-size:21px; padding:8px 0 8px 8px; width:32px; }
.empty { margin:33px 0; color:var(--muted); font-size:14px; }
#notice { padding:9px 0; font-size:13px; color:var(--muted); }
#notice[data-kind=error] { color:var(--red); }
#undo { position:fixed; left:50%; bottom:calc(15px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 14px; display:flex; gap:24px; align-items:center; min-width:215px; justify-content:space-between; box-shadow:0 5px 20px #10069f33; z-index:2; font-size:14px; }
#undo[hidden] { display:none; }
#undo button { border:0; background:none; color:#fff; font-weight:700; }
dialog { border:1px solid var(--line); background:var(--bg); color:var(--ink); width:min(440px,calc(100vw - 28px)); max-height:85vh; padding:22px; box-shadow:0 14px 48px #10069f25; }
dialog::backdrop { background:#17172566; }
dialog h2 { margin:0 0 16px; font:600 23px/1.2 Georgia,serif; color:var(--navy); }
dialog label { display:grid; gap:5px; margin:12px 0; font-size:13px; color:var(--muted); }
dialog input,dialog textarea { width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:10px; font:16px/1.3 inherit; border-radius:0; }
dialog textarea { min-height:84px; resize:vertical; }
dialog button:not(.quiet) { min-height:39px; padding:7px 12px; border:1px solid var(--navy); background:var(--navy); color:#fff; }
dialog button.quiet,#snooze-cancel,#edit-cancel { border:0!important; background:none!important; color:var(--navy)!important; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
#archive { margin-top:24px; padding:8px 0; }
#matter-options { max-height:45vh; overflow:auto; display:grid; }
#matter-options button { text-align:left; color:var(--ink); border:0; background:none; border-bottom:1px solid var(--line); }
#snooze-options { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:18px; }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-color-scheme:dark) { :root { --navy:#aaa6ff; --ink:#f3f3f8; --muted:#aaaabc; --line:#3b3b50; --bg:#141422; --soft:#202034; --red:#ff9ba5; color-scheme:dark; } #undo { background:#3631a5; } }