:root{--bg-space: #0b091a;--bg-deep: #110e2b;--bg-glass: rgba(22, 19, 49, .65);--bg-glass-hover: rgba(33, 29, 71, .75);--border-glass: rgba(255, 107, 139, .15);--border-glass-focus: rgba(108, 92, 231, .4);--color-love-pink: #ff6b8b;--color-dream-purple: #9c88ff;--color-cosmic-indigo: #6c5ce7;--color-neon-blue: #00d2d3;--color-pastel-cyan: #81ecec;--color-gold: #feca57;--color-white: #ffffff;--color-text-primary: #f1f2f6;--color-text-secondary: #a5b1c2;--color-danger: #ff7675;--color-success: #2ecc71;--grad-sunset: linear-gradient(135deg, var(--color-love-pink) 0%, var(--color-cosmic-indigo) 100%);--grad-aurora: linear-gradient(135deg, var(--color-cosmic-indigo) 0%, var(--color-neon-blue) 100%);--grad-space: linear-gradient(180deg, var(--bg-space) 0%, var(--bg-deep) 100%);--grad-text: linear-gradient(90deg, #ff9ff3, #feca57, #81ecec);--font-display: "Outfit", "Inter", sans-serif;--font-body: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--grad-space);color:var(--color-text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-space)}::-webkit-scrollbar-thumb{background:#6c5ce74d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6c5ce799}.text-gradient{background:var(--grad-sunset);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-glow{text-shadow:0 0 10px rgba(255,107,139,.4)}.app-container{min-height:100vh;display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.glass-panel{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:20px;box-shadow:0 8px 32px #0000005e;transition:all .3s cubic-bezier(.25,.8,.25,1)}.glass-panel:hover{border-color:#ff6b8b40;box-shadow:0 12px 40px #6c5ce726}.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}.auth-wrapper:before,.auth-wrapper:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(120px);z-index:0;pointer-events:none}.auth-wrapper:before{background:#ff6b8b26;top:10%;left:15%}.auth-wrapper:after{background:#6c5ce726;bottom:10%;right:15%}.auth-card{width:100%;max-width:480px;padding:40px;z-index:1;position:relative}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{font-size:2.2rem;margin-bottom:8px}.auth-header p{color:var(--color-text-secondary);font-size:.95rem}.form-group{margin-bottom:20px;display:flex;flex-direction:column}.form-label{font-size:.85rem;font-weight:500;color:var(--color-dream-purple);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.form-input{background:#0f0c2680;border:1px solid var(--border-glass);color:var(--color-text-primary);padding:12px 16px;border-radius:10px;font-family:var(--font-body);font-size:1rem;transition:all .25s ease}.form-input:focus{outline:none;border-color:var(--color-dream-purple);box-shadow:0 0 10px #9c88ff4d;background:#0f0c26cc}.form-input::placeholder{color:#a5b1c266}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:1rem;cursor:pointer;transition:all .25s cubic-bezier(.175,.885,.32,1.275);border:none;text-decoration:none}.btn-primary{background:var(--grad-sunset);color:#fff;box-shadow:0 4px 15px #ff6b8b4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b8b80}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#ffffff14;border:1px solid var(--border-glass);color:var(--color-text-primary)}.btn-secondary:hover{background:#ffffff26;border-color:#ffffff4d}.btn-danger{background:#ff767526;border:1px solid rgba(255,118,117,.3);color:var(--color-danger)}.btn-danger:hover{background:#ff76754d}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.auth-link{color:var(--color-neon-blue);text-decoration:none;font-weight:500;transition:color .2s;cursor:pointer}.auth-link:hover{color:var(--color-pastel-cyan);text-decoration:underline}.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 40px;background:#0b091acc;border-bottom:1px solid var(--border-glass);z-index:10}.nav-brand{font-family:var(--font-display);font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:8px}.nav-status{display:flex;align-items:center;gap:12px}.status-indicator{display:flex;align-items:center;gap:8px;background:#ffffff0d;padding:6px 12px;border-radius:20px;border:1px solid var(--border-glass);font-size:.85rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--color-danger)}.status-dot.online{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.dashboard-main{flex:1;padding:30px 40px;max-width:1400px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:25px}.notes-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px}.note-card{padding:24px;position:relative;background:linear-gradient(135deg,#ff6b8b1a,#6c5ce70d);display:flex;flex-direction:column;justify-content:space-between;min-height:180px}.note-text{font-size:1.05rem;white-space:pre-wrap;color:var(--color-text-primary);margin-bottom:15px}.note-footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--color-text-secondary);border-top:1px solid rgba(255,255,255,.05);padding-top:10px}.note-delete{background:none;border:none;color:#ff767599;cursor:pointer;padding:4px;border-radius:5px;transition:all .2s}.note-delete:hover{color:var(--color-danger);background:#ff76751a}.notes-input-panel{max-width:600px;padding:25px;margin-bottom:25px}.player-container{display:flex;flex-direction:column;gap:15px;max-width:1000px;margin:0 auto;width:100%}.video-wrapper{width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 10px 40px #00000080;border:1px solid var(--border-glass)}.video-wrapper video{width:100%;height:100%;object-fit:contain}.video-wrapper iframe{width:100%;height:100%;border:none}.video-controls-info{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#ffffff05;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.sync-status-badge{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--color-neon-blue);background:#00d2d31a;padding:4px 8px;border-radius:12px}.video-sources-panel{padding:24px}.source-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:12px}.source-tab{background:none;border:none;color:var(--color-text-secondary);padding:8px 16px;cursor:pointer;border-radius:8px;font-size:.9rem;font-weight:500;transition:all .2s}.source-tab.active{background:#6c5ce726;color:var(--color-dream-purple);border:1px solid rgba(108,92,231,.3)}.upload-dropzone{border:2px dashed rgba(255,107,139,.3);border-radius:12px;padding:30px;text-align:center;cursor:pointer;transition:all .2s;background:#ffffff03}.upload-dropzone:hover{border-color:var(--color-love-pink);background:#ff6b8b08}.upload-progress{width:100%;height:6px;background:#ffffff1a;border-radius:3px;margin-top:15px;overflow:hidden}.upload-progress-bar{height:100%;background:var(--grad-sunset);transition:width .1s ease}.video-list{display:flex;flex-direction:column;gap:8px;margin-top:15px;max-height:250px;overflow-y:auto}.video-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#ffffff08;border-radius:8px;border:1px solid rgba(255,255,255,.03);cursor:pointer;transition:all .2s}.video-item:hover{background:#ffffff14;border-color:#ffffff1a}.video-item-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}.game-selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:25px}.game-card{padding:25px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;flex-direction:column;align-items:center;gap:15px}.game-card.active{border-color:var(--color-love-pink);background:linear-gradient(135deg,#ff6b8b26,#6c5ce71a);box-shadow:0 8px 24px #ff6b8b40}.game-card:hover{transform:translateY(-5px)}.game-icon-wrapper{width:60px;height:60px;border-radius:50%;background:#ffffff0a;display:flex;align-items:center;justify-content:center;color:var(--color-love-pink)}.game-card.active .game-icon-wrapper{background:var(--grad-sunset);color:#fff}.game-stage{min-height:480px;display:flex;align-items:center;justify-content:center;padding:20px}.ttt-container{display:flex;flex-direction:column;align-items:center;gap:20px}.ttt-status-bar{display:flex;justify-content:space-between;width:100%;max-width:320px;font-family:var(--font-display);font-weight:600}.ttt-grid{display:grid;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);gap:10px}.ttt-cell{background:#ffffff08;border:1px solid var(--border-glass);border-radius:12px;font-size:2.5rem;font-family:var(--font-display);font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#fff}.ttt-cell:hover{background:#ffffff14;border-color:#ffffff4d}.ttt-cell.X{color:var(--color-love-pink);text-shadow:0 0 10px rgba(255,107,139,.4)}.ttt-cell.O{color:var(--color-neon-blue);text-shadow:0 0 10px rgba(0,210,211,.4)}.canvas-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px}.canvas-toolbar{display:flex;gap:15px;align-items:center;background:#ffffff0a;padding:10px 20px;border-radius:12px;border:1px solid var(--border-glass);flex-wrap:wrap}.canvas-color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s}.canvas-color-swatch:hover{transform:scale(1.1)}.canvas-color-swatch.active{border-color:#fff;box-shadow:0 0 8px #ffffff80}.drawing-board{background:#fff;border-radius:16px;box-shadow:0 10px 30px #0006;cursor:crosshair;touch-action:none}.quiz-container{max-width:600px;width:100%;padding:30px;text-align:center;position:relative}.quiz-progress-dots{display:flex;justify-content:center;gap:6px;margin-bottom:20px}.quiz-dot{width:8px;height:8px;border-radius:50%;background:#ffffff26}.quiz-dot.active{background:var(--color-love-pink);box-shadow:0 0 6px var(--color-love-pink)}.quiz-dot.completed{background:var(--color-success)}.quiz-question{font-size:1.4rem;margin-bottom:25px;font-family:var(--font-display)}.quiz-options{display:flex;flex-direction:column;gap:12px}.quiz-option{background:#ffffff08;border:1px solid var(--border-glass);padding:16px;border-radius:12px;font-size:1rem;cursor:pointer;transition:all .2s;text-align:left}.quiz-option:hover{background:#ffffff14;border-color:#fff3}.quiz-option.selected{background:#6c5ce733;border-color:var(--color-dream-purple);color:#fff}.quiz-results-card{display:flex;flex-direction:column;gap:20px;align-items:center;padding:40px}.quiz-score-circle{width:120px;height:120px;border-radius:50%;border:4px solid var(--color-love-pink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;font-weight:800;box-shadow:0 0 15px #ff6b8b33}.heart-beat{animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.fade-in{animation:fadeIn .4s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spaces-container{text-align:center;max-width:1100px;margin:20px auto;padding:0 10px}.spaces-header{margin-bottom:40px}.spaces-header h2{font-size:2.4rem;margin-bottom:12px}.spaces-header p{color:var(--color-text-secondary);font-size:1.05rem}.spaces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:20px}.space-card{padding:40px 30px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:360px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.space-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.03;z-index:0;transition:opacity .3s ease}.space-card:hover:before{opacity:.12}.space-card.watch-space:before{background:var(--grad-sunset)}.space-card.play-space:before{background:var(--grad-aurora)}.space-card.notes-space:before{background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-love-pink) 100%)}.space-card:hover{transform:translateY(-8px);border-color:#ff6b8b59;box-shadow:0 15px 40px #6c5ce733}.space-icon-wrapper{width:80px;height:80px;border-radius:50%;background:#ffffff0a;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .3s ease;z-index:1}.space-card.watch-space .space-icon-wrapper{color:var(--color-love-pink)}.space-card.play-space .space-icon-wrapper{color:var(--color-neon-blue)}.space-card.notes-space .space-icon-wrapper{color:var(--color-gold)}.space-card:hover .space-icon-wrapper{transform:scale(1.1);color:#fff!important}.space-card.watch-space:hover .space-icon-wrapper{background:var(--grad-sunset)}.space-card.play-space:hover .space-icon-wrapper{background:var(--grad-aurora)}.space-card.notes-space:hover .space-icon-wrapper{background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-love-pink) 100%)}.space-card h3{font-size:1.5rem;margin-bottom:12px;z-index:1;font-family:var(--font-display)}.space-card p{color:var(--color-text-secondary);font-size:.9rem;line-height:1.5;margin-bottom:25px;z-index:1}.back-hub-bar{display:flex;margin-bottom:20px;animation:fadeIn .3s ease}