/* UI colors only: photo pixels, canvas rendering and palette colors stay intact. */
:root {
  color-scheme: light;
  --theme-panel: #fffdf9;
  --theme-hover: #f8ece3;
  --theme-shadow: 0 12px 40px #2a1d1424;
}

.theme-picker { position: relative; align-self: center; flex: none; z-index: 30; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.theme-toggle::-webkit-details-marker { display: none; }
.theme-toggle::marker { content: ''; }
.theme-toggle svg { width: 21px; height: 21px; }
.theme-picker[open] .theme-toggle { background: var(--accent-soft); border-color: var(--accent); }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--theme-panel);
  color: var(--ink);
  box-shadow: var(--theme-shadow);
}
.theme-menu fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-menu legend { padding: 0 0 10px; font-size: 14px; font-weight: 600; }
.theme-menu label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.theme-menu label:has(:checked) { background: var(--accent-soft); color: var(--accent); }
.theme-menu input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.theme-menu small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.theme-menu p { margin: 12px 9px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (hover: hover) {
  .theme-toggle:hover, .theme-menu label:hover { background: var(--theme-hover); }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Warm night: espresso surfaces, cream ink and a lighter coral accent. */
  --accent: #f39b7d;
  --accent-soft: #3a2a23;
  --line: #463a33;
  --muted: #c4b5aa;
  --ink: #f6eee6;
  --surface: #211b18;
  --surface-raised: #2b2420;
  --surface-hover: #372d28;
  --theme-panel: #2b2420;
  --theme-hover: #372d28;
  --theme-shadow: 0 12px 40px #0006;
  --on-accent: #2a140c;
  --error: #ffb3a6;
  --error-bg: #46241e;
  --success: #a8d8b6;
  --success-bg: #23372b;
  --warning: #f2c983;
  --warning-bg: #3d3021;
  --band-bg: linear-gradient(135deg, #2a201b 0%, #33241d 60%, #3b271e 100%);
  --band-ink: #f6eee6;
  --band-muted: #d6c6ba;
  --band-line: #ffffff1f;
  --band-em: #f6b48f;
  --band-ring: #f39b7d24;
  background: #171310;
  color: var(--ink);
}

:root[data-theme="dark"] ::selection { background: #8a4a35; color: #fff; }
:root[data-theme="dark"] :is(button, a, input, select, textarea, summary):focus-visible { outline-color: var(--accent); }
:root[data-theme="dark"] :is(.brand, .intent-row button, .hairstyle-options button, .beauty-choices button, .pack-card, .journey-tabs button) { color: var(--ink); }
:root[data-theme="dark"] :is(.photo-toolbar, .view-switch button, .swatch, .experience-steps button,
  .journey > summary small, .journey-card p, .hairstyle-options span, .beauty-tip,
  .comparison-help, .seo-links, .recommendation label, .rec-explanation,
  .consultant-note, .consultant-summary, .mask-tools p, .analytics-preferences) { color: var(--muted); }
:root[data-theme="dark"] .idea-body { color: var(--ink) !important; }

:root[data-theme="dark"] :is(select, textarea, .account-dialog input:not([type=checkbox]),
  .journey-fields input, .journey-fields select, .journey textarea, .feedback-form select,
  .custom-color-label input, .consultant-panel textarea) {
  background-color: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: #ab9c91; opacity: 1; }
:root[data-theme="dark"] :is(.view-switch, .segmented, .range-heading output,
  .section-title > .small-label, .experience-steps button span, .nav-button span,
  .quick-shades, .selected-shade, .recommendation, .photo-consent, .beauty-tip,
  .balance-card, .recovery-code, .empty-note, .idea-reply, .idea-status,
  .catalog-empty, .feedback-form, .guest-note, .quality-stats) {
  background: var(--surface-raised);
  border-color: var(--line);
}
:root[data-theme="dark"] :is(.makeup-presets button, .prompt-chips button, .brush-actions button,
  .hairstyle-options button, .beauty-choices button, .journey-tabs button,
  .journey-card, .catalog-card, .pack-card, .vote-button, .rec-chip,
  .analysis-progress, .retry, .analytics-consent, .analytics-preferences,
  .signin-card, .photo-column .consultant-panel) {
  background: var(--surface);
  border-color: var(--line);
}
:root[data-theme="dark"] :is(.makeup-presets button, .prompt-chips button, .brush-actions button) { color: var(--ink); }
:root[data-theme="dark"] .save-area #current-master-card { background: var(--surface-raised); }
:root[data-theme="dark"] .photo-panel { background: var(--surface); }
:root[data-theme="dark"] .photo-stage { background: #1c1714; }
:root[data-theme="dark"] .portrait-wrap { background: #27201c; box-shadow: 0 8px 32px #0003; }
:root[data-theme="dark"] .status-pill { color: var(--muted); background: #2b2420f2; border-color: var(--line); }
:root[data-theme="dark"] .image-labels span { background: #211b18ed; color: var(--ink); }
:root[data-theme="dark"] .comparison-toolbar { background: #171310f5; }
:root[data-theme="dark"] .experience-steps button + button::before { background: var(--line); }
:root[data-theme="dark"] :is(.hairstyle-picker, .eye-details, .catalog-group, .mask-tools) { border-color: var(--line); }
:root[data-theme="dark"] .tools-scroll { scrollbar-color: #6a5549 transparent; }
:root[data-theme="dark"] dialog::backdrop { background: #0a0807b3; }
:root[data-theme="dark"] #signin-gate { background: #171310bb; }
:root[data-theme="dark"] #toast { background: #f3e8de; color: #2a140c; box-shadow: 0 4px 30px #0004; }

/* Selected controls keep a distinct fill and a readable foreground. */
:root[data-theme="dark"] :is(.intent-row [aria-pressed=true], .hairstyle-options [aria-pressed=true],
  .beauty-choices [aria-pressed=true], .vote-button[aria-pressed=true], .welcome-credit) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
:root[data-theme="dark"] :is(.view-switch button[aria-pressed=true], .segmented button[aria-pressed=true]) { background: var(--surface-hover); color: var(--accent); }
:root[data-theme="dark"] :is(.journey-card[aria-pressed=true], .catalog-card.selected) { border-color: var(--accent); }
:root[data-theme="dark"] :is(.swatch[aria-pressed=true], .experience-steps [aria-current]) { color: var(--accent); }
:root[data-theme="dark"] :is(.primary, .brush-actions button[aria-pressed=true],
  .journey-tabs button[aria-selected=true], .experience-steps [aria-current] span) { background: var(--accent); color: var(--on-accent); }
:root[data-theme="dark"] .dark { background: #f3e8de; color: #1f1a17; }
:root[data-theme="dark"] :is(.status-pill.error, .form-error) { color: var(--error); }
:root[data-theme="dark"] .status-pill.error { background: var(--error-bg); border-color: #9c5a4b; }
:root[data-theme="dark"] :is(.status-planned, .status-working, .restore-ai) { background: var(--warning-bg); color: var(--warning); border-color: #7d6440; }
:root[data-theme="dark"] .status-done { background: var(--success-bg); color: var(--success); }
:root[data-theme="dark"] .idea-bonus { color: var(--success); }
@media (hover: hover) {
  :root[data-theme="dark"] .primary:hover:not(:disabled) { background: #f7b39a; }
  :root[data-theme="dark"] .dark:hover:not(:disabled) { background: #fbf6ef; }
  :root[data-theme="dark"] :is(.secondary:hover:not(:disabled), .dialog-x:hover,
    .swatch:hover:not(:disabled), .category-tabs button:hover, button.pack-card:hover) { background: var(--surface-hover); border-color: var(--accent); }
}

@media (max-width: 760px) {
  .topbar nav { gap: 4px; }
  .topbar nav :is(#studio-nav, #saved-nav, #ideas-button) { flex: 1 1 auto; }
  .theme-picker { margin-left: 4px; }
}
@media (max-width: 359px) {
  .topbar nav :is(#studio-nav, #saved-nav, #ideas-button) { font-size: 11px; }
}