:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--bg-card: rgba(255, 255, 255, .04);--bg-card-hover: rgba(255, 255, 255, .07);--bg-input: rgba(255, 255, 255, .06);--bg-input-focus: rgba(255, 255, 255, .08);--bg-filter: rgba(255, 255, 255, .05);--bg-filter-hover: rgba(255, 255, 255, .1);--bg-filter-active: linear-gradient(135deg, rgba(255, 0, 110, .2), rgba(251, 86, 7, .2));--bg-progress: rgba(255, 255, 255, .08);--bg-clear: rgba(255, 255, 255, .04);--bg-clear-hover: rgba(255, 0, 110, .1);--bg-delete-hover: rgba(255, 0, 110, .15);--bg-checkbox-hover: rgba(255, 0, 110, .1);--border: rgba(255, 255, 255, .06);--border-hover: rgba(255, 255, 255, .1);--border-input: rgba(255, 255, 255, .1);--border-filter: rgba(255, 255, 255, .08);--border-filter-active: rgba(255, 0, 110, .4);--border-progress: rgba(255, 255, 255, .06);--border-checkbox: rgba(255, 255, 255, .2);--border-clear: rgba(255, 255, 255, .08);--border-clear-hover: rgba(255, 0, 110, .3);--text: #fafafa;--text-secondary: rgba(255, 255, 255, .9);--text-muted: rgba(255, 255, 255, .6);--text-dim: rgba(255, 255, 255, .5);--text-faint: rgba(255, 255, 255, .35);--text-ghost: rgba(255, 255, 255, .15);--text-placeholder: rgba(255, 255, 255, .3);--text-input: #fff;--accent: #ff006e;--accent-glow: rgba(255, 0, 110, .3);--accent-glow-strong: rgba(255, 0, 110, .6);--accent-filter-text: #ff4d8d;--accent-delete: #ff4d8d;--accent-focus-shadow: rgba(255, 0, 110, .15);--accent-btn-shadow: rgba(255, 0, 110, .4);--progress-shimmer: rgba(255, 255, 255, .3);--text-shadow-progress: 0 1px 3px rgba(0,0,0,.5);--strikethrough: rgba(255, 255, 255, .3);--toggle-bg: rgba(255, 255, 255, .08);--toggle-bg-hover: rgba(255, 255, 255, .14);--toggle-border: rgba(255, 255, 255, .1)}[data-theme=light]{color-scheme:light;--bg: #f5f5f7;--bg-card: rgba(0, 0, 0, .03);--bg-card-hover: rgba(0, 0, 0, .06);--bg-input: rgba(0, 0, 0, .04);--bg-input-focus: rgba(0, 0, 0, .06);--bg-filter: rgba(0, 0, 0, .04);--bg-filter-hover: rgba(0, 0, 0, .08);--bg-filter-active: linear-gradient(135deg, rgba(255, 0, 110, .12), rgba(251, 86, 7, .12));--bg-progress: rgba(0, 0, 0, .08);--bg-clear: rgba(0, 0, 0, .03);--bg-clear-hover: rgba(255, 0, 110, .08);--bg-delete-hover: rgba(255, 0, 110, .1);--bg-checkbox-hover: rgba(255, 0, 110, .08);--border: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .14);--border-input: rgba(0, 0, 0, .12);--border-filter: rgba(0, 0, 0, .08);--border-filter-active: rgba(255, 0, 110, .35);--border-progress: rgba(0, 0, 0, .06);--border-checkbox: rgba(0, 0, 0, .2);--border-clear: rgba(0, 0, 0, .08);--border-clear-hover: rgba(255, 0, 110, .25);--text: #1a1a1a;--text-secondary: rgba(0, 0, 0, .85);--text-muted: rgba(0, 0, 0, .55);--text-dim: rgba(0, 0, 0, .45);--text-faint: rgba(0, 0, 0, .3);--text-ghost: rgba(0, 0, 0, .12);--text-placeholder: rgba(0, 0, 0, .35);--text-input: #1a1a1a;--accent: #e0005f;--accent-glow: rgba(224, 0, 95, .2);--accent-glow-strong: rgba(224, 0, 95, .45);--accent-filter-text: #d4005a;--accent-delete: #d4005a;--accent-focus-shadow: rgba(224, 0, 95, .12);--accent-btn-shadow: rgba(224, 0, 95, .3);--progress-shimmer: rgba(255, 255, 255, .4);--text-shadow-progress: 0 1px 3px rgba(0,0,0,.2);--strikethrough: rgba(0, 0, 0, .2);--toggle-bg: rgba(0, 0, 0, .06);--toggle-bg-hover: rgba(0, 0, 0, .1);--toggle-border: rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);transition:background .35s ease,color .35s ease}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes celebrate{0%{transform:scale(1)}30%{transform:scale(1.08)}50%{transform:scale(.95)}70%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes confettiFall{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}to{transform:translateY(180px) translate(var(--x)) rotate(var(--r));opacity:0}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px var(--accent-glow)}50%{box-shadow:0 0 40px var(--accent-glow-strong)}}@keyframes strikethrough{0%{width:0}to{width:100%}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px) rotate(-1deg)}40%{transform:translate(4px) rotate(1deg)}60%{transform:translate(-2px) rotate(-.5deg)}80%{transform:translate(2px) rotate(.5deg)}}@keyframes countUp{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes themeToggleSpin{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem 4rem;max-width:520px;margin:0 auto;position:relative}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;overflow:hidden}.confetti-particle{position:absolute;top:30%;width:10px;height:10px;border-radius:2px;animation:confettiFall 1s ease-out forwards}.theme-toggle{position:fixed;top:1.25rem;right:1.25rem;width:48px;height:48px;border-radius:14px;border:1px solid var(--toggle-border);background:var(--toggle-bg);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:all .3s ease;z-index:200;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}.theme-toggle:hover{background:var(--toggle-bg-hover);transform:scale(1.08)}.theme-toggle:active{transform:scale(.92)}.theme-toggle.spinning{animation:themeToggleSpin .4s ease}.hero{text-align:center;margin-bottom:2rem;animation:fadeInUp .6s ease-out}.title{font-size:2.8rem;font-weight:900;letter-spacing:-.04em;background:linear-gradient(135deg,#ff006e,#fb5607,#ffbe0b,#8338ec,#3a86ff);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;display:flex;align-items:center;justify-content:center;gap:.5rem}.title-icon{font-size:2.2rem;-webkit-text-fill-color:initial;animation:pulseGlow 2s ease-in-out infinite;border-radius:50%}.subtitle{font-size:1.15rem;color:var(--text-muted);margin-top:.5rem;font-weight:500;animation:fadeInUp .6s ease-out .15s both}.progress-bar-container{width:100%;height:12px;background:var(--bg-progress);border-radius:999px;margin-bottom:2rem;position:relative;overflow:hidden;animation:fadeInUp .4s ease-out;border:1px solid var(--border-progress)}.progress-bar{height:100%;background:linear-gradient(90deg,#ff006e,#fb5607,#ffbe0b);border-radius:999px;transition:width .6s cubic-bezier(.34,1.56,.64,1);position:relative}.progress-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,var(--progress-shimmer) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-label{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.65rem;font-weight:800;color:#fff;text-shadow:var(--text-shadow-progress)}.input-row{display:flex;gap:.75rem;width:100%;margin-bottom:1.25rem;animation:fadeInUp .6s ease-out .2s both}.todo-input{flex:1;padding:1rem 1.25rem;font-size:1rem;background:var(--bg-input);border:2px solid var(--border-input);border-radius:16px;color:var(--text-input);outline:none;transition:all .3s ease;font-family:inherit}.todo-input::placeholder{color:var(--text-placeholder)}.todo-input:focus{border-color:var(--accent);background:var(--bg-input-focus);box-shadow:0 0 30px var(--accent-focus-shadow)}.add-btn{width:56px;height:56px;border:none;border-radius:16px;background:linear-gradient(135deg,#ff006e,#fb5607);color:#fff;font-size:1.8rem;font-weight:300;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 0 30px var(--accent-btn-shadow)}.add-btn:active:not(:disabled){transform:scale(.95)}.add-btn:disabled{opacity:.3;cursor:not-allowed}.filters{display:flex;gap:.5rem;width:100%;margin-bottom:1.5rem;animation:fadeInUp .5s ease-out .3s both}.filter-btn{flex:1;padding:.6rem 1rem;font-size:.85rem;font-weight:600;background:var(--bg-filter);border:1px solid var(--border-filter);border-radius:12px;color:var(--text-dim);cursor:pointer;transition:all .25s ease;font-family:inherit}.filter-btn:hover{background:var(--bg-filter-hover);color:var(--text-muted)}.filter-btn.active{background:var(--bg-filter-active);border-color:var(--border-filter-active);color:var(--accent-filter-text)}.todo-list{width:100%;display:flex;flex-direction:column;gap:.6rem}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-faint);font-size:1rem;font-weight:500;animation:fadeInUp .4s ease-out}.todo-item{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;transition:all .3s ease;animation:slideIn .35s ease-out;position:relative;overflow:hidden}.todo-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ff006e,#fb5607);opacity:0;transition:opacity .3s ease}.todo-item:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translate(4px)}.todo-item:hover:before{opacity:1}.todo-item.done{opacity:.5}.todo-item.celebrating{animation:celebrate .5s ease-out}.checkbox{width:28px;height:28px;border-radius:10px;border:2px solid var(--border-checkbox);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);flex-shrink:0;padding:0}.checkbox:hover{border-color:var(--accent);background:var(--bg-checkbox-hover);transform:scale(1.15)}.checkbox.checked{background:linear-gradient(135deg,#ff006e,#fb5607);border-color:transparent}.checkmark{color:#fff;font-size:1rem;font-weight:800;line-height:1}.todo-text{flex:1;font-size:1rem;font-weight:500;color:var(--text-secondary);transition:all .3s ease}.todo-item.done .todo-text{text-decoration:line-through;text-decoration-color:var(--strikethrough);text-decoration-thickness:2px;color:var(--text-faint)}.delete-btn{width:32px;height:32px;border:none;background:transparent;color:var(--text-ghost);font-size:1.4rem;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:0;flex-shrink:0;padding:0}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:var(--bg-delete-hover);color:var(--accent-delete);animation:shake .4s ease}.clear-btn{margin-top:2rem;padding:.75rem 2rem;font-size:.85rem;font-weight:600;background:var(--bg-clear);border:1px solid var(--border-clear);border-radius:12px;color:var(--text-faint);cursor:pointer;transition:all .25s ease;font-family:inherit;animation:fadeInUp .4s ease-out}.clear-btn:hover{background:var(--bg-clear-hover);border-color:var(--border-clear-hover);color:var(--accent-delete)}