:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(255, 255, 255, .04);--bg-card-hover: rgba(255, 255, 255, .07);--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(124, 58, 237, .3);--text-primary: #f0f0f5;--text-secondary: #8888a0;--text-muted: #55556a;--accent-purple: #7C3AED;--accent-cyan: #06B6D4;--accent-green: #22C55E;--accent-red: #EF4444;--accent-orange: #F59E0B;--gradient-main: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));--gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, .15) 0%, transparent 60%);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition: .2s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);overflow:hidden}.screen{display:none;width:100%;height:100%}.screen.active{display:flex;align-items:center;justify-content:center}.lobby-container{width:100%;max-width:720px;padding:24px;position:relative}.lobby-container:before{content:"";position:fixed;top:-200px;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,.12) 0%,transparent 70%);pointer-events:none;z-index:0}.logo{text-align:center;margin-bottom:48px;position:relative;z-index:1}.logo-icon{margin-bottom:16px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.logo h1{font-size:32px;font-weight:700;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.subtitle{color:var(--text-secondary);font-size:14px;margin-top:6px}.lobby-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;z-index:1}@media (max-width: 560px){.lobby-cards{grid-template-columns:1fr}}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color var(--transition),background var(--transition),transform var(--transition)}.card:hover{border-color:var(--border-glow);background:var(--bg-card-hover);transform:translateY(-2px)}.card-icon{font-size:32px;margin-bottom:12px}.card h2{font-size:18px;font-weight:600;margin-bottom:6px}.card p{font-size:13px;color:var(--text-secondary);margin-bottom:20px;line-height:1.4}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition);outline:none}.btn-primary{background:var(--gradient-main);color:#fff;box-shadow:0 4px 16px #7c3aed4d}.btn-primary:hover{box-shadow:0 6px 24px #7c3aed73;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#ffffff14;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff1f;border-color:var(--accent-cyan)}.btn-icon{background:none;border:none;cursor:pointer;font-size:18px;padding:4px;transition:transform var(--transition)}.btn-icon:hover{transform:scale(1.15)}.input-group{display:flex;gap:8px}.input-group input{flex:1;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:#ffffff0d;color:var(--text-primary);font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:3px;text-align:center;text-transform:uppercase;outline:none;transition:border-color var(--transition)}.input-group input::placeholder{letter-spacing:0;text-transform:none;font-weight:400;color:var(--text-muted);font-size:13px}.input-group input:focus{border-color:var(--accent-cyan)}.room-code-box{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-color)}.room-code-box .label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.code-display{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}.code-display span:first-child{font-size:28px;font-weight:700;letter-spacing:6px;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.status-text{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13px;color:var(--text-secondary)}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-orange);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}.pulse-dot.green{background:var(--accent-green)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.status-bar{text-align:center;padding:12px;margin-top:20px;border-radius:var(--radius-sm);font-size:13px;background:#ef44441a;color:var(--accent-red);border:1px solid rgba(239,68,68,.2);position:relative;z-index:1}.status-bar.success{background:#22c55e1a;color:var(--accent-green);border-color:#22c55e33}.hidden{display:none!important}.call-container{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-primary)}.media-area{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0}.video-wrapper{position:relative;width:100%;max-width:1200px;aspect-ratio:16 / 9;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary);border:1px solid var(--border-color)}.video-wrapper video{width:100%;height:100%;object-fit:contain;background:#000}.player-controls{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;opacity:0;transition:opacity var(--transition)}.video-wrapper:hover .player-controls{opacity:1}.btn-player{position:absolute;background:#00000080;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:var(--radius-sm);padding:8px 12px;font-size:16px;cursor:pointer;pointer-events:auto;transition:all var(--transition);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.btn-player:hover{background:#7c3aedb3;border-color:#7c3aed80;transform:scale(1.05)}.pip-btn{top:16px;left:50%;transform:translate(-50%)}.pip-btn:hover{transform:translate(-50%) scale(1.05)}.fullscreen-btn{bottom:16px;right:16px}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);font-size:14px}.video-placeholder .avatar{font-size:48px;opacity:.4}.call-info{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 16px}.call-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}#call-timer{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px 28px}.btn-control{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 24px;border:none;border-radius:var(--radius-md);background:#ffffff0f;color:var(--text-primary);cursor:pointer;transition:all var(--transition);font-family:var(--font);min-width:90px}.btn-control .icon{font-size:22px}.btn-control .label{font-size:11px;color:var(--text-secondary);font-weight:500}.btn-control:hover{background:#ffffff1a;transform:translateY(-2px)}.btn-control.active{background:#7c3aed33;border:1px solid rgba(124,58,237,.3)}.btn-control.muted{background:#ef444426}.btn-control.muted .icon{opacity:.5}.btn-danger{background:#ef444426!important}.btn-danger:hover{background:#ef444440!important;box-shadow:0 4px 16px #ef444433}.btn-danger .icon{transform:rotate(135deg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.lobby-container,.card{animation:fadeInUp .5s ease-out}.card:nth-child(2){animation-delay:.1s}.call-container{animation:fadeInUp .3s ease-out}.device-control{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 24px 0}.device-select{background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);padding:6px 10px;font-family:var(--font);font-size:13px;outline:none;cursor:pointer;max-width:180px;text-overflow:ellipsis;transition:border-color var(--transition)}.device-select:focus{border-color:var(--accent-cyan)}.device-select option{background:var(--bg-secondary);color:var(--text-primary)}.volume-control{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 24px 8px}.volume-icon{font-size:16px;opacity:.6}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:140px;height:4px;border-radius:4px;background:#ffffff1a;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-cyan);cursor:pointer;transition:box-shadow var(--transition)}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 8px #06b6d480}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-cyan);border:none;cursor:pointer}#volume-value{font-size:12px;color:var(--text-muted);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}.voice-indicator{display:flex;align-items:center;gap:2px;height:16px}.voice-bar{width:3px;height:6px;border-radius:2px;background:var(--accent-green);transition:height .1s ease}.voice-indicator.speaking .voice-bar:nth-child(1){animation:voiceBar .4s ease-in-out infinite alternate}.voice-indicator.speaking .voice-bar:nth-child(2){animation:voiceBar .4s ease-in-out .1s infinite alternate}.voice-indicator.speaking .voice-bar:nth-child(3){animation:voiceBar .4s ease-in-out .2s infinite alternate}@keyframes voiceBar{0%{height:4px}to{height:14px}}.btn-control{position:relative}.badge{position:absolute;top:4px;right:8px;min-width:18px;height:18px;background:var(--accent-red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px}.chat-panel{display:none;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .3s ease;background:#ffffff08;border-top:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chat-panel.open{display:flex;max-height:300px}.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;max-height:220px;display:flex;flex-direction:column;gap:6px}.chat-msg{padding:6px 12px;border-radius:var(--radius-sm);font-size:13px;max-width:80%;word-wrap:break-word;animation:fadeInUp .2s ease}.chat-msg.mine{align-self:flex-end;background:#7c3aed33;border:1px solid rgba(124,58,237,.15);color:var(--text-primary)}.chat-msg.theirs{align-self:flex-start;background:#ffffff0f;border:1px solid var(--border-color);color:var(--text-primary)}.chat-input-group{display:flex;gap:8px;padding:8px 16px 12px;border-top:1px solid var(--border-color)}.chat-input-group input{flex:1;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:#ffffff0d;color:var(--text-primary);font-family:var(--font);font-size:13px;outline:none;transition:border-color var(--transition)}.chat-input-group input:focus{border-color:var(--accent-cyan)}.btn-sm{padding:8px 14px;font-size:16px;min-width:auto}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}