:root { --color-canvas:#F8FAFC; --color-surface:#FFFFFF; --color-text:#172033; --color-muted:#536174; --color-border:#CBD5E1; --color-primary:#1D4ED8; --color-primary-hover:#1E40AF; --color-focus:#F59E0B; --color-error:#B42318; --color-error-bg:#FEF3F2; --color-complete:#475569; --radius:8px; }
* { box-sizing: border-box; }
body { margin:0; padding:32px; background:var(--color-canvas); color:var(--color-text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { max-width:640px; margin:auto; }
h1 { font-size:28px; line-height:1.2; }
form, li { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:16px; }
.form-controls, li { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
input, button { min-height:44px; font:inherit; border-radius:var(--radius); }
input { border:1px solid var(--color-border); padding:8px; }
button { border:1px solid var(--color-primary); padding:8px 14px; background:var(--color-primary); color:white; cursor:pointer; }
button.delete { background:white; color:var(--color-text); border-color:var(--color-border); }
button:disabled { background:var(--color-muted); cursor:not-allowed; }
button:focus-visible, input:focus-visible { outline:3px solid var(--color-focus); outline-offset:2px; }
ul { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
li { grid-template-columns:44px 1fr auto; }
.todo-title { overflow-wrap:anywhere; }
.completed .todo-title { color:var(--color-complete); text-decoration:line-through; }
.error { color:var(--color-error); background:var(--color-error-bg); padding:8px; border-radius:var(--radius); }
.row-error { grid-column:2 / -1; margin:0; }
@media (max-width:639px) { body { padding:16px; } .form-controls { grid-template-columns:1fr; } li { grid-template-columns:44px 1fr; } li .delete { grid-column:2; } }