/* Veyra 2.4 — application workspace. Final layout and component tokens. */
:root {
  --bg:#313338; --surface:#2b2d31; --surface-2:#383a40; --border:#45474f;
  --text:#f2f3f5; --muted:#b5bac1; --accent:#8791ff; --accent-dark:#363b63;
  --green:#57d6a5; --danger:#ff929a;
  --studio-bg:var(--bg); --studio-panel:var(--surface); --studio-raised:var(--surface-2);
  --studio-soft:#35373e; --studio-line:var(--border); --studio-purple:var(--accent);
  --studio-blue:#9ba8ff; --studio-online:var(--green); --studio-muted:var(--muted);
  --studio-nav:0px;
}
html,body { background:var(--bg); color:var(--text); }
body { font-size:15px; line-height:1.55; }
button,input,select { font:inherit; }
.icon { width:20px; height:20px; stroke-width:1.9; }
.button,.icon-button { box-shadow:none; transition:background .15s,color .15s; }
.button { min-height:42px; padding:10px 16px; border-radius:7px; font-size:14px; font-weight:600; }
.button:hover { transform:none; }
.button.primary { background:#5865f2; border-color:#5865f2; color:white; box-shadow:none; }
.button.primary:hover { background:#4752c4; border-color:#4752c4; }
.button.secondary { background:#404249; border:1px solid transparent; color:var(--text); }
.button.secondary:hover { background:#4d5058; }
.button.danger { background:#a5323c; border-color:transparent; color:#fff; }
.button.danger:hover { background:#bc3945; }
.icon-button { width:40px; height:40px; border-radius:7px; color:#c2c6ce; background:transparent; }
.icon-button:hover { background:#ffffff12; color:#fff; }
.button:focus-visible,.icon-button:focus-visible { outline:2px solid #a4acff; outline-offset:3px; }
input:not([type=radio],[type=checkbox],[type=range]),select {
  min-height:46px; height:auto; padding:11px 13px; background:#1e1f22;
  border:1px solid #45474f; border-radius:7px; color:#f2f3f5; font-size:14px; line-height:1.5;
}
select { padding-right:32px; }
.input-wrap { border:0; background:#1e1f22; border-radius:7px; }
.input-wrap input:not([type=radio],[type=checkbox],[type=range]) { background:transparent; border:1px solid #45474f; padding-left:42px; }
input[type=range] { accent-color:#8791ff; }
label,legend { font-size:13px; font-weight:600; color:#d6d9df; }
.eyebrow { font-size:12px; color:#b5bac1; letter-spacing:1.25px; }
.field-note,.form-error,.policy-notice { font-size:13px; line-height:1.65; }
.status-dot { width:7px; height:7px; box-shadow:none; }
.version-badge,.brand-version { font-size:11px; line-height:1.5; padding:2px 7px; color:#cbd0ff; background:#363b57; border:0; border-radius:4px; }
.brand-dot { color:#9ba4ff; }

/* Shared navigation: a single application bar outside a room. */
.app-topbar {
  position:relative; inset:auto; width:100%; height:80px; min-height:80px;
  padding:0 clamp(24px,4vw,64px); display:flex; flex-direction:row;
  align-items:center; justify-content:space-between; gap:32px; background:#1e1f22;
  border:0; box-shadow:0 1px 0 #ffffff08; z-index:30;
}
.app-topbar:before { display:none; }
.brand { padding:0; height:auto; font-size:27px; gap:10px; letter-spacing:-1px; flex:none; }
.brand img,.room-brand img { width:36px; height:36px; box-shadow:none; border-radius:11px; }
.brand-version { margin-left:4px; }
.app-topbar .brand>span:not(.brand-version) { display:inline; }
.brand-version { display:inline-flex; }
.header-navigation { margin:0 auto; width:auto; height:auto; display:flex; flex-direction:row; align-items:center; gap:6px; border:0; background:transparent; box-shadow:none; border-radius:0; }
.header-navigation a,.header-navigation #live-tab { height:44px; min-height:44px; padding:0 16px; border:0; border-radius:7px!important; gap:9px; }
.header-navigation a:after { display:none; }
.header-navigation a:hover { background:#35373d!important; }
.header-navigation a[aria-current=page] { background:#3b3d48!important; color:#fff!important; }
.navigation-icon,.header-navigation a[aria-current=page] .navigation-icon { width:22px; height:22px; background:none; color:inherit; box-shadow:none; border-radius:0; }
.navigation-copy strong { font-size:14px; font-weight:600; }
.navigation-copy { display:flex; }
.navigation-icon { display:inline-flex; justify-content:center; align-items:center; }
.navigation-copy small,.navigation-arrow { display:none; }
.top-right { margin:0; padding:0; border:0; display:flex; gap:14px; align-items:center; }
.azimov-credit { font-size:11px; color:#b5bac1; }
.azimov-credit strong { font-size:11px; color:#d5d9df; }
.top-right .icon-button { border:0; background:transparent; }
.entry,.live-directory,.changelog,.footer { margin-left:auto; margin-right:auto; }
.footer { max-width:1440px; padding:25px 48px; background:transparent; border-color:#45474f; font-size:13px; }
.footer-policy-links { gap:20px; }

/* Start screen: clear access modes and product capabilities. */
.entry { max-width:1280px; min-height:calc(100dvh - 164px); padding:56px 48px; grid-template-columns:minmax(0,1fr) minmax(380px,460px); gap:80px; align-items:start; overflow:visible; }
.entry:before,.entry-panel:before { display:none; }
.intro { padding:24px 0 0; }
.intro h1 { margin:22px 0; max-width:600px; font-size:clamp(44px,4.5vw,62px); line-height:1.08; letter-spacing:-2.5px; font-weight:700; }
.intro h1 span { background:none; color:#b4bcff; -webkit-text-fill-color:currentColor; }
.hero-description { max-width:510px; font-size:17px; line-height:1.7; color:#c5c9d1; }
.home-capabilities { display:grid; gap:23px; margin:36px 0; }
.home-capabilities article { display:flex; align-items:flex-start; gap:15px; }
.home-capabilities article>.icon { margin-top:4px; color:#bbc2ff; width:23px; height:23px; }
.home-capabilities h2 { margin:0 0 4px; font-size:16px; font-weight:600; }
.home-capabilities p { margin:0; max-width:440px; font-size:14px; line-height:1.6; color:#b5bac1; }
.home-discover { display:flex; gap:15px; align-items:center; padding:18px 0; border-top:1px solid #4b4d55; border-bottom:1px solid #4b4d55; }
.home-discover-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#3b405f; color:#b4bcff; }
.home-discover>span:nth-child(2) { flex:1; }
.home-discover strong,.home-discover small { display:block; }
.home-discover strong { font-size:15px; }
.home-discover small { font-size:13px; color:#b5bac1; margin-top:3px; }
.home-discover>.icon { color:#b5bac1; }
.home-session-note { display:flex; gap:9px; margin-top:20px; color:#b5bac1; font-size:13px; }
.home-session-note .icon { width:16px; height:16px; margin-top:2px; }
.entry-panel { position:relative; top:auto; padding:30px; border:0; border-radius:12px; background:#2b2d31; box-shadow:0 8px 28px #18191d24; }
.entry-panel>.panel-icon { display:none; }
.entry-panel h2 { font-size:25px; line-height:1.3; font-weight:700; letter-spacing:-.6px; }
.entry-panel>p { font-size:14px; color:#b5bac1; margin-bottom:24px; }
.entry-mode { display:flex; gap:4px; padding:4px; background:#1e1f22; border-radius:7px; margin:0 0 23px; }
.entry-mode button { display:flex; align-items:center; justify-content:center; gap:7px; flex:1; padding:10px 6px; border:0; border-radius:5px; background:transparent; color:#b5bac1; font-size:13px; font-weight:600; }
.entry-mode button[aria-pressed=true] { background:#404249; color:#fff; }
.entry-mode .icon { width:17px; height:17px; }
.room-creation { margin:24px 0; }
.visibility-note { font-size:13px; color:#b5bac1; line-height:1.6; }
.choices { gap:8px; }
.choices span { height:auto; min-height:42px; padding:10px 8px; border:1px solid #50535b; border-radius:6px; background:#383a40; color:#d7dae0; font-size:13px; }
.choices input:checked+span { background:#414669; border-color:#939dff; color:white; outline:0; box-shadow:inset 0 0 0 1px #939dff; }
.privacy-note { border-top:1px solid #45474f; color:#b5bac1; font-size:13px; padding-top:19px; margin-top:18px; }
.policy-notice a,.share-rules a { color:#bbc2ff; }

/* Call workspace: one sidebar, persistent people/voice, a clear action header. */
.room-active .room { margin:0; display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100dvh; gap:0; background:#313338; }
.room-active .app-topbar { display:none; }
.room-active .sidebar { width:auto; margin:0; padding:20px 16px 12px; position:sticky; top:0; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; background:#2b2d31; border:0; overflow:hidden; }
.room-app-header { display:flex; flex-direction:column; align-items:stretch; padding:0 0 18px; margin:0; gap:5px; border-bottom:1px solid #3d3f45; }
.room-brand { gap:9px; margin:0 0 24px; font-size:26px; padding:0 4px; }
.room-brand .version-badge { margin-left:auto; }
.room-directory-link,.room-changelog-link { display:flex; gap:10px; min-height:42px; padding:9px 10px; background:transparent; border:0; border-radius:6px; font-size:14px; color:#c5c9d1; }
.room-directory-link:hover,.room-changelog-link:hover { background:#383a40; color:white; }
.participants-heading { margin:22px 4px 12px; font-size:12px; color:#b5bac1; letter-spacing:.8px; }
.count { background:#404249; color:#d7dae0; border:0; font-size:12px; }
.room-active .participants { margin:0; padding:0 2px; flex:1 1 150px; min-height:0; display:flex; flex-direction:column; gap:2px; overflow:auto; scrollbar-color:#555860 transparent; }
.participant { min-height:49px; padding:8px 5px; border:0; border-radius:6px; background:transparent; }
.participant:hover { background:#383a40; }
.avatar { width:32px; height:32px; border-radius:50%; background:#484b60; color:#dbe0ff; font-size:12px; }
.participant-name { font-size:14px; }
.participant-name small,.live-tag,.participant .self,.participant .admin-tag { font-size:11px; }
.participant-voice-controls { position:static; grid-column:3; grid-row:1; align-self:center; opacity:1; transform:none; gap:2px; width:auto; padding:0; }
.participant-remote .participant-media { display:none; }
.participant-voice-controls button { width:27px; height:30px; }
.participant-voice-controls .icon { width:15px; height:15px; }
.participant-volume-button { display:grid; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:#b5bac1; }
.participant-ban { display:grid; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:#d98995; }
.participant-ban:hover,.participant-ban:focus-visible { background:#4b252c; color:#ffb0bb; }
.participant-ban:disabled { opacity:.45; cursor:not-allowed; }
.participant-volume-button:hover,.participant-volume-button[aria-expanded=true] { background:#4a4d56; color:#fff; }
.participant-volume-panel { position:fixed; inset:auto; margin:0; width:200px; padding:14px; border:1px solid #4a4d56; border-radius:8px; background:#232428; color:#f2f3f5; box-shadow:0 8px 24px #0006; z-index:100; }
.participant-volume-panel[hidden] { display:none; }
.participant-volume-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:14px; }
.participant-volume-heading output { font-size:13px; color:#b5bac1; }
.participant-volume-panel input[type=range] { position:static; display:block; width:100%; height:28px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; opacity:1; pointer-events:auto; accent-color:#8490ff; }
.sidebar-fixed-controls { margin-top:12px; flex:0 0 auto; display:flex; flex-direction:column; background:#2b2d31; }
.sidebar-fixed-controls .voice-panel { margin:0 -16px; padding:16px; border:0; border-top:1px solid #41434a; background:#232428; border-radius:0; }
.voice-panel>div:first-child { display:flex; flex-direction:column; gap:3px; }
#voice-state { font-size:14px; font-weight:600; }
#voice-state-detail { font-size:12px; color:#b5bac1; }
.voice-actions { margin-top:12px; gap:7px; }
.voice-actions button { background:#383a40; flex:1; border:0; border-radius:6px; height:38px; }
.voice-actions button[aria-pressed=true] { color:#ff9fa5; background:#523036; }
.voice-meter { height:3px; margin-top:12px; background:#404249; }
.sidebar-fixed-controls .sidebar-bottom { display:none; }
.sidebar-fixed-controls .leave { margin:10px 0 0; width:100%; justify-content:center; border:0; background:transparent; color:#ff9fa5; font-size:13px; }
.sidebar-fixed-controls .leave:hover { background:#523036; }
.room-main { min-width:0; padding:0 24px 24px; background:#313338; }
.stage-heading { min-height:88px; height:auto; padding:16px 0; margin:0 0 15px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; border-bottom:1px solid #474950; background:#313338; }
.stage-heading>div:first-child { flex:1 1 220px; min-width:0; }
.stage-heading h2 { font-size:20px; letter-spacing:-.4px; margin:0 0 3px; }
#stage-subtitle { font-size:13px; color:#b5bac1; line-height:1.5; }
.stage-room-context { flex:1 1 190px; width:auto; order:0; margin:0; padding:0; border:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.stage-room-context h2 { font-size:14px; margin:0; }
.stage-room-context h2 span { color:#d5d9ff; }
.stage-room-context .visibility-badge { font-size:12px; max-width:none; color:#c5c9d1; text-align:left; }
.stage-room-context .connection-status { font-size:12px; color:#b5bac1; }
.stage-heading>.connection-privacy { order:3; margin:0; }
.connection-privacy summary { min-height:30px; padding:6px 9px; font-size:12px; background:#2b2d31; border:0; border-radius:5px; }
.connection-privacy>p { background:#232428; color:#d6d9df; border-color:#45474f; font-size:13px; }
.call-header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; }
.call-header-actions .button { width:auto; min-height:40px; padding:9px 12px; font-size:13px; }
.call-header-actions #invite-button { background:#404249; }
.call-header-actions #share-button { margin:0; }
.stream-tabs { gap:8px; margin:0 0 14px; }
.stream-tabs { height:auto; }
.stream-tab { flex:0 0 auto; min-width:285px; max-width:370px; height:auto; min-height:57px; padding:9px 13px; background:#2b2d31; border:1px solid transparent; border-radius:7px; }
.stream-tab.watching,.stream-tab.active { background:#3a3f61; border-color:#8791ff; }
.stream-tab .stream-title { font-size:14px; }
.stream-tab small,.stream-tab .watch-label { font-size:12px; color:#b5bac1; }
.stage { min-height:420px; height:clamp(420px,calc(100dvh - 290px),900px); border:0; border-radius:8px 8px 0 0; background:#1e1f22; box-shadow:none; overflow:hidden; }
.empty-stage { min-height:100%; background:none; padding:36px; }
.empty-art { width:72px; height:72px; margin:0 auto 22px; transform:none; border:0; border-radius:50%; background:#343744; color:#b4bcff; }
.empty-stage h3 { font-size:23px; font-weight:600; letter-spacing:-.4px; }
.empty-stage p { font-size:15px; color:#c5c9d1; }
.empty-stage small { font-size:13px; color:#b5bac1; }
.player-container,.multi-player { background:#1e1f22; min-height:0; }
.player-tile { border-radius:7px; border-color:#45474f; background:#1e1f22; }
.player-tile.selected { border-color:#8791ff; box-shadow:none; }
.video-label,.stream-tile-label { background:#18191de8; color:#e5e7eb; font-size:13px; border:0; box-shadow:none; border-radius:6px; }
.player-toolbar { min-height:58px; padding:9px 13px; background:#232428; border:0!important; border-radius:0 0 8px 8px!important; gap:14px; margin-top:0; margin-bottom:16px; }
.player-info { font-size:13px; color:#c5c9d1; }
.player-actions { gap:6px; }
.player-actions .button { padding:8px 11px; min-height:36px; font-size:13px; background:#383a40; }
.player-actions .icon-button { width:36px; height:36px; background:transparent; border:0; }
.player-controls { gap:6px; }
.player-controls .icon-button { width:36px; height:36px; border:0; background:transparent; border-radius:6px; }
.technical-button,.multiview-button { min-height:36px; padding:8px 11px; font-size:13px; border-radius:6px; }
.voice-actions .icon-button { width:100%; height:38px; background:#383a40; border-radius:6px; }
.voice-actions .icon-button.voice-on { background:#235344; color:#8be1be; }
.voice-actions .icon-button.voice-muted,.voice-actions .icon-button.voice-deafened { background:#523036; color:#ff9fa5; }
.volume-controls { gap:9px; }
.volume-controls input { width:74px; }
.broadcast-panel { border:0; border-radius:7px; overflow:hidden; background:#2b2d31; margin:0 0 14px; }
.broadcast-controls { padding:12px 14px; gap:8px; background:transparent; border:0; align-items:center; }
.broadcast-controls>span { flex:1 1 170px; font-size:13px; color:#8be1be; }
.broadcast-controls label { font-size:12px; }
.broadcast-controls select { min-height:34px; padding:6px 27px 6px 9px; font-size:13px; }
.broadcast-controls .button { min-height:35px; padding:8px 10px; font-size:12px; }
.capture-audio-status,.capture-performance-status { padding:10px 14px; margin:0; background:transparent; border-color:#404249; font-size:13px; }
.room-bottom { min-height:0; margin:0; padding:0; border:0; }
.room-bottom>span { display:none; }
.communities { border-top:1px solid #474950; margin:22px 0 0; padding-top:22px; }
.communities-heading h2 { font-size:17px; }
.communities-heading p,.community-rules { font-size:13px; color:#b5bac1; }
.community-links { gap:10px; }
.community-links>a { background:#2b2d31; border:0; border-radius:7px; padding:14px; box-shadow:none; }
.community-links>a:hover { transform:none; background:#383a40; }
.community-links strong { font-size:14px; }
.community-links small { font-size:12px; color:#b5bac1; }

/* Dialogs, directory and release history share application components. */
dialog { background:#313338; border:1px solid #50535b; border-radius:12px; box-shadow:0 24px 90px #0006; }
dialog::backdrop { background:#111216bb; backdrop-filter:blur(3px); }
dialog h2 { font-size:25px; letter-spacing:-.5px; }
dialog>p,#share-form>h2+p { font-size:14px; color:#b5bac1; }
.panel-icon { width:44px; height:44px; border:0; border-radius:9px; background:#3b405f; color:#b4bcff; }
#share-dialog { width:min(1040px,calc(100% - 40px)); padding:28px 32px; max-height:calc(100dvh - 40px); }
#share-form { gap:0 28px; }
#share-form>fieldset { margin:22px 0 18px; }
.audio-option small,.hardware-option small,.camera-option small { font-size:13px; line-height:1.7; color:#b5bac1; }
.audio-option strong,.hardware-option strong,.camera-option strong { font-size:14px; }
#share-dialog .audio-option select { display:block; width:100%; height:46px; min-height:46px; padding:0 32px 0 12px; line-height:normal; margin-top:12px; font-size:14px; background:#1e1f22; border-color:#50535b; border-radius:7px; }
.switch { background:#656a74; }
.switch:checked { background:#5865f2; }
.modal-note,.hardware-notice,.public-share-notice,.share-privacy-note,.share-rules { font-size:13px; line-height:1.7; border-radius:7px; }
.modal-note { background:#2b2d31; color:#c5c9d1; }
.hardware-notice,.public-share-notice,.share-privacy-note { background:#443b2c; border-color:#6d5e42; color:#ead7ad; }
.share-rules { color:#b5bac1; }
.voice-dialog,.voice-dialog form { background:#313338; }
.voice-processing small,.voice-test small,#voice-output-note { color:#b5bac1; font-size:13px; }
.live-directory,.changelog { max-width:1440px; padding:48px; }
.changelog { background:none; }
.directory-heading h1,.changelog-heading h1 { font-size:40px; font-weight:700; line-height:1.15; letter-spacing:-1.5px; }
.directory-heading p,.changelog-heading p { font-size:16px; color:#c5c9d1; }
.directory-summary { background:#2b2d31; border:0; border-radius:6px; font-size:14px; padding:12px 15px; }
.directory-note { font-size:13px; color:#b5bac1; line-height:1.7; }
.directory-grid { gap:20px; }
.live-card { border:0; border-radius:9px; background:#2b2d31; box-shadow:none; transition:background .15s; }
.live-card:hover { transform:none; box-shadow:none; background:#383a40; }
.live-card-info { padding:17px; }
.live-card-info h2 { font-size:17px; }
.live-card-info p,.live-card-footer { font-size:13px; color:#b5bac1; }
.live-card-preview,.private-room-art { background:#232428; }
.private-room-art { background:linear-gradient(145deg,#303546,#26282f); }
.private-room-art .icon { color:#bbc2ff; }
.current-release-hero { padding:32px; border:0; border-radius:10px; background:#2b2d31; box-shadow:none; }
.current-release-copy h2 { font-size:36px; line-height:1.15; letter-spacing:-1px; }
.current-release-copy p { font-size:15px; color:#c5c9d1; }
.release-feature-grid article { background:none; border-color:#45474f; }
.release-feature-grid strong { font-size:15px; }
.release-feature-grid span { font-size:13px; color:#b5bac1; }
.changelog-current b { color:#bbc2ff; }
.release-card,.release.current .release-card,.release.origin .release-card { background:transparent; box-shadow:none; border-color:#4b4d55; }
.release-card h2 { font-size:24px; }
.release-card>p,.release-card ul { font-size:14px; color:#c5c9d1; line-height:1.8; }
.release-meta,.release-tags { font-size:12px; }
.toast { background:#1e1f22; color:#e5e7eb; font-size:14px; border-color:#50535b; border-radius:8px; box-shadow:0 8px 35px #0004; }
.policy-page { background:#313338; }
.policy-article { background:#2b2d31; border-color:#45474f; }
.policy-article p,.policy-article li { font-size:15px; color:#d0d4dc; }
body>.topbar:not(.app-topbar) { height:80px; min-height:80px; padding:0 5%; background:#1e1f22; border:0; }
.policy-layout { max-width:1280px; }
.policy-navigation { background:#2b2d31; border-color:#45474f; border-radius:8px; }
.policy-navigation a { font-size:14px; }
.stage-room-context .connection-status.online { color:#8be1be; }
.participant.admin { background:#3a3f61; border-left:2px solid #a4adff; }
.participant.admin .avatar { background:#5865f2; color:white; font-weight:700; }
.participant.admin .participant-name { font-weight:700; color:#e6e9ff; }
.participant.admin .admin-label { padding:2px 5px; border:0; background:#4d537b; color:#e6e9ff; font-size:10px; border-radius:4px; }
.stream-tab.admin-stream { border-color:#a4adff; background:#3a3f61; }
.preview-unavailable { font-size:13px; color:#b5bac1; }
.live-badge { font-size:11px; border:0; color:#fff; background:#a5323ee8; }
.private-live-card .live-badge { color:#d6dbff; background:#363b57; }
.private-live-card .live-preview { background:#23252d; }
.private-preview { width:100%; height:100%; padding:24px 16px; background:transparent; text-align:center; }
.private-lock { background:#3b405f; color:#bbc2ff; box-shadow:none; }
.private-preview strong { font-size:17px; }
.private-preview small { font-size:13px; color:#b5bac1; }

@media(max-width:1200px) {
  .app-topbar { gap:16px; padding:0 24px; }
  .azimov-credit { display:none; }
  .entry { gap:40px; padding:40px 32px; }
  .room-active .room { grid-template-columns:228px minmax(0,1fr); }
  .room-main { padding:0 18px 20px; }
  .stage-heading { gap:10px 14px; }
  .stage-room-context { flex:1 1 175px; }
  .stage-heading>.connection-privacy { display:none; }
  .call-header-actions { flex:1 1 auto; justify-content:flex-end; }
  .player-toolbar { flex-wrap:wrap; }
  .player-actions { margin-left:auto; }
}
@media(max-width:900px) {
  .brand-version { display:none; }
  .entry { grid-template-columns:minmax(0,1fr) minmax(330px,400px); gap:28px; padding:32px 24px; }
  .intro h1 { font-size:43px; }
  .entry-panel { padding:24px; }
  .call-header-actions { justify-content:flex-start; }
  .broadcast-controls { flex-wrap:wrap; }
  .broadcast-controls>span { flex-basis:100%; }
}
@media(max-width:760px) {
  .app-topbar { height:auto; min-height:0; padding:16px 16px 0; display:grid; grid-template-columns:1fr auto; gap:14px; }
  .brand { font-size:25px; grid-column:1; grid-row:1; }
  .brand img { width:32px; height:32px; }
  .brand-version { display:inline; font-size:10px; }
  .top-right { grid-column:2; grid-row:1; }
  .header-navigation { grid-column:1/-1; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:0 0 10px; }
  .header-navigation a,.header-navigation #live-tab { min-width:0; min-height:44px; height:44px; padding:6px 3px; gap:6px; justify-content:center; }
  .navigation-copy strong { font-size:12px; white-space:nowrap; }
  .navigation-icon { width:17px; height:17px; }
  .navigation-icon .icon { width:17px; height:17px; }
  .entry { display:flex; flex-direction:column; padding:30px 18px; gap:18px; }
  .intro { display:contents; padding:0; }
  .intro h1 { margin:15px 0; font-size:40px; letter-spacing:-1.8px; }
  .hero-description { font-size:16px; }
  .home-capabilities { order:3; gap:17px; margin:8px 0; }
  .home-capabilities h2 { font-size:15px; }
  .home-discover { order:2; padding:15px 0; }
  .home-session-note { display:none; }
  .entry-panel { order:1; width:100%; padding:24px 20px; }
  .entry-panel h2 { font-size:24px; }
  .entry-mode button { min-height:43px; font-size:12px; }
  .footer { padding:24px 18px; font-size:12px; gap:16px; }
  .footer-policy-links { flex-wrap:wrap; gap:12px 20px; }
  .room-active .room { display:flex; flex-direction:column; }
  .room-active .sidebar { height:auto; max-height:none; position:relative; padding:14px 16px 0; display:flex; flex-direction:column; overflow:visible; }
  .room-app-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; padding:0 0 12px; gap:5px; }
  .room-brand { margin:0; padding:0; font-size:25px; }
  .room-brand .version-badge { margin-left:3px; font-size:10px; }
  .room-brand img { width:30px; height:30px; }
  .room-directory-link,.room-changelog-link { width:40px; height:40px; padding:10px; min-height:40px; }
  .room-directory-link span,.room-changelog-link span { display:none; }
  .participants-heading { margin:12px 0 6px; }
  .room-active .participants { flex:none; display:flex; flex-direction:row; padding:0 0 11px; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .participant { flex:0 0 auto!important; min-height:44px; max-width:190px; padding:6px 8px; background:#383a40; }
  .participant-name { font-size:13px; }
  .participant-voice-controls { position:relative; }
  .avatar { width:28px; height:28px; }
  .sidebar-fixed-controls { display:flex; flex-direction:row; position:fixed; inset:auto 0 0; z-index:35; gap:8px; margin:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#232428; box-shadow:0 -1px 0 #45474f; }
  .sidebar-fixed-controls .voice-panel { margin:0; padding:0; border:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 10px; }
  #voice-state { font-size:13px; }
  #voice-state-detail { font-size:11px; }
  .voice-actions { display:flex; margin:0; width:auto; gap:5px; }
  .voice-actions button { flex:none; width:35px; height:35px; }
  .voice-meter { grid-column:1/-1; margin-top:8px; }
  .sidebar-fixed-controls .leave { width:35px; min-height:35px; height:35px; font-size:0; margin:0; padding:7px; align-self:center; border-radius:6px; background:#523036; }
  .sidebar-fixed-controls .leave .icon { width:20px; height:20px; }
  .room-main { padding:0 12px 100px; }
  .stage-heading { display:flex; flex-wrap:wrap; min-height:0; padding:16px 0 12px; gap:11px; margin-bottom:10px; }
  .stage-heading>div:first-child { flex:1 1 100%; min-width:0; }
  .stage-heading h2 { font-size:19px; }
  #stage-subtitle { font-size:12px; }
  .stage-room-context { flex:1 1 100%; gap:4px 10px; flex-direction:row; flex-wrap:wrap; padding:0; border:0; align-items:center; }
  .stage-room-context h2 { font-size:13px; }
  .stage-room-context .visibility-badge { flex:1; font-size:11px; }
  .stage-room-context .connection-status { flex-basis:100%; margin:0; font-size:11px; }
  .call-header-actions { margin:0; width:100%; gap:8px; justify-content:flex-start; }
  .call-header-actions .button { flex:1; min-height:40px; font-size:12px; padding:9px 8px; }
  .call-header-actions .button .icon { width:17px; height:17px; }
  .stream-tabs { margin-bottom:10px; }
  .stream-tab { flex:1 1 240px; min-height:50px; }
  .stream-tab .stream-title { font-size:13px; }
  .stream-tab small,.stream-tab .watch-label { font-size:11px; }
  .stage { min-height:270px; height:clamp(270px,56vw,450px); border-radius:7px 7px 0 0; }
  .empty-stage { padding:25px 18px; }
  .empty-art { width:50px; height:50px; margin-bottom:15px; }
  .empty-stage h3 { font-size:19px; }
  .empty-stage p { font-size:13px; }
  .empty-stage small { font-size:11px; }
  .player-toolbar { padding:10px; gap:8px; margin-bottom:12px; }
  .player-info { flex:1 1 100%; font-size:12px; }
  .player-actions { width:100%; flex-wrap:wrap; justify-content:flex-start; gap:5px; margin:0; }
  .player-actions .icon-button { width:35px; height:35px; }
  .player-controls { width:100%; flex-wrap:wrap; overflow:visible; justify-content:flex-start; }
  .player-controls .icon-button { width:35px; height:35px; }
  .player-info { display:flex; }
  .technical-button span,.multiview-button span { display:inline; }
  .technical-button,.multiview-button { font-size:11px; padding:8px; }
  .voice-actions .icon-button { height:35px; width:35px; }
  .player-actions .button { font-size:11px; padding:8px; }
  .volume-controls input { width:62px; }
  .broadcast-controls { padding:12px; }
  .broadcast-controls .button { font-size:11px; padding:7px 9px; }
  .capture-audio-status,.capture-performance-status { font-size:12px; padding:10px 12px; }
  .communities { margin-top:18px; }
  .communities-heading h2 { font-size:16px; }
  .communities-heading p,.community-rules { font-size:12px; }
  .community-links { display:grid; grid-template-columns:1fr; }
  .community-links>a { padding:13px; }
  dialog,#share-dialog { width:calc(100% - 24px); padding:24px 18px; max-height:calc(100dvh - 24px); }
  #share-form { display:block; }
  #share-form>.hardware-option,#share-form>.audio-option,#share-form>.camera-option { padding:16px 0; }
  .audio-option select { min-height:46px; font-size:13px; }
  .modal-actions { flex-wrap:wrap; }
  .modal-actions .button { flex:1 1 auto; font-size:13px; }
  .live-directory,.changelog { padding:30px 18px; }
  .directory-heading h1,.changelog-heading h1 { font-size:32px; letter-spacing:-1px; }
  .directory-heading { gap:15px; flex-wrap:wrap; }
  .directory-heading p,.changelog-heading p { font-size:14px; }
  .current-release-hero { padding:24px 20px; }
  .current-release-copy h2 { font-size:30px; }
  .release-feature-grid { grid-template-columns:1fr; }
  .release-feature-grid article { padding:16px 0; min-height:0; }
  .release-card h2 { font-size:22px; }
  .release-card>p,.release-card ul { font-size:13px; }
  .toast { max-width:calc(100% - 24px); padding:12px 15px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .button,.icon-button,.live-card { transition:none; } }