/* Component-specific dark variants. Palette and shell are defined separately. */
html[data-theme="dark"] .brand-mark {
  background: var(--brand);
  color: var(--on-brand);
}

html[data-theme="dark"] .primary {
  background: var(--brand);
  color: var(--on-brand);       /* dark-on-light pill is more legible than white */
  font-weight: 700;
}

html[data-theme="dark"] .primary:hover { background: var(--brand-dark); color: var(--on-brand); }

html[data-theme="dark"] .primary:active { background: #5b93e0; }

html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .segmented a.active b,
html[data-theme="dark"] .cost-chip.active { color: var(--on-brand); }

html[data-theme="dark"] .badge.info { background: #16273f; color: var(--ink); border-color: #2f4a72; }

html[data-theme="dark"] .ghost {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line);
}

html[data-theme="dark"] .ghost:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}

html[data-theme="dark"] .icon-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .icon-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .as-link:focus-visible,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgb(125 176 255 / 35%);
}

html[data-theme="dark"] .live-indicator {
  background: #16273f;
  border-color: #2f4a72;
  color: #b9d4ff;
}

html[data-theme="dark"] .live-indicator::before {
  background: var(--good);
  box-shadow: 0 0 0 3px rgb(95 224 160 / 25%);
}

@keyframes livePulseDark {
  0%, 100% { box-shadow: 0 0 0 3px rgb(95 224 160 / 30%); }
  50%      { box-shadow: 0 0 0 6px rgb(95 224 160 / 6%); }
}

html[data-theme="dark"] .live-indicator::before { animation: livePulseDark 2.2s ease-in-out infinite; }

html[data-theme="dark"] .live-indicator[data-tone="warn"] {
  background: #3a2c0c;
  border-color: #6b541e;
  color: #f0c66c;
}

html[data-theme="dark"] .live-indicator[data-tone="warn"]::before {
  background: var(--wait);
  box-shadow: 0 0 0 3px rgb(255 196 112 / 25%);
}

html[data-theme="dark"] .data-source {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); }

html[data-theme="dark"] code {
  background: var(--bg-sunken);
  color: var(--ink);
}

html[data-theme="dark"] .stat strong { color: var(--ink); }

html[data-theme="dark"] .stat.good strong { color: var(--good); }

html[data-theme="dark"] .stat.bad strong { color: var(--bad); }

html[data-theme="dark"] .stat.wait strong { color: var(--wait); }

html[data-theme="dark"] .stat.artwork strong { color: var(--artwork); }

html[data-theme="dark"] .stat-clear-button {
  background: var(--surface-2);
  border-color: rgb(255 158 148 / 30%);
  color: var(--bad);
}

html[data-theme="dark"] .buyer-link:hover h2 { color: var(--brand-dark); }

html[data-theme="dark"] .job-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-pop);
}

html[data-theme="dark"] .alert.inline.good::before { box-shadow: 0 0 0 3px rgb(95 224 160 / 25%); }

html[data-theme="dark"] .alert.inline.bad::before { box-shadow: 0 0 0 3px rgb(255 158 148 / 25%); }

html[data-theme="dark"] .lightbox-overlay { background: rgb(0 0 0 / 84%); }

html[data-theme="dark"] .preview-watermark-chip {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line);
}

html[data-theme="dark"] .preview-watermark-chip.is-active {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
  box-shadow: 0 1px 4px rgb(0 0 0 / 50%);
}

html[data-theme="dark"] .sb-table-wrap { background: var(--surface); }

html[data-theme="dark"] .sb-table thead th { background: var(--surface-2); color: var(--muted); }

html[data-theme="dark"] .sb-table tbody tr:hover td { background: var(--surface-2); }

html[data-theme="dark"] .sb-transition { background: var(--surface-2); border-color: var(--line); }

html[data-theme="dark"] .sb-transition-num { background: var(--bg-sunken); border-color: var(--line-strong); color: var(--ink); }

html[data-theme="dark"] .login-history-row { background: var(--surface); border-color: var(--line); }

html[data-theme="dark"] .login-history-row span:not(.badge) { color: var(--muted); }

