/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE OVERRIDES
   Covers all hardcoded light-mode colors in the main app UI.
   Triggered via body.dark-mode class (synced with [data-theme="dark"])
   ══════════════════════════════════════════════════════════════════ */

/* --- Utility Classes --- */
body.dark-mode .panel {
  background: var(--surface);
}

body.dark-mode .panel-title,
body.dark-mode .panel-title-lg {
  color: #e5e7eb;
}

body.dark-mode .form-label,
body.dark-mode .form-label-xs,
body.dark-mode .binder-filter-label {
  color: #d1d5db;
}

body.dark-mode .form-label-sm {
  color: #8888aa;
}

body.dark-mode .form-control,
body.dark-mode .form-control-sm {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-control-sm:focus {
  border-color: #818cf8;
}

body.dark-mode .text-muted,
body.dark-mode .text-muted-sm,
body.dark-mode .quick-status-label {
  color: #9ca3af;
}

body.dark-mode .text-muted-xs {
  color: #6b6b8a;
}

body.dark-mode .panel-warning {
  background: #3a3520;
  border-color: #7c6a00;
}

body.dark-mode .panel-warning-title,
body.dark-mode .panel-warning-text {
  color: #fef3c7;
}

body.dark-mode .panel-preview {
  background: #252540;
}

body.dark-mode .panel-preview-text {
  color: #9ca3af;
}

body.dark-mode .section-divider {
  border-top-color: #818cf8;
}

body.dark-mode .section-divider-light {
  border-top-color: var(--border-hi);
}

body.dark-mode .section-divider-sm {
  border-top-color: var(--border-hi);
}

body.dark-mode .section-divider-purple {
  border-top-color: #a78bfa;
}

body.dark-mode .section-title {
  color: #818cf8;
}

body.dark-mode .duplicate-section-header {
  color: #a78bfa;
}

body.dark-mode .import-warning-divider {
  border-top-color: var(--border-hi);
  color: #fbbf24;
}

body.dark-mode .binder-progress-track {
  background: var(--border-hi);
}

body.dark-mode .binder-placeholder-text {
  color: #4b4b6b;
}

body.dark-mode .confirm-footer {
  border-top-color: var(--border-hi);
}

body.dark-mode .confirm-message {
  color: #e5e7eb;
}

/* --- Body & Container --- */
/* Codex: solid slate background, no gradient. */
body.dark-mode {
  background: var(--bg);
}

body.dark-mode .container {
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* --- Header & Progress Bar --- */
/* Codex: header is a flat surface bar with a hairline border, not a gradient. */
body.dark-mode .compact-header {
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border) inset;
}

body.dark-mode .compact-header .control-group select {
  background: rgba(30, 30, 46, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: #e5e7eb;
}

body.dark-mode .dev-switch {
  background: rgba(0, 0, 0, 0.25);
}
body.dark-mode .dev-switch-option {
  color: rgba(255, 255, 255, 0.45);
}
body.dark-mode .dev-switch-option:hover {
  color: rgba(255, 255, 255, 0.8);
}
body.dark-mode .dev-switch-option.active {
  color: #e67e22;
}
body.dark-mode .dev-switch-slider {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .theme-switch {
  background: rgba(0, 0, 0, 0.25);
}

body.dark-mode .theme-switch-option {
  color: rgba(255, 255, 255, 0.45);
}

body.dark-mode .theme-switch-option:hover {
  color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .theme-switch-option.active {
  color: #c4b5fd;
}

body.dark-mode .theme-switch-slider {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .lang-switch {
  background: rgba(0, 0, 0, 0.25);
}

body.dark-mode .lang-switch-option {
  opacity: 0.4;
}

body.dark-mode .lang-switch-option:hover {
  opacity: 0.75;
}

body.dark-mode .lang-switch-option.active {
  opacity: 1;
}

body.dark-mode .lang-switch-slider {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .currency-switch {
  background: rgba(0, 0, 0, 0.25);
}

body.dark-mode .currency-switch-option {
  opacity: 0.4;
}

body.dark-mode .currency-switch-option:hover {
  opacity: 0.75;
}

body.dark-mode .currency-switch-option.active {
  opacity: 1;
  color: #c4b5fd;
}

body.dark-mode .currency-switch-slider {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dark mode: both pills share same base style */
body.dark-mode .ds-local-pill,
body.dark-mode .ds-remote-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .ds-local-pill.ds-active,
body.dark-mode .ds-remote-pill.ds-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .ds-local-pill:not(.ds-active):hover,
body.dark-mode .ds-remote-pill:not(.ds-active):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .ds-local-label {
  color: #e5e7eb;
}

body.dark-mode #dataSourceSelect {
  color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .ds-remote-pill:not(.ds-active) #dataSourceSelect {
  color: rgba(255, 255, 255, 0.5);
}

body.dark-mode #dataSourceSelect option {
  background: var(--surface);
  color: #e5e7eb;
}

body.dark-mode .ds-icon-btn {
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .ds-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .ds-readonly-tag {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.25);
}

body.dark-mode .ds-add-btn {
  border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .compact-progress-bar {
  background: #252540;
}

body.dark-mode .compact-progress-bar .progress-label {
  color: #b0b0c8;
}

body.dark-mode .compact-progress-bar .progress-bar-container {
  background: #3a3a55;
}

body.dark-mode .compact-progress-bar .btn-expand-stats {
  background: transparent;
  border-color: #818cf8;
  color: #818cf8;
}

body.dark-mode .compact-progress-bar .btn-expand-stats:hover {
  background: #818cf8;
  color: white;
}

/* --- Heading --- */
body.dark-mode h1 {
  color: #e5e7eb;
}

/* --- Filters Panel --- */
body.dark-mode .filters {
  background: #252540;
}

body.dark-mode .quick-filters-row {
  background: var(--surface);
}

body.dark-mode .filter-section-label {
  color: #8888aa;
}

body.dark-mode .ownership-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #d1d5db;
}

body.dark-mode #btnOwned span {
  color: #66bb6a;
}

body.dark-mode .ownership-btn:hover {
  border-color: #818cf8;
  background: #33335a;
}

body.dark-mode .ownership-btn.active {
  background: #33335a;
  color: #818cf8;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
}

body.dark-mode .extras-toggle-btn {
  background: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--border-hi);
}

body.dark-mode .extras-toggle {
  border-color: var(--border-hi);
}

body.dark-mode .extras-toggle-btn:hover {
  background: #33335a;
}

body.dark-mode .extras-toggle-btn.active[data-extras="hide"] {
  background: #3b1c1c;
  color: #f87171;
}

body.dark-mode .extras-toggle-btn.active[data-extras="show"] {
  background: #33335a;
  color: #818cf8;
}

body.dark-mode .extras-toggle-btn.active[data-extras="only"] {
  background: #1c3b2a;
  color: #34d399;
}

body.dark-mode .divider-vertical {
  background: var(--border-hi);
}

body.dark-mode .lang-filter-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #d1d5db;
}

body.dark-mode .lang-filter-btn:hover {
  border-color: #818cf8;
  background: #33335a;
}

body.dark-mode .lang-filter-btn[data-state='include'] {
  background: #33335a;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
}

body.dark-mode .lang-filter-btn[data-state='exclude'] {
  background: #3d2a2a;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
  opacity: 0.7;
}

body.dark-mode .lang-exclusive-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
}

body.dark-mode .exclusive-dot {
  background: #555;
}

body.dark-mode .exclusive-label {
  color: #777799;
}

body.dark-mode .lang-exclusive-btn:hover {
  border-color: #818cf8;
  background: #33335a;
}

body.dark-mode .lang-exclusive-btn:hover .exclusive-dot {
  background: #888;
}

body.dark-mode .lang-exclusive-btn[data-state='include'] {
  background: #33335a;
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4);
}

body.dark-mode .lang-exclusive-btn[data-state='include'] .exclusive-dot {
  background: #fbbf24;
}

body.dark-mode .lang-exclusive-btn[data-state='include'] .exclusive-label {
  color: #fbbf24;
}

body.dark-mode .lang-exclusive-btn[data-state='exclude'] {
  background: #3d2a2a;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
  opacity: 0.7;
}

body.dark-mode .lang-exclusive-btn[data-state='exclude'] .exclusive-dot {
  background: #ef4444;
}

body.dark-mode .lang-exclusive-btn[data-state='exclude'] .exclusive-label {
  color: #ef4444;
}

body.dark-mode .sort-control {
  background: var(--surface2);
  border-color: var(--border-hi);
}

body.dark-mode .sort-control:hover {
  border-color: #818cf8;
}

body.dark-mode .sort-label {
  color: #8888aa;
}

