/* Shared appearance controls. Existing light-theme component colors are preserved. */
:root {
  color-scheme: light;
  --theme-control-bg: #fff;
  --theme-control-ink: #425568;
  --theme-control-border: #d9e1ea;
}
.theme-picker {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-control-ink);
}
.theme-picker svg { width: 16px; height: 16px; flex: none; }
.theme-picker select {
  width: auto;
  min-width: 96px;
  border: 1px solid var(--theme-control-border);
  border-radius: 7px;
  padding: 8px 26px 8px 10px;
  background-color: var(--theme-control-bg);
  color: var(--theme-control-ink);
  font: inherit;
  cursor: pointer;
}
.theme-picker select:focus-visible { outline: 2px solid #668cae; outline-offset: 3px; }
.topbar-tools { display: flex; align-items: center; gap: 24px; }
.login-appearance { display: flex; justify-content: flex-end; margin-bottom: 36px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1420;
  --ink: #e5edf6;
  --muted: #a0afc0;
  --line: #2d3b4f;
  --blue: #ff8897;
  --red: #ff8897;
  --pale: #342332;
  --green: #8fd5b7;
  --amber: #e6be83;
  --surface: #151f2e;
  --surface-raised: #1c293b;
  --surface-input: #101a29;
  --soft-text: #b6c4d4;
  --link: #9dc3ef;
  --success-bg: #172f2b;
  --success-border: #36554b;
  --warning-bg: #332b22;
  --warning-border: #65513a;
  --error-bg: #38242b;
  --error-ink: #ffa5af;
  --theme-control-bg: var(--surface);
  --theme-control-ink: var(--soft-text);
  --theme-control-border: var(--line);
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] :is(.sidebar,.card,.metrics,.analysis-metric,.queue-metrics>div,
  .portal-header,.admin-summary,.portal-card,.monitor-metric,.login-form-panel,dialog) {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .topbar { background: #121c2be8; }
html[data-theme="dark"] :is(.topbar strong,.recent-item,.metrics span,.metrics small,
  .drop-zone strong,.empty-results h3,.document-view figcaption,.field label,.review-notes label,
  .validation h4,.analysis-metric-label,.confidence-row span:last-child,.queue-filters>label,
  .queue-reasons,.portal-header nav,.portal-table th,.api-operation details,.monitor-tab) { color: var(--soft-text); }
html[data-theme="dark"] :is(.workspace-label,.recent-heading,.nav-item,.tag,.pill,.workflow,
  .drop-zone small,.image-footer,.empty-results p,.field-preview span,.learning-note p,
  .processing-note,.micro-note,.confidence,.field .evidence,.review-notes,.learn-option small,
  .loading,.learning-card>p,.learning-steps p,.analysis-note,.access-label,.password-control button,
  .login-footnote,.lock-mark,.empty-state,.portal-footer,footer) { color: var(--muted); }
html[data-theme="dark"] :is(.text-button,.table-action,.api-sidebar a,.monitor-user-link) { color: var(--link); }
html[data-theme="dark"] :is(.eyebrow,.table-action:last-child,.nav-item.active,
  .portal-header nav a:hover,.api-sidebar a:hover) { color: var(--blue); }
html[data-theme="dark"] :is(.tiny-count,.tag,.workflow,.field-preview span,.learning-note,
  .batch-empty,.batch-table th,.batch-status,.region-comparison figure,.review-notes pre,
  .portal-table th,.access-status,.role-badge,.api-method,.api-operation pre,.monitor-history-item,
  .training-blockers,.training-comparison>div,.quality-scope) {
  background: var(--surface-raised); border-color: var(--line);
}
html[data-theme="dark"] :is(.image-container,.drop-zone) { background: #111b29; border-color: #41526a; }
html[data-theme="dark"] :is(.recent-item.selected,.monitoring-table .selected-user,
  .nav-item.active,.step-mark,.quality-empty,.queue-session,.monitor-tab[aria-pressed=true]) {
  background: var(--pale); color: var(--blue); border-color: #634052;
}
html[data-theme="dark"] :is(.queue-session p,.quality-empty,.learning-note h3,
  .note-icon,.role-badge,.api-method,.training-progress,.quality-scope) { color: var(--soft-text); }
html[data-theme="dark"] :is(input,select,textarea,.field input,.field textarea,.field select,
  .review-notes textarea,.signature-box select,.batch-toolbar select,.queue-filters select,
  .queue-filters input[type="search"],.quality-heading select,.quality-filter-card select) {
  background-color: var(--surface-input); color: var(--ink); border-color: #40516a;
}
html[data-theme="dark"] :is(input,textarea)::placeholder { color: #94a5b8; }
html[data-theme="dark"] :is(input,select,textarea):focus-visible {
  border-color: #8cb8eb; outline: 2px solid #8cb8eb; outline-offset: 2px; box-shadow: none;
}
html[data-theme="dark"] :is(input[type="checkbox"],input[type="radio"],progress) { accent-color: #e05c70; }
html[data-theme="dark"] :is(.button,.portal-button,.subtle,.pill) {
  background: var(--surface-raised); color: var(--ink); border-color: #3b4d64;
}
html[data-theme="dark"] :is(.button.primary,.portal-button.primary) {
  background: #cc263e; color: #fff; border-color: #df4961; box-shadow: none;
}
html[data-theme="dark"] :is(.button.primary,.portal-button.primary):hover { background: #b72238; }
html[data-theme="dark"] :is(.button.subtle,.portal-button.subtle):hover { background: #26374c; }
html[data-theme="dark"] :is(.signature-box,.pill.ready,.status-completed,.form-message,
  .access-status.active,.monitor-status-success,.check-allowance) {
  background: var(--success-bg); color: var(--green); border-color: var(--success-border);
}
html[data-theme="dark"] :is(.signature-box strong,.signature-box p,.field-label) { color: var(--green); }
html[data-theme="dark"] :is(.signature-box.review-needed,.status-processing,.priority-attention,
  .duplicate-record,.monitor-status-pending,.monitor-field-changed,.check-allowance.exhausted) {
  background: var(--warning-bg); color: var(--amber); border-color: var(--warning-border);
}
html[data-theme="dark"] :is(.signature-box.review-needed strong,.signature-box.review-needed p,
  .duplicate-record strong,.validation .issue) { color: var(--amber); }
html[data-theme="dark"] :is(.notice.error,.status-failed,.priority-high,.form-message.error,.monitor-status-failed) {
  background: var(--error-bg); color: var(--error-ink); border-color: #68404b;
}
html[data-theme="dark"] .batch-table .batch-error { color: var(--error-ink); }
html[data-theme="dark"] :is(.notice:not(.error),.status-reused,.priority-normal) {
  background: #1c2d43; color: #b7cfea; border-color: #354f70;
}
html[data-theme="dark"] :is(.card-heading,.field-preview span,.language span,.queue-session,
  .signature-box select,.spinner) { border-color: var(--line); }
html[data-theme="dark"] .drop-zone.dragging { background: var(--pale); border-color: var(--blue); }
html[data-theme="dark"] .upload-icon { background: #243449; color: var(--link); }
html[data-theme="dark"] dialog::backdrop { background: #030711bf; }
html[data-theme="dark"] :is(.confidence-row progress,.quality-field progress,.quality-week progress,.latency-row progress) { background: #2c3c50; }
html[data-theme="dark"] progress::-webkit-progress-bar { background: #2c3c50; }
html[data-theme="dark"] progress::-webkit-progress-value { background: #8aaccc; }
html[data-theme="dark"] progress::-moz-progress-bar { background: #8aaccc; }
/* Preserve the scene's existing dark artwork and all source image/canvas pixels. */
html[data-theme="dark"] .scene-copy .eyebrow { color: #ea98a4; }
html[data-theme="dark"] .training-hero .eyebrow { color: #8fcbd6; }
html[data-theme="dark"] .credentials-card .eyebrow { color: #a6d9d1; }
@media (max-width: 720px) {
  .topbar-tools { gap: 10px; }
  .theme-picker { gap: 5px; }
  .theme-picker select { min-width: 85px; }
  .login-appearance { margin-bottom: 24px; }
}
@media (max-width: 420px) {
  .topbar { padding: 14px 18px; height: auto; flex-wrap: wrap; }
  .topbar-tools { margin-left: auto; }
  .topbar-tools .language { display: none; }
}
html[data-theme="dark"] :is(.confidence-row,.quality-field,.quality-week,.latency-row) progress::-webkit-progress-value,
html[data-theme="dark"] :is(#quality-fields,#quality-trend) progress::-webkit-progress-value { background: #8aaccc; }
html[data-theme="dark"] :is(.confidence-row,.quality-field,.quality-week,.latency-row) progress::-moz-progress-bar,
html[data-theme="dark"] :is(#quality-fields,#quality-trend) progress::-moz-progress-bar { background: #8aaccc; }