/* The editor remains dark by default and follows the protected host only after
   an explicit same-origin PXLTAB theme message. Layout and editor behavior are
   intentionally unchanged. */

/* The isolated editor opts into the same menu tokens used by User and Debug.
   Native selects remain the application state owner. */
.pxds-menu-scope {
  --pxds-surface-1: #111720;
  --pxds-surface-2: #151d27;
  --pxds-surface-3: #1b2531;
  --pxds-border: #354252;
  --pxds-border-strong: #607086;
  --pxds-text: #f4f7fb;
  --pxds-text-subtle: #8d99aa;
  --pxds-brand: #58d2c5;
  --pxds-brand-fill: linear-gradient(110deg, #0a615d, #393382);
  --pxds-hover-surface: #1d2431;
  --pxds-shadow-layer-1: 0 22px 56px rgba(0, 0, 0, 0.42);
  --pxds-shadow-layer-2: 0 12px 30px rgba(0, 0, 0, 0.32);
  --pxds-motion-fast: 160ms;
  --pxds-type-status: 10px;
  --color-success: #67ddb3;
  --color-success-surface: #13221d;
}

html[data-theme="light"] .pxds-menu-scope {
  --pxds-surface-1: #ffffff;
  --pxds-surface-2: #f7f9fc;
  --pxds-surface-3: #eef2f6;
  --pxds-border: #cbd4e0;
  --pxds-border-strong: #748195;
  --pxds-text: #10141c;
  --pxds-text-subtle: #687386;
  --pxds-brand: #075f59;
  --pxds-brand-fill: linear-gradient(110deg, #075f59, #2f2a78);
  --pxds-hover-surface: #f0f0f2;
  --pxds-shadow-layer-1: 0 20px 48px rgba(17, 29, 45, 0.12);
  --pxds-shadow-layer-2: 0 10px 26px rgba(17, 29, 45, 0.09);
  --color-success: #0b7657;
  --color-success-surface: #e7f7f1;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #edf0f4;
  --line: rgba(11, 11, 12, 0.10);
  --line-strong: rgba(11, 11, 12, 0.18);
  --text: #0b0b0c;
  --muted: #626872;
  --muted-2: #818894;
  --accent: #0b7657;
  --accent-ink: #ffffff;
  --cyan: #3157d5;
  --danger: #a62820;
  --success: #0b7657;
  --shadow: 0 18px 50px rgba(16, 24, 40, 0.12);
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .app-shell {
  color: var(--text);
  background: var(--bg);
}

html[data-theme="light"] :is(.toolrail, .workspace, .inspector, .canvas-toolbar, .workspace-status, .inspector-footer) {
  color: var(--text);
  background: var(--surface);
}

html[data-theme="light"] .topbar {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

html[data-theme="light"] .lab-boundary {
  border-color: rgba(11, 118, 87, 0.24);
  color: #176044;
  background: #eef9f5;
}

html[data-theme="light"] :is(
  .brand-product,
  .version-chip,
  .panel-heading p,
  .empty-state p,
  .upload-rules,
  .workspace-status,
  .field small,
  .empty-panel p
) {
  color: var(--muted);
}

html[data-theme="light"] .checkerboard {
  background-color: #f1f3f6;
  background-image:
    linear-gradient(45deg, #e7eaee 25%, transparent 25%),
    linear-gradient(-45deg, #e7eaee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e7eaee 75%),
    linear-gradient(-45deg, transparent 75%, #e7eaee 75%);
}

html[data-theme="light"] :is(
  .region-palette,
  .field input[type="text"],
  .field textarea,
  .field select,
  .annotation-preview,
  .package-output pre,
  .backend-rule-receipt,
  .prompt-rule-card-diff,
  .prompt-rule-diff-line,
  .history-card img
) {
  color: var(--text);
  background: var(--surface-2);
}

html[data-theme="light"] .region-palette::before {
  background: var(--surface-2);
}

html[data-theme="light"] :is(.smart-pricing-popover, .region-palette, .canvas-badge, .tool-hint) {
  border-color: var(--line-strong);
  color: #4f5968;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .smart-pricing-popover::before {
  border-color: var(--line-strong);
  background: #ffffff;
}

html[data-theme="light"] .empty-state {
  color: var(--text);
  background: radial-gradient(circle at center, #ffffff, #e9edf2 72%);
}

html[data-theme="light"] .empty-panel {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
}

html[data-theme="light"] :is(.opacity-control output, .brush-size-control output) {
  color: var(--text);
}

html[data-theme="light"] :is(.tool-button, .icon-button, .small-icon, .inspector-tabs button) {
  color: var(--muted);
}

/* Theme changes must never pass through a low-contrast intermediate state. */
html[data-theme="light"] :is(.button, .tool-button, .icon-button, .small-icon, .inspector-tabs button) {
  transition-property: transform, border-color, box-shadow;
}

html[data-theme="light"] :is(.tool-button:hover, .icon-button:hover, .small-icon:hover) {
  color: var(--text);
}

/* Light mode keeps the editor's active state readable before the shared
   PXLTAB selected-state treatment below is applied. */
html[data-theme="light"] .tool-button.active {
  border-color: #075d46;
  color: #ffffff;
  background: #0b7657;
  box-shadow: inset 0 0 0 1px rgba(5, 71, 52, 0.18);
}

html[data-theme="light"] .tool-button.active kbd {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .segmented button.active {
  color: #ffffff;
  background: #0b7657;
}

html[data-theme="light"] .inspector-tabs button.active {
  color: #075d46;
}

html[data-theme="light"] .inspector-tabs button.active::after {
  background: #0b7657;
}

html[data-theme="light"] .tool-group-separator::after {
  background: #147a5d;
  box-shadow: none;
}

html[data-theme="light"] .mini-orbit {
  border-color: #0b7657;
  background: rgba(11, 118, 87, 0.06);
  box-shadow: inset 0 0 0 9px rgba(11, 118, 87, 0.14);
}

html[data-theme="light"] .history-card:hover,
html[data-theme="light"] .history-card.active {
  border-color: rgba(11, 118, 87, 0.68);
  background: rgba(11, 118, 87, 0.10);
}

html[data-theme="light"] .button.primary {
  border-color: #0b7657;
  color: #ffffff;
  background: #0b7657;
}

/* Upload is a primary PXLTAB action, not a semantic success action. */
#emptyUploadButton {
  border-color: rgba(130, 167, 255, 0.62);
  color: #ffffff;
  background: var(--pxltab-selected-gradient);
  box-shadow: 0 8px 20px rgba(10, 25, 49, 0.20);
}

#emptyUploadButton:is(:hover, :focus-visible) {
  border-color: rgba(130, 167, 255, 0.82);
  background: var(--pxltab-selected-gradient);
  box-shadow: 0 8px 24px rgba(74, 93, 231, 0.24), 0 8px 20px rgba(58, 242, 176, 0.16);
}

html[data-theme="light"] .smart-tool-button,
html[data-theme="light"] .smart-tool-button:hover,
html[data-theme="light"] .smart-tool-button:focus-visible {
  border-color: #9a7200;
  color: #704f00;
  background: #fff7df;
}

html[data-theme="light"] .smart-tool-button kbd,
html[data-theme="light"] :is(.pricing-eyebrow, .pricing-credit) {
  color: #704f00;
}

html[data-theme="light"] :is(.button.secondary, .button.ghost) {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
}

html[data-theme="light"] .button:disabled {
  opacity: 1;
  border-color: #c5cbd3;
  color: #525b68;
  background: #e4e8ed;
}

html[data-theme="light"] .button:disabled :is(span, svg) {
  color: inherit;
}

html[data-theme="light"] :is(.modal-card, .result-shell, .prompt-system-view, .prompt-system-header, .prompt-system-tabs) {
  color: var(--text);
  background: var(--surface);
}

html[data-theme="light"] :is(
  .prompt-system-card,
  .prompt-system-metric,
  .prompt-system-rule-card,
  .prompt-system-section-card,
  .prompt-system-empty-card,
  .prompt-system-build-create,
  .prompt-system-build-card,
  .prompt-review-form,
  .prompt-review-failure,
  .prompt-system-rule-scope,
  .prompt-system-directive
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-2);
}

/* Selected controls use the same teal -> blue -> purple language as the
   Workflow User UI. Semantic colors (RGB locator regions, Good/Bad feedback,
   warnings, and destructive actions) remain untouched. */
html {
  --pxltab-selected-gradient: linear-gradient(110deg, #044940 0%, #0b4050 48%, #312367 100%);
  --pxltab-selected-border: rgba(130, 167, 255, 0.66);
  --pxltab-selected-shadow: 0 8px 24px rgba(10, 25, 49, 0.28);
}

html[data-theme] :is(
  .tool-button.active,
  .segmented button.active,
  .placed-image-controls button.active,
  .prompt-system-tabs button.active
) {
  border-color: var(--pxltab-selected-border);
  color: #ffffff;
  background: var(--pxltab-selected-gradient);
  box-shadow: var(--pxltab-selected-shadow);
}

html[data-theme] :is(
  .tool-button.active,
  .segmented button.active,
  .placed-image-controls button.active,
  .prompt-system-tabs button.active
) :is(span, kbd, svg) {
  color: inherit;
}

html[data-theme] .tool-button.active kbd {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme] .inspector-tabs button.active {
  color: var(--cyan);
}

html[data-theme] .inspector-tabs button.active::after {
  background: var(--pxltab-selected-gradient);
}

html[data-theme="light"] .history-card:hover,
html[data-theme="light"] .history-card.active {
  border-color: rgba(54, 87, 200, 0.62);
  background: linear-gradient(110deg, rgba(4, 73, 64, 0.08), rgba(49, 35, 103, 0.10));
}

html[data-theme="light"] :is(
  .prompt-system-card,
  .prompt-system-rule-card,
  .prompt-system-section-card,
  .prompt-system-build-card,
  .prompt-review-form,
  .prompt-review-failure
) :is(p, small, li, span) {
  color: var(--muted);
}

html[data-theme="light"] :is(
  .prompt-system-build-create input,
  .prompt-system-build-create textarea,
  .prompt-review-form select,
  .prompt-review-form textarea,
  .prompt-rule-field textarea
) {
  border-color: var(--line-strong);
  color: var(--text);
  background: #ffffff;
}

html[data-theme="light"] .result-stage {
  background: radial-gradient(circle at center, #ffffff, #e9edf2 72%);
}

html[data-theme="light"] :is(.toast, .compare-label) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] :is(.base-crop-controls, .expand-canvas-controls) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.generation-resolution {
  display: grid;
  grid-template-columns: auto minmax(92px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 5px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface-2);
}

.generation-resolution > span {
  font-size: 10px;
  font-weight: 800;
}

.generation-resolution select {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0 28px 0 9px;
  color: var(--text);
  background: var(--surface);
  font-size: 10px;
  font-weight: 750;
}

.generation-resolution .pxds-select {
  width: 100%;
}

/* Compact canvas toolbars use the same control height as their Cancel action.
   Preset menus are slightly wider so the chevron and selected check keep a
   safe right inset. */
:is(#baseCropControls, #expandCanvasControls).pxds-menu-scope .pxds-select-trigger {
  height: 30px;
  min-height: 30px;
  padding-block: 5px;
  font-size: 10px;
}

#expandCanvasControls #expandCanvasPreset + .pxds-select,
#baseCropControls #baseCropPreset + .pxds-select {
  min-width: 108px;
}

#expandCanvasControls #expandCanvasResolution + .pxds-select {
  min-width: 62px;
}

/* The inspector footer is the lower page boundary, so its menu opens upward
   instead of covering Generate or escaping below the editor shell. */
#generationResolution + .pxds-select .pxds-select-menu {
  top: auto;
  bottom: calc(100% + 5px);
  transform-origin: bottom center;
  animation-name: image-editor-select-menu-in-up;
}

@keyframes image-editor-select-menu-in-up {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

html[data-theme="light"] .expand-canvas-controls {
  border-color: color-mix(in srgb, #3157d5 32%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, #e9eef8);
  box-shadow: 0 12px 34px rgba(34, 49, 75, 0.20);
}

html[data-theme="light"] .expand-canvas-controls label > span,
html[data-theme="light"] .expand-canvas-controls output {
  color: var(--muted);
}

.expand-canvas-controls #generateExpandCanvas.px-generation-action {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  flex: 0 0 200px;
  padding-inline: 12px;
}

.expand-canvas-controls #generateExpandCanvas.px-generation-action:disabled:not(.is-generating):not([aria-busy="true"]) {
  border-color: #303846;
  color: #88909c;
  background: #252b35;
  box-shadow: none;
  opacity: 1;
}

.expand-canvas-controls #generateExpandCanvas.px-generation-action:disabled > :is(svg, span, small) {
  color: #88909c;
  opacity: 1;
}

html[data-theme="light"] .expand-canvas-controls #generateExpandCanvas.px-generation-action:disabled:not(.is-generating):not([aria-busy="true"]) {
  border-color: #59636f;
  color: #ffffff;
  background: #59636f;
}

html[data-theme="light"] .expand-canvas-controls #generateExpandCanvas.px-generation-action:disabled > :is(svg, span, small) {
  color: #ffffff;
}

html[data-theme="light"] .history-card-expand {
  border-color: #b8c97c;
  background: #f1f5df;
}

html[data-theme="light"] .history-card-expand:hover,
html[data-theme="light"] .history-card-expand.active {
  border-color: #7f9b2d;
  background: #e7efc9;
}

html[data-theme="light"] .history-card-expand .history-card-copy em {
  border: 1px solid #8da43d;
  background: #dfe9b6;
  color: #3f5700;
}

html[data-theme="light"] :is(
  .base-crop-controls select,
  .base-crop-controls input,
  .base-crop-controls button,
  .expand-canvas-controls select,
  .expand-canvas-controls input,
  .expand-canvas-controls textarea,
  .expand-canvas-controls button
) {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
}

/* Match the Workflow Generate action without changing the Editor runtime.
   The request-package control stays addressable by the existing script but is
   no longer part of the visible interface. */
#packageButton {
  display: none !important;
}