body.dark-mode .sort-select {
  color: #e5e7eb;
  background: var(--surface2);
}

body.dark-mode .sort-order-toggle-inline {
  color: #e5e7eb;
}

body.dark-mode .sort-order-toggle-inline:hover {
  background: #33335a;
}

body.dark-mode .persist-checkbox {
  background: transparent;
}

body.dark-mode .persist-checkbox:hover {
  background: rgba(129, 140, 248, 0.15);
}

body.dark-mode .btn-toggle-advanced {
  border-color: #818cf8;
  background: transparent;
  color: #818cf8;
}

body.dark-mode .btn-toggle-advanced:hover {
  background: #818cf8;
  color: white;
}

body.dark-mode .btn-toggle-advanced .filter-count-badge {
  background: #818cf8;
  color: #1a1a2e;
}

body.dark-mode .btn-toggle-advanced:hover .filter-count-badge {
  background: #1a1a2e;
  color: #818cf8;
}

body.dark-mode .display-count-bar {
  background: #252540;
}

body.dark-mode .display-counts-center {
  color: #d1d5db;
}

body.dark-mode .count-label {
  color: #777799;
}

body.dark-mode .bar-divider {
  background: var(--border-hi);
}

body.dark-mode .btn-batch-toggle {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #9999bb;
}

body.dark-mode .btn-batch-toggle:hover {
  border-color: #818cf8;
  background: #33335a;
  color: #818cf8;
}

body.dark-mode .btn-batch-toggle.active {
  background: #33335a;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
  color: #818cf8;
}

/* --- Advanced Filters --- */

body.dark-mode .filter-section-header {
  color: #b4b4d8;
}

body.dark-mode .filter-section-header::before,
body.dark-mode .filter-section-header::after {
  background: linear-gradient(
    to right,
    rgba(129, 140, 248, 0.08),
    rgba(129, 140, 248, 0.32),
    rgba(129, 140, 248, 0.08)
  );
}

body.dark-mode .filter-group label {
  color: #8888aa;
}

body.dark-mode .filter-group select {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .filter-group:has(.filter-exclude-toggle.active) select:not([value='']) {
  border-color: #cc3333;
  background-color: #3a2020;
}

body.dark-mode .filter-exclude-toggle,
body.dark-mode .sort-order-toggle {
  border-color: var(--border-hi);
  background: var(--surface2);
  color: #8888aa;
}

body.dark-mode .filter-exclude-toggle:hover,
body.dark-mode .sort-order-toggle:hover {
  background: #33335a;
  border-color: #6b6b8a;
}

body.dark-mode .pokemon-filter-search {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .pokemon-filter-search:focus {
  border-color: #818cf8;
}

body.dark-mode .pokemon-filter-search::placeholder {
  color: #6b6b8a;
}

body.dark-mode .illustrator-filter-search {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .illustrator-filter-search:focus {
  border-color: #818cf8;
}

body.dark-mode .illustrator-filter-search::placeholder {
  color: #6b6b8a;
}

/* --- Search Box --- */
body.dark-mode .search-box {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .search-box:focus {
  border-color: #818cf8;
}

body.dark-mode .search-box::placeholder {
  color: #6b6b8a;
}

/* --- Count Bar --- */
body.dark-mode .count-separator {
  color: var(--border-hi);
}

/* --- Segmented Control (Cards/Binders) --- */
body.dark-mode .segmented-control {
  background: var(--surface2);
}

body.dark-mode .segment-btn {
  color: #8888aa;
}

body.dark-mode .segment-btn:hover {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.07);
}

body.dark-mode .segment-btn.active {
  background: var(--surface);
  color: #818cf8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- News View --- */
/* News dark mode styles moved to styles/news.css */

/* --- Moves / Names Translation Notice (shared style) --- */
body.dark-mode .moves-translation-notice,
body.dark-mode .names-translation-notice {
  color: #8888aa;
}

body.dark-mode .moves-translation-notice::before,
body.dark-mode .names-translation-notice::before {
  color: #6b6b8a;
}

body.dark-mode .lang-switch-sm {
  background: rgba(255, 255, 255, 0.1);
}

/* --- Card Grid --- */
body.dark-mode .card {
  background: #252540;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

body.dark-mode .card-name {
  color: #e5e7eb;
}

body.dark-mode .card-number {
  color: #9ca3af;
}

body.dark-mode .card-set {
  color: #7c7c9a;
}

body.dark-mode .card-super-set {
  color: #818cf8;
}

body.dark-mode .card-meta {
  color: #6b6b8a;
}

body.dark-mode .card-image-container {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
}

body.dark-mode .owned-icon.empty {
  fill: #4b4b6a;
}

body.dark-mode .card.upcoming {
  border-color: #d97706;
}

body.dark-mode .upcoming-date {
  color: #fbbf24;
}

body.dark-mode .fake-banner {
  background: linear-gradient(135deg, #450a0a, #7f1d1d);
  border-color: #dc2626;
  color: #fecaca;
}

/* --- Settings Panel --- */
body.dark-mode .settings-panel {
  background: #252540;
}

body.dark-mode .settings-group label {
  color: #8888aa;
}

body.dark-mode .settings-group select {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

/* Grid size control: toggle + slider dark mode */
body.dark-mode .grid-auto-toggle-track {
  background: var(--border-hi);
}

body.dark-mode .grid-auto-toggle input:checked ~ .grid-auto-toggle-track {
  background: #818cf8;
}

body.dark-mode .grid-auto-toggle-thumb {
  background: #e5e7eb;
}

body.dark-mode .grid-auto-toggle-label {
  color: #6b6b8a;
}

body.dark-mode .grid-auto-toggle input:checked ~ .grid-auto-toggle-label {
  color: #818cf8;
}

body.dark-mode .grid-size-slider {
  background: var(--border-hi);
}

body.dark-mode .grid-size-slider::-webkit-slider-thumb {
  background: #818cf8;
}

body.dark-mode .grid-size-slider:disabled::-webkit-slider-thumb {
  background: #5a5a7a;
}

body.dark-mode .grid-size-slider::-moz-range-thumb {
  background: #818cf8;
}

body.dark-mode .grid-size-slider:disabled::-moz-range-thumb {
  background: #5a5a7a;
}

body.dark-mode .grid-size-slider::-moz-range-track {
  background: var(--border-hi);
}

body.dark-mode .grid-size-slider-labels span {
  color: #5a5a7a;
}

body.dark-mode .grid-size-slider-labels span.active {
  color: #818cf8;
}

body.dark-mode .custom-order-info {
  background: #3a3520;
  border-color: #7c6a00;
  color: #fef3c7;
}

/* --- No Results --- */
body.dark-mode .no-results {
  color: #6b6b8a;
}

/* --- Modal ---
   Use codex surface tokens here so all modal-overlay descendants pick up
   the migrated palette by default. Specific modals (cardModal, etc.) can
   still override locally; this just stops the legacy var(--surface) leaking into
   every modal that wasn't audited yet (ordered, contact, batch-*, etc.). */
body.dark-mode .modal-content {
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--border);
}

body.dark-mode .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .header-link-btn.psa {
  background: #c0392b;
}

body.dark-mode .psa-bar-fill {
  background: #e74c3c;
}

body.dark-mode .fake-diff-row {
  background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .fake-compare-modal {
  background: var(--surface);
}

body.dark-mode .modal-close {
  color: #6b6b8a;
}

body.dark-mode .modal-close:hover {
  background: #33335a;
  color: #e5e7eb;
}

body.dark-mode .detail-label {
  color: #8888aa;
}

body.dark-mode .detail-value {
  color: #e5e7eb;
}

body.dark-mode .type-badge {
  background: #33335a;
  color: #e5e7eb;
}

body.dark-mode .collection-section {
  border-top-color: var(--border-hi);
}

body.dark-mode .collection-toggle {
  background: #252540;
}

body.dark-mode .collection-toggle:hover {
  background: #33335a;
}

body.dark-mode .collection-toggle label {
  color: #e5e7eb;
}

body.dark-mode .card-report-notice {
  color: #5a5a7a;
  border-top-color: #2d2d4a;
}

body.dark-mode .card-report-link {
  color: #818cf8;
}

body.dark-mode .modal-nav {
  background: var(--surface);
  border-top-color: var(--border-hi);
}

body.dark-mode .modal-nav button {
  background: transparent;
  border-color: #818cf8;
  color: #818cf8;
}

body.dark-mode .modal-nav button:hover:not(:disabled) {
  background: #818cf8;
  color: white;
}

/* --- Contact Modal --- */
body.dark-mode .contact-form-group label {
  color: var(--text-dim);
}

body.dark-mode .contact-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
}

body.dark-mode .contact-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

body.dark-mode .contact-input::placeholder {
  color: var(--text-mute);
}

body.dark-mode select.contact-input {
  color-scheme: dark;
}

body.dark-mode .global-price-bar {
  border-color: #3a3a5a;
}

body.dark-mode .rarity-dot {
  background: #3a3a5a;
}

body.dark-mode .rarity-dot-filled {
  background: #f59e0b;
}

body.dark-mode .market-price-card {
  background: #2a2a4a;
  border-color: #3a3a5a;
}

body.dark-mode .market-price-main {
  color: #e0e0f0;
}

body.dark-mode .market-price-detail-value {
  color: #b0b0c8;
}

body.dark-mode .market-price-details {
  border-top-color: #3a3a5a;
}

body.dark-mode .market-price-source {
  color: #7c7c9a;
}

body.dark-mode .market-price-label {
  color: #6b6b8a;
}

body.dark-mode .market-price-label-tip {
  text-decoration-color: rgba(107, 107, 138, 0.4);
}

body.dark-mode .market-price-detail-label {
  color: #7c7c9a;
}

body.dark-mode .market-price-updated {
  color: #5a5a7a;
}

body.dark-mode .market-price-range {
  border-top-color: #3a3a5a;
}

body.dark-mode .market-price-change.price-up {
  color: #2ecc71;
}

body.dark-mode .market-price-change.price-down {
  color: #e74c3c;
}

/* --- Keyboard Shortcuts --- */
body.dark-mode .keyboard-helper kbd {
  background: #33335a;
  border-color: #4b4b6a;
  color: #d1d5db;
}

body.dark-mode .shortcut-item {
  color: #9ca3af;
}

body.dark-mode .shortcut-item kbd {
  background: #33335a;
  border-color: #4b4b6a;
  color: #e5e7eb;
}

/* --- Similar Cards / Quick Status --- */

body.dark-mode .quick-status-actions {
  background: #252540;
}

body.dark-mode .status-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
}

body.dark-mode .status-btn:hover {
  border-color: #818cf8;
  background: #33335a;
}

body.dark-mode .status-label {
  color: #8888aa;
}

body.dark-mode .status-btn:hover .status-label {
  color: #818cf8;
}

/* --- Similar Cards --- */
body.dark-mode .similar-card-image {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
}

body.dark-mode .similar-card-info {
  background: #252540;
}

body.dark-mode .similar-card-name {
  color: #e5e7eb;
}

body.dark-mode .similar-card-set {
  color: #7c7c9a;
}

/* --- Owned Edit Form --- */
body.dark-mode .owned-form .form-group label,
body.dark-mode .form-group label {
  color: #d1d5db;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .form-actions {
  border-top-color: var(--border-hi);
}

body.dark-mode .order-modal-footer {
  border-top-color: var(--border-hi);
}

body.dark-mode .btn-outline-danger {
  color: #f87171;
  border-color: #f87171;
  background: transparent;
}

body.dark-mode .btn-outline-danger:hover {
  background: #f87171;
  color: var(--surface);
}

/* .btn-secondary dark mode handled via CSS custom properties in themes.css */

/* Codex dark theme remaps --color-primary to the light teal accent (#7fe0d6).
   The base .btn-primary rule (styles/mobile.css) hard-codes white text, which
   gives ~2:1 contrast on teal — fails WCAG AA. Override here so primary CTAs
   in every modal/form render with dark text on teal (~10:1).
   Disabled state stays muted to avoid suggesting it is clickable. */
body.dark-mode .btn-primary {
  color: var(--text-inverse);
}
body.dark-mode .btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--text-inverse);
}
body.dark-mode .btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
body.dark-mode .btn-primary:disabled,
body.dark-mode .btn-primary[disabled] {
  background: var(--surface3);
  color: var(--text-mute);
  cursor: not-allowed;
  opacity: 1; /* surface3 already reads as muted; avoid double-fade */
}

/* Codex --color-error (#ff7676) with white text is ~3:1 — also below AA.
   Darken the dark-mode danger bg to deep red so white stays legible (>4.5:1)
   and the destructive intent reads stronger than the primary accent. */
body.dark-mode .btn-danger {
  background: #c2272d;
  color: #fff;
}
body.dark-mode .btn-danger:hover {
  background: #b91c1c;
}
body.dark-mode .btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 118, 118, 0.4);
}
body.dark-mode .btn-danger:disabled,
body.dark-mode .btn-danger[disabled] {
  background: var(--surface3);
  color: var(--text-mute);
  cursor: not-allowed;
}

body.dark-mode .btn-info:hover {
  background: #1d4ed8;
}

body.dark-mode .btn-success:hover {
  background: #059669;
}

body.dark-mode .btn-warning {
  color: #1f2937;
}

body.dark-mode .btn-warning:hover {
  background: #d97706;
}

body.dark-mode .btn-text {
  color: var(--text-secondary);
}

body.dark-mode .btn-text:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* --- Statistics Dashboard --- */
body.dark-mode .statistics-dashboard {
  background: #252540;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stats-section {
  background: var(--surface);
}

body.dark-mode .stats-section h3 {
  color: #818cf8;
}

body.dark-mode .chart-bar-label {
  color: #9ca3af;
}

body.dark-mode .chart-bar-container {
  background: #3a3a55;
}

/* Top card & recent acquisition dark mode - moved to stats.css */

/* --- Breadcrumbs --- */
body.dark-mode .breadcrumbs {
  background: #252540;
}

body.dark-mode .breadcrumb-item {
  background: var(--surface);
  border-color: #818cf8;
  color: #818cf8;
}

body.dark-mode .breadcrumb-item-clear {
  background: rgba(239, 68, 68, 0.12);
  border-color: #f87171;
  color: #f87171;
}

body.dark-mode .breadcrumb-item-clear:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}

