*{margin:0;padding:0;box-sizing:border-box}:root{--primary:#6366f1;--primary-dark:#4f46e5;--secondary:#8b5cf6;--primary-rgb:99,102,241;--secondary-rgb:139,92,246;--bg-dark:#0f172a;--bg-card:#1e293b;--bg-hover:#334155;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--border:#334155;--shadow:rgba(0,0,0,.3);--bg-gradient-end:#1e1b4b;--surface-glass:rgba(30,41,59,.8);--surface-field:rgba(15,23,42,.6);--surface-overlay:rgba(15,23,42,.8);--surface-elevated:rgba(30,41,59,.9);--surface-panel:rgba(30,41,59,.95);--surface-selected:rgba(99,102,241,.15);--surface-hover-option:rgba(99,102,241,.1);--surface-chat-incoming:rgba(15,23,42,.8);--surface-scrollbar:rgba(15,23,42,.5);--focus-ring:rgba(99,102,241,.15);--btn-primary-glow:0 10px 25px rgba(99,102,241,.4);--reaction-glow:0 5px 20px rgba(99,102,241,.4);--video-scrim-top:linear-gradient(180deg,rgba(0,0,0,.6),transparent);--video-scrim-bottom:linear-gradient(0deg,rgba(0,0,0,.6),transparent);--chat-footer-scrim:linear-gradient(0deg,rgba(15,23,42,.95),transparent)}[data-desktop-hub-color-mode=light] .filter-menu,[data-desktop-hub-color-mode=light] .welcome-content{box-shadow:0 20px 50px rgba(0,0,0,.12)}[data-desktop-hub-theme=ColorCycle] .logo h1{animation:none}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,var(--bg-dark) 0,var(--bg-gradient-end) 100%);color:var(--text-primary);min-height:100vh;overflow:hidden}.container{width:100%;height:100vh;position:relative}.screen{position:absolute;width:100%;height:100%;display:none;align-items:center;justify-content:center}.screen.active{display:flex}.welcome-content{background:var(--surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:48px;max-width:500px;width:90%;box-shadow:0 20px 60px var(--shadow);animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.logo{display:flex;align-items:center;gap:16px;margin-bottom:32px;justify-content:center}.logo svg{color:var(--primary)}.logo h1{font-size:32px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{text-align:center;margin-bottom:24px;font-size:14px}.lobby-stats,.tagline{color:var(--text-secondary)}.lobby-stats{background:var(--surface-field);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:28px;font-size:13px}.lobby-stats-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}.lobby-stats-row:last-of-type{margin-top:12px;margin-bottom:6px}.lobby-stats-label{font-weight:600;color:var(--text-primary);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.lobby-stats-value{font-weight:500;color:var(--text-primary)}.lobby-stats-detail{display:flex;flex-wrap:wrap;gap:8px;margin:0;line-height:1.4}.lobby-stats-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface-selected);color:var(--text-primary);font-size:12px;font-weight:500}.lobby-stats-queue .lobby-stats-label{color:var(--success)}.user-form{gap:24px}.form-group,.user-form{display:flex;flex-direction:column}.form-group{gap:12px}.form-group label{font-weight:500;font-size:14px;color:var(--text-primary)}.form-group input[type=text],.form-group select{background:var(--surface-field);border:1px solid var(--border);border-radius:12px;padding:12px 16px;color:var(--text-primary);font-size:14px;transition:all .2s}.form-group input[type=text]:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}.checkbox-group,.radio-group{display:flex;gap:12px;flex-wrap:wrap}.checkbox-option,.radio-option{flex:1 1;min-width:100px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--surface-field);border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s;font-size:14px}.checkbox-option:hover,.radio-option:hover{border-color:var(--primary);background:var(--surface-hover-option)}.checkbox-option input[type=checkbox]:checked+span,.radio-option input[type=radio]:checked+span{font-weight:600}.checkbox-option input[type=checkbox],.radio-option input[type=radio]{display:none}.checkbox-option input[type=checkbox]:checked~span,.radio-option input[type=radio]:checked~span{color:var(--primary)}.checkbox-option:has(input[type=checkbox]:checked),.radio-option:has(input[type=radio]:checked){border-color:var(--primary);background:var(--surface-selected)}.btn{padding:14px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--btn-primary-glow)}.btn-secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.btn-action{background:var(--danger);color:#fff;padding:16px 32px}.btn-action:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 10px 25px rgba(239,68,68,.4)}.waiting-content{text-align:center;max-width:400px}.loading-animation{margin-bottom:32px}.spinner{width:64px;height:64px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(1turn)}}.waiting-content h2{font-size:24px;margin-bottom:12px}.waiting-content p{color:var(--text-secondary);margin-bottom:24px}.video-container{width:100%;height:100vh;display:flex}.video-container,.video-wrapper{position:relative;background:#000}.video-wrapper{flex:1 1}.video-wrapper.local{position:absolute;width:300px;height:225px;bottom:100px;right:24px;border-radius:16px;overflow:hidden;border:3px solid var(--primary);z-index:10;box-shadow:0 10px 40px rgba(0,0,0,.5)}.video-wrapper video{width:100%;height:100%;object-fit:cover}.video-overlay{position:absolute;top:0;left:0;right:0;padding:24px;display:flex;justify-content:space-between;align-items:flex-start;background:var(--video-scrim-top);pointer-events:none}.partner-info{font-weight:500}.connection-status,.partner-info{background:var(--surface-overlay);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;border-radius:20px}.connection-status{display:flex;align-items:center;gap:8px;font-size:14px}.status-dot{width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.video-controls-overlay{position:absolute;bottom:0;left:0;right:0;padding:16px;display:flex;justify-content:center;gap:12px;background:var(--video-scrim-bottom)}.control-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--surface-elevated);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;border:2px solid var(--border)}.control-btn:hover{background:var(--bg-hover);transform:scale(1.1)}.control-btn.active{background:var(--primary);border-color:var(--primary)}.control-btn:not(.active){opacity:.7}.chat-controls{position:absolute;bottom:0;left:0;right:0;padding:24px;background:var(--chat-footer-scrim)}.control-panel{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.reactions{display:flex;gap:12px}.reaction-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:var(--surface-elevated);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:24px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.reaction-btn:hover{transform:scale(1.2) rotate(10deg);border-color:var(--primary);box-shadow:var(--reaction-glow)}.filter-menu{position:absolute;top:100px;right:24px;background:var(--surface-panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;padding:24px;min-width:200px;z-index:20}.filter-menu.hidden{display:none}.filter-menu h3{margin-bottom:16px;font-size:16px}.filter-options{display:flex;flex-direction:column;gap:8px}.filter-option{padding:12px 16px;background:var(--surface-field);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .2s;text-align:left}.filter-option:hover{background:var(--bg-hover);border-color:var(--primary)}.filter-option.active{background:var(--primary);border-color:var(--primary)}.reaction-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:30}.reaction-bubble{font-size:64px;animation:reactionFloat 2s ease-out forwards;position:absolute}@keyframes reactionFloat{0%{transform:translate(-50%,-50%) scale(0);opacity:0}10%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(-50%,-200%) scale(.8);opacity:0}}.chat-room{position:absolute;bottom:120px;right:24px;width:350px;height:500px;background:var(--surface-panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;z-index:25;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:slideInUp .3s ease-out}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.chat-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.chat-header h3{font-size:16px;font-weight:600;margin:0}.chat-close-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.chat-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.chat-messages{flex:1 1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:var(--surface-scrollbar);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--primary)}.chat-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-size:14px;text-align:center}.chat-message{display:flex;flex-direction:column;max-width:80%;animation:messageSlide .2s ease-out}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.own{align-self:flex-end;margin-left:auto}.chat-message:not(.own){align-self:flex-start}.message-content{background:var(--surface-chat-incoming);padding:10px 14px;border-radius:12px;display:flex;flex-direction:column;gap:4px}.chat-message.own .message-content{background:var(--primary);color:#fff}.message-text{font-size:14px;line-height:1.4;word-wrap:break-word}.message-time{font-size:11px;opacity:.7;align-self:flex-end}.chat-input-form{padding:16px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center}.chat-input{flex:1 1;background:var(--surface-field);border:1px solid var(--border);border-radius:20px;padding:10px 16px;color:var(--text-primary);font-size:14px;outline:none;transition:all .2s}.chat-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}.chat-send-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.chat-send-btn:hover:not(:disabled){background:var(--primary-dark);transform:scale(1.05)}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px){.welcome-content{padding:32px 24px}.video-wrapper.local{width:200px;height:150px;bottom:80px;right:16px}.control-panel{flex-direction:column;gap:16px}.filter-menu{top:80px;right:16px}.chat-room{width:calc(100% - 32px);height:400px;bottom:100px;right:16px;left:16px}}