:root {
  color-scheme: dark;
  font-family: "gg sans", "Noto Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f2f3f5;
  background: #000;
  --text: #f2f3f5;
  --muted: #b5bac1;
  --faint: #80848e;
  --brand: #5865f2;
  --brand-hover: #4752c4;
  --green: #23a55a;
  --red: #ed4245;
  --line: rgba(255,255,255,.09);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }

.app-shell { width: 100vw; height: 100vh; background: #000; }
.stage-shell { display: grid; grid-template-rows: 58px minmax(0,1fr) 78px; width: 100%; height: 100%; min-width: 0; min-height: 0; background: #000; }

.stage-toolbar { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 18px; background: #000; border-bottom: 1px solid rgba(255,255,255,.08); }
.room-context, .toolbar-actions { display: flex; align-items: center; min-width: 0; }
.room-context { gap: 10px; }
.room-context > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.room-symbol { display: grid; place-items: center; width: 22px; height: 22px; color: #dbdee1; }
.room-symbol svg { width: 18px; height: 18px; }
.toolbar-divider { width: 1px; height: 28px; margin: 0 4px; background: rgba(255,255,255,.09); }
.toolbar-actions { gap: 4px; }
.people-count { margin-right: 8px; color: var(--muted); font-size: .72rem; }
.toolbar-button, .view-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #c7c9ce; cursor: pointer; }
.toolbar-button svg, .view-button svg { width: 19px; height: 19px; stroke-width: 2; }
.toolbar-button:hover, .view-button:hover { background: #292a2e; color: white; }
.toolbar-button:disabled { opacity: .35; cursor: not-allowed; }
.spectators-wrap { position: relative; }
.spectators-action { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: .66rem; font-weight: 750; text-transform: uppercase; }
.spectators-action:hover, .spectators-action[aria-expanded="true"] { background: #232428; color: white; }
.spectators-action svg { width: 15px; height: 15px; }
.spectators-popover { position: absolute; top: 42px; right: 0; z-index: 30; width: 230px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #111214; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.spectators-popover > strong { display: block; margin-bottom: 9px; color: var(--muted); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.spectators-list { display: grid; gap: 5px; }
.spectator-person { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.spectator-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #313338; font-size: .62rem; font-weight: 800; }
.spectator-person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.spectators-empty { color: var(--faint); font-size: .72rem; }

.focus-details { --avatar-hue: 235; display: flex; align-items: center; gap: 8px; min-width: 0; }
.focus-details-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--avatar-hue) 58% 55%); color: white; font-size: .62rem; font-weight: 850; }
.focus-details-copy { min-width: 0; }
.focus-details-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-details-copy strong { font-size: .78rem; }
.focus-quality { padding: 3px 7px; border-radius: 7px; background: #4e5058; color: #e3e5e8; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.focus-details-live { padding: 3px 6px; border-radius: 3px; background: var(--red); color: white; font-size: .56rem; font-weight: 900; }

.stage-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 10px clamp(12px,8vw,76px) 6px; background: #000; }
.empty-stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.empty-stage.hidden { display: none; }
.empty-illustration { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 22px; background: #17181b; font-size: 1.8rem; }
.empty-stage h2 { margin: 0 0 6px; color: var(--text); font-size: 1.05rem; }
.empty-stage p { margin: 0; font-size: .8rem; }

.stream-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); align-content: center; gap: 8px; width: 100%; height: 100%; }
.stream-grid[data-count="1"] { grid-template-columns: minmax(0,min(100%,960px)); justify-content: center; }
.stream-grid[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stream-tile { --avatar-hue: 235; position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16/9; border: 2px solid #16171a; border-radius: 8px; outline: none; background: #000; cursor: pointer; transition: border-color .13s ease; }
.stream-tile:hover { border-color: rgba(255,255,255,.18); }
.stream-tile:focus-visible { border-color: var(--brand); }
.stream-tile.playing { background: #000; }
.stream-tile video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.stream-tile.camera-surface video { object-fit: cover; }
.stream-tile.local.camera-surface video { transform: scaleX(-1); }
.stream-tile video::-webkit-media-controls, .stream-tile video::-webkit-media-controls-enclosure { display: none !important; }
.member-placeholder { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; background: hsl(var(--avatar-hue) 8% 18%); }
.member-avatar { position: relative; display: grid; place-items: center; width: clamp(68px,21%,112px); aspect-ratio: 1; border-radius: 50%; background: hsl(var(--avatar-hue) 58% 55%); color: white; font-size: clamp(1rem,3vw,1.75rem); font-weight: 850; }
.stream-tile.connecting .member-avatar::after { position: absolute; inset: -9px; border: 3px solid transparent; border-top-color: #949cf7; border-radius: 50%; content: ""; animation: member-spin .9s linear infinite; }
@keyframes member-spin { to { transform: rotate(360deg); } }
.watch-stream-button { position: absolute; top: 50%; left: 50%; z-index: 5; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: #35363b; box-shadow: 0 4px 12px rgba(0,0,0,.25); font-size: .76rem; font-weight: 700; cursor: pointer; transform: translate(-50%,-50%); }
.watch-stream-button:hover { background: #47494f; }
.tile-actions { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 5px; opacity: 0; transform: translateY(-3px); transition: opacity .15s ease,transform .15s ease; }
.stream-tile:hover .tile-actions { opacity: 1; transform: translateY(0); }
.tile-action { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: rgba(25,26,29,.9); color: var(--muted); cursor: pointer; }
.tile-action:hover { background: #4e5058; color: white; }
.tile-label { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 5px 8px; border-radius: 5px; background: rgba(22,23,25,.78); font-size: .76rem; font-weight: 600; backdrop-filter: blur(6px); }
.tile-label-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focused-tile-actions { display: none; align-items: center; gap: 3px; margin-left: 3px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.14); }
.inline-stream-action { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #dbdee1; cursor: pointer; }
.inline-stream-action:hover { background: #4e5058; color: white; }
.inline-stream-action svg { width: 15px; height: 15px; }

.stream-grid.focus-mode { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: safe center; gap: 8px; padding: 0 clamp(12px,8vw,76px) 4px; overflow-x: auto; overflow-y: hidden; }
.stream-grid.focus-mode .stream-tile.focused { position: absolute; inset: 0 clamp(12px,8vw,76px) 122px; z-index: 0; width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 8px; }
.stream-grid.focus-mode .stream-tile.focused .member-placeholder { background: #000; }
.stream-grid.focus-mode .stream-tile.focused .tile-label { left: 12px; bottom: 12px; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .16s ease,transform .16s ease; }
.stream-grid.focus-mode .stream-tile.focused:hover .tile-label { opacity: 1; pointer-events: auto; transform: translateY(0); }
.stream-grid.focus-mode .stream-tile.focused .focused-tile-actions { display: flex; }
.stream-grid.focus-mode .stream-tile:not(.focused) { z-index: 5; flex: 0 0 196px; height: 110px; aspect-ratio: 16/9; }
.stage-wrap.cards-hidden .stream-grid.focus-mode .stream-tile.focused { bottom: 0; }
.stage-wrap.cards-hidden .stream-grid.focus-mode .stream-tile:not(.focused) { display: none; }

.stage-controls { position: relative; display: flex; align-items: center; justify-content: center; background: #000; border-top: 1px solid rgba(255,255,255,.05); }
.stage-actions { display: flex; gap: 10px; }
.dock-button { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #2b2d31; color: var(--text); cursor: pointer; }
.dock-button span:last-child { display: none; }
.dock-button:hover { background: #404249; }
.dock-button.active { background: var(--brand); }
.dock-button:disabled { opacity: .42; cursor: not-allowed; }
.dock-button svg { width: 21px; height: 21px; stroke-width: 2.15; }
.view-actions { position: absolute; right: 18px; display: flex; gap: 6px; }
.view-button { width: 42px; height: 42px; font-size: 1.15rem; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { background: #404249; color: white; }

.stream-context-menu { position: fixed; z-index: 50; width: 235px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #111214; box-shadow: 0 12px 32px rgba(0,0,0,.65); }
.stream-context-menu button, .context-volume { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #dbdee1; text-align: left; font-size: .74rem; }
.stream-context-menu button { cursor: pointer; }
.stream-context-menu button:hover { background: var(--brand); color: white; }
.stream-context-menu button:disabled { opacity: .4; cursor: not-allowed; }
.stream-context-menu svg { width: 16px; height: 16px; }
.context-volume { grid-template-columns: 22px 48px minmax(0,1fr); }
.context-volume input { width: 100%; accent-color: var(--brand); }
.context-divider { height: 1px; margin: 5px 7px; background: var(--line); }

.focused-connection-panel { position: fixed; top: 0; right: 0; z-index: 12; display: grid; grid-template-rows: 72px minmax(0,1fr); width: min(410px,100vw); height: 100vh; border-left: 1px solid var(--line); background: #111214; box-shadow: -18px 0 48px rgba(0,0,0,.45); transform: translateX(102%); transition: transform .2s ease; }
.focused-connection-panel.open { transform: translateX(0); }
.focused-connection-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--line); }
.focused-connection-header p { margin: 0 0 3px; color: var(--faint); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.focused-connection-header h2 { max-width: 310px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.focused-connection-header .icon-button svg { width: 18px; height: 18px; }
.focused-connection-details { min-height: 0; overflow-y: auto; padding: 14px; }
.focused-connection-details .connection-detail { margin-bottom: 10px; background: #17181b; }
.focused-connection-summary { margin: 0 0 12px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.focused-connection-empty { padding: 10px 2px; }

/* Join dialog */
.join-gate { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(17,18,20,.95); }
.join-gate.hidden { display: none; }
.join-dialog { width: min(430px,100%); padding: 32px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #2b2d31; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 14px; background: var(--brand); font-size: 1.2rem; font-weight: 900; }
.eyebrow { margin: 0 0 5px; color: #aeb5ff; font-size: .67rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.join-dialog h1 { margin: 0; font-size: 1.65rem; }
.join-dialog > p:not(.eyebrow) { margin: 9px 0 22px; color: var(--muted); line-height: 1.45; }
.join-dialog label, .field-grid label { display: grid; gap: 7px; color: var(--muted); font-size: .71rem; font-weight: 750; }
.join-dialog input, select { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 4px; outline: 0; background: #1e1f22; color: var(--text); }
.join-dialog input:focus, select:focus { border-color: var(--brand); }
.join-dialog button[type="submit"] { width: 100%; min-height: 44px; margin-top: 16px; border: 0; border-radius: 4px; background: var(--brand); color: white; font-weight: 800; cursor: pointer; }
.join-dialog button[type="submit"]:hover { background: var(--brand-hover); }

/* Advanced drawer — intentionally preserved */
.advanced-panel { position: fixed; top: 0; right: 0; z-index: 10; display: grid; grid-template-rows: 72px 48px minmax(0,1fr); width: min(520px,100vw); height: 100vh; border-left: 1px solid var(--line); background: #25262a; box-shadow: -20px 0 50px rgba(0,0,0,.3); transform: translateX(102%); transition: transform .22s ease; }
.advanced-panel.open { transform: translateX(0); }
.advanced-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.advanced-header h2 { margin: 0; font-size: 1.25rem; }
.advanced-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0 12px; border-bottom: 1px solid var(--line); }
.advanced-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 8px; border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: .7rem; font-weight: 700; }
.advanced-tabs button::after { position: absolute; right: 7px; bottom: -1px; left: 7px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; content: ""; }
.advanced-tabs button:hover { color: var(--text); }
.advanced-tabs button[aria-selected="true"] { color: var(--text); }
.advanced-tabs button[aria-selected="true"]::after { background: var(--brand); }
.advanced-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.advanced-tabs svg { flex: 0 0 auto; width: 15px; height: 15px; }
.advanced-tabs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advanced-scroll { overflow-y: auto; }
.advanced-section { padding: 20px; }
.advanced-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.advanced-section h3 { margin: 0; font-size: .9rem; }
.write-badge, .read-badge { padding: 3px 7px; border-radius: 8px; font-size: .58rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.write-badge { background: rgba(88,101,242,.2); color: #aeb5ff; }
.read-badge { background: rgba(255,255,255,.08); color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.toggle-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; color: var(--text); cursor: pointer; }
.toggle-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: .8rem; }
.toggle-row small { margin-top: 4px; color: var(--faint); font-size: .68rem; line-height: 1.4; }
.info-list { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(0,1.4fr); gap: 0; margin: 0; }
.info-list dt, .info-list dd { margin: 0; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.045); overflow-wrap: anywhere; font-size: .72rem; }
.info-list dt { color: var(--faint); }
.info-list dd { color: var(--text); text-align: right; }
.connection-diagnostics { display: grid; gap: 10px; }
.connection-detail { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.12); }
.connection-detail h4 { margin: 0 0 8px; font-size: .78rem; }
.muted-copy { margin: 0; color: var(--faint); font-size: .74rem; line-height: 1.5; }
.event-log { min-height: 130px; max-height: 260px; margin: 0; overflow: auto; padding: 12px; border-radius: 6px; background: #17181b; color: #c7c9ce; white-space: pre-wrap; font: .68rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }

@media (max-width: 860px) {
  .stage-wrap { padding-inline: 18px; }
  .stream-grid { grid-template-columns: repeat(auto-fit,minmax(min(270px,100%),1fr)); }
  .stream-grid.focus-mode { padding-inline: 18px; }
  .stream-grid.focus-mode .stream-tile.focused { right: 18px; left: 18px; }
}

@media (max-width: 650px) {
  .stage-shell { grid-template-rows: 54px minmax(0,1fr) 72px; }
  .stage-toolbar { padding-inline: 10px; }
  .room-context { gap: 7px; }
  .people-count, .toolbar-divider { display: none; }
  .stage-wrap { padding: 8px; }
  .stream-grid { grid-template-columns: 1fr; }
  .stream-grid.focus-mode { gap: 6px; padding: 0 8px 4px; }
  .stream-grid.focus-mode .stream-tile.focused { right: 8px; bottom: 94px; left: 8px; }
  .stream-grid.focus-mode .stream-tile:not(.focused) { flex-basis: 150px; height: 84px; }
  .focus-quality { display: none; }
  .dock-button { width: 48px; height: 48px; }
  .view-actions { right: 8px; }
  .field-grid { grid-template-columns: 1fr; }
}