/* Panda visual system: ink, paper and a quiet graphite hierarchy. */
:root {
  --panda-ink: #151515;
  --panda-black: #080808;
  --panda-paper: #fafafa;
  --panda-gray: #cecece;
  --panda-mid: #909090;
  --panda-line: rgba(224, 224, 224, .18);
  --panda-soft: rgba(250, 250, 250, .08);
}
html body,
html body#studioRoot,
html body.studio-secondary,
html body.collection-page,
html body.workflow-app {
  --studio-ink: #f0f0f0;
  --studio-text: #f0f0f0;
  --studio-muted: #b0b0b0;
  --studio-faint: #969696;
  --studio-subtle: #9d9d9d;
  --studio-panel: rgba(26, 26, 26, .96);
  --studio-card: #242424;
  --studio-inset: #111111;
  --studio-field: #151515;
  --studio-control: #242424;
  --studio-hover: rgba(244, 244, 244, .08);
  --studio-line: rgba(232, 232, 232, .18);
  --studio-feedback-ring: rgba(244, 244, 244, .25);
  --studio-line-strong: rgba(232, 232, 232, .28);
  --studio-accent: #f4f4f4;
  --studio-violet: #d9d9d9;
  --studio-positive: #c8c8c8;
  --accent-ink: #151515;
  --purple: #f4f4f4;
  --focus: #f4f4f4;
  --blue: #f4f4f4;
  --blue2: #b7b7b7;
  --wf-purple: #f4f4f4;
  --wf-line: var(--panda-line);
  --wf-field: rgba(9, 9, 9, .62);
  --accent: #f4f4f4;
  --accent-ink: #151515;
  --soft: rgba(250, 250, 250, .08);
  --bg: #101010;
  --panel: var(--studio-panel);
  --surface: var(--studio-control);
  --surface-hover: var(--studio-hover);
  --text: var(--studio-ink);
  --ink: var(--studio-ink);
  --muted: var(--studio-muted);
  --line: var(--studio-line);
}
html[data-theme="light"] body,
html[data-theme="light"] body#studioRoot:not(.auth-locked),
html[data-theme="light"] body.studio-secondary,
html[data-theme="light"] body.collection-page {
  --studio-ink: #1d1d1d;
  --studio-text: #1d1d1d;
  --studio-muted: #666666;
  --studio-faint: #787878;
  --studio-subtle: #707070;
  --studio-panel: rgba(255, 255, 255, .97);
  --studio-card: #f5f5f5;
  --studio-inset: #eeeeee;
  --studio-field: #f7f7f7;
  --studio-control: #eeeeee;
  --studio-hover: rgba(29, 29, 29, .07);
  --studio-line: rgba(45, 45, 45, .18);
  --studio-feedback-ring: rgba(29, 29, 29, .18);
  --studio-line-strong: rgba(45, 45, 45, .28);
  --studio-accent: #181818;
  --studio-violet: #535353;
  --studio-positive: #505050;
  --accent-ink: #ffffff;
  --purple: #181818;
  --focus: #181818;
  --blue: #181818;
  --blue2: #606060;
  --wf-purple: #181818;
  --wf-field: rgba(255, 255, 255, .82);
  --accent: #181818;
  --accent-ink: #ffffff;
  --soft: rgba(45, 45, 45, .06);
  --bg: #f0f0f0;
  --panel: var(--studio-panel);
  --surface: var(--studio-control);
  --surface-hover: var(--studio-hover);
  --text: var(--studio-ink);
  --ink: var(--studio-ink);
  --muted: var(--studio-muted);
  --line: var(--studio-line);
}
html[data-theme="mono"] body { --studio-accent: #f4f4f4; --accent-ink: #151515; }
html.studio-background { background: #101010 !important; }
html[data-theme="light"].studio-background { background: #f0f0f0 !important; }
html[data-studio-background="studio"] #studioBackdrop::before {
  background-image: radial-gradient(ellipse at 90% 4%, #ffffff14, transparent 46%), radial-gradient(ellipse at 4% 88%, #dddddd1a, transparent 48%), linear-gradient(135deg, #101010, #191919) !important;
}
html[data-studio-background="studio"][data-theme="light"] #studioBackdrop::before {
  background-image: radial-gradient(ellipse at 88% 8%, #ffffffaa, transparent 48%), radial-gradient(ellipse at 0% 100%, #d0d0d066, transparent 55%), linear-gradient(135deg, #fafafa, #eeeeee) !important;
}

/* Replace the old warm accent with graphite and paper in the shared controls. */
html body :is(#studioRoot #generateBtn, #saveConfigBtn, #authRegisterBtn, .workflow-app .primary, .workbench-app .primary, .studio-assets-primary, body.studio-secondary .button.primary, button.primary, .button.primary) {
  background: linear-gradient(115deg, #f6f6f6, #cccccc) !important;
  border-color: #ffffff40 !important;
  color: #151515 !important;
  box-shadow: 0 5px 18px #00000022 !important;
}
html[data-theme="light"] body :is(#studioRoot #generateBtn, #saveConfigBtn, #authRegisterBtn, .workflow-app .primary, .workbench-app .primary, .studio-assets-primary, body.studio-secondary .button.primary, button.primary, .button.primary) {
  background: linear-gradient(115deg, #181818, #4d4d4d) !important;
  border-color: #181818 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px #1515151c !important;
}
html body :is(button, .button, input, textarea, select, a.account-entry) { border-color: var(--studio-line, var(--panda-line)); }
html body :is(input, textarea, select):focus-visible { outline-color: var(--studio-accent); }

/* Shared panda mark sizing and monochrome chrome. */
.studio-brand-mark img, .brand-mark img, .desktop-brand-mark img, .demo-panda { display: block; width: 100%; height: 100%; object-fit: contain; }
.studio-brand-mark, .brand-mark { display: inline-grid; place-items: center; color: var(--studio-accent); }
html #studioRoot .studio-brand-mark { background: transparent; border-color: var(--panda-line); }
html #studioRoot .studio-brand-mark img { width: 35px; height: 35px; }
html .workflow-heading .brand, html .workbench-header .brand { color: var(--studio-accent); }
html .workflow-heading .brand-mark { width: 28px; height: 30px; }
html .workbench-header .brand-mark { width: 28px; height: 30px; font-size: 0; }
html .workbench-header .brand-mark img { width: 28px; height: 30px; }
.desktop-brand-mark { width: 25px; height: 25px; color: var(--studio-accent); font-size: 0; }
.desktop-brand-mark img { width: 25px; height: 25px; }

/* Remove the remaining purple/orange glow from the main workspaces. */
html #studioRoot .studio-nav a.active,
html .workbench-nav > a.active,
html .workflow-nav [aria-current="page"],
html .project-tabs [aria-pressed="true"] { color: var(--studio-accent) !important; background: #ffffff0d !important; border-color: var(--studio-line-strong, var(--panda-line)) !important; }
html #studioRoot .studio-avatar { background: #ffffff12; color: var(--studio-accent); border-color: var(--panda-line); }
html #studioRoot .studio-brand small, html #studioRoot .studio-eyebrow, html body :is(.eyebrow, .studio-assets-eyebrow, .studio-section-kicker) { color: var(--studio-muted); }
html .workflow-heading .brand-mark, html .workflow-heading .brand { color: var(--studio-accent); }
html .project-entry:hover, html .studio-model-card:hover { border-color: var(--panda-gray) !important; }
html .welcome-art, html .workflow-grid i, html .script-empty > span { color: var(--studio-accent) !important; }

html body.studio-secondary :is(.panel, .image-topbar, .edit-topbar, .billing-layout, .content-panel, .welcome-panel, .workbench-nav, #workspace) {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html body.studio-secondary .panel { backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
html #studioBackgroundDialog {
  --sbg-text: #f0f0f0;
  --sbg-muted: #b0b0b0;
  --sbg-border: rgba(224, 224, 224, .18);
  --sbg-surface: rgba(250, 250, 250, .06);
  --sbg-field: #252525;
  background: rgba(24, 24, 24, .97);
  border-color: var(--panda-line);
}
html[data-theme="light"] #studioBackgroundDialog {
  --sbg-text: #1d1d1d;
  --sbg-muted: #666666;
  --sbg-border: rgba(45, 45, 45, .18);
  --sbg-surface: rgba(45, 45, 45, .05);
  --sbg-field: #f0f0f0;
  background: rgba(251, 251, 251, .98);
  border-color: rgba(45, 45, 45, .18);
}
html #studioBackgroundDialog :is(.sbg-preset, .sbg-custom)[aria-pressed="true"] { background: #ffffff12 !important; border-color: var(--studio-accent) !important; box-shadow: 0 0 0 1px var(--studio-accent) !important; }
html #studioBackgroundDialog .sbg-save { background: linear-gradient(115deg, #f6f6f6, #cccccc) !important; border-color: #ffffff40 !important; color: #151515 !important; }

/* Secondary workspaces still contain a few legacy blue/purple literals. Keep
   those controls inside the same graphite-and-paper panda system. */
html body.studio-secondary,
html body.studio-secondary-image {
  --studio-hover: rgba(244, 244, 244, .10);
  --studio-line: rgba(232, 232, 232, .22);
  --studio-line-strong: rgba(244, 244, 244, .38);
  --studio-accent: #f4f4f4;
  --blue: #f4f4f4;
  --blue2: #b7b7b7;
  --focus: #f4f4f4;
}
html[data-theme="light"] body.studio-secondary,
html[data-theme="light"] body.studio-secondary-image {
  --studio-hover: rgba(29, 29, 29, .07);
  --studio-line: rgba(45, 45, 45, .20);
  --studio-line-strong: rgba(45, 45, 45, .36);
  --studio-accent: #181818;
  --blue: #181818;
  --blue2: #606060;
  --focus: #181818;
}
html body.studio-secondary :is(.button, button, .file-picker, .model-tag, .step),
html body.studio-secondary-image :is(.button, button, .file-picker, .model-tag, .step) {
  border-color: var(--studio-line) !important;
  box-shadow: none;
}
html body.studio-secondary :is(.button.secondary, .file-picker, .model-tag),
html body.studio-secondary-image :is(.button.secondary, .file-picker, .model-tag) {
  background: var(--studio-control, #242424) !important;
  color: var(--studio-text) !important;
}
html body.studio-secondary :is(.button.primary, button.primary, .file-picker b),
html body.studio-secondary-image :is(.button.primary, button.primary, .file-picker b) {
  background: linear-gradient(115deg, #f6f6f6, #cccccc) !important;
  border-color: #ffffff40 !important;
  color: #151515 !important;
  box-shadow: 0 5px 18px #00000022 !important;
}
html[data-theme="light"] body.studio-secondary :is(.button.primary, button.primary, .file-picker b),
html[data-theme="light"] body.studio-secondary-image :is(.button.primary, button.primary, .file-picker b) {
  background: linear-gradient(115deg, #181818, #4d4d4d) !important;
  border-color: #181818 !important;
  color: #ffffff !important;
}
html body.studio-secondary :is(.step, .model-tag, .route-card-number, .file-picker b),
html body.studio-secondary-image :is(.step, .model-tag, .route-card-number, .file-picker b) {
  background: var(--studio-hover) !important;
  border-color: var(--studio-line-strong) !important;
  color: var(--studio-accent) !important;
}
html body.studio-secondary :is(.field textarea, .field select, .batch-markers input, .batch-task-prompt),
html body.studio-secondary-image :is(.field textarea, .field select, .batch-markers input, .batch-task-prompt) {
  background: var(--studio-field) !important;
  border-color: var(--studio-line) !important;
  color: var(--studio-text) !important;
}
html body.studio-secondary :is(.field textarea:focus, .field select:focus, .batch-markers input:focus),
html body.studio-secondary-image :is(.field textarea:focus, .field select:focus, .batch-markers input:focus) {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 0 0 3px rgba(244, 244, 244, .12) !important;
}
html body.studio-secondary :is(.status.success, .status.error),
html body.studio-secondary-image :is(.status.success, .status.error) { color: var(--studio-muted) !important; }
html[data-theme="light"] body.studio-secondary :is(.status.success, .status.error),
html[data-theme="light"] body.studio-secondary-image :is(.status.success, .status.error) { color: var(--studio-subtle) !important; }
html body.studio-secondary .image-topbar,
html body.studio-secondary-image .image-topbar,
html body.studio-secondary .panel,
html body.studio-secondary-image .panel {
  background: var(--studio-panel) !important;
  border-color: var(--studio-line) !important;
}
html body.studio-secondary-image { background: #101010 !important; color-scheme: dark; }
html[data-theme="light"] body.studio-secondary-image { background: #f0f0f0 !important; color-scheme: light; }

/* High-specificity hooks for the original studio shell. These rules keep the
   older workspace selectors from bringing back violet, orange or pink accents. */
html #studioRoot .option-panel #generateBtn,
html #studioRoot #generateBtn,
html #studioRoot.auth-locked #saveConfigBtn,
html #studioRoot.auth-locked #authRegisterBtn {
  background: linear-gradient(115deg, #f6f6f6, #cccccc) !important;
  border: 1px solid #ffffff40 !important;
  color: #151515 !important;
  box-shadow: 0 5px 18px #00000022 !important;
}
html[data-theme="light"] #studioRoot .option-panel #generateBtn,
html[data-theme="light"] #studioRoot #generateBtn,
html[data-theme="light"] #studioRoot.auth-locked #saveConfigBtn,
html[data-theme="light"] #studioRoot.auth-locked #authRegisterBtn {
  background: linear-gradient(115deg, #181818, #4d4d4d) !important;
  border-color: #181818 !important;
  color: #ffffff !important;
}
html #studioRoot .studio-nav a.active {
  background: #ffffff12 !important;
  border-color: var(--studio-line-strong) !important;
  color: var(--studio-accent) !important;
  box-shadow: inset 3px 0 0 var(--studio-accent) !important;
}
html[data-theme="light"] #studioRoot .studio-nav a.active {
  background: #1818180d !important;
  color: #181818 !important;
  box-shadow: inset 3px 0 0 #181818 !important;
}
html #studioRoot .studio-model-filters button.active,
html #studioRoot .is-selected .studio-model-select {
  background: #ffffff12 !important;
  border-color: var(--studio-line-strong) !important;
  color: var(--studio-accent) !important;
  box-shadow: none !important;
}
html #studioRoot .studio-model-mark,
html #studioRoot .studio-avatar {
  background: #242424 !important;
  border-color: var(--studio-line) !important;
  color: #f4f4f4 !important;
  box-shadow: none !important;
}
html[data-theme="light"] #studioRoot .studio-model-mark,
html[data-theme="light"] #studioRoot .studio-avatar {
  background: #eeeeee !important;
  border-color: #31313133 !important;
  color: #181818 !important;
}
html #studioRoot .console-viewport:not(.has-video) {
  background: radial-gradient(ellipse at 50% 40%, #ffffff08, transparent 62%), var(--studio-inset) !important;
}
html #studioRoot .console-monitor-empty { background: transparent !important; }
html #studioRoot .studio-nav-indicator { background: #ffffff0b !important; border-color: var(--studio-line) !important; box-shadow: none !important; }
html #studioRoot .task-card .badge.processing,
html #studioRoot .task-card .badge.ok { background: #ffffff0d !important; color: var(--studio-muted) !important; border-color: var(--studio-line) !important; }
html #studioRoot .task-card .badge.failed,
html #studioRoot .task-card .badge.error { background: #ffffff0d !important; color: var(--studio-muted) !important; border-color: var(--studio-line) !important; }
html #studioRoot .console-viewport:not(.has-video)::before,
html #studioRoot .console-viewport:not(.has-video)::after {
  background: radial-gradient(circle at 50% 40%, #ffffff18, #ffffff00 68%) !important;
  opacity: .24 !important;
}
html #studioRoot .playful-star { color: #e4e4e4 !important; }
html #studioRoot .playful-star-two { color: #ffffff !important; }
html #studioRoot .playful-orbit { background: #ffffff12 !important; }
html #studioRoot .task-preview-button {
  background: #242424 !important;
  border-color: var(--studio-line) !important;
  color: var(--studio-text) !important;
}
html #studioRoot .task-preview-button small,
html #studioRoot .task-preview-button .task-thumb-fallback {
  background: #f4f4f4 !important;
  border-color: #151515 !important;
  color: #151515 !important;
}

/* Workflow pages do not put their route class on <body>, so scope the
   inherited variables directly to the app root as well. */
html .workflow-app {
  --wf-text: #f0f0f0;
  --wf-muted: #b0b0b0;
  --wf-surface: rgba(26, 26, 26, .96);
  --wf-line: rgba(232, 232, 232, .22);
  --wf-field: rgba(18, 18, 18, .78);
  --wf-purple: #f4f4f4;
  --studio-accent: #f4f4f4;
  --studio-panel: rgba(26, 26, 26, .96);
  --studio-field: rgba(18, 18, 18, .78);
  --studio-control: #242424;
  --studio-line: rgba(232, 232, 232, .22);
  --studio-line-strong: rgba(244, 244, 244, .38);
  --studio-text: #f0f0f0;
  --studio-ink: #f0f0f0;
  --studio-muted: #b0b0b0;
  --studio-positive: #c8c8c8;
  --accent-ink: #151515;
}
html[data-theme="light"] .workflow-app {
  --wf-text: #1d1d1d;
  --wf-muted: #666666;
  --wf-surface: rgba(255, 255, 255, .97);
  --wf-line: rgba(45, 45, 45, .20);
  --wf-field: rgba(246, 246, 246, .92);
  --wf-purple: #181818;
  --studio-accent: #181818;
  --studio-panel: rgba(255, 255, 255, .97);
  --studio-field: rgba(246, 246, 246, .92);
  --studio-control: #eeeeee;
  --studio-line: rgba(45, 45, 45, .20);
  --studio-line-strong: rgba(45, 45, 45, .36);
  --studio-text: #1d1d1d;
  --studio-ink: #1d1d1d;
  --studio-muted: #666666;
  --studio-positive: #505050;
  --accent-ink: #ffffff;
}
html .workflow-app .primary,
html .workflow-app .workflow-footer .primary,
html .workflow-app .style-save .primary {
  background: linear-gradient(115deg, #f6f6f6, #cccccc) !important;
  border-color: #ffffff40 !important;
  color: #151515 !important;
}
html[data-theme="light"] .workflow-app .primary,
html[data-theme="light"] .workflow-app .workflow-footer .primary,
html[data-theme="light"] .workflow-app .style-save .primary {
  background: linear-gradient(115deg, #181818, #4d4d4d) !important;
  border-color: #181818 !important;
  color: #ffffff !important;
}
html .workflow-app .style-art { filter: grayscale(1); color: #f0f0f0 !important; }
html .workflow-app .style-art-anime,
html .workflow-app .style-art-3d,
html .workflow-app .style-art-ink,
html .workflow-app .style-art-chinese,
html .workflow-app .style-art-cyberpunk,
html .workflow-app .style-art-oil,
html .workflow-app .style-art-pixel { background: linear-gradient(135deg, #353535, #151515) !important; }
html .project-script {
  --accent: #f4f4f4;
  --soft: rgba(244, 244, 244, .08);
  --panel: rgba(26, 26, 26, .96);
  --surface: rgba(37, 37, 37, .88);
  --line: rgba(232, 232, 232, .22);
  --muted: #b0b0b0;
}
html[data-theme="light"] .project-script {
  --accent: #181818;
  --soft: rgba(29, 29, 29, .06);
  --panel: rgba(255, 255, 255, .97);
  --surface: rgba(245, 245, 245, .92);
  --line: rgba(45, 45, 45, .20);
  --muted: #666666;
}

@media (prefers-reduced-motion: reduce) { .studio-brand-mark img, .brand-mark img { transition: none !important; } }

html #studioRoot .studio-nav a.active .si {color:var(--studio-accent)}
html #studioRoot .prompt-panel .image-shelf {background:var(--studio-inset)!important}
html #studioRoot .prompt-panel :is(#prompt,#fixedPrompt):focus {border-color:var(--studio-accent)!important;box-shadow:0 0 0 2px var(--studio-hover)!important}
html #studioRoot .console-monitor-toolbar i {background:var(--studio-accent)}
html .wv-job-index {background:var(--studio-hover);color:var(--studio-text)}
html .wv-cost {background:var(--studio-hover);border-color:var(--studio-line)}
html #studioBackgroundDialog output {color:var(--sbg-text)}
html #studioBackgroundDialog input[type=range] {background:var(--sbg-border)!important;accent-color:var(--sbg-text)}
html #studioBackgroundDialog input[type=range]::-webkit-slider-thumb {background:var(--sbg-text);border-color:var(--sbg-muted)}
html #studioBackgroundDialog :is(.sbg-button,.sbg-close):hover {background:var(--sbg-surface)!important;border-color:var(--sbg-muted)!important}
html body.studio-admin #adminView .admin-brand-mark {background:transparent;box-shadow:none}
html body.studio-admin .admin-nav button.active {background:var(--as-hover);box-shadow:inset 3px 0 var(--as-accent)}
html body.studio-admin .admin-nav svg {color:var(--as-muted)}
/* Shared panda identity and clearly separated controls. */
html body {--studio-line:rgba(230, 230, 230,.3);--studio-line-strong:rgba(245, 245, 245,.48);--line:var(--studio-line);--wf-line:var(--studio-line);--brand:var(--studio-accent)}
html[data-theme=light] body {--studio-line:rgba(25, 25, 25,.3);--studio-line-strong:rgba(25, 25, 25,.48);--line:var(--studio-line);--wf-line:var(--studio-line)}
html body :is(button,.button,input,select,textarea) {border-color:var(--studio-line-strong)!important}
html body :is(.panel,.project-card,.wv-job,.result-card,.studio-glass,.style-editor) {border-color:var(--studio-line)!important}
html #studioRoot .studio-task-filters {gap:6px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html #studioRoot .studio-task-filters button {border:1px solid var(--studio-line-strong)!important;background:var(--studio-control)!important;color:var(--studio-text)!important;border-radius:7px!important;min-height:32px!important;padding:5px 11px!important}
html #studioRoot .studio-task-filters button.active {background:var(--studio-control)!important;color:var(--studio-text)!important;border-color:var(--studio-accent)!important;box-shadow:inset 0 0 0 1px var(--studio-accent)!important;font-weight:650}
html body :is(.workflow-nav a,.workbench-nav a,.step-nav a,.project-tabs button,.top-actions>a,.studio-outline-button) {border:1px solid var(--studio-line-strong)!important;border-radius:8px!important;background:var(--studio-control);color:var(--studio-text)}
html body :is(.workflow-nav a,.workbench-nav a,.step-nav a,.project-tabs button,.top-actions>a):hover {border-color:var(--studio-accent)!important;background:var(--studio-hover)!important}
html body :is(.step-nav a[aria-current=page],.project-tabs button[aria-pressed=true]) {background:var(--studio-accent)!important;color:var(--accent-ink)!important;border-color:var(--studio-accent)!important}
html #studioRoot .studio-brand {gap:9px!important;padding-left:0!important;padding-right:0!important}
html #studioRoot .studio-brand-mark {width:48px!important;height:48px!important;flex:0 0 48px!important;border:0!important}
html #studioRoot .studio-brand-mark img {width:48px!important;height:48px!important;border-radius:9px}
html #studioRoot .studio-brand strong {font-size:14px!important;white-space:nowrap}
html :is(.workflow-heading,.workbench-header) .brand-mark {width:44px!important;height:44px!important;flex:0 0 44px!important}
html :is(.workflow-heading,.workbench-header) .brand-mark img {width:44px!important;height:44px!important;border-radius:8px}
html :is(.workflow-heading,.workbench-header) .brand {display:inline-flex;align-items:center;gap:9px}
html .workflow-heading.project-open #heading {display:none}
html .workflow-heading.project-open #breadcrumb {font-size:18px;font-weight:700;line-height:1.4;color:var(--studio-text);margin:0;grid-row:1 / 3}
@media(min-width:900px) {
  html .workflow-heading>div:first-child {display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center;min-width:0}
  html .workflow-heading .brand {grid-column:1;grid-row:1 / 3}
  html .workflow-heading #breadcrumb {grid-column:2;grid-row:1}
  html .workflow-heading #heading {grid-column:2;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
html body.studio-admin #adminView .admin-brand-mark {width:48px;height:48px;flex:0 0 48px}
html body.studio-admin #adminView .admin-brand-mark img {width:100%;height:100%;object-fit:contain;border-radius:9px}
html .panda-page-logo {width:44px;height:44px;object-fit:contain;border-radius:8px;float:left;margin:0 12px 6px 0}
html .edit-topbar .brand {display:flex;align-items:center;gap:8px}
html .edit-topbar .panda-page-logo {float:none;margin:0}
html .workflow-app {--wf-line:var(--studio-line);--wf-text:var(--studio-text);--wf-muted:var(--studio-muted)}
html #demoBar {background:#1b1b1b!important;color:#f0f0f0!important;border-color:#666666!important}
html #demoBar>strong {color:#f0f0f0!important}
html #demoGuide {background:#1c1c1c!important;color:#f0f0f0!important;border-color:#777777!important}
html #demoGuide :is(.demo-eyebrow,.demo-grid i,#demoStatus) {color:#ededed!important}
html #demoGuide :is(.demo-intro,.demo-grid span,.demo-note) {color:#bbbbbb!important}
html #demoGuide :is(button,a) {border-color:#737373!important}
html #demoGuide .demo-grid button:hover {background:#333333!important;border-color:#eeeeee!important}
html #demoGuide .demo-panda {width:112px;height:112px;border-radius:14px}
html[data-theme=light] #demoBar,html[data-theme=light] #demoGuide {background:#fafafa!important;color:#1d1d1d!important;border-color:#888888!important}
html[data-theme=light] #demoBar>strong,html[data-theme=light] #demoGuide :is(.demo-eyebrow,.demo-grid i,#demoStatus) {color:#222222!important}
html[data-theme=light] #demoGuide :is(.demo-intro,.demo-grid span,.demo-note) {color:#666666!important}
html[data-theme=light] #demoGuide .demo-grid button:hover {background:#e5e5e5!important;border-color:#222222!important}
html body :is(.si,.studio-icon,.admin-nav svg) {color:inherit}
@media(max-width:760px) {html #studioRoot .studio-brand-mark,html #studioRoot .studio-brand-mark img {width:40px!important;height:40px!important;flex-basis:40px!important}}
html body#studioRoot,html body.studio-secondary,html body.collection-page,html body.studio-admin,html .workflow-app {--studio-line:rgba(230,230,230,.3);--studio-line-strong:rgba(245,245,245,.48);--line:var(--studio-line);--wf-line:var(--studio-line)}
html[data-theme=light] body#studioRoot,html[data-theme=light] body.studio-secondary,html[data-theme=light] body.collection-page,html[data-theme=light] body.studio-admin,html[data-theme=light] .workflow-app {--studio-line:rgba(25,25,25,.3);--studio-line-strong:rgba(25,25,25,.48);--line:var(--studio-line);--wf-line:var(--studio-line)}
html #studioBackdrop {filter:grayscale(1)}
html #studioRoot .top-actions :is(#announcementBtn,#themeToggleBtn,#configBtn,#studioLogoutBtn) {
  border:1px solid var(--studio-line-strong)!important;
  border-radius:8px!important;
  background:var(--studio-control)!important;
  box-shadow:none!important;
}
html #studioRoot .top-actions :is(#announcementBtn,#themeToggleBtn,#configBtn,#studioLogoutBtn):hover {
  border-color:var(--studio-accent)!important;
  background:var(--studio-hover)!important;
}
html #studioRoot .top-actions :is(#announcementBtn,#themeToggleBtn,#configBtn,#studioLogoutBtn):focus-visible {
  outline:2px solid var(--studio-accent);outline-offset:2px;
}
/* A small paw badge gives the balance its own panda identity. */
html #studioRoot .top-actions #creditCard {
  display:grid!important;grid-template-columns:22px minmax(0,auto);
  grid-template-rows:auto auto;align-items:center;align-content:center;
  gap:0 7px!important;min-width:86px!important;max-width:160px;
  min-height:34px!important;padding:4px 9px!important;
  border:1px solid var(--studio-line-strong)!important;border-radius:10px!important;
  background:var(--studio-control)!important;color:var(--studio-text)!important;
}
html #studioRoot .top-actions #creditCard::before {
  content:"";grid-column:1;grid-row:1 / 3;width:22px;height:22px;
  background:currentColor;transform:rotate(-12deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='4.5' cy='9' rx='2.3' ry='3' transform='rotate(-25 4.5 9)'/%3E%3Cellipse cx='9.2' cy='5.8' rx='2.3' ry='3'/%3E%3Cellipse cx='14.8' cy='5.8' rx='2.3' ry='3'/%3E%3Cellipse cx='19.5' cy='9' rx='2.3' ry='3' transform='rotate(25 19.5 9)'/%3E%3Cpath d='M12 11c-3 0-7 4.5-7 7.1 0 3.6 4 3.2 7 2.2 3 1 7 1.4 7-2.2C19 15.5 15 11 12 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html #studioRoot .top-actions #creditCard>span {
  grid-column:2;grid-row:1;font-size:9px!important;line-height:12px!important;
  color:var(--studio-text)!important;opacity:.72;
}
html #studioRoot .top-actions #creditText {
  grid-column:2;grid-row:2;color:var(--studio-text)!important;
  font-size:13px!important;line-height:15px!important;font-weight:750;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
}
/* One shared control size keeps the account strip aligned. */
html #studioRoot .top-actions {align-items:center;gap:8px!important}
html #studioRoot .top-actions :is(#announcementBtn,#themeToggleBtn,#creditCard,#configBtn,#studioLogoutBtn) {
  box-sizing:border-box;height:38px!important;min-height:38px!important;max-height:38px!important;
  margin:0;border-radius:10px!important;flex-shrink:0;
}
html #studioRoot .top-actions :is(#creditCard,#configBtn,#studioLogoutBtn) {
  width:128px!important;min-width:128px!important;max-width:128px!important;
  padding:4px 10px!important;font-size:12px;
}
html #studioRoot .top-actions :is(#announcementBtn,#themeToggleBtn) {
  width:38px!important;min-width:38px!important;padding:8px!important;
}
html #studioRoot .top-actions #studioLogoutBtn span {display:inline!important}
html #studioRoot .top-actions #configBtn .studio-avatar {flex:none}
html #studioRoot .top-actions #studioAccountName {min-width:0}
/* Readable typography at the existing compact control sizes. */
html body {font-weight:600}
html :is(body#studioRoot,body) :is(p,span,small,em,label,a,button,input,select,textarea,td,th,summary,[contenteditable],.panel button.small,.account-entry,.task-time,.announcement-ticker-item) {
  font-weight:600!important;
}
html :is(body#studioRoot,body) :is(h1,h2,h3,h4,strong,b) {font-weight:700!important}
html #studioRoot .studio-sidebar .studio-sidebar-bottom button,
html #studioRoot .studio-sidebar .studio-sidebar-bottom button span {
  font-size:12px!important;font-weight:700!important;color:var(--studio-text)!important;
}
html #studioRoot .studio-sidebar .studio-sidebar-bottom button {
  background:var(--studio-control)!important;border-color:var(--studio-line-strong)!important;
}
html body .workflow-app p:is(.wv-message,[data-sb=notice],.sb-rule-preview,#notice):not(:empty) {
  position:relative;min-height:56px;padding:14px 18px 14px 54px!important;margin:16px 0!important;
  border:1px solid var(--studio-line-strong)!important;border-radius:10px;
  background:var(--studio-control)!important;color:var(--studio-text)!important;
  font-size:16px!important;line-height:1.7!important;font-weight:700!important;
  overflow-wrap:anywhere;
}
html body .workflow-app p:is(.wv-message,[data-sb=notice],.sb-rule-preview,#notice):not(:empty)::before {
  content:"i";position:absolute;left:17px;top:16px;display:grid;place-items:center;
  width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;
  font:700 16px/1 "Segoe UI",sans-serif;
}
html body .workflow-app p:is(.wv-message,[data-sb=notice],.sb-rule-preview,#notice).error:not(:empty) {
  display:block!important;border:2px solid var(--studio-text)!important;
  background:var(--studio-text)!important;color:var(--studio-field)!important;
  font-size:17px!important;box-shadow:0 4px 14px #0002;
}
html body .workflow-app p:is(.wv-message,[data-sb=notice],.sb-rule-preview,#notice).error:not(:empty)::before {
  content:"!";border-width:2px;
}
html body .workflow-footer span#footerHint.error {
  position:relative;padding:10px 14px 10px 42px;border:2px solid var(--studio-text);border-radius:8px;
  font-size:16px!important;line-height:1.6;font-weight:700!important;
  background:var(--studio-text)!important;color:var(--studio-field)!important;overflow-wrap:anywhere;
}
html body .workflow-footer span#footerHint.error::before {
  content:"!";position:absolute;left:13px;top:12px;display:grid;place-items:center;
  width:21px;height:21px;border:2px solid currentColor;border-radius:50%;font:700 14px/1 "Segoe UI",sans-serif;
}
/* Reserve separate rows for the workspace and actions so status text cannot
   slide underneath the footer when it wraps or the window is resized. */