#generateButton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  place-content: center;
  align-items: center;
  column-gap: 8px;
  min-height: 42px;
  padding: 11px 22px;
  text-align: center;
  transition: box-shadow 120ms ease, transform 80ms ease;
}

#generateButton:not(:disabled) {
  border-color: rgba(130, 167, 255, 0.62);
  color: #fff;
  background: var(--pxltab-selected-gradient);
  box-shadow: 0 8px 24px rgba(10, 25, 49, 0.32);
}

#generateButton:disabled {
  border-color: #303846;
  color: #88909c;
  background: #252b35;
  box-shadow: none;
  opacity: 1;
}

#generateButton:disabled > :is(svg, span, small) {
  color: #88909c;
  opacity: 1;
}

html[data-theme="light"] #generateButton:disabled {
  border-color: #59636f;
  color: #ffffff;
  background: #59636f;
}

html[data-theme="light"] #generateButton:disabled > :is(svg, span, small) {
  color: #ffffff;
}

/* Editor select menus follow the same motion as the User UI while preserving
   each existing select and its runtime value. */
@supports (appearance: base-select) {
  .app-shell select:not([multiple]):not([hidden]) {
    appearance: base-select;
  }

  .app-shell select:not([multiple]):not([hidden])::picker-icon {
    transition: transform 180ms ease-out;
  }

  .app-shell select:not([multiple]):not([hidden]):open::picker-icon {
    transform: rotate(180deg);
  }

  .app-shell select:not([multiple]):not([hidden])::picker(select) {
    appearance: base-select;
    position-area: block-end span-inline-start;
    inline-size: anchor-size(width);
    min-inline-size: anchor-size(width);
    max-inline-size: anchor-size(width);
    max-block-size: min(360px, 45dvh);
    position-try-fallbacks: none;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--elevation-1);
    scrollbar-color: color-mix(in srgb, var(--muted) 58%, transparent) transparent;
    scrollbar-width: thin;
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    transition:
      opacity 180ms ease-out,
      transform 180ms ease-out,
      display 180ms allow-discrete;
  }

  .app-shell select:not([multiple]):not([hidden])::picker(select):popover-open {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .app-shell select:not([multiple]):not([hidden])::picker(select):popover-open {
      opacity: 0;
      transform: translateY(-6px) scale(0.985);
    }
  }

  .app-shell select:not([multiple]):not([hidden]) option {
    min-height: 38px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    background: var(--surface);
  }

  .app-shell select:not([multiple]):not([hidden]) option:checked {
    border-color: var(--accent);
    font-weight: 700;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--surface);
  }
}

