*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d1a;--surface: #161628;--surface-hover: #1e1e38;--border: #2a2a4a;--accent: #4f46e5;--accent-hover: #4338ca;--danger: #ef4444;--danger-hover: #dc2626;--text: #e2e8f0;--text-muted: #94a3b8;--green: #22c55e;--radius: 12px;--radius-sm: 8px}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.5}.lobby{min-height:100vh;display:flex;flex-direction:column}.lobby-header{background:var(--surface);border-bottom:1px solid var(--border);padding:20px 32px}.lobby-logo{display:flex;align-items:center;gap:14px}.lobby-logo svg{width:48px;height:48px;flex-shrink:0}.lobby-logo h1{font-size:1.4rem;font-weight:700;color:var(--text)}.lobby-logo p{font-size:.8rem;color:var(--text-muted)}.lobby-body{max-width:760px;width:100%;margin:40px auto;padding:0 24px;display:flex;flex-direction:column;gap:32px}.name-section{display:flex;flex-direction:column;gap:8px}.name-section label{font-size:.85rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.name-section input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;padding:12px 16px;outline:none;transition:border-color .15s}.name-section input:focus{border-color:var(--accent)}.rooms-section{display:flex;flex-direction:column;gap:16px}.rooms-header{display:flex;align-items:center;justify-content:space-between}.rooms-header h2{font-size:1.1rem;font-weight:600}.create-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}.create-form input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;padding:10px 14px;outline:none;transition:border-color .15s}.create-form input:focus{border-color:var(--accent)}.create-form-actions{display:flex;gap:8px}.rooms-empty{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:40px;text-align:center;color:var(--text-muted)}.rooms-empty p+p{margin-top:6px;font-size:.85rem}.rooms-list{list-style:none;display:flex;flex-direction:column;gap:10px}.room-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:border-color .15s,background .15s}.room-card:hover{background:var(--surface-hover);border-color:var(--accent)}.room-card-info{display:flex;flex-direction:column;gap:4px}.room-card-name{font-weight:600;font-size:1rem;display:flex;align-items:center;gap:8px}.room-status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.room-card-meta{font-size:.82rem;color:var(--text-muted);display:flex;gap:6px;align-items:center}.separator{color:var(--border)}.room-card-avatars{display:flex;gap:4px;margin-top:6px}.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}.avatar--more{background:var(--surface-hover);color:var(--text-muted)}.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);border:none;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,opacity .15s;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover:not(:disabled){background:var(--accent-hover)}.btn--ghost{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn--ghost:hover{background:var(--surface-hover);color:var(--text)}.btn--join{background:var(--accent);color:#fff;flex-shrink:0;padding:10px 22px}.btn--join:hover{background:var(--accent-hover)}.room{height:100vh;display:flex;flex-direction:column;background:var(--bg)}.room-header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between}.room-title{display:flex;align-items:center;gap:10px}.room-icon{font-size:1.2rem}.room-title h1{font-size:1.1rem;font-weight:600}.room-ext{font-size:.78rem;color:var(--text-muted);background:var(--surface-hover);border:1px solid var(--border);border-radius:4px;padding:2px 8px}.room-participants-count{font-size:.82rem;color:var(--green);font-weight:500}.room-body{flex:1;display:flex;overflow:hidden}.video-area{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center}.video-remote{width:100%;height:100%;object-fit:contain}.video-local{position:absolute;bottom:16px;right:16px;width:200px;height:112px;object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--border);background:#111;z-index:10}.connecting-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#000c;z-index:20;color:var(--text-muted)}.connecting-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:var(--danger);font-size:.85rem;text-align:center;max-width:300px}.room-sidebar{width:260px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.room-sidebar h2{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.participants-list{list-style:none;display:flex;flex-direction:column;gap:8px}.participants-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-hover)}.participants-list li.me{border:1px solid var(--accent)}.participant-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.participant-name{font-size:.88rem;color:var(--text)}.no-participants{color:var(--text-muted);font-size:.85rem;font-style:italic}.room-info{margin-top:auto;border-top:1px solid var(--border);padding-top:16px;display:flex;flex-direction:column;gap:10px}.room-info-item{display:flex;justify-content:space-between;font-size:.82rem;color:var(--text-muted)}.room-info-item strong{color:var(--text)}.sx20-hint{font-size:.78rem;color:var(--text-muted);background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;line-height:1.5}.controls{background:var(--surface);border-top:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:12px}.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 20px;border-radius:var(--radius);border:none;background:var(--surface-hover);color:var(--text);font-size:.72rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s;min-width:72px}.ctrl-btn svg{width:22px;height:22px}.ctrl-btn:hover{background:#2a2a4a}.ctrl-btn--off{background:#3a1515;color:var(--danger)}.ctrl-btn--off:hover{background:#4a1a1a}.ctrl-btn--leave{background:var(--danger);color:#fff}.ctrl-btn--leave:hover{background:var(--danger-hover)}.global-loading{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100;color:var(--text-muted)}.global-error{position:fixed;top:16px;left:50%;transform:translate(-50%);background:#3a1515;border:1px solid var(--danger);color:var(--danger);border-radius:var(--radius-sm);padding:12px 20px;font-size:.88rem;z-index:100;cursor:pointer}.global-error span{font-size:.75rem;opacity:.7;margin-left:8px}