@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Orbitron,monospace;background:radial-gradient(circle at 20% 100%,#1a0033 0%,transparent 20%),radial-gradient(circle at 40% 100%,#2d0066 0%,transparent 15%),radial-gradient(circle at 60% 100%,#1a0033 0%,transparent 25%),radial-gradient(circle at 80% 100%,#2d0066 0%,transparent 18%),radial-gradient(circle at 25% 85%,#ff6b9d 0%,transparent 3px),radial-gradient(circle at 35% 90%,#c44cff 0%,transparent 2px),radial-gradient(circle at 50% 88%,#ff6b9d 0%,transparent 3px),radial-gradient(circle at 65% 92%,#c44cff 0%,transparent 2px),radial-gradient(circle at 75% 87%,#ff6b9d 0%,transparent 3px),linear-gradient(180deg,#0a0015,#1a0033 60%,#2d0066);background-size:200px 100px,150px 80px,180px 120px,160px 90px,4px 4px,4px 4px,4px 4px,4px 4px,4px 4px,100% 100%;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;min-height:100vh;color:#fff;overflow-x:hidden;image-rendering:pixelated}#root{position:relative;z-index:1}.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.star{position:absolute;width:4px;height:4px;background:#fff;border-radius:0;opacity:.9;animation:twinkle 3s infinite ease-in-out;image-rendering:pixelated;box-shadow:0 0 2px #c44cff}@keyframes twinkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}.container{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px;padding:20px}.main-title{font-family:"Press Start 2P",cursive;font-size:2.5rem;font-weight:400;color:#ff6b9d;margin-bottom:20px;text-shadow:2px 2px 0px #c44cff,4px 4px 0px #8b5cf6,0 0 20px rgba(196,76,255,.8);image-rendering:pixelated;letter-spacing:2px}.subtitle{font-family:"Press Start 2P",monospace;font-size:.8rem;color:#e0b3ff;font-weight:400;letter-spacing:1px;image-rendering:pixelated}.dashboard.bento-layout{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,minmax(120px,auto));gap:20px;margin-top:40px;max-width:1200px;margin-left:auto;margin-right:auto}.bento-item{display:flex;flex-direction:column}.bento-love-message{grid-column:1 / 2;grid-row:1 / 2}.bento-time{grid-column:2 / 3;grid-row:1 / 2}.bento-avatar{grid-column:3 / 5;grid-row:1 / 3}.bento-letter{grid-column:1 / 3;grid-row:2 / 4}.bento-bedtime{grid-column:3 / 5;grid-row:3 / 4}.bento-comfort{grid-column:3 / 4;grid-row:4 / 5}.bento-sudoku{grid-column:4 / 5;grid-row:4 / 6}.bento-todo{grid-column:3 / 4;grid-row:5 / 7}.bento-pou{grid-column:1 / 3;grid-row:4 / 8}.card{background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;padding:25px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;transition:all .2s ease;position:relative;overflow:hidden;image-rendering:pixelated}.card:before{content:"";position:absolute;top:3px;left:-100%;width:100%;height:3px;background:linear-gradient(90deg,transparent,#ff6b9d,transparent);animation:shimmer 4s infinite;image-rendering:pixelated}@keyframes shimmer{0%{left:-100%}25%{left:-50%}50%{left:0%}75%{left:50%}to{left:100%}}.card-title{font-family:"Press Start 2P",monospace;font-size:.9rem;font-weight:400;margin-bottom:20px;color:#ff6b9d;display:flex;align-items:center;gap:15px;text-shadow:1px 1px 0px #c44cff;letter-spacing:1px;image-rendering:pixelated}.card-content{color:#e0b3ff;line-height:1.8;font-size:.9rem;font-family:Orbitron,monospace;letter-spacing:.5px}.love-message{font-family:Orbitron,monospace;font-size:1rem;color:#ffd1dc;font-weight:500;text-shadow:1px 1px 0px rgba(196,76,255,.5);letter-spacing:.5px}.pixelated-icon{width:24px;height:24px;display:inline-block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;position:relative}.icon-heart{background:linear-gradient(to right,transparent 0%,transparent 20%,#ff6b9d 20%,#ff6b9d 40%,transparent 40%,transparent 60%,#ff6b9d 60%,#ff6b9d 80%,transparent 80%),linear-gradient(to bottom,transparent 0%,transparent 16.67%,#ff6b9d 16.67%,#ff6b9d 83.33%,transparent 83.33%);background-size:100% 4px,100% 100%;background-position:0 0,0 0;border:none}.icon-heart:before{content:"";position:absolute;top:2px;left:2px;width:4px;height:4px;background:#c44cff;box-shadow:4px 0 #c44cff,12px 0 #c44cff,16px 0 #c44cff,0 4px #ff6b9d,4px 4px #ff6b9d,8px 4px #ff6b9d,12px 4px #ff6b9d,16px 4px #ff6b9d,20px 4px #ff6b9d,2px 8px #ff6b9d,4px 8px #ff6b9d,8px 8px #ff6b9d,12px 8px #ff6b9d,16px 8px #ff6b9d,18px 8px #ff6b9d,4px 12px #ff6b9d,8px 12px #ff6b9d,12px 12px #ff6b9d,16px 12px #ff6b9d,8px 16px #ff6b9d,12px 16px #ff6b9d}.icon-clock{background:transparent;border:2px solid #c44cff;border-radius:50%;position:relative}.icon-clock:before{content:"";position:absolute;top:2px;left:2px;width:2px;height:2px;background:#8b5cf6;box-shadow:4px 0 #c44cff,8px 0 #c44cff,12px 0 #c44cff,16px 0 #c44cff,18px 2px #c44cff,18px 6px #c44cff,18px 10px #c44cff,18px 14px #c44cff,16px 16px #c44cff,12px 16px #c44cff,8px 16px #c44cff,4px 16px #c44cff,0 16px #c44cff,0 12px #c44cff,0 8px #c44cff,0 4px #c44cff,8px 4px #ff6b9d,8px 6px #ff6b9d,8px 8px #ff6b9d,10px 8px #ff6b9d,12px 8px #ff6b9d}.icon-letter{background:#e0b3ff;border:2px solid #c44cff;border-radius:2px;position:relative}.icon-letter:before{content:"";position:absolute;top:2px;left:2px;width:2px;height:2px;background:#c44cff;box-shadow:4px 0 #c44cff,8px 0 #c44cff,12px 0 #c44cff,16px 0 #c44cff,2px 2px #c44cff,6px 2px #c44cff,10px 2px #c44cff,14px 2px #c44cff,4px 4px #c44cff,8px 4px #c44cff,12px 4px #c44cff,2px 10px #ff6b9d,4px 10px #ff6b9d,6px 10px #ff6b9d,8px 10px #ff6b9d,10px 10px #ff6b9d,12px 10px #ff6b9d,14px 10px #ff6b9d,16px 10px #ff6b9d,2px 12px #ff6b9d,4px 12px #ff6b9d,6px 12px #ff6b9d,8px 12px #ff6b9d,10px 12px #ff6b9d,12px 12px #ff6b9d}.cat-corner{position:fixed;bottom:20px;right:20px;font-size:3rem;z-index:10;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.floating-hearts{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.heart{position:absolute;font-size:16px;color:#c44cff;animation:float-up 10s infinite linear;opacity:.4;image-rendering:pixelated;text-shadow:1px 1px 0px #ff6b9d}@keyframes float-up{0%{transform:translateY(100vh) rotate(0) scale(1);opacity:0}10%{opacity:.4;transform:translateY(90vh) rotate(45deg) scale(1.2)}25%{transform:translateY(75vh) rotate(90deg) scale(1)}50%{transform:translateY(50vh) rotate(180deg) scale(1.3)}75%{transform:translateY(25vh) rotate(270deg) scale(1);opacity:.4}90%{opacity:.4;transform:translateY(10vh) rotate(315deg) scale(1.1)}to{transform:translateY(-20px) rotate(360deg) scale(1);opacity:0}}.avatar-section{height:100%;min-height:300px}.avatar-container{position:relative;width:100%;height:100%;background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:15px}.background-image{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;filter:none;opacity:1;transition:opacity .3s ease}.avatar-image{width:80%;height:auto;max-width:200px;image-rendering:pixelated;z-index:2;margin-bottom:-25px}.background-controls{display:flex;align-items:center;justify-content:center;gap:15px;z-index:3;margin-bottom:10px}.bg-arrow{background:linear-gradient(135deg,#ff6b9d,#c44cff);border:2px solid #8b5cf6;border-radius:4px;color:#fff;font-family:"Press Start 2P",monospace;font-size:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;image-rendering:pixelated;box-shadow:inset 1px 1px #ff6b9d4d,inset -1px -1px #8b5cf64d}.bg-arrow:hover{transform:scale(1.1);background:linear-gradient(135deg,#c44cff,#ff6b9d);box-shadow:inset 1px 1px #ff6b9d80,inset -1px -1px #8b5cf680,0 0 10px #c44cff99}.bg-arrow:active{transform:scale(.95)}.bg-indicator{font-family:"Press Start 2P",monospace;font-size:10px;color:#e0b3ff;background:#1a0033cc;padding:8px 12px;border-radius:4px;border:1px solid #c44cff;text-shadow:1px 1px 0px rgba(196,76,255,.5)}@media (max-width: 768px){.main-title{font-size:1.5rem;letter-spacing:1px}.subtitle{font-size:.6rem}.dashboard.bento-layout{display:flex;flex-direction:column;gap:15px}.bento-avatar{order:-1}.bento-love-message{order:1}.bento-time{order:2}.bento-letter{order:3}.bento-bedtime{order:4}.bento-comfort{order:5;max-width:300px;align-self:center}.bento-sudoku{order:6}.bento-todo{order:7}.bento-secret{order:8}.bento-love-message,.bento-time,.bento-letter,.bento-bedtime,.bento-comfort,.bento-secret,.bento-sudoku,.bento-todo{width:100%}.avatar-section{min-height:250px}.avatar-image{width:70%;max-width:120px}.bg-arrow{width:35px;height:35px;font-size:10px}.card{padding:20px}.card-title{font-size:.7rem}.card-content{font-size:.8rem}.retro-play-btn{width:35px;height:35px;font-size:10px}.retro-time{font-size:.4rem}.comfort-text{font-size:.6rem}.comfort-square{min-height:150px}.secret-content{font-size:.6rem!important}.secret-image{width:60px;height:60px}.retro-audio-player{height:60px}}.icon-moon{background:transparent;border:none;position:relative}.icon-moon:before{content:"";position:absolute;top:2px;left:4px;width:2px;height:2px;background:#ffd1dc;box-shadow:2px 0 #ffd1dc,4px 0 #ffd1dc,6px 0 #ffd1dc,-2px 2px #ffd1dc,0 2px #ffd1dc,2px 2px #ffd1dc,4px 2px #ffd1dc,6px 2px #ffd1dc,8px 2px #ffd1dc,-2px 4px #ffd1dc,0 4px #ffd1dc,2px 4px #ffd1dc,4px 4px #ffd1dc,6px 4px #ffd1dc,8px 4px #ffd1dc,0 6px #ffd1dc,2px 6px #ffd1dc,4px 6px #ffd1dc,6px 6px #ffd1dc,2px 8px #ffd1dc,4px 8px #ffd1dc,14px 2px #c44cff,12px 12px #ff6b9d}.icon-hug{background:transparent;border:none;position:relative}.icon-hug:before{content:"";position:absolute;top:4px;left:6px;width:2px;height:2px;background:#ff6b9d;box-shadow:2px 0 #ff6b9d,4px 0 #ff6b9d,6px 0 #ff6b9d,8px 0 #ff6b9d,10px 0 #ff6b9d,0 2px #ff6b9d,2px 2px #c44cff,4px 2px #c44cff,6px 2px #c44cff,8px 2px #c44cff,10px 2px #ff6b9d,0 4px #c44cff,2px 4px #c44cff,4px 4px #c44cff,6px 4px #c44cff,8px 4px #c44cff,10px 4px #c44cff,2px 6px #ff6b9d,4px 6px #ff6b9d,6px 6px #ff6b9d,8px 6px #ff6b9d,4px 8px #ffd1dc,6px 8px #ffd1dc}.retro-audio-player{background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;padding:15px;height:80px;display:flex;align-items:center}.audio-line{display:flex;align-items:center;gap:15px;width:100%}.retro-play-btn{background:linear-gradient(135deg,#ff6b9d,#c44cff);border:2px solid #8b5cf6;border-radius:4px;width:40px;height:40px;font-family:"Press Start 2P",monospace;font-size:12px;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:inset 1px 1px #ff6b9d4d,inset -1px -1px #8b5cf64d}.retro-play-btn:hover{transform:scale(1.05);background:linear-gradient(135deg,#c44cff,#ff6b9d);box-shadow:inset 1px 1px #ff6b9d80,inset -1px -1px #8b5cf680,0 0 10px #c44cff99}.retro-progress-container{flex:1;display:flex;align-items:center;gap:10px}.retro-progress-bar{flex:1;height:6px;background:#8b5cf666;border:1px solid #8b5cf6;border-radius:0;overflow:hidden;image-rendering:pixelated}.retro-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b9d,#c44cff);transition:width .1s ease;image-rendering:pixelated}.retro-time{font-family:"Press Start 2P",monospace;font-size:.5rem;color:#e0b3ff;white-space:nowrap}.comfort-square{background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;cursor:pointer;text-align:center;padding:20px;transition:all .3s ease;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:200px}.comfort-square:hover{transform:translateY(-3px) scale(1.02);box-shadow:inset 2px 2px #ff6b9d66,inset -2px -2px #8b5cf666,0 8px 20px #c44cff99;border-color:#ff6b9d}.comfort-text{font-family:"Press Start 2P",monospace;font-size:.8rem;color:#ffd1dc;line-height:1.6;text-shadow:1px 1px 0px rgba(196,76,255,.5);animation:fadeIn .5s ease-in-out;letter-spacing:1px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.secret-message{background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;cursor:pointer;text-align:center;padding:20px;transition:all .3s ease;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:100%}.secret-message:hover{transform:translateY(-3px) scale(1.02);box-shadow:inset 2px 2px #ff6b9d66,inset -2px -2px #8b5cf666,0 8px 20px #c44cff99;border-color:#ff6b9d}.secret-content{font-family:"Press Start 2P",monospace;font-size:.8rem;color:#ffd1dc;line-height:1.6;text-shadow:1px 1px 0px rgba(196,76,255,.5);animation:fadeIn .5s ease-in-out;letter-spacing:1px}.secret-revealed{display:flex;flex-direction:column;align-items:center;gap:15px}.secret-image{width:80px;height:80px;border-radius:8px;border:2px solid #ff6b9d;image-rendering:pixelated;box-shadow:0 0 15px #c44cff99}.sudoku-container{display:flex;flex-direction:column;align-items:center;gap:15px;background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;padding:20px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;height:fit-content;max-height:600px}.sudoku-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px}.sudoku-header h3{font-family:"Press Start 2P",cursive;font-size:.9rem;color:#ff6b9d;text-shadow:1px 1px 0px #c44cff;margin:0}.sudoku-new-btn{font-family:"Press Start 2P",cursive;font-size:.6rem;background:linear-gradient(135deg,#ff6b9d,#c44cff);color:#fff;border:2px solid #ff6b9d;border-radius:4px;padding:10px 15px;cursor:pointer;text-shadow:1px 1px 0px rgba(0,0,0,.5);transition:all .2s ease}.sudoku-new-btn:hover{background:linear-gradient(135deg,#c44cff,#8b5cf6);box-shadow:0 0 10px #c44cffcc}.sudoku-grid{display:grid;grid-template-columns:repeat(9,40px);grid-template-rows:repeat(9,40px);gap:1px;border:3px solid #ff6b9d;background:#ff6b9d}.sudoku-cell{width:40px;height:40px;background:#1a0033e6;border:1px solid rgba(196,68,255,.15);color:#e0b3ff;font-family:"Press Start 2P",cursive;font-size:.8rem;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sudoku-cell:hover{background:#c44cff33;box-shadow:inset 0 0 8px #ff6b9d4d}.sudoku-cell-prefilled{background:#1a0033e6!important;color:#ff6b9d!important;font-weight:700;cursor:not-allowed;border:1px solid rgba(255,107,157,.3)!important}.sudoku-cell-prefilled:hover{background:#1a0033e6!important;box-shadow:none!important}.border-bottom-thick{border-bottom:3px solid #ff6b9d!important}.border-right-thick{border-right:3px solid #ff6b9d!important}.sudoku-loading{color:#e0b3ff;font-family:"Press Start 2P",cursive;font-size:.6rem;text-align:center;animation:pulse 2s infinite}.sudoku-complete{text-align:center;color:#4ecdc4;font-family:"Press Start 2P",cursive;animation:celebrateText 1s ease-in-out}.sudoku-complete h4{font-size:.7rem;margin-bottom:8px;text-shadow:2px 2px 0px #2d0066}.sudoku-complete p{font-size:.5rem;color:#96ceb4}@keyframes celebrateText{0%{transform:scale(1)}50%{transform:scale(1.1);color:#feca57}to{transform:scale(1)}}.confetti-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1000}.confetti-particle{position:absolute;width:8px;height:8px;border-radius:2px}.confetti-particle.circle{border-radius:50%}.confetti-particle.square{border-radius:2px}.number-selector{display:flex;gap:6px;margin-top:15px;justify-content:center;flex-wrap:wrap}.number-btn{width:35px;height:35px;background:#1a0033e6;border:2px solid #c44cff;border-radius:6px;color:#e0b3ff;font-family:"Press Start 2P",cursive;font-size:.7rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.number-btn:hover{background:#c44cff33;box-shadow:0 0 8px #ff6b9d66}.number-btn.selected{background:linear-gradient(135deg,#ff6b9d,#c44cff);border-color:#ff6b9d;color:#fff;box-shadow:0 0 12px #ff6b9dcc,inset 0 2px 4px #fff3;transform:scale(1.1)}.sudoku-stats{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:15px;padding:10px 15px;background:#1a003399;border:2px solid #c44cff;border-radius:8px;box-shadow:0 0 10px #c44cff4d}.sudoku-timer,.sudoku-lives{display:flex;align-items:center;gap:8px;color:#e0b3ff;font-family:"Press Start 2P",cursive;font-size:.7rem}.stats-icon{font-size:.9rem}.hearts-display{display:flex;gap:2px;margin-left:8px}.heart.alive{color:#ff6b9d;filter:drop-shadow(0 0 4px rgba(255,107,157,.8))}.heart.dead{color:#555;opacity:.3}.sudoku-game-over{text-align:center;color:#ff6b9d;font-family:"Press Start 2P",cursive;animation:gameOverPulse 2s ease-in-out infinite;margin-top:15px}.sudoku-game-over h4{font-size:.7rem;margin-bottom:8px;color:#ff4757;text-shadow:2px 2px 0px #2d0066}.sudoku-game-over p{font-size:.4rem;color:#e0b3ff;margin-bottom:12px}.sudoku-retry-btn{font-family:"Press Start 2P",cursive;font-size:.4rem;background:linear-gradient(135deg,#ff4757,#ff6b9d);color:#fff;border:2px solid #ff4757;border-radius:4px;padding:8px 12px;cursor:pointer;text-shadow:1px 1px 0px rgba(0,0,0,.5);transition:all .2s ease}.sudoku-retry-btn:hover{background:linear-gradient(135deg,#ff6b9d,#c44cff);box-shadow:0 0 10px #ff4757cc}.completion-time{font-size:.4rem!important;color:#4ecdc4!important;margin-top:5px!important}.shake{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}@keyframes gameOverPulse{0%,to{opacity:1}50%{opacity:.7}}.todo-container{background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;padding:20px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;height:100%;display:flex;flex-direction:column;gap:15px}.todo-header{display:flex;align-items:center;gap:12px;margin-bottom:5px}.todo-header h3{font-family:"Press Start 2P",cursive;font-size:.9rem;color:#ff6b9d;text-shadow:1px 1px 0px #c44cff;margin:0;letter-spacing:1px}.icon-list{background:transparent;border:none;position:relative}.icon-list:before{content:"";position:absolute;top:2px;left:2px;width:2px;height:2px;background:#c44cff;box-shadow:4px 0 #ff6b9d,8px 0 #ff6b9d,12px 0 #ff6b9d,16px 0 #ff6b9d,0 4px #c44cff,4px 4px #ff6b9d,8px 4px #ff6b9d,12px 4px #ff6b9d,16px 4px #ff6b9d,0 8px #c44cff,4px 8px #ff6b9d,8px 8px #ff6b9d,12px 8px #ff6b9d,16px 8px #ff6b9d,0 12px #c44cff,4px 12px #ff6b9d,8px 12px #ff6b9d,12px 12px #ff6b9d,16px 12px #ff6b9d,0 16px #c44cff,4px 16px #ff6b9d,8px 16px #ff6b9d,12px 16px #ff6b9d,16px 16px #ff6b9d}.todo-input-section{display:flex;gap:10px;align-items:center}.todo-input{flex:1;background:#1a0033cc;border:2px solid #c44cff;border-radius:4px;padding:12px 15px;color:#e0b3ff;font-family:Orbitron,monospace;font-size:.8rem;transition:all .2s ease;image-rendering:pixelated}.todo-input:focus{outline:none;border-color:#ff6b9d;box-shadow:0 0 12px #ff6b9d66;background:#1a0033e6}.todo-input::placeholder{color:#e0b3ff80;font-style:italic}.todo-add-btn{background:linear-gradient(135deg,#ff6b9d,#c44cff);border:2px solid #8b5cf6;border-radius:4px;width:45px;height:45px;font-family:"Press Start 2P",monospace;font-size:1.2rem;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:inset 1px 1px #ff6b9d4d,inset -1px -1px #8b5cf64d}.todo-add-btn:hover{transform:scale(1.05);background:linear-gradient(135deg,#c44cff,#ff6b9d);box-shadow:inset 1px 1px #ff6b9d80,inset -1px -1px #8b5cf680,0 0 10px #c44cff99}.todo-add-btn:active{transform:scale(.95)}.todo-list{flex:1;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;padding-right:8px}.todo-list::-webkit-scrollbar{width:8px}.todo-list::-webkit-scrollbar-track{background:#1a003399;border-radius:4px}.todo-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff6b9d,#c44cff);border-radius:4px;border:1px solid #8b5cf6}.todo-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c44cff,#8b5cf6)}.todo-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#1a003399;border:1px solid rgba(196,76,255,.3);border-radius:4px;transition:all .2s ease;animation:fadeIn .3s ease-in-out}.todo-item:hover{background:#c44cff1a;border-color:#ff6b9d80;transform:translate(3px)}.todo-item.completed{opacity:.6;background:#1a003366}.todo-item.completed .todo-text{text-decoration:line-through;color:#e0b3ff99}.todo-checkbox{background:transparent;border:2px solid #c44cff;border-radius:50%;width:24px;height:24px;font-family:"Press Start 2P",monospace;font-size:.6rem;color:#ff6b9d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.todo-checkbox:hover{border-color:#ff6b9d;background:#ff6b9d1a;transform:scale(1.1)}.todo-item.completed .todo-checkbox{background:linear-gradient(135deg,#ff6b9d,#c44cff);border-color:#ff6b9d;color:#fff}.todo-text{flex:1;color:#e0b3ff;font-family:Orbitron,monospace;font-size:.8rem;line-height:1.4;word-wrap:break-word}.todo-remove-btn{background:transparent;border:2px solid #ff4757;border-radius:4px;width:24px;height:24px;font-family:"Press Start 2P",monospace;font-size:.8rem;color:#ff4757;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.todo-remove-btn:hover{background:#ff475733;transform:scale(1.1);box-shadow:0 0 8px #ff475766}.todo-empty{text-align:center;color:#e0b3ff99;font-family:"Press Start 2P",monospace;font-size:.7rem;padding:30px 20px;font-style:italic;animation:pulse 2s infinite}.todo-loading{text-align:center;color:#e0b3ff;font-family:"Press Start 2P",monospace;font-size:.7rem;padding:30px 20px;animation:pulse 2s infinite}.todo-stats{padding-top:10px;border-top:1px solid rgba(196,76,255,.3);text-align:center}.todo-counter{color:#e0b3ffb3;font-family:"Press Start 2P",monospace;font-size:.6rem;letter-spacing:.5px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.question-component{background:linear-gradient(135deg,#c44cff26,#8b5cf61a),#1a0033e6;border-radius:8px;padding:30px;margin-bottom:30px;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 6px 16px #c44cff66;text-align:center}.question-title{font-family:"Press Start 2P",cursive;font-size:1rem;color:#ff6b9d;text-shadow:1px 1px 0px #c44cff,2px 2px 0px #8b5cf6,0 0 15px rgba(196,76,255,.8);margin-bottom:25px;letter-spacing:1px;line-height:1.5}.question-form{display:flex;gap:15px;align-items:center;justify-content:center;flex-wrap:wrap}.question-input{flex:1;min-width:200px;background:#1a0033cc;border:2px solid #c44cff;border-radius:4px;padding:15px 20px;color:#e0b3ff;font-family:Orbitron,monospace;font-size:.9rem;transition:all .2s ease;image-rendering:pixelated;text-align:center}.question-input:focus{outline:none;border-color:#ff6b9d;box-shadow:0 0 15px #ff6b9d66;background:#1a0033e6}.question-input::placeholder{color:#e0b3ff80;font-style:italic}.question-submit-btn{background:linear-gradient(135deg,#ff6b9d,#c44cff);border:2px solid #8b5cf6;border-radius:4px;padding:15px 25px;font-family:"Press Start 2P",monospace;font-size:.7rem;color:#fff;cursor:pointer;transition:all .2s ease;box-shadow:inset 1px 1px #ff6b9d4d,inset -1px -1px #8b5cf64d;letter-spacing:1px}.question-submit-btn:hover{transform:scale(1.05);background:linear-gradient(135deg,#c44cff,#ff6b9d);box-shadow:inset 1px 1px #ff6b9d80,inset -1px -1px #8b5cf680,0 0 15px #c44cff99}.question-submit-btn:active{transform:scale(.95)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:modalFadeIn .3s ease-in-out}.modal-content{background:linear-gradient(135deg,#c44cff33,#8b5cf626),#1a0033f2;border-radius:12px;padding:40px;max-width:500px;width:90%;border:3px solid #c44cff;border-top:3px solid #ff6b9d;border-left:3px solid #ff6b9d;border-bottom:3px solid #8b5cf6;border-right:3px solid #8b5cf6;box-shadow:inset 2px 2px #ff6b9d4d,inset -2px -2px #8b5cf64d,0 20px 40px #c44cff99;position:relative;animation:modalSlideIn .4s ease-out}.modal-close-btn{position:absolute;top:15px;right:20px;background:transparent;border:2px solid #ff4757;border-radius:50%;width:35px;height:35px;font-family:"Press Start 2P",monospace;font-size:1.2rem;color:#ff4757;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;line-height:1}.modal-close-btn:hover{background:#ff475733;transform:scale(1.1);box-shadow:0 0 10px #ff475766}.modal-message{font-family:"Press Start 2P",cursive;font-size:.9rem;color:#ffd1dc;text-shadow:1px 1px 0px #c44cff,0 0 15px rgba(196,76,255,.8);margin-bottom:30px;letter-spacing:1px;line-height:1.6;text-align:center}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 600px){.question-title{font-size:.8rem}.question-form{flex-direction:column;gap:20px}.question-input{min-width:100%}.modal-content{padding:30px 20px;margin:20px}.modal-message{font-size:.7rem}}