html[data-theme="dark"] .guide-toc { background: var(--surface-2); }

html[data-theme="dark"] .guide-toc strong { color: var(--ink-2); }

html[data-theme="dark"] .guide-toc a { color: var(--brand-dark); }

html[data-theme="dark"] .guide-block { background: var(--surface); border-color: var(--line); }

html[data-theme="dark"] .guide-block h2 { border-bottom-color: var(--line); color: var(--ink); }

html[data-theme="dark"] .guide-block h3 { color: var(--ink-2); }

html[data-theme="dark"] .guide-block code { background: var(--bg-sunken); }

html[data-theme="dark"] .guide-note { background: var(--soft-wait); border-left-color: var(--wait); color: #f0c66c; }

html[data-theme="dark"] .guide-table th { background: var(--surface-2); }

html[data-theme="dark"] .guide-table th,
html[data-theme="dark"] .guide-table td { border-bottom-color: var(--line); }

html[data-theme="dark"] .guide-faq dt { color: var(--brand-dark); }

html[data-theme="dark"] .guide-faq dd { color: var(--ink-2); }

html[data-theme="dark"] .preview-facts { background: var(--surface); border-color: var(--line); }

html[data-theme="dark"] .preview-facts > div.preview-fact-label { color: var(--muted); }

html[data-theme="dark"] .preview-facts > div.preview-fact-value { color: var(--ink); }

html[data-theme="dark"] .preview-facts > div:nth-child(4n+3),
html[data-theme="dark"] .preview-facts > div:nth-child(4n+4) { background: var(--surface-2); }

html[data-theme="dark"] .preview-facts > div:not(:nth-last-child(-n+2)) { border-bottom-color: var(--line); }

html[data-theme="dark"] .preview-item-card h3 { color: var(--bad); }

html[data-theme="dark"] .preview-item-card .preview-facts > div.preview-fact-value { color: var(--ink); border-bottom-color: var(--line); }

html[data-theme="dark"] .settings-stat { background: var(--surface); }

html[data-theme="dark"] .settings-stat--hero { background: linear-gradient(180deg, #16273f 0%, var(--surface) 100%); }

html[data-theme="dark"] .settings-form-helper { background: var(--surface-2); }

html[data-theme="dark"] .settings-audit-table th { background: var(--surface-2); }

html[data-theme="dark"] .settings-audit-table th,
html[data-theme="dark"] .settings-audit-table td { border-bottom-color: var(--line); }

html[data-theme="dark"] .settings-chip { background: var(--surface-2); color: var(--muted); }

html[data-theme="dark"] .settings-chip--current { background: var(--soft-good); color: var(--good); }

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

html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }

html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border: 3px solid var(--bg);
  border-radius: 999px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

html[data-theme="dark"] .request-stat { background: var(--surface-2); }

html[data-theme="dark"] .item-line { background: var(--surface-2); }

html[data-theme="dark"] .quick-list a { background: var(--soft-wait); border-color: #6b541e; }

html[data-theme="dark"] .quick-list small { color: var(--wait); }

html[data-theme="dark"] .template-preview-box,
html[data-theme="dark"] .template-preview-box img { background: var(--surface); }

html[data-theme="dark"] .draft-figure img { background: var(--surface); }

html[data-theme="dark"] .image-choice { background: var(--surface); color: var(--ink); }

html[data-theme="dark"] .image-button,
html[data-theme="dark"] .mini-image-button { background: var(--surface-2); }

html[data-theme="dark"] .chat-bubble { background: var(--surface); border-color: var(--line); }

html[data-theme="dark"] .chat-bubble.own { background: var(--brand-soft); border-color: var(--brand); }

html[data-theme="dark"] .inline-ref { background: var(--brand-soft); color: var(--brand-dark); }

html[data-theme="dark"] .log-list code { background: var(--bg-sunken); }

html[data-theme="dark"] .chat-compose { background: var(--bg); }

html[data-theme="dark"] .auth-panel { background: var(--surface); border-color: var(--line); }

html[data-theme="dark"] .preview-image { border-color: var(--line); }