:root{--bg:linear-gradient(135deg, #dbeafe, #f0f9ff);--card:#ffffffe6;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--green:#22c55e;--blue:#3b82f6;--red:#ef4444;--yellow:#facc15;--shadow:0 15px 40px #00000026}body.dark{--bg:linear-gradient(135deg, #020617, #0f172a);--card:#1e293be6;--text:#f1f5f9;--muted:#94a3b8;--border:#334155;--shadow:0 15px 40px #0006}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,Arial,sans-serif;transition:all .3s;overflow-x:hidden}.container{justify-content:center;align-items:center;min-height:100vh;display:flex}.todo-box{background:var(--card);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:420px;box-shadow:var(--shadow);border-radius:16px;padding:25px;position:relative}.todo-box:before{content:"";z-index:-1;background:linear-gradient(120deg,#3b82f626,#0000,#22c55e26);border-radius:16px;position:absolute;inset:0}h1{text-align:center;color:var(--blue);margin-bottom:20px}.theme-toggle{border-radius:12px;width:100%;margin-bottom:20px;padding:12px;font-weight:700;transition:all .3s}body.light .theme-toggle{color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1)}body.dark .theme-toggle{color:#000;background:linear-gradient(135deg,#facc15,#f97316)}.theme-toggle:hover{transform:translateY(-2px)scale(1.02)}.theme-toggle{letter-spacing:.3px;cursor:pointer;text-align:center;border:none;border-radius:8px;width:120px;padding:6px 0;font-size:13px;font-weight:600;transition:all .2s;display:inline-block}.container.light .theme-toggle{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 3px 10px #3b82f64d}.container.dark .theme-toggle{color:#111;background:linear-gradient(135deg,#facc15,#f59e0b);box-shadow:0 3px 10px #facc154d}.theme-toggle:hover{opacity:.95;transform:translateY(-1px)scale(1.03)}.theme-toggle:active{opacity:1;transform:scale(.95)}.todo-input{gap:10px;margin-bottom:20px;display:flex}.todo-input input{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:10px;flex:1;padding:12px}.todo-input input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #3b82f633}.todo-input button{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:10px;padding:10px 16px}.filters{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.filters button{color:#fff;border-radius:10px;padding:8px 14px;font-weight:600;transition:all .25s}.btn-all{background:linear-gradient(135deg,#3b82f6,#2563eb)}.btn-active{color:#000;background:linear-gradient(135deg,#facc15,#eab308)}.btn-completed{background:linear-gradient(135deg,#22c55e,#16a34a)}.btn-clear{background:linear-gradient(135deg,#ef4444,#dc2626)}.filters button:hover{transform:translateY(-2px)scale(1.05)}.filters .active{transform:scale(1.1);box-shadow:inset 0 0 0 2px #fff,0 0 10px #fff9}.todo-stats{gap:10px;margin-bottom:15px;display:flex}.todo-stats__item{text-align:center;background:var(--border);border-radius:12px;flex:1;padding:10px}body.dark .todo-stats__item{background:#1e293b}ul{max-height:40vh;padding-right:6px;list-style:none;overflow-y:auto}ul::-webkit-scrollbar{width:6px}ul::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.todo-item{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:12px;transition:all .2s;display:flex}.todo-item:hover{background:#00000008}body.dark .todo-item:hover{background:#ffffff0d}.todo-item__text{flex:1}.todo-item--completed .todo-item__text{color:var(--muted);text-decoration:line-through}.todo-item__actions{gap:6px;display:flex}.todo-item__actions button{color:#fff;border-radius:8px;padding:6px 10px;font-size:13px}.btn-edit{background:var(--blue)}.btn-delete{background:var(--red)}.btn-save{background:var(--green)}.btn-cancel{background:var(--red)}.todo-edit-input{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:10px;flex:1;padding:10px}.todo-edit-input:focus{border-color:var(--blue);outline:none}button{cursor:pointer;border:none;transition:all .2s}button:hover{opacity:.9}button:active{transform:scale(.95)}.checkbox-wrapper{cursor:pointer;align-items:center;gap:8px;display:flex;position:relative}.checkbox-wrapper input{display:none}.checkmark{border:2px solid var(--border);background:0 0;border-radius:6px;width:20px;height:20px;transition:all .25s;display:inline-block;position:relative}.checkbox-wrapper:hover .checkmark{border-color:var(--blue);box-shadow:0 0 4px #3b82f64d}.checkbox-wrapper input:checked+.checkmark{background:linear-gradient(135deg, var(--green), #16a34a);border-color:var(--green);box-shadow:0 0 8px #22c55e80}.checkmark:after{content:"";opacity:0;border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;transition:all .2s;position:absolute;top:2px;left:6px;transform:rotate(45deg)scale(0)}.checkbox-wrapper input:checked+.checkmark:after{opacity:1;transform:rotate(45deg)scale(1)}.completed-text{color:var(--muted);opacity:.8;text-decoration:line-through;transition:color .2s,opacity .2s}.todo-edit-actions{gap:10px;margin-top:8px;display:flex}.btn-save{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:10px;flex:1;padding:8px 16px;font-weight:600;transition:all .25s;box-shadow:0 4px 12px #22c55e66}.btn-save:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 6px 16px #22c55e80}.btn-save:active{transform:scale(.95)}.btn-cancel{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:10px;flex:1;padding:8px 16px;font-weight:600;transition:all .25s;box-shadow:0 4px 12px #ef444466}.btn-cancel:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 6px 16px #ef444480}.btn-cancel:active{transform:scale(.95)}.auth-container{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{background:var(--card);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:420px;box-shadow:var(--shadow);border-radius:16px;padding:25px;position:relative}.auth-card h2{text-align:center;color:var(--blue);margin-bottom:20px}.auth-card input{border:1px solid var(--border);width:100%;color:var(--text);background:0 0;border-radius:10px;margin-bottom:12px;padding:12px}.auth-card input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #3b82f633}.auth-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:10px;width:100%;padding:12px;font-weight:600;transition:all .2s}.auth-btn:hover{transform:translateY(-2px)scale(1.02)}.auth-btn:active{transform:scale(.95)}.auth-switch{text-align:center;color:var(--muted);margin-top:15px;font-size:14px}.auth-switch span{color:var(--blue);cursor:pointer;font-weight:600}.auth-switch span:hover{text-decoration:underline}.logout-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .2s;position:absolute;top:15px;right:15px;box-shadow:0 4px 12px #ef44444d}.logout-btn:hover{transform:translateY(-2px)}.logout-btn:active{transform:scale(.95)}@media (width<=480px){.todo-box,.auth-card{padding:20px;width:92%!important}h1{font-size:20px}}@keyframes popIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}