body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#6c5ce7;--primary-light:#a29bfe;--danger:#e74c3c;--danger-light:#ff6b6b;--bg:#f8f9fa;--card-bg:#fff;--text:#2d3436;--text-light:#636e72;--border:#e9ecef;--shadow:0 4px 20px #00000014;--radius:12px}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:flex-start;min-height:100vh;padding:40px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}.app{width:100%;max-width:560px}.container{background:var(--card-bg);border-radius:20px;padding:40px 32px;box-shadow:0 20px 60px #00000026}h1{text-align:center;color:var(--text);letter-spacing:-.5px;margin-bottom:28px;font-size:2rem;font-weight:800}.todo-form{gap:10px;margin-bottom:20px;display:flex}.todo-input{border:2px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;flex:1;padding:14px 18px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.todo-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6c5ce71a}.todo-input::placeholder{color:var(--text-light)}.add-btn{background:var(--primary);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:14px 24px;font-size:1rem;font-weight:600;transition:background .2s,transform .1s}.add-btn:hover{background:#5a4bd1}.add-btn:active{transform:scale(.97)}.filters{justify-content:center;gap:6px;margin-bottom:20px;display:flex}.filter-btn{color:var(--text-light);cursor:pointer;background:0 0;border:none;border-radius:20px;padding:8px 18px;font-size:.875rem;font-weight:600;transition:all .2s}.filter-btn:hover{background:var(--bg);color:var(--text)}.filter-btn.active{background:var(--primary);color:#fff}.todo-list{flex-direction:column;gap:8px;margin-bottom:20px;list-style:none;display:flex}.todo-item{background:var(--bg);border-radius:var(--radius);justify-content:space-between;align-items:center;padding:14px 16px;transition:all .3s;animation:.3s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.todo-item:hover{background:#edf0f2}.todo-item.completed{opacity:.6}.todo-item.completed .todo-text{color:var(--text-light);text-decoration:line-through}.todo-label{cursor:pointer;flex:1;align-items:center;gap:14px;display:flex}.todo-label input[type=checkbox]{display:none}.checkmark{border:2px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex}.todo-label input:checked+.checkmark{background:var(--primary);border-color:var(--primary)}.todo-label input:checked+.checkmark:after{content:"✓";color:#fff;font-size:14px;font-weight:700}.todo-text{color:var(--text);font-size:.95rem;transition:all .2s}.delete-btn{color:var(--text-light);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:1.1rem;transition:all .2s}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{color:var(--danger);background:#e74c3c1a}.empty-state{text-align:center;color:var(--text-light);padding:40px 20px;font-size:.95rem}.footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding-top:16px;display:flex}.count{color:var(--text-light);font-size:.875rem;font-weight:500}.clear-btn{color:var(--text-light);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:.875rem;transition:all .2s}.clear-btn:hover{color:var(--danger);background:#e74c3c14}@media (width<=480px){.container{padding:28px 20px}h1{font-size:1.6rem}.add-btn{padding:14px 16px}}