:root{color-scheme:dark;--bg:#101216;--panel:#171a20;--panel2:#1d2129;--line:#292e38;--text:#f1f2f5;--muted:#9299a7;--lime:#c6f36a;--violet:#8b7cf7;--red:#fc737b;--mono:Consolas,'Cascadia Mono',monospace;--sans:'Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#242935 0%,var(--bg) 53%);color:var(--text);font:14px var(--sans)}.shell{max-width:1040px;min-height:100vh;margin:auto;padding:0 42px;display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242830}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.7px}.brand-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--lime);color:#161a12;font-size:18px}.topbar-right{display:flex;align-items:center;gap:9px;color:#a1a7b1;font-size:12px}.privacy-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #c6f36a88}
.welcome{flex:1;display:grid;grid-template-columns:1fr 390px;column-gap:64px;align-content:center;row-gap:50px;padding:72px 0 56px}.hero-copy{align-self:center}.eyebrow{display:flex;align-items:center;gap:10px;color:#abb1bd;font:10px var(--mono);letter-spacing:1.2px}.eyebrow-line{width:19px;height:1px;background:var(--lime)}h1{font-size:clamp(39px,5.2vw,59px);line-height:1.15;letter-spacing:-3.3px;margin:25px 0 19px;font-weight:700}h1 span{color:var(--lime)}.lead{max-width:405px;color:#a4aab5;line-height:1.8;font-size:14px;margin:0}.join-card{background:linear-gradient(145deg,#1b1f27,#16191f);border:1px solid #2b303b;border-radius:17px;padding:25px;box-shadow:0 22px 60px #0003}.card-title{font-weight:700;font-size:16px;margin-bottom:24px}.field-label{display:block;color:#9ba2af;font-size:11px;margin-bottom:8px}.text-input{width:100%;height:46px;border-radius:9px;border:1px solid #333945;background:#111419;color:var(--text);padding:0 13px;font:13px var(--sans);outline:none;transition:border .15s}.text-input:focus{border-color:#94bd50;box-shadow:0 0 0 3px #c6f36a12}.text-input::placeholder{color:#606774}.button{height:46px;border:0;border-radius:9px;cursor:pointer;font:700 12px var(--sans);transition:transform .15s,background .15s}.button:hover,.control:hover{transform:translateY(-1px)}.button-primary{margin-top:12px;width:100%;padding:0 15px;background:var(--lime);color:#1a2011;display:flex;align-items:center;justify-content:space-between}.button-primary:hover{background:#d1fa7c}.button-arrow{font-size:19px;font-weight:400}.divider{margin:20px 0;display:flex;align-items:center;gap:10px;color:#787f8c;font-size:10px;white-space:nowrap}.divider span{height:1px;background:#303540;flex:1}.divider i{font-style:normal}.join-form{display:grid;grid-template-columns:1fr 89px;gap:8px}.code-input{text-transform:uppercase;letter-spacing:2px;font:11px var(--mono)}.button-secondary{background:#292e38;color:#edf0f5}.button-secondary:hover{background:#343a47}.button-secondary span{margin-left:7px}.hint{display:flex;gap:8px;align-items:center;color:#7f8794;font-size:10px;margin-top:19px}.hint-icon{font-size:17px;color:var(--lime)}
.feature-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #252a33;background:#15181e;border-radius:13px;padding:17px 20px}.feature{display:flex;align-items:center;gap:12px}.feature+.feature{border-left:1px solid #292e37;padding-left:21px}.feature-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#252a32;color:var(--lime);font-size:17px}.icon-wave{color:#a49aff}.icon-link{color:#b5d76c}.feature b,.feature small{display:block}.feature b{font-size:11px}.feature small{margin-top:4px;color:#848b98;font-size:9px}
.hidden{display:none!important}.room-view{padding:38px 0 25px;flex:1}.room-heading{display:flex;justify-content:space-between;align-items:center}.room-heading h2{font-size:28px;letter-spacing:-1px;margin:10px 0 0}.room-heading-right{display:flex;align-items:center;gap:10px}.connection-pill{display:flex;align-items:center;gap:8px;border:1px solid #333945;background:#191c22;color:#aab0bb;padding:9px 12px;border-radius:99px;font-size:10px}.connection-pill i{width:7px;height:7px;background:#b7a45c;border-radius:50%}.connection-pill.online i{background:var(--lime);box-shadow:0 0 10px #c6f36a88}.connection-pill.error i{background:var(--red)}.icon-button{border:1px solid #333945;background:#191c22;border-radius:9px;color:#c8cbd1;width:35px;height:35px;font-size:16px;cursor:pointer}.room-code-row{display:flex;align-items:center;gap:12px;margin:23px 0 15px;color:#7e8693;font:9px var(--mono);letter-spacing:.7px}.room-code-row strong{color:#e3e6eb;letter-spacing:2px;font-size:12px}.text-button{background:none;border:0;color:var(--lime);font:10px var(--sans);cursor:pointer}.invite-network{max-width:390px;margin:4px 0 18px}.invite-network select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#89919e 50%),linear-gradient(135deg,#89919e 50%,transparent 50%);background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}.server-field-label{margin-top:17px}.server-address-help{display:block;margin-top:6px;margin-bottom:13px;color:#7f8794;font-size:10px;line-height:1.4}.stream-mode-label{margin-top:16px}.invite-network small{display:block;color:#7f8794;font-size:10px;line-height:1.5;margin-top:7px}
.stage{height:min(51vh,430px);min-height:270px;position:relative;border:1px solid #2a3039;border-radius:15px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#1e242a 0%,#12151a 66%);display:grid;place-items:center}.stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff04,transparent 40%,#c6f36a04)}.stage-empty{text-align:center;position:relative;z-index:1}.stage-symbol{width:61px;height:61px;display:grid;place-items:center;margin:0 auto 18px;border-radius:20px;background:#252c30;border:1px solid #37433a;color:var(--lime);font-size:35px;font-weight:800;box-shadow:0 0 45px #c6f36a10}.orbit{position:absolute;width:152px;height:152px;border:1px solid #c6f36a0d;border-radius:50%;left:50%;top:-47px;transform:translateX(-50%)}.orbit-two{width:211px;height:211px;top:-77px;border-color:#8b7cf70b}.stage-title{font-weight:700;font-size:14px}.stage-caption{color:#9299a5;font-size:11px;margin-top:7px}.share-tip{margin-top:18px;color:#737c88;font-size:10px}.remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#08090b}.video-label{position:absolute;z-index:2;bottom:15px;left:16px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #ffffff1d;border-radius:7px;background:#0b0d10bb;color:#f2f3f6;font-size:10px}.video-label span:first-child{width:6px;height:6px;border-radius:50%;background:var(--lime)}.stage-quality{position:absolute;z-index:2;top:14px;right:14px;display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #ffffff1b;border-radius:7px;background:#0d0f12aa;color:#b8bec8;font:8px var(--mono);letter-spacing:.6px}.quality-dot{width:6px;height:6px;border-radius:50%;background:#b7a45c}.stage-quality.live .quality-dot{background:var(--lime);box-shadow:0 0 8px #c6f36a88}
.controls{display:flex;justify-content:center;gap:9px;padding:20px 0 14px}.control{min-width:125px;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 12px;border:1px solid #333945;background:#1b1f26;color:#dce0e6;border-radius:9px;font:600 10px var(--sans);cursor:pointer;transition:transform .15s,border-color .15s}.control-icon{font-size:14px;color:#a8afb9}.control kbd{font:9px var(--mono);color:#6f7784;border:1px solid #3c424e;border-radius:4px;padding:2px 4px}.control.active{border-color:#719438;background:#242b1d;color:var(--lime)}.control.active .control-icon{color:var(--lime)}.control-share{border-color:#49552e;background:#24291e;color:var(--lime)}.control-leave{min-width:92px;color:#e9959a}.control-leave .control-icon{color:#e9959a}.stats-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;color:#858d9a;font:9px var(--mono);padding:0 4px}.stats-row>span{display:flex;gap:7px;align-items:center}.stats-row i{width:6px;height:6px;border-radius:50%;background:#7c8592}footer{height:55px;border-top:1px solid #242830;display:flex;justify-content:space-between;align-items:center;color:#66707c;font:8px var(--mono);letter-spacing:.7px}footer #server-state{display:flex;align-items:center;gap:7px}footer #server-state i{width:5px;height:5px;border-radius:50%}footer #server-state.server-ready i{background:var(--lime)}footer #server-state.server-error{color:#ed777e}footer #server-state.server-error i{background:#ed777e}footer #server-state.server-loading i{background:#8c95a3}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,14px);opacity:0;pointer-events:none;padding:11px 16px;border:1px solid #414854;border-radius:9px;background:#222730;color:#f4f4f5;font-size:11px;transition:all .18s;box-shadow:0 12px 35px #0005}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.shell{padding:0 20px}.welcome{grid-template-columns:1fr;gap:28px;padding:49px 0 35px}.hero-copy h1{font-size:44px}.join-card{max-width:480px;width:100%}.feature-strip{grid-template-columns:1fr;gap:14px}.feature+.feature{border:0;border-top:1px solid #292e37;padding:14px 0 0}.feature{padding:0}.room-heading{align-items:flex-start;gap:15px}.room-heading h2{font-size:24px}.connection-pill{font-size:9px;padding:8px}.stage{min-height:240px;height:42vh}.controls{flex-wrap:wrap}.control{min-width:calc(50% - 6px)}.stats-row{font-size:8px}footer{font-size:7px}}
.playback-prompt{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);padding:12px 16px;border:1px solid #c6f36a66;border-radius:9px;background:#15191ddd;color:#f1f2f5;font:600 11px var(--sans);cursor:pointer;box-shadow:0 12px 35px #0007}.playback-prompt:hover{background:#242a20}.playback-prompt:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.media-readiness{margin:0 0 13px;padding:9px 11px;border-left:2px solid #657080;border-radius:0 6px 6px 0;background:#15191e;color:#9ca5b2;font-size:9px;line-height:1.45}.media-readiness.ready{border-left-color:var(--lime)}.media-readiness.warning{border-left-color:#d8aa50;color:#d7c38e}

.diagnostics-button{padding:3px 0;font:inherit;white-space:nowrap}.diagnostics-button:hover{text-decoration:underline}

.mic-settings{margin:0 0 14px;border:1px solid #292e38;border-radius:10px;background:#15181e}
.mic-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;color:#e2e5ea;font-size:11px;font-weight:650;cursor:pointer;list-style:none}
.mic-settings>summary::-webkit-details-marker{display:none}
.mic-settings>summary:after{content:'+';color:var(--lime);font-size:16px;font-weight:400}
.mic-settings[open]>summary{border-bottom:1px solid #292e38}
.mic-settings[open]>summary:after{content:'−'}
.mic-settings>summary small{margin-left:auto;color:#8b93a0;font-size:9px;font-weight:400}
.mic-settings-content{display:grid;gap:10px;padding:13px 14px 15px}
.mic-setting-label{display:flex;justify-content:space-between;align-items:center;color:#cdd2da;font-size:10px}
.mic-setting-label output{color:var(--lime);font:10px var(--mono)}
.mic-gain{width:100%;margin:0;accent-color:var(--lime);cursor:pointer}
.mic-gain:disabled{opacity:.45;cursor:not-allowed}
.mic-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.mic-option{display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 9px;border:1px solid #292e38;border-radius:7px;background:#191c22;color:#b8bec8;font-size:9px;cursor:pointer}
.mic-option:last-child{grid-column:1/-1}
.mic-option input{margin:0;accent-color:var(--lime)}
.mic-option:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.mic-level-row{display:grid;grid-template-columns:105px minmax(90px,1fr) minmax(160px,auto);align-items:center;gap:10px;color:#aab1bd;font-size:9px}
.mic-meter{height:8px;overflow:hidden;border-radius:99px;background:#292e38}
.mic-meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c6f36a,#f0ce5c,#fc737b);transition:width .08s linear}
.mic-level-row output{color:#8b93a0;font-size:9px;text-align:right}
.mic-processing-status,.mic-gain-help{color:#858d9a;font-size:9px;line-height:1.45}
.mic-gain-help{color:#6f7886}
.control.push-to-talk{border-color:#786dd3;background:#211f31;color:#c8c0ff}
.control.push-to-talk .control-icon{color:#c8c0ff}
.control.push-to-talk.active{border-color:#a89cff;background:#2b2740;color:#ece9ff}
@media(max-width:760px){.mic-options{grid-template-columns:1fr}.mic-option:last-child{grid-column:auto}.mic-level-row{grid-template-columns:1fr auto}.mic-meter{grid-column:1/-1;grid-row:2}.mic-level-row output{grid-column:2;grid-row:1}.mic-settings>summary{flex-wrap:wrap}.mic-settings>summary small{margin-left:0}}


.video-output-actions{position:absolute;z-index:4;right:14px;bottom:14px;display:flex;gap:8px}
.video-output-button{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid #ffffff2b;border-radius:8px;background:#0b0d10d9;color:#f2f3f6;font:600 10px var(--sans);cursor:pointer;backdrop-filter:blur(10px)}
.video-output-button:hover,.video-output-button:focus-visible{border-color:var(--lime);outline:none}
.stream-detached{position:relative;z-index:1;text-align:center;padding:18px}
.stream-detached .text-button{margin-top:16px}
.stage.native-pip .remote-video{opacity:0}
.stage:fullscreen{width:100vw;height:100vh;min-height:0;border:0;border-radius:0;background:#08090b}
.pip-window-root{position:fixed;inset:0;overflow:hidden;background:#08090b;color:#f1f2f5}
.pip-window-screen{position:absolute;inset:0}
.pip-window-root .remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#08090b}
.pip-window-message{display:none;position:absolute;z-index:1;inset:0;place-items:center;padding:24px;text-align:center;color:#c5c9d0;background:#08090b;font:14px var(--sans)}
.pip-window-root.is-unavailable .remote-video{visibility:hidden}
.pip-window-root.is-unavailable .pip-window-message{display:grid}
.pip-window-caption{position:absolute;z-index:2;left:14px;bottom:14px;padding:8px 10px;border:1px solid #ffffff1d;border-radius:7px;background:#0b0d10bb;color:#f2f3f6;font-size:11px}
.pip-window-controls{position:absolute;z-index:3;top:12px;right:12px;display:flex;gap:8px}
.pip-window-button{min-height:38px;padding:0 12px;border:1px solid #ffffff30;border-radius:8px;background:#0b0d10dc;color:#f2f3f6;font:600 11px var(--sans);cursor:pointer;backdrop-filter:blur(10px)}
.pip-window-button:hover,.pip-window-button:focus-visible{border-color:var(--lime);outline:none}

/* Wide rooms use the available 16:9 desktop canvas instead of a narrow, tall stack. */
.shell{width:100%;max-width:1560px;min-height:100vh;min-height:100svh;padding-inline:clamp(20px,3.2vw,56px)}
.topbar{height:70px;flex:none}
.welcome{grid-template-columns:minmax(0,1fr) minmax(360px,440px);column-gap:clamp(40px,7vw,120px);row-gap:clamp(34px,5vh,58px);padding-block:clamp(38px,7vh,84px)}
.hero-copy{min-width:0}
.hero-copy h1{font-size:clamp(44px,4.5vw,72px);letter-spacing:-.055em}
.lead{max-width:490px}
.join-card{padding:clamp(24px,2.5vw,34px)}
.feature-strip{padding:20px clamp(20px,2.2vw,34px)}
.room-view{padding:clamp(20px,3vh,34px) 0 24px}
.room-heading{margin-bottom:20px}
.room-layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:clamp(20px,2.5vw,38px);align-items:start}
.room-sidebar{display:flex;min-width:0;flex-direction:column;gap:14px}
.room-main{min-width:0}
.room-code-row{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.room-code-row>span{grid-column:1/-1}
.room-code-row strong{font:700 14px var(--mono);letter-spacing:2px}
.invite-network{max-width:none;margin:0;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.invite-network .field-label{margin-top:0}
.invite-network .stream-mode-label,.invite-network .bitrate-label{margin-top:16px}
.invite-network small{font-size:10px;line-height:1.5}
.bitrate-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:2px}
.stream-bitrate{width:100%;min-width:0;margin:0;accent-color:var(--lime);cursor:pointer}
.bitrate-control output{min-width:86px;color:var(--lime);font:11px var(--mono);text-align:right}
.bitrate-note,.stream-resolution-note{display:block;margin-top:8px;color:#858d9a;font-size:10px;line-height:1.5}
.stream-resolution-note{color:#6f7886}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0}
.control{width:100%;min-width:0;height:46px;gap:7px;padding-inline:9px;font-size:11px}
.control kbd{margin-left:auto}
.mic-settings{margin:0}
.mic-settings>summary{min-height:44px}
.mic-option{min-height:40px;font-size:10px}
.mic-option input{width:16px;height:16px;flex:none}
.mic-level-row{min-width:0}
.stage{width:100%;height:auto;min-height:0;aspect-ratio:16/9}
.stage-empty{max-width:100%;padding:16px}
.remote-video{object-fit:contain}
.video-output-actions{right:12px;bottom:12px}
.stats-row{margin-top:18px;font-size:10px}
.stats-row>span{min-width:0}
.stats-row #video-stats{flex:1 1 100%;color:#a8afbb}
.stats-row #route-status{color:#a8afbb}
.diagnostics-button{min-height:36px}
#remote-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.control:focus-visible,.icon-button:focus-visible,.video-output-button:focus-visible,.text-button:focus-visible,.button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

@media(max-width:1050px){
  .shell{padding-inline:clamp(20px,3vw,34px)}
  .room-layout{grid-template-columns:minmax(270px,320px) minmax(0,1fr);gap:20px}
  .invite-network{padding:13px}
  .room-sidebar{gap:11px}
}

@media(max-width:900px){
  .room-layout{display:flex;flex-direction:column;gap:16px}
  .room-main{order:0;width:100%}
  .room-sidebar{order:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .room-code-row{grid-column:1/-1}
  .invite-network{grid-column:1/-1}
  .controls{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .mic-settings{grid-column:1/-1}
}

@media(max-width:760px){
  .shell{width:100%;min-height:100vh;min-height:100svh;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .topbar{height:62px}
  .topbar-right{gap:7px;font-size:10px}
  .welcome{grid-template-columns:minmax(0,1fr);gap:24px;padding:34px 0 25px}
  .hero-copy h1{font-size:clamp(32px,8.5vw,44px);line-height:1.12;letter-spacing:-.055em;margin:18px 0 14px}
  .hero-copy .eyebrow{font-size:9px;letter-spacing:.9px}
  .lead{font-size:13px;line-height:1.65}
  .join-card{max-width:none;padding:20px;border-radius:14px}
  .card-title{margin-bottom:18px}
  .text-input{height:48px;font-size:16px}
  .field-label{font-size:10px}
  .server-address-help{font-size:11px}
  .media-readiness{font-size:11px}
  .button{height:48px;font-size:13px}
  .feature-strip{grid-template-columns:1fr;gap:12px;padding:15px 16px}
  .feature+.feature{border:0;border-top:1px solid #292e37;padding:12px 0 0}
  .feature b{font-size:12px}
  .feature small{font-size:10px}
  .room-view{padding:19px 0 18px}
  .room-heading{align-items:center;gap:10px;margin-bottom:14px}
  .room-heading h2{font-size:21px;letter-spacing:-.6px;margin-top:7px}
  .room-heading .eyebrow{font-size:8px;letter-spacing:.8px}
  .room-heading-right{gap:7px}
  .connection-pill{max-width:148px;padding:8px 9px;font-size:9px}
  .connection-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .icon-button{width:42px;height:42px;flex:none}
  .room-layout{gap:12px}
  .room-sidebar{display:flex;gap:10px}
  .room-code-row{order:0;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px 9px;padding:10px 12px}
  .room-code-row>span{grid-column:1/-1;font-size:8px}
  .room-code-row strong{font-size:13px}
  .room-code-row .text-button{min-height:36px;padding-inline:6px}
  .room-main{order:-1}
  .stage{min-height:0;aspect-ratio:16/9;border-radius:12px}
  .stage-symbol{width:48px;height:48px;margin-bottom:12px;border-radius:15px;font-size:29px}
  .stage-title{font-size:13px}
  .stage-caption{font-size:10px}
  .stage-quality{top:8px;right:8px;padding:6px 7px;font-size:7px}
  .video-label{left:8px;bottom:8px;max-width:calc(100% - 140px);padding:6px 8px;font-size:9px}
  .video-output-actions{right:8px;bottom:8px;gap:6px}
  .video-output-button{min-height:40px;padding-inline:11px;font-size:15px}
  .video-output-button span{display:none}
  .stream-detached{padding:12px}
  .invite-network{order:2;display:block;padding:14px;border-radius:11px}
  .invite-network .field-label{font-size:9px}
  .invite-network .stream-mode-label,.invite-network .bitrate-label{margin-top:14px}
  .invite-network small{font-size:10px}
  .bitrate-control{gap:9px}
  .bitrate-control output{min-width:78px;font-size:10px}
  .stream-bitrate{height:34px}
  .controls{order:1;grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0}
  .control{height:48px;padding-inline:9px;font-size:11px;white-space:normal}
  .control kbd{display:none}
  .mic-settings{order:3;margin:0}
  .mic-settings>summary{gap:8px;padding:12px;font-size:11px}
  .mic-settings>summary small{font-size:9px}
  .mic-options{grid-template-columns:1fr}
  .mic-option:last-child{grid-column:auto}
  .mic-option{min-height:44px;padding:9px 10px;font-size:11px}
  .mic-level-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .mic-meter{grid-column:1/-1;grid-row:2;height:9px}
  .mic-level-row output{grid-column:2;grid-row:1;max-width:150px;font-size:10px}
  .mic-processing-status,.mic-gain-help{font-size:10px}
  .stats-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;margin-top:12px;padding:0;font-size:9px}
  .stats-row #video-stats{grid-column:1/-1}
  .diagnostics-button{justify-self:start;min-height:40px}
  footer{height:48px;flex:none;font-size:8px}
  .toast{left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center;transform:translateY(14px)}
  .toast.show{transform:translateY(0)}
}

@media(max-width:390px){
  .shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .topbar-right{font-size:9px}
  .room-heading h2{font-size:19px}
  .connection-pill{max-width:124px}
  .room-code-row{grid-template-columns:minmax(0,1fr) auto;}
  .room-code-row strong{grid-column:1}
  .room-code-row .text-button{grid-column:2;grid-row:2}
  .control{gap:5px;font-size:10px}
  .control-icon{font-size:13px}
  .mic-level-row output{max-width:120px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Anna room redesign: clear hierarchy, compact participant grid, and stable mobile layout. */
:root{
  --bg:#080e16;
  --panel:#101a26;
  --panel2:#162333;
  --line:#293a4b;
  --text:#edf4fc;
  --muted:#93a6ba;
  --lime:#8ee7cb;
  --violet:#b4a6ff;
  --red:#ff8791;
  --sans:Inter,'Segoe UI',system-ui,sans-serif;
}
body{
  background:
    radial-gradient(ellipse 62% 42% at 80% -8%,#182d45 0%,transparent 72%),
    radial-gradient(ellipse 44% 42% at 0% 30%,#14243a 0%,transparent 76%),
    var(--bg);
  color:var(--text);
  line-height:1.5;
}
.shell{max-width:1480px;padding-inline:clamp(18px,3.4vw,54px)}
.topbar{height:72px;flex:none;border-color:#233344}
.brand{gap:11px;font-size:20px;letter-spacing:-.8px}
.brand-mark{width:34px;height:34px;border-radius:12px;box-shadow:0 7px 22px #8ee7cb2e}
.topbar-right{color:#b0bfd0;font-size:12px}
.privacy-dot{background:var(--lime);box-shadow:0 0 13px #8ee7cb80}
.eyebrow{color:#aebed0;font-size:10px;letter-spacing:1.1px}
.eyebrow-line{background:var(--lime)}
.welcome{grid-template-columns:minmax(0,1fr) minmax(370px,450px);column-gap:clamp(38px,7vw,112px);padding-block:clamp(42px,7vh,88px) clamp(34px,5vh,62px)}
.hero-copy h1{font-weight:680;letter-spacing:-.06em}
h1 span{color:var(--lime)}
.lead{color:#a6b6c6;font-size:15px;line-height:1.75}
.join-card{border-color:#2d4153;border-radius:20px;background:linear-gradient(145deg,#152434,#101924 72%);box-shadow:0 26px 70px #02070d8c}
.card-title{font-size:19px;letter-spacing:-.4px}
.field-label{color:#b8c7d5;font-size:11px;letter-spacing:.035em}
.text-input{border-color:#34485a;border-radius:11px;background:#0c141e;color:#f2f7fc}
.text-input:focus{border-color:var(--lime);box-shadow:0 0 0 3px #8ee7cb20}
.button{border-radius:11px;font-size:12px}
.button-primary{background:var(--lime);color:#082019;box-shadow:0 8px 24px #4dbb9821}
.button-primary:hover{background:#a5f2da}
.button-secondary{background:#263749;color:#f1f6fb}
.button-secondary:hover{background:#30465a}
.media-readiness{border-radius:0 9px 9px 0;background:#152231;color:#a8b8c8;font-size:10px}
.hint{color:#a4b3c1;font-size:11px}
.hint-icon{color:var(--lime)}
.feature-strip{border-color:#2a3a4a;border-radius:16px;background:#101a25e8;padding:20px 24px}
.feature+.feature{border-color:#2b3b4b}
.feature-icon{border:1px solid #35485b;border-radius:11px;background:#182738;color:var(--lime)}
.feature b{font-size:12px}
.feature small{color:#9cadbf;font-size:10px}
.room-view{flex:1;padding:clamp(22px,3vh,38px) 0 28px}
.room-heading{align-items:center;margin-bottom:21px;gap:16px}
.room-heading h2{margin-top:7px;font-size:clamp(24px,2.3vw,32px);font-weight:680;letter-spacing:-.055em}
.room-heading-right{gap:9px}
.connection-pill{min-height:38px;border-color:#35495c;background:#142232;color:#c2cfdb;font-size:11px}
.connection-pill i{background:#e8c777}
.connection-pill.online{border-color:#34705f;color:#aaf0dc;background:#102a25}
.connection-pill.online i{background:var(--lime);box-shadow:0 0 11px #8ee7cb80}
.connection-pill.error{border-color:#75414b;background:#2b171e}
.icon-button{width:39px;height:39px;border-color:#35495c;border-radius:12px;background:#142232;color:#dce8f3}
.icon-button:hover{border-color:var(--lime);background:#1a2c3b}
.room-layout{grid-template-columns:minmax(285px,340px) minmax(0,1fr);gap:clamp(18px,2.1vw,30px);align-items:start}
.room-sidebar{gap:12px}
.room-code-row,.invite-network,.mic-settings{
  border:1px solid #2b3e50;
  border-radius:15px;
  background:linear-gradient(150deg,#142232,#101a25);
  box-shadow:0 12px 36px #02080e38;
}
.room-code-row{margin:0;padding:14px 16px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 10px;color:#a6b7c7;font:10px var(--mono);letter-spacing:.05em}
.room-code-row>span{grid-column:1/-1;color:#91a5b8;font-size:9px;letter-spacing:.1em}
.room-code-row strong{font:700 15px var(--mono);letter-spacing:.16em;color:#eff6fd}
.room-code-row .text-button{padding:7px 2px;font-size:11px}
.invite-network{margin:0;padding:16px}
.invite-network .field-label{margin:0 0 7px;color:#b1c1cf;font-size:10px;letter-spacing:.06em}
.invite-network .stream-mode-label,.invite-network .bitrate-label{margin-top:17px}
.invite-network small,.bitrate-note,.stream-resolution-note{color:#9aacc0;font-size:11px;line-height:1.55}
.stream-resolution-note{color:#8298ad}
.stream-bitrate{accent-color:var(--lime)}
.bitrate-control output{color:var(--lime);font-size:11px}
.control{min-height:46px;border-color:#33495b;border-radius:12px;background:#172738;color:#e4eef7;font-size:11px}
.control:hover{border-color:#4f7186;background:#1d3042}
.control-icon{color:#b3c5d5}
.control.active,.control-share{border-color:#34705f;background:#15362e;color:#a5f0db}
.control.active .control-icon,.control-share .control-icon{color:var(--lime)}
.control-leave{color:#ffa0a7}
.mic-settings{overflow:hidden}
.mic-settings>summary{min-height:46px;color:#e8f0f7;font-size:12px}
.mic-settings>summary small{color:#9bafc0;font-size:10px}
.mic-settings[open]>summary{border-color:#2b3e50}
.mic-settings-content{gap:12px}
.mic-option{border-color:#304457;border-radius:10px;background:#111e2a;color:#d5e0ea;font-size:10px}
.mic-meter{background:#2a3a4a}
.stats-row{gap:9px 18px;margin-top:15px;color:#9eb0c1;font-size:10px}
.stats-row>span{min-height:30px;padding:6px 10px;border:1px solid #26394a;border-radius:10px;background:#101a25}
.stats-row>span:first-child{flex:0 1 auto}
.stats-row #video-stats{flex:1 1 300px;color:#c1d0de}
.stats-row .diagnostics-button{min-height:30px;padding:5px 3px;color:var(--lime)}
.room-main{gap:14px}
.room-presence{
  min-width:0;
  padding:clamp(16px,1.7vw,23px);
  border:1px solid #2d4255;
  border-radius:18px;
  background:
    radial-gradient(ellipse at 100% 0%,#1c3b4c70,transparent 50%),
    linear-gradient(145deg,#142232,#101923 78%);
  box-shadow:0 18px 52px #02080f50;
  transition:padding .2s,border-radius .2s;
}
.room-presence-heading{align-items:center;gap:14px}
.presence-eyebrow,.activity-heading{color:#8fa6ba;font:600 10px var(--mono);letter-spacing:.11em}
.room-presence-heading h3{margin:5px 0 0;color:#f0f6fc;font-size:19px;font-weight:650;letter-spacing:-.035em}
#participant-count{margin-left:7px;color:#9bb0c3;font:500 12px var(--mono)}
.presence-state{min-height:34px;padding:0 12px;border-color:#344a5d;border-radius:999px;background:#0f1b27;color:#c2cfdb;font-size:10px;white-space:nowrap}
.presence-state:before{background:#dabb71}
.presence-state.online{border-color:#34705f;background:#10271f;color:#aaf0dc}
.presence-state.online:before{background:var(--lime);box-shadow:0 0 8px #8ee7cb80}
.participants-list{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin-top:16px}
.participant-card{
  min-height:69px;
  gap:10px;
  padding:10px 11px;
  border:1px solid #2d4356;
  border-radius:14px;
  background:linear-gradient(135deg,#12202d,#101a25);
  box-shadow:inset 0 1px #ffffff05;
}
.participant-card.is-local{border-color:#347160;background:linear-gradient(135deg,#15332c,#11231f)}
.participant-avatar{width:39px;height:39px;border:1px solid #40596d;border-radius:12px;background:#203448;color:#e2f0fa;font-size:13px}
.participant-card.is-local .participant-avatar{border-color:#4b907c;background:#245442;color:#b6f8e5}
.participant-identity{gap:3px}
.participant-identity strong{color:#eef5fb;font-size:12px;font-weight:650}
.participant-identity small{color:#9aafc1;font-size:10px}
.participant-connection{color:#94a9ba;font-size:9px}
.participant-connection.is-ready{color:#96e8d0}
.participant-waiting{border-style:dashed;background:#0e1924a8;box-shadow:none}
.participant-waiting .participant-avatar{width:34px;height:34px;border-color:#354a5b;border-radius:11px;background:#101c27;color:#a5b7c7;font-size:19px}
.participant-waiting .participant-identity strong{color:#adbdcc;font-weight:550}
.participant-waiting .participant-identity small{color:#778da1}
.room-activity{grid-template-columns:100px minmax(0,1fr);gap:12px;margin-top:16px;padding-top:13px;border-color:#293d4f}
.activity-heading{padding-top:4px;font-size:9px}
.activity-list{gap:6px;max-height:100px}
.activity-list li{color:#c2cfdb;font-size:11px}
.activity-list time{color:#8399ad}
.room-presence.has-stream{padding:13px 16px;border-radius:15px}
.room-presence.has-stream .room-presence-heading h3{font-size:15px}
.room-presence.has-stream .participants-list{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));margin-top:9px;gap:7px}
.room-presence.has-stream .participant-card{min-height:53px;padding:6px 9px;border-radius:11px}
.room-presence.has-stream .participant-avatar{width:32px;height:32px;border-radius:10px}
.room-presence.has-stream .room-activity{grid-template-columns:100px minmax(0,1fr);margin-top:8px;padding-top:9px;border-top:1px solid #293d4f}
.room-presence.has-stream .activity-list{max-height:48px}
.stage{border:1px solid #304559;border-radius:17px;background:#070c12;box-shadow:0 22px 60px #02070e80}
.stage:after{background:linear-gradient(135deg,#ffffff05,transparent 48%,#8ee7cb08)}
.stage-quality{border-color:#ffffff26;border-radius:9px;background:#0c1722e8;color:#d3dfea;font-size:9px}
.video-output-button{border-color:#ffffff38;border-radius:10px;background:#0d1b28ed;font-size:11px}
.toast{border-color:#40586b;border-radius:13px;background:#152536;color:#f2f7fc;font-size:12px}
footer{height:52px;flex:none;border-color:#223344;color:#8195a8}
footer #server-state.server-ready i{background:var(--lime)}
.control:focus-visible,.icon-button:focus-visible,.video-output-button:focus-visible,.text-button:focus-visible,.button:focus-visible,.text-input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

@media(max-width:1050px){
  .shell{padding-inline:clamp(18px,3vw,34px)}
  .room-layout{grid-template-columns:minmax(260px,310px) minmax(0,1fr);gap:17px}
  .participants-list{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
}
@media(max-width:900px){
  .room-layout{display:flex;flex-direction:column;gap:14px}
  .room-main{order:0;width:100%}
  .room-sidebar{order:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .room-code-row,.invite-network,.controls,.mic-settings{grid-column:1/-1}
  .invite-network{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .invite-network>small,.invite-network .bitrate-control,.invite-network .bitrate-note,.invite-network .stream-resolution-note{grid-column:1/-1}
}
@media(max-width:760px){
  .shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .topbar{height:62px}
  .topbar-right{font-size:10px}
  .welcome{grid-template-columns:minmax(0,1fr);gap:22px;padding:34px 0 24px}
  .hero-copy h1{font-size:clamp(34px,9vw,46px);line-height:1.1;letter-spacing:-.06em;margin:17px 0 13px}
  .lead{font-size:13px;line-height:1.65}
  .join-card{max-width:none;padding:20px;border-radius:16px}
  .feature-strip{grid-template-columns:1fr;gap:10px;padding:15px 16px}
  .feature+.feature{border:0;border-top:1px solid #2b3b4b;padding:11px 0 0}
  .room-view{padding:17px 0 18px}
  .room-heading{align-items:flex-start;margin-bottom:16px}
  .room-heading h2{font-size:23px}
  .connection-pill{max-width:180px;min-height:35px;padding:7px 9px;font-size:9px}
  .room-heading-right{gap:7px}
  .icon-button{width:36px;height:36px}
  .room-presence{padding:14px;border-radius:15px}
  .room-presence-heading h3{font-size:17px}
  .presence-state{max-width:48%;min-height:31px;padding-inline:9px;font-size:9px;white-space:normal;line-height:1.2;text-align:center}
  .participants-list,.room-presence.has-stream .participants-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}
  .participant-card,.room-presence.has-stream .participant-card{min-height:57px;gap:7px;padding:7px;border-radius:11px}
  .participant-avatar,.room-presence.has-stream .participant-avatar{width:31px;height:31px;border-radius:10px;font-size:11px}
  .participant-identity strong{font-size:10px}
  .participant-identity small{font-size:9px}
  .participant-connection{display:none}
  .room-activity,.room-presence.has-stream .room-activity{grid-template-columns:1fr;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid #293d4f}
  .activity-list{max-height:80px}
  .activity-list li{font-size:10px}
  .room-sidebar{grid-template-columns:1fr}
  .invite-network{display:block;padding:14px}
  .controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .control{min-height:46px;font-size:10px}
  .mic-settings>summary{align-items:flex-start;font-size:11px}
  .mic-settings>summary small{font-size:9px}
  .mic-options{grid-template-columns:1fr}
  .mic-option:last-child{grid-column:auto}
  .mic-level-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .mic-meter{grid-column:1/-1;grid-row:2;height:9px}
  .mic-level-row output{grid-column:2;grid-row:1;max-width:150px;font-size:10px}
  .stats-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:12px;font-size:9px}
  .stats-row>span{min-height:30px;padding:6px 8px}
  .stats-row #video-stats{grid-column:1/-1}
  .diagnostics-button{justify-self:start;min-height:38px}
  footer{height:47px;font-size:8px}
}
@media(max-width:390px){
  .shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .topbar-right{max-width:160px;font-size:9px}
  .room-heading h2{font-size:20px}
  .connection-pill{max-width:136px}
  .room-code-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 9px}
  .room-code-row strong{grid-column:1}
  .room-code-row .text-button{grid-column:2;grid-row:2}
  .participant-card,.room-presence.has-stream .participant-card{gap:5px;padding:6px}
  .participant-avatar,.room-presence.has-stream .participant-avatar{width:28px;height:28px}
  .control{gap:5px;padding-inline:6px;font-size:9px}
  .control-icon{font-size:12px}
  .mic-level-row output{max-width:120px}
}

/* Anna visual refresh */
:root{
  --bg:#0a1117;
  --panel:#111b24;
  --panel2:#17242e;
  --line:#293b46;
  --text:#eef5f5;
  --muted:#9aaeb2;
  --lime:#78ddc5;
  --violet:#a79af8;
  --red:#ff7d87;
  --sans:Inter,'Segoe UI',system-ui,sans-serif;
}
body{
  background:
    radial-gradient(ellipse 60% 46% at 73% -6%,#16333b 0%,transparent 72%),
    radial-gradient(ellipse 42% 45% at 4% 38%,#171c36 0%,transparent 76%),
    var(--bg);
}
.shell{max-width:1680px}
.topbar{border-color:#23323c}
.brand{font-size:20px;letter-spacing:-.8px}
.brand-mark{width:32px;height:32px;border-radius:11px;box-shadow:0 5px 20px #78ddc525}
.topbar-right{color:#a9bcbd;font-size:12px}
.privacy-dot{background:var(--lime);box-shadow:0 0 14px #78ddc566}
.eyebrow{color:#bdcacc;font-size:11px}
.eyebrow-line{background:var(--lime)}
h1{font-weight:650}
h1 span{color:var(--lime)}
.lead{color:#a9b9bc;font-size:15px;line-height:1.75}
.join-card{
  background:linear-gradient(148deg,#15232d,#101820 74%);
  border-color:#2a3e49;
  border-radius:21px;
  box-shadow:0 28px 76px #02080c77;
}
.card-title{font-size:19px;letter-spacing:-.35px}
.field-label{color:#b1c0c2;font-size:11px;letter-spacing:.06em}
.text-input{border-color:#354954;background:#0c141a;border-radius:11px}
.text-input:focus{border-color:#78ddc5;box-shadow:0 0 0 3px #78ddc51c}
.button{border-radius:11px;font-size:13px}
.button-primary{background:var(--lime);box-shadow:0 9px 22px #78ddc51c}
.button-primary:hover{background:#92ead6}
.button-secondary{background:#26343e}
.button-secondary:hover{background:#314550}
.hint{color:#9aadaf;font-size:11px}
.hint-icon{color:var(--lime)}
.feature-strip{border-color:#263943;background:#111a22;border-radius:16px}
.feature+.feature{border-color:#2b3c45}
.feature-icon{background:#1b2b34;color:var(--lime)}
.feature b{font-size:12px}
.feature small{color:#9aabad;font-size:10px}
.room-view{padding-top:clamp(22px,3.4vh,42px)}
.room-heading{margin-bottom:24px}
.room-heading h2{font-size:30px;letter-spacing:-1.2px}
.room-heading .eyebrow{color:#9fb2b4}
.connection-pill{border-color:#334751;background:#14212a;color:#c0cece;font-size:11px}
.connection-pill i{background:#d7b76a}
.connection-pill.online i{background:var(--lime);box-shadow:0 0 11px #78ddc566}
.icon-button{border-color:#354953;background:#14212a;border-radius:11px}
.icon-button:hover{border-color:#78ddc5;color:#fff}
.room-layout{gap:clamp(20px,2.7vw,42px)}
.room-code-row,.invite-network,.mic-settings{
  border-color:#2b3e49;
  background:linear-gradient(150deg,#14212a,#101820);
  border-radius:14px;
}
.room-code-row{color:#a2b3b5}
.room-code-row strong{color:#edf5f4}
.text-button{color:var(--lime);font-weight:600}
.invite-network{padding:18px}
.invite-network small,.bitrate-note,.stream-resolution-note{color:#a1b2b4;font-size:11px;line-height:1.55}
.stream-resolution-note{color:#84999e}
.stream-bitrate{accent-color:var(--lime)}
.bitrate-control output{color:var(--lime)}
.control{
  border-color:#344853;
  background:#17242d;
  border-radius:12px;
  color:#e3eceb;
  font-size:12px;
}
.control:hover{border-color:#58716f}
.control-icon{color:#b1c3c3}
.control.active,.control-share{border-color:#397768;background:#18352f;color:#8ce9d2}
.control.active .control-icon,.control-share .control-icon{color:#8ce9d2}
.control-leave{color:#ff9ba2}
.mic-settings{overflow:hidden}
.mic-settings>summary{color:#e5eeee}
.mic-settings>summary small{color:#9eb0b1}
.mic-option{border-color:#324650;background:#111d25;color:#dbe6e5}
.stats-row{color:#a3b3b4}
.stats-row #video-stats,.stats-row #route-status{color:#c1cece}
.diagnostics-button{color:var(--lime)}
.toast{border-color:#45616a;background:#17252e;color:#f1f8f7;border-radius:12px;box-shadow:0 18px 50px #0008;font-size:12px}
footer{border-color:#23343d;color:#82979b}
footer #server-state.server-ready i{background:var(--lime)}
.control:focus-visible,.icon-button:focus-visible,.video-output-button:focus-visible,.text-button:focus-visible,.button:focus-visible,.text-input:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}

.room-main{display:flex;flex-direction:column;gap:12px}
.room-presence{
  min-width:0;
  padding:19px;
  border:1px solid #2d414b;
  border-radius:16px;
  background:
    radial-gradient(ellipse at 100% 0%,#1a383b88,transparent 54%),
    linear-gradient(145deg,#14212a,#101820);
  box-shadow:0 14px 38px #02080c35;
  transition:padding .2s,border-radius .2s;
}
.room-presence-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.presence-eyebrow,.activity-heading{display:block;color:#8fa5a7;font:600 10px var(--mono);letter-spacing:.1em}
.room-presence-heading h3{margin:5px 0 0;color:#edf5f4;font-size:17px;letter-spacing:-.25px}
#participant-count{margin-left:5px;color:#8ca3a5;font:500 11px var(--mono)}
.presence-state{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 11px;
  border:1px solid #334852;
  border-radius:99px;
  background:#101a21;
  color:#bfcccd;
  font-size:11px;
}
.presence-state:before{content:'';width:7px;height:7px;border-radius:50%;background:#d7b76a}
.presence-state.online{border-color:#397768;color:#a4efdc}
.presence-state.online:before{background:var(--lime);box-shadow:0 0 9px #78ddc566}
.participants-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.participant-card{
  min-width:0;
  min-height:68px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #30444e;
  border-radius:13px;
  background:#101a21c9;
}
.participant-card.is-local{border-color:#37665f;background:#12251f}
.participant-avatar{
  width:38px;
  height:38px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid #40575d;
  border-radius:12px;
  background:#20333b;
  color:#daf4ee;
  font-size:13px;
  font-weight:700;
}
.participant-card.is-local .participant-avatar{border-color:#3c7468;background:#204238;color:#a8f0de}
.participant-waiting{border-style:dashed;background:#10191f88}
.participant-waiting .participant-avatar{border-style:dashed;background:transparent;color:#97adae;font-size:20px;font-weight:400}
.participant-identity{min-width:0;display:flex;flex:1;flex-direction:column;gap:4px}
.participant-identity strong{overflow:hidden;color:#eef5f4;font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.participant-identity small{overflow:hidden;color:#92a7a8;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.participant-connection{flex:none;color:#aab9ba;font-size:10px}
.participant-connection.is-ready{color:#8ee6d0}
.room-activity{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:start;gap:10px;margin-top:15px;padding-top:13px;border-top:1px solid #293d45}
.activity-heading{padding-top:3px;font-size:9px}
.activity-list{display:grid;gap:5px;max-height:82px;overflow:auto;margin:0;padding:0;list-style:none}
.activity-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c1cecd;font-size:11px;line-height:1.4}
.activity-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-list time{flex:none;color:#819698;font:10px var(--mono)}
.room-presence.has-stream{padding:12px 15px;border-radius:13px}
.room-presence.has-stream .room-presence-heading{align-items:center}
.room-presence.has-stream .presence-eyebrow{display:none}
.room-presence.has-stream .room-presence-heading h3{margin:0;font-size:14px}
.room-presence.has-stream .presence-state{min-height:28px;font-size:10px}
.room-presence.has-stream .participants-list{margin-top:9px;gap:7px}
.room-presence.has-stream .participant-card{min-height:50px;padding:6px 9px;gap:8px;border-radius:10px}
.room-presence.has-stream .participant-avatar{width:31px;height:31px;border-radius:9px;font-size:11px}
.room-presence.has-stream .participant-identity{gap:2px}
.room-presence.has-stream .participant-identity strong{font-size:11px}
.room-presence.has-stream .participant-identity small,.room-presence.has-stream .participant-connection{font-size:9px}
.room-presence.has-stream .room-activity{grid-template-columns:76px minmax(0,1fr);gap:7px;margin-top:8px;padding-top:0;border:0}
.room-presence.has-stream .activity-list{max-height:20px}
.stage{border-color:#293e48;border-radius:16px;background:#080d12;box-shadow:0 18px 45px #02080c55}
.stage:after{background:linear-gradient(135deg,#ffffff05,transparent 44%,#78ddc508)}
.stage-quality{border-color:#ffffff25;background:#0b1419df}
.stage-quality.live .quality-dot{background:var(--lime);box-shadow:0 0 9px #78ddc588}
.video-output-button{border-color:#ffffff36;background:#101c22ed}

@media(max-width:900px){
  .room-presence{padding:16px}
  .room-presence.has-stream{padding:11px 13px}
}
@media(max-width:760px){
  .topbar-right{font-size:10px}
  .room-heading{margin-bottom:17px}
  .room-heading h2{font-size:23px}
  .join-card{border-radius:17px}
  .room-presence{padding:14px;border-radius:14px}
  .room-presence-heading h3{font-size:15px}
  .presence-state{max-width:48%;min-height:30px;padding-inline:9px;font-size:10px;white-space:nowrap}
  .participants-list{gap:7px;margin-top:11px}
  .participant-card{min-height:62px;gap:7px;padding:8px}
  .participant-avatar{width:33px;height:33px;border-radius:10px}
  .participant-identity strong{font-size:11px}
  .participant-identity small{font-size:9px}
  .participant-connection{display:none}
  .room-activity{grid-template-columns:75px minmax(0,1fr);gap:8px;margin-top:11px;padding-top:10px}
  .activity-list li{font-size:10px}
  .room-presence.has-stream{padding:10px;border-radius:11px}
  .room-presence.has-stream .participants-list{margin-top:7px;gap:6px}
  .room-presence.has-stream .participant-card{min-height:45px;padding:5px 7px}
  .room-presence.has-stream .room-activity{grid-template-columns:65px minmax(0,1fr);margin-top:6px}
  .stage{border-radius:12px}
  .stats-row{color:#9fb0b2}
}
@media(max-width:430px){
  .room-presence-heading{align-items:flex-start}
  .presence-state{max-width:46%;white-space:normal;line-height:1.2}
  .participants-list{grid-template-columns:1fr}
  .participant-card{min-height:56px}
  .room-presence.has-stream .participants-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-presence.has-stream .participant-card{min-height:43px;gap:5px;padding:4px}
  .room-presence.has-stream .participant-avatar{width:27px;height:27px}
  .room-presence.has-stream .participant-identity strong{font-size:10px}
  .room-activity,.room-presence.has-stream .room-activity{grid-template-columns:1fr;gap:5px}
  .activity-heading{font-size:8px}
}