/* A shared surface layer; each workspace keeps its own layout and controls. */
html[data-theme] body.studio-secondary { background: transparent !important; }
html body.studio-secondary {
  --studio-panel: rgba(31, 27, 37, .86);
  --studio-card: rgba(43, 37, 50, .83);
  --studio-field: rgba(19, 16, 27, .53);
  --studio-hover: rgba(139, 93, 191, .2);
  --studio-line: rgba(228, 209, 255, .2);
  --studio-line-strong: rgba(204, 174, 245, .42);
  --studio-text: #f7f3fb;
  --studio-muted: #c2b9ce;
  --studio-subtle: #a99fb8;
  --studio-accent: #bb8cf8;
  --bg: var(--studio-field);
  --panel: var(--studio-panel);
  --surface: var(--studio-field);
  --surface-hover: var(--studio-hover);
  --line: var(--studio-line);
  --line-strong: var(--studio-line-strong);
  --text: var(--studio-text);
  --ink: var(--studio-text);
  --muted: var(--studio-muted);
  --subtle: var(--studio-subtle);
  --accent: var(--studio-accent);
  --accent-ink: #22132e;
  --focus: #c59bff;
  --blue: var(--studio-accent);
  --blue2: #9560dc;
  --brand: var(--studio-accent);
  --soft: var(--studio-field);
  --collection-field: var(--studio-field);
  --collection-border: var(--studio-line);
  --collection-surface: var(--studio-field);
  --collection-card: var(--studio-card);
  --collection-muted: var(--studio-muted);
  --collection-hover: var(--studio-hover);
  --collection-focus: #c59bff;
  background: transparent !important;
  color: var(--studio-text);
  color-scheme: dark;
}
html[data-theme="light"] body.studio-secondary {
  --studio-panel: rgba(255, 251, 255, .89);
  --studio-card: rgba(255, 253, 255, .82);
  --studio-field: rgba(244, 235, 251, .7);
  --studio-hover: rgba(149, 96, 220, .12);
  --studio-line: rgba(87, 54, 119, .2);
  --studio-line-strong: rgba(123, 79, 164, .38);
  --studio-text: #302339;
  --studio-muted: #6c5c78;
  --studio-subtle: #786987;
  --studio-accent: #8043bf;
  --focus: #8043bf;
  --accent-ink: #fff;
  --collection-field: var(--studio-field);
  --collection-border: var(--studio-line);
  --collection-surface: var(--studio-field);
  --collection-card: var(--studio-card);
  --collection-muted: var(--studio-muted);
  --collection-hover: var(--studio-hover);
  --collection-focus: #8043bf;
  color-scheme: light;
}
body.studio-secondary :is(.topbar, .image-topbar, .edit-topbar, .panel, .route-card, .workflow-status, .project-analysis-progress, .config-group, .stat) {
  background: var(--studio-panel);
  border-color: var(--studio-line);
  border-radius: 16px;
  color: var(--studio-text);
  box-shadow: 0 12px 35px rgba(17, 8, 26, .12), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.studio-secondary .edit-topbar { margin-top: 18px; padding: 14px 18px; min-height: 70px; border: 1px solid var(--studio-line); }
body.studio-secondary .top-actions { flex-wrap: wrap; min-width: 0; }
body.studio-secondary :is(.topbar, .image-topbar, .edit-topbar) > div:first-child { min-width: 0; }
body.studio-secondary :is(.account-entry, .button.secondary, .studio-background-entry, .studio-theme-entry) {
  border: 1px solid var(--studio-line);
  background: var(--studio-card);
  color: var(--studio-text);
  border-radius: 10px;
}
body.studio-secondary :is(.studio-background-entry, .studio-theme-entry) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; min-height: 36px; height: auto;
  font: 600 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
body.studio-secondary .studio-background-entry svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.studio-secondary .studio-theme-entry b { font-size: 12px; font-weight: 600; }
body.studio-secondary :is(.studio-background-entry, .studio-theme-entry):hover { border-color: var(--studio-line-strong); background: var(--studio-hover); }
body.studio-secondary :is(.studio-background-entry, .studio-theme-entry):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
body.studio-secondary :is(.button.primary, button.primary) { background: linear-gradient(115deg, #8850d1, #a563ef); border-color: rgba(200, 150, 255, .6); color: #fff; box-shadow: 0 4px 16px rgba(101, 43, 170, .16); }
body.studio-secondary :is(.button.primary, button.primary):hover:not(:disabled) { background: linear-gradient(115deg, #965fdf, #b178f5); }
body.studio-secondary :is(.subtitle, .account-state, .field, .batch-field small, .cost-note, .image-results-hint, .empty-state, .result-pending, .result-card-name small) { color: var(--studio-muted); }
body.studio-secondary :is(.field textarea, .field select, .batch-markers input, .file-picker, .batch-task-prompt, .result-card, .result-select, .batch-task) { background: var(--studio-field); border-color: var(--studio-line); color: var(--studio-text); }
body.studio-secondary :is(.file-picker b, .model-tag, .step) { background: var(--studio-hover); border-color: var(--studio-line-strong); color: var(--studio-accent); }
body.studio-secondary :is(.result-grid.empty, .reference-picker) { border-color: var(--studio-line); }
body.studio-secondary :is(.empty-state strong, .result-pending strong) { color: var(--studio-text); }
body.studio-secondary :is(.step-nav a[aria-current="page"], .step-nav a.active, .step-nav a.is-active) { color: var(--studio-text); border-color: var(--studio-line-strong); background: var(--studio-hover); }
body.studio-secondary .workspace-heading { text-shadow: 0 1px 10px rgba(0,0,0,.3); }
body.studio-secondary .workspace-heading :is(.eyebrow, .workspace-description) { color: #f2e7f5; }
body.studio-secondary .workspace-heading h1 { color: #fff8ff; }
body.studio-secondary .step-nav { padding-top: 10px; padding-bottom: 10px; border: 1px solid var(--studio-line); border-radius: 13px; margin-bottom: 14px; background: var(--studio-panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.studio-secondary .step-nav a { border-radius: 8px; }
body.studio-secondary .route-card-number { color: var(--studio-accent); background: var(--studio-hover); }
body.studio-secondary .asset { background: var(--studio-card); border-color: var(--studio-line); }
body.studio-secondary dialog:not(#studioBackgroundDialog) { background: var(--studio-panel); border-color: var(--studio-line-strong); color: var(--studio-text); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.studio-secondary-agent .top { padding: 20px; background: var(--studio-panel); border: 1px solid var(--studio-line); border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.studio-secondary-agent :is(.top p, .eyebrow, .stat span, .stat small, .panel p, th, .pager, .invite, .empty, .muted) { color: var(--studio-muted); }
body.studio-secondary-agent :is(button, .actions input, .invite code) { background: var(--studio-field); border-color: var(--studio-line); color: var(--studio-text); border-radius: 8px; }
body.studio-secondary-agent :is(th, td) { border-color: var(--studio-line); }
body.studio-secondary-agent .status { color: #ffb1a9; }
body.studio-secondary-agent :is(.status.ok, .ledger-kind.refund, .ledger-kind.agent_allocate) { color: #8cd9b3; }
body.studio-secondary-agent .ledger-kind.consume { color: #ffb1a9; }
html[data-theme="light"] body.studio-secondary-agent .status, html[data-theme="light"] body.studio-secondary-agent .ledger-kind.consume { color: #af3048; }
html[data-theme="light"] body.studio-secondary-agent :is(.status.ok, .ledger-kind.refund, .ledger-kind.agent_allocate) { color: #2b7851; }
body.studio-secondary-docs > .shell { padding: 28px; margin: 24px auto; width: min(1080px, calc(100% - 36px)); background: var(--studio-panel); border: 1px solid var(--studio-line); border-radius: 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.studio-secondary-docs .studio-doc-actions { display: flex; gap: 8px; margin-top: 16px; }
body.studio-secondary-docs :is(.endpoint, th) { background: var(--studio-field); }
body.studio-secondary-docs pre { background: rgba(17, 12, 26, .87); border-color: var(--studio-line); color: #e9dbfa; border-radius: 10px; }
body.studio-secondary-docs :is(a, .toc a, .back) { color: var(--studio-accent); }
body.studio-secondary-docs .note { background: rgba(155, 94, 207, .15); color: #dec8f5; }
body.studio-secondary-docs .note.ok { background: rgba(83, 160, 122, .14); color: #afdfc5; }
body.studio-secondary-docs .note.warn { background: rgba(183, 137, 62, .14); color: #efd5a8; }
/* The collection pages still import legacy homepage !important theme rules. */
html[data-theme] body.studio-secondary.collection-page { color: var(--studio-text) !important; }
html[data-theme] body.studio-secondary.collection-page :is(.topbar, .panel) { background: var(--studio-panel) !important; border-color: var(--studio-line) !important; box-shadow: 0 12px 35px rgba(17, 8, 26, .12) !important; }
html[data-theme] body.studio-secondary.collection-page :is(.app-shell, #editDialog, #versionsDialog) :is(button, .account-entry, input, select, textarea) { color: var(--studio-text) !important; border-color: var(--studio-line) !important; background: var(--studio-field) !important; }
html[data-theme] body.studio-secondary.collection-page :is(.app-shell, #editDialog, #versionsDialog) button.primary { background: linear-gradient(115deg, #8850d1, #a563ef) !important; border-color: rgba(200, 150, 255, .6) !important; color: #fff !important; }
html[data-theme] body.studio-secondary.collection-page :is(.app-shell, #editDialog, #versionsDialog) :is(button, .account-entry):hover { background: var(--studio-hover) !important; border-color: var(--studio-line-strong) !important; }
html[data-theme] body.studio-secondary.collection-page :is(.app-shell, #editDialog, #versionsDialog) button.primary:hover { background: linear-gradient(115deg, #965fdf, #b178f5) !important; }
html[data-theme] body.studio-secondary.collection-page :is(h1, h2, label) { color: var(--studio-text) !important; }
html[data-theme] body.studio-secondary.collection-page :is(.topbar p, .hint) { color: var(--studio-muted) !important; }
html[data-theme="light"] body.studio-secondary-docs .note { color: #69417c; }
html[data-theme="light"] body.studio-secondary-docs .note.ok { color: #286548; }
html[data-theme="light"] body.studio-secondary-docs .note.warn { color: #885719; }
@media (max-width: 760px) {
  body.studio-secondary .edit-topbar { margin-top: 12px; padding: 14px; }
  body.studio-secondary .top-actions { gap: 7px; }
  body.studio-secondary .image-topbar .top-actions { flex-direction: row; align-items: center; justify-content: flex-start; }
  body.studio-secondary .image-topbar .account-state { flex-basis: 100%; text-align: left; width: 100%; }
  body.studio-secondary-agent .top-actions { flex-wrap: wrap; }
  body.studio-secondary-docs > .shell { width: calc(100% - 24px); margin: 12px auto; padding: 19px; }
}