/* B1 materials over the existing studio. Native controls and layout stay in charge. */
@font-face {
  font-family: "B1 Plate";
  src: url('/assets/studija-assets/b1/BarlowCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --oxide-900: #0d1715;
  --oxide-800: #152422;
  --oxide-700: #1d302d;
  --oxide-600: #2a433f;
  --verdigris: #91c8b9;
  --brass: #eed09a;
  --brass-dark: #6e5530;
  --cherry: #6b0f17;
  --paper: #e6dcc6;
  --ink: #d9e3dd;
  --ink-dim: #cbdad2;
  --glow-green: #6dff9e;
  --glow-red: #ffb1a9;
  --glow-amber: #ffb347;
  --font-plate: "B1 Plate", "Arial Narrow", sans-serif;
  --font-body: Inter, "Segoe UI", system-ui, sans-serif;
  --metal-top: var(--oxide-600);
  --metal-bottom: var(--oxide-800);
  --metal-edge: #728f80;
  --metal-highlight: #c8e6dc2e;
  --metal-shadow: #0009;
  --metal-grain: #adc9bb03;
  /* E11.1: brushed casing, recessed bench and raised controls are distinct materials. */
  --surface-shell: linear-gradient(115deg, #3b4940, #303e38 25%, #26332e 58%, #18241f);
  --surface-panel: linear-gradient(165deg, #2b302a, #171d18 55%, #111913);
  --surface-recess: linear-gradient(180deg, #1e221c, #151b16);
  --surface-field: #101510;
  --surface-control: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  --metal-surface: var(--surface-shell);
  --brass-rim: #ae8950;
  --brass-reflection: #f4d59d55;
  --surface-plaque: linear-gradient(110deg, #44341f, #2d2418 55%, #3a2f1d);
  --recess-shadow: inset 0 3px 8px var(--metal-shadow), inset 0 -1px 0 var(--metal-highlight), 0 1px 0 var(--metal-highlight);
  --field-shadow: inset 0 2px 5px var(--metal-shadow), inset 0 0 0 1px #0003;
  --rivet-light: #acb9a0;
  --rivet-dark: #394940;
  --rivet-slot: #121d18;
  --bg: var(--oxide-900);
  --side: var(--oxide-800);
  --panel: var(--oxide-800);
  --field: var(--surface-field);
  --hover: #304a41;
  --line: var(--metal-edge);
  --text: var(--ink);
  --muted: var(--ink-dim);
  --cyan: var(--verdigris);
  --cyan-bg: #27463c;
  --violet: var(--brass);
  --purple-bg: #3d3020;
  --primary: var(--cherry);
  --success: var(--glow-green);
  --error: var(--glow-red);
  --focus: var(--glow-amber);
  --plate-radius: 10px;
  --plate-shadow: inset 0 1px 0 var(--brass-reflection), inset 0 -2px 0 var(--metal-shadow),
    inset 0 0 0 1px var(--metal-shadow), 0 7px 16px var(--metal-shadow);
  --rivet: radial-gradient(circle at 35% 30%, var(--rivet-light), var(--rivet-dark) 64%, var(--rivet-slot) 70%, transparent 76%);
  --rivet-cut: linear-gradient(135deg, transparent 43%, var(--rivet-slot) 44% 55%, transparent 56%);
}

:root[data-theme=light] {
  color-scheme: light;
  --oxide-900: #dee5d9;
  --oxide-800: #e1e7d9;
  --oxide-700: #d5dfcd;
  --oxide-600: #c9d7c0;
  --verdigris: #285b49;
  --brass: #6d4c1d;
  --cherry: #7a1722;
  --paper: #273828;
  --ink: #1d3027;
  --ink-dim: #405345;
  --glow-green: #235f35;
  --glow-red: #9a2530;
  --glow-amber: #794511;
  --metal-edge: #6c8168;
  --metal-highlight: #fffbeccc;
  --metal-shadow: #392b1833;
  --metal-grain: #294f2d03;
  --rivet-light: #e5d3a4;
  --rivet-dark: #7e7859;
  --rivet-slot: #474633;
  /* E11.8: warm brushed casing, porcelain bench, recessed patina and brass controls. */
  --surface-shell: linear-gradient(115deg, #eee9dc, #dcd7c6 35%, #cec9b9 75%, #dcd7c6);
  --surface-panel: linear-gradient(165deg, #f2efe5, #e7e5d9 55%, #d9decd);
  --surface-recess: linear-gradient(180deg, #dad6c4, #ece9da);
  --surface-field: #f1f3e9;
  --brass-rim: #866236;
  --brass-reflection: #fff8;
  --surface-plaque: linear-gradient(110deg, #ecd9a9, #f6eacb 55%, #e3cea0);
  --field-shadow: inset 0 2px 5px var(--metal-shadow), inset 0 0 0 1px #28351e12;
  --field: var(--surface-field);
  --hover: #c4d4ba;
  --bg: var(--oxide-900);
  --side: var(--oxide-800);
  --panel: var(--oxide-800);
  --line: var(--metal-edge);
  --text: var(--ink);
  --muted: var(--ink-dim);
  --cyan: var(--verdigris);
  --cyan-bg: #c5d9c5;
  --violet: var(--brass);
  --purple-bg: #e7d9b9;
  --primary: var(--cherry);
  --success: var(--glow-green);
  --error: var(--glow-red);
  --focus: var(--glow-amber);
}

body {
  font-family: var(--font-body);
  background: radial-gradient(ellipse at 70% 0, color-mix(in srgb, var(--verdigris) 10%, transparent), transparent 65%), var(--bg);
}

/* Rivets are backgrounds, never overlays that intercept clicks or obscure labels. */
.studio > .metal {
  border: 1px solid var(--brass-rim);
  border-radius: var(--plate-radius);
  background:
    var(--rivet-cut) 9px 9px / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) 9px / 8px 8px no-repeat,
    var(--rivet-cut) 9px calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    var(--rivet) 7px calc(100% - 7px) / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) calc(100% - 7px) / 12px 12px no-repeat,
    repeating-linear-gradient(100deg, transparent 0 3px, var(--metal-grain) 3px 4px),
    radial-gradient(ellipse at 20% 0, color-mix(in srgb, var(--metal-highlight) 10%, transparent), transparent 60%),
    var(--metal-surface);
  box-shadow: var(--plate-shadow);
}
.brand {
  padding-block: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}
h1, h2, h3, .brand h1, .creation-header h2, .workspace-header h2 {
  font-family: var(--font-plate);
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--paper);
  text-shadow: 0 1px 0 var(--metal-shadow);
}
.brand h1 { font-size: 28px; }
.creation-header h2, .workspace-header h2 { font-size: 28px; }
.brand h1, .creation-header h2, .workspace-header h2 {
  background: var(--surface-plaque);
  /* Keep the text off the bright inset rim and its top reflection. */
  padding: 3px 6px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--brass-rim), inset 0 2px var(--brass-reflection), 0 2px 4px var(--metal-shadow);
}
.creation-header { padding-inline-start: 8px; }
.section-label { color: var(--brass); }
.prompt-editors > div, .photo-editors > div,
body[data-view=tools] [data-page=tools] > .panel {
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px 0 var(--metal-highlight), inset 0 -1px 3px var(--metal-shadow);
  border-color: var(--metal-edge);
  border-radius: var(--plate-radius);
}
.studio-account {
  background: var(--side);
  border-bottom: 1px solid var(--metal-edge);
}
.account-usage.account-usage {
  color: var(--text);
  background: var(--panel);
  border-color: var(--metal-edge);
  box-shadow: var(--plate-shadow);
}
.account-usage.account-usage button {
  color: var(--text);
  background: var(--field);
  border-color: var(--line);
}
.account-usage .usage-job { border-color: var(--line); }
/* D2: tactile controls; native state, labels and event handlers remain authoritative. */
:root {
  --control-top: #443d2c;
  --control-bottom: #262a20;
  --control-hover-top: #514731;
  --control-selected-top: #365c4f;
  --control-selected-bottom: #213d32;
  --control-selected-text: #e4f0e6;
  --switch-knob: #d4b47c;
  --switch-knob-light: #f1d9a3;
  --switch-knob-dark: #79603a;
  --control-shadow: inset 0 1px 0 var(--metal-highlight), inset 0 -2px 0 var(--metal-shadow), 0 2px 4px var(--metal-shadow);
}
:root[data-theme=light] {
  --control-top: #ede0be;
  --control-bottom: #d7cba9;
  --control-hover-top: #f5ebd0;
  --control-selected-top: #b9d0b8;
  --control-selected-bottom: #a7c1a7;
  --control-selected-text: #1d3027;
}
:is(.job-action, .preset, .icon-button, .plate, .results-toggle),
[data-page=tools] .row > button,
.studio-account button, .account-usage.account-usage button {
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: var(--surface-control);
  box-shadow: var(--control-shadow);
  text-shadow: 0 1px var(--metal-shadow);
  transition: background-color .14s, border-color .14s, box-shadow .14s, transform .08s;
}
:is(.job-action, .preset, .icon-button, .plate, .results-toggle):hover:not(:disabled),
[data-page=tools] .row > button:hover:not(:disabled),
.studio-account button:hover:not(:disabled), .account-usage.account-usage button:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--control-hover-top), var(--control-bottom));
  border-color: var(--brass);
  filter: none;
}
:is(.job-action, .preset, .icon-button, .plate, .results-toggle):active:not(:disabled),
.studio-account button:active:not(:disabled), .account-usage.account-usage button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px var(--metal-shadow), inset 0 0 0 1px var(--metal-edge);
}
.workflow-tabs, .mode-tabs:not(.model-picker), .creativity-row, .workspace-tabs {
  background: var(--field);
  border-color: var(--brass-rim);
  box-shadow: inset 0 2px 5px var(--metal-shadow), 0 1px var(--metal-highlight);
}
.workflow-tabs button + button, .mode-tabs:not(.model-picker) button + button,
.creativity-row button + button, .workspace-tabs button + button {
  border-inline-start-color: var(--brass-rim);
}
.workflow-tabs button, .mode-tabs:not(.model-picker) button, .creativity-row button, .workspace-tabs button {
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: background-color .14s, border-color .14s, box-shadow .14s;
}
.workflow-tabs button:hover:not(:disabled), .mode-tabs:not(.model-picker) button:hover:not(:disabled),
.creativity-row button:hover:not(:disabled), .workspace-tabs button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.workflow-tabs button[aria-pressed=true], .mode-tabs:not(.model-picker) button[aria-pressed=true],
.creativity-row button[aria-pressed=true], .workspace-tabs button[aria-pressed=true],
.model-picker button[aria-pressed=true], :is(.prompt-genres, .photo-genres) button[aria-pressed=true],
.preset[aria-pressed=true] {
  color: var(--control-selected-text);
  background: linear-gradient(180deg, var(--control-selected-top), var(--control-selected-bottom));
  border-color: var(--verdigris);
  /* A raised tile and solid bottom edge distinguish selection without colour alone. */
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -3px var(--verdigris), 0 2px 4px var(--metal-shadow);
}
:is(.prompt-genres, .photo-genres) button { border-radius: 6px; }
/* The original checkbox stays focusable and exposes its checked state to assistive tools.
   The brass slider is entirely CSS; no duplicate button or synchronisation is needed. */
input[type=checkbox] {
  appearance: none;
  display: inline-block;
  flex: 0 0 auto;
  width: 36px;
  height: 22px;
  min-width: 36px;
  padding: 0;
  margin: 0 5px 0 0;
  vertical-align: middle;
  border: 1px solid var(--metal-edge);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, var(--switch-knob-light), var(--switch-knob) 50%, var(--switch-knob-dark) 85%) 2px 50% / 16px 16px no-repeat,
    var(--field);
  box-shadow: inset 0 2px 4px var(--metal-shadow), 0 1px var(--metal-highlight);
  cursor: pointer;
  transition: background-position .16s, border-color .16s;
}
input[type=checkbox]:checked {
  background-position: calc(100% - 2px) 50%;
  background-color: var(--control-selected-bottom);
  border-color: var(--verdigris);
  box-shadow: inset 0 0 0 1px var(--verdigris), inset 0 2px 4px var(--metal-shadow);
}
input[type=checkbox]:hover:not(:disabled):not(:focus-visible) { outline: 1px solid var(--brass); outline-offset: 1px; }
button:disabled, input[type=checkbox]:disabled { opacity: .55; cursor: not-allowed; }
button:disabled { transform: none; }
:focus-visible, input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (forced-colors: active) {
  input[type=checkbox] { appearance: auto; background: none; box-shadow: none; }
  :is(.job-action, .preset, .icon-button, .plate, .results-toggle),
  .studio-account button, .account-usage.account-usage button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .workflow-tabs button[aria-pressed=true], .mode-tabs button[aria-pressed=true],
  .creativity-row button[aria-pressed=true], .workspace-tabs button[aria-pressed=true],
  :is(.prompt-genres, .photo-genres) button[aria-pressed=true], .preset[aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -3px; }
  :focus-visible { outline-color: Highlight; }
}

/* D3: recessed fields, existing select-backed dials and the existing queue buttons.
   No extra control, submission handler or source of option values is introduced. */
textarea, select, input:not([type=checkbox]):not([type=hidden]):not([type=range]) {
  color: var(--text);
  background-color: var(--field);
  border-color: var(--metal-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 5px var(--metal-shadow), 0 1px 0 var(--metal-highlight);
  caret-color: var(--verdigris);
}
textarea::placeholder, input::placeholder { color: var(--muted); opacity: 1; }
:is(textarea, select, input):hover:not(:disabled):not(:focus-visible) { border-color: var(--brass); }
:is(textarea, select, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:is(textarea, select, input):disabled { cursor: not-allowed; }
input[readonly], textarea[readonly] { border-style: dashed; }
select option { color: var(--text); background: var(--field); }
input[type=range] { accent-color: var(--brass); }
input[type=file]::file-selector-button {
  font: inherit;
  color: var(--text);
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  border: 1px solid var(--metal-edge);
  border-radius: 4px;
  padding: 5px 8px;
  margin-inline-end: 8px;
  box-shadow: var(--control-shadow);
}
.dial-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.dial-label { color: var(--brass); text-align: center; margin: 0; font-family: var(--font-plate); font-size: 16px; }
.dial-wrap { display: flex; justify-content: center; order: 1; }
.dial-field .dial {
  position: relative;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-radius: 50%;
  background: var(--oxide-900);
  box-shadow: inset 0 0 0 3px var(--metal-shadow), 0 5px 7px var(--metal-shadow);
  cursor: ew-resize;
  touch-action: none;
}
.dial-field .dial::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: url('/assets/studija-assets/b1/knob.webp') center / cover no-repeat;
  /* The crop's indicator starts at -45 degrees. The existing angle is -60…60. */
  transform: rotate(calc(var(--dial-angle, 0deg) + 45deg));
  transition: transform .16s ease-out;
  pointer-events: none;
}
.dial-field .dial:hover { border-color: var(--brass); }
.dial-field .dial.dragging { cursor: grabbing; }
.dial-value { order: 2; text-align: center; }
.dial-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 6px;
  order: 3;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.dial-values .selected { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Audio-driven duration remains controlled by audio. The native disabled field
   stays visible; its enhancement cannot offer a second, unlocked path. */
.dial-field:has(.dial-value:disabled) :is(.dial-wrap, .dial-values) { display: none; }
:is(#rec, #photoGenerate, #startQueue) {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
  min-width: 150px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  font-family: var(--font-plate);
  font-size: 19px;
  font-weight: 500;
  color: var(--paper);
  background: var(--surface-control);
  border: 1px solid var(--brass-rim);
  box-shadow: var(--plate-shadow);
  border-radius: 7px;
}
:is(#rec, #photoGenerate)::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 480 / 122;
  background: url('/assets/studija-assets/b1/lever.webp') center / contain no-repeat;
  border-radius: 5px;
  filter: drop-shadow(0 4px 3px var(--metal-shadow));
  transform-origin: 50% 100%;
  transition: transform .14s ease-out;
  pointer-events: none;
}
:is(#rec, #photoGenerate, #startQueue):hover:not(:disabled) { background: var(--oxide-700); border-color: var(--brass); }
:is(#rec, #photoGenerate):active:not(:disabled)::before { transform: translateY(3px) scaleY(.85); }
:is(#rec, #startQueue) :is(.small-grip, .lever-grip) { display: none; }
#rec .lever-label {
  padding: 3px 12px;
  color: #271d12;
  background: linear-gradient(180deg, #eed4a0, #c4a16a);
  border: 1px solid var(--brass-dark);
  border-radius: 4px;
  box-shadow: inset 0 1px #fff5, 0 2px 3px var(--metal-shadow);
}
/* Long mode-dependent option lists wrap without widening the three columns. */
@media (max-width: 600px) {
  .dial-values { font-size: 12px; }
  .dial-field .dial { width: 66px; height: 66px; }
}
@media (forced-colors: active) {
  textarea, select, input:not([type=checkbox]):not([type=hidden]) {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .dial-field .dial::before, :is(#rec, #photoGenerate)::before { display: none; }
  .dial-wrap, .dial-values { display: none; }
  :is(#rec, #photoGenerate, #startQueue), #rec .lever-label {
    color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none;
  }
  :is(textarea, select, input):focus-visible { outline-color: Highlight; }
}

/* Small gutters keep all existing viewport and independent scroll rules intact. */
@media (min-width: 901px) {
  .studio { gap: 8px; padding: 8px; }
}
@media (max-width: 900px) {
  .studio > .metal { margin: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* Stop decorative depression too. Real dial/meter positions still follow values. */
  button:active:not(:disabled):not(.aw-handle), summary:active { transform: none !important; }
  .audio-wave-player .aw-handle:active:not(:disabled) { transform: translateX(-50%) !important; }
  :is(#rec, #photoGenerate):active:not(:disabled)::before { transform: none !important; }
}
@media (forced-colors: active) {
  .studio > .metal { background: Canvas; box-shadow: none; border-color: CanvasText; }
  .studio > .metal::before, .studio > .metal::after { display: none; }
  h1, h2, h3 { color: CanvasText; text-shadow: none; }
}

/* D5: shared card trays and engraved tables; native content and states stay intact. */
:root { --tray: #29151a; --table-row: #1d302d; }
:root[data-theme=light] { --tray: #dbcfbf; --table-row: #d5dfcd; }
.workspace-body #imageGallery, #videoLibrary {
  gap: 12px;
  padding: 12px;
  background: var(--tray);
  border: 1px solid var(--metal-edge);
  border-radius: 8px;
  box-shadow: inset 0 3px 8px var(--metal-shadow), 0 1px var(--metal-highlight);
  align-content: start;
}
#videoLibrary:empty { display: none; }
:is(.image-card, .job, .usage-job, .account, .storage-model-row) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  border: 1px solid var(--metal-edge);
  border-radius: 7px;
  box-shadow: inset 0 1px var(--metal-highlight), 0 3px 6px var(--metal-shadow);
}
:is(.job, .usage-job, .storage-model-row) { padding: 12px; margin-block: 10px; }
.account-usage .usage-job, body[data-studio-admin] .usage-job { padding: 12px; border-color: var(--metal-edge); }
.image-card { display: block; padding: 0 8px 10px; overflow: visible; }
.image-card > img {
  width: calc(100% + 16px); max-width: none; margin: 0 -8px;
  object-fit: contain; background: var(--field); border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--metal-edge);
}
.image-card > p { font-size: 12px; line-height: 1.5; padding: 0; margin: 9px 0; }
.image-card :is(.image-preview-action, .image-project-action) {
  width: 100%; margin: 6px 0 0; padding: 7px; font-size: 12px; min-height: 36px;
  white-space: normal; overflow-wrap: anywhere;
}
.image-card.selected {
  border-color: var(--verdigris);
  box-shadow: inset 3px 0 var(--verdigris), 0 0 0 2px var(--verdigris);
}
.image-card.selected::before {
  content: '\2713'; position: absolute; top: 6px; left: 6px; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--verdigris); border-radius: 4px;
  color: var(--control-selected-text); background: var(--control-selected-bottom);
  font-size: 20px; pointer-events: none;
}
.image-card:has(.image-delete-choice input:checked) { border-style: dashed; }
.image-card button.image-icon {
  color: var(--text); background: var(--panel); border-color: var(--metal-edge);
  box-shadow: var(--control-shadow);
}
.image-card:nth-child(2n+1) .image-icon::after { left: auto; right: 0; }
.image-card .image-icon[aria-pressed=true] {
  color: var(--control-selected-text); background: var(--control-selected-bottom) !important;
  border-color: var(--verdigris) !important; box-shadow: inset 0 -3px var(--verdigris);
}
.image-delete-choice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.5; }
#videoLibrary .job { overflow: visible; }
#videoLibrary .job > button { color: var(--text); background: var(--panel); border-radius: 6px; }
#videoLibrary .job > p, :is(.usage-job, .account) p { font-size: 12px; line-height: 1.6; }
:is(.job, .usage-job, .account, .storage-model-row) :is(button, a, strong) {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.empty-gallery {
  color: var(--muted); background: var(--panel); border-color: var(--metal-edge);
  box-shadow: inset 0 2px 5px var(--metal-shadow); overflow-wrap: anywhere;
}
#imageGalleryStatus, #imagePageStatus { overflow-wrap: anywhere; line-height: 1.6; }
.shared-gpu-queue table, .workspace .mh-projects table, body[data-studio-admin] table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: var(--panel); color: var(--text); font-variant-numeric: tabular-nums;
}
.shared-gpu-queue table { table-layout: fixed; }
.shared-gpu-queue :is(th, td), .workspace .mh-projects :is(th, td), body[data-studio-admin] :is(th, td) {
  padding: 10px 12px; border-bottom: 1px solid var(--metal-edge);
  text-align: left; vertical-align: top; overflow-wrap: anywhere; line-height: 1.5;
}
.shared-gpu-queue th, .workspace .mh-projects th, body[data-studio-admin] th {
  color: var(--brass); background: var(--field); white-space: normal;
  font-family: var(--font-plate); font-size: 16px; font-weight: 500;
}
.shared-gpu-queue tbody tr:nth-child(even), .workspace .mh-projects tbody tr:nth-child(even),
body[data-studio-admin] tbody tr:nth-child(even) { background: var(--table-row); }
.mh-projects .mh-table, body[data-studio-admin] .plan-table {
  min-width: 0; max-width: 100%; overflow: auto;
  border: 1px solid var(--metal-edge); border-radius: 7px;
  box-shadow: inset 0 2px 5px var(--metal-shadow);
}
.mh-projects .mh-table table { min-width: 440px; }
.workspace .mh-projects .mh-table :is(th, td):not(:first-child) { min-width: 90px; }
/* Shared surfaces of the standalone admin page. */
body[data-studio-admin] { color: var(--text); background: var(--bg); }
body[data-studio-admin] p { color: var(--muted); overflow-wrap: anywhere; }
body[data-studio-admin] a, body[data-studio-admin] .badge { color: var(--verdigris); }
body[data-studio-admin] button {
  color: var(--text); background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  border-color: var(--metal-edge); box-shadow: var(--control-shadow);
}
@media (max-width: 600px) {
  .workspace-body #imageGallery, #videoLibrary { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .image-card :is(.image-preview-action, .image-project-action) { min-height: 44px; }
  .shared-gpu-queue :is(th, td) { padding: 8px; }
}
@media (forced-colors: active) {
  :is(.image-card, .job, .usage-job, .account, .storage-model-row, .empty-gallery),
  .workspace-body #imageGallery, #videoLibrary,
  .shared-gpu-queue table, .workspace .mh-projects table, body[data-studio-admin] table,
  .shared-gpu-queue th, .workspace .mh-projects th, body[data-studio-admin] th {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .image-card.selected { outline: 2px solid Highlight; outline-offset: 1px; }
  .image-card.selected::before { color: HighlightText; background: Highlight; }
  .image-card button.image-icon, body[data-studio-admin] button { color: ButtonText; background: ButtonFace; }
  .image-card .image-icon[aria-pressed=true] { color: HighlightText; background: Highlight !important; }
  body[data-studio-admin] p { color: CanvasText; }
}

/* D6: compact, native status disclosure and shared message plates. No clipped text. */
.workspace-header .status-disclosure {
  margin: 0 0 10px;
  padding: 0;
  min-width: 0;
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow);
}
.workspace-header .status-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.status-disclosure > summary::-webkit-details-marker { display: none; }
.status-disclosure #studioStatus { min-width: 0; overflow-wrap: anywhere; }
.status-info {
  flex: 0 0 20px;
  margin-left: auto;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--brass);
  border: 1px solid currentColor;
  border-radius: 50%;
}
.status-disclosure[open] .status-info { color: var(--text); background: var(--field); }
.status-disclosure .live-status { padding: 10px; border-top: 1px solid var(--line); }
.status-disclosure .status-copy { gap: 7px; font-size: 12px; overflow-wrap: anywhere; }
.status-disclosure :is(#studioDetail, #studioEstimate, .connection-heartbeat) { font-size: 12px; line-height: 1.5; }
.status-disclosure :is(#studioDetail, #studioEstimate):empty { display: none; }
.studio :is(#queueDetail, #queueEstimate, .connection-heartbeat) { overflow-wrap: anywhere; }
body:is([data-studio-state=failed], [data-studio-state=offline]) .status-disclosure { border-inline-start: 3px solid var(--error); }
body:is([data-studio-state=failed], [data-studio-state=offline]) .status-disclosure #studioStatus { color: var(--error); }
/* Existing roles and texts convey meaning; colour never replaces the message. */
.studio :is(p[role=status], p[role=alert], p.job-error):not(:empty) {
  padding: 8px 10px;
  margin-block: 8px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brass);
  border-radius: 5px;
  background: var(--field);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.studio :is(p[role=alert], p.job-error, p[data-error=true]):not(:empty) {
  color: var(--error);
  border-inline-start-color: var(--error);
}
.studio :is(p[role=status], p[role=alert], p.job-error):empty { margin: 0; padding: 0; border: 0; }
.studio .mh-draft-notice { color: var(--text); background: var(--field); border-color: var(--brass); }
@media (max-width: 600px) {
  .workspace-header .status-disclosure > summary { min-height: 44px; }
}
@media (forced-colors: active) {
  .workspace-header .status-disclosure, .status-disclosure .live-status,
  .studio :is(p[role=status], p[role=alert], p.job-error):not(:empty), .studio .mh-draft-notice {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .status-info, .status-disclosure[open] .status-info,
  body:is([data-studio-state=failed], [data-studio-state=offline]) .status-disclosure #studioStatus { color: CanvasText; background: Canvas; }
}

/* D4: API-backed lamps, SVG instruments and model glass. */
.b1-job-indicator { display:flex; align-items:center; gap:9px; min-width:0; font-size:12px; color:var(--text); }
.b1-lamp { --lamp-lit:#52645b; display:inline-block; flex:0 0 28px; width:28px; height:30px; border:2px solid var(--brass-dark); border-bottom:5px solid var(--brass-dark); border-radius:9px 9px 3px 3px; background:radial-gradient(ellipse at 35% 24%,#fff8,transparent 35%),repeating-linear-gradient(90deg,transparent 0 3px,#0002 3px 4px),var(--lamp-lit); box-shadow:inset 0 0 5px #0008,0 2px 3px var(--metal-shadow); }
body[data-b1-state=queued] .b1-lamp { --lamp-lit:#ffb347; box-shadow:inset 0 0 4px #794511,0 0 12px #ffb34766; }
body[data-b1-state=running] .b1-lamp { --lamp-lit:#de5042; box-shadow:inset 0 0 4px #6b0f17,0 0 12px #de504266; }
body[data-b1-state=succeeded] .b1-lamp { --lamp-lit:#65d992; border-radius:50% 50% 3px 3px; box-shadow:inset 0 0 4px #235f35,0 0 12px #65d99266; }
body:is([data-b1-state=failed],[data-b1-state=offline]) .b1-lamp-status { color:var(--error); }
.b1-instruments { display:flex; flex-wrap:wrap; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); margin-bottom:14px; }
.b1-meter { display:flex; align-items:center; gap:10px; margin:0; min-width:0; max-width:100%; }
.b1-meter svg { width:86px; height:86px; flex:0 0 86px; filter:drop-shadow(0 3px 3px var(--metal-shadow)); }
.b1-meter .rim { stroke:var(--brass); stroke-width:2; }
.b1-meter .face { stroke:#6e5530; stroke-width:2; }
.b1-meter .glass-gleam { fill:none; stroke:#fff6; stroke-width:2; stroke-linecap:round; }
.b1-meter .ticks { fill:none; stroke:#4b3821; stroke-width:1.5; }
.b1-meter .needle { stroke:#6b0f17; stroke-width:3; stroke-linecap:round; transform-origin:50px 50px; transition:transform .45s ease-out; }
.b1-meter .hub { fill:#6b0f17; stroke:#6e5530; stroke-width:1; }
.b1-meter figcaption,.b1-vial figcaption { display:flex; flex-direction:column; gap:4px; min-width:0; overflow-wrap:anywhere; color:var(--text); font-size:12px; }
.b1-reading { font-variant-numeric:tabular-nums; }
.b1-scale,.b1-vial small { color:var(--muted); font-size:11px; }
#accountUsage .b1-meter { margin:14px 0; }
.b1-vials { display:flex; flex-wrap:wrap; gap:18px; margin:14px 0; }
.b1-vials:empty { display:none; }
.b1-vial { width:108px; margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.b1-glass { width:54px; height:112px; position:relative; overflow:hidden; border-radius:24px 24px 8px 8px; border:2px solid var(--line); border-top:8px solid var(--brass-dark); border-bottom:10px solid var(--brass-dark); background:linear-gradient(90deg,#d9eee52e,#d9eee507 30%,#d9eee518 70%,#d9eee54d); box-shadow:inset 0 0 0 1px #d9eee538,0 4px 6px var(--metal-shadow); }
.b1-glass:after { content:''; position:absolute; inset:8px auto 8px 7px; width:5px; border-radius:5px; background:#fff4; }
.b1-liquid { position:absolute; left:0; right:0; bottom:0; height:48%; background:linear-gradient(0deg,#6b0f17,#9a2530d9); border-top:2px solid #ffb1a966; }
.b1-vial[data-loaded=true] .b1-glass { border-color:var(--brass); box-shadow:inset 0 0 0 1px #ffb34755,0 0 12px #ffb34726; }
.b1-bubble { display:none; position:absolute; bottom:4px; left:15px; width:6px; height:6px; border:1px solid #ffd0c4; border-radius:50%; }
.b1-vial[data-running=true] .b1-bubble { display:block; animation:b1-bubble-rise 2.6s ease-in infinite; }
.b1-bubble:nth-child(3) { left:30px; animation-delay:-.9s!important; }
.b1-bubble:nth-child(4) { left:23px; width:4px; height:4px; animation-delay:-1.8s!important; }
@keyframes b1-bubble-rise { from { transform:translateY(0); opacity:0; } 20% { opacity:1; } to { transform:translateY(-62px); opacity:0; } }
@media(max-width:600px) { .b1-instruments { gap:14px; } .b1-meter svg { width:70px; height:70px; flex-basis:70px; } .b1-vials { gap:12px; } .b1-vial { width:88px; } .b1-job-indicator { margin-block:5px; } }
@media(prefers-reduced-motion:reduce) { .b1-meter .needle { transition:none; } .b1-vial .b1-bubble { animation:none!important; display:none!important; } }
@media(forced-colors:active) { .b1-lamp,.b1-glass { display:none; } .b1-meter svg { filter:none; } .b1-meter .glass-gleam { display:none; } .b1-meter .rim,.b1-meter .face { fill:Canvas; stroke:CanvasText; } .b1-meter .ticks,.b1-meter .needle { stroke:CanvasText; } .b1-meter .hub { fill:CanvasText; } }

/* D7: engraved navigation rail, compact account bar and wrapping phone menu. */
.navigation { gap: 18px; }
.navigation nav { gap: 6px; }
.navigation .nav-button {
  min-width: 0;
  min-height: 46px;
  margin: 0;
  font-family: var(--font-plate);
  font-size: 20px;
  line-height: 1.2;
  color: var(--paper);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow);
  overflow-wrap: anywhere;
  transition: background-color .14s, border-color .14s;
}
.navigation .nav-button > .ph-duotone { flex: 0 0 auto; font-size: 22px; color: var(--brass); }
.navigation .nav-button:hover { background: var(--hover); border-color: var(--brass); }
.navigation .nav-button.active {
  color: var(--control-selected-text);
  background: linear-gradient(180deg, var(--control-selected-top), var(--control-selected-bottom));
  border: 1px solid var(--verdigris);
  padding-left: 10px;
  box-shadow: inset 3px 0 var(--verdigris), inset 0 1px var(--metal-highlight), 0 2px 4px var(--metal-shadow);
}
.navigation .nav-button.active > .ph-duotone { color: var(--control-selected-text); }
.navigation .nav-count:not([hidden]) {
  max-width: 100%; margin: 2px 0 0; font-family: var(--font-body); font-size: 11px;
  color: var(--text); background: var(--field); border: 1px solid var(--metal-edge);
  white-space: normal; overflow-wrap: anywhere;
}
.sidebar-models, .sidebar-bottom { border-color: var(--metal-edge); padding-top: 12px; }
.navigation .theme-switch { color: var(--text); min-height: 44px; }
.brand-title { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 6px; }
.brand-title > .ph-duotone { font-size: 24px; }
.brand-title .indicator { margin: 0; }
.brand-title h1 { white-space: normal; min-width: 0; font-size: 26px; }
.brand p { color: var(--brass); margin-left: 0; }
.studio-account { gap: 6px 12px; padding: 6px 16px; color: var(--text); }
.studio-account #sessionName { flex: 0 1 auto; max-width: 40%; line-height: 1.4; }
.studio-account a { color: var(--verdigris); text-underline-offset: 3px; padding-block: 7px; }
.studio-account button { min-height: 32px; }
@media (max-width: 600px) {
  .navigation { padding: 12px; }
  .navigation nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-block: 12px; }
  .navigation nav .nav-button {
    width: 100%; min-width: 0; min-height: 68px; padding: 8px 4px;
    font-size: 17px; text-align: center; justify-content: center; flex-direction: column;
  }
  .navigation nav .nav-button.active { padding-left: 4px; box-shadow: inset 0 -3px var(--verdigris), inset 0 1px var(--metal-highlight); }
  .sidebar-models { display: block; }
  .sidebar-models .model-picker { gap: 6px; }
  .sidebar-models .model-picker button { min-width: 0; min-height: 44px; white-space: normal; }
  .sidebar-bottom { align-items: center; margin-top: 8px; gap: 6px; }
  .sidebar-bottom #modelStorage { min-width: 0; }
  .sidebar-bottom #modelStorage summary { min-height: 44px; }
  .sidebar-bottom .theme-switch { margin-left: auto; width: auto; padding: 8px; }
  .theme-switch span { display: inline; }
  .studio-account { padding: 6px 12px; gap: 4px 10px; }
  .studio-account #sessionName { max-width: 100%; margin-left: 0; flex: 1 1 100%; }
  .studio-account button, .studio-account a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (forced-colors: active) {
  .navigation .nav-button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .navigation .nav-button > .ph-duotone, .navigation .nav-button.active > .ph-duotone { color: ButtonText; }
  .navigation .nav-button.active { color: ButtonText; background: ButtonFace; border-color: Highlight; outline: 2px solid Highlight; outline-offset: -4px; box-shadow: none; }
  .studio-account a { color: LinkText; }
}
/* Keep the selected modifier legible also while the pointer rests on it. */
#photoExpand[aria-pressed=true]:hover:not(:disabled) {
  color: var(--text);
  background: var(--purple-bg);
  filter: none;
}
.studio-account a { opacity: 1; }

/* D8: the video workbench. Existing mode/source controls and API state remain
   authoritative; all surfaces reuse the shared materials without extra assets. */
#videoCreation .workflow-tabs { gap: 5px; padding: 5px; }
#videoCreation .workflow-tabs button {
  padding: 10px 6px; min-height: 72px; white-space: normal;
  font-family: var(--font-plate); font-size: 17px; line-height: 1.2;
}
#videoCreation .workflow-tabs button span { overflow-wrap: anywhere; }
#videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) {
  padding: 10px 12px; margin-block: 12px;
  border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -1px var(--metal-shadow);
}
#videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) > summary {
  color: var(--paper); font-family: var(--font-plate); font-size: 18px;
  min-height: 28px; line-height: 1.4; overflow-wrap: anywhere;
}
#videoCreation .generation-settings {
  padding: 12px; gap: 8px; background: var(--field);
  border-color: var(--metal-edge); box-shadow: inset 0 2px 5px var(--metal-shadow);
}
#videoCreation .generation-settings :is(#h3Settings, #ltxSettings, #ltxDialogueControls) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1.25fr);
  align-items: center; gap: 8px 12px;
}
#videoCreation .generation-settings :is(#h3Settings, #ltxSettings, #ltxDialogueControls)[hidden] { display: none; }
#videoCreation .generation-settings :is(p, textarea) { grid-column: 1 / -1; margin: 0; }
#videoCreation .generation-settings #ltxDialogueControls > label:first-child { grid-column: 1 / -1; }
#videoCreation :is(#h3ReferenceControls, #ltxFirstControls, #ltxEndControls, #ltxAudioControls, .source) {
  padding: 12px; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); overflow-wrap: anywhere;
}
#videoCreation :is(#h3ReferenceControls, #ltxEndControls, #ltxAudioControls) > :is(label, select) {
  display: block; width: 100%; margin-block: 8px;
}
#videoCreation #ltxAudioControls > label:has(input[type=checkbox]) {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
}
#videoCreation #ltxAudioControls input[type=checkbox] { flex: none; }
#videoCreation :is(#sourcePreview, #ltxEndPreview) {
  max-height: 180px; width: auto; max-width: 100%;
  border: 1px solid var(--metal-edge); padding: 4px; background: var(--field);
}
#videoCreation .h3-reference-previews figure { margin: 6px 0; }
#videoCreation .h3-reference-previews figcaption { color: var(--paper); font-size: 12px; }
#videoCreation .prompt-editors { gap: 12px; }
#videoCreation .prompt-editors > div { padding: 12px; }
#videoCreation .field-title { font-family: var(--font-plate); font-size: 20px; font-weight: 500; color: var(--paper); }
#videoCreation .editor-heading { flex-wrap: wrap; gap: 6px; }
#videoCreation .additions-heading { flex-wrap: wrap; gap: 6px; }
#videoCreation .hint { line-height: 1.6; overflow-wrap: anywhere; }
#videoCreation .video-seed-row { padding-block: 8px; }
#videoCreation .output-actions {
  gap: 12px; padding: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius); background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); align-items: end;
}
@media (min-width: 901px) {
  #videoCreation > .output-actions {
    padding: 12px; margin-block: 8px 12px;
    background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  }
  #videoCreation .video-form-scroll { padding: 3px 8px 5px 3px; }
}
@media (max-width: 600px) {
  #videoCreation .workflow-tabs { flex-wrap: wrap; }
  #videoCreation .workflow-tabs button { flex: 1 1 28%; min-height: 68px; font-size: 17px; }
  #videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) > summary { min-height: 44px; }
  #videoCreation .generation-settings :is(#h3Settings, #ltxSettings, #ltxDialogueControls) { grid-template-columns: minmax(0, 1fr); }
  #videoCreation .prompt-editors > div { padding: 10px; }
  #videoCreation .output-actions { margin-block: 12px; }
  #videoCreation :is(#ltxUploadFirst, #ltxReloadAudio, #ltxMoreAudio, #batchAdd) { min-height: 44px; white-space: normal; }
}
@media (forced-colors: active) {
  #videoCreation :is(.generation-settings, .generation-details, #wanControls, #promptBatch, .generation-notes,
    #h3ReferenceControls, #ltxFirstControls, #ltxEndControls, #ltxAudioControls, .source, .output-actions) {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
  }
}

/* D9: photo workbench, using the existing native controls and shared materials. */
/* Only show the keyboard shortcut while it actually has focus. */
.skip-link:not(:focus) { clip-path: inset(50%); }
#photoCreation { gap: 12px; }
#photoCreation > details,
#photoCreation #photoLorasPanel,
#photoCreation #photoAutoProcessing,
#photoCreation .photo-submit-row {
  min-width: 0; padding: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); overflow-wrap: anywhere;
}
#photoCreation details > summary {
  min-height: 44px; align-content: center; cursor: pointer;
  font-family: var(--font-plate); font-size: 20px; color: var(--paper);
}
#photoCreation details[open] > summary { margin-bottom: 10px; }
#photoCreation .photo-editors { gap: 12px; }
#photoCreation .photo-editors > div { padding: 12px; }
#photoCreation .field-title {
  font-family: var(--font-plate); font-size: 20px; font-weight: 500; color: var(--paper);
}
#photoCreation .editor-heading { flex-wrap: wrap; gap: 6px; }
#photoCreation :is(.photo-settings-grid, .photo-style-grid) { gap: 12px; margin-block: 12px; }
#photoCreation :is(.photo-settings-grid, .photo-style-grid) label { color: var(--paper); line-height: 1.5; }
#photoCreation .photo-actions { gap: 10px; }
#photoCreation .hint { line-height: 1.6; overflow-wrap: anywhere; }
#photoCreation .photo-style-entry { gap: 8px; }
#photoCreation .photo-style-entry input { width: 0; }
#photoCreation .photo-style-save.job-action { flex: 0 0 44px; width: 44px; min-height: 44px; }
#photoCreation .photo-loras { display: grid; gap: 8px; }
#photoCreation .photo-lora {
  padding: 10px; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: var(--field); gap: 10px;
}
#photoCreation .photo-lora label { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
#photoCreation .photo-lora input[type=checkbox] { flex: none; }
#photoCreation .photo-lora input[type=number] { width: 78px; }
#photoCreation .photo-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
#photoCreation :is(#photoDenoiseRow, #photoNegativeRow, #photoSkinDenoiseRow):not([hidden]) {
  display: block; margin-block: 10px; color: var(--paper); line-height: 1.5;
}
#photoCreation :is(#photoDenoiseRow, #photoNegativeRow, #photoSkinDenoiseRow) > :is(input, textarea) {
  display: block; width: 100%; margin-top: 6px;
}
#photoCreation #photoAutoProcessing legend { color: var(--paper); font-family: var(--font-plate); font-size: 18px; }
#photoCreation :is(#photoFaceFields, #photoReactorSettings, #photoPulidSettings) {
  min-width: 0; padding: 10px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius); background: var(--field);
}
#photoCreation .photo-face-previews figure { width: 112px; }
#photoCreation .photo-face-previews img {
  width: 112px; height: 112px; object-fit: contain; padding: 4px;
  border-color: var(--metal-edge); border-radius: var(--plate-radius); box-shadow: var(--plate-shadow);
}
#photoCreation .photo-face-previews figcaption { color: var(--paper); line-height: 1.5; font-size: 12px; }
#photoCreation .photo-submit-row { gap: 12px; margin-block: 8px; }
#photoTemplateDialog {
  border-color: var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); overflow-wrap: anywhere;
}
#photoTemplateDialog h2 { color: var(--paper); }
#photoTemplateDialog label { color: var(--paper); line-height: 1.5; }
#photoTemplateDialog .photo-actions { gap: 10px; }
@media (min-width: 901px) {
  #photoCreation { padding: 3px 8px 5px 3px; }
}
@media (max-width: 600px) {
  #photoCreation :is(.photo-settings-grid, .photo-style-grid) { grid-template-columns: minmax(0, 1fr); }
  #photoCreation .photo-editors > div { padding: 10px; }
  #photoCreation .photo-actions label { margin-left: 0; }
  #photoCreation .photo-lora label { min-width: 0; flex-basis: 100%; }
  #photoCreation .photo-lora .job-action { min-height: 44px; white-space: normal; }
  #photoCreation #photoQueueStatus { min-width: 0; flex-basis: 100%; }
  #photoTemplateDialog { padding: 12px; }
  #photoTemplateDialog .photo-actions button { width: 100%; min-height: 44px; }
}
@media (forced-colors: active) {
  #photoCreation > details, #photoCreation :is(#photoLorasPanel, #photoAutoProcessing, .photo-lora,
    #photoFaceFields, #photoReactorSettings, #photoPulidSettings, .photo-submit-row), #photoTemplateDialog {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
  }
}