body.dark-mode .breadcrumb-remove {
  color: #818cf8;
}

body.dark-mode .breadcrumb-remove:hover {
  background: #818cf8;
  color: white;
}

/* --- Progress Tracking --- */
body.dark-mode .progress-tracking {
  background: #252540;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .progress-tracking h2 {
  color: #e5e7eb;
}

body.dark-mode .progress-hero {
  background: linear-gradient(135deg, #3d3d6b 0%, #2a2045 100%);
}

body.dark-mode .hero-stat-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .hero-stat-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .hero-stat-total {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .hero-stat-source {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 16px;
  width: 95%;
  margin-left: 5%;
}

body.dark-mode .hero-stat-nosource {
  padding: 10px 16px;
}

body.dark-mode .hero-stat-wishlist {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.1);
}

body.dark-mode .hero-stat-ordered {
  background: rgba(100, 180, 255, 0.08);
  border-color: rgba(100, 180, 255, 0.1);
  padding: 10px 16px;
}

body.dark-mode .lang-tracking-section {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .lang-tracking-title {
  color: #9898b0;
}

body.dark-mode .progress-cell {
  background: #252542;
}

body.dark-mode .progress-cell-clickable:hover {
  background: #2d2d50;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

body.dark-mode .progress-cell-label {
  color: #e0e0f0;
}

body.dark-mode .progress-cell-count {
  color: #c0c0d8;
}

body.dark-mode .progress-cell-percent {
  color: #8888a0;
}

body.dark-mode .progress-cell-footer-left {
  color: #6c6c88;
}

body.dark-mode .lang-tracking-empty {
  color: #6c6c88;
}

body.dark-mode .progress-percentage {
  color: #9ca3af;
}

body.dark-mode .progress-bar-container {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .progress-bar {
  background-color: var(--color-primary-dark);
}

/* --- Binder Organizer --- */
body.dark-mode .binder-list-header {
  border-bottom-color: #818cf8;
}

body.dark-mode .binder-card {
  background: var(--bg-elevated);
  border-color: var(--border-color);
  border-left-color: var(--color-primary);
}

body.dark-mode .binder-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Binder card text colors now handled by CSS variables */

body.dark-mode .binder-empty-state {
  color: #6b6b8a;
}

body.dark-mode .binder-empty-state h3 {
  color: #9ca3af;
}

body.dark-mode .page-navigator {
  background: #252540;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .page-number-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #9ca3af;
}

body.dark-mode .page-number-btn:hover {
  border-color: #818cf8;
  color: #818cf8;
}

body.dark-mode .page-number-btn.active {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  color: #fff;
  border-color: #6366f1;
}

body.dark-mode .pocket {
  background: #252540;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Page Label */
body.dark-mode .page-label-same-toggle {
  color: #9ca3af;
}

body.dark-mode .page-label-pick {
  border-color: var(--border-hi);
  color: #9ca3af;
}
body.dark-mode .page-label-pick:hover {
  border-color: rgba(129, 140, 248, 0.4);
  background: rgba(129, 140, 248, 0.05);
}
body.dark-mode .page-label-pick.active {
  background: rgba(129, 140, 248, 0.1);
  border-color: #818cf8;
  color: #818cf8;
}

body.dark-mode .page-label-text {
  background: rgba(19, 23, 31, 0.95);
  border-color: rgba(129, 140, 248, 0.3);
  color: #818cf8;
}

/* Page Manager Modal */
body.dark-mode .pm-row {
  background: #252540;
  border-color: var(--border-hi);
}
body.dark-mode .pm-row:hover {
  background: #2d2d4a;
  border-color: rgba(129, 140, 248, 0.3);
}
body.dark-mode .pm-row-over {
  border-color: #818cf8;
  background: #2d2d4a;
}
body.dark-mode .pm-label { color: #8888aa; }
body.dark-mode .pm-count { color: #6b6b8a; }
body.dark-mode .pm-drag-handle { color: #4d4d6a; }
body.dark-mode .pm-thumb { border-color: var(--border-hi); background: var(--surface); }
body.dark-mode .pm-thumb-missing { background: #3b1a1a; border-color: #6b2a2a; }

body.dark-mode .pocket--empty {
  border-color: var(--border-hi);
  background: var(--surface);
  color: var(--border-hi);
}

body.dark-mode .pocket--empty:hover {
  border-color: #818cf8;
  background: #252540;
  color: #818cf8;
}

body.dark-mode .pocket-card-name {
  color: #e5e7eb;
}

body.dark-mode .pocket-card-number {
  color: #7c7c9a;
}

body.dark-mode .pocket-overlay {
  background: #252540;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border-color: var(--border-hi);
}

body.dark-mode .pocket-overlay-close {
  color: #6b7280;
}

body.dark-mode .pocket-overlay-close:hover {
  color: #d1d5db;
}

body.dark-mode .pocket-overlay-title {
  color: #818cf8;
}

body.dark-mode .pocket-detail-grid .detail-label {
  color: #9ca3af;
}

body.dark-mode .pocket-detail-not-owned-banner {
  background: #3b1c1c;
  color: #fca5a5;
  border-color: #7f1d1d;
}

body.dark-mode .page-drop-target {
  border-color: #4b4b6a !important;
  background: var(--surface) !important;
}

body.dark-mode .page-drag-over {
  background: #1a3a2a !important;
}

/* --- Card Search in Binder --- */
body.dark-mode #cardSearchResults .card .card-image img {
  background-color: var(--surface2);
}

body.dark-mode .cs-lang-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #d1d5db;
}

body.dark-mode .cs-lang-btn:hover {
  border-color: #818cf8;
  background: #33335a;
}

body.dark-mode .cs-lang-btn[data-state='include'] {
  background: #33335a;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
}

body.dark-mode .cs-lang-btn[data-state='exclude'] {
  background: #3d2a2a;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
  opacity: 0.7;
}

body.dark-mode .cs-lang-exclusive-btn {
  background: var(--surface2);
  border-color: var(--border-hi);
}

body.dark-mode .cs-lang-exclusive-btn:hover {
  border-color: #818cf8;
  background: #33335a;
}

body.dark-mode .cs-lang-exclusive-btn:hover .exclusive-dot {
  background: #888;
}

body.dark-mode .cs-lang-exclusive-btn[data-state='include'] {
  background: #33335a;
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4);
}

body.dark-mode .cs-lang-exclusive-btn[data-state='include'] .exclusive-dot {
  background: #fbbf24;
}

body.dark-mode .cs-lang-exclusive-btn[data-state='include'] .exclusive-label {
  color: #fbbf24;
}

body.dark-mode .cs-lang-exclusive-btn[data-state='exclude'] {
  background: #3d2a2a;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
  opacity: 0.7;
}

body.dark-mode .cs-lang-exclusive-btn[data-state='exclude'] .exclusive-dot {
  background: #ef4444;
}

body.dark-mode .cs-lang-exclusive-btn[data-state='exclude'] .exclusive-label {
  color: #ef4444;
}

body.dark-mode .cs-advanced-filters {
  background: var(--bg-secondary, var(--surface));
  border-color: var(--border-color, #3a3a4a);
}

/* --- Color Picker --- */
body.dark-mode .color-option input[type='radio']:checked + span {
  border-color: #e5e7eb;
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px #e5e7eb;
}

/* --- Toast (unified) --- */
body.dark-mode .toast-close:hover {
  background: var(--border-hi);
  color: #e5e7eb;
}

/* --- Loading / Skeleton --- */
body.dark-mode .loading-state {
  color: #6b6b8a;
}

body.dark-mode .loading-state p {
  color: #6b6b8a;
}

body.dark-mode .spinner {
  border-color: var(--border-hi);
  border-top-color: #818cf8;
}

body.dark-mode .card-skeleton {
  background: #252540;
}

body.dark-mode .skeleton-image,
body.dark-mode .skeleton-text {
  background: linear-gradient(90deg, var(--surface2) 25%, #33335a 50%, var(--surface2) 75%);
  background-size: 200% 100%;
}

/* --- Validation --- */
body.dark-mode .field-error {
  background-color: #3a2020;
}

body.dark-mode .field-success {
  background-color: #1a3a2a;
}

/* --- Import/Export Stats --- */
body.dark-mode .ie-stats-card {
  background: var(--surface);
}

body.dark-mode .ie-stats-title {
  color: #e5e7eb;
}

body.dark-mode .ie-stats-label {
  color: #8888aa;
}

body.dark-mode .ie-stats-value-dark {
  color: #e5e7eb;
}

/* --- Set Completion --- */
body.dark-mode .set-completion-name {
  color: #e5e7eb;
}

/* Confirmation modal button variants */
#confirmOkBtn.btn-danger {
  background: #ef4444;
}

#confirmOkBtn.btn-danger:hover {
  background: #dc2626;
}

/* ── Dark Mode: Data Source & Remote Collections ── */

/* lang-switch dark mode — see dark-mode overrides above (near theme-switch) */

body.dark-mode .btn-icon-sm {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #8888aa;
}

body.dark-mode .btn-icon-sm:hover {
  background: #33335a;
  border-color: #6b6b8a;
}

body.dark-mode .readonly-badge {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.25);
}

body.dark-mode.readonly-mode .compact-header {
  border-bottom-color: #b45309;
}

body.dark-mode .manage-collections-modal {
  background: var(--surface);
}

body.dark-mode .manage-collections-modal .modal-header {
  border-bottom-color: #2d2d4a;
}

body.dark-mode .manage-collections-modal .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .manage-collections-modal .modal-close:hover {
  color: #e5e7eb;
}

body.dark-mode .add-remote-form {
  border-bottom-color: #2d2d4a;
}

body.dark-mode .remote-collections-subtitle {
  color: #8888aa;
}

body.dark-mode .add-remote-section {
  border-top-color: #2d2d4a;
}

body.dark-mode .add-remote-label {
  color: #8888aa;
}

body.dark-mode .add-remote-form .form-input {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .add-remote-form .form-input:focus {
  border-color: var(--color-primary);
}

body.dark-mode .remote-collection-item {
  background: #24243d;
  border-color: #2d2d4a;
}

body.dark-mode .remote-collection-name {
  color: #e5e7eb;
}

body.dark-mode .remote-collection-url {
  color: #6b6b8a;
}

body.dark-mode .remote-collection-actions .btn-sm {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #8888aa;
}

body.dark-mode .remote-collection-actions .btn-sm:hover {
  background: #33335a;
}

body.dark-mode .remote-collection-actions .btn-danger {
  color: #f87171;
  border-color: #5c2020;
}

body.dark-mode .remote-collection-actions .btn-danger:hover {
  background: #3a2020;
}

/* ── Dark mode: Share Modal ── */

body.dark-mode .share-modal {
  background: var(--surface);
}

body.dark-mode .share-modal .modal-header {
  border-bottom-color: #2d2d4a;
}

body.dark-mode .share-modal .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .share-modal .modal-close:hover {
  color: #e5e7eb;
}

body.dark-mode .share-stats {
  background: #24243d;
  border-color: #2d2d4a;
  color: #b0b0cc;
}

body.dark-mode .share-label {
  color: #8888aa;
}

body.dark-mode .share-name-row .form-input {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .share-name-row .form-input:focus {
  border-color: var(--color-primary);
}

body.dark-mode .share-url-input {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

/* ── Dark mode: Collection Manager ── */

body.dark-mode .cm-modal {
  background: var(--surface);
}

body.dark-mode .cm-sidebar {
  background: #171728;
  border-right-color: #2d2d4a;
}

body.dark-mode .cm-sidebar-header h2 {
  color: #e5e7eb;
}

body.dark-mode .cm-nav-item {
  color: #8888aa;
}

body.dark-mode .cm-nav-item:hover {
  background: #24243d;
  color: #c0c0dc;
}

body.dark-mode .cm-nav-item.active {
  background: var(--color-primary);
  color: white;
}

body.dark-mode .cm-close-desktop,
body.dark-mode .cm-close-mobile {
  color: #7777aa;
}

body.dark-mode .cm-close-desktop:hover,
body.dark-mode .cm-close-mobile:hover {
  color: #e5e7eb;
}

body.dark-mode .cm-panel-header h3 {
  color: #e5e7eb;
}

body.dark-mode .cm-panel-desc {
  color: #7777aa;
}

body.dark-mode .cm-hint {
  color: #8888aa;
}

body.dark-mode .cm-hint-warning {
  background: #2a2518;
  color: #d4a800;
  border-left-color: #5c4a00;
}

body.dark-mode .cm-empty-state p {
  color: #8888aa;
}

body.dark-mode .cm-hiw-section {
  background: rgba(129, 140, 248, 0.07);
  border-color: rgba(129, 140, 248, 0.14);
}

body.dark-mode .cm-hiw-section:hover {
  background: rgba(129, 140, 248, 0.11);
  border-color: rgba(129, 140, 248, 0.24);
}

body.dark-mode .cm-hiw-section h4 {
  color: #e6e6f5;
}

body.dark-mode .cm-hiw-section p {
  color: #a4a4c4;
}

body.dark-mode .cm-hiw-icon {
  background: rgba(129, 140, 248, 0.20);
}

body.dark-mode .cm-notice {
  background: #24243d;
  border-color: #2d2d4a;
}

body.dark-mode .cm-notice p {
  color: #8888aa;
}

body.dark-mode .cm-section h4 {
  color: #c0c0dc;
}

body.dark-mode .cm-section-bordered {
  border-top-color: #2d2d4a;
}

body.dark-mode .cm-field-row .form-input,
body.dark-mode .cm-select {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .cm-url-input {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .cm-import-input {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #e5e7eb;
}

body.dark-mode .cm-import-input::placeholder {
  color: #555;
}

body.dark-mode .cm-sync-status {
  background: #24243d;
  border-color: #2d2d4a;
}

body.dark-mode .cm-sync-row + .cm-sync-row {
  border-top-color: #2d2d4a;
}

body.dark-mode .cm-sync-label {
  color: #7777aa;
}

body.dark-mode .cm-sync-value {
  color: #e5e7eb;
}

body.dark-mode code.cm-sync-value {
  background: var(--surface2);
}

body.dark-mode .cm-storage-indicator {
  background: #24243d;
  border-color: #2d2d4a;
}

body.dark-mode .cm-storage-indicator.warning {
  background: #2a2518;
  border-color: #78650d;
}

body.dark-mode .cm-storage-indicator.critical {
  background: #2a1818;
  border-color: #7f1d1d;
}

body.dark-mode .cm-storage-label {
  color: #7777aa;
}

body.dark-mode .cm-storage-value {
  color: #e5e7eb;
}

body.dark-mode .cm-storage-bar {
  background: #2d2d4a;
}

body.dark-mode .cm-storage-hint {
  color: #6b6b8a;
}

body.dark-mode .cm-storage-indicator.warning .cm-storage-hint {
  color: #d4a800;
}

body.dark-mode .cm-storage-indicator.critical .cm-storage-hint {
  color: #f87171;
}

body.dark-mode .cm-sync-dirty {
  background: #2a2518;
  border-color: #5c4a00;
  color: #d4a800;
}

body.dark-mode .cm-sync-footer {
  border-top-color: #2d2d4a;
}

body.dark-mode .cm-nav-separator {
  background: #2d2d4a;
}

body.dark-mode .cm-nav-item.cm-nav-item-muted {
  color: #f87171;
}

body.dark-mode .cm-nav-item.cm-nav-item-muted:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

body.dark-mode .cm-nav-item.cm-nav-item-muted.active {
  background: #dc2626;
  color: white;
}

body.dark-mode .cm-danger-section h4 {
  color: #9999bb;
}

body.dark-mode .btn-muted-text {
  color: #6a6a8a;
}

body.dark-mode .btn-muted-text:hover {
  color: #e74c3c;
}

/* Textual confirm dark mode */
body.dark-mode .textual-confirm-title {
  color: #e74c3c;
}

body.dark-mode .textual-confirm-instruction {
  color: #8888aa;
}

body.dark-mode .textual-confirm-phrase {
  background: #3a1f1f;
  border-color: #5c2a2a;
  color: #f77;
}

body.dark-mode .textual-confirm-error {
  color: #f77;
}

body.dark-mode #textualConfirmOk:disabled {
  background: #3a3a4a;
  color: #666;
  border-color: #444;
}

body.dark-mode .cm-sync-comparison {
  background: #24243d;
  border-color: #2d2d4a;
}

body.dark-mode .cm-sync-comparison-header {
  color: #8888aa;
}

body.dark-mode .cm-sync-refresh-btn {
  color: #8888aa;
}

body.dark-mode .cm-sync-refresh-btn:hover {
  background: #2d2d4a;
  color: #e5e7eb;
}

body.dark-mode .cm-sync-comparison-col {
  background: var(--bg);
  border-color: #2d2d4a;
}

body.dark-mode .cm-sync-col-title {
  color: #8888aa;
}

body.dark-mode .cm-sync-col-remote .cm-sync-col-title {
  color: #60a5fa;
}

body.dark-mode .cm-sync-stat-label {
  color: #6b6b8a;
}

body.dark-mode .cm-sync-stat-sub .cm-sync-stat-label {
  color: #55556e;
}

body.dark-mode .cm-sync-stat-value {
  color: #e5e7eb;
}

body.dark-mode .cm-sync-stat-value .stat-higher {
  color: #4ade80;
}

body.dark-mode .cm-sync-stat-value .stat-lower {
  color: #f87171;
}

/* Inline SVG stat icons inherit currentColor — no dark overrides needed */

body.dark-mode .cm-sync-comparison-loading,
body.dark-mode .cm-sync-comparison-error {
  color: #6b6b8a;
}

body.dark-mode .cm-sync-comparison-error {
  color: #f87171;
}

body.dark-mode #syncDetailedDiff {
  border-top-color: var(--border-hi);
}

body.dark-mode .cm-sync-diff-card {
  color: #e5e7eb;
}

body.dark-mode .cm-sync-diff-section-title {
  color: #9ca3af;
  border-bottom-color: var(--border-hi);
}

body.dark-mode .cm-sync-diff-changes {
  color: #9ca3af;
}

body.dark-mode .cm-sync-diff-added > .cm-sync-diff-badge {
  background: #064e3b;
  color: #34d399;
}

body.dark-mode .cm-sync-diff-removed > .cm-sync-diff-badge {
  background: #450a0a;
  color: #f87171;
}

body.dark-mode .cm-sync-diff-modified > .cm-sync-diff-badge {
  background: #451a03;
  color: #fbbf24;
}

body.dark-mode .cm-sync-diff-old {
  color: #f87171;
}

body.dark-mode .cm-sync-diff-new {
  color: #34d399;
}

body.dark-mode span.cm-sync-diff-added {
  color: #34d399;
}

body.dark-mode span.cm-sync-diff-removed {
  color: #f87171;
}

body.dark-mode #pullConfirmModal .modal {
  background: var(--bg);
}

body.dark-mode #pullConfirmModal .modal-close {
  color: #6b6b8a;
}

body.dark-mode #pullConfirmModal .modal-close:hover {
  background: #2d2d4a;
  color: #e5e7eb;
}

body.dark-mode #pullConfirmModal .modal-header {
  border-bottom-color: #2d2d4a;
}

body.dark-mode #pullConfirmModal .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode #pullConfirmModal .share-desc {
  color: #8888aa;
}

body.dark-mode .pull-confirm-comparison {
  background: #24243d;
}

body.dark-mode .pull-confirm-col {
  background: var(--bg);
  border-color: var(--border-hi);
}

body.dark-mode .pull-confirm-local {
  background: linear-gradient(135deg, #2a1515 0%, var(--bg) 100%);
  border-color: #dc2626;
}

body.dark-mode .pull-confirm-remote {
  background: linear-gradient(135deg, #0a2618 0%, var(--bg) 100%);
  border-color: #22c55e;
}

body.dark-mode .pull-confirm-col-header {
  border-bottom-color: var(--border-hi);
}

body.dark-mode .pull-confirm-local .pull-confirm-col-header {
  color: #f87171;
  border-bottom-color: #7f1d1d;
}

body.dark-mode .pull-confirm-remote .pull-confirm-col-header {
  color: #4ade80;
  border-bottom-color: #166534;
}

body.dark-mode .pull-stat span:first-child {
  color: #6b6b8a;
}

body.dark-mode .pull-stat strong {
  color: #e5e7eb;
}

body.dark-mode .pull-stat-higher {
  color: #4ade80 !important;
}

body.dark-mode .pull-stat-lower {
  color: #f87171 !important;
}

body.dark-mode .pull-confirm-arrow {
  color: #6b6b8a;
}

body.dark-mode .cm-share-stats {
  background: #24243d;
  border-color: #2d2d4a;
  color: #b0b0cc;
}

body.dark-mode .cm-success-box {
  background: #0a2618;
  border-color: #166534;
}

body.dark-mode .cm-success-box p {
  color: #4ade80;
}

body.dark-mode .cm-privacy-toggle {
  color: #d4d4d8;
}

body.dark-mode .cm-privacy-sync-hint {
  color: #fbbf24;
}

body.dark-mode .cm-import-preview {
  background: #2a2518;
  border-color: #5c4a00;
}

body.dark-mode .cm-import-preview h5 {
  color: #d4a800;
}

body.dark-mode .cm-import-preview-meta {
  color: #d4a800;
}

body.dark-mode .cm-qr-container {
  background: #ffffff;
  border-color: var(--border-hi);
}

body.dark-mode .sync-status-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .cm-nav-badge {
  background: #d4a800;
}

@media (max-width: 640px) {
  body.dark-mode .cm-sidebar {
    border-bottom-color: #2d2d4a;
  }
}

/* ── Dark mode: Cloud History Panel ── */

body.dark-mode .cm-history-current {
  background: #1a2332;
  border-color: #2d4a6a;
}

body.dark-mode .cm-history-current-badge {
  background: #1e3a5f;
  color: #60a5fa;
}

body.dark-mode .cm-history-current-date {
  color: #9ca3af;
}

body.dark-mode .cm-history-list-header {
  color: #6b7280;
}

body.dark-mode .cm-history-version-card {
  background: var(--surface);
  border-color: #2d2d4a;
}

body.dark-mode .cm-history-version-card:hover {
  border-color: #4a6fa5;
}

body.dark-mode .cm-history-version-num {
  background: #2d2d4a;
  color: #e5e7eb;
}

body.dark-mode .cm-history-version-date {
  color: #9ca3af;
}

body.dark-mode .cm-history-version-size {
  color: #6b7280;
}

body.dark-mode .cm-history-stat-val {
  color: #e5e7eb;
}

body.dark-mode .cm-history-stat-lbl {
  color: #6b7280;
}

body.dark-mode .cm-history-compare {
  border-color: #2d2d4a;
}

body.dark-mode .cm-history-compare-header {
  background: #16162b;
  border-bottom-color: #2d2d4a;
}

body.dark-mode .cm-history-compare-header h4 {
  color: #e5e7eb;
}

body.dark-mode .cm-history-compare-close {
  color: #6b7280;
}

body.dark-mode .cm-history-compare-close:hover {
  color: #e5e7eb;
}

body.dark-mode .cm-history-compare-col-title {
  color: #e5e7eb;
}

body.dark-mode .cm-history-compare-stat {
  color: #9ca3af;
}

body.dark-mode .cm-history-compare-stat strong {
  color: #e5e7eb;
}

body.dark-mode .cm-history-diff-plus {
  color: #4ade80;
}

body.dark-mode .cm-history-diff-minus {
  color: #f87171;
}

body.dark-mode .cm-history-diff-hint {
  color: #6b7280;
}

body.dark-mode .cm-history-no-diff {
  color: #4ade80;
}

body.dark-mode .cm-history-error {
  color: #f87171;
}

body.dark-mode .cm-history-spinner {
  border-color: #2d2d4a;
  border-top-color: #60a5fa;
}

/* ── Dark mode: Share & Sync Modal ── */

body.dark-mode .share-sync-modal {
  background: var(--surface);
}

body.dark-mode .share-sync-modal .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .share-sync-modal .modal-close:hover {
  color: #e5e7eb;
}

body.dark-mode .share-sync-tabs {
  border-bottom-color: #2d2d4a;
}

body.dark-mode .share-sync-tab {
  color: #7777aa;
}

body.dark-mode .share-sync-tab:hover {
  color: #b0b0cc;
}

body.dark-mode .share-sync-tab.active {
  color: #8ea4f0;
  border-bottom-color: #8ea4f0;
}

body.dark-mode .sync-status-grid {
  background: #24243d;
  border-color: #2d2d4a;
}

body.dark-mode .sync-status-label {
  color: #7777aa;
}

body.dark-mode .sync-status-value {
  color: #e5e7eb;
}

body.dark-mode .sync-dirty-indicator {
  background: #2a2518;
  border-color: #5c4a00;
  color: #d4a800;
}

body.dark-mode .sync-dirty-dot {
  background: #d4a800;
}

body.dark-mode .sync-unlink {
  border-top-color: #2d2d4a;
}

body.dark-mode .btn-danger-text {
  color: #ff6b7a;
}

body.dark-mode .btn-danger-text:hover {
  color: #ff4757;
}

body.dark-mode .transfer-section h3 {
  color: #e5e7eb;
}

body.dark-mode .transfer-qr-container {
  background: #ffffff;
  border-color: var(--border-hi);
}

body.dark-mode .transfer-import-section {
  border-top-color: #2d2d4a;
}

body.dark-mode .sync-conflict-modal {
  background: var(--surface);
}

body.dark-mode .sync-conflict-modal .modal-header {
  border-bottom-color: #2d2d4a;
}

body.dark-mode .sync-conflict-modal .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .sync-conflict-actions .btn-text {
  color: #7777aa;
}

/* ── Dark mode: Help / About Panel ── */

body.dark-mode .about-headline {
  color: #e5e7eb;
}

body.dark-mode .about-headline strong {
  color: #818cf8;
}

/* Help tab styles now handled by shared .filter-btn + dark mode CSS variables */

/* ── Help View — Dark Mode ── */

/* Hero intro */
body.dark-mode .help-hero {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.06) 100%);
  border-color: rgba(102, 126, 234, 0.15);
}

body.dark-mode .help-hero-headline {
  color: #c5c5e0;
}

body.dark-mode .help-quick-step {
  background: var(--bg-elevated);
  border-color: var(--border-color);
  color: #9ca3af;
}

/* Nav cards */
body.dark-mode .help-nav-card {
  background: var(--bg-elevated);
  border-color: var(--border-color);
}

body.dark-mode .help-nav-card:hover {
  background: rgba(102, 126, 234, 0.08);
  border-color: var(--nav-accent, var(--color-primary));
}

body.dark-mode .help-nav-card.active,
body.dark-mode .help-nav-card.about-feature--active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
}

body.dark-mode .help-nav-title {
  color: #c5c5e0;
}

body.dark-mode .help-nav-desc {
  color: #6b6b8a;
}

/* Panel header */
body.dark-mode .help-panel-header {
  border-bottom-color: rgba(102, 126, 234, 0.12);
}

body.dark-mode .help-panel h4 {
  color: #c5c5e0;
}

/* Panel content */
body.dark-mode .help-panel > p,
body.dark-mode .help-panel-body > p,
body.dark-mode .help-list li {
  color: #9ca3af;
}

body.dark-mode .help-list li strong {
  color: #c5c5e0;
}

body.dark-mode .help-hint {
  color: #6b6b8a;
}

/* Screenshot placeholder */
body.dark-mode .help-screenshot {
  background: rgba(19, 23, 31, 0.5);
  border-color: var(--border-color);
}

body.dark-mode .help-screenshot-placeholder {
  color: #6b6b8a;
}

/* Step items */
body.dark-mode .help-step-item strong {
  color: #c5c5e0;
}

body.dark-mode .help-step-item p {
  color: #9ca3af;
}

/* Pro-tip boxes */
body.dark-mode .help-pro-tip {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.04));
  border-left-color: #818cf8;
  color: #9ca3af;
}

