:root {
  scrollbar-gutter: stable;
  --paper: #f1f0eb;
  --surface: #ffffff;
  --soft: #f5f7fa;
  --ink: #303133;
  --muted: #626974;
  --line: #dce0e5;
  --primary: #b28a2e;
  --primary-strong: #8f6d24;
  --primary-soft: #f8f3e5;
  --on-primary: #ffffff;
  --navy: #8f6d24;
  --radius: 12px;
  font-family: Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1019;
  --surface: #191b24;
  --soft: #24262f;
  --ink: #e5eaf3;
  --muted: #a6afbf;
  --line: #353b49;
  --primary: #cbb46c;
  --primary-strong: #ddc780;
  --primary-soft: #2a271c;
  --on-primary: #18130a;
  --navy: #cbb46c;
  --blue: #82b6ef;
  --red: #f09aa6;
  --green: #79baa4;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--primary-soft); color: var(--ink); }
input, select, textarea { background: var(--surface); caret-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--primary) 65%, transparent); outline-offset: 2px;
}
.app-header {
  height: auto; min-height: 64px; max-width: 1856px; margin: 12px 24px 0; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); gap: 16px;
  position: sticky; top: 12px; z-index: 80; box-shadow: 0 6px 20px #00000012;
}
.brand { font-size: 18px; }
.brand small { font-family: inherit; font-size: 13px; letter-spacing: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; clip-path: none; background: var(--primary-soft); color: var(--primary-strong); }
.brand-mark svg { width: 24px; height: 24px; }
.header-actions { gap:8px; align-items:center; }
.app-header:has(.header-live-controls) { padding-bottom:34px; }
.app-header .header-actions .button { height:40px; min-height:40px; padding:8px 14px; display:inline-flex; align-items:center; justify-content:center; }
.app-header .room-back-link { display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:8px 13px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--ink); font-size:15px; font-weight:500; white-space:nowrap; }
.app-header .room-back-link svg { width:17px; height:17px; }
.app-header .room-back-link:hover { color:var(--primary-strong); border-color:color-mix(in srgb,var(--primary) 50%,var(--line)); background:var(--primary-soft); }
.header-live-controls { position:relative; display:flex; align-items:center; margin-left:10px; }
.header-live-controls > div { display:flex; gap:8px; }
.header-live-controls small { position:absolute; right:0; top:calc(100% + 7px); white-space:nowrap; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; line-height:1.4; }
.header-live-controls small i { width:5px; height:5px; background:var(--muted); border-radius:50%; }
.header-live-controls small.connected i { background:var(--green); }
.header-output-scene { color:var(--ink); padding-right:10px; margin-right:4px; border-right:1px solid var(--line); }
.ingame-source-status { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:20px 20px 0; padding:18px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.ingame-source-status > div { display:flex; gap:10px; align-items:center; }
.ingame-source-status strong { color:var(--ink); font-weight:500; }
.ingame-source-status p { margin:0; }
.ingame-source-status > span { margin-left:auto; font-size:13px; }
@media(max-width:760px) { .header-live-controls { margin-left:0; } }
.button { background: var(--surface); border-radius: 8px; min-height: 38px; }
.button:hover { background: var(--soft); box-shadow: none; }
.button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.button.primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
:root[data-theme="light"] .button.primary { background: var(--primary-strong); border-color: var(--primary-strong); }
.button.destructive { background: #ab4653; color: white; }
.scene-button { color: var(--muted); font-size: 14px; }
.scene-button:hover { background: var(--soft); }
.scene-button.selected { background: var(--surface); color: var(--primary-strong); border-color: var(--primary); box-shadow: none; }
.scene-thumb { border-color: var(--line); background: var(--soft); }
.scene-thumb.blank { background: var(--surface); }
.scene-thumb em { border-color: var(--surface); font-size: 11px; }
.segmented { background: var(--soft); }
.segmented button { font-size: 14px; }
.segmented button.active { background: var(--surface); color: var(--primary-strong); box-shadow: none; }
.preview-toolbar { padding: 16px 20px 12px; }
.preview-description, .resolution { color: var(--muted); font-size: 13px; }
.display-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 20px 16px; flex-wrap: wrap; }
.display-toolbar label { font-size: 14px; white-space: nowrap; }
.display-toolbar select { width: auto; max-width: 100%; padding: 7px 30px 7px 10px; font-size: 14px; }
.display-toolbar > span { color: var(--muted); font-size: 14px; }
.preview-canvas { padding: 0; margin: 0 20px 18px; background-color: var(--soft); }
.preview-canvas[data-background="transparent"] {
  background-image: conic-gradient(var(--line) 25%, transparent 0 50%, var(--line) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.preview-canvas[data-background="green"] { background: #00ff00; }
.publish-bar { border-color: var(--line); }
.publish-bar strong { font-size: 15px; }
.publish-bar small, .section-heading > span, .lower-panels small { font-size: 14px; }
.lower-panels p { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.workflow-help { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.workflow-help summary { cursor: pointer; color: var(--ink); width: fit-content; }
.workflow-help ol { padding-left: 24px; margin: 12px 0; }
.workflow-help li + li { margin-top: 8px; }
.workflow-help p { margin-bottom: 12px; }
.flow-caption, .workspace-footer, .prototype-footnote, .rail-foot { color: var(--muted); font-size: 13px; }
.control-panel-top { padding: 16px 18px; }
.control-panel-top > span:first-child { font-size: 16px; }
.mode-tag { background: var(--soft); color: var(--muted); font-size: 13px; }
.control-heading h2 { font-size: 22px; }
.control-heading p, .control-meta, .selected-hero small { font-size: 14px; }
.control-panel.turn-blue .control-heading h2 { color: var(--blue); }
.control-panel.turn-red .control-heading h2 { color: var(--red); }
.control-meta b { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.turn-progress, .room-progress { background: var(--soft); }
.turn-progress i, .room-progress i { background: var(--primary); }
.hero-search input { font-size: 15px; }
.hero-search kbd { border-color: var(--line); }
.role-filters button { color: var(--muted); font-size: 13px; }
.role-filters button.active { background: var(--primary-soft); color: var(--primary-strong); }
.hero-grid { scrollbar-color: var(--line) transparent; gap: 14px 8px; }
.hero-button span { color: var(--muted); font-size: 13px; }
.hero-button.selected span { color: var(--primary-strong); }
.hero-button.selected img { outline-color: var(--primary); box-shadow: none; }
.hero-button:not(:disabled):hover { transform: none; }
.hero-button:disabled span { opacity: 1; }
.hero-button i { color: var(--ink); background: var(--surface); font-size: 11px; }
.selected-hero strong { font-size: 16px; }
.selection-placeholder, .intro-icon { background: var(--soft); color: var(--primary-strong); }
.text-button { font-size: 14px; color: var(--muted); min-height: 32px; }
.text-button:hover, .icon-button:hover { background: var(--soft); color: var(--ink); }
.text-button.danger { color: var(--red); }
.lock-button.blue:not(:disabled) { background: #365e8e; color: white; border-color: #365e8e; }
.lock-button.red:not(:disabled) { color: white; }
.lock-button kbd { display: none; }
.swap-row.selected { background: var(--primary-soft); border-color: var(--primary); }
.swap-row strong { font-size: 14px; }
.swap-row small { font-size: 13px; }
.swap-row > span { min-width: 0; overflow-wrap: anywhere; }
.link-button, .room-card-bottom strong { color: var(--primary-strong); }
.room-card, .new-room-card, dialog { background: var(--surface); }
.room-card:hover, .new-room-card:hover { border-color: var(--primary); transform: none; }
.new-room-card { color: var(--muted); }
.room-card-bottom, .room-card-top small, .room-versus > span { font-size: 14px; }
.room-status { font-size: 13px; }
.room-status.ready { background: var(--soft); color: var(--muted); }
.room-versus em { color: var(--ink); }
.page-heading h1 { font-size: 30px; font-weight: 650; letter-spacing: 0; }
.page-heading p, .workspace-note p { font-size: 15px; }
.page-heading .eyebrow, .dialog-heading .eyebrow, .confirm-dialog .eyebrow { display: none; }
.control-heading .eyebrow { color: var(--muted); font-size: 13px; letter-spacing: 0; }
.form-note { font-size: 14px; }
.slogan-field { margin-top: 20px; }
.check-field input { accent-color: var(--primary); }
#toast { background: var(--ink); color: var(--surface); font-size: 15px; }
:root[data-theme="dark"] .step-item > div { background: #192b42; border-color: #35547b; color: #b9d4f4; }
:root[data-theme="dark"] .step-item.red > div { background: #3a212b; border-color: #744554; color: #f5c5cc; }
:root[data-theme="dark"] .step-item.current > span { color: var(--primary); }
@media (min-width: 1904px) { .app-header { margin-inline: auto; } }
@media (max-width: 1150px) {
  .app-header { margin: 10px 16px 0; gap: 12px; }
  .header-context { display: none; }
  .preview-canvas { margin: 0 12px 12px; }
  .display-toolbar { margin-inline: 12px; }
  .display-toolbar > span { flex-basis: 100%; }
}
@media (max-width: 880px) {
  .app-header { flex-wrap: wrap; }
  .header-actions { flex-wrap: wrap; }
  .header-actions .button { font-size: 14px; }
}
@media (max-width: 540px) {
  .app-header { margin: 8px; padding: 12px; gap: 12px; }
  .header-actions { width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .header-live-controls { grid-column:1/-1; width:100%; }
  .header-live-controls > div { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .header-actions .header-live-controls a.button { grid-column:auto; }
  .header-actions [data-action="settings"], .header-actions [data-action="copy-link"] { display: inline-flex; }
  .header-actions a.button { grid-column: 1/-1; }
  .header-actions .button { padding: 8px; min-height: 40px; font-size: 14px; }
  .brand small { font-size: 12px; }
  .back-link { margin-left: auto; font-size: 14px; }
  .preview-toolbar { flex-wrap: wrap; }
  .preview-description { margin-left: auto; }
  .display-toolbar select { flex: 1; min-width: 0; }
  .scene-button { font-size: 14px; }
  .publish-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  .publish-bar strong { font-size: 15px; }
  .publish-bar small, .publish-bar .button { font-size: 14px; }
  .publish-bar .button { min-height: 40px; }
  .form-columns { grid-template-columns: 1fr; }
  .check-field { padding-top: 0; }
  .flow-caption, .workspace-footer { flex-wrap: wrap; line-height: 1.7; }
  .source-panel, .session-panel { padding: 16px; }
  .lower-panels .session-panel { grid-column: auto; }
  .hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 320px; }
  .role-filters { flex-wrap: wrap; }
  .role-filters button { flex: 1 0 28%; min-height: 36px; }
  .text-button { min-height: 40px; }
  .room-grid { gap: 16px; }
}
/* Quiet selection cues for the console; broadcast artwork has its own styling. */
.scene-button.selected { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.hero-button.selected img { outline: 1px solid color-mix(in srgb, var(--primary) 65%, var(--line)); outline-offset: 1px; box-shadow: none; }
.hero-button.selected span { font-weight: 500; }
.swap-row.selected { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line)); outline-offset: 1px; }
.draft-phase-track { display:flex; gap:8px; list-style:none; margin:14px 0 18px; padding:0; flex-wrap:wrap; }
.draft-phase-track li { flex:1; min-width:110px; padding:10px 12px; border:1px solid var(--line); border-radius:7px; color:var(--muted); }
.draft-phase-track strong { display:block; font-size:13px; font-weight:500; }
.draft-phase-track small { display:block; font-size:12px; margin-top:5px; }
.draft-phase-track li.active { background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 30%,var(--line)); color:var(--primary-strong); }
.draft-phase-track li.done { color:var(--ink); }
.preview-canvas .bp-frame { border-radius:4px; }
.studio,.studio.board-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:12px 24px 0; max-width:1920px; }
.studio > .center-column { grid-column:1; grid-row:1; }
.studio .preview-panel { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; background:none; border:0; border-radius:0; overflow:visible; }
.studio .preview-stage { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.studio .preview-panel > .control-panel { min-width:0; grid-column:auto; }
.ingame-controls h2 { margin:0 0 16px; font-size:16px; font-weight:600; }
.ingame-controls h2:not(:first-child) { margin-top:28px; }
.ingame-controls .check-field { justify-content:flex-start; font-size:14px; }
.ingame-controls p { margin:12px 0 20px; color:var(--muted); font-size:13px; line-height:1.7; }
.ingame-controls .button.full { justify-content:flex-start; gap:12px; margin-top:10px; }
.ingame-controls .button.full > span:last-child { margin-left:auto; }
.ingame-controls .team-seal { width:28px; height:28px; font-size:13px; }
@media(max-width:540px) { .studio,.studio.board-workspace { padding:12px 8px; } }

/* All scenes share the same monitor geometry and operating column. */
@media(min-width:1180px) {
  .studio { --desk-height:max(420px, calc(100dvh - var(--app-header-height) - 124px)); }
  .studio > .center-column { display:grid; grid-template-columns:minmax(0,1fr) clamp(390px,29vw,480px); column-gap:16px; align-items:start; }
  .studio .preview-panel { display:contents; }
  .studio .preview-stage { grid-column:1; grid-row:1; height:var(--desk-height); }
  .studio .center-column > :not(.preview-panel) { grid-column:1; }
  .studio .preview-panel > .board-console.is-docked, .studio .preview-panel > .control-panel { grid-column:2; grid-row:1 / span 4; position:sticky; top:calc(var(--app-header-height) + 12px); height:calc(var(--desk-height) + 96px); align-self:start; scroll-margin-top:calc(var(--app-header-height) + 12px); }
  .studio .preview-stage { display:flex; flex-direction:column; min-height:0; }
  .studio .preview-panel > .control-panel { max-height:none; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  .studio .preview-panel > .control-panel .control-body { flex:1; min-height:0; overflow:auto; }
  .studio .preview-panel > .control-panel .control-bottom { flex-shrink:0; }
  .studio .preview-controls { display:flex; flex-direction:column; min-height:0; flex:1; padding:0 20px; }
  .studio .preview-toolbar-groups { flex-shrink:0; padding-inline:0; }
  .studio .preview-viewport { flex:1; min-height:0; display:grid; place-items:center; container-type:size; padding:0; }
  .studio .preview-canvas { width:min(100cqw,calc(100cqh * 16 / 9)); aspect-ratio:16/9; margin:0; padding:0; overflow:hidden; border-radius:4px; }
  .studio .publish-bar { flex-shrink:0; margin-top:14px; padding:12px 20px; }
  .studio .workspace-utilities { padding:10px 2px 12px; margin:0; }
  .studio.board-workspace .bp-lineup-dock:empty { display:none; }
  .studio.board-workspace .bp-lineup-dock { margin-top:16px; padding:0 20px 16px; background:var(--surface); border:1px solid var(--line); border-radius:10px; }
  .studio.board-workspace .bp-lineup-dock .board-lineup-editor { padding-top:14px; border-top:1px solid var(--line); }
  .studio.board-workspace .bp-lineup-dock .board-lineup-intro { margin:0 0 12px; align-items:center; }
  .studio.board-workspace .bp-lineup-dock .board-lineup-intro h3 { font-size:15px; }
  .studio.board-workspace .bp-lineup-dock .board-lineup-intro p { display:none; }
  .studio.board-workspace .bp-lineup-dock .board-pending-lineup { gap:24px; }
  .studio.board-workspace .bp-lineup-dock .board-lineup-team > header { margin-bottom:8px; gap:8px; }
  .studio.board-workspace .bp-lineup-dock .board-lineup-team h3 { font-size:14px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-slots { gap:6px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-card { padding:9px 4px; border-radius:6px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-lane { margin-bottom:7px; font-size:11px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-lane img { width:14px; height:14px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-portrait { width:40px; height:40px; border-radius:5px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-card strong { margin-top:6px; font-size:13px; }
  .studio.board-workspace .bp-lineup-dock .board-swap-player { margin-top:1px; font-size:12px; }
}

/* Place visual style selection beside the action that sends it to the live feed. */
.publish-bar .publish-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.style-picker-trigger { display:flex; align-items:center; gap:10px; padding:6px 9px; border:1px solid transparent; border-radius:7px; text-align:left; color:var(--ink); }
.style-picker-trigger:hover { background:var(--soft); border-color:var(--line); }
.style-picker-trigger>svg { width:24px; height:24px; fill:none; stroke:var(--muted); stroke-width:1.3; }
.style-picker-trigger>span:not(.style-picker-chevron) { display:grid; gap:4px; }
.publish-bar .style-picker-trigger strong { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; }
.publish-bar .style-picker-trigger small { grid-column:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.style-picker-chevron { color:var(--muted); font-size:17px; padding-left:4px; }
.publish-pending { display:flex; align-items:center; gap:6px; max-width:280px; color:var(--primary-strong); font-size:12px; line-height:1.6; }
.publish-pending i { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:currentColor; }
.publish-bar .publish-actions { min-width:0; }
.publish-bar .publish-actions>.button { white-space:nowrap; flex-shrink:0; }
@media(max-width:800px) {
  .publish-bar { flex-wrap:wrap; }
  .publish-bar .publish-actions { margin-left:auto; gap:10px; }
}

/* The three fixed rows share one surface, with tools, navigation and status at distinct weights. */
.workspace-topbar { position:sticky; top:0; z-index:80; background:var(--surface); border-bottom:1px solid var(--line); }
.workspace-topbar .app-header { position:static; margin:0 auto; padding:8px 24px; min-height:56px; max-width:1920px; height:auto; gap:16px; border:0; border-radius:0; box-shadow:none; background:transparent; }
.workspace-topbar .brand { gap:9px; font-size:16px; }
.workspace-topbar .brand-mark { width:30px; height:30px; border-radius:7px; font-size:22px; }
.workspace-topbar .brand small { display:none; }
.workspace-topbar .header-divider { height:20px; opacity:.65; flex-shrink:0; }
.workspace-topbar .room-back-link { min-height:34px; padding:6px 0; gap:7px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:13px; }
.workspace-topbar .room-back-link:hover { color:var(--ink); background:transparent; }
.workspace-topbar .header-context { font-size:15px; font-weight:550; }
.workspace-topbar .game-tag { border:0; padding:3px 0; font-size:12px; }
.workspace-topbar .header-actions { gap:4px; flex-shrink:0; }
.workspace-topbar .header-actions .button { min-height:34px; height:34px; transition:none; padding:6px 11px; border-color:transparent; border-radius:5px; background:transparent; color:var(--muted); font-size:13px; font-weight:400; }
.workspace-topbar .header-actions .button:hover { background:var(--soft); color:var(--ink); }
.workspace-topbar .header-actions .primary { background:var(--primary); color:var(--on-primary); }
.workspace-topbar .header-actions .primary:hover { background:var(--primary-strong); }
.workspace-topbar .header-live-controls { margin-left:8px; padding-left:12px; border-left:1px solid var(--line); }
.workspace-topbar .header-live-controls>div { gap:4px; }
.workspace-topbar .header-live-controls a.button { color:var(--ink); background:var(--soft); }
.workspace-command-row { max-width:1920px; margin:auto; min-height:48px; padding:0 24px; display:flex; align-items:center; gap:24px; }
.workspace-output-status { display:flex; align-items:center; font-size:12px; color:var(--muted); white-space:nowrap; }
.workspace-output-status .header-output-scene { border:0; padding:0; margin:0; color:var(--muted); }
.workspace-command-row .scene-switch-button { min-height:40px; padding:9px 17px; gap:8px; font-size:14px; font-weight:650; white-space:nowrap; flex-shrink:0; border-radius:6px; }
.workspace-command-row .scene-switch-button:not(:disabled) { background:var(--primary-strong); border-color:var(--primary-strong); color:var(--on-primary); box-shadow:0 3px 10px color-mix(in srgb,var(--primary-strong) 24%,transparent); }
.workspace-command-row .scene-switch-button:not(:disabled):hover { filter:brightness(1.12); box-shadow:0 4px 14px color-mix(in srgb,var(--primary-strong) 32%,transparent); }
.workspace-command-row .scene-switch-button:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.workspace-command-row .scene-switch-button:disabled { background:var(--soft); color:var(--muted); border-color:var(--line); box-shadow:none; opacity:.55; }
.workspace-topbar .workspace-command-row details.publication>summary { min-height:34px; padding:7px 13px; border-color:transparent; background:var(--soft); font-size:13px; }
.workspace-topbar .workspace-command-row details.publication>summary.pending { background:var(--primary-soft); border-color:var(--primary); color:var(--primary-strong); }
.workspace-topbar .workspace-command-row details.publication>summary:hover { box-shadow:inset 0 0 0 1px var(--line); }
@media(max-width:1179px) { .workspace-command-row { gap:12px; } .workspace-output-status { display:none; } }

.workspace-context-row { display:flex; justify-content:space-between; align-items:center; gap:8px 20px; max-width:1920px; margin:auto; min-height:36px; padding:8px 24px; background:color-mix(in srgb,var(--paper) 55%,var(--surface)); }
.delivery-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); min-width:0; }
.delivery-status::before { content:''; width:5px; height:5px; flex-shrink:0; border-radius:50%; background:currentColor; }
.delivery-status.ok::before { background:var(--green); }
.delivery-status.pending { color:var(--muted); }
.delivery-status.error { color:var(--red); }
.delivery-status .button { transition:none; min-height:26px; padding:3px 8px; font-size:12px; }
@media(max-width:1179px) { .workspace-context-row { flex-wrap:wrap; } }
@media(max-width:760px) {
  .workspace-topbar .app-header { padding:8px 12px; gap:10px; }
  .workspace-command-row { padding:0 12px; gap:10px; flex-wrap:wrap; }
  .workspace-context-row { padding:8px 12px; }
  .workspace-topbar .header-live-controls { margin:0; padding:0; border:0; }
}
@media(max-width:540px) {
  .workspace-topbar .app-header { row-gap:6px; }
  .workspace-topbar .header-actions { display:flex; flex-wrap:wrap; width:100%; gap:4px; }
  .workspace-topbar .header-actions .button { min-height:36px; height:36px; font-size:12px; padding:6px 8px; }
  .workspace-topbar .header-live-controls { margin-left:auto; width:auto; }
  .workspace-topbar .header-live-controls>div { display:flex; width:auto; gap:4px; }
  .workspace-topbar .workspace-command-row .scene-overview { flex-basis:100%; }
  .workspace-command-row .publication { margin-left:auto; margin-bottom:8px; }
  .workspace-context-row { gap:7px; }
}