html body:has(>.workflow-app) {
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;
}
html body>.workflow-app {
  flex:1 1 0;min-height:0;height:auto;width:100%;margin:0;
  padding-bottom:12px!important;overflow:auto;
}
html body>.workflow-footer {
  position:static;flex:none;margin:0 12px 12px;min-width:0;
}
html body .workflow-app p#notice {
  height:auto;flex:none;white-space:normal;text-overflow:clip;
  overflow:auto;max-height:25dvh;margin:8px 10px!important;
}
html body .workflow-app p#notice:empty {display:none}
@media(min-width:900px) {
  html body>.workflow-app {padding:0!important;overflow:hidden}
  html body .workflow-app #workspace {padding-bottom:20px!important}
  html body>.workflow-footer {margin-left:166px;margin-right:10px}
  html body:has(>.workflow-app.nav-collapsed)>.workflow-footer {margin-left:86px}
}
@media(max-width:899px) {
  html body>.workflow-footer {flex-wrap:wrap}
  html body>.workflow-footer>div {order:-1;flex-basis:100%}
  html body>.workflow-footer button {flex:1;min-width:0;white-space:normal}
}
html body .workflow-heading .workflow-account-tools {
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;gap:8px;min-width:0;
}
html .workflow-account-name,html #workflowBalance {
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;
  border:1px solid var(--studio-line-strong);border-radius:10px;
  background:var(--studio-control);color:var(--studio-text);font-size:13px;line-height:20px;
}
html .workflow-account-name {min-width:0;max-width:min(220px,100%)}
html .workflow-account-name svg {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
html .workflow-account-name #account {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html #workflowBalance {flex-wrap:wrap;cursor:pointer}
html #workflowBalance:hover {background:var(--studio-hover);border-color:var(--studio-text)}
html #workflowBalance #workflowCreditText {font-size:16px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html #workflowBalanceLabel {color:var(--studio-muted)}
html #workflowBalanceState {font-size:11px;color:var(--studio-muted)}
@media(max-width:760px) {
  html .workflow-heading {flex-wrap:wrap}
  html body .workflow-heading .workflow-account-tools {width:100%;justify-content:flex-start;margin-bottom:12px}
}

/* The API action uses the same readable primary palette in both themes. */
html body#studioRoot #createApiKeyBtn {background:var(--studio-accent)!important;color:var(--accent-ink)!important;border:1px solid var(--studio-accent)!important;font-size:14px!important;font-weight:700!important;min-height:42px;padding:10px 18px!important;border-radius:10px!important;text-shadow:none!important}
html body#studioRoot #createApiKeyBtn:hover:not(:disabled) {filter:brightness(.9)}
html body#studioRoot #createApiKeyBtn:disabled {background:var(--studio-control)!important;color:var(--studio-muted)!important;border-color:var(--studio-line-strong)!important;opacity:1;cursor:not-allowed}

/* Disabled controls indicate an unavailable action, including while busy. */
html body :is(button,input,select,textarea,fieldset):disabled,
html body [aria-disabled="true"],
html body :is(button:disabled,[aria-disabled="true"]) *,
html body label:has(> input:disabled) {
  cursor:not-allowed!important;
}
/* Keep registration verification aligned with the existing panda form. */
#configModal #authEmailCodeField[hidden] { display:none!important; }
#configModal .auth-email-code-row { display:flex;align-items:stretch;gap:8px;margin-top:7px; }
#configModal .auth-email-code-row input { flex:1 1 0;min-width:0;width:0!important; }
#configModal #authSendEmailCodeBtn { flex:0 0 auto;align-self:stretch;margin:0;padding:0 12px;min-height:46px;border:1px solid var(--studio-line-strong,#888)!important;border-radius:13px!important;background:var(--studio-control,#fff)!important;color:var(--studio-text,#222)!important;font:inherit;font-size:12px;white-space:nowrap;box-shadow:none!important; }
#configModal #authSendEmailCodeBtn:disabled { opacity:.55;cursor:default; }
#configModal #authEmailCodeHint { display:block;margin-top:7px;color:var(--studio-muted,#777);font-size:11px;line-height:1.5; }
html #studioRoot.auth-locked .auth-content { background:#202020!important;border-color:#505050!important; }
html #studioRoot.auth-locked .auth-form input { background:#151515!important;border-color:#555!important;color:#f0f0f0!important; }
html #studioRoot.auth-locked .auth-form input:focus { border-color:#aaa!important;box-shadow:0 0 0 3px #ffffff15!important; }
html #studioRoot.auth-locked .auth-mode-tabs { background:#151515!important;border-color:#555!important; }
html #studioRoot.auth-locked .auth-mode-tab { color:#b0b0b0!important; }
html #studioRoot.auth-locked .auth-mode-tab.active { background:#404040!important;color:#fafafa!important; }
html #studioRoot.auth-locked :is(.auth-form label,.auth-heading p,.auth-visual-copy>p,.auth-visual-copy>span) { color:#bcbcbc!important; }
html #studioRoot.auth-locked #configModal :is(#saveConfigBtn,#authRegisterBtn) { background:#f0f0f0!important;color:#151515!important;border:1px solid #999!important;box-shadow:none!important; }
html #studioRoot.auth-locked .cinema-stage { filter:grayscale(1); }