:root { --canvas:#F7F6F2; --surface:#FFFFFF; --ink:#17202A; --muted:#4B5563; --rule:#C9CDD1; --action:#0B57D0; --action-hover:#0847AC; --action-on:#FFFFFF; --success:#146C43; --danger:#B42318; --danger-soft:#FFF1F0; --focus:#0B57D0; --radius-sm:4px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --content-max:760px; }
* { box-sizing:border-box; }
html { background:var(--canvas); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px; line-height:1.5; }
body { margin:0; min-width:0; }
main { width:min(100%,var(--content-max)); margin:0 auto; padding:32px 24px; }
h1 { font-size:32px; line-height:1.15; margin:0; }
h2 { font-size:20px; line-height:1.3; margin:0; }
header, .add-section { border-bottom:1px solid var(--rule); padding-bottom:var(--space-5); }
.storage-notice { color:var(--muted); margin:var(--space-2) 0 0; }
.add-section { padding-top:var(--space-5); }
label { display:block; font-weight:650; margin-bottom:var(--space-2); }
.add-controls { display:flex; gap:var(--space-3); }
input[type="text"] { min-width:0; width:100%; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; min-height:44px; padding:var(--space-2) var(--space-3); }
button { min-height:44px; border:1px solid var(--action); border-radius:var(--radius-sm); background:var(--action); color:var(--action-on); cursor:pointer; font:inherit; font-weight:650; padding:var(--space-2) var(--space-3); }
button:hover:not(:disabled) { background:var(--action-hover); border-color:var(--action-hover); }
button.secondary { background:transparent; color:var(--action); }
button.danger { background:transparent; border-color:var(--danger); color:var(--danger); }
button.danger.solid { background:var(--danger); color:#fff; }
button:disabled,input:disabled { cursor:not-allowed; opacity:.65; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.field-error,.action-error { color:var(--danger); margin:var(--space-2) 0 0; }
.field-error::before,.action-error::before { content:"Error: "; font-weight:700; }
.pending { color:var(--muted); margin:var(--space-2) 0 0; }
.list-section { padding-top:var(--space-5); }
.count { color:var(--muted); font-weight:400; }
.region-error { background:var(--danger-soft); border-left:4px solid var(--danger); margin:var(--space-3) 0; padding:var(--space-3); }
.region-error p { margin:0 0 var(--space-2); }
ul { list-style:none; margin:var(--space-3) 0 0; padding:0; }
.todo { border-top:1px solid var(--rule); display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; min-height:56px; padding:var(--space-2) 0; }
.todo:last-child { border-bottom:1px solid var(--rule); }
.check-label { align-items:center; display:flex; min-height:44px; }
input[type="checkbox"] { accent-color:var(--success); height:20px; width:20px; }
.todo-main { min-width:0; overflow-wrap:anywhere; }
.todo-title { margin:0; }
.todo.completed .todo-title { text-decoration:line-through; }
.state { color:var(--muted); display:block; font-size:.875rem; }
.todo.completed .state { color:var(--success); font-weight:650; }
.actions { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:flex-end; }
.actions button { min-width:44px; }
.confirmation { background:var(--danger-soft); border:1px solid var(--danger); border-radius:var(--radius-sm); grid-column:2 / -1; max-width:520px; padding:var(--space-3); }
.confirmation p { margin:0 0 var(--space-3); }
.confirmation .actions { justify-content:flex-start; }
.empty,.loading { color:var(--muted); margin:var(--space-3) 0; }
.skip-link,.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link:focus { background:var(--surface); clip:auto; height:auto; left:var(--space-3); padding:var(--space-2); top:var(--space-2); width:auto; z-index:2; }
.noscript { margin:var(--space-4); }
@media (max-width:767px) { main { padding:20px 16px; } h1 { font-size:28px; } .add-controls { flex-direction:column; gap:var(--space-2); } .add-controls button { width:100%; } .todo { grid-template-columns:44px minmax(0,1fr); } .actions { grid-column:2; justify-content:flex-start; } .confirmation { grid-column:2; width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }