/* Layered UI palette: keep media pixels and semantic error/success colors intact. */
html[data-ui-palette] {
  --ui-bg: hsl(var(--ui-hue) calc(30% * var(--ui-chroma,1)) 16%);
  --ui-shell: hsl(var(--ui-hue) calc(24% * var(--ui-chroma,1)) 11%);
  --ui-surface: hsl(var(--ui-hue) calc(21% * var(--ui-chroma,1)) 19%);
  --ui-raised: hsl(var(--ui-hue) calc(18% * var(--ui-chroma,1)) 24%);
  --ui-input: hsl(var(--ui-hue) calc(22% * var(--ui-chroma,1)) 13%);
  --ui-accent: hsl(var(--ui-hue) 62% 78%);
  --ui-action: hsl(var(--ui-hue) 42% 30%);
  --ui-border: hsl(var(--ui-hue) 20% 36%);
  --ui-text: hsl(var(--ui-hue) 20% 95%);
  --ui-muted: hsl(var(--ui-hue) 15% 77%);
  --ui-canvas: radial-gradient(ellipse at 75% 0%, hsl(var(--ui-hue) 42% 27% / .65), transparent 65%),
    linear-gradient(145deg, hsl(var(--ui-hue) 32% 18%), var(--ui-bg) 65%);
  color-scheme: dark;
}
/* Cover onboarding's black canvas as well as the storyboard/account pages. */
html[data-ui-palette] body,
html[data-ui-palette] body.pro-dark.pro-phase-onboarding {
  background: var(--ui-bg);
  background-image: var(--ui-canvas);
  background-attachment: fixed;
  color: var(--ui-text);
}
html[data-ui-palette] .pro-app-body { background: transparent; }
/* The conversation footer is sticky: match the viewport canvas, but remain
   opaque so scrolling messages cannot show through behind its controls. */
html[data-ui-palette] .onboarding-response-area {
  background: var(--ui-bg);
  background-image: var(--ui-canvas);
  background-attachment: fixed;
}
html[data-ui-palette] .gemini-bubble-user {
  background: var(--ui-action); color: var(--ui-text);
}
html[data-ui-palette] .onboarding-generate-control.is-complete {
  background: var(--ui-surface); border-color: var(--ui-border);
  box-shadow: 0 0 20px hsl(var(--ui-hue) 35% 45% / .09);
}
html[data-ui-palette] :is(.onboarding-question-progress-title, .onboarding-generate-control.is-complete .onboarding-generate-context) {
  color: var(--ui-accent);
}
html[data-ui-palette] :is(.onboarding-question-progress-detail, .onboarding-generate-control) {
  color: var(--ui-muted);
}
html[data-ui-palette] .onboarding-question-progress-track span { background: var(--ui-accent); }
html[data-ui-palette] :is(.pro-header, .pro-history-rail, .account-header, .preset-library-tab) {
  background: var(--ui-shell) !important; border-color: var(--ui-border);
}
html[data-ui-palette] :is(.pro-card, .pro-chat-panel, .account-panel, .material-editor-dialog,
  .preset-material-drawer, .composer-plus-menu, .composer-upload-menu, .material-workbench,
  .storyboard-import-form, .creation-basics, .video-replication-card, .video-trim-dialog) {
  background: var(--ui-surface) !important; border-color: var(--ui-border);
  box-shadow: 0 8px 28px hsl(var(--ui-hue) 30% 3% / .18);
}
html[data-ui-palette] :is(.composer-bar, .chat-bot, .opt-chip, .material-editor-header,
  .material-editor-footer, .btn-secondary, .account-button, .creation-basic-field,
  .preset-library-search, .session-asset-group > summary, .preset-material-drawer > header) {
  background: var(--ui-raised) !important; border-color: var(--ui-border);
}
html[data-ui-palette] :is(.pro-input, .editable-textarea, .editable-input,
  .creation-reference-fields input, .creation-reference-fields textarea, .creation-reference-fields select,
  .personal-library-filters select, .preset-library-search input, .account-share input) {
  background: var(--ui-input) !important; border-color: var(--ui-border); color: var(--ui-text);
}
html[data-ui-palette] :is(.pro-input, .editable-textarea, .editable-input)::placeholder { color: var(--ui-muted); }
html[data-ui-palette] :is(.pro-text-dim, .pro-text-muted, .account-heading p, .account-section-heading p,
  .account-meta, .account-footnote, .account-metric > span, .account-metric > small) { color: var(--ui-muted); }
html[data-ui-palette] .pro-text-body { color: var(--ui-text); }
html[data-ui-palette] :is(.btn-primary, .chat-user, .account-button.is-primary, .pro-progress-fill) {
  background: var(--ui-action) !important; color: #fff;
}
html[data-ui-palette] :is(.btn-primary, .btn-secondary, .account-button, .opt-chip):hover:not(:disabled) {
  border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent);
}
html[data-ui-palette] :is(.creation-mode-option.is-active, .pro-history-item.is-active, .seg-card-selected,
  .account-metric.is-highlight, .video-replication-card.is-active) {
  background: linear-gradient(135deg, var(--ui-raised), var(--ui-surface)) !important;
  border-color: var(--ui-accent);
}
html[data-ui-palette] :is(a.pro-link, .account-text-link, .account-eyebrow) { color: var(--ui-accent) !important; }
html[data-ui-palette] :is(.pro-input, .editable-textarea, .editable-input, .composer-bar):focus-within {
  border-color: var(--ui-accent); box-shadow: 0 0 0 2px hsl(var(--ui-hue) 50% 70% / .2);
}
html[data-ui-palette] .landing-bg { background: var(--ui-bg); background-image: var(--ui-canvas); }
html[data-ui-palette] .landing-bg .overlay {
  background: linear-gradient(135deg, hsl(var(--ui-hue) 32% 16% / .86), hsl(var(--ui-hue) 30% 23% / .72));
}
#ui-palette { position:fixed; z-index:40; left:0; top:58%; font:13px/1.5 Inter,system-ui,sans-serif; color:#e2e8f0; }
#ui-palette * { box-sizing:border-box; }
#ui-palette button { cursor:pointer; font:inherit; color:inherit; }
#ui-palette button:focus-visible, #ui-palette input:focus-visible { outline:2px solid var(--ui-accent,#a5b4fc); outline-offset:4px; }
#ui-palette .ui-palette-tab { position:relative; display:grid; place-items:center; width:52px; height:48px; padding:0 0 0 12px; transform:translateX(-20px); border:1px solid var(--ui-border,#3b4257); border-left:0; border-radius:0 16px 16px 0; background:var(--ui-raised,#202535); box-shadow:3px 3px 16px #0004; transition:transform 160ms ease; }
#ui-palette .ui-palette-tab svg { width:22px; height:22px; }
#ui-palette .ui-palette-tab:hover, #ui-palette .ui-palette-tab:focus-visible, #ui-palette.is-open .ui-palette-tab { transform:translateX(0); }
.ui-palette-tooltip { position:absolute; left:calc(100% + 9px); padding:5px 10px; border-radius:7px; background:#252b3a; color:#fff; white-space:nowrap; opacity:0; pointer-events:none; }
.ui-palette-tab:hover .ui-palette-tooltip, .ui-palette-tab:focus-visible .ui-palette-tooltip { opacity:1; }
#ui-palette.is-open .ui-palette-tooltip { display:none; }
#ui-palette-panel { position:absolute; left:62px; top:0; transform:translateY(-50%); width:min(280px,calc(100vw - 76px)); max-height:80dvh; overflow:auto; padding:18px; border:1px solid var(--ui-border,#3b4257); border-radius:18px; background:var(--ui-surface,#151820); box-shadow:0 16px 50px #0006; }
#ui-palette-panel[hidden] { display:none !important; }
#ui-palette-panel header { display:flex; justify-content:space-between; align-items:start; gap:8px; }
#ui-palette-panel strong { font-size:16px; }
#ui-palette-panel p { margin:4px 0 0; color:#aeb9cb; font-size:11px; }
#ui-palette .ui-palette-close { background:transparent; border:0; border-radius:6px; font-size:24px; line-height:1; padding:2px 5px; }
.ui-palette-swatches { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0; }
#ui-palette .ui-palette-swatches button { display:flex; align-items:center; gap:7px; background:#ffffff05; border:1px solid #ffffff18; border-radius:9px; padding:9px 6px; font-size:12px; }
.ui-palette-swatches button::before { content:''; width:13px; height:13px; flex:none; border-radius:50%; background:var(--swatch); }
#ui-palette .ui-palette-swatches button[aria-pressed=true] { border-color:var(--swatch); background:#ffffff0d; box-shadow:inset 0 0 0 1px var(--swatch); }
.ui-palette-custom { display:block; font-size:12px; }
.ui-palette-custom span { display:block; color:#aeb9cb; font-size:11px; margin-top:3px; }
#ui-palette-hue { appearance:none; display:block; width:100%; height:10px; margin:16px 0; border-radius:8px; background:linear-gradient(to right,#d98c8c,#d9d98c,#8cd98c,#8cd9d9,#8c8cd9,#d98cd9,#d98c8c); cursor:pointer; }
#ui-palette-hue::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#354052; box-shadow:0 1px 5px #0008; }
#ui-palette-hue::-moz-range-thumb { width:13px; height:13px; border:3px solid #fff; border-radius:50%; background:#354052; }
@media (prefers-reduced-motion:reduce) { #ui-palette .ui-palette-tab { transition:none; } }

[dir="rtl"] #ui-palette { left:auto; right:0; }
[dir="rtl"] #ui-palette .ui-palette-tab { padding:0 12px 0 0; transform:translateX(20px); border-left:1px solid var(--ui-border,#3b4257); border-right:0; border-radius:16px 0 0 16px; }
[dir="rtl"] #ui-palette .ui-palette-tab:hover, [dir="rtl"] #ui-palette.is-open .ui-palette-tab { transform:translateX(0); }
[dir="rtl"] .ui-palette-tooltip { left:auto; right:calc(100% + 9px); }
[dir="rtl"] #ui-palette-panel { left:auto; right:62px; }

/* Shared/personal asset scopes use the same palette as their drawer. */
html[data-ui-palette] :is(.resource-library-tabs, .personal-asset-upload) {
  background: var(--ui-raised); border-color: var(--ui-border);
}
html[data-ui-palette] .resource-library-tabs button {
  background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border);
}
html[data-ui-palette] .resource-library-tabs button:hover {
  background: var(--ui-raised); color: var(--ui-text); border-color: var(--ui-accent);
}
html[data-ui-palette] .resource-library-tabs button.is-active {
  background: var(--ui-action); color: var(--ui-text); border-color: var(--ui-accent);
}
html[data-ui-palette] .resource-library-tabs button:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 2px;
}
html[data-ui-palette] .preset-material-drawer :is(.preset-theme, .preset-category, .session-asset-group) {
  border-color: var(--ui-border);
}
html[data-ui-palette] .preset-material-drawer :is(.preset-theme, .preset-category, .session-asset-group) > summary {
  color: var(--ui-text);
}
html[data-ui-palette] .preset-material-drawer :is(.preset-category, .session-asset-group)[open] > summary {
  background: var(--ui-raised);
}
html[data-ui-palette] .preset-material-drawer :is(.preset-tree-count, .preset-tree-arrow, .preset-search-summary) {
  color: var(--ui-muted);
}
html[data-ui-palette] .preset-material-drawer :is(.personal-library-filters button, .session-asset-group .preset-material-item > button) {
  background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border);
}
html[data-ui-palette] .preset-material-drawer :is(.personal-library-filters button, .session-asset-group .preset-material-item > button):hover:not(:disabled) {
  background: var(--ui-raised); border-color: var(--ui-accent);
}

