:root { color-scheme: dark; --bg:#090b12; --surface:rgba(19,23,35,.88); --raised:#191e2c; --soft:#111521; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16); --text:#f5f6fb; --muted:#9ba3b7; --accent:#8b7cff; --accent2:#aa9fff; --cyan:#55dbe0; --green:#62d49c; --red:#ff7888; --shadow:0 24px 70px rgba(0,0,0,.34); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 50% -20%,#24204d 0,var(--bg) 42rem); }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.ambient { position:fixed; width:28rem; height:28rem; border-radius:50%; filter:blur(100px); opacity:.12; pointer-events:none; }
.ambient-one { background:var(--accent); top:-15rem; right:-8rem; }
.ambient-two { background:var(--cyan); bottom:-20rem; left:-12rem; }
.app-shell { position:relative; width:min(1180px,calc(100% - 32px)); margin:auto; padding:max(24px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom)); }
.topbar,.brand,.panel-heading,.listen-card,.listen-actions,footer { display:flex; align-items:center; }
.topbar { justify-content:space-between; margin-bottom:28px; }
.brand { gap:13px; }
.brand h1 { margin:1px 0 0; font-size:1.28rem; letter-spacing:-.025em; }
.eyebrow,.section-kicker { margin:0; color:var(--muted); font-size:.68rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.brand-mark { position:relative; width:42px; aspect-ratio:1; border:2px solid var(--accent2); border-radius:50%; box-shadow:inset 0 0 0 7px #151927,0 0 24px rgba(139,124,255,.25); }
.brand-mark::before { content:""; position:absolute; height:2px; background:var(--accent2); left:0; right:0; top:calc(50% - 1px); }
.brand-mark span { position:absolute; width:12px; aspect-ratio:1; left:50%; top:50%; translate:-50% -50%; border-radius:50%; background:var(--bg); border:2px solid var(--accent2); }
.brand-mark.large { width:58px; margin-bottom:16px; }
.connection-pill { display:flex; align-items:center; gap:8px; padding:8px 12px; color:var(--muted); background:rgba(16,19,29,.8); border:1px solid var(--line); border-radius:999px; font-size:.78rem; font-weight:650; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#667086; }
.connection-pill[data-state="online"] .status-dot { background:var(--green); box-shadow:0 0 12px var(--green); }
.connection-pill[data-state="connecting"] .status-dot { background:#f4bf69; animation:pulse 1.2s infinite; }
.connection-pill[data-state="error"] .status-dot { background:var(--red); }
@keyframes pulse { 50% { opacity:.35; } }
.panel { border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(22px); }
.listen-card { justify-content:space-between; gap:24px; padding:25px 27px; margin-bottom:18px; overflow:hidden; background:linear-gradient(120deg,rgba(139,124,255,.17),rgba(85,219,224,.06)),var(--surface); }
.listen-copy h2,.panel-heading h2,.login-card h2 { margin:5px 0 0; letter-spacing:-.035em; }
.listen-copy h2 { font-size:clamp(1.45rem,3vw,2rem); }
.listen-copy p { max-width:650px; margin:7px 0 0; color:var(--muted); line-height:1.5; }
.listen-actions { gap:9px; flex:0 0 auto; }
.primary-button,.icon-button,.chat-form button { border:0; color:#0b0c12; background:linear-gradient(135deg,var(--accent2),#75d6ee); font-weight:760; cursor:pointer; box-shadow:0 8px 26px rgba(139,124,255,.22); }
.primary-button { min-height:46px; padding:0 20px; border-radius:13px; }
.button-icon { margin-right:7px; font-size:.72rem; }
.icon-button { width:46px; height:46px; border-radius:13px; background:var(--raised); color:var(--muted); box-shadow:none; border:1px solid var(--line); }
button:disabled { opacity:.45; cursor:default; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); gap:18px; align-items:start; }
.voice-column { display:grid; gap:18px; }
.voice-column>.panel,.chat-panel { padding:22px; }
.panel-heading { justify-content:space-between; gap:16px; margin-bottom:17px; }
.panel-heading h2 { font-size:1.15rem; }
.count-badge,.identity-badge { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--soft); font-size:.72rem; }
.scope-control { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.scope-option { display:flex; align-items:center; gap:10px; min-width:0; padding:11px; color:var(--muted); text-align:left; background:var(--soft); border:1px solid var(--line); border-radius:13px; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }
.scope-option:hover { border-color:var(--line2); color:var(--text); }
.scope-option.active { color:var(--text); background:rgba(139,124,255,.13); border-color:rgba(170,159,255,.48); }
.scope-icon { display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border-radius:9px; background:rgba(255,255,255,.05); color:var(--accent2); }
.scope-option strong,.scope-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scope-option strong { font-size:.82rem; }
.scope-option small { margin-top:2px; color:var(--muted); font-size:.66rem; font-weight:500; }
.group-list { display:flex; gap:8px; margin-top:12px; overflow-x:auto; scrollbar-width:thin; }
.group-list.empty,.player-list.empty { color:var(--muted); font-size:.85rem; padding:14px 2px 3px; }
.group-button { flex:0 0 auto; padding:9px 12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--soft); cursor:pointer; }
.group-button.active { color:var(--text); border-color:var(--accent); background:rgba(139,124,255,.15); }
.group-button small { display:block; margin-top:2px; opacity:.66; font-size:.63rem; }
.player-list { display:grid; gap:8px; }
.player-row { display:grid; grid-template-columns:38px minmax(80px,1fr) minmax(130px,1.2fr) 48px; gap:11px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:13px; background:var(--soft); transition:border-color .15s,background .15s; }
.player-row.speaking { border-color:rgba(98,212,156,.42); background:rgba(98,212,156,.06); }
.avatar { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:var(--accent2); background:linear-gradient(145deg,rgba(139,124,255,.18),rgba(85,219,224,.08)); font-weight:800; }
.player-name { overflow:hidden; font-size:.83rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.player-state { display:block; margin-top:2px; color:var(--muted); font-size:.65rem; font-weight:500; }
.volume-wrap { display:flex; align-items:center; gap:9px; }
input[type="range"] { width:100%; accent-color:var(--accent2); }
.volume-value { width:38px; color:var(--muted); font-size:.68rem; text-align:right; font-variant-numeric:tabular-nums; }
.mute-button { height:34px; padding:0 8px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; font-size:.69rem; }
.mute-button.muted { color:var(--red); border-color:rgba(255,120,136,.35); }
.chat-panel { position:sticky; top:18px; }
.chat-log { height:min(56vh,550px); min-height:380px; overflow:auto; padding-right:5px; scrollbar-width:thin; }
.chat-entry { padding:10px 2px; border-bottom:1px solid var(--line); }
.chat-meta { display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; color:var(--muted); font-size:.68rem; }
.chat-source { color:var(--accent2); font-weight:700; }
.chat-text { color:#e7e9f2; font-size:.85rem; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-form { display:flex; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.chat-form input,.login-card input:not([type="checkbox"]) { min-width:0; border:1px solid var(--line); border-radius:12px; outline:none; color:var(--text); background:var(--soft); }
.chat-form input { flex:1; height:44px; padding:0 13px; }
.chat-form input:focus,.login-card input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,124,255,.12); }
.chat-form button { padding:0 16px; border-radius:12px; }
footer { justify-content:space-between; padding:22px 4px 0; color:var(--muted); font-size:.7rem; }
.text-button { padding:5px; color:var(--muted); background:none; border:0; cursor:pointer; }
.text-button:hover { color:var(--text); }
.mobile-tabs { display:none; }
.login-overlay { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:rgba(4,5,9,.8); backdrop-filter:blur(16px); }
.login-overlay.hidden { display:none; }
.login-card { width:min(410px,100%); padding:30px; }
.login-card>p { color:var(--muted); line-height:1.5; }
.login-card label { display:grid; gap:6px; margin:14px 0; color:var(--muted); font-size:.75rem; font-weight:650; }
.login-card input:not([type="checkbox"]) { width:100%; height:46px; padding:0 13px; }
.login-card .remember-row { display:flex; align-items:center; }
.remember-row input { width:17px; height:17px; accent-color:var(--accent); }
.login-card .primary-button { width:100%; margin-top:5px; }
.form-error { min-height:1.2em; margin:12px 0 0!important; color:var(--red)!important; font-size:.76rem; text-align:center; }
@media (max-width:800px) {
 .app-shell { width:min(100% - 20px,620px); padding-top:max(16px,env(safe-area-inset-top)); }
 .topbar { margin-bottom:16px; } .brand .eyebrow { display:none; } .brand h1 { font-size:1rem; } .brand-mark { width:34px; } .connection-pill { padding:7px 9px; }
 .listen-card { align-items:flex-start; padding:19px; } .listen-copy p { font-size:.8rem; } .listen-actions { align-self:center; }
 .content-grid { display:block; } .mobile-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:10px 0; padding:4px; border:1px solid var(--line); border-radius:13px; background:var(--soft); }
 .tab { height:36px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-weight:700; } .tab.active { color:var(--text); background:var(--raised); }
 .tab-panel { display:none; } .tab-panel.active { display:grid; } .chat-panel { position:static; }
 .voice-column>.panel,.chat-panel { padding:17px; border-radius:17px; } .scope-control { grid-template-columns:1fr; } .scope-option { padding:10px; } .scope-option small { white-space:normal; }
 .player-row { grid-template-columns:36px minmax(0,1fr) 42px; } .volume-wrap { grid-column:1/-1; } .chat-log { height:clamp(240px,35dvh,360px); min-height:240px; }
}
@media (max-width:480px) { .listen-card { display:block; } .listen-actions { margin-top:15px; } .primary-button { flex:1; } .listen-actions .primary-button { width:calc(100% - 55px); } .login-card { padding:23px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }