@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-gradient:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);--bg-gradient-mobile:linear-gradient(180deg, #a8edea 0%, #fed6e3 100%);--card-bg:#fff6;--card-border:#ffffff80;--card-shadow:0 8px 32px 0 #1f26871a;--text-main:#2d3436;--text-muted:#636e72;--input-bg:#ffffffb3;--primary:#6c5ce7;--primary-hover:#5f27cd;--danger:#ff7675;--danger-hover:#d63031;--success:#00b894;--border-color:#0000000d;--item-bg:#ffffff80;--item-bg-hover:#fffc}[data-theme=dark]{--bg-gradient:linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);--bg-gradient-mobile:linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);--card-bg:#1e282c80;--card-border:#ffffff1a;--card-shadow:0 8px 32px 0 #0006;--text-main:#f5f6fa;--text-muted:#b2bec3;--input-bg:#0000004d;--primary:#a29bfe;--primary-hover:#81ecec;--border-color:#ffffff1a;--item-bg:#0003;--item-bg-hover:#0006}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s}body{background:var(--bg-gradient);min-height:100vh;color:var(--text-main);background-attachment:fixed;justify-content:center;align-items:center;display:flex}@media (width<=768px){body{background:var(--bg-gradient-mobile);background-attachment:fixed}}.app-container{width:100%;max-width:600px;padding:20px}.todo-card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:24px;flex-direction:column;gap:20px;padding:30px;animation:.6s cubic-bezier(.16,1,.3,1) forwards slideUp;display:flex}@media (width<=480px){.todo-card{border-radius:20px;padding:20px}}.header{justify-content:space-between;align-items:center;display:flex}.header h1{letter-spacing:-.5px;font-size:2rem;font-weight:700}.theme-toggle{cursor:pointer;color:var(--text-main);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.5rem;transition:all .2s;display:flex}.theme-toggle:hover{background:var(--item-bg);transform:rotate(15deg)}.todo-input-container{gap:12px;display:flex}.todo-input{background:var(--input-bg);border:1px solid var(--border-color);color:var(--text-main);border-radius:14px;outline:none;flex:1;padding:16px 20px;font-size:1rem;transition:all .3s;box-shadow:inset 0 2px 4px #00000005}.todo-input::placeholder{color:var(--text-muted)}.todo-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c5ce733}.add-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;padding:0 24px;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.add-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #6c5ce74d}.add-btn:active{transform:translateY(0)}.add-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.filters{gap:10px;margin-bottom:4px;display:flex}.filter-btn{border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:6px 16px;font-size:.85rem;font-weight:500;transition:all .2s}.filter-btn:hover{background:var(--item-bg);color:var(--text-main)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.todo-list{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;flex-direction:column;gap:12px;max-height:55vh;padding-right:5px;list-style:none;display:flex;overflow-y:auto}.todo-list::-webkit-scrollbar{width:6px}.todo-list::-webkit-scrollbar-track{background:0 0}.todo-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}.todo-item{background:var(--item-bg);will-change:transform, opacity;border-left:4px solid #d63031;border-radius:14px;align-items:center;gap:16px;padding:16px;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn;display:flex}.todo-item:hover{background:var(--item-bg-hover);transform:translate(4px)}.todo-item.completed{border-left-color:var(--success);opacity:.75}.todo-item.completed .todo-text{color:var(--text-muted);text-decoration:line-through}.checkbox-container{cursor:pointer;justify-content:center;align-items:center;display:flex}.checkbox-custom{border:2px solid var(--border-color);color:#0000;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex}.checkbox-custom:hover{border-color:var(--primary)}.todo-item.completed .checkbox-custom{background:var(--success);border-color:var(--success);color:#fff}.todo-text{word-break:break-word;-webkit-user-select:none;user-select:none;flex:1;font-size:1rem;font-weight:500;line-height:1.4;transition:color .3s}.delete-btn{color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;transition:all .2s;display:flex}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{color:var(--danger);background:#ff767526}@media (hover:none){.delete-btn{opacity:1}}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;align-items:center;gap:16px;padding:40px 20px;animation:.4s forwards fadeIn;display:flex}.empty-state-icon{opacity:.6;font-size:3.5rem}.empty-state p{font-size:1rem;font-weight:500}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.todo-item.removing{animation:.3s cubic-bezier(.4,0,.2,1) forwards fadeOut}@keyframes fadeOut{0%{opacity:1;transform:scale(1)translate(-10px)}to{opacity:0;transform:scale(.95)translate(20px)}}