@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Caveat:wght@500;700&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff5f7;--card-bg:#fff;--pink:#ff6b9d;--pink-light:#ffb3cc;--peach:#ffd3b6;--mint:#a8e6cf;--lavender:#c9b1ff;--text:#4a3f5c;--text-muted:#9b8fa8;--border:#f0e6f0;--shadow:0 8px 32px #ff6b9d1f}body{background:var(--bg);min-height:100vh;color:var(--text);background-image:radial-gradient(circle at 20% 20%,#ffe0ec 0%,#0000 50%),radial-gradient(circle at 80% 80%,#e8d5ff 0%,#0000 50%);font-family:Nunito,sans-serif}.page{justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}.card{background:var(--card-bg);box-shadow:var(--shadow),0 2px 0 var(--pink-light);border:1.5px solid var(--border);border-radius:24px;width:100%;max-width:480px;overflow:hidden}.card-header{text-align:center;border-bottom:1.5px solid var(--border);background:linear-gradient(135deg,#fff0f5 0%,#f5eeff 100%);padding:2rem 2rem 1rem}.title{color:var(--pink);letter-spacing:.5px;font-family:Caveat,cursive;font-size:2.4rem;font-weight:700;line-height:1}.subtitle{color:var(--text-muted);margin-top:4px;font-size:.82rem}.input-wrapper{border-bottom:1.5px solid var(--border);padding:1.25rem 1.5rem}.input-row{gap:8px;display:flex}.todo-input{border:1.5px solid var(--border);color:var(--text);background:#fafafa;border-radius:50px;outline:none;flex:1;padding:.6rem 1rem;font-family:Nunito,sans-serif;font-size:.9rem;transition:border-color .2s}.todo-input:focus{border-color:var(--pink-light);background:#fff}.todo-input::placeholder{color:var(--text-muted)}.add-btn{background:var(--pink);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;width:38px;height:38px;font-size:1.4rem;line-height:1;transition:transform .15s,background .15s}.add-btn:hover{background:#ff4d8d;transform:scale(1.08)}.add-btn:active{transform:scale(.95)}.priority-row{gap:6px;margin-top:8px;display:flex}.priority-btn{cursor:pointer;color:var(--text-muted);background:#f5f5f5;border:1.5px solid #0000;border-radius:50px;flex:1;padding:4px 0;font-family:Nunito,sans-serif;font-size:.75rem;font-weight:600;transition:all .15s}.priority-btn.active{background:var(--p-color);border-color:var(--p-color);color:var(--text);box-shadow:0 2px 6px #00000014}.todo-list{padding:.5rem 0;list-style:none}.todo-item{border-left:3px solid #0000;align-items:center;gap:10px;padding:.7rem 1.5rem;transition:background .15s;display:flex}.todo-item:hover{background:#fff5f8}.todo-item.priority-low{border-left-color:var(--mint)}.todo-item.priority-medium{border-left-color:var(--peach)}.todo-item.priority-high{border-left-color:#ffaaa5}.todo-item.completed .todo-text{color:var(--text-muted);text-decoration:line-through}.check-btn{border:2px solid var(--pink-light);cursor:pointer;background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;transition:all .15s;display:flex}.check-btn:hover{border-color:var(--pink)}.todo-item.completed .check-btn{background:var(--pink);border-color:var(--pink)}.checkmark{color:#fff;font-size:.7rem;font-weight:800}.todo-text{flex:1;font-size:.9rem}.priority-badge{font-size:.9rem}.delete-btn{color:#ccc;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:1.1rem;transition:all .15s;display:flex}.delete-btn:hover{color:#ff6b6b;background:#ffe0e0}.empty-state{text-align:center;color:var(--text-muted);padding:2.5rem 1rem;font-size:.88rem}.empty-icon{margin-bottom:8px;font-size:2rem;display:block}.todo-footer{border-top:1.5px solid var(--border);color:var(--text-muted);background:#fafafa;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:.9rem 1.5rem;font-size:.78rem;display:flex}.filter-group{gap:4px;display:flex}.filter-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:1.5px solid #0000;border-radius:50px;padding:3px 10px;font-family:Nunito,sans-serif;font-size:.75rem;transition:all .15s}.filter-btn.active{background:var(--pink);color:#fff}.filter-btn:not(.active):hover{border-color:var(--pink-light);color:var(--text)}.clear-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:3px 6px;font-family:Nunito,sans-serif;font-size:.75rem;transition:all .15s}.clear-btn:hover{color:var(--pink);background:#fff0f5}@media (max-width:400px){.todo-footer{flex-direction:column;align-items:flex-start}.count-text{display:none}}