/* Shared application chrome. Deliberately excluded from OBS/player output pages. */
body.vrsr-ui {
  --bg:#080d14; --panel:#101923; --line:#283747; --text:#edf4fa;
  --muted:#9aabba; --cyan:var(--club-accent,#35d8df); --red:#ff7b89;
  --ui-radius:12px; --ui-control:40px; --ui-page-gutter:28px;
  --ui-sidebar:224px; --ui-section-nav:200px;
  margin:0; color:var(--text); background:var(--bg);
  font:14px/1.5 "Segoe UI",system-ui,sans-serif; color-scheme:dark;
}
.vrsr-ui *, .vrsr-ui *::before, .vrsr-ui *::after { box-sizing:border-box }
.vrsr-ui :where(button,input,select,textarea) { font-family:inherit }
.vrsr-ui a { color:var(--cyan) }
.vrsr-ui :where(button,a,input,select,textarea):focus-visible { outline:2px solid var(--cyan); outline-offset:3px }
.vrsr-ui :where(h1,h2,h3,p) { overflow-wrap:anywhere }
.vrsr-ui h1 { font-size:28px; line-height:1.2; font-weight:650; letter-spacing:-.6px }
.vrsr-ui h2 { font-size:22px; line-height:1.3; font-weight:600; letter-spacing:-.3px }
.vrsr-ui h3 { font-size:16px; line-height:1.4; font-weight:600 }
.vrsr-ui :where(.manage-head,.landing-panel-head,.so-heading) p { font-size:14px; line-height:1.6; color:var(--muted); max-width:78ch }
.vrsr-ui :where(.manage-head,.landing-panel-head,.so-heading) small { font-size:11px; letter-spacing:1.3px; color:var(--cyan) }
.vrsr-ui :where(.manage-head,.landing-panel-head,.so-heading) { gap:16px; margin:0 0 24px; flex-wrap:wrap }
.vrsr-ui :where(.manage-head,.landing-panel-head) h2 { margin:4px 0 8px }
.vrsr-ui :where(button,.button,.download-action,.landing-actions>a) {
  min-height:var(--ui-control); border-radius:7px; padding:10px 14px;
  font-size:12px; line-height:1.4; font-weight:600; letter-spacing:.25px;
  text-decoration:none; transition:background-color .15s,border-color .15s;
  background:#12303a; border:1px solid #32616d; color:var(--cyan); cursor:pointer;
}
.vrsr-ui :where(button,.button):not(:disabled):hover { filter:brightness(1.13) }
.vrsr-ui :where(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]) {
  min-height:var(--ui-control); border:1px solid var(--line); border-radius:7px;
  background:#0a121c; color:var(--text); padding:10px 12px; font-size:14px; line-height:1.4; min-width:0;
}
.vrsr-ui :where(input,textarea)::placeholder { color:#788c9f }
.vrsr-ui :where(input[type=checkbox],input[type=radio]) { accent-color:var(--cyan); width:16px; height:16px; flex-shrink:0 }
.vrsr-ui :where(.manage-form,.landing-form,.landing-io-create-form,.so-panel,.login-card,.grid) label { font-size:11px; letter-spacing:.5px; color:var(--muted); line-height:1.5 }
.vrsr-ui :where(.manage-form,.landing-form,.landing-io-create-form) { gap:16px; padding:24px; border-radius:var(--ui-radius); border-color:var(--line); background:var(--panel) }
.vrsr-ui :where(.panel,.landing-panel,.so-panel,.performance-panel,.login-card,.credential-modal>section) {
  border:1px solid var(--line); border-radius:var(--ui-radius); background:var(--panel); padding:24px;
}
.vrsr-ui :where(.manage-list>article,.manage-list>.manage-row,.landing-user-card,.landing-club-card,.club-picker-card,.card) {
  border-color:var(--line); border-radius:10px; padding:20px; background:var(--panel);
}
.vrsr-ui :where(.manage-list,.landing-user-list,.landing-runtime-list,.club-picker-grid) { gap:16px }
.vrsr-ui .manage-list { display:grid; border:0; background:transparent; margin-top:16px }
.vrsr-ui .manage-list>article { padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--panel) }
.vrsr-ui .manage-list>article:last-child { border-bottom:1px solid var(--line) }
.vrsr-ui .manage-head { padding:24px; border-radius:12px }
.vrsr-ui :where(.program,.decks>article,.mixer,.next,.preload-bank,.timeline-panel,.direct-input-panel) { border-radius:12px; border-color:var(--line) }
.vrsr-ui .decks>article,.vrsr-ui .mixer,.vrsr-ui .next { padding:20px }
.vrsr-ui .decks h2 { font-size:20px }
.vrsr-ui .decks .quick-source { gap:8px }
.vrsr-ui .program { grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr) minmax(190px,.75fr); gap:24px; padding:24px; align-items:center }
.vrsr-ui .program-status-panel { min-height:0; min-width:0; gap:8px }
.vrsr-ui .program-status-panel h2 { margin:8px 0; font-size:20px }
.vrsr-ui .program-status-panel p { font-size:13px; line-height:1.5; margin:0 }
.vrsr-ui .program-status-panel .server-clock { position:static; margin:0 0 8px }
.vrsr-ui .program-monitor { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) 112px; align-items:stretch }
.vrsr-ui .program-monitor>.preview { min-width:0; width:100%; height:auto; min-height:0; aspect-ratio:16/9; align-self:center }
.vrsr-ui .program-meter-panel { min-height:220px; height:auto; grid-template-columns:minmax(30px,1fr) 42px }
.vrsr-ui .program-summary { min-width:0 }
.vrsr-ui :where(.empty,.muted,.so-panel p) { font-size:13px; line-height:1.6; color:var(--muted) }
.vrsr-ui .status { padding:6px 9px; border-radius:5px; font-size:10px; letter-spacing:.6px; white-space:normal }
.vrsr-ui .app { grid-template-columns:var(--ui-sidebar) minmax(0,1fr) }
.vrsr-ui .app>aside { padding:24px 14px; background:#0c131d; border-color:var(--line); overflow-y:auto }
.vrsr-ui .app>aside>nav { display:grid; gap:4px; margin-top:16px }
.vrsr-ui .app>aside>nav>button { min-height:42px; padding:11px 14px; text-align:left; font-size:13px; letter-spacing:0; border-radius:7px; color:var(--muted); background:transparent; border-color:transparent }
.vrsr-ui .app>aside>nav>button.active { background:#15333c; color:#74edf0; box-shadow:inset 3px 0 var(--cyan) }
.vrsr-ui .club-context { border-radius:9px; padding:14px; margin:20px 0; border-color:var(--line) }
.vrsr-ui .club-context strong { font-size:15px }
.vrsr-ui .account { padding-top:20px; margin-top:auto }
.vrsr-ui .workspace { min-width:0; padding:0 var(--ui-page-gutter) 32px }
.vrsr-ui .workspace>header { height:auto; min-height:100px; padding:22px 0; margin-bottom:24px; gap:20px; border-color:var(--line); flex-wrap:wrap }
.vrsr-ui .workspace>header h1 { margin:5px 0 0 }
.vrsr-ui .workspace>header small { font-size:10px; letter-spacing:1.6px }
.vrsr-ui .workspace .view { width:100%;max-width:none;margin-inline:0;min-width:0 }
/* The legacy header rule used to give every nested panel an 84px header. */
.vrsr-ui .workspace :where(.performance-panel,.preload-bank,.manage-list,.so-panel) header { height:auto; min-height:0; padding:0 0 16px; margin:0 0 16px; gap:12px; flex-wrap:wrap }
.vrsr-ui .club-landing { width:100%;max-width:none;padding:var(--ui-page-gutter);margin:0 }
.vrsr-ui .club-landing>header,.vrsr-ui .club-landing>section,.vrsr-ui .club-landing>#club-directory-message { width:100%;max-width:none;margin-inline:0;min-width:0 }
.vrsr-ui .stream-overlays { width:100%;max-width:none }
.vrsr-ui .club-landing>header { gap:24px; align-items:flex-start; flex-wrap:wrap; margin-bottom:28px }
.vrsr-ui .landing-actions { gap:8px; flex-wrap:wrap }
.vrsr-ui .landing-actions>a { font-size:12px!important; border-radius:7px }
.vrsr-ui .landing-panel { margin-top:24px }
.vrsr-ui :where(.settings-layout,.stream-overlays .so-layout) { grid-template-columns:var(--ui-section-nav) minmax(0,1fr); gap:24px; align-items:start }
.vrsr-ui :where(.settings-sidebar,.stream-overlays .so-nav) { border:1px solid var(--line); border-radius:10px; background:#0c141e; padding:8px; gap:4px; top:20px }
.vrsr-ui :where(.settings-sidebar,.stream-overlays .so-nav) button { min-height:42px; padding:11px 12px; font-size:12px; line-height:1.5; letter-spacing:0; border-radius:6px }
.vrsr-ui .settings-sidebar button.active { background:#15333c; color:#74edf0; box-shadow:inset 3px 0 var(--cyan) }
.vrsr-ui .stream-overlays .so-nav button[aria-current=true] { background:#15333c; border-color:transparent; box-shadow:inset 3px 0 var(--cyan) }
.vrsr-ui .stream-overlays .so-panel { margin-bottom:24px; padding:24px; border-radius:12px }
.vrsr-ui .stream-overlays .so-nav { margin:0; top:20px }
.vrsr-ui .stream-overlays h3 { font-size:16px }
.vrsr-ui .stream-overlays .so-heading { align-items:flex-start }
.vrsr-ui .stream-overlays .so-columns { grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:24px }
.vrsr-ui .stream-overlays label { margin:16px 0 8px }
.vrsr-ui .stream-overlays .so-panel button { min-height:40px; font-size:12px; border-radius:7px }
.vrsr-ui dialog { max-width:min(960px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line); border-radius:12px; padding:24px; color:var(--text); background:var(--panel) }
.vrsr-ui dialog::backdrop { background:#02070dbd; backdrop-filter:blur(4px) }
.vrsr-ui .credential-modal { padding:16px }
.vrsr-ui .credential-modal>section { max-height:calc(100dvh - 32px); overflow:auto }
.vrsr-ui table { border-collapse:collapse; font-size:13px; line-height:1.5 }
.vrsr-ui :where(th,td) { padding:12px 14px; border-color:var(--line) }
.vrsr-ui th { color:var(--muted); font-weight:600; text-align:left }
.vrsr-ui .app.sidebar-collapsed { grid-template-columns:64px minmax(0,1fr) }
.vrsr-ui .app.sidebar-collapsed>aside>nav>button { font-size:0; padding:10px 4px }
/* Standalone management pages share the same content width and panel rhythm. */
.vrsr-ui.ui-standalone>main { width:100%;max-width:none;margin:0;padding:var(--ui-page-gutter);min-width:0 }
.vrsr-ui.ui-standalone>main>header { margin-bottom:24px; padding:0 0 24px; border-bottom:1px solid var(--line); gap:24px; flex-wrap:wrap }
.vrsr-ui.ui-standalone .panel { margin-bottom:24px }
.vrsr-ui.ui-standalone :where(.panel,.card)>h2:first-child { margin-top:0 }
.vrsr-ui.ui-standalone p { color:var(--muted); line-height:1.6 }
.vrsr-ui.ui-standalone label { font-size:12px; color:var(--muted) }
.vrsr-ui.ui-standalone .grid { gap:16px }
.vrsr-ui.ui-standalone .panel>small { display:block; margin-top:12px; line-height:1.6; color:var(--muted) }
.vrsr-ui.ui-standalone .panel>p { max-width:90ch }
.vrsr-ui.ui-archive>header { width:100%;max-width:none;margin:0;padding:24px var(--ui-page-gutter); border-color:var(--line); gap:24px; flex-wrap:wrap }
.vrsr-ui.ui-archive>main { width:100%;max-width:none;padding:var(--ui-page-gutter);grid-template-columns:var(--ui-section-nav) minmax(0,1fr); gap:24px; align-items:start }
.vrsr-ui.ui-archive>main>nav { padding:8px; border:1px solid var(--line); border-radius:10px; background:#0c141e; margin:0 }
.vrsr-ui.ui-archive>main>div>section { border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:24px }
@media(min-width:1800px) { body.vrsr-ui { --ui-page-gutter:40px } }
@media(max-width:1500px) {
  .vrsr-ui .program { grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr) }
  .vrsr-ui .program-summary { grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px }
  .vrsr-ui .program-summary dl { display:flex; gap:24px; flex-wrap:wrap; margin:0 }
  .vrsr-ui .program-summary dl>div { display:flex; gap:12px; padding:0; border:0 }
}
@media(max-width:1100px) {
  body.vrsr-ui { --ui-sidebar:196px; --ui-section-nav:176px; --ui-page-gutter:20px }
  .vrsr-ui .workspace { padding-inline:20px }
  .vrsr-ui .stream-overlays .so-columns { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui :where(.landing-panel,.so-panel) { padding:20px }
  .vrsr-ui .program { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui .program-monitor { max-width:720px }
}
@media(max-width:800px) {
  body.vrsr-ui { --ui-page-gutter:16px }
  .vrsr-ui .app,.vrsr-ui .app.sidebar-collapsed { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui .app>aside { height:auto; position:static; padding:16px; border-right:0; border-bottom:1px solid var(--line) }
  .vrsr-ui .app>aside>nav { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin-top:12px }
  .vrsr-ui .app>aside>nav>button,.vrsr-ui .app.sidebar-collapsed>aside>nav>button { font-size:12px; padding:10px; min-height:40px }
  .vrsr-ui .app>aside .account { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-top:12px }
  .vrsr-ui .club-context { margin:12px 0 0; padding:12px }
  .vrsr-ui .workspace,.vrsr-ui .club-landing,.vrsr-ui.ui-standalone>main { padding:16px }
  .vrsr-ui.ui-archive>main { grid-template-columns:minmax(0,1fr); padding:16px }
  .vrsr-ui.ui-archive>header { padding:16px }
  .vrsr-ui .workspace>header { min-height:80px; padding:8px 0 20px; margin-bottom:20px }
  .vrsr-ui h1 { font-size:24px }
  .vrsr-ui h2 { font-size:20px }
  .vrsr-ui :where(.settings-layout,.stream-overlays .so-layout) { grid-template-columns:minmax(0,1fr); gap:16px }
  .vrsr-ui :where(.settings-sidebar,.stream-overlays .so-nav) { position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); padding:6px }
  .vrsr-ui :where(.panel,.landing-panel,.so-panel,.manage-form,.landing-form) { padding:16px; border-radius:10px }
  .vrsr-ui .stream-overlays .so-panel,.vrsr-ui .manage-head { padding:16px; border-radius:10px }
  .vrsr-ui .decks,.vrsr-ui .decks.aux-open { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui .decks>article { min-width:0; padding:16px }
  .vrsr-ui .deck-monitor { grid-template-columns:minmax(0,1fr); gap:12px }
  .vrsr-ui .deck-monitor>.preview { min-width:0; width:100%; height:auto; aspect-ratio:16/9 }
  .vrsr-ui .deck-monitor>.audio-strip { min-width:0; width:100%; height:260px; grid-template-columns:minmax(44px,1fr) minmax(44px,1fr) 54px }
  .vrsr-ui :where(.manage-form,.landing-form,.landing-io-create-form) { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui :where(.manage-head,.landing-panel-head,.so-heading) { margin-bottom:20px }
}
@media(prefers-reduced-motion:reduce) { .vrsr-ui :where(button,a,input,select,textarea) { transition:none } }

/* Fixed overlay: revealing shortcuts never moves the workspace below it. */
.vrsr-ui .vrsr-hotbar {
  position:fixed;inset:0 12px auto;z-index:150;width:max-content;max-width:calc(100% - 24px);margin-inline:auto;
  background:#0d1b27f5;border:1px solid #34515e;border-top:0;border-radius:0 0 10px 10px;
  box-shadow:0 12px 30px #0005;transform:translateY(calc(-100% + 14px));
  opacity:.45;transition:transform .18s ease,opacity .18s ease;
}
.vrsr-ui .vrsr-hotbar[hidden] { display:none }
.vrsr-ui .vrsr-hotbar.open,.vrsr-ui .vrsr-hotbar:focus-within { transform:translateY(0);opacity:1 }
.vrsr-ui .vrsr-hotbar>nav { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:12px;max-height:65dvh;overflow-y:auto;min-width:0 }
.vrsr-ui .vrsr-hotbar>nav :is(button,a) { min-height:40px;padding:10px 14px;font-size:12px;white-space:nowrap }
.vrsr-ui .vrsr-hotbar>nav>a { display:inline-flex;align-items:center;background:#12303a;border:1px solid #32616d;border-radius:7px;color:var(--cyan);font-weight:600;letter-spacing:.25px;text-decoration:none }
.vrsr-ui .hotbar-handle { display:flex;align-items:center;justify-content:center;width:100%;height:14px;min-height:14px;padding:0;background:#142c36;border:0;border-radius:0 0 9px 9px;touch-action:manipulation }
.vrsr-ui .hotbar-handle>span { width:48px;height:3px;border-radius:3px;background:#6ba6b1 }
@media(prefers-reduced-motion:reduce) { .vrsr-ui .vrsr-hotbar { transition:none } }

/* Compact program layout: the output drawer never participates in grid sizing. */
.vrsr-ui .workspace .program:has(#control-live-panel) {
  position:relative;grid-template-columns:40px minmax(180px,220px) minmax(0,1fr);
  grid-template-rows:auto auto;gap:16px;padding:20px;min-height:0;transition:none;
}
.vrsr-ui .program>#control-live-panel {
  position:absolute;inset:20px auto auto 20px;z-index:25;width:min(360px,calc(100% - 40px));
  min-height:180px;height:auto;max-height:230px;max-width:calc(100% - 40px);overflow:hidden;
  background:#0b1620;box-shadow:14px 0 24px #0005;border-radius:8px;
  transition:width .18s ease,box-shadow .18s ease;
}
.vrsr-ui .program>#control-live-panel.collapsed { width:40px;height:140px;min-height:0;box-shadow:none }
.vrsr-ui #control-live-panel #control-live-collapse { width:39px;height:100%;min-height:0;border-radius:7px 0 0 7px }
.vrsr-ui #control-live-panel .control-live-output-content { min-width:0;padding:16px 16px 16px 54px }
.vrsr-ui #control-live-panel .control-live-output-content>header { height:auto;margin:0 0 12px;padding:0 }
.vrsr-ui #control-live-panel .control-live-options { max-height:140px;overflow:auto }
.vrsr-ui .program>.control-live-actions { grid-column:2;grid-row:1;align-self:stretch;min-height:0;gap:12px;grid-template-rows:1fr auto }
.vrsr-ui .control-live-actions .program-status-panel { min-height:0;padding:12px 0;background:transparent;border:0;gap:6px }
.vrsr-ui .control-live-actions .program-status-panel h2 { font-size:18px;margin:8px 0;line-height:1.35 }
.vrsr-ui .control-live-actions #control-live-toggle { min-height:48px;padding:10px 12px }
.vrsr-ui .program>.program-monitor {
  grid-column:3;grid-row:1;align-self:start;justify-self:center;
  width:min(100%,642px);height:auto;min-height:0;aspect-ratio:642/293;grid-template-columns:minmax(0,1fr) 112px;gap:10px;
}
.vrsr-ui .program>.program-monitor>.preview { width:100%;min-width:0;height:auto;aspect-ratio:16/9;align-self:start }
.vrsr-ui .program>.program-monitor>.program-meter-panel { min-height:0;height:100%;max-height:none }
.vrsr-ui .program-meter-panel>.monitor-volume input { min-height:0;height:100% }
.vrsr-ui .program-meter-panel>.meter-with-scale { min-height:0 }
.vrsr-ui .program>.program-summary {
  grid-column:2/-1;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;
  gap:12px 24px;border-top:1px solid var(--line);padding:12px 0 0;min-height:0;
}
.vrsr-ui .program-summary>dl { display:flex;gap:20px;flex-wrap:wrap;margin:0 }
.vrsr-ui .program-summary>dl>div { display:flex;align-items:center;gap:10px;padding:0;border:0 }
.vrsr-ui .program-summary .auto-level { display:flex!important;flex:1;gap:10px 16px!important;align-items:center;margin:0;padding:0;border:0;justify-content:flex-end }
.vrsr-ui .program-summary .auto-level label { display:flex;gap:8px;width:auto;font-size:10px;letter-spacing:.2px }
.vrsr-ui .program-summary .auto-level .standby-video-only { flex:0 1 auto;padding:0 }
.vrsr-ui .program-summary .auto-level input[type=range] { width:110px }
@media(max-width:1050px) {
  .vrsr-ui .workspace .program:has(#control-live-panel) { grid-template-columns:40px minmax(0,1fr);gap:14px }
  .vrsr-ui .program>.control-live-actions { grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:16px }
  .vrsr-ui .control-live-actions .program-status-panel { padding:0 }
  .vrsr-ui .control-live-actions #control-live-toggle { width:auto;min-width:170px }
  .vrsr-ui .program>.program-monitor { grid-column:2;grid-row:2 }
  .vrsr-ui .program>.program-summary { grid-column:2;grid-row:3 }
}
@media(max-width:600px) {
  .vrsr-ui .workspace .program:has(#control-live-panel) { padding:12px;gap:12px;grid-template-columns:30px minmax(0,1fr) }
  .vrsr-ui .program>#control-live-panel { inset:12px auto auto 12px;max-width:calc(100% - 24px);width:min(340px,calc(100% - 24px)) }
  .vrsr-ui .program>#control-live-panel.collapsed { width:30px }
  .vrsr-ui #control-live-panel #control-live-collapse { width:29px }
  .vrsr-ui #control-live-panel .control-live-output-content { padding-left:42px }
  .vrsr-ui .program>.control-live-actions { display:grid;grid-template-columns:minmax(0,1fr) }
  .vrsr-ui .control-live-actions #control-live-toggle { width:100%;min-width:0 }
  .vrsr-ui .program>.program-monitor { grid-template-columns:minmax(0,1fr);gap:10px;aspect-ratio:auto }
  .vrsr-ui .program>.program-monitor>.program-meter-panel { height:200px;min-height:0 }
  .vrsr-ui .program-summary .auto-level { flex-basis:100% }
}
@media(prefers-reduced-motion:reduce) { .vrsr-ui .program>#control-live-panel { transition:none } }

/* Video geometry must not inherit the taller audio strip's grid-row height. */
.vrsr-ui .decks .deck-monitor>.preview {
  width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:16/9;
  align-self:start;margin:0;
}
.vrsr-ui .decks .deck-monitor>.preview>video { width:100%;height:100%;object-fit:contain }

/* Fluid control workspace with horizontal audio controls and vertical routing. */
.vrsr-ui .workspace>.view[data-page=control] { width:100%;max-width:none;margin-inline:0 }
.vrsr-ui .decks .deck-monitor { width:100%;grid-template-columns:minmax(0,1fr) 240px;align-items:start }
.vrsr-ui .decks .deck-monitor>.audio-strip {
  width:100%;height:auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) 38px;grid-template-rows:auto auto auto auto auto;
  gap:10px;padding:12px;
}
.vrsr-ui .decks .deck-monitor .audio-strip>label {
  grid-column:1/-1;grid-row:auto;height:auto;min-height:0;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:4px 8px;
  justify-items:start;align-items:center;
}
.vrsr-ui .decks .deck-monitor .audio-strip>label>output { grid-column:3;justify-self:end }
.vrsr-ui .decks .deck-monitor .audio-strip>label>input[type=range] {
  grid-column:1/-1;grid-row:2;width:100%;height:22px;min-height:0;margin:0;
  writing-mode:horizontal-tb;direction:ltr;
}
.vrsr-ui .decks .deck-monitor .audio-strip>.meter-with-scale {
  grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:18px 30px;width:100%;height:48px;min-height:0;
}
.vrsr-ui .decks .deck-monitor .meter-with-scale>.stereo-meter {
  grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:3px;
  width:100%;height:30px;min-height:0;padding:4px;
}
.vrsr-ui .decks .deck-monitor .stereo-meter i { width:100%;height:8px;min-height:0 }
.vrsr-ui .decks .deck-monitor .stereo-meter i::before {
  background:linear-gradient(to right,#18d9e8 0 48%,#53e1aa 48% 78%,#ffc34f 78% 92%,#ff4f61 92% 100%);
  clip-path:inset(0 calc(100% - var(--level)) 0 0);
}
.vrsr-ui .decks .deck-monitor .stereo-meter i::after { left:calc(var(--peak) - 1px);right:auto;top:-1px;bottom:-1px;width:2px;height:auto }
.vrsr-ui .decks .deck-monitor .meter-with-scale>.db-scale { grid-column:1;grid-row:1;position:relative;height:18px;padding:0;font-size:9px }
.vrsr-ui .decks .deck-monitor .db-scale span { left:var(--db-pos);top:0;bottom:auto;right:auto;transform:translateX(-50%) }
.vrsr-ui .decks .deck-monitor .audio-strip>small[id^=audio-] { grid-column:1;grid-row:4;min-width:0 }
.vrsr-ui .decks .deck-monitor .audio-strip>.monitor-routing { grid-column:2;grid-row:4;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,1fr);gap:4px;align-self:stretch }
.vrsr-ui .decks .deck-monitor .monitor-routing button { width:100%;min-height:36px }
.vrsr-ui .decks .deck-monitor .audio-strip>button { grid-column:1/-1;grid-row:5 }
.vrsr-ui .program>.program-monitor { width:min(100%,770px);aspect-ratio:auto;grid-template-columns:minmax(0,1fr) 240px }
.vrsr-ui .program>.program-monitor>.program-meter-panel {
  height:auto;align-self:start;grid-template-columns:minmax(0,1fr) 38px;
  grid-template-rows:auto auto 48px auto auto;gap:8px;padding:12px;
}
.vrsr-ui .program-meter-panel>span { grid-column:1/-1;grid-row:1 }
.vrsr-ui .program-meter-panel>.monitor-volume {
  grid-column:1/-1;grid-row:2;width:100%;height:auto;min-height:0;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto 22px;gap:4px;justify-items:start;
}
.vrsr-ui .program-meter-panel>.monitor-volume>output { justify-self:end }
.vrsr-ui .program-meter-panel>.monitor-volume input { grid-column:1/-1;grid-row:2;writing-mode:horizontal-tb;direction:ltr;width:100%;height:22px;min-height:0 }
.vrsr-ui .program-meter-panel>.meter-with-scale { grid-column:1;grid-row:3;grid-template-columns:minmax(0,1fr);grid-template-rows:18px 30px;width:100%;height:48px;min-height:0 }
.vrsr-ui .program-meter-panel .meter-with-scale>.stereo-meter { grid-column:1;grid-row:2;flex-direction:column;width:100%;height:30px;min-height:0;padding:4px;gap:3px }
.vrsr-ui .program-meter-panel .stereo-meter i { width:100%;height:8px;min-height:0 }
.vrsr-ui .program-meter-panel .stereo-meter i::before { background:linear-gradient(to right,#18d9e8 0 48%,#53e1aa 48% 78%,#ffc34f 78% 92%,#ff4f61 92% 100%);clip-path:inset(0 calc(100% - var(--level)) 0 0) }
.vrsr-ui .program-meter-panel .stereo-meter i::after { left:calc(var(--peak) - 1px);right:auto;top:-1px;bottom:-1px;width:2px;height:auto }
.vrsr-ui .program-meter-panel .meter-with-scale>.db-scale { grid-column:1;grid-row:1;position:relative;height:18px;padding:0;font-size:9px }
.vrsr-ui .program-meter-panel .db-scale span { left:var(--db-pos);top:0;bottom:auto;right:auto;transform:translateX(-50%) }
.vrsr-ui .program-meter-panel>small { grid-column:1;grid-row:4;align-self:center }
.vrsr-ui .program-meter-panel>.monitor-routing { grid-column:2;grid-row:3/6;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,1fr);gap:4px }
.vrsr-ui .program-meter-panel>.monitor-routing button { min-height:32px }
.vrsr-ui .program-meter-panel>.monitor-button { grid-column:1;grid-row:5 }
@media(max-width:800px) {
  .vrsr-ui .decks .deck-monitor { grid-template-columns:minmax(0,1fr) }
}
@media(max-width:600px) {
  .vrsr-ui .program>.program-monitor { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui .program>.program-monitor>.program-meter-panel { width:100%;height:auto }
}

/* The mixer is a compact bridge between the program monitor and the decks. */
.vrsr-ui .workspace .mixer {
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;
  align-items:center;gap:16px;margin:14px 0 0;padding:12px 16px;border-radius:12px;
}
.vrsr-ui .mixer>.fader-main { display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0 }
.vrsr-ui .mixer .fader-labels { display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.6px }
.vrsr-ui .mixer #fader { width:100%;height:24px;margin:0;accent-color:var(--cyan) }
.vrsr-ui .mixer>.fader-actions { display:grid;grid-template-columns:minmax(0,1fr);gap:4px;width:auto;min-width:0;margin:0 }
.vrsr-ui .mixer .transition-targets { display:flex;gap:6px;width:auto }
.vrsr-ui .mixer .transition-targets button { min-height:32px;padding:6px 12px;font-size:11px }
.vrsr-ui .mixer .transition-caption { padding:0;border:0;background:none;font-size:9px;line-height:1.2;text-align:center }
.vrsr-ui .mixer>.mixer-options { position:static;min-width:0;margin:0 }
.vrsr-ui .mixer-options>summary { list-style:none;cursor:pointer;min-height:36px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #32616d;border-radius:7px;background:#12303a;color:var(--cyan);font-size:11px;font-weight:600 }
.vrsr-ui .mixer-options>summary::-webkit-details-marker { display:none }
.vrsr-ui .mixer-options>summary::after { content:'‹';font-size:18px;line-height:1 }
.vrsr-ui .mixer-options[open]>summary::after { content:'›' }
.vrsr-ui .mixer-options-content {
  position:fixed;right:20px;top:100px;z-index:90;width:min(440px,calc(100vw - 40px));
  max-height:calc(100dvh - 120px);overflow:auto;padding:20px;
  background:#101c28;border:1px solid #365665;border-radius:12px;box-shadow:0 20px 48px #0008;
}
.vrsr-ui .mixer-options-content h3 { margin:0 0 16px }
.vrsr-ui .mixer-options-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px }
.vrsr-ui .mixer-options-heading h3 { margin:0 }
.vrsr-ui .mixer-options-heading button { flex-shrink:0;min-width:36px;min-height:36px;padding:4px;font-size:22px;line-height:1 }
.vrsr-ui .mixer-options-content .sync-settings-panel { display:grid;grid-template-columns:minmax(0,1fr);width:100%;margin:12px 0;padding:0;border:0;gap:12px }
.vrsr-ui .mixer-options-content label { display:grid;gap:6px;min-width:0;font-size:12px;letter-spacing:0;line-height:1.5 }
.vrsr-ui .mixer-options-content :is(.bpm-match-option,.sync-buffer-enable) { display:flex;align-items:center;gap:8px }
.vrsr-ui .mixer-options-content .bpm-match-status { display:block;margin:10px 0;font-size:11px;line-height:1.5;letter-spacing:0 }
.vrsr-ui .mixer-options-content .sync-buffer-panel { margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:8px }
.vrsr-ui .mixer-options-content .auto-level { display:grid!important;gap:12px!important;justify-content:start;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line) }
.vrsr-ui .mixer-options-content .auto-level label { display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;letter-spacing:0 }
.vrsr-ui .mixer-options-content .auto-level .standby-video-only { flex:auto;padding:0 }
.vrsr-ui .program>.program-monitor { width:min(100%,1020px) }
@media(max-width:700px) {
  .vrsr-ui .workspace .mixer { grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px }
  .vrsr-ui .mixer>.fader-main { grid-column:1/-1 }
  .vrsr-ui .mixer>.fader-actions { justify-self:start }
  .vrsr-ui .mixer>.mixer-options { justify-self:end }
  .vrsr-ui .mixer-options-content { top:16px;right:12px;width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:16px }
}

/* Sticky group identity stays outside the horizontally scrolling permission body. */
.vrsr-ui .permission-matrix-wrap { min-width:0;overflow:visible }
.vrsr-ui .permission-matrix-wrap>.permission-matrix-head {
  position:sticky;top:14px;z-index:35;display:block;min-width:0;width:100%;
  overflow:hidden;background:#101c28;box-shadow:0 5px 12px #0004;
}
.vrsr-ui .permission-matrix-columns { display:flex;min-width:max-content }
.vrsr-ui .permission-matrix-columns>span { flex:0 0 300px;padding:14px 16px;color:var(--muted);font-size:11px }
.vrsr-ui .permission-matrix-body { min-width:0;width:100%;overflow-x:auto }
.vrsr-ui .permission-group-head { padding:10px;gap:5px }
.vrsr-ui .permission-group-head .role-rank-field { margin:0 }
.vrsr-ui .permission-group-head .role-rank-field input { width:64px;min-height:32px!important;padding:5px 8px!important }
.vrsr-ui .permission-group-head button { min-height:30px;padding:6px 8px;font-size:10px;line-height:1.3 }

/* A fluid page does not require stretched file pickers or action buttons. */
.vrsr-ui [data-page=settings] :is(#standby-audio-form,#youtube-cookie-form) {
  display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:flex-start;gap:12px 16px;
}
.vrsr-ui [data-page=settings] :is(#standby-audio-form,#youtube-cookie-form)>label {
  flex:0 1 520px;min-width:0;max-width:100%;margin:0;
}
.vrsr-ui [data-page=settings] :is(#standby-audio-form,#youtube-cookie-form)>button { flex:0 0 auto;width:auto;align-self:center;white-space:normal }
.vrsr-ui [data-page=settings] :is(#standby-audio-form,#youtube-cookie-form) .automation-note { flex:0 1 auto;align-self:center }
.vrsr-ui [data-page=settings] :is(input[type=file],input[type=url],input[type=password]) { max-width:520px }
.vrsr-ui [data-page=settings] #standby-form { grid-template-columns:minmax(180px,280px) minmax(200px,520px);justify-content:start;gap:16px }
.vrsr-ui [data-page=settings] #standby-form .row-actions { justify-content:flex-start;flex-wrap:wrap }
.vrsr-ui [data-page=settings] #stream-settings-form { grid-template-columns:repeat(2,minmax(180px,260px)) auto;justify-content:start;align-items:end }
.vrsr-ui [data-page=settings] #stream-settings-form>button { width:auto;justify-self:start }
.vrsr-ui [data-page=settings] #companion-tools textarea { max-width:760px }
@media(max-width:700px) {
  .vrsr-ui [data-page=settings] #standby-form,.vrsr-ui [data-page=settings] #stream-settings-form { grid-template-columns:minmax(0,1fr) }
}

.vrsr-ui .mixer>.fader-actions { grid-template-columns:max-content;gap:4px;max-width:none }
.vrsr-ui .mixer .cut-targets { display:flex;gap:6px;grid-column:1;grid-row:1 }
.vrsr-ui .mixer .cut-targets button { min-height:32px;padding:6px 12px;font-size:11px }
.vrsr-ui .mixer .transition-targets { grid-column:1;grid-row:1;grid-template-columns:repeat(5,max-content);width:max-content;flex-wrap:nowrap }
.vrsr-ui .mixer .transition-caption { grid-column:1;grid-row:2 }
.vrsr-ui [data-page=settings] .manage-form:has(#companion-setup) { display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px }
.vrsr-ui [data-page=settings] .manage-form:has(#companion-setup)>button { flex:0 0 auto;width:auto }
.vrsr-ui [data-page=settings] .manage-form:has(#companion-setup)>label { flex-basis:100%;width:100%;max-width:760px }
@media(max-width:700px) {
  .vrsr-ui .mixer>.fader-actions { grid-column:1/-1;justify-self:start }
  .vrsr-ui .mixer>.mixer-options { grid-column:1/-1;justify-self:end }
}


/* Transition options slide over the program area without changing its grid. */
.vrsr-ui .workspace .mixer { grid-template-columns:minmax(0,1fr) max-content }
.vrsr-ui .program>.mixer-options {
  position:absolute;inset:20px 0;z-index:65;min-width:0;margin:0;pointer-events:none;
}
.vrsr-ui .program>.mixer-options>summary {
  position:absolute;right:-1px;top:50%;transform:translateY(-50%);pointer-events:auto;
  writing-mode:vertical-rl;min-height:156px;width:36px;padding:12px 7px;
  justify-content:center;gap:12px;border-radius:7px 0 0 7px;font-size:10px;letter-spacing:1px;
}
.vrsr-ui .program .mixer-options-content {
  position:absolute;top:0;right:36px;width:440px;max-width:calc(100% - 48px);
  max-height:min(640px,100%,calc(100dvh - 48px));box-sizing:border-box;pointer-events:auto;
  overscroll-behavior:contain;
}
.vrsr-ui .program>.mixer-options[open] .mixer-options-content { animation:ui-options-slide-in .2s ease-out }
@keyframes ui-options-slide-in { from { opacity:0;transform:translateX(16px) } to { opacity:1;transform:translateX(0) } }
@media(max-width:700px) {
  .vrsr-ui .workspace .mixer { grid-template-columns:minmax(0,1fr) }
  .vrsr-ui .program>.mixer-options { inset:16px 0 }
  .vrsr-ui .program .mixer-options-content { position:fixed;top:16px;right:52px;width:min(440px,calc(100% - 68px));max-width:none;max-height:calc(100dvh - 32px);padding:16px }
}
@media(prefers-reduced-motion:reduce) {
  .vrsr-ui .program>.mixer-options[open] .mixer-options-content { animation:none }
}

.vrsr-ui #control-live-toggle.stop-confirmation { border-color:#efab4a;background:#49301b;color:#ffe2b7;box-shadow:0 0 0 1px #efab4a55 }
.vrsr-ui #control-live-toggle.stop-confirmation small { letter-spacing:0;font-size:11px;line-height:1.5 }

/* Compact paired settings inside the transition drawer. */
.vrsr-ui .program .mixer-options-content .sync-settings-panel {
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;
}
.vrsr-ui .program .mixer-options-content .sync-settings-panel>label:nth-of-type(3),
.vrsr-ui .program .mixer-options-content .sync-settings-panel>small,
.vrsr-ui .program .mixer-options-content .sync-settings-panel>button { grid-column:1/-1 }
.vrsr-ui .program .mixer-options-content .sync-buffer-panel[open] {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.vrsr-ui .program .mixer-options-content .sync-buffer-panel>summary,
.vrsr-ui .program .mixer-options-content .sync-buffer-panel>.sync-buffer-enable,
.vrsr-ui .program .mixer-options-content .sync-buffer-panel>small { grid-column:1/-1 }
.vrsr-ui .program .mixer-options-content .sync-buffer-panel label { margin:0 }
@media(max-width:600px) {
  .vrsr-ui .program .mixer-options-content .sync-settings-panel,
  .vrsr-ui .program .mixer-options-content .sync-buffer-panel[open] { grid-template-columns:minmax(0,1fr) }
}

/* Fold schedule event editors without losing their identity or form controls. */
.vrsr-ui details.schedule-event>summary{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;list-style:none;background:#101d27;border-bottom:1px solid var(--line,#24303b)}
.vrsr-ui details.schedule-event>summary::-webkit-details-marker{display:none}.schedule-event>summary:before{content:"▸";color:var(--cyan,#18d9e8)}.schedule-event[open]>summary:before{content:"▾"}.schedule-event>summary>div{flex:1;min-width:0}.schedule-event>summary small{display:block}.schedule-fold-label{font-size:10px;color:var(--cyan,#18d9e8);letter-spacing:1px}.vrsr-ui .schedule-event-actions{justify-content:flex-end;flex-wrap:wrap;padding:10px 16px;gap:6px}.schedule-event:not([open]){margin-bottom:10px}.schedule-event>summary:focus-visible{outline:2px solid var(--cyan,#18d9e8);outline-offset:2px}

.schedule-slot-move{display:flex;gap:4px;margin-top:8px}.schedule-slot-move button{padding:4px 8px;min-height:28px}.schedule-slot-move [draggable="true"]{cursor:grab}

#discord-schedule-link[hidden],#discord-plan-code-box[hidden]{display:none!important}
#discord-schedule-link{display:block}#discord-schedule-link label{max-width:640px;margin:12px 0}#discord-schedule-link summary{cursor:pointer}

/* Optional slot label stays within its identity column. */
#schedule-list .slot-display-name{display:block;min-width:0;margin-top:6px}#schedule-list .slot-display-name input{box-sizing:border-box;width:100%;max-width:100%;min-width:0}

/* Smooth Deck C reveal with stable content width and a centered output handle. */
.vrsr-ui #control-live-panel #control-live-collapse{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px 0;text-align:center}
.vrsr-ui #control-live-collapse span,.vrsr-ui #control-live-collapse b{margin:0;flex:0 0 auto;line-height:1}
.vrsr-ui #control-live-collapse b{writing-mode:vertical-rl;text-align:center}
@media(min-width:761px){
 .vrsr-ui .decks{container-type:inline-size;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,0fr);transition:grid-template-columns .26s cubic-bezier(.22,.8,.3,1)}
 .vrsr-ui .decks.aux-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
 .vrsr-ui .decks>#aux-deck,.vrsr-ui .decks>#aux-deck.collapsed{width:auto;min-width:0;padding:0;min-height:0;transition:border-color .26s ease;box-shadow:none}
 .vrsr-ui .decks>#aux-deck.collapsed{border:1px solid transparent;background:transparent}
 .vrsr-ui .decks>#aux-deck>.aux-deck-content{display:block!important;width:100%;min-width:0;overflow:hidden;opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s;}
 .vrsr-ui #aux-deck .aux-deck-content>*{width:calc((100cqw - 28px)/3 - 46px);margin-left:22px;margin-right:22px;max-width:none}
 .vrsr-ui #aux-deck .aux-deck-content>span{display:block;margin-top:22px;font-size:9px;letter-spacing:2px;color:#73f5bf}
 .vrsr-ui #aux-deck .aux-deck-content>.row-actions{margin-bottom:22px}
 .vrsr-ui .decks>#aux-deck.collapsed>.aux-deck-content{display:block!important;visibility:hidden;opacity:0;pointer-events:none;height:0;transition:opacity .12s ease,visibility 0s .26s}
}
@media(max-width:760px){.vrsr-ui .decks>#aux-deck>.aux-deck-content{display:block}.vrsr-ui .decks>#aux-deck.collapsed>.aux-deck-content{display:none!important}}
@media(prefers-reduced-motion:reduce){.vrsr-ui .decks,.vrsr-ui .decks>#aux-deck,.vrsr-ui .decks>#aux-deck>.aux-deck-content{transition:none}}