#generateButton::before {
  content: "";
  position: absolute;
  inset: -200% -50%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(45% 65% at 22% 30%, rgba(58, 242, 176, 0.85), transparent 62%),
    radial-gradient(55% 70% at 62% 18%, rgba(76, 201, 240, 0.75), transparent 62%),
    radial-gradient(45% 65% at 82% 62%, rgba(139, 92, 246, 0.75), transparent 62%),
    radial-gradient(50% 60% at 38% 82%, rgba(67, 97, 238, 0.70), transparent 62%);
  filter: blur(12px) saturate(130%);
  opacity: 0;
  transition: opacity 140ms ease;
}

#generateButton:not(:disabled):is(:hover, :focus-visible)::before {
  opacity: 1;
  animation: image-editor-generate-aurora 5s linear infinite;
}

#generateButton > * {
  position: relative;
  z-index: 2;
}

#generateButton > svg {
  grid-column: 1;
  justify-self: end;
  width: 18px;
  height: 18px;
  color: #fff;
}

#generateButton > .generate-button__label {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

#generateButton > .generate-button__cost {
  grid-column: 3;
  justify-self: start;
  margin: 0 0 0 3px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
}

#generateButton:not(:disabled):is(:hover, :focus-visible) {
  box-shadow: 0 8px 28px rgba(74, 93, 231, 0.30), 0 8px 24px rgba(58, 242, 176, 0.20);
}

