:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #eef3f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #dbeafe, transparent 34rem), #f8fafc; }
.app-shell { width: min(720px, calc(100% - 2rem)); margin: 0 auto; padding: 5rem 0; }
header { margin-bottom: 1.5rem; }
.eyebrow { margin: 0 0 .5rem; color: #2563eb; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: -.055em; }
.subtitle { color: #5c667a; margin: .55rem 0 0; }
.card { background: rgba(255,255,255,.88); padding: 1rem; border: 1px solid #dbe4ef; border-radius: 1rem; box-shadow: 0 18px 50px rgba(23,32,51,.10); }
.task-form { display: flex; gap: .65rem; }
input { min-width: 0; width: 100%; border: 1px solid #cbd5e1; border-radius: .6rem; padding: .75rem .85rem; font: inherit; outline-color: #2563eb; }
button { cursor: pointer; border: 0; border-radius: .6rem; padding: .72rem 1rem; background: #2563eb; color: white; font: inherit; font-weight: 700; }
button:hover { background: #1d4ed8; }
.toolbar { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.search { flex: 1; }.search input { background: #f8fafc; }.toolbar span { color: #64748b; white-space: nowrap; font-size: .9rem; }
.task-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #e2e8f0; }
.task-item { display: flex; align-items: center; gap: .75rem; padding: .85rem .2rem; border-bottom: 1px solid #e2e8f0; }
.toggle { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: #2563eb; }
.task-title { flex: 1; overflow-wrap: anywhere; }.completed .task-title { color: #94a3b8; text-decoration: line-through; }
.task-actions { display: flex; gap: .4rem; }.task-actions button { padding: .42rem .65rem; font-size: .82rem; background: #e8eef8; color: #334155; }.task-actions .delete { color: #b42318; background: #fff1f1; }
.empty-state { color: #64748b; text-align: center; padding: 1rem; }.message { margin: .75rem 0; color: #b42318; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .app-shell { padding: 2.5rem 0; }.toolbar { align-items: stretch; flex-direction: column; gap: .5rem; }.task-actions { flex-direction: column; }.task-actions button { padding: .3rem .45rem; } }