/* D10: collection controls, full-size inspection and result selection trays. */
/* E10 G2: a single empty result plate; controls return with real catalog data. */
.workspace-body #imageGallery:empty, #videoLibrary:empty { display: none; }
:is(#imageGalleryStatus,#videoLibraryStatus)[data-library-state=empty],
:is(#imageGalleryStatus,#videoLibraryStatus)[data-library-state=search] {
  min-height: 128px; display: grid; place-content: center; text-align: center;
  padding: 24px; margin-block: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius); background: var(--field); color: var(--text);
  box-shadow: inset 0 2px 6px var(--metal-shadow); font: 500 21px/1.5 var(--font-plate);
}
.library-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block: 12px; }
.library-empty-actions .job-action { min-height: 44px; margin: 0; }
:is(#imageDeleteStatus,#videoLibraryStatus):empty { display: none; }
@media (forced-colors: active) {
  :is(#imageGalleryStatus,#videoLibraryStatus)[data-library-state] { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
}
.workspace-body [data-page=gallery] { gap: 12px; }
.gallery-toolbar,
[data-page=gallery] .image-search,
#imageDeleteControls,
[data-page=gallery] .image-pagination,
#imageDetails,
.photo-variant-group {
  min-width: 0; padding: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); color: var(--text);
}
.gallery-toolbar { flex-wrap: wrap; margin: 0; gap: 10px; }
.gallery-toolbar .small-tabs { flex: 1 1 220px; min-width: 0; }
.gallery-toolbar #imageCollection { flex: 1 1 200px; min-width: 0; }
.gallery-toolbar #imageScope { width: 100%; max-width: none; margin: 0; }
[data-page=gallery] .image-search { gap: 10px; margin-block: 10px; align-items: center; }
[data-page=gallery] .image-search label { color: var(--paper); font-family: var(--font-plate); font-size: 19px; }
[data-page=gallery] .image-search input { min-width: 0; flex: 1 1 180px; margin: 0; }
[data-page=gallery] .image-search .job-action,
#imageDeleteControls .job-action,
[data-page=gallery] .image-pagination .job-action { margin: 0; min-height: 40px; }
#imageDeleteControls { align-items: center; gap: 10px; margin-block: 10px; }
#imageDeleteCount { flex: 1 1 160px; font-variant-numeric: tabular-nums; }
[data-page=gallery] .image-pagination { gap: 10px !important; margin-block: 12px !important; }
[data-page=gallery] .image-pagination .hint { flex: 1 1 160px; text-align: center; font-size: 12px; line-height: 1.6; }
#imagesView :is(.hint, details), #videosView :is(.hint, label) { line-height: 1.6; overflow-wrap: anywhere; }
.image-card .image-delete-choice {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--metal-edge);
  font-size: 12px; color: var(--paper); min-height: 36px;
}
.image-card:has(.collect-image[aria-pressed=true]) > img { border-bottom-color: var(--verdigris); }
#imageDetails { padding: 16px; }
.image-details-head { align-items: start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--metal-edge); }
.image-details-head h3 { min-width: 0; color: var(--paper); font-family: var(--font-plate); font-size: 26px; font-weight: 500; line-height: 1.3; }
.image-details-head .job-action { flex: none; margin: 0; }
.image-details-controls { gap: 8px; margin-block: 12px; }
.image-details-controls .job-action { min-width: 40px; min-height: 40px; }
.image-details-controls .hint { color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.image-details-stage {
  background: var(--field); border: 1px solid var(--metal-edge);
  box-shadow: inset 0 3px 9px var(--metal-shadow); border-radius: 8px;
}
#imageDetailsMetadata { padding-top: 12px; }
#imageDetailsMetadata p { font-size: 13px; line-height: 1.6; }
#imageDetailsSettingsSection { margin-top: 12px; padding: 12px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 8px; }
#imageDetailsSettingsSection summary { color: var(--paper); font-family: var(--font-plate); font-size: 20px; min-height: 40px; align-content: center; cursor: pointer; }
#imageDetailsAllSettings { color: var(--text); font-size: 13px; line-height: 1.6; margin-block: 10px; }
.image-details-actions { gap: 10px; }
.image-details-actions .job-action { margin: 10px 0 0; white-space: normal; }
#videosView .panel { min-width: 0; background: linear-gradient(180deg, var(--oxide-700), var(--panel)); box-shadow: var(--plate-shadow); }
#videoUploadRow > label { display: block; min-width: 0; max-width: 100%; }
#videoUploadRow input[type=file] { display: block; width: 100%; min-width: 0; }
#videoPanel #closeVideo { float: none; min-height: 40px; margin: 0 0 10px; }
#videoPanel h1, #videosView .panel > h1, .photo-variant-group h4 { color: var(--paper); font-family: var(--font-plate); font-size: 24px; font-weight: 500; }
.photo-variant-choices { gap: 12px; }
.photo-variant-choice { min-width: 0; padding: 10px; border-color: var(--metal-edge); background: var(--field); }
.photo-variant-choice > img { object-fit: contain; background: var(--field); border-radius: 6px; }
.photo-variant-choice > a { display: inline-block; margin: 8px 8px 8px 0; line-height: 1.6; }
.photo-variant-choice label { display: flex; align-items: center; gap: 8px; min-height: 40px; line-height: 1.6; overflow-wrap: anywhere; color: var(--paper); }
.photo-variant-choice:has(input:checked) { border-color: var(--verdigris); box-shadow: inset 3px 0 var(--verdigris); }
.photo-variant-review .row { gap: 10px; }
@media (max-width: 600px) {
  .gallery-toolbar { padding: 10px; }
  .gallery-toolbar :is(.small-tabs, #imageCollection) { flex-basis: 100%; }
  [data-page=gallery] .image-search { display: flex; flex-wrap: wrap; padding: 10px; }
  [data-page=gallery] .image-search label { flex-basis: 100%; }
  [data-page=gallery] .image-search input { flex-basis: 100%; }
  [data-page=gallery] .image-search .job-action { flex: 1; }
  #imageDeleteControls { padding: 10px; }
  #imageDeleteControls > * { flex: 1 1 100%; margin: 0; }
  [data-page=gallery] .image-pagination { padding: 10px; flex-wrap: wrap; }
  [data-page=gallery] .image-pagination .hint { order: -1; flex-basis: 100%; }
  [data-page=gallery] .image-pagination .job-action { flex: 1; min-width: 0; white-space: normal; }
  #imageDetails { padding: 12px; }
  .image-details-head h3 { font-size: 23px; }
  .image-details-head .job-action { padding-inline: 8px; }
  .image-details-controls .job-action { min-width: 44px; min-height: 44px; }
  .image-details-actions .job-action { width: 100%; min-height: 44px; }
  .photo-variant-choices { grid-template-columns: minmax(0, 1fr); }
  .photo-variant-review .job-action { min-height: 44px; white-space: normal; }
}
@media (forced-colors: active) {
  .gallery-toolbar, [data-page=gallery] :is(.image-search, .image-pagination), #imageDeleteControls,
  #imageDetails, .image-details-stage, #imageDetailsSettingsSection,
  #videosView .panel, .photo-variant-group, .photo-variant-choice {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .image-details-head h3, #imageDetailsSettingsSection summary, #imageDetailsAllSettings,
  .image-card .image-delete-choice, .photo-variant-choice label,
  #videosView .panel > h1, .photo-variant-group h4 { color: CanvasText; }
  .photo-variant-choice:has(input:checked) { outline: 2px solid Highlight; outline-offset: 1px; }
}

/* D11: queue instrument bench and private history. Existing API captions,
   counts, disclosures and actions remain the source of truth. */
[data-page=queue] > .panel { min-width: 0; padding: 16px; }
[data-page=queue] > .panel > h1 {
  font-family: var(--font-plate); font-size: 27px; font-weight: 500; color: var(--paper);
}
[data-page=queue] :is(#queueStatus, #queueCounts) {
  padding: 10px 12px; margin-block: 10px; border: 1px solid var(--metal-edge);
  border-radius: 6px; color: var(--text); background: var(--field);
  box-shadow: inset 0 2px 4px var(--metal-shadow); line-height: 1.6; overflow-wrap: anywhere;
}
[data-page=queue] #queueStatus { font: 500 23px/1.4 var(--font-plate); color: var(--paper); }
.shared-gpu-queue {
  min-width: 0; margin-block: 16px; padding: 14px; border: 1px solid var(--metal-edge);
  border-radius: 8px; background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow);
}
.shared-gpu-queue h2 { margin-block: 18px 10px; font: 500 23px/1.3 var(--font-plate); color: var(--paper); }
.shared-gpu-queue .b1-instruments { gap: 14px 24px; margin-bottom: 12px; padding: 0 0 14px; }
.shared-gpu-queue .b1-meter { flex: 1 1 200px; }
.shared-gpu-queue .b1-meter figcaption > strong { color: var(--paper); font: 500 20px/1.3 var(--font-plate); }
.shared-gpu-queue .b1-reading { font-size: 15px; line-height: 1.5; }
.shared-gpu-queue .b1-vials {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  gap: 14px; padding: 14px; background: var(--tray); border: 1px solid var(--metal-edge);
  border-radius: 7px; box-shadow: inset 0 3px 8px var(--metal-shadow);
}
.shared-gpu-queue .b1-vials:empty { display: none; }
.shared-gpu-queue .b1-vial { width: auto; min-width: 0; gap: 10px; }
.shared-gpu-queue .b1-vial figcaption { width: 100%; line-height: 1.5; }
.shared-gpu-queue .b1-vial figcaption > strong { color: var(--paper); font: 500 19px/1.3 var(--font-plate); }
.shared-gpu-queue .b1-glass {
  height: 140px; width: 60px; border-radius: 28px 28px 9px 9px;
  border-top: 9px solid var(--brass-dark); border-bottom: 12px solid var(--brass-dark);
  background: linear-gradient(90deg, #d9eee550, #d9eee507 30%, #d9eee518 70%, #d9eee560);
  box-shadow: inset 0 0 0 1px #d9eee550, inset -5px 0 8px #0003, 0 5px 8px var(--metal-shadow);
}
.shared-gpu-queue .b1-liquid { left: 3px; right: 3px; bottom: 2px; border-radius: 0 0 4px 4px; }
.shared-gpu-queue .b1-vial[data-loaded=true] .b1-glass {
  border-color: var(--brass); box-shadow: inset 0 0 0 1px #ffb34766, 0 0 12px #ffb34726, 0 5px 8px var(--metal-shadow);
}
.shared-gpu-queue table { width: 100%; margin-block: 12px; }
.shared-gpu-queue :is(th, td) { overflow-wrap: anywhere; }
[data-page=queue] #jobs { gap: 12px; margin-top: 16px; }
[data-page=queue] #jobs > .job {
  padding: 12px; margin: 0; border: 1px solid var(--metal-edge); border-radius: 7px;
  box-shadow: inset 0 1px var(--metal-highlight), 0 3px 6px var(--metal-shadow);
}
[data-page=queue] #jobs > .queue-job { padding: 0; overflow: visible; }
[data-page=queue] #jobs > .queue-job > summary {
  padding: 12px; margin: 0; border: 0; border-radius: 6px; line-height: 1.6;
  font: 500 19px/1.6 var(--font-plate); color: var(--paper);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
}
[data-page=queue] #jobs > .queue-job > .job-summary > strong { color: var(--paper); font: 500 21px/1.4 var(--font-plate); }
[data-page=queue] #jobs .personal-queue-info {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--metal-edge); line-height: 1.6;
  font-family: var(--font-body); font-size: 12px;
}
[data-page=queue] #jobs > .queue-job[open] { padding-bottom: 12px; border: 1px solid var(--metal-edge); }
[data-page=queue] #jobs > .queue-job[open] > summary { border-bottom: 1px solid var(--metal-edge); border-radius: 6px 6px 0 0; }
[data-page=queue] #jobs > .queue-job > :is(p, details) { margin: 12px; }
[data-page=queue] #jobs > .queue-job > .job-action { margin: 0 0 8px 12px; max-width: calc(100% - 24px); white-space: normal; }
[data-page=queue] #jobs > p { padding: 14px; color: var(--muted); line-height: 1.6; }
@media (max-width: 600px) {
  [data-page=queue] > .panel, .shared-gpu-queue { padding: 10px; }
  .shared-gpu-queue .b1-meter { flex-basis: 100%; }
  .shared-gpu-queue .b1-vials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 12px 8px; }
  .shared-gpu-queue .b1-glass { height: 128px; }
  [data-page=queue] #jobs .job-action { min-height: 44px; }
  [data-page=queue] #jobs > .queue-job > .job-action { display: block; width: calc(100% - 24px); }
}
@media (forced-colors: active) {
  .shared-gpu-queue, .shared-gpu-queue .b1-vials,
  [data-page=queue] :is(#queueStatus, #queueCounts),
  [data-page=queue] #jobs > .job, [data-page=queue] #jobs > .queue-job > summary {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .shared-gpu-queue :is(h2, .b1-vial figcaption > strong, .b1-meter figcaption > strong),
  [data-page=queue] > .panel > h1, [data-page=queue] #jobs > .queue-job > .job-summary > strong { color: CanvasText; }
}

/* D12: editing bench. Higher specificity survives the lazy-loaded project CSS.
   Native timeline geometry, drag/trim hit areas and crop coordinates stay intact. */
body[data-view=tools] [data-page=tools] > :is(.mh-projects, .panel) { grid-column: 1 / -1; }
.workspace .mh-projects {
  padding: 16px; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel)); box-shadow: var(--plate-shadow);
}
.workspace .mh-projects > header {
  gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--metal-edge);
}
.workspace .mh-projects > header > div { min-width: 0; }
.workspace .mh-projects > header > .ph-duotone { color: var(--brass); }
.workspace .mh-projects h2 { font: 500 28px/1.2 var(--font-plate); color: var(--paper); }
.workspace .mh-projects .mh-bar { gap: 8px; margin-block: 12px; }
.workspace .mh-projects label { font: 12px/1.5 var(--font-body); color: var(--muted); }
.workspace .mh-projects :is(input:not([type=checkbox]), select) {
  min-height: 40px; color: var(--text); background: var(--field); border-color: var(--metal-edge);
  border-radius: 5px; font: 13px/1.5 var(--font-body);
  box-shadow: inset 0 2px 4px var(--metal-shadow), 0 1px var(--metal-highlight);
}
.workspace .mh-projects input[type=checkbox] { width: 20px; height: 20px; padding: 0; }
.workspace .mh-projects button:not(:is(.mh-clip, .mh-trim-handle, .mh-seam, .mh-crop-zone, .mh-crop-handle)) {
  min-height: 40px; max-width: 100%; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere;
  font: 500 17px/1.3 var(--font-plate); color: var(--paper); border-color: var(--metal-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px 2px var(--metal-shadow), 0 2px 4px var(--metal-shadow);
}
.workspace .mh-projects button.mh-primary { border-color: var(--brass); }
.workspace .mh-projects button:hover:not(:disabled):not(:is(.mh-crop-zone, .mh-crop-handle)) { border-color: var(--brass); }
.workspace .mh-projects button:disabled { opacity: .6; cursor: not-allowed; }
.workspace .mh-projects :is(button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.workspace .mh-projects :is(.mh-clip, .mh-trim-handle, .mh-seam):focus-visible { outline-offset: -3px; }
.workspace .mh-projects details {
  padding: 0 12px 12px; margin-top: 12px; border: 1px solid var(--metal-edge); border-radius: 7px;
  background: var(--panel); box-shadow: inset 0 1px var(--metal-highlight);
}
.workspace .mh-projects details:not([open]) { padding-bottom: 0; }
.workspace .mh-projects summary {
  margin-inline: -12px; padding: 10px 12px; color: var(--paper); font: 500 19px/1.5 var(--font-plate);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700)); border-radius: 6px;
  overflow-wrap: anywhere;
}
.workspace .mh-projects details[open] > summary { border-bottom: 1px solid var(--metal-edge); border-radius: 6px 6px 0 0; }
.workspace .mh-projects :is(.mh-summary, .mh-status, .mh-page, .hint) {
  line-height: 1.6; font-size: 12px; overflow-wrap: anywhere;
}
.workspace .mh-projects .mh-time-fields { gap: 12px; margin-block: 12px; }
.workspace .mh-projects .mh-composition-preview {
  margin-block: 16px; padding: 12px; background: var(--tray); border: 1px solid var(--metal-edge);
  border-radius: 7px; box-shadow: inset 0 2px 5px var(--metal-shadow);
}
.workspace .mh-projects .mh-composition-preview video {
  border: 1px solid var(--metal-edge); background: #0d1715; border-radius: 5px;
}
.workspace .mh-projects .mh-timeline {
  padding: 8px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px;
  box-shadow: inset 0 2px 4px var(--metal-shadow);
}
.workspace .mh-projects .mh-ruler {
  color: var(--brass); background: var(--panel); padding-inline: 4px; border-bottom: 1px solid var(--metal-edge);
  font-variant-numeric: tabular-nums;
}
.workspace .mh-projects .mh-track { border-top-color: var(--metal-edge); }
.workspace .mh-projects .mh-track-label { color: var(--brass); font: 500 15px/1.5 var(--font-plate); }
.workspace .mh-projects .mh-track-clips {
  background: repeating-linear-gradient(90deg, transparent 0 39px, var(--metal-highlight) 40px 41px), var(--panel);
}
.workspace .mh-projects button.mh-clip {
  color: var(--text); background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
  border-color: var(--metal-edge); box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow);
}
.workspace .mh-projects button.mh-clip[aria-pressed=true] { border: 2px solid var(--brass); }
.workspace .mh-projects button.mh-clip[data-primary=true] { box-shadow: inset 0 -3px var(--brass); }
.workspace .mh-projects :is(button.mh-trim-handle, button.mh-seam) { color: var(--brass); background: var(--field); }
.workspace .mh-projects :is(.mh-source-frame, .mh-source-preview) {
  padding: 8px; border: 1px solid var(--metal-edge); border-radius: 7px; background: var(--field);
  box-shadow: inset 0 2px 4px var(--metal-shadow);
}
.workspace .mh-projects .mh-source-frame-copy { overflow-wrap: anywhere; }
.workspace .mh-projects .mh-draft-notice { border-radius: 5px; border-left-color: var(--brass); }
body[data-view=tools] [data-page=tools] > .panel > details {
  padding: 0 12px 12px; margin-block: 14px; border: 1px solid var(--metal-edge); border-radius: 7px; background: var(--panel);
}
body[data-view=tools] [data-page=tools] > .panel > details:not([open]) { padding-bottom: 0; }
body[data-view=tools] [data-page=tools] > .panel > details > summary {
  margin-inline: -12px; padding: 10px 12px; color: var(--paper); font: 500 19px/1.5 var(--font-plate);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700)); border-radius: 6px;
}
body[data-view=tools] :is(#smoothSource, #smoothSourceStatus) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .workspace .mh-projects { padding: 10px; }
  .workspace .mh-projects .mh-bar { gap: 8px; }
  .workspace .mh-projects .mh-time-fields { grid-template-columns: 1fr; }
  .workspace .mh-projects :is(input:not([type=checkbox]), select) { min-height: 44px; }
  .workspace .mh-projects button:not(:is(.mh-clip, .mh-trim-handle, .mh-seam, .mh-crop-zone, .mh-crop-handle)) { min-height: 44px; }
  .workspace .mh-projects .mh-page { white-space: normal; }
  .workspace .mh-projects .mh-composition-preview { padding: 8px; }
  .workspace .mh-projects .mh-source-frame { flex-wrap: wrap; }
  .workspace .mh-projects .mh-source-frame-copy { flex: 1 1 160px; }
}
@media (forced-colors: active) {
  .workspace .mh-projects, .workspace .mh-projects :is(details, summary, .mh-composition-preview, .mh-timeline, .mh-track-clips, .mh-source-frame, .mh-source-preview),
  body[data-view=tools] [data-page=tools] > .panel > details, body[data-view=tools] [data-page=tools] > .panel > details > summary {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .workspace .mh-projects :is(button:not(.mh-crop-zone), input, select) { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .workspace .mh-projects button.mh-crop-zone { background: transparent; border-color: Highlight; box-shadow: none; }
  .workspace .mh-projects button.mh-clip[aria-pressed=true] { border-color: Highlight; }
  .workspace .mh-projects :is(button, input, select, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* D13: audio bench. Native fields, PCM player and waveform coordinates remain
   in charge; colour tokens also supply the light patina. No extra assets. */
#audioPromptPanel > h1, #audioMixPanel > h1,
[data-page=tools] > .panel:has(#audioUpload) > h1 {
  font: 500 28px/1.3 var(--font-plate); color: var(--paper); margin-block: 0 16px;
}
#audioPromptPanel h2 { font: 500 23px/1.3 var(--font-plate); color: var(--paper); }
#audioPromptPanel :is(.row, .audio-prompt-columns), #audioMixPanel .row { gap: 12px; margin-block: 12px; }
#audioPromptPanel label { line-height: 1.6; overflow-wrap: anywhere; }
#audioPromptPanel label > :is(select, input:not([type=checkbox])) { display: block; max-width: 100%; }
#audioPromptPanel label > select { width: 100%; }
#audioPromptPanel .audio-word-bank .row select { margin-left: 0; }
#audioPromptPanel input[type=number] { width: 100%; }
#audioPromptPanel :is(#speechSettings, #omniSettings, #f5Settings, #voiceReferencePanel, #sfxGeneration, #musicGeneration),
[data-page=tools] :is(#audioExportPanel, #audioExcerptPanel, .audio-wave-player, .mix-track) {
  min-width: 0; padding: 14px; margin-block: 16px; border: 1px solid var(--metal-edge); border-radius: 7px;
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px var(--metal-highlight), 0 3px 6px var(--metal-shadow);
}
#audioPromptPanel #speechSettings > details { flex-basis: 100%; }
#audioPromptPanel #omniDesign { flex-basis: 100%; }
#audioPromptPanel details {
  padding: 0 12px 12px; margin-block: 14px; min-width: 0; border: 1px solid var(--metal-edge);
  border-radius: 7px; background: var(--panel); box-shadow: inset 0 1px var(--metal-highlight);
}
#audioPromptPanel details:not([open]) { padding-bottom: 0; }
#audioPromptPanel summary {
  padding: 10px 12px; margin-inline: -12px; font: 500 19px/1.5 var(--font-plate); color: var(--paper);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700)); border-radius: 6px; overflow-wrap: anywhere;
}
#audioPromptPanel details[open] > summary { border-bottom: 1px solid var(--metal-edge); border-radius: 6px 6px 0 0; }
#audioPromptPanel .audio-prompt-columns > label { padding: 12px; border: 1px solid var(--metal-edge); border-radius: 7px; background: var(--field); }
#audioPromptPanel textarea { margin-top: 6px; }
#audioPromptPanel .audio-word-bank-items { gap: 8px; margin-top: 12px; }
#audioPromptPanel .audio-word-chip { color: var(--text); min-height: 36px; line-height: 1.5; }
#audioPromptPanel .audio-word-chip:hover { color: var(--brass); }
#audioPromptPanel .job-action, #audioMixPanel .job-action,
[data-page=tools] > .panel:has(#audioUpload) .job-action,
[data-page=tools] .audio-wave-player :is(.aw-actions button, .aw-retry) {
  max-width: 100%; min-height: 40px; white-space: normal; overflow-wrap: anywhere;
  padding: 8px 12px; color: var(--paper); font: 500 17px/1.4 var(--font-plate);
  border: 1px solid var(--metal-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow), 0 2px 4px var(--metal-shadow);
}
#audioPromptPanel :is(#speechGenerate, #sfxGenerate, #musicGenerate) { border-color: var(--brass); }
[data-page=tools] .audio-wave-player .aw-surface {
  background: var(--field); border-color: var(--metal-edge); box-shadow: inset 0 2px 5px var(--metal-shadow);
}
[data-page=tools] .audio-wave-player .aw-peaks { stroke: var(--verdigris); }
[data-page=tools] .audio-wave-player .aw-selection { fill: color-mix(in srgb, var(--brass) 15%, transparent); stroke: var(--brass); }
[data-page=tools] .audio-wave-player .aw-cursor { stroke: var(--text); }
[data-page=tools] .audio-wave-player .aw-handle {
  background: linear-gradient(90deg, transparent 10px, var(--brass) 10px, var(--brass) 14px, transparent 14px);
}
[data-page=tools] .audio-wave-player .aw-info { color: var(--brass); font-variant-numeric: tabular-nums; }
#audioPromptPanel :is(button, summary):focus-visible,
[data-page=tools] .audio-wave-player :is(button, input):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
[data-page=tools] .audio-wave-player .aw-handle:focus-visible { outline-offset: 0; }
#audioPromptPanel .hint, #audioMixPanel .hint, [data-page=tools] > .panel:has(#audioUpload) .hint { line-height: 1.6; }
#audioMixPanel .mix-track > strong { font: 500 20px/1.5 var(--font-plate); color: var(--paper); }
#audioMixPanel .mix-track label { min-width: 0; }
#audioPromptPanel :is(#vrAsrApply, #vrSave) { margin-top: 10px; }
@media (max-width: 600px) {
  #audioPromptPanel :is(#speechSettings, #omniSettings, #f5Settings, #voiceReferencePanel, #sfxGeneration, #musicGeneration),
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel, .audio-wave-player, .mix-track) { padding: 10px; }
  #audioPromptPanel .audio-prompt-columns { grid-template-columns: minmax(0, 1fr); }
  #audioPromptPanel .row > label, #audioMixPanel .mix-track .row > label { flex-basis: 100%; min-width: 0; }
  #audioPromptPanel #speechBatchOptions { width: 100%; }
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel) .row > label { flex-basis: 100%; min-width: 0; }
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel) label > :is(select, input) { display: block; width: 100%; }
  #audioPromptPanel :is(input:not([type=checkbox]), select, .job-action, .audio-word-chip),
  #audioMixPanel .job-action, [data-page=tools] > .panel:has(#audioUpload) .job-action,
  [data-page=tools] .audio-wave-player :is(.aw-actions button, .aw-retry) { min-height: 44px; }
  [data-page=tools] .audio-wave-player .aw-actions button { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  #audioPromptPanel :is(details, summary, .audio-prompt-columns > label, #speechSettings, #omniSettings, #f5Settings, #voiceReferencePanel, #sfxGeneration, #musicGeneration),
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel, .audio-wave-player, .mix-track, .audio-wave-player .aw-surface) {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  #audioPromptPanel :is(h1, h2), #audioMixPanel > h1, #audioMixPanel .mix-track > strong,
  [data-page=tools] > .panel:has(#audioUpload) > h1, [data-page=tools] .audio-wave-player .aw-info { color: CanvasText; }
  #audioPromptPanel .job-action, #audioMixPanel .job-action,
  [data-page=tools] > .panel:has(#audioUpload) .job-action, [data-page=tools] .audio-wave-player :is(.aw-actions button, .aw-retry) {
    color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none;
  }
  [data-page=tools] .audio-wave-player :is(.aw-peaks, .aw-cursor) { stroke: CanvasText; }
  [data-page=tools] .audio-wave-player .aw-selection { fill: transparent; stroke: Highlight; }
  [data-page=tools] .audio-wave-player .aw-handle { background: transparent; border-inline: 2px solid Highlight; }
}

/* D14: operator benches. All diagnostics, native actions and permission gates
   remain owned by the existing modules. No decorative usage measurements. */
[data-page=system] { --warning: var(--focus); --danger: var(--error); min-width: 0; display: grid; gap: 16px; }
[data-page=system] > .panel, body[data-studio-admin] main {
  min-width: 0; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background:
    var(--rivet-cut) 9px 9px / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) 9px / 8px 8px no-repeat,
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); padding: 20px 16px 16px; margin: 0;
  overflow-wrap: anywhere;
}
[data-page=system] > .panel > h1 { font: 500 28px/1.3 var(--font-plate); color: var(--paper); margin: 0 12px 14px; }
[data-page=system] :is(section, #cpuFileReviewRows > details, #gpuFileReviewRows > details) {
  min-width: 0; max-width: 100%; padding: 14px; margin-block: 14px;
  border: 1px solid var(--metal-edge); border-radius: 7px;
  background: var(--panel); box-shadow: inset 0 1px var(--metal-highlight);
}
[data-page=system] h2 { font: 500 24px/1.3 var(--font-plate); color: var(--brass); margin: 0 0 12px; }
[data-page=system] :is(p, #log) { line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
[data-page=system] :is(#cpuRows, #dataDiskRows, #storageUsageRows, #systemErrorRows, #providerRows) > p {
  padding: 8px 10px; margin: 5px 0; border-inline-start: 2px solid var(--brass-dark);
  background: var(--field); border-radius: 0 5px 5px 0; color: var(--muted);
}
[data-page=system] :is([role=status], #log) {
  min-width: 0; color: var(--text); background: var(--field); border: 1px solid var(--metal-edge);
  padding: 10px 12px; border-radius: 6px; box-shadow: inset 0 2px 5px var(--metal-shadow);
}
[data-page=system] [role=status]:empty { display: none; }
[data-page=system] .job-action { margin: 4px 6px 6px 0; min-height: 40px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
[data-page=system] summary, #modelStorage summary {
  min-width: 0; color: var(--paper); font: 500 20px/1.5 var(--font-plate);
  padding: 8px 10px; min-height: 40px; cursor: pointer; overflow-wrap: anywhere;
}
#modelStorage { width: 100%; }
.sidebar-bottom #modelStorage[open] { padding: 8px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 7px; }
.navigation #modelStorage > summary { color: var(--brass); font-size: 22px; }
.navigation #modelStorage .storage-model-row summary { font: 500 20px/1.5 var(--font-plate); }
#modelStorage > .hint, #modelStorageStatus { font: 12px/1.65 var(--font-body); color: var(--muted); overflow-wrap: anywhere; }
#modelStorage .storage-model-row { margin-block: 12px; padding: 12px; }
.storage-model-row > strong { display: block; color: var(--paper); font: 500 24px/1.4 var(--font-plate); }
#modelStorage .storage-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#modelStorage .job-action { margin: 0; min-width: 0; min-height: 40px; width: 100%; padding: 8px 6px; font-size: 12px; }
.storage-model-row details { background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; }
.storage-model-row details[open] { padding-bottom: 10px; }
.storage-model-row details[open] > summary { border-bottom: 1px solid var(--metal-edge); }
#modelStorage .storage-model-row details > label { display: flex; align-items: start; gap: 8px; margin: 12px 10px; font: 12px/1.6 var(--font-body); color: var(--text); }
.storage-model-row input[type=checkbox] { flex: none; margin: 2px 0 0; }
#modelStorage details .job-action { width: calc(100% - 20px); margin-inline: 10px; }
body[data-studio-admin] { color-scheme: dark; padding: 24px 16px; font: 14px/1.6 var(--font-body); }
:root[data-theme=light] body[data-studio-admin] { color-scheme: light; }
body[data-studio-admin] main { max-width: 1120px; padding: 24px; }
body[data-studio-admin] header { padding: 0 4px 16px; border-bottom: 1px solid var(--metal-edge); margin-bottom: 18px; }
body[data-studio-admin] small { color: var(--brass); letter-spacing: .1em; }
body[data-studio-admin] h1 { font: 500 36px/1.2 var(--font-plate); margin-block: 10px 16px; }
body[data-studio-admin] h2 { font: 500 26px/1.3 var(--font-plate); color: var(--paper); }
body[data-studio-admin] #sessionName { overflow-wrap: anywhere; }
body[data-studio-admin] .tools {
  padding: 14px; gap: 12px; border: 1px solid var(--metal-edge); border-radius: 7px;
  background: var(--field); box-shadow: inset 0 2px 5px var(--metal-shadow);
}
body[data-studio-admin] .tools label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body[data-studio-admin] :is(button, select) { max-width: 100%; min-height: 40px; }
body[data-studio-admin] button { white-space: normal; overflow-wrap: anywhere; }
body[data-studio-admin] select { color: var(--text); background: var(--field); border-color: var(--metal-edge); }
body[data-studio-admin] .plan-table { margin-block: 14px 24px; }
body[data-studio-admin] .plan-table table { min-width: 760px; }
body[data-studio-admin] :is(th, td) { min-width: 100px; }
body[data-studio-admin] .account { padding: 16px; }
body[data-studio-admin] .account h2 { font-size: 24px; }
body[data-studio-admin] .account .badge { padding: 6px 10px; background: var(--field); border-inline-start: 3px solid var(--verdigris); border-radius: 0 5px 5px 0; }
body[data-studio-admin] .actions { gap: 10px; padding-block: 10px; }
body[data-studio-admin] .account .plan { flex-basis: 100%; gap: 10px; }
body[data-studio-admin] .plan label { display: grid; gap: 6px; min-width: 0; flex: 1 1 240px; max-width: 100%; }
body[data-studio-admin] .plan select { width: 100%; min-width: 0; }
body[data-studio-admin] #adminMessage:not(:empty) { padding: 10px 12px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; color: var(--text); }
[data-page=system] :is(button, summary):focus-visible, #modelStorage :is(button, summary, input):focus-visible,
body[data-studio-admin] :is(button, select, input, a, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 600px) {
  [data-page=system] > .panel { padding: 20px 12px 12px; }
  [data-page=system] section { padding: 12px; }
  [data-page=system] .job-action { width: 100%; margin: 4px 0 8px; }
  [data-page=system] :is(button, summary), #modelStorage :is(button, summary) { min-height: 44px; }
  .sidebar-bottom #modelStorage[open] { flex-basis: 100%; }
  body[data-studio-admin] { padding: 12px; }
  body[data-studio-admin] main { padding: 20px 12px; }
  body[data-studio-admin] :is(button, select) { min-height: 44px; }
  body[data-studio-admin] .tools label { width: 100%; }
  body[data-studio-admin] .tools label select { flex: 1; min-width: 0; }
  body[data-studio-admin] .actions > button { width: 100%; }
  body[data-studio-admin] .account .plan { flex-direction: column; align-items: stretch; width: 100%; }
  body[data-studio-admin] .plan label { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-studio-admin] *, body[data-studio-admin] *::before, body[data-studio-admin] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  [data-page=system] :is(.panel, section, [role=status], #log, details), #modelStorage,
  #modelStorage :is(.storage-model-row, details), body[data-studio-admin] :is(main, header, .tools, .account, .badge, #adminMessage) {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  [data-page=system] :is(p, h1, h2, summary), #modelStorage :is(summary, strong, label, p),
  body[data-studio-admin] :is(h1, h2, small, p, a, select) { color: CanvasText; background: Canvas; }
  body[data-studio-admin] button { color: ButtonText; background: ButtonFace; }
  [data-page=system] :is(button, summary):focus-visible, #modelStorage :is(button, summary, input):focus-visible,
  body[data-studio-admin] :is(button, select, input, a, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* E11.6: a static laboratory showcase. Instruments are decoration, never state.
   Session text, visibility and native actions stay in auth/ui.js. */
body[data-studio-access] {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  color: var(--text);
  padding: 48px 24px;
  font-size: 15px;
  line-height: 1.55;
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--brass-rim) 18%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--verdigris) 12%, transparent), transparent 65%), var(--bg);
}
body[data-studio-access]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 12%, var(--metal-highlight) 12% calc(12% + 1px), transparent calc(12% + 1px) 88%, var(--metal-highlight) 88% calc(88% + 1px), transparent calc(88% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 95px, var(--metal-grain) 95px 96px);
}
body[data-studio-access] *, body[data-studio-access] *::before, body[data-studio-access] *::after { box-sizing: border-box; }
body[data-studio-access] main {
  position: relative;
  width: min(560px, 100%);
  min-width: 0;
  padding: 36px;
  border: 1px solid var(--brass-rim);
  border-radius: var(--plate-radius);
  background:
    var(--rivet-cut) 9px 9px / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) 9px / 8px 8px no-repeat,
    var(--rivet-cut) 9px calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    var(--rivet) 7px calc(100% - 7px) / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) calc(100% - 7px) / 12px 12px no-repeat,
    repeating-linear-gradient(100deg, transparent 0 3px, var(--metal-grain) 3px 4px),
    var(--surface-panel);
  box-shadow: var(--plate-shadow);
}
body[data-studio-access] main::before {
  content: '';
  display: block;
  height: 128px;
  margin: 0 0 24px;
  border: 1px solid var(--brass-rim);
  border-radius: 70px 70px 8px 8px;
  /* Embedded SVG: no image request, no text, no moving or invented readings. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 128'%3E%3Cdefs%3E%3CradialGradient id='a'%3E%3Cstop stop-color='%23f4c476' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23f4c476' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='240' cy='60' rx='88' ry='60' fill='url(%23a)'/%3E%3Cg stroke='%238e774c' stroke-width='3' fill='none'%3E%3Cpath d='M12 112H468M40 112V24H170M310 24H440V112M240 0V32'/%3E%3Ccircle cx='95' cy='67' r='39'/%3E%3Ccircle cx='95' cy='67' r='32' stroke='%23435443'/%3E%3Cpath d='M71 50l4 3m4-13 2 5m14-10v6m14-1-2 5m12 5-4 3' stroke='%23b89a62' stroke-width='2'/%3E%3Cpath d='M95 67l17-14' stroke='%23d5bd8b'/%3E%3Ccircle cx='95' cy='67' r='4' fill='%238e774c'/%3E%3Cpath d='M177 31v58q0 13 13 13t13-13V31m-30 0h34m-28 50h22M361 29v23l-18 35q-7 15 9 15h39q16 0 9-15l-18-35V29m-25 0h29m-39 53h49' stroke='%23778e80'/%3E%3Cpath d='M214 76q26-13 52 0l-9 8h-34z' fill='%23ae8950'/%3E%3Cpath d='M228 32h24l7 44h-38z' stroke='%23d5bd8b'/%3E%3Cpath d='M233 44h14v25h-14z' fill='%23edc782' stroke='none'/%3E%3Cpath d='M219 103h42m-36 9v-9m30 9v-9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat, #15201a;
  box-shadow: var(--recess-shadow);
}
body[data-studio-access] :is(h1, p, small, a, button) { overflow-wrap: anywhere; }
body[data-studio-access] main > small {
  display: block;
  width: fit-content;
  padding: 6px 14px;
  border: 1px solid var(--brass-rim);
  border-radius: 4px;
  background: var(--surface-plaque);
  box-shadow: var(--control-shadow);
  color: var(--brass);
  font-family: var(--font-plate);
  font-size: 15px;
  letter-spacing: .12em;
}
body[data-studio-access] h1 { margin: 20px 0 16px; font-size: 44px; line-height: 1.15; color: var(--brass); }
body[data-studio-access] p { margin: 16px 0; color: var(--muted); }
body[data-studio-access] small { color: var(--muted); font-size: 13px; }
body[data-studio-access] #sessionStatus {
  padding: 14px 16px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--brass-rim);
  border-inline-start: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
  box-shadow: inset 0 2px 5px var(--metal-shadow);
}
body[data-studio-access] #sessionName { color: var(--text); }
body[data-studio-access] #sessionName:empty { display: none; }
body[data-studio-access] a { display: inline-block; color: var(--verdigris); text-underline-offset: .2em; padding-block: 10px; }
body[data-studio-access] button {
  min-height: 48px;
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  box-shadow: var(--control-shadow);
  text-shadow: 0 1px var(--metal-shadow);
  line-height: 1.4;
  transition: border-color .14s, box-shadow .14s, transform .08s;
}
body[data-studio-access] button:hover:not(:disabled) { background: linear-gradient(180deg, var(--control-hover-top), var(--control-bottom)); border-color: var(--brass); }
body[data-studio-access] button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--metal-shadow); }
body[data-studio-access] button:disabled { opacity: 1; color: var(--muted); background: var(--field); cursor: wait; }
body[data-studio-access] #sessionPrivate a {
  display: block;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--brass-rim);
  border-radius: 6px;
  background: var(--surface-control);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--control-shadow);
}
body[data-studio-access] #sessionPrivate #sessionLogout {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  text-shadow: none;
}
/* Reserve the existing pending-state slots before its session response arrives.
   Long names/errors can still grow: no fixed height or clipped live content. */
body[data-studio-access=waiting] main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 128px auto auto auto minmax(1.55em, auto) minmax(48px, auto);
  gap: 16px;
}
body[data-studio-access=waiting] main::before { grid-row: 1; margin: 0; }
body[data-studio-access=waiting] main > small { grid-row: 2; }
body[data-studio-access=waiting] h1 { grid-row: 3; margin: 0; }
body[data-studio-access=waiting] #sessionStatus { grid-row: 4; margin: 0; min-height: calc(3 * 1.55em + 30px); }
body[data-studio-access=waiting] #sessionName { grid-row: 5; margin: 0; }
body[data-studio-access=waiting] #sessionName:empty { display: block; }
body[data-studio-access=waiting] :is(#sessionLogin, #sessionLogout) { grid-row: 6; grid-column: 1; }
body[data-studio-access] :is(a, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 600px) {
  body[data-studio-access] { padding: 28px 16px; }
  body[data-studio-access] main { padding: 28px 20px; }
  body[data-studio-access] main::before { height: 104px; margin-bottom: 20px; }
  body[data-studio-access=waiting] main { grid-template-rows: 104px auto auto auto minmax(1.55em, auto) minmax(48px, auto); }
  body[data-studio-access=waiting] main::before { margin: 0; }
  body[data-studio-access] h1 { font-size: 36px; }
  body[data-studio-access] #sessionStatus { padding: 12px; }
}
@media (max-width: 360px) {
  body[data-studio-access=waiting] #sessionStatus { min-height: calc(4 * 1.55em + 26px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-studio-access] *, body[data-studio-access] *::before, body[data-studio-access] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  body[data-studio-access]::before, body[data-studio-access] main::before { display: none; }
  body[data-studio-access=waiting] main { display: block; }
  body[data-studio-access], body[data-studio-access] :is(main, #sessionStatus) { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  body[data-studio-access] main > small { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  body[data-studio-access] :is(h1, p, small) { color: CanvasText; text-shadow: none; }
  body[data-studio-access] a { color: LinkText; }
  body[data-studio-access] #sessionPrivate a { color: LinkText; background: Canvas; border-color: LinkText; box-shadow: none; }
  body[data-studio-access] #sessionPrivate #sessionLogout { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  body[data-studio-access] button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; text-shadow: none; }
  body[data-studio-access] button:disabled { color: GrayText; }
  body[data-studio-access] :is(a, button):focus-visible { outline-color: Highlight; }
}

/* D16: credit desks. Exact values and accounting stay in the existing scripts. */
/* Credit details occupy a row above the studio, not a fourth desktop column. */
body[data-studio-server] #sessionPrivate { flex-direction: column; }
#accountUsage.account-usage {
  margin: 12px 20px;
  padding: 18px;
  min-width: 0;
  border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
}
#accountUsage > summary {
  padding: 6px 0;
  color: var(--brass);
  font: 500 25px/1.35 var(--font-plate);
  overflow-wrap: anywhere;
}
#accountUsage[open] > summary { padding-bottom: 14px; border-bottom: 1px solid var(--metal-edge); }
/* E10 G1: a closed ledger is one compact, accessible row. */
#accountUsage.account-usage:not([open]) { margin-block: 6px; padding: 4px 14px; }
#accountUsage:not([open]) > summary { min-height: 44px; padding: 7px 0; font-size: 22px; }
.studio-help { margin-block: 8px; color: var(--muted); font: 12px/1.6 var(--font-body); }
.studio-help > summary { min-height: 44px; padding-block: 12px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.studio-help > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.studio-help > p { margin-block: 8px; }
#photoCreation details.studio-help { margin-block: 4px; padding: 0; border: 0; background: none; box-shadow: none; }
#photoCreation details.studio-help > summary { padding-block: 8px; font: 12px/1.6 var(--font-body); color: var(--text); }
#photoCreation details.studio-help[open] > summary { margin-bottom: 0; }
@media (forced-colors: active) {
  .studio-help, .studio-help > summary { color: CanvasText; }
  .studio-help > summary:focus-visible { outline-color: Highlight; }
}
@media (min-width: 901px) {
  #accountUsage.account-usage { flex: none; max-height: 45dvh; overflow-y: auto; }
}
:is(#usageBalance, #adminUsageBalance, #billingBalance) {
  padding: 14px 16px;
  border: 1px solid var(--metal-edge);
  border-inline-start: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
  color: var(--text);
  background: var(--field);
  box-shadow: inset 0 2px 5px var(--metal-shadow);
  font-size: 14px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#usageJobs, #adminUsageJobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 18px; }
:is(#accountUsage, #adminUsage) .usage-job { padding: 16px; }
:is(#accountUsage, #adminUsage) .usage-job > strong { display: block; color: var(--paper); font: 500 22px/1.4 var(--font-plate); }
:is(#accountUsage, #adminUsage) .usage-job :is(p, small) { color: var(--muted); font: 12px/1.75 var(--font-body); font-variant-numeric: tabular-nums; }
:is(#accountUsage, #adminUsage) .usage-job > div:not(:empty) { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--metal-edge); }
:is(#accountUsage, #adminUsage, #adminBilling) :is(p, small, strong, h2, h3, label, button) { overflow-wrap: anywhere; }
body[data-studio-admin] :is(#adminUsage, #adminBilling) {
  min-width: 0;
  padding: 20px;
  margin-block: 24px;
  border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius);
  color: var(--text);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow);
}
body[data-studio-admin] :is(#adminUsage, #adminBilling) h2 { margin-block: 0 16px; }
body[data-studio-admin] :is(#adminUsageBasis, #billingQuote) { padding: 12px; color: var(--muted); background: var(--field); border-radius: 6px; font-size: 12px; line-height: 1.75; }
body[data-studio-admin] #billingUser { color: var(--brass); overflow-wrap: anywhere; }
body[data-studio-admin] .billing-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 18px; }
body[data-studio-admin] .billing-form label { color: var(--muted); gap: 8px; font-size: 13px; }
body[data-studio-admin] .billing-form :is(input, select) {
  min-height: 44px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 5px var(--metal-shadow);
  font: 14px/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
}
body[data-studio-admin] .billing-form input::placeholder { color: var(--muted); opacity: 1; }
body[data-studio-admin] #creditTopup { padding: 16px; margin-block: 24px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 7px; }
body[data-studio-admin] #creditTopup h3 { margin: 0 0 12px; color: var(--brass); font-size: 24px; }
body[data-studio-admin] #billingMessage:not(:empty) { padding: 12px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; color: var(--text); }
body[data-studio-admin] :is(#billingHistory, #billingLedger) { display: grid; gap: 10px; margin-block: 18px; }
body[data-studio-admin] :is(#billingHistory, #billingLedger) p { margin: 0; padding: 12px; color: var(--muted); background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
#gpuEstimateDialog {
  box-sizing: border-box;
  width: min(30rem, calc(100vw - 3rem));
  color: var(--text);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  border: 1px solid var(--metal-edge);
  box-shadow: var(--plate-shadow), 0 18px 60px #0009;
  overflow-wrap: anywhere;
}
#gpuEstimateDialog::backdrop { background: #07110dd9; }
#gpuEstimateDialog h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.2; }
#gpuEstimateDialog label { display: block; margin-bottom: 8px; color: var(--muted); }
#gpuEstimateDialog select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--metal-edge); border-radius: 6px; color: var(--text); background: var(--field); font: inherit; }
#gpuEstimateText { padding: 14px; color: var(--text); background: var(--field); border-inline-start: 3px solid var(--brass); border-radius: 0 6px 6px 0; line-height: 1.75; font-variant-numeric: tabular-nums; }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button, #gpuEstimateDialog button {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  box-shadow: var(--control-shadow);
  font: 13px/1.5 var(--font-body);
  white-space: normal;
  max-width: 100%;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .08s;
}
#gpuEstimateDialog button { margin: 6px 8px 0 0; }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button:hover:not(:disabled), #gpuEstimateDialog button:hover:not(:disabled) { background: linear-gradient(180deg, var(--control-hover-top), var(--control-bottom)); border-color: var(--brass); }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button:active:not(:disabled), #gpuEstimateDialog button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--metal-shadow); }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button:disabled, #gpuEstimateDialog button:disabled { opacity: 1; color: var(--muted); background: var(--field); cursor: wait; }
#accountUsage :is(summary, button):focus-visible, #gpuEstimateDialog :is(select, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 700px) {
  #usageJobs, #adminUsageJobs, body[data-studio-admin] .billing-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #accountUsage.account-usage { margin: 12px 8px; padding: 14px; }
  #accountUsage > summary { font-size: 23px; min-height: 44px; }
  body[data-studio-admin] :is(#adminUsage, #adminBilling) { padding: 14px; }
  body[data-studio-admin] #creditTopup { padding: 12px; }
  :is(#accountUsage, #adminUsage, #adminBilling) button { width: 100%; margin-inline: 0; }
  #gpuEstimateDialog button { width: 100%; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#accountUsage, #adminUsage, #adminBilling, #gpuEstimateDialog) *, #gpuEstimateDialog { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  #accountUsage.account-usage, body[data-studio-admin] :is(#adminUsage, #adminBilling, #creditTopup),
  :is(#usageBalance, #adminUsageBalance, #billingBalance, #adminUsageBasis, #billingQuote, #billingMessage, #gpuEstimateDialog, #gpuEstimateText),
  body[data-studio-admin] :is(#billingHistory, #billingLedger) p, :is(#accountUsage, #adminUsage) .usage-job {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  #accountUsage > summary, :is(#accountUsage, #adminUsage, #adminBilling, #gpuEstimateDialog) :is(h2, h3, p, small, strong, label) { color: CanvasText; text-shadow: none; }
  body[data-studio-admin] .billing-form :is(input, select), #gpuEstimateDialog select { color: FieldText; background: Field; border-color: FieldText; box-shadow: none; }
  body[data-studio-admin] :is(#adminUsage, #adminBilling) button, #gpuEstimateDialog button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  #accountUsage :is(summary, button):focus-visible, #gpuEstimateDialog :is(select, button):focus-visible { outline-color: Highlight; }
}

/* D17: a shared phone target floor. Existing controls keep their semantics;
   large navigation/creation controls and editors keep their existing sizes;
   timeline/crop handles retain their geometry and larger parent hit areas.
   Important overrides the legacy per-control height rules, only on phones. */
@media (max-width: 600px) {
  body:not([data-studio-access]) :is(button, summary, select, input):not(:is(
    input[type=checkbox], input[type=radio], input[type=range], input[type=hidden],
    .navigation nav button, .workflow-tabs button, .enqueue-handle, .dial,
    .mh-trim-handle, .mh-seam, .mh-crop-zone, .mh-crop-handle
  )) { min-height: 44px !important; }
  body summary { align-content: center; }
  .studio :is(.small-tabs, .image-search, .audio-library-row, .creative-head) { gap: 8px; }
  .studio :is(button:not(.mh-clip), summary) { overflow-wrap: anywhere; }
}

/* A2: use the desktop rail width on tablets too. The legacy 145px column
   left too little room beside icons and split Lithuanian words into fragments.
   Keep the type size, phone layout and flexible editor column unchanged. */
@media (min-width: 601px) and (max-width: 900px) {
  .studio, .studio.results-collapsed { grid-template-columns: 190px minmax(0, 1fr); }
  /* The replaced stacked pane must not anchor the document at its old offset. */
  :root { overflow-anchor: none; }
}

/* E10 G3: one form scale, aligned helpers and a Lithuanian native picker. */
:root { --heading-page: 28px; --heading-group: 23px; --heading-field: 20px; }
.creation-header h2, .workspace-header h2,
[data-page=tools] > .panel > h1, [data-page=system] > .panel > h1,
.workspace .mh-projects h2 {
  font: 500 var(--heading-page)/1.3 var(--font-plate);
}
[data-page=tools] > .panel > h1 { margin-block: 0 16px; }
#audioPromptPanel h2, .shared-gpu-queue h2 { font-size: var(--heading-group); }
#videoCreation .field-title, #photoCreation .field-title { font-size: var(--heading-field); }
:is(#photoCreation, #audioPromptPanel) .field-action-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; gap: 12px; margin-block: 12px;
}
:is(#photoCreation, #audioPromptPanel) .field-action-row > label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; line-height: 1.6;
}
:is(#photoCreation, #audioPromptPanel) .field-action-row > label > select { width: 100%; margin: 0; }
:is(#photoCreation, #audioPromptPanel) .field-action-row > button,
#videoCreation .enhancement-actions > button {
  margin: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere;
}
#videoCreation .enhancement-actions { align-items: start; gap: 12px; }
.studio-file-picker {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  width: 100%; max-width: 100%; min-width: 0; margin-block: 6px; padding: 8px;
  border: 1px solid var(--metal-edge); border-radius: 6px; background: var(--field);
}
.studio-file-picker > input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.studio-file-action {
  flex: 0 0 auto; padding: 9px 12px; min-height: 44px; border: 1px solid var(--metal-edge);
  border-radius: 5px; color: var(--text);
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  font: 500 19px/1.3 var(--font-plate); box-shadow: var(--control-shadow);
}
.studio-file-name { flex: 1 1 140px; min-width: 0; color: var(--muted); font: 13px/1.6 var(--font-body); overflow-wrap: anywhere; }
.studio-file-picker:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.studio-file-picker:has(input:disabled) { opacity: .5; }
.studio-file-picker > input:disabled { cursor: not-allowed; }
#videoCreation label.studio-file-field { display: block; margin-block: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.creation .launch-assembly { width: 100%; height: auto; min-height: 0; margin: 12px 0; }
#startQueue { width: 100%; min-height: 44px; padding: 10px 14px; }
#startQueue .lever-label { font: inherit; color: inherit; padding: 0; white-space: normal; }
@media (max-width: 600px) {
  :is(#photoCreation, #audioPromptPanel) .field-action-row { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .studio-file-picker, .studio-file-action { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .studio-file-name { color: CanvasText; }
  .studio-file-picker:focus-within { outline-color: Highlight; }
}


/* E10.5b.4 / G4: the frame, recessed work area and glass have separate surfaces.
   No new textures, requests, animation or data-derived decoration. */
:root {
  --signal-idle: #52645b;
  --signal-queued: #ffb347;
  --signal-running: #de5042;
  --signal-done: #6dff9e;
  --signal-halo: 8px;
  --glass-reflection: #ecfff04d;
}
:root[data-theme=light] {
  --signal-idle: #758477;
  --glass-reflection: #ffffffa6;
}
.studio > .creation {
  --metal-surface: var(--surface-panel);
}

/* E11.2: the original enqueue action has a trough and its live instruments.
   The footer remains in the existing desktop grid, reachable without scrolling. */
#videoCreation .output-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.creation-console { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; }
.creation-action {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0;
  padding: 8px; border: 2px solid var(--brass-rim); border-radius: 8px;
  background: var(--surface-recess); box-shadow: var(--plate-shadow);
}
#videoCreation .creation-action #rec { width: 100%; min-width: 240px; min-height: 112px; align-self: center; font-size: 22px; }
.creation-price, .creation-job-status { margin: 0; color: var(--text); text-align: center; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.creation-price { font-weight: 650; }
.creation-lab { min-width: 0; }
.creation-readings { display: grid; gap: 7px; }
.creation-readings .b1-meter { gap: 8px; }
.creation-readings .b1-meter svg { width: 38px; height: 38px; flex-basis: 38px; }
.creation-readings .b1-meter figcaption { gap: 1px; font-size: 13px; }
.creation-readings .b1-scale { font-size: 11px; }
.creation-readings .b1-reading { color: var(--paper); font-weight: 650; }
.creation-gpu-lamp { display: block; flex: 0 0 12px; width: 12px; height: 18px; border: 2px solid var(--brass-rim); border-radius: 7px 7px 3px 3px; background: var(--muted); }
.creation-lab[data-gpu=sleeping] .creation-gpu-lamp { background: var(--muted); }
.creation-lab[data-gpu=starting] .creation-gpu-lamp { background: #ffb347; box-shadow: 0 0 9px #ffb34766; }
.creation-lab[data-gpu=working] .creation-gpu-lamp { background: #65d992; box-shadow: 0 0 9px #65d99266; }
.creation-vials { gap: 8px; margin: 8px 0 0; max-height: 104px; overflow-y: auto; }
.creation-vials .b1-vial { width: 82px; flex-direction: row; gap: 5px; align-items: center; text-align: left; }
.creation-vials .b1-glass { width: 22px; height: 46px; flex: 0 0 22px; border-top-width: 4px; border-bottom-width: 5px; }
.creation-vials .b1-glass::after { left: 3px; width: 2px; }
.creation-vials .b1-bubble { left: 5px; width: 3px; height: 3px; }
.creation-vials .b1-bubble:nth-child(3), .creation-vials .b1-bubble:nth-child(4) { left: 10px; width: 3px; height: 3px; }
.creation-vials .b1-vial figcaption { font-size: 11px; gap: 2px; }
.creation-empty { margin: 0; color: var(--muted); font-size: 12px; }
#videoCreation .dial-values { font-size: 13px; gap: 3px 7px; }
#videoCreation .dial-values .selected { padding-inline: 5px; border: 1px solid var(--brass-rim); border-radius: 3px; background: var(--field); }
@media (max-width: 1150px) {
  .creation-console { grid-template-columns: minmax(0, 1fr); }
  .creation-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-readings .b1-meter:last-child:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #videoCreation .creation-action #rec { min-width: min(280px, 100%); }
  .creation-readings .b1-scale { display: none; }
}
@media (forced-colors: active) {
  .creation-action { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .creation-gpu-lamp { display: none; }
  .creation-readings .b1-reading, .creation-price, .creation-job-status, .creation-empty { color: CanvasText; }
  #videoCreation .dial-values .selected { border-color: Highlight; }
}
.studio > .workspace {
  --metal-surface: var(--surface-panel);
}
.prompt-editors > div, .photo-editors > div,
body[data-view=tools] [data-page=tools] > .panel,
.shared-gpu-queue {
  background: var(--surface-recess);
  border-color: var(--brass-rim);
  box-shadow: var(--recess-shadow);
}
/* Native fields remain the sole editor; the inset is only paint. */
textarea, select, input:not([type=checkbox]):not([type=hidden]):not([type=file]) {
  box-shadow: var(--field-shadow);
}
.shared-gpu-queue .b1-vials {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tray) 92%, #000), var(--tray));
  box-shadow: inset 0 3px 7px var(--metal-shadow), inset 0 -1px var(--metal-highlight);
}
/* The brand bulb has no telemetry. Only the adjacent API-backed lamp reports a job. */
.brand-title .indicator { color: var(--brass); filter: none; text-shadow: none; }
.brand-title .indicator .ph-duotone { color: inherit; }
body[data-b1-state] .b1-lamp {
  --lamp-lit: var(--signal-idle);
  --lamp-halo: transparent;
  border-radius: 9px 9px 3px 3px;
  background: radial-gradient(ellipse at 32% 22%, #fff9, transparent 32%),
    linear-gradient(90deg, #0003, transparent 35% 65%, #0004), var(--lamp-lit);
  box-shadow: inset 0 0 5px #0008, inset 0 1px #fff4,
    0 0 var(--signal-halo) var(--lamp-halo), 0 2px 3px var(--metal-shadow);
}
body[data-b1-state=queued] .b1-lamp { --lamp-lit: var(--signal-queued); --lamp-halo: #ffb3474d; }
body[data-b1-state=running] .b1-lamp { --lamp-lit: var(--signal-running); --lamp-halo: #de50424d; }
body[data-b1-state=succeeded] .b1-lamp { --lamp-lit: var(--signal-done); --lamp-halo: #6dff9e4d; }
body[data-b1-state=failed] .b1-lamp { --lamp-lit: var(--signal-running); }
body:is([data-b1-state=offline], [data-b1-state=canceled], [data-b1-state=canceling]) .b1-lamp { border-style: dashed; }
.b1-glass, .shared-gpu-queue .b1-glass {
  border-color: var(--brass-dark);
  background: linear-gradient(90deg, #05151059, var(--glass-reflection) 12%,
    #d9eee50a 27% 65%, var(--glass-reflection) 88%, #05151059);
  box-shadow: inset 0 0 0 1px #e6dcc666, inset -4px 0 7px #0004,
    0 1px 0 var(--metal-highlight), 0 5px 8px var(--metal-shadow);
}
.b1-glass::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brass-dark), var(--brass) 30%, var(--brass-dark));
  z-index: 1; pointer-events: none;
}
.b1-glass::after {
  inset: 7px auto 7px 7px; width: 4px;
  background: linear-gradient(180deg, #fff8, #fff2 55%, #fff5);
  box-shadow: 30px 0 0 -1px #fff2;
  z-index: 1; pointer-events: none;
}
.b1-vial[data-loaded=true] .b1-glass,
.shared-gpu-queue .b1-vial[data-loaded=true] .b1-glass {
  border-color: var(--brass);
  box-shadow: inset 0 0 0 1px #ffb34766, inset -4px 0 7px #0004,
    0 0 var(--signal-halo) #ffb34733, 0 5px 8px var(--metal-shadow);
}
.b1-liquid {
  background: linear-gradient(90deg, #6b0f17, #a9363bd9 28%, #9a2530d9 68%, #6b0f17);
}
@media (forced-colors: active) {
  .studio > :is(.creation, .workspace), .prompt-editors > div, .photo-editors > div,
  body[data-view=tools] [data-page=tools] > .panel, .shared-gpu-queue,
  .shared-gpu-queue .b1-vials { background: Canvas; box-shadow: none; border-color: CanvasText; }
  .brand-title .indicator { color: CanvasText; }
  .brand h1, .creation-header h2, .workspace-header h2 {
    background: Canvas; color: CanvasText; box-shadow: none;
  }
  .workflow-tabs button + button, .mode-tabs:not(.model-picker) button + button,
  .creativity-row button + button, .workspace-tabs button + button { border-inline-start-color: CanvasText; }
  textarea, select, input:not([type=checkbox]):not([type=hidden]):not([type=file]) { box-shadow: none; }
}

/* E10 G5: spend phone space on the editor, keeping every label and hit area.
   Native disclosure state, draft values and desktop/tablet geometry stay intact. */
@media (max-width: 600px) {
  .navigation { gap: 8px; padding: 10px 12px; }
  .navigation .brand { padding-block: 0 8px; }
  .navigation nav { margin-block: 0; }
  .navigation :is(.sidebar-models, .sidebar-bottom) { padding-top: 8px; }
  .navigation .sidebar-bottom { margin-top: 0; }
  .navigation .sidebar-models .section-label { margin-bottom: 6px; }

  #videoCreation .workflow-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px; margin-bottom: 8px;
  }
  #videoCreation .workflow-tabs button {
    flex-direction: row; min-height: 44px; padding: 8px 6px;
    gap: 8px; line-height: 1.3;
  }
  #videoCreation .workflow-tabs button:nth-child(3) { grid-column: 1 / -1; }
  #videoCreation .workflow-tabs button span { overflow-wrap: normal; }
  #videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) {
    margin-block: 8px; padding: 6px 10px;
  }
  #videoCreation .prompt-editors { gap: 8px; }
  #videoCreation .output-actions { margin-block: 8px; }

  [data-page=gallery] .gallery-toolbar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px;
  }
  [data-page=gallery] .gallery-toolbar .small-tabs { grid-column: 1 / -1; }
  [data-page=gallery] #imageCollection { grid-column: 2; grid-row: 2; }
  [data-page=gallery] #reloadImages { grid-column: 1; grid-row: 2; margin: 0; }
  [data-page=gallery] .image-search {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; margin-block: 8px;
  }
  [data-page=gallery] .image-search label { grid-column: 1 / -1; }
  [data-page=gallery] .image-search input { width: 100%; }
  [data-page=gallery] .image-search .job-action { margin: 0; }
  [data-page=gallery] .image-search #imageSearchClear { grid-column: 1 / -1; }
}

/* E11.7: a compact phone rail leaves the first editor in the opening frame.
   All original controls and labels remain in DOM/keyboard order; no sticky
   action covers fields, errors or the on-screen keyboard. */
@media (max-width: 600px) {
  .navigation {
    display: grid; grid-template-columns: minmax(0, 1fr) 126px;
    gap: 6px; padding: 8px;
  }
  .navigation .brand { grid-row: 1; grid-column: 1; padding: 0; }
  .navigation .brand-title h1 { font-size: 24px; }
  .navigation .brand p { margin-top: 3px; }
  .navigation nav { grid-row: 2; grid-column: 1 / -1; gap: 4px; }
  .navigation nav .nav-button {
    min-height: 48px; padding: 5px 3px; gap: 3px;
    display: block; font-size: 17px;
  }
  .navigation nav .nav-button > .ph-duotone { font-size: 18px; margin-right: 3px; }
  .navigation nav .nav-count:not([hidden]) { display: block; line-height: 1.4; }
  .navigation .sidebar-models { grid-row: 3; grid-column: 1 / -1; padding: 0; }
  .navigation .sidebar-bottom { display: contents; }
  .navigation .sidebar-bottom .theme-switch {
    grid-row: 1; grid-column: 2; margin: 0; padding: 4px;
    justify-content: center; gap: 4px; font-size: 13px;
  }
  .navigation .sidebar-bottom #modelStorage { grid-row: 4; grid-column: 1 / -1; }
  .studio > .creation { padding: 12px 6px; }
  /* The plaque's inner spacing supplies this gap without pushing the editor down. */
  .creation .creation-header { margin-bottom: 0; }
  #videoCreation .generation-details { padding-block: 0; }
  #videoCreation .prompt-editors { margin-top: 8px; }
  #videoCreation .workflow-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 3px; }
  #videoCreation .workflow-tabs button { grid-column: span 2; gap: 4px; padding-inline: 3px; }
  #videoCreation .workflow-tabs button:nth-child(-n+2) { grid-column: span 3; }
  #videoCreation .workflow-tabs button:nth-child(3) { grid-column: span 2; }
  #videoCreation .prompt-editors > div { padding: 8px; }
  #videoCreation .creation-action { padding: 4px; border-width: 1px; }
  #videoCreation .creation-action #rec { min-width: 280px; }
  .creation-console { gap: 8px; }
  .creation-lab .creation-readings { gap: 6px; }
}

/* E11.3: paint the original native fields. No proxy controls, DOM moves or
   handlers: options, multi-select, file chooser and editing keep their contract. */
:root { --surface-notes: linear-gradient(180deg, #13271f, #182d25); }
:root[data-theme=light] { --surface-notes: linear-gradient(180deg, #f6eed7, #eee5ca); }
select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
  appearance: none;
  border-color: var(--brass-rim) !important;
  padding-inline-end: max(32px, 2.6em) !important;
  background-color: var(--field) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%),
    linear-gradient(135deg, var(--brass) 50%, transparent 50%), var(--surface-recess) !important;
  background-position: right 18px center, right 13px center, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--recess-shadow);
}
/* Listboxes retain their native rows and selection feedback; no fake arrow. */
select[multiple], select[size]:not([size="1"]) { border-color: var(--brass-rim); }
.studio-file-picker {
  border-color: var(--brass-rim);
  background: var(--surface-recess);
  box-shadow: var(--recess-shadow);
}
.studio-file-action { border-color: var(--brass-rim); }
textarea {
  background: var(--surface-notes) !important;
  border-inline-start: 3px solid var(--brass-rim);
  box-shadow: var(--recess-shadow);
  font-size: 16px !important;
  line-height: 1.6;
  caret-color: var(--text);
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
    appearance: auto;
    background: Field !important; color: FieldText;
    border-color: FieldText !important; box-shadow: none;
  }
  textarea { background: Field !important; color: FieldText; border-color: FieldText; box-shadow: none; }
  .studio-file-picker, .studio-file-action {
    background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none;
  }
}

/* E11.4: readable body copy; optional technical prose lives in native details. */
body { font-size: 15px; line-height: 1.5; }
.studio :is(.hint, small, p[role=status], p[role=alert], .job-error,
  .generation-notes, .creation-empty, .b1-job-indicator,
  .b1-meter figcaption, .b1-vial figcaption, .b1-vial small, .b1-scale,
  .status-copy, .status-copy > p, .usage-job p, .account p),
body[data-studio-admin] :is(.hint, small, table, .billing-form label, #billingHistory p, #billingLedger p) {
  font-size: 13px;
  line-height: 1.5;
}
.studio .hint, .studio small { font-size: 13px !important; }
#videoCreation :is(.last-frame-option, .video-seed-row, .generation-settings label) { font-size: 15px; }
#videoCreation .generation-notes { color: var(--text); }
#videoCreation .generation-notes > summary { min-height: 44px; }
#videoCreation .generation-notes > .hint { display: block; margin-block: 10px; }

/* E11.5: one compact brass account plaque; errors remain a full visible row. */
body[data-studio-server] .studio-account {
  padding: 6px 16px;
  gap: 4px 14px;
  font-size: 15px;
  border: 1px solid var(--brass-rim);
  background: var(--surface-plaque);
  box-shadow: var(--plate-shadow);
}
body[data-studio-server] .studio-account #sessionName {
  margin: 0 auto 0 0;
  flex: 1 1 0;
  max-width: none;
  color: var(--paper);
}
.session-credit {
  min-width: 0;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body[data-studio-server] .studio-account :is(button, a) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body[data-studio-server] .studio-account #sessionStatus { flex: 1 1 100%; }
@media (min-width: 901px) {
  /* Prevent intrinsic content sizing below the account plaque. */
  body[data-studio-server] .studio { width: 100%; margin-inline: 0; }
}
@media (max-width: 600px) {
  body[data-studio-server] .studio-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 5px 12px;
    gap: 2px 10px;
    font-size: 13px;
  }
  body[data-studio-server] .studio-account #sessionName { grid-column: 1; grid-row: 1; }
  .session-credit { grid-column: 2; grid-row: 1; max-width: 55vw; line-height: 1.4; }
  body[data-studio-server] .studio-account #sessionLogout { grid-column: 2; grid-row: 2; justify-self: end; }
  body[data-studio-server] .studio-account a { grid-column: 1; }
  body[data-studio-server] .studio-account #sessionStatus { grid-column: 1 / -1; grid-row: 3; }
  body[data-studio-server][data-studio-role=admin] .studio-account { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-studio-server][data-studio-role=admin] .studio-account #sessionName { grid-column: 1 / -1; }
  body[data-studio-server][data-studio-role=admin] .studio-account #sessionLogout { grid-column: 3; }
  body[data-studio-server][data-studio-role=admin] .studio-account #sessionAdmin { grid-column: 2; grid-row: 2; }
}
@media (forced-colors: active) {
  body[data-studio-server] .studio-account { background: Canvas; border-color: CanvasText; box-shadow: none; }
  body[data-studio-server] .studio-account :is(#sessionName, .session-credit) { color: CanvasText; }
}

/* E11.9: the same casing, recessed bench and brass plaques on every view.
   Paint only: native disclosure, table scrolling and live readings stay intact. */
body[data-studio-admin] main {
  border-color: var(--brass-rim);
  background:
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    repeating-linear-gradient(100deg, transparent 0 3px, var(--metal-grain) 3px 4px),
    var(--surface-shell);
  box-shadow: var(--plate-shadow);
}
.gallery-toolbar, [data-page=gallery] :is(.image-search, .image-pagination),
#imageDeleteControls, #imageDetails, .photo-variant-group,
[data-page=queue] > .panel, .workspace .mh-projects, #accountUsage.account-usage,
body[data-studio-admin] :is(#adminUsage, #adminBilling, .plan-table) {
  background: var(--surface-recess);
  border-color: var(--brass-rim);
  box-shadow: var(--recess-shadow);
}
:is(.image-card, .photo-variant-card), [data-page=queue] #jobs > .job,
:is(#accountUsage, #adminUsage) .usage-job, body[data-studio-admin] .account {
  background: var(--surface-panel);
  border-color: var(--brass-rim);
  box-shadow: var(--plate-shadow);
}
[data-page=queue] #jobs > .queue-job > summary,
.shared-gpu-queue h2, .workspace .mh-projects h2,
body[data-view=tools] #cpuProcessingTitle,
#accountUsage > summary, body[data-studio-admin] :is(h1, #adminUsage > h2, #adminBilling > h2, .account h2) {
  padding: 8px 12px;
  color: var(--paper);
  background: var(--surface-plaque);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--brass-rim), inset 0 2px var(--brass-reflection), 0 2px 4px var(--metal-shadow);
  overflow-wrap: anywhere;
}
body[data-studio-admin] :is(.tools, #creditTopup, #billingHistory p, #billingLedger p) {
  background: var(--surface-recess);
  border-color: var(--brass-rim);
  box-shadow: var(--field-shadow);
}
.workspace .mh-projects :is(label, .hint),
[data-page=queue] #jobs .personal-queue-info,
:is(#accountUsage, #adminUsage) .usage-job :is(p, small) { font-size: 13px; }
body[data-studio-admin] :is(button, select),
[data-page=gallery] :is(.image-search, .image-pagination) .job-action { min-height: 44px; }
@media (forced-colors: active) {
  body[data-studio-admin] :is(main, h1, h2, .account, .tools, #adminUsage, #adminBilling, .plan-table, #creditTopup, #billingHistory p, #billingLedger p),
  .gallery-toolbar, [data-page=gallery] :is(.image-search, .image-pagination),
  #imageDeleteControls, #imageDetails, .photo-variant-group, .image-card, .photo-variant-card,
  [data-page=queue] > .panel, [data-page=queue] #jobs > .job, [data-page=queue] #jobs > .queue-job > summary,
  .shared-gpu-queue h2, .workspace .mh-projects, .workspace .mh-projects h2,
  body[data-view=tools] #cpuProcessingTitle, #accountUsage.account-usage, #accountUsage > summary,
  :is(#accountUsage, #adminUsage) .usage-job {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; text-shadow: none;
  }
}