body.dark-mode .help-pro-tip strong {
  color: #818cf8;
}

body.dark-mode .help-pro-tip kbd,
body.dark-mode .help-shortcut kbd {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: #c5c5e0;
  box-shadow: 0 1px 0 var(--surface);
}

/* Keyboard shortcuts */
body.dark-mode .help-shortcut {
  color: #9ca3af;
}

/* Section titles */
body.dark-mode .help-section-title {
  color: #c5c5e0;
  border-bottom-color: rgba(102, 126, 234, 0.15);
}

/* Links */
body.dark-mode .help-panel a[href] {
  color: #93a5f6;
}

body.dark-mode .help-panel a[href]:hover {
  border-bottom-color: #93a5f6;
}

/* FAQ items */
body.dark-mode .help-faq-item {
  background: rgba(19, 23, 31, 0.4);
  border-color: rgba(102, 126, 234, 0.08);
}

body.dark-mode .help-faq-item strong {
  color: #c5c5e0;
}

body.dark-mode .help-faq-item p {
  color: #9ca3af;
}

/* ── Dark mode: Site Footer ── */

body.dark-mode .footer-inner {
  background: rgba(19, 23, 31, 0.95);
  border-color: rgba(102, 126, 234, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .footer-brand {
  border-bottom-color: #2d2d4a;
}

body.dark-mode .footer-logo {
  color: #818cf8;
}

body.dark-mode .footer-tagline {
  color: #6b6b8a;
}

body.dark-mode .footer-col h4 {
  color: #818cf8;
}

body.dark-mode .footer-col p {
  color: #8888aa;
}

body.dark-mode .footer-list li {
  color: #8888aa;
}

body.dark-mode .footer-list li::before {
  color: #818cf8;
}

body.dark-mode .footer-bottom {
  border-top-color: #2d2d4a;
  color: #5a5a7a;
}

/* Footer nav-link dark-mode styling is owned by codex-footer.css —
   flat transparent-by-default links, var(--surface2) hover. The
   legacy lavender pill rule used to live here and clashed with the
   Codex chrome (audit P0-1/P0-2: washed-out indigo + low contrast).
   Removed; codex-footer.css fully drives the look in both themes. */

body.dark-mode .footer-page-inner {
  background: rgba(19, 23, 31, 0.95);
  border-color: rgba(102, 126, 234, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .footer-page-title {
  color: #818cf8;
  border-bottom-color: rgba(129, 140, 248, 0.15);
}

body.dark-mode .fp-section h2 {
  color: #c8c8e0;
}

body.dark-mode .fp-section p {
  color: #8888aa;
}

body.dark-mode .fp-list li {
  color: #8888aa;
}

body.dark-mode .fp-list li::before {
  background: #818cf8;
}

body.dark-mode .fp-disclaimer {
  border-top-color: #2d2d4a;
}

body.dark-mode .fp-disclaimer p {
  color: #5a5a7a;
}

body.dark-mode .od-tabs {
  border-bottom-color: rgba(129, 140, 248, 0.15);
}
body.dark-mode .od-stat {
  background: linear-gradient(135deg,
    rgba(129, 140, 248, 0.10) 0%,
    rgba(167, 139, 250, 0.10) 100%);
  border-color: rgba(129, 140, 248, 0.25);
}
body.dark-mode .od-stat-value {
  color: #c4b5fd;
}
body.dark-mode .od-stat-label {
  color: #9aa0c0;
}
body.dark-mode .od-tab-btn {
  color: #8888aa;
}
body.dark-mode .od-tab-btn:hover {
  color: #aaa;
}
body.dark-mode .od-tab-btn.active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}
body.dark-mode .od-download-bar {
  background: rgba(129, 140, 248, 0.06);
  border-color: rgba(129, 140, 248, 0.15);
}
body.dark-mode .od-download-link {
  background: #818cf8;
}
body.dark-mode .od-download-desc {
  color: #8888aa;
}
body.dark-mode .od-download-sep {
  color: #444;
}
body.dark-mode .od-sample {
  border-color: rgba(129, 140, 248, 0.15);
}
body.dark-mode .od-sample summary {
  color: #818cf8;
  background: rgba(129, 140, 248, 0.06);
}
body.dark-mode .od-sample summary:hover {
  background: rgba(129, 140, 248, 0.12);
}
body.dark-mode .od-sample pre {
  background: rgba(20, 20, 40, 0.5);
  color: #c8c8e0;
  border-top-color: rgba(129, 140, 248, 0.1);
}

body.dark-mode .fp-table th {
  background: rgba(129, 140, 248, 0.08);
  border-bottom-color: rgba(129, 140, 248, 0.2);
  color: #818cf8;
}
body.dark-mode .fp-table td {
  border-bottom-color: #2d2d4a;
  color: #9999bb;
}
body.dark-mode .fp-table tr:hover td {
  background: rgba(129, 140, 248, 0.03);
}
body.dark-mode .fp-field-values {
  color: #6b6b8a;
}
body.dark-mode .fp-section h3 {
  color: #aaaacc;
}

body.dark-mode .fp-code-block {
  background: rgba(20, 20, 40, 0.6);
  border-color: #2d2d4a;
  color: #9999bb;
}

body.dark-mode .fp-code-block code {
  background: rgba(129, 140, 248, 0.12);
  color: #818cf8;
}

body.dark-mode .fp-section a {
  color: #818cf8;
  border-bottom-color: rgba(129, 140, 248, 0.3);
}

body.dark-mode .fp-section a:hover {
  border-bottom-color: #818cf8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES - NEW FEATURES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Orders Stats Strip ── */
body.dark-mode .orders-stats-strip {
  background: var(--bg-elevated);
  border-color: var(--border-color);
}

body.dark-mode .orders-stat-divider {
  background: var(--border-color);
}

body.dark-mode .orders-stat--clickable:hover {
  background: rgba(102, 126, 234, 0.12);
}

body.dark-mode .orders-stat--clickable.active {
  background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  box-shadow: inset 0 -3px 0 var(--color-primary);
}

body.dark-mode .orders-stat-label {
  color: #6b6b8a;
}

body.dark-mode .orders-stat--all .orders-stat-value,
body.dark-mode .orders-stat--all .orders-stat-icon { color: #9ca3af; }
body.dark-mode .orders-stat--pending .orders-stat-value,
body.dark-mode .orders-stat--pending .orders-stat-icon { color: #fbbf24; }
body.dark-mode .orders-stat--shipped .orders-stat-value,
body.dark-mode .orders-stat--shipped .orders-stat-icon { color: #60a5fa; }
body.dark-mode .orders-stat--delivered .orders-stat-value,
body.dark-mode .orders-stat--delivered .orders-stat-icon { color: #4ade80; }

/* ── Search + toolbar ── */
body.dark-mode .orders-search-input {
  background: #24243d;
  border-color: #2d2d4a;
  color: #e5e7eb;
}

body.dark-mode .orders-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

body.dark-mode .orders-search-input::placeholder {
  color: #6b6b8a;
}

body.dark-mode .orders-search-icon {
  color: #6b6b8a;
}

body.dark-mode .orders-result-info {
  color: #6b6b8a;
}

body.dark-mode .order-sort-control {
  background: transparent;
  border-color: transparent;
}

body.dark-mode .order-sort-control .sort-select {
  color: #818cf8;
  background-color: var(--bg-secondary);
}

body.dark-mode .order-sort-control .sort-order-toggle-inline {
  color: #818cf8;
}

body.dark-mode .order-sort-control .sort-order-toggle-inline:hover {
  background: rgba(129, 140, 248, 0.15);
}

/* ── Filter chip ── */
body.dark-mode .orders-filter-chip {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
  color: #818cf8;
}

body.dark-mode .orders-filter-chip-x {
  background: rgba(102, 126, 234, 0.2);
  color: #818cf8;
}

body.dark-mode .orders-filter-chip-x:hover {
  background: rgba(102, 126, 234, 0.35);
}

/* ── Order items ── */
body.dark-mode .order-item {
  background: var(--bg-elevated);
  border-color: var(--border-color);
}

body.dark-mode .order-item:hover {
  background: rgba(102, 126, 234, 0.08);
  border-color: var(--color-primary);
}

body.dark-mode .order-id {
  color: #6b6b8a;
}

body.dark-mode .order-card-names {
  color: #6b6b8a;
}

body.dark-mode .orders-empty-filtered {
  color: #6b6b8a;
}

/* ── Status badges — dark mode overrides ── */
body.dark-mode .order-status-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

body.dark-mode .order-status-shipped {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

body.dark-mode .order-status-delivered {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

body.dark-mode .order-status-cancelled {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

/* ── Quick-action button ── */
body.dark-mode .order-quick-action {
  border-left-color: rgba(255, 255, 255, 0.08);
  color: #6b6b8a;
}

body.dark-mode .order-quick-action--shipped {
  color: #60a5fa;
}
body.dark-mode .order-quick-action--shipped:hover {
  background: rgba(96, 165, 250, 0.2);
  color: #93bbfd;
}

body.dark-mode .order-quick-action--delivered {
  color: #4ade80;
}
body.dark-mode .order-quick-action--delivered:hover {
  background: rgba(74, 222, 128, 0.2);
  color: #86efac;
}

/* ── Tags ── */
body.dark-mode .order-tag {
  background: rgba(255, 255, 255, 0.07);
  color: #a0a0c0;
}

body.dark-mode .order-tag--arrival {
  background: rgba(100, 140, 220, 0.15);
  color: #7799dd;
}

body.dark-mode .order-tag--tracking {
  color: #8888aa;
}

/* ── Thumbnails ── */
body.dark-mode .order-card-thumb {
  border-color: var(--bg-elevated, var(--surface));
}

body.dark-mode .order-card-more {
  background: #2d2d4a;
  border-color: var(--bg-elevated, var(--surface));
  color: #8888aa;
}

body.dark-mode .grading-cert,
body.dark-mode .grading-cert-inline {
  color: #a78bfa;
}

body.dark-mode .grading-fields {
  border-left-color: #7c3aed;
}

body.dark-mode .order-detail-card-link:hover {
  background-color: rgba(160, 160, 255, 0.1);
}

body.dark-mode .pwa-install-content {
  background: var(--surface);
  border-color: rgba(102, 126, 234, 0.3);
}

body.dark-mode .pwa-install-text strong {
  color: #c5c5e0;
}

body.dark-mode .pwa-install-text p {
  color: #8888aa;
}

body.dark-mode .timeline-title {
  color: #c5c5e0;
}

body.dark-mode .timeline-desc {
  color: #8888aa;
}

body.dark-mode .order-timeline::before {
  background: #2d2d4a;
}

body.dark-mode .timeline-item::before {
  background: #2d2d4a;
}

/* Order Detail Modal - Dark Mode */
body.dark-mode .order-detail-label {
  color: #8888aa;
}

body.dark-mode .order-detail-value {
  color: #c5c5e0;
}

body.dark-mode .order-detail-tracking {
  color: #c5c5e0;
}

body.dark-mode .order-detail-card {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .order-detail-card-name {
  color: #c5c5e0;
}

body.dark-mode .order-detail-card-set {
  color: #6b6b8a;
}

body.dark-mode .order-detail-card-notes {
  color: #8888aa;
}

body.dark-mode .order-detail-id {
  background: rgba(0, 0, 0, 0.3);
  color: #8888aa;
}

body.dark-mode .order-detail-notes {
  background: rgba(0, 0, 0, 0.3);
  color: #c5c5e0;
}

/* ── Offline states ── */

body.dark-mode .offline-indicator {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}

body.dark-mode .cm-offline-notice {
  background: linear-gradient(135deg, rgba(230, 81, 0, 0.15) 0%, rgba(255, 183, 77, 0.1) 100%);
  border-color: rgba(255, 152, 0, 0.4);
  color: #ffb74d;
}

body.dark-mode .cm-offline-notice svg {
  stroke: #ffb74d;
}

body.dark-mode .cm-offline-retry {
  border-color: #ffb74d;
  background: rgba(255, 183, 77, 0.1);
  color: #ffb74d;
}

body.dark-mode .cm-offline-retry:hover {
  background: rgba(255, 183, 77, 0.2);
}

body.dark-mode .ds-sync-btn.checking .sync-status-dot {
  background: #6b6b8a;
}

body.dark-mode .header-sync-label.checking {
  color: #6b6b8a;
}

body.dark-mode .ds-sync-btn.remote-newer .sync-status-dot {
  background: #818cf8;
  box-shadow: 0 0 6px rgba(129, 140, 248, 0.5);
}

body.dark-mode .header-sync-label.remote-newer {
  color: #818cf8;
}

body.dark-mode .sync-status-wrapper.offline .sync-status-dot {
  background: #888 !important;
}

body.dark-mode .sync-status-wrapper.offline .header-sync-label {
  color: #999 !important;
}

/* Special badges */
body.dark-mode .special-badge--shiny {
  background: linear-gradient(135deg, #78350f, #92400e);
  color: #fde68a;
}

body.dark-mode .special-badge--lenticular {
  background: linear-gradient(135deg, #1e3a5f, #312e81);
  color: #c7d2fe;
}

body.dark-mode .special-badge--redacted {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .special-badge--frame {
  background: linear-gradient(135deg, #3b0764, #4c1d95);
  color: #e9d5ff;
}

body.dark-mode .special-badge--magazine-promo {
  background: linear-gradient(135deg, #4a148c, #6a1b9a);
  color: #e1bee7;
}

body.dark-mode .special-badge--event {
  background: linear-gradient(135deg, #e65100, #bf360c);
  color: #ffe0b2;
}

body.dark-mode .special-badge--delta-species {
  background: linear-gradient(135deg, #0c4a6e, #0369a1);
  color: #bae6fd;
}
body.dark-mode .special-badge--unusual-size {
  background: linear-gradient(135deg, #713f12, #92400e);
  color: #fef08a;
}
body.dark-mode .special-badge--cutout {
  background: linear-gradient(135deg, #14532d, #166534);
  color: #bbf7d0;
}
body.dark-mode .special-badge--lang-exclusive {
  background: linear-gradient(135deg, #3b0764, #4c1d95);
  color: #ddd6fe;
}
body.dark-mode .special-badge--single-color-foil {
  background: linear-gradient(135deg, #4a044e, #701a75);
  color: #f0abfc;
}
body.dark-mode .special-badge--ancient-future {
  background: linear-gradient(135deg, #134e4a, #1e3a5f);
  color: #99f6e4;
}
body.dark-mode .special-badge--teach-cards {
  background: linear-gradient(135deg, #78350f, #92400e);
  color: #fef3c7;
}
body.dark-mode .special-badge--boss {
  background: linear-gradient(135deg, #312e81, #4338ca);
  color: #c7d2fe;
}
body.dark-mode .special-badge--fake {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  color: #fecaca;
}
body.dark-mode .special-badge--gold {
  background: linear-gradient(135deg, #78350f, #b45309);
  color: #fef3c7;
}
body.dark-mode .special-badge--EX {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  color: #fee2e2;
}
body.dark-mode .special-badge--stamp {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  color: #fecaca;
}
body.dark-mode .special-badge--winner-stamp {
  background: linear-gradient(135deg, #713f12, #92400e);
  color: #fef08a;
}
body.dark-mode .special-badge--game-stamp {
  background: linear-gradient(135deg, #4c1d95, #5b21b6);
  color: #ddd6fe;
}
body.dark-mode .special-badge--movie-stamp {
  background: linear-gradient(135deg, #831843, #9d174d);
  color: #fbcfe8;
}
body.dark-mode .special-badge--pokemon-center-stamp {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  color: #fee2e2;
}
body.dark-mode .special-badge--japan-event-stamp {
  background: linear-gradient(135deg, #7c2d12, #9a3412);
  color: #fed7aa;
}
body.dark-mode .special-badge--beams-stamp {
  background: linear-gradient(135deg, #14532d, #166534);
  color: #bbf7d0;
}
body.dark-mode .special-badge--shop-stamp {
  background: linear-gradient(135deg, #164e63, #155e75);
  color: #a5f3fc;
}
body.dark-mode .special-badge--legendary-pokemon-stamp {
  background: linear-gradient(135deg, #713f12, #854d0e);
  color: #fef9c3;
}
body.dark-mode .special-badge--set-stamp {
  background: linear-gradient(135deg, #312e81, #3730a3);
  color: #c7d2fe;
}
body.dark-mode .special-badge--strike-stamp {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  color: #fecaca;
}
body.dark-mode .special-badge--25th-anniv-stamp {
  background: linear-gradient(135deg, #78350f, #b45309);
  color: #fef3c7;
}
body.dark-mode .special-badge--media-stamp {
  background: linear-gradient(135deg, #0c4a6e, #0369a1);
  color: #bae6fd;
}
body.dark-mode .special-badge--trainer-stamp {
  background: linear-gradient(135deg, #581c87, #6b21a8);
  color: #e9d5ff;
}
body.dark-mode .special-badge--GX {
  background: linear-gradient(135deg, #1e3a5f, #1d4ed8);
  color: #bfdbfe;
}
body.dark-mode .special-badge--V {
  background: linear-gradient(135deg, #2e1065, #5b21b6);
  color: #ddd6fe;
}
body.dark-mode .special-badge--VMAX {
  background: linear-gradient(135deg, #500724, #9d174d);
  color: #fce7f3;
}
body.dark-mode .special-badge--VSTAR {
  background: linear-gradient(135deg, #78350f, #b45309);
  color: #fef3c7;
}

/* V-UNION pieces */
body.dark-mode .v-union-piece {
  background: rgba(255, 255, 255, 0.1);
}