:root{--bg:#f3f4f8;--card:#fff;--text:#1f2937;--muted:#9ca3af;--border:#e5e7eb;--accent:#4f46e5;--accent-hover:#4338ca;--danger:#ef4444;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}.page{max-width:560px;margin:0 auto;padding:64px 20px 40px}.card{background:var(--card);border-radius:16px;padding:28px;box-shadow:0 1px 2px #1018280a,0 8px 24px #1018280f}.card-header h1{letter-spacing:-.02em;font-size:28px;font-weight:700}.subtitle{color:var(--muted);margin-top:4px;font-size:14px}.add-form{gap:8px;margin-top:24px;display:flex}.add-form input{font:inherit;border:1px solid var(--border);border-radius:10px;outline:none;flex:1;padding:12px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}.add-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4f46e526}.add-form button{background:var(--accent);color:#fff;border-radius:10px;padding:0 20px;font-weight:600;transition:background .15s,opacity .15s}.add-form button:hover:not(:disabled){background:var(--accent-hover)}.add-form button:disabled{opacity:.45;cursor:not-allowed}.toolbar{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.filters{background:var(--bg);border-radius:10px;gap:4px;padding:4px;display:flex}.filter{color:#6b7280;border-radius:7px;padding:6px 14px;font-size:13px;font-weight:500;transition:background .15s,color .15s}.filter.active{color:var(--accent);background:#fff;box-shadow:0 1px 2px #00000014}.link-btn{color:var(--muted);font-size:13px}.link-btn:hover{color:var(--danger)}.task-list{margin-top:12px;list-style:none}.task{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:12px 4px;display:flex}.task:last-child{border-bottom:none}.check{color:#fff;border:2px solid #d1d5db;border-radius:50%;flex-shrink:0;place-items:center;width:22px;height:22px;transition:border-color .15s,background .15s;display:grid}.check:hover{border-color:var(--accent)}.task.done .check{background:var(--accent);border-color:var(--accent)}.title{cursor:pointer;word-break:break-word;flex:1;font-size:15px;line-height:1.4;transition:color .15s}.task.done .title{color:var(--muted);text-decoration:line-through}.delete{width:28px;height:28px;color:var(--muted);opacity:0;border-radius:6px;flex-shrink:0;place-items:center;transition:opacity .15s,background .15s,color .15s;display:grid}.task:hover .delete,.delete:focus-visible{opacity:1}.delete:hover{color:var(--danger);background:#fef2f2}@media (hover:none){.delete{opacity:1}}.empty{text-align:center;color:var(--muted);padding:24px 0 8px;font-size:14px}.footnote{text-align:center;color:var(--muted);margin-top:16px;font-size:12px}@media (width<=480px){.page{padding-top:32px}.card{padding:20px}}