:root{--bg-1:#111827;--bg-2:#1f2937;--card:#ffffff14;--text:#f8fafc;--muted:#cbd5e1;--primary:#7dd3fc;--primary-strong:#38bdf8;--border:#f8fafc33}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100vh;color:var(--text);font-family:var(--font-geist-sans), Arial, sans-serif;background:radial-gradient(circle at 20% 0%, #0ea5e9, transparent 40%), radial-gradient(circle at 80% 15%, #8b5cf6, transparent 38%), var(--bg-1)}.todo-page{place-items:center;min-height:100vh;padding:2.5rem 1rem;display:grid}.todo-shell{border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0f172ab3,#0f172a4d);border-radius:1.25rem;width:min(720px,95vw);padding:1.5rem;box-shadow:0 18px 55px #02061759}.todo-header h1{margin:0 0 .45rem;font-size:clamp(1.6rem,3vw,2.2rem)}.todo-header p{color:var(--muted);margin:0}.todo-form{grid-template-columns:1fr auto;gap:.75rem;margin-top:1.4rem;display:grid}.todo-form input{border:1px solid var(--border);width:100%;color:var(--text);background:#0f172acc;border-radius:.9rem;padding:.75rem .9rem}.todo-form input::placeholder{color:#94a3b8}.todo-form button,.filter-buttons button,.task button{cursor:pointer;border:0;border-radius:.8rem;padding:.65rem .9rem;font-weight:600}.todo-form button{color:#00222e;background:linear-gradient(135deg, var(--primary), var(--primary-strong));transition:transform .15s,filter .15s}.todo-form button:hover{filter:brightness(1.05);transform:translateY(-1px)}.filter-buttons{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.filter-buttons button{color:var(--text);border:1px solid var(--border);background:#0f172a73;transition:all .15s}.filter-buttons button.active{color:#e0f2fe;background:#38bdf833;border-color:#38bdf873}.task-list{gap:.6rem;margin:1.2rem 0 0;padding:0;list-style:none;display:grid}.task{border:1px solid var(--border);background:var(--card);border-radius:.9rem;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem;display:flex}.task-row{align-items:center;gap:.6rem;display:inline-flex}.task-row span{overflow-wrap:anywhere}.task button{color:#fee2e2;background:#ef44442e;border:1px solid #ef44446b}.task.done .task-row span{color:var(--muted);text-decoration:line-through}.empty-state{text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:.9rem;padding:1rem}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}