#generateButton:not(:disabled):active {
  transform: translateY(1px);
}

@keyframes image-editor-generate-aurora {
  0% { transform: rotate(0deg) scale(1); filter: blur(12px) saturate(130%) hue-rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.25); filter: blur(15px) saturate(170%) hue-rotate(45deg); }
  100% { transform: rotate(360deg) scale(1); filter: blur(12px) saturate(130%) hue-rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] *,
  html[data-theme="light"] *::before,
  html[data-theme="light"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* PXLTAB User-surface readability contract. The Editor is isolated in an
   iframe, so it receives the shared 10px floor here instead of inheriting the
   host page. These selectors cover every runtime microcopy role that was
   previously defined below the floor. */
.app-shell :is(
  .tool-button span,
  .tool-button kbd,
  .pricing-eyebrow,
  .pricing-credit,
  .smart-pricing-popover p,
  .palette-label,
  .segmented.toolbar-mode button,
  .inline-comment-actions span,
  .workspace-status,
  .inspector-tabs button span,
  .card-meta,
  .region-state,
  .availability-line,
  .field,
  .reference-box,
  .card-stats,
  .warning-line,
  .comment-copy span,
  .validation-summary,
  .validation-icon,
  .generate-button span,
  .eyebrow,
  .annotation-preview span,
  .package-output h3,
  .inline-reference-picker,
  .inline-reference > button,
  .history-card-copy span,
  .history-card-copy em,
  .inline-intent,
  .inline-placed-link,
  .status-pill,
  .prompt-system-metric span,
  .prompt-system-metric small,
  .prompt-system-card small,
  .prompt-system-step-list li > span,
  .prompt-system-directive > span,
  .prompt-system-rule-meta code,
  .prompt-system-rule-evidence summary,
  .prompt-system-section-number,
  .prompt-system-section-card p,
  .prompt-system-section-card small,
  .prompt-system-pointer,
  .prompt-system-pointer em,
  .prompt-system-version-list dt,
  .prompt-system-version-list dd,
  .prompt-system-rule-actions > span,
  .prompt-system-rule-history summary,
  .prompt-rule-card-diff > strong,
  .prompt-rule-field > span,
  .prompt-rule-diff-field h4,
  .prompt-rule-no-diff,
  .base-crop-controls label > span,
  .expand-canvas-controls label > span,
  .prompt-system-build-create label,
  .prompt-review-form label,
  .prompt-review-failures legend,
  .prompt-review-failure strong,
  .prompt-review-failure small,
  .prompt-review-failure em,
  .prompt-review-queue-item code,
  .prompt-review-history-item code,
  .prompt-review-history-item ul,
  .quote-details span,
  .backend-rule-warning
) {
  font-size: var(--type-min-readable, 10px);
}

/* A light-theme hover is always a light-gray surface. White remains a base
   surface, never the visual feedback for a neutral interactive state. */
html[data-theme="light"] :is(
  .tool-button:not(.active):not(:disabled),
  .icon-button:not(.accent):not(:disabled),
  .small-icon:not(.active):not(:disabled),
  .segmented button:not(.active):not(:disabled),
  .inspector-tabs button:not(.active):not(:disabled),
  .button.secondary:not(:disabled),
  .button.ghost:not(:disabled),
  .palette-colors button:not([aria-checked="true"]):not(:disabled),
  .inline-reference-picker,
  .reference-box,
  .history-delete-action
):is(:hover, :focus-visible) {
  color: var(--text);
  background: var(--surface-3);
}

@supports (appearance: base-select) {
  html[data-theme="light"] .app-shell select:not([multiple]):not([hidden]) option:hover:not(:checked) {
    color: var(--text);
    background: var(--surface-3);
  }
}

/* History controls remain legible against the light Editor surface. The
   original-image badge is a warm status, while its utility controls use the
   same neutral light-gray hierarchy as other secondary icon buttons. */
html[data-theme="light"] .history-card-original .history-card-copy em {
  border: 1px solid #d9a64e;
  background: #f4dfb2;
  color: #7a4400;
  font-size: var(--type-status, 10px);
}

html[data-theme="light"] .history-action.small-icon {
  border-color: #c8d0db;
  background: #eef1f5;
  box-shadow: 0 1px 2px rgba(25, 39, 55, 0.08);
  color: #2f3c4c;
}

html[data-theme="light"] .history-action:hover,
html[data-theme="light"] .history-action:focus-visible,
html[data-theme="light"] .history-action.active,
html[data-theme="light"] .history-row-original .history-action:hover,
html[data-theme="light"] .history-row-original .history-action:focus-visible,
html[data-theme="light"] .history-row-original .history-action.active {
  border-color: #7897b9;
  background: #e1e7ee;
  color: #173b5d;
}

/* Simple Good / Bad history reviews use theme surfaces rather than legacy
   black buttons. Semantic active states remain green and red. */
.history-feedback-action {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-3);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.history-feedback-action:not(:disabled):is(:hover, :focus-visible) {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
  box-shadow: 0 4px 12px rgba(24, 46, 72, .12);
  transform: translateY(-1px);
}

html[data-theme="light"] .history-feedback-action {
  border-color: #c8d0db;
  color: #465365;
  background: #eef2f6;
}

html[data-theme="light"] .history-feedback-action:not(:disabled):is(:hover, :focus-visible) {
  border-color: #7897b9;
  color: #173b5d;
  background: #e1e7ee;
}

.history-feedback-action:disabled {
  cursor: default;
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.history-feedback-action:disabled:is(:hover, :focus-visible) {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-3);
  box-shadow: none;
  transform: none;
}

.history-feedback-action.active.good {
  border-color: #57d79c;
  color: #a8f2c0;
  background: color-mix(in srgb, #28a878 18%, var(--surface-3));
}

.history-feedback-action.active.bad {
  border-color: #ff6b78;
  color: #ffadb5;
  background: color-mix(in srgb, #d94b59 18%, var(--surface-3));
}

html[data-theme="light"] .history-feedback-action:disabled:is(:hover, :focus-visible) {
  border-color: #c8d0db;
  color: #465365;
  background: #eef2f6;
}

html[data-theme="light"] .history-feedback-action.active.good {
  border-color: #28a878;
  color: #167453;
  background: color-mix(in srgb, #28a878 18%, var(--surface-3));
}

html[data-theme="light"] .history-feedback-action.active.bad {
  border-color: #d94b59;
  color: #bd2f3d;
  background: color-mix(in srgb, #d94b59 18%, var(--surface-3));
}

/* The selected original-image A/B control keeps the same dark amber identity
   in both themes instead of turning blue against the light canvas. */
html[data-theme="light"] .history-row-original .history-compare-action.active {
  border-color: #c07a20;
  background: #74400c;
  box-shadow: 0 2px 7px rgba(116, 64, 12, 0.24);
  color: #ffe0a3;
}

/* Selected A/B controls for generated, cropped, and expanded images need a
   decisive filled state. Original remains gold through the rule above. */
.history-row:not(.history-row-original) .history-compare-action.active,
.history-row:not(.history-row-original) .history-compare-action.active:is(:hover, :focus-visible) {
  border-color: #197b83;
  color: #ffffff;
  background: linear-gradient(135deg, #075f65 0%, #312367 100%);
  box-shadow: 0 3px 9px rgba(34, 55, 126, 0.24);
}