:root{--mochi-pill-bg: rgba(10, 10, 30, .85);--mochi-pill-text: rgba(0, 255, 255, .9)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,Courier,monospace;background:#0a0a1e;color:#0ff;min-height:100vh;overflow-x:hidden}.app{min-height:100vh;position:relative;padding:20px}.space-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:radial-gradient(ellipse at top,#1a0a3e,#0a0a1e 50%),radial-gradient(circle at 20% 80%,rgba(120,0,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,255,255,.1) 0%,transparent 50%);animation:pulse 8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.space-bg:before,.space-bg:after{content:"";position:absolute;width:2px;height:2px;background:#fff;box-shadow:100px 200px #fff,200px 100px #fff,300px 300px #fff,400px 150px #fff,150px 400px #fff,500px 250px #fff,250px 500px #fff,350px 450px #fff,450px 350px #fff,50px 50px #fff,550px 50px #fff,50px 550px #fff,180px 280px #00ffff80,380px 180px #7800ff80,280px 380px #00ffff80,480px 280px #7800ff80;animation:twinkle 3s ease-in-out infinite}.space-bg:after{animation-delay:1.5s}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.3}}.header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding:20px;background:#0a0a1e99;border:1px solid rgba(0,255,255,.3);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 30px #0ff3}.logo{display:flex;align-items:center;gap:15px}.logo-icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,#0ff,#7800ff);border-radius:10px;box-shadow:0 0 20px #00ffff80;animation:rotate 10s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo-text{font-size:28px;font-weight:700;letter-spacing:4px;text-transform:uppercase;background:linear-gradient(90deg,#0ff,#7800ff,#0ff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s ease infinite}@keyframes gradient-shift{0%,to{background-position:0% center}50%{background-position:100% center}}.stats{display:flex;align-items:center;gap:30px}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:24px;font-weight:700;color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.8)}.stat-label{font-size:10px;letter-spacing:2px;color:#0ff9;text-transform:uppercase}.stat-circle{position:relative}.progress-ring{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#00ffff1a;stroke-width:4}.progress-ring-fill{fill:none;stroke:#0ff;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 5px rgba(0,255,255,.8))}.progress-text{font-size:14px;font-weight:700;fill:#0ff;transform:rotate(90deg);transform-origin:center}.main-content{position:relative;z-index:1;display:grid;grid-template-columns:2fr 1fr;gap:30px;max-width:1400px;margin:0 auto}@media(max-width:968px){.main-content{grid-template-columns:1fr}}.tasks-section{background:#0a0a1e99;border:1px solid rgba(0,255,255,.3);border-radius:15px;padding:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 30px #00ffff1a}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(0,255,255,.2)}.section-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.6)}.section-icon{font-size:24px;animation:pulse-icon 2s ease-in-out infinite}@keyframes pulse-icon{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.task-count{font-size:16px;color:#0ff9;padding:5px 15px;background:#00ffff1a;border-radius:20px;border:1px solid rgba(0,255,255,.3)}.tasks-list{display:flex;flex-direction:column;gap:12px}.task-item{display:flex;align-items:center;gap:15px;padding:15px;background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:10px;transition:all .3s ease;position:relative;overflow:hidden}.task-item:before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(180deg,#0ff,#7800ff);opacity:0;transition:opacity .3s ease}.task-item:hover{background:#00ffff1a;border-color:#00ffff80;box-shadow:0 0 15px #0ff3}.task-item:hover:before{opacity:1}.task-item.completed{opacity:.6}.task-item.completed .task-text{text-decoration:line-through;color:#00ffff80}.task-checkbox{width:28px;height:28px;border:2px solid rgba(0,255,255,.5);border-radius:6px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0}.task-checkbox:hover{border-color:#0ff;box-shadow:0 0 10px #00ffff80}.task-item.completed .task-checkbox{background:linear-gradient(135deg,#0ff,#7800ff);border-color:#0ff;box-shadow:0 0 15px #0ff9}.checkmark{color:#0a0a1e;font-size:18px;font-weight:700;animation:pop .3s ease}@keyframes pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.task-text{flex:1;font-size:16px;color:#0ff;letter-spacing:1px}.task-delete{width:28px;height:28px;border:1px solid rgba(255,0,100,.3);border-radius:6px;background:transparent;color:#ff006499;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0;opacity:0}.task-item:hover .task-delete{opacity:1}.task-delete:hover{border-color:#ff0064;color:#ff0064;background:#ff00641a;box-shadow:0 0 10px #ff006480}.add-task-section{margin-top:30px;display:flex;gap:10px}.category-select{padding:12px 15px;background:#00ffff1a;border:1px solid rgba(0,255,255,.3);border-radius:8px;color:#0ff;font-size:14px;font-family:Courier New,monospace;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.category-select:hover,.category-select:focus{outline:none;border-color:#0ff;box-shadow:0 0 10px #00ffff4d}.category-select option{background:#0a0a1e;color:#0ff}.task-input{flex:1;padding:12px 15px;background:#00ffff0d;border:1px solid rgba(0,255,255,.3);border-radius:8px;color:#0ff;font-size:16px;font-family:Courier New,monospace;transition:all .3s ease}.task-input::placeholder{color:#0ff6}.task-input:focus{outline:none;border-color:#0ff;box-shadow:0 0 15px #00ffff4d;background:#00ffff1a}.add-button{width:50px;height:50px;background:linear-gradient(135deg,#0ff,#7800ff);border:none;border-radius:10px;color:#0a0a1e;font-size:28px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 0 20px #0ff6;display:flex;align-items:center;justify-content:center}.add-button:hover{transform:scale(1.05);box-shadow:0 0 30px #0ff9}.add-button:active{transform:scale(.95)}.reset-button{margin-top:20px;width:100%;padding:12px;background:#7800ff33;border:1px solid rgba(120,0,255,.4);border-radius:8px;color:#7800ff;font-size:14px;font-family:Courier New,monospace;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .3s ease}.reset-button:hover{background:#7800ff4d;border-color:#7800ff;box-shadow:0 0 15px #7800ff66}.progress-section{background:#0a0a1e99;border:1px solid rgba(0,255,255,.3);border-radius:15px;padding:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 30px #00ffff1a;height:fit-content}.toggle-graph-btn{padding:8px 20px;background:#00ffff1a;border:1px solid rgba(0,255,255,.3);border-radius:20px;color:#0ff;font-size:12px;font-family:Courier New,monospace;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .3s ease}.toggle-graph-btn:hover{background:#0ff3;border-color:#0ff;box-shadow:0 0 10px #00ffff4d}.graph-container{margin-top:20px;padding:20px;background:#0000004d;border-radius:10px;border:1px solid rgba(0,255,255,.2)}.progress-graph{width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(0,255,255,.3))}.graph-label{fill:#0ff9;font-size:12px;font-family:Courier New,monospace}.graph-empty{margin-top:20px;padding:40px;text-align:center;color:#0ff6;font-size:14px;letter-spacing:1px;background:#0003;border-radius:10px;border:1px dashed rgba(0,255,255,.2)}@media(max-width:768px){.header{flex-direction:column;gap:20px}.logo-text{font-size:20px}.add-task-section{flex-direction:column}.category-select{width:100%}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:#00ffff4d;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#00ffff80}