/* Mode changes only semantic colors; never filter or recolor generated media. */
html[data-ui-mode="light"] {
  --ui-bg: hsl(var(--ui-hue,230) calc(35% * var(--ui-chroma,1)) 96%);
  --ui-shell: hsl(var(--ui-hue,230) calc(28% * var(--ui-chroma,1)) 98%);
  --ui-surface: hsl(var(--ui-hue,230) calc(30% * var(--ui-chroma,1)) 99%);
  --ui-raised: hsl(var(--ui-hue,230) calc(32% * var(--ui-chroma,1)) 92%);
  --ui-input: hsl(var(--ui-hue,230) calc(25% * var(--ui-chroma,1)) 99%);
  --ui-accent: hsl(var(--ui-hue,230) 55% 32%);
  --ui-action: hsl(var(--ui-hue,230) 45% 30%);
  --ui-border: hsl(var(--ui-hue,230) 20% 74%);
  --ui-text: hsl(var(--ui-hue,230) 25% 16%);
  --ui-muted: hsl(var(--ui-hue,230) 16% 36%);
  --ui-canvas: radial-gradient(ellipse at 75% 0%, hsl(var(--ui-hue,230) 48% 88% / .5), transparent 65%), linear-gradient(145deg, hsl(var(--ui-hue,230) 40% 97%), var(--ui-bg) 65%);
  color-scheme: light;
}
#ui-palette { color:var(--ui-text,#e2e8f0); }
#ui-palette-panel p, .ui-palette-custom span { color:var(--ui-muted,#aeb9cb); }
.ui-palette-modes { display:flex; gap:6px; margin-top:14px; }
#ui-palette .ui-palette-modes button { flex:1; padding:8px 4px; border-radius:9px; border:1px solid var(--ui-border,#3b4257); background:var(--ui-input,#10131d); }
#ui-palette .ui-palette-modes button[aria-pressed=true] { background:var(--ui-action,#343c66); color:white; border-color:var(--ui-accent,#a5b4fc); }
html[data-ui-mode="light"] #ui-palette .ui-palette-swatches button { background:var(--ui-surface); border-color:var(--ui-border); }
html[data-ui-mode="light"] #ui-palette .ui-palette-swatches button[aria-pressed=true] { background:var(--ui-raised); border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent); }
html[data-ui-mode="light"] .ui-palette-tooltip { background:var(--ui-text); color:white; }
html[data-ui-mode="light"] .resource-library-tabs button.is-active,
html[data-ui-mode="light"] .gemini-bubble-user { background:var(--ui-raised); color:var(--ui-text); }

html[data-ui-palette="neutral"] { --ui-accent:#d4d4d4; --ui-action:#363636; --ui-border:#515151; --ui-text:#f4f4f4; --ui-muted:#bdbdbd; --ui-bg:#090909; --ui-shell:#101010; --ui-surface:#171717; --ui-raised:#242424; --ui-input:#111; --ui-canvas:none; }
html[data-ui-mode="light"][data-ui-palette="neutral"] { --ui-bg:#fff; --ui-shell:#fff; --ui-surface:#fff; --ui-raised:#f3f3f3; --ui-input:#fff; --ui-accent:#333; --ui-action:#333; --ui-border:#bcbcbc; --ui-text:#171717; --ui-muted:#525252; --ui-canvas:none; }
#ui-palette-saturation { display:block; width:100%; margin:10px 0 16px; accent-color:var(--ui-accent,#a5b4fc); }
.ui-palette-swatches button::before { box-shadow:inset 0 0 0 1px #8888; }
html[data-ui-palette="neutral"] .landing-bg .overlay { background:var(--ui-bg); opacity:.9; }