*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f172a;--surface: #1e293b;--surface2: #334155;--border: #475569;--text: #f1f5f9;--text-muted: #94a3b8;--accent: #3b82f6;--accent-dark: #2563eb;--danger: #ef4444;--success: #22c55e;--radius: 12px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#root{min-height:100%;display:flex;flex-direction:column}.app{flex:1;max-width:480px;margin:0 auto;padding:calc(var(--safe-top) + 24px) 16px calc(var(--safe-bottom) + 24px);width:100%;display:flex;flex-direction:column;gap:16px}.header{text-align:center;padding:8px 0}.header h1{font-size:2.5rem;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:.875rem;color:var(--text-muted);margin-top:4px}.add-form{display:flex;gap:8px}.add-input{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:1rem;padding:14px 16px;outline:none;transition:border-color .15s;-webkit-appearance:none}.add-input::placeholder{color:var(--text-muted)}.add-input:focus{border-color:var(--accent)}.add-btn{background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-size:1.5rem;font-weight:300;width:52px;height:52px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;flex-shrink:0}.add-btn:active{background:var(--accent-dark);transform:scale(.95)}.filters{display:flex;gap:8px;background:var(--surface);border-radius:var(--radius);padding:6px}.filter-btn{flex:1;background:transparent;border:none;border-radius:8px;color:var(--text-muted);font-size:.875rem;font-weight:500;padding:8px;cursor:pointer;transition:background .15s,color .15s}.filter-btn.active{background:var(--accent);color:#fff}.todo-list{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}.empty{text-align:center;color:var(--text-muted);padding:48px 0;font-size:.95rem}.todo-item{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius);padding:14px 12px;transition:opacity .15s;animation:slide-in .2s ease}@keyframes slide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.todo-item.done{opacity:.55}.check-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,background .15s}.check-btn svg{width:12px;height:12px;color:#fff}.check-btn.checked{background:var(--success);border-color:var(--success)}.check-btn:not(.checked):active{border-color:var(--success)}.todo-text{flex:1;font-size:1rem;line-height:1.4;word-break:break-word;cursor:default;-webkit-user-select:none;user-select:none}.todo-item.done .todo-text{text-decoration:line-through}.edit-input{flex:1;background:var(--surface2);border:1.5px solid var(--accent);border-radius:8px;color:var(--text);font-size:1rem;padding:6px 10px;outline:none;-webkit-appearance:none}.delete-btn{background:transparent;border:none;color:var(--text-muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;opacity:0;transition:opacity .15s,color .15s}.todo-item:hover .delete-btn,.todo-item:focus-within .delete-btn{opacity:1}@media(hover:none){.delete-btn{opacity:.5}.delete-btn:active{color:var(--danger);opacity:1}}.delete-btn:hover{color:var(--danger)}.footer{text-align:center;padding-top:8px}.clear-btn{background:transparent;border:1.5px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.85rem;padding:8px 16px;cursor:pointer;transition:border-color .15s,color .15s}.clear-btn:hover,.clear-btn:active{border-color:var(--danger);color:var(--danger)}