@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@600;700;800&display=swap";:root{--bg-dark: #070a12;--bg-card: rgba(15, 23, 42, .85);--bg-sidebar: rgba(11, 17, 32, .95);--accent: #1ba0e2;--accent-glow: rgba(27, 160, 226, .4);--accent-grad: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);--text-main: #f8fafc;--text-muted: #94a3b8;--border: rgba(255, 255, 255, .1)}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,sans-serif}body{background-color:var(--bg-dark);background-image:radial-gradient(at 0% 0%,rgba(27,160,226,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(58,123,213,.12) 0px,transparent 50%);color:var(--text-main);min-height:100vh;overflow:hidden}.app-header{height:64px;background:#070a12d9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;z-index:50}.brand-wrap{display:flex;align-items:center;gap:12px}.brand-icon{width:36px;height:36px;border-radius:12px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px var(--accent-glow)}.brand-title{font-family:Outfit,sans-serif;font-size:1.35rem;font-weight:800;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:8px}.brand-badge{font-family:Inter,sans-serif;font-size:.72rem;font-weight:700;color:#38bdf8;background:#38bdf81f;border:1px solid rgba(56,189,248,.3);padding:2px 10px;border-radius:20px;-webkit-text-fill-color:#38bdf8}.status-pill{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#94a3b8;background:#0f172ad9;border:1px solid rgba(255,255,255,.12);padding:6px 14px;border-radius:30px}.status-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef444499;transition:all .3s}.status-dot.online{background:#10b981;box-shadow:0 0 10px #10b981cc}.app-main{display:flex;height:calc(100vh - 64px);width:100vw;overflow:hidden}.stage-container{flex:1;background:#030712;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-stage-card{text-align:center;max-width:440px;padding:36px 32px;background:var(--bg-card);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:24px;box-shadow:0 20px 50px #0009}.empty-stage-icon{width:64px;height:64px;background:var(--accent-grad);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 10px 25px var(--accent-glow)}.sidebar-container{width:380px;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:16px;gap:16px}.join-card{padding:32px 28px;display:flex;flex-direction:column;gap:18px;margin:auto 0;background:var(--bg-card);border:1px solid var(--border);border-radius:24px}.join-title{font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:700;color:#f8fafc;margin-bottom:4px}.field-group{display:flex;flex-direction:column;gap:6px}.field-label{font-size:.75rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}.field-input{width:100%;background:#0f172ae6;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 16px;font-size:.9rem;color:#fff;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.field-input:focus{border-color:#38bdf8;box-shadow:0 0 12px #38bdf84d}.btn-primary{width:100%;background:var(--accent-grad);color:#fff;font-size:.95rem;font-weight:700;padding:14px 20px;border:none;border-radius:14px;cursor:pointer;box-shadow:0 8px 25px var(--accent-glow);transition:transform .15s ease,box-shadow .15s ease;margin-top:8px}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px var(--accent-glow)}.room-info-card{background:#0f172ad9;border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}.room-info-label{font-size:11px;font-weight:800;color:#38bdf8;text-transform:uppercase;letter-spacing:.5px}.room-info-code{font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:1px}.btn-copy-code{background:var(--accent-grad);border:none;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px var(--accent-glow);transition:transform .15s ease}.btn-copy-code:hover{transform:scale(1.03)}.chat-box-card{flex:1;background:#0f172ad9;border:1px solid var(--border);border-radius:20px;display:flex;flex-direction:column;overflow:hidden}.chat-header-bar{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#070a1266}.chat-title-text{font-size:13px;font-weight:700;color:#fff}.btn-leave-room{background:#f43f5e1f;border:1px solid rgba(244,63,94,.3);color:#fb7185;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}.btn-leave-room:hover{background:#f43f5e40}.chat-messages-area{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.chat-msg-bubble{background:#ffffff0d;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}.chat-msg-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px}.chat-msg-sender{font-weight:700;color:#38bdf8}.chat-msg-sender.self{color:#38bdf8}.chat-msg-sender.system{color:#f59e0b}.chat-msg-time{font-size:10px;color:#64748b}.chat-msg-text{font-size:13px;color:#e2e8f0;line-height:1.45;word-break:break-word}.chat-input-bar{padding:12px 14px;border-top:1px solid var(--border);background:#070a1266;display:flex;gap:8px}.chat-text-input{flex:1;background:#070a12cc;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 14px;font-size:13px;color:#fff;outline:none;transition:border-color .2s ease}.chat-text-input:focus{border-color:#38bdf8}.btn-send-msg{background:var(--accent-grad);border:none;color:#fff;font-size:13px;font-weight:700;padding:0 16px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px var(--accent-glow);transition:transform .15s ease}.btn-send-msg:hover{transform:scale(1.02)}.player-stage{position:relative;width:100%;height:100%;background:#000;overflow:hidden;-webkit-user-select:none;user-select:none}.player-video{width:100%;height:100%;object-fit:contain;outline:none}.player-hud-toast{position:absolute;top:24px;left:50%;transform:translate(-50%);z-index:50;background:#0f172aeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(56,189,248,.4);color:#38bdf8;font-weight:700;font-size:13px;padding:8px 20px;border-radius:30px;box-shadow:0 10px 25px #0009;pointer-events:none;animation:hudPop .25s cubic-bezier(.175,.885,.32,1.275)}@keyframes hudPop{0%{opacity:0;transform:translate(-50%,-10px) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}.player-subtitle-overlay{position:absolute;bottom:28px;left:50%;transform:translate(-50%);z-index:35;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:88%;text-align:center;transition:bottom .25s cubic-bezier(.16,1,.3,1)}.player-subtitle-overlay.with-controls{bottom:84px}.player-subtitle-box{display:flex;flex-direction:column;align-items:center;gap:4px}.player-subtitle-line{background:#0a0a0ed1;color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.4rem;font-weight:600;line-height:1.3;letter-spacing:.2px;text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.85);border-radius:8px;padding:4px 16px;box-shadow:0 4px 12px #00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.player-controls-bar{position:absolute;left:0;right:0;bottom:0;z-index:40;background:linear-gradient(to top,rgba(3,7,18,.95) 0%,rgba(3,7,18,.6) 60%,transparent 100%);padding:16px 24px;transition:opacity .3s ease,transform .3s ease;display:flex;flex-direction:column;gap:12px}.player-controls-bar.hidden-idle{opacity:0;pointer-events:none;transform:translateY(8px)}.player-progress-wrap{position:relative;width:100%;height:16px;display:flex;align-items:center;cursor:pointer}.player-progress-track{position:absolute;left:0;right:0;height:6px;background:#fff3;border-radius:10px;overflow:hidden}.player-progress-buffer{height:100%;background:#fff6}.player-progress-fill{height:100%;background:linear-gradient(90deg,#38bdf8,#2563eb);box-shadow:0 0 12px #38bdf899}.player-progress-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.player-controls-row{display:flex;align-items:center;justify-content:space-between;width:100%}.player-controls-left{display:flex;align-items:center;gap:16px}.player-controls-right{display:flex;align-items:center;gap:12px}.player-btn{background:transparent;border:none;color:#fff;padding:6px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease,transform .15s ease}.player-btn:hover{color:#38bdf8;transform:scale(1.1)}.player-vol-group{display:flex;align-items:center;gap:8px}.player-vol-slider{width:72px;height:4px;accent-color:#38bdf8;cursor:pointer}.player-time-display{font-size:13px;font-weight:600;color:#cbd5e1;letter-spacing:.3px}.player-live-badge{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#38bdf8;background:#38bdf81f;border:1px solid rgba(56,189,248,.3);padding:4px 14px;border-radius:20px;letter-spacing:.4px}.player-live-dot{width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 8px #38bdf8;animation:pulseDot 1.5s infinite}@keyframes pulseDot{0%,to{opacity:.4}50%{opacity:1}}.player-settings-popup{position:absolute;bottom:48px;right:0;width:260px;background:#0f172af5;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;box-shadow:0 16px 40px #000c;z-index:60;font-size:12px;color:#fff}.player-menu-title{font-size:10px;font-weight:800;text-transform:uppercase;color:#94a3b8;letter-spacing:.6px;padding:4px 8px;margin-bottom:6px}.player-menu-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:10px;background:transparent;border:none;color:#fff;cursor:pointer;transition:background .15s ease}.player-menu-btn:hover{background:#ffffff1a}.player-menu-btn .val{color:#94a3b8}.player-menu-back-btn{background:#38bdf826;border:1px solid rgba(56,189,248,.3);color:#38bdf8;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;cursor:pointer;margin-bottom:8px;display:inline-block;transition:background .15s ease}.player-menu-back-btn:hover{background:#38bdf840}.player-skip-fx{position:absolute;top:50%;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:104px;height:104px;border-radius:50%;background:#030712cc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(56,189,248,.35);color:#fff;pointer-events:none;animation:skipFxPop .8s ease-out forwards}.player-skip-fx.back{left:10%}.player-skip-fx.fwd{right:10%}.player-skip-fx.back .psf-arrows{transform:scaleX(-1)}.psf-arrows{display:flex;align-items:center}.psf-arrows svg{width:18px;height:18px;margin:0 -4px;animation:skipChevron .7s ease-in-out infinite}.psf-arrows svg:nth-child(2){animation-delay:.12s}.psf-arrows svg:nth-child(3){animation-delay:.24s}.psf-label{font-size:13px;font-weight:800;letter-spacing:.2px;color:#38bdf8}@keyframes skipFxPop{0%{opacity:0;transform:translateY(-50%) scale(.82)}18%{opacity:1;transform:translateY(-50%) scale(1)}72%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(1.06)}}@keyframes skipChevron{0%,to{opacity:.3}50%{opacity:1}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#38bdf8}