/* Shared light surfaces. Artwork keeps its own colors; no image inversion. */
:root {
  color-scheme: light;
  --ws-page: #f6f8fa;
  --ws-surface: #ffffff;
  --ws-subtle: #f3f6f7;
  --ws-line: #dbe4e7;
  --ws-ink: #20363b;
  --ws-muted: #5c7076;
  --ws-teal: #087c72;
  --ws-tint: #e8f7f4;
  --ws-accent: #38c9be;
  --ws-accent-hover: #6bd9ce;
  --ws-accent-ink: #083b36;
  --ws-soft: var(--ws-subtle);
  --line: var(--ws-line);
  --muted: var(--ws-muted);
  --soft: var(--ws-subtle);
  --accent: var(--ws-accent);
  background: var(--ws-page);
  color: var(--ws-ink);
}
/* Legacy workspace tokens are declared on body, so root aliases alone cannot
   replace their inherited dark values. Keep both tool generations in one theme. */
body:not(.auth-locked) {
  --accent: var(--ws-accent);
  --accent-ink: var(--ws-accent-ink);
  --workspace: var(--ws-page);
  --panel: var(--ws-surface);
  --panel-2: var(--ws-subtle);
  --line-dark: var(--ws-line);
  --copy: var(--ws-ink);
  --copy-2: var(--ws-muted);
}
body:not(.auth-locked), body:not(.auth-locked) .shell {
  background: var(--ws-page);
  color: var(--ws-ink);
}
body:not(.auth-locked) .sidebar,
body:not(.auth-locked) .topbar {
  background: var(--ws-surface);
  color: var(--ws-muted);
  border-color: var(--ws-line);
}
.sidebar-brand-row .brand { color: var(--ws-ink); }
.sidebar-brand-row .brand-sub, .sidebar-collapse { color: var(--ws-muted); }
.sidebar-collapse { background: var(--ws-surface); border-color: var(--ws-line); }
.sidebar-collapse:hover, .topbar .icon-button:hover { background: var(--ws-subtle); color: var(--ws-teal); }
body:not(.auth-locked) .sidebar nav a,
body:not(.auth-locked) .sidebar nav button { color: #4c6269; }
body:not(.auth-locked) .sidebar nav a:hover,
body:not(.auth-locked) .sidebar nav button:hover { background: #f0f7f6; color: var(--ws-teal); }
body:not(.auth-locked) .sidebar nav a.active,
body:not(.auth-locked) .sidebar nav button.active { background: var(--ws-tint); color: var(--ws-teal); border-color: #38b5a9; }
body:not(.auth-locked) .sidebar nav a.active:before { background: #17998c; }
body:not(.auth-locked) .sidebar nav em { background: #daf0eb; color: var(--ws-teal); }
body:not(.auth-locked) .nav-label, .topbar .beta { color: #63787e; }
body:not(.auth-locked) .sidebar-bottom, body:not(.auth-locked) .profile { background: #fff; border-color: var(--ws-line); }
body:not(.auth-locked) .sidebar nav { scrollbar-color: #bdcfd1 transparent; }
/* Programmatic route focus does not draw a frame around the whole canvas. */
#main:focus { outline: none; }
body:not(.auth-locked) .sidebar-account .account-sidebar-trigger {
  background: var(--ws-tint); color: var(--ws-ink); border-color: #c6e9e1; box-shadow: none;
}
body:not(.auth-locked) .sidebar-account .account-sidebar-trigger:hover { background: #def2ec; box-shadow: 0 4px 14px #20363b08; }
body:not(.auth-locked) .sidebar-account .account-sidebar-trigger strong { color: var(--ws-ink); }
body:not(.auth-locked) .sidebar-account .account-sidebar-trigger small { color: #536f73; }
.profile .avatar, body:not(.auth-locked) .sidebar-account .account-sidebar-trigger .avatar { background: #cfece5; color: #205c55; }
.profile small { color: var(--ws-muted); }
body:not(.auth-locked) .sidebar-account:has(.guest-access-actions) { display: block; }
body:not(.auth-locked) .guest-access-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 8px; width: 100%; }
body:not(.auth-locked) .guest-access-actions .account-access-button { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 46px; padding: 10px 6px; border: 1px solid #a9d5ce; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 650; line-height: 1.4; text-align: center; white-space: nowrap; }
html[lang="ja"] body:not(.auth-locked) .guest-access-actions .account-access-button { font-size: 11px; }
body:not(.auth-locked) .guest-access-actions .guest-sign-in { background: #38c9be !important; border-color: #38c9be !important; color: #083b36 !important; }
body:not(.auth-locked) .guest-access-actions .guest-sign-up { background: #fff; color: #12695f; }
body:not(.auth-locked) .guest-access-actions .guest-sign-in:hover { background: #6bd9ce !important; border-color: #6bd9ce !important; }
body:not(.auth-locked) .guest-access-actions .guest-sign-up:hover { background: #e8f7f4; border-color: #69afa4; color: #12695f; }
body:not(.auth-locked) .guest-access-actions .account-access-button:focus-visible { outline: 3px solid #087c72; outline-offset: 3px; }
@media(min-width:801px) { body:not(.auth-locked).nav-collapsed .sidebar-account:has(.guest-access-actions) { width: 44px; } body:not(.auth-locked).nav-collapsed .guest-access-actions { grid-template-columns: 1fr; } body:not(.auth-locked).nav-collapsed .guest-access-actions .account-access-button { font-size: 10px; padding-inline: 2px; white-space: normal; overflow-wrap: anywhere; } }
body:not(.auth-locked) .credit-card {
  background: var(--ws-tint); border-color: #b7ddd5; color: var(--ws-teal); box-shadow: none;
}
body:not(.auth-locked) .credit-card:hover { background: #def2ec; border-color: #55afa1; box-shadow: 0 8px 20px #20363b0c; }
body:not(.auth-locked) .credit-card strong { color: #174b43; }
body:not(.auth-locked) .credit-card small, body:not(.auth-locked) .credit-card b { color: #3d7068; }
body:not(.auth-locked) .credit-card .credit-orb { background: #d1ede5; color: #087c72; box-shadow: none; }
body:not(.auth-locked) .account-credit-link,
body:not(.auth-locked) .workspace-language-trigger,
body:not(.auth-locked) select#workspace-language {
  background-color: var(--ws-tint); border-color: #b7ddd5; color: var(--ws-teal);
}
body:not(.auth-locked) .account-credit-link:hover,
body:not(.auth-locked) .workspace-language-trigger:hover,
body:not(.auth-locked) .workspace-language-menu.is-open .workspace-language-trigger { background: #dff2ec; border-color: #55afa1; }
body:not(.auth-locked) .workspace-language-popover { background: #fff; border-color: var(--ws-line); box-shadow: 0 12px 40px #20363b1a; }
body:not(.auth-locked) .workspace-language-option { color: #4c6269; }
body:not(.auth-locked) .workspace-language-option:hover,
body:not(.auth-locked) .workspace-language-option:focus-visible { background: var(--ws-subtle); color: var(--ws-ink); }
body:not(.auth-locked) .workspace-language-option[aria-checked="true"] { background: var(--ws-tint); color: var(--ws-teal); }
body:not(.auth-locked) .workspace-language-check { color: var(--ws-teal); }
body:not(.auth-locked) .heading-row h1, .home-title h1, .section-head h2 { color: var(--ws-ink); }
body:not(.auth-locked) .intro,
body:not(.auth-locked) .shell main:has(#commerce-flow-root) > .heading-row .intro,
.home-title p, .section-head p { color: var(--ws-muted); }
.eyebrow, .workspace-kicker, .home-title .workspace-kicker { color: var(--ws-teal); }
body:not(.auth-locked) .primary,
body:not(.auth-locked) .cf-workbench .primary,
body:not(.auth-locked) .lai-workspace .primary {
  background: #38c9be; color: #083b36; border-color: #38c9be;
}
body:not(.auth-locked) .primary:hover,
body:not(.auth-locked) .cf-workbench .primary:hover,
body:not(.auth-locked) .lai-workspace .primary:hover { background: #6bd9ce; border-color: #6bd9ce; }
body:not(.auth-locked) .secondary,
body:not(.auth-locked) .heading-row .secondary,
body:not(.auth-locked) .cf-workbench .secondary,
body:not(.auth-locked) .lai-workspace .secondary,
.home-title > .secondary { background: #fff; color: #33595e; border-color: #cbdadd; }
body:not(.auth-locked) .secondary:hover,
body:not(.auth-locked) .cf-workbench .secondary:hover,
.home-title > .secondary:hover { background: #eef7f5; border-color: #83b9b0; }
.text-button, body:not(.auth-locked) .cf-workbench .text-button { color: var(--ws-teal); }
.text-button:hover { color: #045d54; }
body:not(.auth-locked) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
  background-color: #fff; border-color: #cbdadd; color: var(--ws-ink); color-scheme: light;
}
body:not(.auth-locked) input::placeholder,
body:not(.auth-locked) textarea::placeholder { color: #667b81; opacity: 1; }
body:not(.auth-locked) select option { background: #fff; color: var(--ws-ink); }
body:not(.auth-locked) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--ws-teal); }
body:not(.auth-locked) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #087c72; outline-offset: 3px; box-shadow: 0 0 0 4px #087c7212;
}
body:not(.auth-locked) :is(.empty, .form-card, .asset-card, .prompt-card, .ai-job, .product-block, .style-panel, .scene-card, .studio-asset, .variant-card),
.template-card, .recent-card, .hub-compose { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
body:not(.auth-locked) :is(.empty p, .asset-card p, .prompt-card p, .style-panel > p, .scene-card small, .scene-card > span:last-child),
.recent-card small, .template-caption span, .prompt-card small { color: var(--ws-muted); }
.category-tabs button, .scene-filters button, .prompt-types button, .studio-view-tabs button { color: var(--ws-muted); background: #fff; border-color: var(--ws-line); }
.category-tabs button.active, .scene-filters button.active, .prompt-types button.active, .studio-view-tabs button.active { background: var(--ws-tint); color: var(--ws-teal); border-color: #75b8ad; }
.category-tabs button:not(.active):hover { background: var(--ws-subtle); color: var(--ws-teal); }
.scene-card.selected, .studio-asset.selected, .variant-card.picked { background: #f4fbf8; border-color: #53ad9e; outline-color: #53ad9e; }
.asset-card img, .work-thumb, .ai-media, .variant-media { background: var(--ws-subtle); }
.ai-job-meta > p, .ai-job-actions a, .ai-job-actions button { color: var(--ws-muted); }
.ai-job-meta h3 { color: var(--ws-ink); }
.ai-pending, .job-status { background: #edf2f4; color: #526b72; }
.status-succeeded { background: #e4f5eb; color: #286641; }
.status-failed, .status-unknown { background: #fff2e0; color: #86511c; }
.job-error { color: #b23434 !important; }
.asset-category-tabs button { background: #fff; border-color: var(--ws-line); color: var(--ws-muted); }
.asset-category-tabs button.active { background: var(--ws-tint); border-color: #7dbbae; color: var(--ws-teal); }
.asset-category-empty, .guest-space, .recent-empty { background: #fff; border-color: var(--ws-line); color: var(--ws-ink); }
.guest-space p, .recent-empty span, .workspace-public-links, .public-workspace-intro p { color: var(--ws-muted); }
.workspace-public-links a:hover, .public-workspace-intro a { color: var(--ws-teal); }
body:not(.auth-locked) footer { border-color: var(--ws-line); color: var(--ws-muted); }

/* Product, remix, A+, try-on and commercial-video configuration. */
.cf-workbench { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
.cf-config, .cf-model, .model-config { background: #fafcfc; border-color: var(--ws-line); }
.cf-section, .model-config-section { border-color: var(--ws-line); }
.cf-section h2, .cf-section summary, .cf-results-head h2 { color: var(--ws-ink); }
.cf-section h2 > span, .cf-section small, .cf-section p, .cf-note, .cf-field { color: var(--ws-muted); }
.cf-upload { background: #fff; border-color: #94b9b8; }
.cf-upload:hover, .cf-upload.dragging { background: #edf9f5; border-color: #17998c; }
.cf-upload strong { color: #34555c; }
.cf-plus { color: var(--ws-teal); }
.cf-files img { background: var(--ws-subtle); }
.cf-files figcaption { color: var(--ws-muted); }
.cf-files button { background: #fff; color: var(--ws-ink); border-color: #bbcdd0; }
.cf-choices label { background: #fff; color: #405d63; border-color: var(--ws-line); }
.cf-choices label:has(:checked) { background: var(--ws-tint); color: var(--ws-teal); border-color: #5cac9e; }
.cf-counter { background: #eef3f4; color: var(--ws-ink); }
.cf-counter button { background: #fff; color: #34555c; border: 1px solid #cbdadd; }
.cf-toggle { color: #405d63; }
.cf-toggle input { background: #c3d0d3; }
.cf-toggle input:checked { background: var(--ws-teal); }
.cf-submit, .model-submit { background: #ffffffed; border-color: var(--ws-line); }
.cf-submit p, .model-submit p { color: var(--ws-muted); }
.cf-submit .cf-error, .rg-error { background: #fff0ee; color: #ab3030; }
.cf-results, .model-results { background: #fff; }
.cf-results-head span { color: var(--ws-teal); }
.cf-setting-impact { background: var(--ws-tint); border-color: #c6e5dd; color: #365f59; }
.cf-setting-impact strong { color: #174b43; }
.cf-setting-impact small { color: #51746c; }
.cf-section .model-anchor-choice, .model-anchor-choice { background: #eef7f4; border-color: #c6e5dd; }
.model-anchor-choice strong { color: #28574e; }
.model-anchor-choice div > span { color: #52706e; }
.model-anchor-on { background: #cfeee3; color: #186956; }
.model-anchor-off { background: #e4ecee; color: #536a70; }
.model-video-guide { background: #f1f8f5 !important; color: #426762 !important; border-color: #c6e5dd !important; }
.model-reference-picker select {
  color-scheme: light; background-color: #fff; color: var(--ws-ink); border-color: #cbdadd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%234c7073' stroke-width='1.5'/%3E%3C/svg%3E");
}
.model-reference-picker .hint, .model-picker-link { color: var(--ws-muted); }
.rg-hero, .rg-hero.rg-tall img { background: #f3f6f7; border-color: var(--ws-line); }
.rg-caption strong { color: var(--ws-ink); }
.rg-caption p { color: var(--ws-muted); }
.rg-caption > a, .cf-history-grid a { color: var(--ws-teal); }
.rg-thumbnails button, .rg-tabs button { background: #fff; border-color: #d0dfe2; color: var(--ws-muted); }
.rg-thumbnails button[aria-pressed="true"], .rg-tabs button[aria-pressed="true"] { background: var(--ws-tint); border-color: #49a899; color: var(--ws-teal); box-shadow: none; }
.rg-compare { background: #f7fafb; border-color: var(--ws-line); }
.rg-compare figure { background: #edf2f4; border-color: var(--ws-line); }
.rg-arrow { color: var(--ws-teal); }
.rg-product-chip { background: #fff; border-color: #58afa1; box-shadow: 0 6px 18px #20363b18; }
.rg-product-chip span { color: #28574e; }
.rg-processing, .rg-empty { background: #f3faf7; color: var(--ws-ink); border-color: #bfded6; }
.rg-processing h3 { color: var(--ws-ink); }
.rg-processing p { color: var(--ws-muted); }
.rg-processing > span:last-child, .rg-empty > span, .rg-progress { color: var(--ws-teal); }
.rg-pulse span { border-color: #199889; }
.cf-history-grid article, .cf-listing { background: #f6f9fa; border-color: var(--ws-line); }
#cf-asset-list button { color: var(--ws-ink); }

/* Commercial-video storyboard and approval. */
.pa-directions button, .pa-source-card, .pa-script, .pa-beat, .pa-output {
  background: #fff; color: var(--ws-ink); border-color: var(--ws-line);
}
.pa-directions button[aria-pressed="true"] { background: var(--ws-tint); border-color: #65b4a6; box-shadow: inset 3px 0 #18998b; }
.pa-directions small, .pa-examples small, .pa-treatment > small { color: var(--ws-muted); }
.pa-examples, .pa-preparation { border-color: var(--ws-line); color: #405d63; background: #fff; }
.pa-examples button, .pa-beat > span { color: var(--ws-teal); }
.pa-treatment, .pa-rationale, .pa-notes { background: #f0f9f5; color: #365f59; border-color: #c6e5dd; }
.pa-treatment > span, .pa-script-head { color: #3d7068; }
.pa-timeline span { background: #e8f7f2; color: #3d7068; border-color: #159989; }
.pa-timeline b, .pa-script-head strong { color: #28574e; }
.pa-script-head, .pa-approve { border-color: var(--ws-line); }
.pa-approve label { color: var(--ws-ink); }
.pa-source-card img { background: #f0f4f5; }
.pa-source-card button { background: #ecf2f3; color: #34555c; }
#pa-asset-list button { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
.pa-empty { background: #f3faf7; color: var(--ws-muted); border-color: #bfded6; }
.pa-empty h3 { color: var(--ws-ink); }
.pa-orb { background: #e4f5ee; color: var(--ws-teal); border-color: #b4dcd1; box-shadow: none; }
.pa-steps span { background: #fff; color: #51746c; border-color: #c6e5dd; }

/* Brand concepts and logo generation use the same light surfaces. */
.lai-workspace { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
.lai-brief, .lai-brief fieldset, .lai-range, .lai-result-header { border-color: var(--ws-line); }
.lai-brief p, .lai-hint, .lai-submit p, .lai-results > p, .lai-empty p { color: var(--ws-muted); }
.lai-brief label, .lai-brief legend, .lai-results h2, .lai-empty h3, .lai-concept h3 { color: var(--ws-ink); }
.lai-kicker, .lai-range output, .lai-range strong, .lai-concept > span { color: var(--ws-teal); }
.lai-submit { background: #fff; border-color: var(--ws-line); }
.lai-submit > span, .lai-empty > div, #lai-history label, .lai-create small { color: var(--ws-muted); }
.lai-submit p { color: #ab3030; }
.lai-empty { background: #f3faf7; color: var(--ws-ink); border-color: #bfded6; }
.lai-empty > span { color: var(--ws-teal); }
.lai-summary, .lai-rationale, .lai-concept { background: #f8fafb; color: var(--ws-ink); border-color: var(--ws-line); }
.lai-concept.selected { background: var(--ws-tint); border-color: #5daf9f; }
.lai-concept p, .lai-concept small, .lai-rationale p, .lai-rationale li, .lai-summary p, .lai-create p, .lai-job p { color: var(--ws-muted); }
#lai-history select { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
.lai-workspace button:focus-visible, .lai-workspace a:focus-visible { outline-color: var(--ws-teal); }
.lai-rationale strong { color: var(--ws-teal); }
.lai-rationale > div { border-color: var(--ws-line); }
.lai-warning { background: #fff6e6; color: #79581e !important; }
.lai-error { color: #ab3030; }
.lai-gallery figcaption { background: #f3f6f7; color: var(--ws-ink); }
.lai-gallery a, .lai-gallery button, .lai-job > span, .lai-job a { color: var(--ws-teal); }
.lai-create, .lai-job, .lai-gallery figure { border-color: var(--ws-line); }
.lai-concept.selected { box-shadow: inset 0 0 0 1px #5daf9f; }
body:not(.auth-locked) :is(.logo-progress, .logo-brief-panel, .logo-style-lab, .logo-concept, .logo-rationale, .logo-rationale-grid article, .logo-prompt, .logo-finish) { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
body:not(.auth-locked) :is(.logo-brief-panel > p, .logo-brief-panel label, .logo-results-head > span, .logo-concept-copy p, .logo-concept-copy small, .logo-rationale-grid p, .logo-finish p) { color: var(--ws-muted); }
body:not(.auth-locked) :is(.logo-start-modes button, .logo-style-grid button) { background: #f7fafb; color: var(--ws-ink); border-color: var(--ws-line); }
body:not(.auth-locked) :is(.logo-start-modes button.active, .logo-style-grid button.selected) { background: var(--ws-tint); border-color: #49a899; box-shadow: inset 0 0 0 1px #49a899; }

/* AI model generation and saved assets. */
.model-workbench { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
.model-config-section h2, .model-config-section h3, .model-results-head h2 { color: var(--ws-ink); }
.model-config-section label:not(.model-ratio-options label) { color: #405d63; }
.model-kicker { color: var(--ws-teal); }
.model-config-section p, .model-config-section small, .model-results-head p, .model-library-head p { color: var(--ws-muted); }
.model-ratio-options label { background: #fff; color: var(--ws-muted); border-color: var(--ws-line); }
.model-ratio-options label:has(:checked) { background: var(--ws-tint); color: var(--ws-teal); border-color: #5daf9f; }
.model-ratio-options span { background: #fff; color: #405d63; border-color: var(--ws-line); }
.model-ratio-options small { color: var(--ws-muted); }
.model-ratio-options input:checked + span { background: var(--ws-tint); color: var(--ws-teal); border-color: #5daf9f; }
.model-reference-option .secondary, .model-results-head .secondary, .model-preview-finish .secondary, #models-root .model-card .secondary { background: #fff; color: #33595e; border-color: #cbdadd; }
.model-config-submit { background: #fff; border-color: var(--ws-line); }
.model-config-submit > p:first-child, .model-preview-note, .model-field-note { color: var(--ws-muted); }
.model-config-submit .model-form-error { color: #ab3030; }
.model-config-scroll { scrollbar-color: #bdcfd1 transparent; }
.model-preview-frame { background: #f3f6f7; border-color: var(--ws-line); }
.model-preview-empty, .model-preview-loading, #models-root .model-empty { background: #f3faf7; color: var(--ws-muted); border-color: #bfded6; }
.model-preview-empty h3, .model-preview-loading h3 { color: var(--ws-ink); }
.model-preview-empty svg, .model-preview-loading svg { color: var(--ws-teal); }
.model-preview-state { background: #f3faf7; color: var(--ws-muted); border-color: #bfded6; }
.model-preview-state h3, .model-preview-finish > div { color: var(--ws-ink); }
.model-preview-state p, .model-preview-finish p { color: var(--ws-muted); }
.model-preview-state > span, .model-preview-state a { color: var(--ws-teal); }
.model-preview-loading .model-spinner { border-color: #c6e5dd; border-top-color: var(--ws-teal); }
#models-root { border-color: var(--ws-line); }
#models-root .model-card { background: #fff; border-color: var(--ws-line); color: var(--ws-ink); }
#models-root .model-card.is-default { border-color: #49a899; }
#models-root .model-card small, #models-root .model-card p, #models-root .model-empty p, #models-root .model-library-head p { color: var(--ws-muted); }
#models-root .model-photo { background: #edf2f4; }
#models-root .model-default-badge { background: var(--ws-tint); color: var(--ws-teal); border-color: #99c9bd; }
#models-root .model-card .text-button { color: var(--ws-teal); }
.model-reference-picker { border-color: var(--ws-line); color: #405d63; }
.model-reference-picker label, .model-reference-picker strong { color: #405d63; }
.model-reference-picker .hint, .model-reference-picker .model-anchor-choice span { color: var(--ws-muted); }
.model-reference-picker .model-picker-link { color: var(--ws-teal); }
.model-reference-picker .model-picker-preview img { background: var(--ws-subtle); }
.asset-results .ai-job { background: #fff; color: var(--ws-ink); border-color: var(--ws-line); }
.asset-results .ai-media { background: var(--ws-subtle); }
.asset-results .ai-job-meta h3 { color: var(--ws-ink); }
.asset-results .ai-job-actions a, .asset-results .ai-job-actions button, .asset-type { color: var(--ws-teal); }
/* Links and buttons share one control box so their labels stay aligned. */
body:not(.auth-locked) .ai-job-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
body:not(.auth-locked) .ai-job-actions > :is(button, a) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-height: 36px; max-width: 100%; margin: 0; padding: 8px 12px;
  border: 1px solid var(--ws-line); border-radius: 9px; background: var(--ws-surface);
  color: var(--ws-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body:not(.auth-locked) .ai-job-actions > :is(button, a):not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--ws-subtle); border-color: #a8c4c2; color: var(--ws-teal);
}
body:not(.auth-locked) .ai-job-actions > :is(button, a):not(:disabled):not([aria-disabled="true"]):active {
  background: var(--ws-tint); border-color: var(--ws-teal);
}
body:not(.auth-locked) .ai-job-actions > :is(button, a):focus-visible {
  outline: 2px solid var(--ws-teal); outline-offset: 3px;
}
body:not(.auth-locked) .ai-job-actions > :is(button, a):is(:disabled, [aria-disabled="true"]) {
  opacity: .5; cursor: not-allowed;
}
body:not(.auth-locked) .ai-job-actions > [hidden] { display: none; }
.ai-job-actions .ai-result-action svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ai-job-actions .ai-result-action span { min-width: 0; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  body:not(.auth-locked) .ai-job-actions > :is(button, a) { min-height: 44px; }
}
.asset-empty { background: #fff; border-color: var(--ws-line); color: var(--ws-ink); }
.asset-empty p { color: var(--ws-muted); }
.model-form-error { color: #ab3030; }

/* Account, credit packs and auxiliary dialogs remain in the light workspace. */
body:not(.auth-locked) dialog,
body:not(.auth-locked) .account-dialog[open],
body:not(.auth-locked) .model-dialog {
  background: #fff; color: var(--ws-ink); border-color: var(--ws-line); box-shadow: 0 18px 60px #20363b24;
}
body:not(.auth-locked) .account-dialog::backdrop { background: #20363b32; }
body:not(.auth-locked) :is(.account-header, .account-tabs, .account-footer),
.model-dialog .editor-head, .model-dialog .editor-foot { background: #fff; border-color: var(--ws-line); }
body:not(.auth-locked) .account-header h2,
body:not(.auth-locked) .account-content h3,
body:not(.auth-locked) .account-content h4 { color: var(--ws-ink); }
body:not(.auth-locked) .account-header .auth-eyebrow,
body:not(.auth-locked) .account-close,
body:not(.auth-locked) .account-tabs button { color: var(--ws-muted); }
body:not(.auth-locked) .account-close:hover { background: var(--ws-subtle); color: var(--ws-ink); }
body:not(.auth-locked) .account-tabs .is-active { color: var(--ws-teal); border-color: var(--ws-teal); }
body:not(.auth-locked) .account-content { background: #f8fafb; }
body:not(.auth-locked) .account-content .auth-hint,
body:not(.auth-locked) .billing-panel > [role="status"],
body:not(.auth-locked) .account-credits span { color: var(--ws-muted); }
body:not(.auth-locked) :is(.account-credits, .account-table-scroll, .billing-pack) { background: #fff; border-color: var(--ws-line); }
body:not(.auth-locked) .billing-pack:hover { background: #f4fbf8; border-color: #96c7bc; }
body:not(.auth-locked) .billing-pack > strong { color: var(--ws-teal); }
.membership-plans{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:20px}
.membership-plans .billing-pack{position:relative;padding:24px 18px!important;gap:8px!important}
.membership-plans .billing-pack>strong{font-size:32px}
.membership-plans ul{padding-left:18px;line-height:1.85;font-size:13px}
body:not(.auth-locked) .billing-pack.is-recommended{border:2px solid #33b6a6;background:#f3fbf8}
.member-recommend{font-size:11px;font-weight:700;color:#087566}
.membership-current,.membership-addons,.membership-balances{border:1px solid #cfe4de;border-radius:12px;background:#f5fbf9;padding:18px;margin:16px 0;display:grid;gap:9px}
.membership-current span,.membership-addons p,.membership-balances p{font-size:13px;line-height:1.7;margin:0;color:#44645d}
.membership-free{border:1px solid #d7e7e2;border-radius:12px;background:#fff;padding:16px;margin:16px 0;display:grid;gap:7px}
.membership-free h4,.membership-free p{margin:0;font-size:13px;line-height:1.6;color:#44645d}
.membership-free strong{font-size:18px;color:#137b6b}
.membership-free small{font-size:12px;color:#59756d}
.membership-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.member-resolution{padding:18px;border-bottom:1px solid #d7e7e2;background:#f5fbf9;display:grid;gap:8px;color:#204c43}
.member-resolution label{display:grid;gap:9px;font-size:13px;font-weight:650}
.member-resolution select{width:100%;min-height:40px;border:1px solid #c6ded7;border-radius:9px;background:#fff;color:#17483e;padding:8px 12px}
.member-resolution small{font-size:11px;line-height:1.6;color:#59756d}
.member-feature-notice{grid-column:1/-1;margin:0;padding:10px 18px;display:flex;gap:16px;justify-content:space-between;background:#eaf7f2;font-size:12px;line-height:1.7;color:#285f50;border-bottom:1px solid #c6e3d8}
.member-feature-notice[hidden]{display:none}
.member-feature-notice a{white-space:nowrap;color:#087867}
body:not(.auth-locked) .cf-workbench:has(>.member-feature-notice),body:not(.auth-locked) .lai-workspace:has(>.member-feature-notice),body:not(.auth-locked) .pkg-workbench:has(>.member-feature-notice){position:relative}
body:not(.auth-locked) :is(.cf-workbench,.lai-workspace,.pkg-workbench)>.member-feature-notice{position:absolute;left:0;right:0;top:0;z-index:2;border-radius:12px 12px 0 0}
body:not(.auth-locked) :is(.cf-workbench,.lai-workspace,.pkg-workbench):has(>.member-feature-notice:not([hidden])){padding-top:48px}
@media(max-width:1100px){.membership-plans{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.membership-plans{grid-template-columns:1fr!important}.member-feature-notice{flex-wrap:wrap}}
body:not(.auth-locked) .billing-pack .auth-primary { background: #38c9be; color: #083b36; }
body:not(.auth-locked) .billing-pack .auth-primary:not(:disabled):hover { background: #6bd9ce; }
body:not(.auth-locked) .account-footer button,
body:not(.auth-locked) .billing-panel .auth-secondary { background: #fff; color: #33595e; border-color: #cbdadd; }
body:not(.auth-locked) .account-users th, body:not(.auth-locked) .account-users td { border-color: var(--ws-line); }
body:not(.auth-locked) .account-users thead { background: #edf3f5; color: #405d63; }
.admin-analytics { background: #fff; color: var(--ws-ink); }
.analytics-note, .analytics-privacy { color: var(--ws-muted); }
.analytics-warning { background: #fff6e6; color: #79581e; }
.generation-credit-panel { background: var(--ws-tint); border-color: #c6e5dd; }
.credit-estimate { color: #28574e; }
.toast { background: #fff; color: var(--ws-ink); border: 1px solid var(--ws-line); box-shadow: 0 8px 30px #20363b1a; }
.prompt-library-toolbar input, .prompt-library-toolbar select, .style-panel input:not([type="color"]), .style-panel select, .style-panel textarea { background: #fff !important; color: var(--ws-ink) !important; border-color: #cbdadd !important; }
#editor[open], #editor .editor-body { background: #fff; color: var(--ws-ink); box-shadow: none; }
#editor .editor-head, #editor .editor-foot { background: #fff; border-color: var(--ws-line); }
#editor .editor-head h2 { color: var(--ws-ink); }
#editor .editor-settings, #editor .editor-details { background: #fafcfc; color: var(--ws-ink); border-color: var(--ws-line); }
#editor .editor-stage { background: #f3f6f7; }
#editor label, #editor .hint, #editor .stage-note { color: var(--ws-muted); }
#editor input:not([type="color"]), #editor select, #editor textarea { background: #fff; color: var(--ws-ink); border-color: #cbdadd; }
#editor .segment { background: #edf2f4; }
#editor .segment button { color: var(--ws-muted); }
#editor .segment button.active { background: var(--ws-tint); color: var(--ws-teal); }
#editor .secondary { background: #fff; color: #33595e; border-color: #cbdadd; }
#editor .canvas-wrap canvas { box-shadow: 0 12px 32px #20363b14; }
.cf-config, .cf-results, .model-config, .model-results, .lai-brief fieldset { scrollbar-color: #bdcfd1 transparent; }

/* Complete the active tool surfaces and their states. Scope these rules to the
   workspace rather than changing uploaded artwork, canvas colors or video media. */
body:not(.auth-locked) .hub-compose h2,
body:not(.auth-locked) .quick-start strong { color: var(--ws-ink); }
body:not(.auth-locked) .hub-compose > p,
body:not(.auth-locked) .hub-compose .model-tag,
body:not(.auth-locked) .quick-start :is(span, small, b) { color: var(--ws-muted); }
body:not(.auth-locked) .hub-compose .mode-tabs {
  background: var(--ws-subtle); border-color: var(--ws-line);
}
body:not(.auth-locked) .hub-compose .mode-tabs button { color: var(--ws-muted); }
body:not(.auth-locked) .hub-compose .mode-tabs button.active {
  background: var(--ws-tint); color: var(--ws-teal);
}
body:not(.auth-locked) .quick-start > :is(button, a) {
  background: var(--ws-surface); color: var(--ws-ink); border-color: var(--ws-line);
}
body:not(.auth-locked) .quick-start > :is(button, a):hover,
body:not(.auth-locked) :is(.template-card, .prompt-card):hover {
  background: var(--ws-subtle); border-color: #83b9b0; box-shadow: 0 8px 24px #20363b0c;
}
body:not(.auth-locked) .quick-start i,
body:not(.auth-locked) .business-poster-trigger i {
  background: var(--ws-tint); color: var(--ws-teal);
}
body:not(.auth-locked) .recent-badge,
body:not(.auth-locked) .rg-badge,
body:not(.auth-locked) .rg-compare figure > span,
body:not(.auth-locked) .rg-compare figcaption,
body:not(.auth-locked) .model-preview-frame > span {
  background: #fffffff2; color: var(--ws-ink); border-color: var(--ws-line);
}
body:not(.auth-locked) :is(.batch-card, .creative-helper) {
  background: var(--ws-surface); color: var(--ws-ink); border-color: var(--ws-line);
}
body:not(.auth-locked) .creative-helper h2 { color: var(--ws-ink); }
body:not(.auth-locked) .creative-helper :is(p, label, small) { color: var(--ws-muted); }
body:not(.auth-locked) .creative-plan-list article { border-color: var(--ws-line); }

/* AI writing stays beside the field; review results do not lengthen the brief. */
.creative-inline-field { position:relative; min-width:0; }
.creative-inline-label { display:block; min-height:29px; box-sizing:border-box; padding-right:102px; line-height:1.5; }
body:not(.auth-locked) .creative-inline-field > .cf-field { margin-bottom:0; gap:5px; }
body .creative-write-button { position:absolute; top:0; right:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:28px; padding:4px 8px; border:1px solid var(--ws-line,#dce6e7); border-radius:7px; background:var(--ws-surface,#fff); color:var(--ws-muted,#587075); font:inherit; font-size:11px; line-height:1.5; box-shadow:none; cursor:pointer; transition:background .16s,border-color .16s; }
body .creative-write-button:hover { background:var(--ws-subtle,#f6f9f9); border-color:#a9bec2; color:var(--ws-ink,#20383e); }
body .creative-write-button:focus-visible { outline:2px solid var(--ws-teal,#008678); outline-offset:2px; }
body .creative-write-button:disabled { opacity:.65; cursor:wait; }
body .creative-write-dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; box-sizing:border-box; border:1px solid var(--ws-line,#dce6e7); border-radius:14px; background:var(--ws-surface,#fff); color:var(--ws-ink,#20383e); box-shadow:0 20px 64px #20383e30; overflow:hidden; }
body .creative-write-dialog[open] { display:flex; flex-direction:column; }
.creative-write-dialog::backdrop { background:#173b414a; }
.creative-write-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:14px 20px; border-bottom:1px solid var(--ws-line,#dce6e7); }
.creative-write-dialog h2 { margin:0; font-size:17px; line-height:1.4; }
body .creative-write-close { display:grid; place-items:center; flex:none; width:32px; min-height:32px; border:1px solid var(--ws-line,#dce6e7); border-radius:7px; background:#fff; color:var(--ws-muted,#587075); padding:0; font-size:22px; }
.creative-write-body { padding:16px 20px; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.creative-write-body [data-creative-status] { margin:0 0 14px; font-size:12px; line-height:1.6; color:var(--ws-muted,#587075); }
.creative-write-body [data-creative-status]:empty { display:none; }
.creative-write-body [data-creative-status][data-state="error"] { padding:10px 12px; border:1px solid #ecd2ce; border-radius:8px; background:#fff8f6; color:#923e32; }
.creative-write-description { margin:0 0 12px; color:var(--ws-muted,#587075); }
.creative-write-warning { margin:0 0 14px; padding:10px 12px; border:1px solid #e5d8b9; border-radius:8px; background:#fffcf5; color:#805d26; }
.creative-write-body .creative-plan-list { display:grid; gap:12px; margin:18px 0 0; }
.creative-write-body .creative-plan-list article { min-width:0; padding:12px; border:1px solid var(--ws-line,#dce6e7); border-radius:10px; background:var(--ws-surface,#fff); }
.creative-write-body .creative-plan-list article > strong { display:block; font-size:13px; line-height:1.5; }
.creative-write-body .creative-plan-list article .cf-field { margin:10px 0 7px; }
.creative-write-body h3 { font-size:14px; margin:18px 0 10px; }
.creative-write-body .cf-field { display:flex; flex-direction:column; gap:6px; margin:14px 0 7px; font-size:12px; line-height:1.5; color:var(--ws-muted,#587075); }
.creative-write-body :is(input,textarea) { width:100%; max-width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid var(--ws-line,#dce6e7); border-radius:8px; background:#fff; color:var(--ws-ink,#20383e); font:inherit; font-size:13px; line-height:1.55; }
.creative-write-body textarea { min-height:116px; resize:vertical; }
.creative-write-body :is(p,.cf-note) { font-size:12px; line-height:1.65; }
.creative-write-dialog > footer { flex:none; padding:12px 20px; border-top:1px solid var(--ws-line,#dce6e7); }
.creative-write-dialog > footer:has([hidden]) { display:none; }
@media(pointer:coarse) { body .creative-write-button { min-height:36px; } .creative-inline-label { min-height:37px; } body .creative-write-close { width:40px; min-height:40px; } }
@media(prefers-reduced-motion:no-preference) { .creative-write-button.is-writing svg { animation:creative-write-pulse 1s ease-in-out infinite alternate; } @keyframes creative-write-pulse { to { opacity:.35; } } }

/* The same writing affordance in brand, packaging, model and storyboard fields. */
.field-write-field { width:100%; box-sizing:border-box; }
.field-write-field > :is(input,textarea), .field-write-field > label > :is(input,textarea) { width:100%; box-sizing:border-box; }
.field-write-field > label { display:flex; flex-direction:column; gap:5px; }
.field-write-field .creative-inline-label { font-size:inherit; font-weight:inherit; }
.field-write-dialog > footer { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
body .field-write-dialog > footer:has([hidden]) { display:flex; }
.field-write-dialog [data-field-result][hidden] { display:none; }
.pa-nine-table .field-write-field { margin:0 0 8px; }
.pa-nine-table .field-write-field .creative-inline-label { font-size:11px; color:var(--ws-muted,#587075); }
@media(max-width:480px) { .field-write-dialog > footer > button { flex:1; } }

/* Selected states must outrank the shared body-scoped card surface rule. */
body:not(.auth-locked) :is(.scene-card.selected, .studio-asset.selected, .variant-card.picked) {
  background: var(--ws-tint); border-color: var(--ws-teal); outline-color: var(--ws-teal);
}
body:not(.auth-locked) .batch-card progress,
body:not(.auth-locked) .studio-asset input,
body:not(.auth-locked) .variant-info input { accent-color: var(--ws-teal); }
body:not(.auth-locked) .style-panel :is(label, .hint),
body:not(.auth-locked) .batch-heading p { color: var(--ws-muted); }
body:not(.auth-locked) .variant-info a { color: var(--ws-teal); }
body:not(.auth-locked) #models-root .model-card.is-default {
  border-color: var(--ws-teal); box-shadow: 0 0 0 1px var(--ws-teal);
}
body:not(.auth-locked) .model-preview-frame .model-image-unavailable {
  color: var(--ws-muted); background: transparent;
}
body:not(.auth-locked) .model-preview-frame .model-image-unavailable > span {
  color: inherit; background: transparent;
}
body:not(.auth-locked) .lai-brief input[type="color"] {
  background: var(--ws-surface); border-color: var(--ws-line); color-scheme: light;
}
body:not(.auth-locked) .pa-advanced,
body:not(.auth-locked) .pa-nine-story,
body:not(.auth-locked) .pa-nine-table :is(th, td),
body:not(.auth-locked) .pa-nine-story details,
body:not(.auth-locked) .pa-video-prompt-box { border-color: var(--ws-line); }
body:not(.auth-locked) .pa-advanced { background: var(--ws-surface); color: var(--ws-ink); }
body:not(.auth-locked) .cf-prompt,
body:not(.auth-locked) .cf-listing small { color: var(--ws-muted); }
body:not(.auth-locked) .cf-prompt pre,
body:not(.auth-locked) #editor pre,
body:not(.auth-locked) .pa-character-input pre {
  background: var(--ws-subtle); color: var(--ws-ink);
}

/* The packaging sheet and local-poster style are loaded later. Body scoping
   keeps their control surfaces consistent without changing their artwork. */
body:not(.auth-locked) .pkg-upload,
body:not(.auth-locked) .pkg-wait { background: var(--ws-subtle); border-color: var(--ws-line); }
body:not(.auth-locked) .pkg-upload:hover { background: var(--ws-tint); border-color: var(--ws-teal); }
body:not(.auth-locked) :is(.pkg-stage, .pkg-flat, .pkg-flat-viewport, .business-poster-stage) {
  background: var(--ws-subtle); border-color: var(--ws-line);
}
body:not(.auth-locked) .pkg-preview-tag,
body:not(.auth-locked) .business-poster-dialog {
  background: var(--ws-surface); color: var(--ws-ink); border-color: var(--ws-line);
}
body:not(.auth-locked) :is(.pkg-size-label, .pkg-flat-legend, .pkg-flat-controls, .pkg-note p),
body:not(.auth-locked) :is(.business-poster-form label, .business-poster-head p, .business-poster-note) {
  color: var(--ws-muted);
}
body:not(.auth-locked) .pkg-view-tabs button[aria-pressed="true"],
body:not(.auth-locked) .pkg-face-tabs button[aria-pressed="true"] {
  background: var(--ws-tint); color: var(--ws-teal); border-color: var(--ws-teal);
}
body:not(.auth-locked) .pkg-flat-toolbar button:hover:not(:disabled) {
  background: var(--ws-tint); color: var(--ws-teal); border-color: var(--ws-teal);
}

/* Visible focus must also reach the labels of visually hidden ratio radios. */
body:not(.auth-locked) .cf-ratio-option input:focus-visible + span,
body:not(.auth-locked) .model-ratio-options input:focus-visible + span,
body:not(.auth-locked) .cf-product-tabs button:focus-visible,
body:not(.auth-locked) .cf-product-choice:focus-visible,
body:not(.auth-locked) #model-workbench-root :focus-visible,
body:not(.auth-locked) #models-root button:focus-visible,
body:not(.auth-locked) .model-reference-picker select:focus-visible,
body:not(.auth-locked) .pkg-workbench :focus-visible {
  outline: 2px solid var(--ws-teal); outline-offset: 3px;
}
body:not(.auth-locked) .cf-upload:focus-within {
  outline-color: var(--ws-teal);
}
body:not(.auth-locked) .lai-brief :is(input, textarea, select):focus,
body:not(.auth-locked) #lai-history select:focus { outline-color: var(--ws-teal); }
body:not(.auth-locked) .pa-workbench .cf-field:focus-within :is(input, textarea, select) {
  border-color: var(--ws-teal);
}
@media (prefers-reduced-motion: reduce) {
  body:not(.auth-locked) :is(button, a) { transition: none; }
}