:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #1f2937; background: #f3f4f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: start center; padding: 3rem 1rem; }
.container { width: min(100%, 680px); }
.card { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 10px 30px #11182714; }
h1 { margin: 0; font-size: 1.8rem; }
.subtitle { color: #6b7280; margin: .35rem 0 1.5rem; }
.new-task { display: flex; gap: .6rem; }
input { min-width: 0; flex: 1; border: 1px solid #d1d5db; border-radius: 8px; padding: .7rem .8rem; font: inherit; }
button { border: 0; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; font: inherit; padding: .7rem 1rem; }
button:hover { background: #1d4ed8; }
.tasks { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.task { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #e5e7eb; }
.task span { flex: 1; overflow-wrap: anywhere; }
.task.done span { color: #6b7280; text-decoration: line-through; }
.check { width: 1.5rem; height: 1.5rem; border: 1px solid #9ca3af; border-radius: 50%; background: #fff; color: #15803d; padding: 0; font-weight: 700; }
.check:hover { background: #dcfce7; }
.delete { background: transparent; color: #dc2626; padding: .3rem; font-size: .85rem; }
.delete:hover { background: #fef2f2; }
.empty, .message { margin: 1.25rem 0 0; color: #6b7280; }
.message.error { color: #b91c1c; }
.error-card p { color: #6b7280; line-height: 1.6; }
.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) { body { padding-top: 1rem; } .card { padding: 1.25rem; } .new-task { flex-direction: column; } }