:root{--bg-start: #3a005f;--bg-end: #000030;--neon-pink: #ff00ff;--neon-blue: #00ffff;--text-color: #f0f8ff;--text-secondary: #c0c0d0;--card-bg: rgba(10, 0, 30, .7);--input-bg: rgba(0, 0, 0, .5);--success-color: #00ff7f;--error-color: #ff3333;--border-glow: #a020f0;--font-heading: "Electrolize", sans-serif;--font-body: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:linear-gradient(135deg,var(--bg-start) 0%,var(--bg-end) 100%);color:var(--text-color);min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;animation:backgroundAnimation 20s ease-in-out infinite alternate}@keyframes backgroundAnimation{0%{background:linear-gradient(135deg,var(--bg-start) 0%,var(--bg-end) 100%)}33%{background:linear-gradient(135deg,#5c007c,#001f4c)}66%{background:linear-gradient(135deg,#005f5f,#2a0b38)}to{background:linear-gradient(135deg,var(--bg-start) 0%,var(--bg-end) 100%)}}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right,rgba(0,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,0,255,.08) 1px,transparent 1px);background-size:60px 60px;opacity:.5;z-index:-1;animation:panGrid 60s linear infinite,gridColorShift 15s ease-in-out infinite alternate;transform:rotate(30deg) scale(2.5)}@keyframes panGrid{0%{background-position:0 0}to{background-position:6000px 6000px}}@keyframes gridColorShift{0%{background-image:linear-gradient(to right,rgba(0,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,0,255,.08) 1px,transparent 1px)}50%{background-image:linear-gradient(to right,rgba(255,0,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,255,255,.08) 1px,transparent 1px)}to{background-image:linear-gradient(to right,rgba(0,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,0,255,.08) 1px,transparent 1px)}}body:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px);background-size:100px 100px;opacity:.3;z-index:-2;animation:sparkle 120s linear infinite}@keyframes sparkle{0%{background-position:0 0}to{background-position:10000px 10000px}}.container{max-width:650px;width:100%;margin:0 auto;z-index:10;animation:fadeInDown 1.5s ease-out both}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}h1{font-family:var(--font-heading);text-align:center;font-size:3.2rem;font-weight:700;letter-spacing:3px;color:var(--neon-blue);text-shadow:0 0 15px var(--neon-blue),0 0 30px var(--neon-blue),0 0 45px rgba(0,255,255,.7);position:relative;margin:0 0 2.5rem;animation:flickerTitle 2s ease-in-out infinite alternate,glitch 5s linear infinite alternate}@keyframes glitch{0%{text-shadow:0 0 15px var(--neon-blue),0 0 30px var(--neon-blue),0 0 45px rgba(0,255,255,.7);transform:none}2%{text-shadow:0 0 15px var(--neon-blue),0 0 30px var(--neon-blue),0 0 45px rgba(0,255,255,.7),2px 2px var(--neon-pink);transform:translate(-2px,2px)}4%{text-shadow:0 0 15px var(--neon-blue),0 0 30px var(--neon-blue),0 0 45px rgba(0,255,255,.7),-2px -2px var(--neon-blue);transform:translate(2px,-2px)}6%{text-shadow:0 0 15px var(--neon-blue),0 0 30px var(--neon-blue),0 0 45px rgba(0,255,255,.7);transform:none}to{text-shadow:0 0 15px var(--neon-blue),0 0 30px var(--neon-blue),0 0 45px rgba(0,255,255,.7);transform:none}}@keyframes flickerTitle{0%,18%,22%,25%,53%,57%,to{opacity:1}20%,24%,55%{opacity:.8}}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px) brightness(1.2);backdrop-filter:blur(12px) brightness(1.2);border-radius:25px;padding:35px;border:2px solid var(--border-glow);box-shadow:0 0 25px rgba(var(--border-glow),.6),inset 0 0 15px rgba(var(--border-glow),.3);transition:all .5s ease}.card:hover{box-shadow:0 0 35px rgba(var(--border-glow),.8),inset 0 0 20px rgba(var(--border-glow),.5);transform:translateY(-5px)}form{display:flex;gap:15px;margin-bottom:30px}input[type=text]{flex:1;padding:16px 22px;background:var(--input-bg);border:1px solid var(--neon-pink);color:var(--text-color);border-radius:15px;font-size:1.1rem;box-shadow:inset 0 0 10px #f0f6;transition:all .3s ease;outline:none}input[type=text]:focus{border-color:var(--neon-blue);box-shadow:inset 0 0 15px #0ff9,0 0 10px var(--neon-blue)}input[type=text]::placeholder{color:var(--text-secondary);opacity:.8}button{padding:15px 25px;border:none;border-radius:15px;cursor:pointer;background:linear-gradient(45deg,var(--neon-blue),var(--neon-pink));color:var(--bg-end);font-weight:700;font-size:1.05rem;letter-spacing:1px;text-shadow:0 0 5px rgba(0,0,0,.3);box-shadow:0 0 20px #00ffffb3;transition:all .4s ease;position:relative;overflow:hidden;z-index:1}button:before{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translate(-100%);transition:all .7s ease;z-index:-1}button:hover:before{transform:translate(100%)}button:hover{transform:translateY(-3px);box-shadow:0 0 30px #00ffffe6,0 0 50px #ff00ffb3}button:active{transform:translateY(0);box-shadow:0 0 10px #00ffff80}button.secondary{background:var(--input-bg);color:var(--text-secondary);border:1px solid var(--text-secondary);box-shadow:none}button.secondary:hover{background:var(--text-secondary);color:var(--bg-end);border-color:var(--text-secondary);box-shadow:0 0 15px #c8c8dc80}ul{list-style:none;padding:0;margin:0}li{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:#0000004d;border:1px solid var(--neon-blue);border-radius:15px;margin-bottom:12px;transition:all .4s ease;position:relative;overflow:hidden;box-shadow:0 0 10px #00ffff4d}li:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 0 20px #0ff9,0 0 30px #ff00ff80;border-color:var(--neon-pink)}li:last-child{margin-bottom:0}.task{display:flex;align-items:center;gap:18px;flex:1;word-break:break-word;font-size:1.1rem;font-weight:400}.task.done span{text-decoration:none;opacity:.6;color:var(--text-secondary);position:relative}.task.done span:after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--neon-pink),transparent);animation:lineThroughGlitch .6s ease-out forwards}@keyframes lineThroughGlitch{0%{width:0;transform:skew(0);opacity:0}50%{width:100%;transform:skew(10deg);opacity:1}to{width:100%;transform:skew(0);opacity:1}}.task input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;min-width:28px;border:2px solid var(--neon-blue);background:var(--input-bg);border-radius:8px;cursor:pointer;position:relative;transition:all .3s ease;box-shadow:inset 0 0 8px #00ffff4d}.task input[type=checkbox]:hover{border-color:var(--neon-pink);box-shadow:inset 0 0 10px #f0f6}.task input[type=checkbox]:checked{background-color:var(--neon-pink);border-color:var(--neon-pink);box-shadow:0 0 15px var(--neon-pink),0 0 25px #ff00ffb3}.task input[type=checkbox]:checked:after{content:"✓";color:var(--bg-end);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:700}.badge{font-family:var(--font-heading);font-size:14px;padding:8px 16px;background:var(--input-bg);border-radius:999px;font-weight:600;color:var(--neon-blue);border:1px solid var(--neon-blue);text-shadow:0 0 8px rgba(0,255,255,.5);letter-spacing:1px;box-shadow:inset 0 0 5px #0ff3}.row{display:flex;align-items:center;gap:12px}.loading,.no-tasks{text-align:center;font-style:italic;opacity:.8;padding:30px;color:var(--text-secondary);font-size:1.1rem;text-shadow:0 0 5px rgba(200,200,220,.3)}.notification-center-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease-in-out forwards}.notification-popup{padding:40px 50px;width:90%;max-width:450px;border-radius:20px;font-weight:600;font-size:1.2rem;text-align:center;letter-spacing:1px;position:relative;overflow:hidden;border:2px solid;box-shadow:0 0 30px;transform:scale(.8);opacity:0;animation:popupScaleIn .5s cubic-bezier(.68,-.55,.27,1.55) forwards}.notification-popup.success{background:linear-gradient(145deg,#00ff7f4d,#00a0504d);color:var(--success-color);border-color:var(--success-color);box-shadow-color:rgba(0,255,127,.8)}.notification-popup.error{background:linear-gradient(145deg,#ff33334d,#a020204d);color:var(--error-color);border-color:var(--error-color);box-shadow-color:rgba(255,51,51,.8)}.notification-popup:after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:#fff9;box-shadow:0 0 10px #fffc;animation:scanner 2s infinite}@keyframes scanner{0%{transform:translateY(0)}50%{transform:translateY(calc(100% - 3px))}to{transform:translateY(0)}}@keyframes popupScaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 768px){h1{font-size:2.5rem;letter-spacing:2px;margin-bottom:2rem}.card{padding:25px;border-radius:20px}form{flex-direction:column;gap:10px;margin-bottom:20px}button{width:100%;padding:12px 20px;font-size:1rem}input[type=text]{padding:14px 20px;font-size:1rem}li{flex-direction:column;align-items:flex-start;gap:10px;padding:15px 18px;border-radius:12px}.row{width:100%;justify-content:space-between;flex-wrap:wrap;margin-top:5px}.task{font-size:1rem;gap:14px}.task input[type=checkbox]{width:24px;height:24px;min-width:24px}.badge{font-size:12px;padding:6px 12px}.notification-popup{padding:30px 40px;font-size:1rem;border-radius:15px}}li button{padding:12px 20px;font-size:.9rem;letter-spacing:.5px;border-radius:12px}li button.secondary{font-size:.9rem}@media (max-width: 768px){li button{padding:10px 15px;font-size:.85rem}}