@import url('/theme-picker.css');
/* Shared semantic colors. Attribute specificity also covers styles loaded by
   embedded tools after the document has finished loading. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf0f5; --text: #edf0f5; --muted: #adb3c2; --muted-2: #979eaf;
  --placeholder: #979eaf; --surface: #1c1e25; --canvas: #111318;
  --bg: #111318; --bg-soft: #272a34; --panel: #1c1e25; --panel-2: #232630;
  --control-bg: #20232c; --line: #363a47; --line-strong: #60687c;
  --accent: #8585ff; --accent-2: #8585ff; --accent-hover: #a19aff;
  --accent-text: #b7b0ff; --accent-line: #655db1; --accent-wash: #302b4d;
  --accent-focus: #302b4d; --on-accent: #111318; --soft: #302b4d; --mint: #9b9bff;
  --danger: #ffaaa3; --success: #8ad4b3; --warning: #f2c47b;
  --director: #7bd6bd; --director-wash: #1d3832;
  --editor: #ffb29e; --editor-wash: #402b29;
  --operations: #c9aaff; --operations-wash: #342944;
  --border: var(--line); --card: var(--surface); --accent-soft: var(--accent-wash);
  --theme-surface: var(--surface); --theme-soft: var(--bg-soft);
  --theme-line: var(--line); --theme-ink: var(--ink); --theme-muted: var(--muted);
  --shadow-popover: 0 16px 48px #0008;
  background: var(--canvas); color: var(--ink);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }
html[data-theme="dark"] :is(input, select, textarea, option, optgroup) {
  color: var(--ink); background-color: var(--control-bg); border-color: var(--line);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }
html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }
html[data-theme="dark"] :is(dialog, .menu-panel, .anchored-popover) { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] dialog::backdrop { background: #000a; }
html[data-theme="dark"] :is(button, a, input, select, textarea, summary):focus-visible { outline-color: var(--accent-text); }
html[data-theme="dark"] ::selection { background: #655db1; color: #fff; }
html[data-theme="dark"] { scrollbar-color: var(--line-strong) var(--canvas); }
html[data-theme="dark"][data-team-embed] body { background: var(--canvas) !important; }
html[data-theme="dark"] :is(.panel, .card, .job, .shot-card, .result-card, .advanced, .ops-card) {
  background-color: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(.empty, .result, .notice, .service-state, .status-hint, .steps .step) {
  background-color: var(--bg-soft); color: var(--muted); border-color: var(--line);
}
html[data-theme="dark"] :is(.field > span, .check, .hint, .privacy-note) { color: var(--muted); }
html[data-theme="dark"] :is(.primary, button.primary, .primary-button, .shared-submit, .cards button) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
html[data-theme="dark"] :is(.primary, button.primary, .primary-button, .shared-submit, .cards button):hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
}
html[data-theme="dark"] .is-home #workspace { background: linear-gradient(160deg, #49417722, transparent 42%), var(--canvas); }
html[data-theme="dark"] :is(.generate-page, .home-composer-host) :is(.shared-composer, .generation-settings-dialog, .capsule-popover) {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] :is(.generate-page, .home-composer-host) :is(.capsule-button, .shared-reference) {
  background: var(--bg-soft); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] :is(.generate-page, .home-composer-host) .capsule-button:is(:hover, [aria-expanded="true"], [aria-pressed="true"]) {
  background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-text);
}
html[data-theme="dark"] :is(.generate-page, .home-composer-host) .shared-prompt textarea { background: transparent; }
html[data-theme="dark"][data-generation-embed] :is(.primary-button, button.primary) {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important;
}
html[data-theme="dark"][data-generation-embed] :is(.primary-button, button.primary):hover:not(:disabled) {
  background: var(--accent-hover) !important; border-color: var(--accent-hover) !important;
}
html[data-theme="dark"] :is(.native-results-view, .native-results-view .results-heading, .native-job-card, .native-job-action, .native-results-actions a, .native-results-actions button, .queue-preview-close) {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(.native-job-thumb, .native-library-thumb, .native-queue-empty, .reference-media-preview) { background: var(--bg-soft); color: var(--muted); }

html[data-theme="dark"] .toast { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

html[data-theme="dark"] .home-controls button:hover:not(:disabled) { background: var(--bg-soft); color: var(--ink); border-color: var(--accent-line); }
html[data-theme="dark"] :is(.ops-preview-file, .ops-media-placeholder) { background: linear-gradient(135deg, var(--surface), var(--bg-soft)); color: var(--muted); }
html[data-theme="dark"] :is(.agent-composer, .agent-job, .connection-bar, .ref-chip) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .agent-tabs { background: var(--bg-soft); }
html[data-theme="dark"] .agent-tabs a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-text); box-shadow: none; }
html[data-theme="dark"] .agent-field :is(input, textarea, select) { background: var(--control-bg); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.agent-job button, .agent-history > button, .composer-row > button:not(.submit-agent)) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] #message:not(:empty) { background: var(--surface); color: var(--ink); border-color: var(--line); }

/* Color changes resolve together when appearance switches in either direction. */
html[data-theme] :is(.site-nav a, .button-secondary) { transition: transform 180ms ease, box-shadow 180ms ease; }