*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}:root{--bg:#f4f5f7;--text:#1a1a1a;--card-bg:#fff;--border:#d1d5db;--muted:#6b7280;--accent:#2563eb;--accent-dark:#1d4ed8;--danger:#b91c1c;--danger-bg:#fee2e2}[data-theme=dark]{--bg:#111827;--text:#e5e7eb;--card-bg:#1f2937;--border:#374151;--muted:#9ca3af;--accent:#3b82f6;--accent-dark:#2563eb;--danger:#f87171;--danger-bg:#450a0a}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}body{background-color:var(--bg);color:var(--text);transition:background-color .2s,color .2s}.app{width:100%;max-width:480px;margin:0 auto;padding:16px}@media (width>=600px){.app{background-color:var(--card-bg);border:1px solid var(--border);border-radius:12px;max-width:640px;margin:32px auto;padding:32px;box-shadow:0 4px 12px #00000014}}.app-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;display:flex}.app h1{margin:0;font-size:1.5rem}.theme-toggle{background-color:var(--card-bg);border:1px solid var(--border);cursor:pointer;border-radius:8px;flex-shrink:0;width:44px;height:44px;font-size:18px;line-height:1}.add-form{gap:8px;margin-bottom:16px;display:flex}.add-form input{min-width:0;min-height:44px;color:var(--text);background-color:var(--card-bg);border:1px solid var(--border);border-radius:8px;flex:1;padding:12px;font-size:16px}.add-form input::placeholder{color:var(--muted);opacity:1}.add-form input:focus{outline:2px solid var(--accent);border-color:#0000}.add-form button{color:#fff;background-color:var(--accent);border:none;border-radius:8px;min-height:44px;padding:0 20px;font-size:16px;font-weight:600}.add-form button:active{background-color:var(--accent-dark)}.empty-state{color:var(--muted);text-align:center}.filter-bar{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.filter-bar button{min-width:0;min-height:44px;color:var(--text);background-color:var(--card-bg);border:1px solid var(--border);border-radius:8px;flex:100px;font-size:14px;font-weight:600}.filter-bar button.active{color:#fff;background-color:var(--accent);border-color:var(--accent)}.task-list{flex-direction:column;gap:8px;margin:0;padding:0;display:flex}.task-item{background-color:var(--card-bg);cursor:grab;border-radius:8px;align-items:center;gap:8px;min-height:48px;padding:8px 8px 8px 12px;transition:opacity .2s;animation:.25s task-in;display:flex;box-shadow:0 1px 2px #00000014}@keyframes task-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.task-item.exiting{opacity:0;transform:translateY(8px)}.task-item.dragging{opacity:.85;cursor:grabbing;transition:none;animation:none;box-shadow:0 6px 16px #0003}.task-drag-handle{width:44px;height:44px;color:var(--muted);pointer-events:none;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;line-height:1;display:flex}.task-checkbox{cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.task-item input[type=checkbox]{width:26px;height:26px;accent-color:var(--accent);margin:0}.task-item .task-text{overflow-wrap:anywhere;flex:1;min-width:0;font-size:16px}.task-item .task-text.completed{color:var(--muted);text-decoration:line-through}.task-item button{min-width:44px;min-height:44px;color:var(--danger);background:0 0;border:none;border-radius:8px;flex-shrink:0;padding:0 12px;font-size:14px}.task-item button:active{background-color:var(--danger-bg)}