/* AI Persona desktop studio system. Loaded after each page's legacy styles. */
:root {
  color-scheme: dark;
  --studio-bg: #14181c;
  --studio-surface: #20262b;
  --studio-surface-raised: #292f34;
  --studio-field: #181d22;
  --studio-line: rgba(236, 232, 224, .14);
  --studio-line-strong: rgba(236, 232, 224, .29);
  --studio-text: #f2f0ea;
  --studio-muted: #adb3b4;
  --studio-faint: #889092;
  --studio-accent: #d5ad82;
  --studio-accent-bright: #efc79f;
  --studio-radius: 12px;
  --studio-font: "Avenir Next", Avenir, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body[data-studio-page] {
  color: var(--studio-text);
  background: var(--studio-bg) !important;
  font-family: var(--studio-font) !important;
  font-size: 14px;
  line-height: 1.55;
  animation: none !important;
}
body[data-studio-page]::before { display: none !important; }
body[data-studio-page] :where(button, input, select, textarea) { font-family: inherit; }
body[data-studio-page] :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--studio-accent-bright);
  outline-offset: 3px;
}
body[data-studio-page] :where(button, a) { -webkit-tap-highlight-color: transparent; }

/* A single product navigation replaces scattered floating account controls. */
.site-shell-frame {
  position: sticky;
  z-index: 2147483000;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(20, 24, 28, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.site-shell-frame__inner {
  display: flex;
  width: min(1520px, calc(100% - 64px));
  min-height: 66px;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  margin: 0 auto;
}
.site-shell-frame__brand {
  flex: none;
  color: var(--studio-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .15em;
  text-decoration: none;
  white-space: nowrap;
}
.site-shell-frame__products { display: flex; align-self: stretch; align-items: center; gap: 7px; }
.site-shell-frame__products a {
  display: inline-flex;
  height: 100%;
  align-items: center;
  padding: 0 17px;
  border-bottom: 2px solid transparent;
  color: #aeb5b7;
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s, border-color .16s;
}
.site-shell-frame__products a:hover { color: var(--studio-text); }
.site-shell-frame__products a[aria-current="page"] { border-color: var(--studio-accent); color: var(--studio-text); }
.site-shell-frame .site-shell-auth {
  position: static;
  z-index: auto;
  min-height: 0;
  gap: 2px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  backdrop-filter: none;
}
.site-shell-frame .site-shell-auth :where(a, button, .site-shell-auth__identity) {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 7px;
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 630;
}
.site-shell-frame .site-shell-auth__primary,
.site-shell-frame .site-shell-auth [aria-current="page"] {
  color: #1d1711 !important;
  background: var(--studio-accent) !important;
  box-shadow: none;
}
.site-shell-frame .site-shell-auth__home {
  color: var(--studio-muted) !important;
  background: transparent !important;
  box-shadow: none;
}
.site-shell-frame .site-shell-auth__home-mark { font-size: 14px; }
.site-shell-frame .site-shell-auth__dot { width: 7px; height: 7px; background: #7cbaa1; box-shadow: none; }
body.site-shell-mounted :where(.nav, .topbar, .studio-workbar, .top) { padding-right: 0; }

/* Common page chrome, typography, controls and surfaces. */
body[data-studio-page] :where(.shell, .page) { max-width: 1520px; }
body[data-studio-page] :where(h1, h2, h3) { color: var(--studio-text); text-wrap: balance; }
body[data-studio-page] :where(.eyebrow, .card-tag, .step) { letter-spacing: .04em; }
body[data-studio-page] :where(.panel, .card, .wallet-card, .auth-card) {
  border-color: var(--studio-line);
  border-radius: var(--studio-radius);
  background: var(--studio-surface);
  box-shadow: none;
  backdrop-filter: none;
}
body[data-studio-page] :where(input, textarea, select) { accent-color: var(--studio-accent); }
body[data-studio-page] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
  border-color: var(--studio-line-strong);
  border-radius: 8px;
  color: var(--studio-text);
  background: var(--studio-field);
}
body[data-studio-page] :where(input, textarea)::placeholder { color: #899092; opacity: 1; }
body[data-studio-page] :where(input, textarea, select):focus {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px rgba(213, 173, 130, .13);
}

/* Home: a real cinematic still, one featured task, two concise alternatives. */
body[data-studio-page="home"] .masthead { display: none; }
body[data-studio-page="home"] .page { width: min(1380px, calc(100% - 64px)); }
body[data-studio-page="home"] main { padding: 27px 0 45px; }
body[data-studio-page="home"] .intro {
  display: flex;
  min-height: clamp(300px, 24vw, 360px);
  align-items: end;
  margin-bottom: 34px;
  padding: clamp(30px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 15px;
  background: #1e2021 url("../ui-assets/studio-hero-film-v2.jpg") center top / cover no-repeat;
}
body[data-studio-page="home"] .intro > div { position: relative; max-width: 660px; }
body[data-studio-page="home"] h1 { max-width: 650px; font-size: clamp(36px, 3.9vw, 54px); font-weight: 690; line-height: 1.15; letter-spacing: -.055em; }
body[data-studio-page="home"] .intro-copy { max-width: 550px; margin-top: 18px; color: #dfded8; font-size: 15px; line-height: 1.75; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
body[data-studio-page="home"] .section-head { margin-bottom: 17px; }
body[data-studio-page="home"] .section-head h2 { font-size: 19px; }
body[data-studio-page="home"] .section-head span { color: var(--studio-muted); font-size: 13px; }
body[data-studio-page="home"] .paths { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(170px, auto)); gap: 12px; }
body[data-studio-page="home"] .path {
  min-height: 170px;
  padding: 23px 26px;
  border-color: var(--studio-line);
  border-radius: 12px;
  background: var(--studio-surface);
  box-shadow: none;
}
body[data-studio-page="home"] .path::after { display: none; }
body[data-studio-page="home"] .path:hover { transform: translateY(-2px); border-color: var(--studio-accent); background: var(--studio-surface-raised); box-shadow: none; }
body[data-studio-page="home"] .path-script { grid-row: 1 / 3; min-height: 352px; justify-content: end; padding: 31px; background: #282723; }
body[data-studio-page="home"] .path-script:hover { background: #31302a; }
body[data-studio-page="home"] .card-art,
body[data-studio-page="home"] .card-icon { display: none; }
body[data-studio-page="home"] .card-type { color: var(--studio-accent); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
body[data-studio-page="home"] .card-title { margin-top: 13px; font-size: 24px; font-weight: 690; }
body[data-studio-page="home"] .path-script .card-title { font-size: 30px; }
body[data-studio-page="home"] .card-description { min-height: 0; max-width: 470px; margin: 7px 0 15px; color: var(--studio-muted); font-size: 13px; }
body[data-studio-page="home"] .card-enter { margin-top: auto; padding-top: 13px; color: var(--studio-accent-bright); font-size: 12px; }
body[data-studio-page="home"] .footer { color: var(--studio-faint); }

/* Character landing: creation paths first, edit as a separate utility row. */
body[data-studio-page="persona-entry"] .nav { display: none; }
body[data-studio-page="persona-entry"] .page { width: min(1250px, calc(100% - 64px)); padding: 0; }
body[data-studio-page="persona-entry"] .hero { padding: 48px 0 34px; text-align: left; }
body[data-studio-page="persona-entry"] :where(.hero, .card) { animation: none; }
body[data-studio-page="persona-entry"] .hero h1 { margin-bottom: 13px; color: var(--studio-text); background: none; -webkit-text-fill-color: currentColor; font-size: clamp(34px, 3.6vw, 48px); font-weight: 690; }
body[data-studio-page="persona-entry"] .hero p { max-width: 690px; margin: 0; color: var(--studio-muted); font-size: 15px; }
body[data-studio-page="persona-entry"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 42px; }
body[data-studio-page="persona-entry"] .card { border-radius: 12px; background: var(--studio-surface); }
body[data-studio-page="persona-entry"] .card:hover { transform: translateY(-2px); border-color: var(--studio-accent); box-shadow: none; }
body[data-studio-page="persona-entry"] .card-img { aspect-ratio: 16 / 8; object-position: center top; filter: none; }
body[data-studio-page="persona-entry"] .card-body { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; align-items: end; padding: 23px; }
body[data-studio-page="persona-entry"] .card-title { grid-column: 1; font-size: 20px; }
body[data-studio-page="persona-entry"] .card-desc { grid-column: 1; color: var(--studio-muted); font-size: 13px; }
body[data-studio-page="persona-entry"] .card-action { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--studio-accent-bright); font-size: 12px; font-weight: 700; white-space: nowrap; }
body[data-studio-page="persona-entry"] .card-action span { margin-left: 10px; font-size: 19px; }
body[data-studio-page="persona-entry"] .card:last-child { grid-column: 1 / -1; min-height: 118px; justify-content: center; border-style: dashed; }
body[data-studio-page="persona-entry"] .footer { border-color: var(--studio-line); color: var(--studio-faint); }

/* Script creation uses a compact task header and a stable input/review split. */
body[data-studio-page="script"] {
  --bg: var(--studio-bg); --panel: var(--studio-surface); --panel2: var(--studio-surface-raised);
  --line: var(--studio-line); --line2: var(--studio-line-strong);
  --text: var(--studio-text); --muted: var(--studio-muted); --soft: var(--studio-faint);
  --orange: var(--studio-accent); --orange2: var(--studio-accent-bright);
  --blue: var(--studio-accent-bright); --mint: #8bc0a5;
}
body[data-studio-page="script"] .topbar { display: none; }
body[data-studio-page="script"] .shell { width: min(1460px, calc(100% - 64px)); }
body[data-studio-page="script"] .hero { display: block; padding: 24px 0 22px; }
body[data-studio-page="script"] .hero h1 { max-width: none; margin-top: 0; font-size: clamp(30px, 3vw, 40px); font-weight: 690; letter-spacing: -.035em; }
body[data-studio-page="script"] .hero h1 em { color: var(--studio-text); }
body[data-studio-page="script"] .hero p { max-width: 940px; margin-top: 9px; color: var(--studio-muted); font-size: 13px; line-height: 1.65; }
body[data-studio-page="script"] .hero > div > .eyebrow,
body[data-studio-page="script"] .hero-note { display: none; }
body[data-studio-page="script"] .steps { margin-bottom: 18px; border: 0; border-bottom: 1px solid var(--studio-line); border-radius: 0; background: transparent; }
body[data-studio-page="script"] .step { min-height: 48px; padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--studio-muted); background: transparent; }
body[data-studio-page="script"] .step span { display: none; }
body[data-studio-page="script"] .step strong { margin: 0; font-size: 13px; font-weight: 620; }
body[data-studio-page="script"] .step.active { border-color: var(--studio-accent); color: var(--studio-text); background: transparent; }
body[data-studio-page="script"] .step:disabled { opacity: .45; cursor: not-allowed; }
body[data-studio-page="script"] .workspace { grid-template-columns: minmax(325px, 390px) minmax(0, 1fr); gap: 16px; }
body[data-studio-page="script"] .input-panel { top: 82px; }
body[data-studio-page="script"] .panel { background: var(--studio-surface); box-shadow: none; }
body[data-studio-page="script"] .results { min-height: 630px; }
body[data-studio-page="script"] .field { margin-top: 14px; }
body[data-studio-page="script"] .field textarea { min-height: 145px; height: 145px; resize: vertical; }
body[data-studio-page="script"] .toolbar { align-items: center; gap: 12px; flex-wrap: wrap; }
body[data-studio-page="script"] .toolbar .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body[data-studio-page="script"] .toolbar .tools button { width: auto; min-height: 42px; margin: 0; }
body[data-studio-page="script"] .empty { padding: 20px; }
body[data-studio-page="script"] .stat span,
body[data-studio-page="script"] .asset-grid label,
body[data-studio-page="script"] .asset-actions button,
body[data-studio-page="script"] .queue-item p,
body[data-studio-page="script"] .queue-actions a,
body[data-studio-page="script"] .queue-actions button,
body[data-studio-page="script"] .batchbar span,
body[data-studio-page="script"] .director-help,
body[data-studio-page="script"] .reference-copy span,
body[data-studio-page="script"] .reference-toolbar button,
body[data-studio-page="script"] .reference-legend span { font-size: 12px; }
body[data-studio-page="script"] .director-field label,
body[data-studio-page="script"] .director-block > label,
body[data-studio-page="script"] .asset-select,
body[data-studio-page="script"] .scene-input,
body[data-studio-page="script"] .queue-state { font-size: 12px; }
body[data-studio-page="script"] .reference-copy b,
body[data-studio-page="script"] .tab { font-size: 13px; }
body[data-studio-page="script"] .empty { min-height: 530px; border-color: var(--studio-line-strong); background: #1c2226; }
body[data-studio-page="script"] .overview,
body[data-studio-page="script"] .asset-card,
body[data-studio-page="script"] .queue-item,
body[data-studio-page="script"] .reference-card,
body[data-studio-page="script"] .batchbar { border-color: var(--studio-line); background: #1a2024; }
body[data-studio-page="script"] .primary { color: #201913; background: var(--studio-accent); box-shadow: none; }
body[data-studio-page="script"] .primary:hover { background: var(--studio-accent-bright); }
body[data-studio-page="script"] .secondary,
body[data-studio-page="script"] .quiet { color: var(--studio-text); background: #262c31; border-color: var(--studio-line-strong); }
body[data-studio-page="script"] .tab { border-radius: 7px; }
body[data-studio-page="script"] .tab.active { border-color: var(--studio-accent); color: var(--studio-text); background: #3a332c; }
body[data-studio-page="script"] .director-head { background: #292b2a; }
body[data-studio-page="script"] .reference-legend span { border-radius: 6px; }

/* Visual development keeps asset choice and output visible in one desktop workspace. */
body[data-studio-page="visual"] {
  --bg: var(--studio-bg); --panel: var(--studio-surface); --panel-2: var(--studio-surface-raised); --panel-3: var(--studio-field);
  --line: var(--studio-line); --line-strong: var(--studio-line-strong);
  --text: var(--studio-text); --muted: var(--studio-muted);
  --orange: var(--studio-accent); --orange-soft: var(--studio-accent-bright);
  --scene: var(--studio-accent); --prop: var(--studio-accent); --creature: var(--studio-accent); --accent: var(--studio-accent);
}
body[data-studio-page="visual"] .topbar { display: none; }
body[data-studio-page="visual"] .shell { width: min(1600px, calc(100% - 64px)); }
body[data-studio-page="visual"] .workspace { grid-template-columns: minmax(580px, .98fr) minmax(440px, 1.02fr); gap: 16px; padding-top: 24px; }
body[data-studio-page="visual"] .panel { background: var(--studio-surface); box-shadow: none; }
body[data-studio-page="visual"] .panel-head { padding: 20px 23px; background: transparent; }
body[data-studio-page="visual"] .panel-head h1,
body[data-studio-page="visual"] .panel-head h2 { font-size: 23px; }
body[data-studio-page="visual"] .panel-head .eyebrow,
body[data-studio-page="visual"] .panel-head .step { display: none; }
body[data-studio-page="visual"] .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-studio-page="visual"] .type-card { min-height: 68px; align-content: center; padding: 12px 16px; border-radius: 9px; background: var(--studio-field); }
body[data-studio-page="visual"] .type-card.active { border-color: var(--studio-accent); background: #39332c; box-shadow: none; }
body[data-studio-page="visual"] .type-icon { display: none; }
body[data-studio-page="visual"] .section { border-color: var(--studio-line); }
body[data-studio-page="visual"] .preview-panel { position: sticky; top: 82px; }
body[data-studio-page="visual"] :where(.creature-source-panel, .section, .scene-output) { border-color: var(--studio-line); border-radius: 9px; background: #1b2125; }
body[data-studio-page="visual"] :where(.creature-source-button, .creature-family-button, .scene-output-button, .quality) { border-color: var(--studio-line-strong); border-radius: 8px; color: var(--studio-text); background: var(--studio-field); box-shadow: none; }
body[data-studio-page="visual"] :where(.creature-source-button, .creature-family-button, .scene-output-button, .quality).active { border-color: var(--studio-accent); color: var(--studio-text); background: #39332c; box-shadow: none; }
body[data-studio-page="visual"] .creature-family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-studio-page="visual"] .creature-family-button { min-height: 62px; gap: 5px; }
body[data-studio-page="visual"] .creature-family-button small { color: var(--studio-muted); font-size: 10px; }
body[data-studio-page="visual"] .creature-source-head,
body[data-studio-page="visual"] .creature-family-label,
body[data-studio-page="visual"] .field label { color: var(--studio-muted); font-size: 11px; }
body[data-studio-page="visual"] .reference-upload { border-color: var(--studio-line-strong); color: var(--studio-text); background: var(--studio-field); }

/* Local editing: two clearly separate asset modes, readable option grids. */
body[data-studio-page="local-editor"] {
  --bg: var(--studio-bg); --panel: var(--studio-surface); --panel-2: var(--studio-surface-raised);
  --ink: var(--studio-text); --muted: var(--studio-muted); --faint: var(--studio-faint);
  --gold: var(--studio-accent); --gold-light: var(--studio-accent-bright); --gold-2: var(--studio-accent);
  --blue: var(--studio-accent-bright); --line: var(--studio-line); --ok: #8bc0a5;
}
body[data-studio-page="local-editor"] .shell { width: min(1480px, calc(100% - 64px)); padding-top: 14px; }
body[data-studio-page="local-editor"] .topbar { display: none; }
body[data-studio-page="local-editor"] .hero { padding: 23px 0 27px; }
body[data-studio-page="local-editor"] .hero h1 { font-size: clamp(30px, 3vw, 40px); }
body[data-studio-page="local-editor"] .hero .eyebrow { display: none; }
body[data-studio-page="local-editor"] .hero p { font-size: 13px; }
body[data-studio-page="local-editor"] .workspace { grid-template-columns: minmax(390px, .86fr) minmax(500px, 1.14fr); gap: 16px; }
body[data-studio-page="local-editor"] .panel { background: var(--studio-surface); box-shadow: none; }
body[data-studio-page="local-editor"] .panel-head { padding: 16px 18px; }
body[data-studio-page="local-editor"] .panel-head .step { display: none; }
body[data-studio-page="local-editor"] .editor-mode-nav { gap: 9px; margin: 8px 0 18px; }
body[data-studio-page="local-editor"] .editor-mode-nav button { min-height: 70px; padding: 13px 16px; border: 1px solid var(--studio-line-strong); border-radius: 9px; color: var(--studio-text); background: var(--studio-field); font-size: 16px; text-align: left; }
body[data-studio-page="local-editor"] .editor-mode-nav button[aria-pressed="true"] { border-color: var(--studio-accent); color: #201913; background: var(--studio-accent); }
body[data-studio-page="local-editor"] .editor-mode-nav button small { font-size: 11px; }
body[data-studio-page="local-editor"] .asset-edit-group { margin: 15px 0; padding: 14px; border-color: var(--studio-line-strong); border-radius: 9px; }
body[data-studio-page="local-editor"] .asset-edit-group legend { color: var(--studio-text); font-size: 16px; }
body[data-studio-page="local-editor"] .target-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-studio-page="local-editor"] .target { min-height: 54px; border-radius: 8px; color: var(--studio-muted); background: var(--studio-field); }
body[data-studio-page="local-editor"] .target.active { border-color: var(--studio-accent); color: #201913; background: var(--studio-accent); box-shadow: none; }
body[data-studio-page="local-editor"] .dropzone { border-color: var(--studio-line-strong); border-radius: 9px; background: var(--studio-field); }
body[data-studio-page="local-editor"] .canvas { background: #181d21; }
body[data-studio-page="local-editor"] .primary { color: #201913; background: var(--studio-accent); box-shadow: none; }
body[data-studio-page="local-editor"] .target small,
body[data-studio-page="local-editor"] .quality-chip small,
body[data-studio-page="local-editor"] .history-meta,
body[data-studio-page="local-editor"] .history-actions .ghost { font-size: 12px; }
body[data-studio-page="local-editor"] .history-actions .ghost { min-height: 40px; padding-inline: 9px; }
body[data-studio-page="local-editor"] .status,
body[data-studio-page="local-editor"] .settings-note,
body[data-studio-page="local-editor"] .credit-cost-note,
body[data-studio-page="local-editor"] .reference-copy p { font-size: 13px; }

/* Persona workbench: remove stacked visual themes without disturbing its form logic. */
body[data-studio-page="persona-workbench"] {
  --pd-bg: var(--studio-bg);
  --pd-surface: var(--studio-surface);
  --pd-surface-2: var(--studio-surface-raised);
  --pd-surface-3: #33393e;
  --pd-line: var(--studio-line);
  --pd-line-strong: var(--studio-line-strong);
  --pd-text: var(--studio-text);
  --pd-text-soft: #d3d3cc;
  --pd-text-dim: var(--studio-muted);
  --pd-gold: var(--studio-accent);
  --pd-gold-2: var(--studio-accent-bright);
  --pd-blue: var(--studio-accent-bright);
  --pd-mint: #8bc0a5;
}
body[data-studio-page="persona-workbench"] .app,
body[data-studio-page="persona-workbench"].flow-real .app,
body[data-studio-page="persona-workbench"].flow-virtual .app { width: min(1760px, calc(100vw - 48px)) !important; margin: 20px auto !important; gap: 12px !important; }
body[data-studio-page="persona-workbench"].flow-virtual .app { grid-template-columns: minmax(260px, 300px) minmax(620px, 1fr) minmax(280px, 320px) !important; }
body[data-studio-page="persona-workbench"].flow-real .app { grid-template-columns: minmax(290px, 330px) minmax(670px, 1fr) !important; }
@media (min-width: 1240px) {
  body[data-studio-page="persona-workbench"].flow-virtual .app {
    grid-template-areas: "top top top" "left center right" !important;
  }
}
@media (min-width: 921px) and (max-width: 1239px) {
  body[data-studio-page="persona-workbench"].flow-virtual .app {
    grid-template-columns: minmax(245px, 280px) minmax(0, 1fr) !important;
    grid-template-areas: "top top" "left center" "right center" !important;
  }
}
body[data-studio-page="persona-workbench"] .studio-workbar { min-height: 59px !important; border-color: var(--studio-line) !important; }
body[data-studio-page="persona-workbench"] .studio-workbar h1 { font-size: 23px !important; color: var(--studio-text) !important; }
body[data-studio-page="persona-workbench"] .studio-workbar p { color: var(--studio-muted) !important; }
body[data-studio-page="persona-workbench"] :where(.left, .center, .right) { border-color: var(--studio-line) !important; border-radius: 10px !important; background: var(--studio-surface) !important; box-shadow: none !important; }
body[data-studio-page="persona-workbench"] :where(.section, .center-detail-panel > .section, .center-detail-panel .control-grid.section) { border-color: var(--studio-line) !important; border-radius: 9px !important; background: #1a2024 !important; }
body[data-studio-page="persona-workbench"] :where(.chip, .quick-select, select, input, textarea) { border-color: var(--studio-line-strong) !important; border-radius: 7px !important; }
body[data-studio-page="persona-workbench"] .step.active b { border-color: var(--studio-accent) !important; color: #201913 !important; background: var(--studio-accent) !important; box-shadow: none !important; }
body[data-studio-page="persona-workbench"] :where(.output-card, .strategy-card, .canvas-subpanel, .center-detail-panel, .history-library) { border-color: var(--studio-line) !important; background: #1b2226 !important; box-shadow: none !important; }
body[data-studio-page="persona-workbench"] :where(.section-head, .field label, .right-panel-title) { color: var(--studio-muted) !important; }
body[data-studio-page="persona-workbench"] :where(.generate, #generateImage, .canvas-generate) { border-radius: 8px !important; color: #201913 !important; background: var(--studio-accent) !important; box-shadow: none !important; }

/* Secondary pages share the same quiet material palette. */
body[data-studio-page="panorama"],
body[data-studio-page="wallet"],
body[data-studio-page="admin"] {
  --bg: var(--studio-bg); --navy: var(--studio-bg); --panel: var(--studio-surface);
  --ink: var(--studio-text); --text: var(--studio-text); --muted: var(--studio-muted);
  --line: var(--studio-line); --orange: var(--studio-accent); --blue: var(--studio-accent-bright);
  --mint: #8bc0a5; --shadow: none;
}
body[data-studio-page="panorama"] .topbar,
body[data-studio-page="wallet"] .nav,
body[data-studio-page="admin"] .topbar { display: none; }
body[data-studio-page="panorama"] .shell,
body[data-studio-page="wallet"] .shell,
body[data-studio-page="admin"] .shell { padding-top: 25px; }
body[data-studio-page="wallet"] .hero { margin-top: 8px; }
body[data-studio-page="wallet"] .wallet-card::after,
body[data-studio-page="wallet"] .cost-card::before { display: none; }
body[data-studio-page="wallet"] .plan.featured { border-color: var(--studio-accent); background: #302a24; }
body[data-studio-page="wallet"] .plan.featured button { color: #201913; background: var(--studio-accent); }
body[data-studio-page="admin"] .user-tools .input { min-width: 0; }
body[data-studio-page="admin"] #searchUsers { flex: none; min-width: 68px; padding-inline: 12px; white-space: nowrap; }
body[data-studio-page="panorama"] .panel-head .eyebrow,
body[data-studio-page="panorama"] .panel-head .step { display: none; }
body[data-studio-page="panorama"] label,
body[data-studio-page="panorama"] .section-head span,
body[data-studio-page="panorama"] .upload-copy span,
body[data-studio-page="panorama"] .viewer-help,
body[data-studio-page="panorama"] summary { font-size: 13px; }
body[data-studio-page="panorama"] .status { font-size: 13px; }

body[data-studio-page="login"] {
  --paper: var(--studio-bg); --ink: var(--studio-text); --muted: var(--studio-muted);
  --line: var(--studio-line); --pink: var(--studio-accent); --peach: var(--studio-accent);
}
body[data-studio-page="login"] .auth-shell { min-height: calc(100vh - 66px); padding: 48px 0; }
body[data-studio-page="login"] .intro h1 { font-size: clamp(36px, 4vw, 55px); }
body[data-studio-page="login"] .intro h1 em { color: var(--studio-accent); }
body[data-studio-page="login"] .intro .eyebrow,
body[data-studio-page="login"] .promise-list,
body[data-studio-page="login"] .wordmark { display: none; }
body[data-studio-page="login"] .channel-button { color: var(--studio-text); background: #293035; border-color: var(--studio-line-strong); font-weight: 650; }
body[data-studio-page="login"] .channel-button.active { color: #201913; background: var(--studio-accent); border-color: var(--studio-accent); }
body[data-studio-page="login"] .persona-board { border-color: var(--studio-line); border-radius: 11px; background: url("../ui-assets/studio-hero-film-v2.jpg") 67% top / cover no-repeat; box-shadow: none; }
body[data-studio-page="login"] .persona-board::after { display: none; }
body[data-studio-page="login"] .persona-board > * { display: none; }
body[data-studio-page="login"] .auth-card { border-radius: 12px; background: var(--studio-surface); box-shadow: none; }
body[data-studio-page="login"] .tabs { border-radius: 8px; background: var(--studio-field); }
body[data-studio-page="login"] .tab.active,
body[data-studio-page="login"] .channel-button.active { border-color: var(--studio-accent); color: var(--studio-text); background: #3a332c; box-shadow: none; }
body[data-studio-page="login"] .btn { color: #201913; background: var(--studio-accent); box-shadow: none; }
body[data-studio-page="login"] .code-message,
body[data-studio-page="login"] .auth-note { font-size: 12px; line-height: 1.6; }

@media (max-width: 1100px) {
  .site-shell-frame__inner { width: min(100% - 36px, 1520px); gap: 22px; }
  .site-shell-frame__products a { padding-inline: 10px; }
  body[data-studio-page="script"] .workspace,
  body[data-studio-page="visual"] .workspace,
  body[data-studio-page="local-editor"] .workspace { grid-template-columns: 1fr; }
  body[data-studio-page="script"] .input-panel,
  body[data-studio-page="visual"] .preview-panel { position: static; }
}
@media (max-width: 700px) {
  .site-shell-frame__inner { min-height: 60px; flex-wrap: wrap; gap: 0 12px; padding: 9px 0; }
  .site-shell-frame__brand { font-size: 12px; }
  .site-shell-frame__products { order: 3; width: 100%; height: 42px; justify-content: space-between; }
  .site-shell-frame__products a { padding-inline: 6px; font-size: 12px; }
  .site-shell-frame .site-shell-auth { margin-left: auto; }
  .site-shell-frame .site-shell-auth :where(a, button, .site-shell-auth__identity) { min-height: 32px; padding-inline: 7px; font-size: 11px; }
  .site-shell-frame .site-shell-auth__home { display: none; }
  body[data-studio-page="home"] .page,
  body[data-studio-page="persona-entry"] .page,
  body[data-studio-page="script"] .shell,
  body[data-studio-page="visual"] .shell,
  body[data-studio-page="local-editor"] .shell { width: calc(100% - 28px); }
  body[data-studio-page="home"] .intro { min-height: 350px; padding: 27px; background-position: 59% top; }
  body[data-studio-page="home"] .intro > div { max-width: 350px; }
  body[data-studio-page="home"] .paths { grid-template-columns: 1fr; grid-template-rows: auto; }
  body[data-studio-page="home"] .path-script { grid-row: auto; min-height: 210px; }
  body[data-studio-page="persona-entry"] .cards { grid-template-columns: 1fr; }
  body[data-studio-page="persona-entry"] .card:last-child { grid-column: auto; }
  body[data-studio-page="persona-entry"] .card-body { grid-template-columns: 1fr; }
  body[data-studio-page="persona-entry"] .card-action { grid-column: 1; grid-row: auto; margin-top: 9px; }
  body[data-studio-page="local-editor"] .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .site-shell-frame__products a { transition: none; }
}