:root[data-theme='dark'] {
  color-scheme: dark;
  --dark-page: #0c1824;
  --dark-surface: #132638;
  --dark-raised: #182d42;
  --dark-muted-surface: #20384e;
  --dark-field: #0f2132;
  --dark-text: #f2f7fc;
  --dark-muted: #b8c9d9;
  --dark-border: #3a5770;
  --dark-border-strong: #6b8aa5;
  --dark-accent: #64b8ff;
  --dark-accent-strong: #2d91e7;
  --dark-accent-soft: #163b5b;
  --dark-selected: #0f4f82;
  --dark-focus: #ffc15b;
  --dark-danger: #ffb4a8;
  --dark-danger-bg: #52251f;
  color: var(--dark-text);
  background: var(--dark-page);
}

:root[data-theme='dark'] body { color: var(--dark-text); background: var(--dark-page); }
:root[data-theme='dark'] a, :root[data-theme='dark'] #download, :root[data-theme='dark'] #imposedownload { color: var(--dark-accent); }
:root[data-theme='dark'] header,
:root[data-theme='dark'] nav,
:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .workflow li,
:root[data-theme='dark'] .taskcards button { background: var(--dark-surface); border-color: var(--dark-border); }
:root[data-theme='dark'] header a,
:root[data-theme='dark'] nav button,
:root[data-theme='dark'] .option,
:root[data-theme='dark'] .taskcards button { color: var(--dark-text); }
:root[data-theme='dark'] .intro p,
:root[data-theme='dark'] #description,
:root[data-theme='dark'] .upload span,
:root[data-theme='dark'] .example figcaption,
:root[data-theme='dark'] .toolgroup h3,
:root[data-theme='dark'] .notice,
:root[data-theme='dark'] .guidance summary,
:root[data-theme='dark'] .field-note,
:root[data-theme='dark'] .limits,
:root[data-theme='dark'] footer a { color: var(--dark-muted); }
:root[data-theme='dark'] .suite-badge,
:root[data-theme='dark'] pre { color: var(--dark-muted); background: var(--dark-muted-surface); }
:root[data-theme='dark'] .suite-tabs a { color: var(--dark-text); }
:root[data-theme='dark'] .suite-tabs a[aria-current='page'],
:root[data-theme='dark'] nav button[aria-pressed='true'] { color: #fff; background: var(--dark-selected); }
:root[data-theme='dark'] nav button:hover { outline-color: var(--dark-accent); }
:root[data-theme='dark'] .panel { background: var(--dark-raised); box-shadow: 0 6px 26px rgba(0, 0, 0, .22); }
:root[data-theme='dark'] .example,
:root[data-theme='dark'] .workflow li,
:root[data-theme='dark'] .guidance { border-color: var(--dark-border); }
:root[data-theme='dark'] .example img { background: #f7fbff; }
:root[data-theme='dark'] .upload,
:root[data-theme='dark'] .option input,
:root[data-theme='dark'] .option textarea,
:root[data-theme='dark'] .option select { color: var(--dark-text); background: var(--dark-field); border-color: var(--dark-border-strong); }
:root[data-theme='dark'] #basicupload.is-dragging,
:root[data-theme='dark'] .field-note,
:root[data-theme='dark'] .next-action,
:root[data-theme='dark'] #sourceinfo { background: var(--dark-accent-soft); }
:root[data-theme='dark'] #basicupload.is-dragging { border-color: var(--dark-accent); }
:root[data-theme='dark'] #basicuploadstatus:not(:empty) { color: var(--dark-accent); }
:root[data-theme='dark'] #basicupload[aria-disabled='true'],
:root[data-theme='dark'] input:disabled { color: #a4b6c7; background: #27394a; border-color: var(--dark-border); }
:root[data-theme='dark'] .field-note { border-left-color: var(--dark-accent); }
:root[data-theme='dark'] .taskcards button[aria-pressed='true'] { background: var(--dark-accent-soft); border-color: var(--dark-accent); }
:root[data-theme='dark'] .next-action { color: var(--dark-text); border-color: var(--dark-accent); }
:root[data-theme='dark'] button:not(.primary):not([aria-pressed='true']) { color: var(--dark-text); background: var(--dark-muted-surface); border-color: var(--dark-border); }
:root[data-theme='dark'] input[type='checkbox'], :root[data-theme='dark'] input[type='radio'] { accent-color: var(--dark-accent); }

.theme-picker {
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 3px;
  border: 1px solid #cfdeeb;
  border-radius: 999px;
  background: #f3f7fb;
}
.theme-picker label { position: relative; cursor: pointer; }
.theme-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-picker span {
  display: block;
  min-width: 62px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #425569;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}
.theme-picker input:checked + span { color: #fff; background: #1263ad; }
.theme-picker input:focus-visible + span { outline: 3px solid #e69a27; outline-offset: 3px; }
:root[data-theme='dark'] .theme-picker { border-color: var(--dark-border); background: var(--dark-page); }
:root[data-theme='dark'] .theme-picker span { color: var(--dark-muted); }
:root[data-theme='dark'] .theme-picker input:checked + span { color: #061726; background: var(--dark-accent); }
:root[data-theme='dark'] .theme-picker input:focus-visible + span { outline-color: var(--dark-focus); }

.validation-message {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-left: 4px solid #8a2018;
  color: #8a2018;
  background: #fff0ed;
  font-weight: 700;
  line-height: 1.6;
}
#clear, #cancel { margin-top: 10px; padding: 9px 12px; }
:root[data-theme='dark'] .validation-message { color: var(--dark-danger); background: var(--dark-danger-bg); }
:root[data-theme='dark'] .validation-message { border-left-color: var(--dark-danger); }
:root[data-theme='dark'] .job-progress { color: var(--dark-text); background: var(--dark-field); border-color: var(--dark-border-strong); }
:root[data-theme='dark'] .progress-heading { color: var(--dark-text); }
:root[data-theme='dark'] #progress-detail,
:root[data-theme='dark'] #progress-activity { color: var(--dark-muted); }
:root[data-theme='dark'] #progress-bar { accent-color: var(--dark-accent); }
:root[data-theme='dark'] .job-progress.is-stalled { background: #3f321b; border-color: #d49a42; }
:root[data-theme='dark'] .job-progress.is-stalled #progress-activity { color: #ffd58b; }
:root[data-theme='dark'] .job-progress[data-state='complete'] { background: #16382c; border-color: #58b78b; }
:root[data-theme='dark'] .job-progress[data-state='cancelled'],
:root[data-theme='dark'] .job-progress[data-state='error'],
:root[data-theme='dark'] .job-progress[data-state='timeout'] { background: var(--dark-danger-bg); border-color: var(--dark-danger); }
:root[data-theme='dark'] .progress-error { color: var(--dark-danger); background: #321b1b; border-left-color: var(--dark-danger); }

@media (max-width: 700px) {
  .theme-picker { margin-left: auto; }
  .theme-picker span { min-width: 54px; padding: 7px 9px; }
  :root[data-theme='dark'] .toolgroup button { color: var(--dark-text); background: var(--dark-field); border-color: var(--dark-border); }
  :root[data-theme='dark'] .toolgroup button[aria-pressed='true'] { color: #fff; background: var(--dark-selected); border-color: var(--dark-selected); }
}