/**
 * Extended dark mode — widgets not covered in ghbm-spa-dark-mode.css.
 * Pattern: html[data-theme="dark"] + .pds-app-shell.pds-theme-dark on #pdsAppView.
 */
html[data-theme="dark"] #pdsAppView,
.pds-app-shell.pds-theme-dark #pdsAppView {
  --spa-success-bg: rgba(16, 185, 129, 0.14);
  --spa-success-text: #6ee7b7;
  --spa-warning-bg: rgba(245, 158, 11, 0.14);
  --spa-warning-text: #fcd34d;
  --spa-danger-bg: rgba(244, 63, 94, 0.14);
  --spa-danger-text: #fda4af;
  --spa-info-bg: rgba(0, 86, 179, 0.18);
  --spa-info-text: #93c5fd;
}

/* ── Shared: modals, overlays, pagination, empty states ── */
html[data-theme="dark"] #pdsAppView [class*="-modal"]:not([class*="backdrop"]),
html[data-theme="dark"] #pdsAppView [class*="-modal-card"],
html[data-theme="dark"] #pdsAppView [class*="-modal-head"],
html[data-theme="dark"] #pdsAppView [class*="-modal-body"],
html[data-theme="dark"] #pdsAppView [class*="-modal-foot"],
html[data-theme="dark"] #pdsAppView [class*="-preview-dialog"],
html[data-theme="dark"] #pdsAppView [class*="-preview-header"],
html[data-theme="dark"] #pdsAppView [class*="-preview-body"],
html[data-theme="dark"] #pdsAppView [class*="-preview-footer"],
html[data-theme="dark"] #pdsAppView .orders-empty,
html[data-theme="dark"] #pdsAppView .rc-empty,
html[data-theme="dark"] #pdsAppView .afa-empty,
html[data-theme="dark"] #pdsAppView .pds-empty,
html[data-theme="dark"] #pdsAppView .sp-empty,
html[data-theme="dark"] #pdsAppView .adm-afa-empty,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal"]:not([class*="backdrop"]),
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal-card"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal-head"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal-body"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal-foot"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-dialog"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-header"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-body"],
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-footer"],
.pds-app-shell.pds-theme-dark #pdsAppView .orders-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .rc-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-empty {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
  box-shadow: none;
}

html[data-theme="dark"] #pdsAppView [class*="-modal-head"] h3,
html[data-theme="dark"] #pdsAppView [class*="-preview-header"] h3,
html[data-theme="dark"] #pdsAppView [class*="-preview-item"] strong,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal-head"] h3,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-header"] h3,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-item"] strong {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView [class*="-preview-item"] span,
html[data-theme="dark"] #pdsAppView [class*="-modal-head"] p,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-item"] span,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-modal-head"] p {
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView [class*="-preview-close"],
html[data-theme="dark"] #pdsAppView .orders-preview-close,
.pds-app-shell.pds-theme-dark #pdsAppView [class*="-preview-close"],
.pds-app-shell.pds-theme-dark #pdsAppView .orders-preview-close {
  background: var(--spa-surface-2);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

/* ── Order History — filters, pagination, mobile, menus ── */
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-search-input,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-filter-select,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-filter-group input,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-period-btn,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-pagination,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-pagination-controls button,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-action-menu,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-mobile-card,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-card,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-toolbar,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-form-card,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-search-input,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-filter-select,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-filter-group input,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-period-btn,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-pagination,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-pagination-controls button,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-action-menu,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-mobile-card,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-card,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-toolbar,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-form-card {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-period-btn.active,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-period-btn.active {
  background: var(--spa-info-bg);
  border-color: rgba(0, 86, 179, 0.45);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-action-menu button,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-mobile-row strong,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-action-menu button,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-mobile-row strong {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-action-menu button:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-action-menu button:hover {
  background: var(--spa-surface-2);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table thead th,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table tbody td,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table thead th,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table tbody td {
  background: var(--spa-surface);
  border-color: var(--spa-border-soft);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table thead th,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table thead th {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-summary-icon.total,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-summary-icon.total {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-empty-icon,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-empty-icon {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
}

/* Order History (user) — desktop table, form list, empty state, toolbar */
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-form-list,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-desktop-table,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-empty,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-actions button,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-action-btn,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-filter-submit,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-btn:not(.orders-btn-primary),
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-form-card,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-form-list,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-desktop-table,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-actions button,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-action-btn,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-filter-submit,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-btn:not(.orders-btn-primary),
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-form-card {
  background: var(--spa-surface) !important;
  border-color: var(--spa-border) !important;
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-toolbar,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-card,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-toolbar,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-card {
  background: var(--spa-surface) !important;
  border-color: var(--spa-border) !important;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-toolbar h5,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-toolbar small,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-pagination p,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-pagination-controls span,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-mobile-row > span:first-child,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-toolbar h5,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-toolbar small,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-pagination p,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-pagination-controls span,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-mobile-row > span:first-child {
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-desktop-table thead th,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-desktop-table thead th {
  background: var(--spa-surface-2) !important;
  color: var(--spa-muted) !important;
  border-color: var(--spa-border-soft);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-desktop-table tbody td,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-desktop-table tbody td {
  background: var(--spa-surface) !important;
  color: var(--spa-text) !important;
  border-color: var(--spa-border-soft) !important;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-desktop-table tbody tr:hover td,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-desktop-table tbody tr:hover td {
  background: var(--spa-surface-2) !important;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-form-card:hover,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-actions button:hover,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-action-btn:hover,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-filter-submit:hover,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-btn:not(.orders-btn-primary):hover,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-form-card:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-actions button:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-action-btn:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-filter-submit:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-btn:not(.orders-btn-primary):hover {
  background: var(--spa-surface-2) !important;
  border-color: var(--spa-border) !important;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-mobile-row,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-mobile-row {
  border-color: var(--spa-border-soft);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-summary-icon.completed,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-summary-icon.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-summary-icon.pending,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-summary-icon.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-summary-icon.revenue,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-summary-icon.revenue {
  background: rgba(0, 86, 179, 0.2);
  color: #93c5fd;
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-empty {
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-table-actions .bx,
html[data-theme="dark"] #pdsAppView .orders-sneat-page .orders-action-btn .bx,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-table-actions .bx,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-sneat-page .orders-action-btn .bx {
  color: var(--spa-muted);
}

/* Admin OM modals + dropdowns */
html[data-theme="dark"] #pdsAppView .adm-om-modal,
html[data-theme="dark"] #pdsAppView .adm-om-stats-modal,
html[data-theme="dark"] #pdsAppView .adm-om-dropdown-menu,
html[data-theme="dark"] #pdsAppView .adm-om-page .orders-empty-state,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-om-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-om-stats-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-om-dropdown-menu,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-om-page .orders-empty-state {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .adm-om-modal-overlay,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-om-modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

/* ── Wallet extras (topup, badges) ── */
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-amount-grid button,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-network-option,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-topup-card,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-topup-history-item,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-history-stat,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-spend-card,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-input-wrap .form-control,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .pds-wallet-modal-overlay,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-amount-grid button,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-network-option,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-topup-card,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-topup-history-item,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-history-stat,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-spend-card,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-input-wrap .form-control {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-amount-grid button.active,
html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-network-option.active,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-amount-grid button.active,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-network-option.active {
  background: var(--spa-info-bg);
  border-color: rgba(0, 86, 179, 0.5);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .wallet-sneat-page .wallet-empty,
.pds-app-shell.pds-theme-dark #pdsAppView .wallet-sneat-page .wallet-empty {
  color: var(--spa-muted);
}

/* ── Commissions ── */
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-kpi-card,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-table-card,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-withdraw-panel,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-breakdown-card,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-icon-btn,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .payout-readiness,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-withdraw-stats div,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-table-card .card-header,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-kpi-card,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-table-card,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-withdraw-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-breakdown-card,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-icon-btn,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .payout-readiness,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-withdraw-stats div,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-table-card .card-header {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-page-header h4,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-kpi-card .card-title,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-withdraw-header h6,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-breakdown-copy h5,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-donut-center strong,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-detail-cell strong,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-page-header h4,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-kpi-card .card-title,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-withdraw-header h6,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-breakdown-copy h5,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-donut-center strong,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-detail-cell strong {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .payout-progress,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .payout-progress {
  background: var(--spa-surface-2);
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-table thead th,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-table thead th {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
  border-color: var(--spa-border);
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-table tbody tr:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-table tbody tr:hover {
  background: var(--spa-surface-2);
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-earnings-panel,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-top h2,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-meta strong,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-earnings-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-top h2,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-meta strong {
  color: #fff;
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-top span,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-meta small,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-top span,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-earnings-panel .commission-earnings-meta small {
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .commission-withdraw-stats strong,
html[data-theme="dark"] #pdsAppView .ghbm-commissions-page .payout-readiness-top strong,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .commission-withdraw-stats strong,
.pds-app-shell.pds-theme-dark #pdsAppView .ghbm-commissions-page .payout-readiness-top strong {
  color: var(--spa-heading);
}

/* ── Results Checker (user) — rc-* tree ── */
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-hero,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-card,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-tab,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-product,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-history-item,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-modal,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-icon-btn,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-modal-btn.secondary,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-hero,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-card,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-tab,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-product,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-history-item,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-icon-btn,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-modal-btn.secondary {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-hero,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-hero {
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.25) 0%, var(--spa-surface) 100%);
}

html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-wallet-pill,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-wallet-pill {
  background: var(--spa-surface-2);
  border-color: var(--spa-border);
}

html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-tab.active,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-tab.active {
  background: #0056b3;
  border-color: #0056b3;
  color: #fff;
}

html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-card-head h2,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-price,
html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-wallet-pill-value,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-card-head h2,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-price,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-wallet-pill-value {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-alert,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-alert {
  background: var(--spa-info-bg);
  border-color: rgba(0, 86, 179, 0.35);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .results-checker-sneat-page .rc-modal-overlay,
.pds-app-shell.pds-theme-dark #pdsAppView .results-checker-sneat-page .rc-modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

/* ── AFA Registration ── */
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-hero,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-card,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-tab,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-input,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-select,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-phone-prefix,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-preview-dialog,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-table-wrap,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-loader-box,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-wallet-pill,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-hero,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-card,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-tab,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-input,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-select,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-phone-prefix,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-preview-dialog,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-table-wrap,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-loader-box,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-wallet-pill {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-hero,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-hero {
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.22) 0%, var(--spa-surface) 100%);
}

html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-tab.active,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-tab.active {
  background: #0056b3;
  color: #fff;
}

html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-table thead th,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-table td,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-table thead th,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-table td {
  border-color: var(--spa-border-soft);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-table thead th,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-table thead th {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-card-head h2,
html[data-theme="dark"] #pdsAppView .afa-registration-page .afa-field label,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-card-head h2,
.pds-app-shell.pds-theme-dark #pdsAppView .afa-registration-page .afa-field label {
  color: var(--spa-heading);
}

/* ── Admin AFA Orders ── */
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-summary-card,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-filter-card,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-tab,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-row,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-bulk-bar,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-modal,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-search-input,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-filter-select,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-date-input,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-summary-card,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-filter-card,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-tab,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-row,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-bulk-bar,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-search-input,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-filter-select,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-date-input {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-tab.active,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-tab.active {
  background: var(--spa-info-bg);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-summary-value,
html[data-theme="dark"] #pdsAppView .adm-afa-page .adm-afa-row-main strong,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-summary-value,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-afa-page .adm-afa-row-main strong {
  color: var(--spa-heading);
}

/* ── Admin Users ── */
html[data-theme="dark"] #pdsAppView .um-page .um-stat-card,
html[data-theme="dark"] #pdsAppView .um-page .um-tab,
html[data-theme="dark"] #pdsAppView .um-page .um-modal,
html[data-theme="dark"] #pdsAppView .um-page .um-modal-foot,
html[data-theme="dark"] #pdsAppView .um-page .um-alert,
html[data-theme="dark"] #pdsAppView .um-page .um-search input,
html[data-theme="dark"] #pdsAppView .um-page .um-page-btn,
html[data-theme="dark"] #pdsAppView .um-page .um-page-num,
html[data-theme="dark"] #pdsAppView .um-page .um-row,
html[data-theme="dark"] #pdsAppView .um-page .um-field input,
html[data-theme="dark"] #pdsAppView .um-page .um-field select,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-stat-card,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-tab,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-modal-foot,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-alert,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-search input,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-page-btn,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-page-num,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-row,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-field input,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-field select {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
  box-shadow: none;
}

html[data-theme="dark"] #pdsAppView .um-page .um-stat-card strong,
html[data-theme="dark"] #pdsAppView .um-page .um-modal-head h3,
html[data-theme="dark"] #pdsAppView .um-page .um-user-name,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-stat-card strong,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-modal-head h3,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-user-name {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .um-page .um-tab.active,
html[data-theme="dark"] #pdsAppView .um-page .um-page-num.is-active,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-tab.active,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-page-num.is-active {
  background: var(--spa-info-bg);
  border-color: rgba(0, 86, 179, 0.45);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .um-page .um-row.is-pending,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-row.is-pending {
  background: rgba(245, 158, 11, 0.08);
}

html[data-theme="dark"] #pdsAppView .um-page .um-row:hover,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-row:hover {
  background: var(--spa-surface-2);
}

html[data-theme="dark"] #pdsAppView .um-page .um-table th,
.pds-app-shell.pds-theme-dark #pdsAppView .um-page .um-table th {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
}

/* ── Storefront Payments ── */
html[data-theme="dark"] #pdsAppView .sp-page .sp-alert,
html[data-theme="dark"] #pdsAppView .sp-page .sp-modal,
html[data-theme="dark"] #pdsAppView .sp-page .sp-modal-foot,
html[data-theme="dark"] #pdsAppView .sp-page .sp-icon-btn,
html[data-theme="dark"] #pdsAppView .sp-page .sp-detail-grid > div,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-alert,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-modal-foot,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-icon-btn,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-detail-grid > div {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .sp-page .sp-alert,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-alert {
  background: var(--spa-info-bg);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .sp-page .sp-modal-head h3,
html[data-theme="dark"] #pdsAppView .sp-page .sp-card-title,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-modal-head h3,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-card-title {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .sp-page .sp-filter:not(.is-active),
.pds-app-shell.pds-theme-dark #pdsAppView .sp-page .sp-filter:not(.is-active) {
  background: var(--spa-surface);
  color: var(--spa-muted);
}

/* ── My Products ── */
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-product-card,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-modal,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-modal input,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-modal select,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-modal textarea,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-btn-outline,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-product-card,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-modal,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-modal input,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-modal select,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-modal textarea,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-btn-outline {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-product-body h3,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-product-price,
html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-modal label,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-product-body h3,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-product-price,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-modal label {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .pds-products-wrap .pds-product-meta,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-products-wrap .pds-product-meta {
  color: var(--spa-muted);
}

/* ── API Documentation ── */
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-hero,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-fact,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-card,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-endpoint,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-nav-link,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-mobile-toggle,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-mobile-panel,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-endpoint-tab,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-lang-tab,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-key-panel,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-key-input,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-table-wrap,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-sidebar-inner,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-hero,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-fact,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-card,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-endpoint,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-nav-link,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-mobile-toggle,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-mobile-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-endpoint-tab,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-lang-tab,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-key-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-key-input,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-table-wrap,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-sidebar-inner {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-hero,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-hero {
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.2) 0%, var(--spa-surface) 100%);
}

html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-section h2,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-fact strong,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-endpoint-head h3,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-section h2,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-fact strong,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-endpoint-head h3 {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-nav-link.active,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-endpoint-tab.active,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-lang-tab.active,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-nav-link.active,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-endpoint-tab.active,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-lang-tab.active {
  background: var(--spa-info-bg);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-table th,
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-table td,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-table th,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-table td {
  border-color: var(--spa-border-soft);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-table th,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-table th {
  background: var(--spa-surface-2);
  color: var(--spa-muted);
}

/* Code blocks stay dark-themed — only adjust header chrome */
html[data-theme="dark"] #pdsAppView .pds-api-docs .pds-api-codeblock-header,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-api-docs .pds-api-codeblock-header {
  background: #1e1e2e;
  border-color: var(--spa-border);
}

/* ── My Storefront — full night mode (Settings / Appearance / Pricing) ── */
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-panel {
  --ussd-surface: var(--spa-surface);
  --ussd-muted: var(--spa-muted);
  --ussd-border: var(--spa-border-soft);
  background: var(--spa-surface);
  border-color: var(--spa-border-soft);
  box-shadow: none;
}

html[data-theme="dark"] #pdsAppView .pds-msf-ussd-codes,
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-code-card,
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-flow,
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-flow-steps li,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-codes,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-code-card,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-flow,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-flow-steps li {
  background: var(--spa-surface);
  border-color: var(--spa-border-soft);
  box-shadow: none;
}

html[data-theme="dark"] #pdsAppView .pds-msf-ussd-code-card.is-accent,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-code-card.is-accent {
  background: rgba(255, 126, 0, 0.1);
  border-color: rgba(255, 126, 0, 0.22);
}

html[data-theme="dark"] #pdsAppView .pds-msf-ussd-code-label label,
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-flow-steps li strong,
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-flow-title,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-cat-text strong,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-pkg-label,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-info-title,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-info-sub,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-card strong,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-code-label label,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-flow-steps li strong,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-flow-title,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-cat-text strong,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-pkg-label,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-info-title,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-info-sub,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-card strong {
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .pds-msf-ussd-code-label small,
html[data-theme="dark"] #pdsAppView .pds-msf-ussd-flow-steps li p,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-cat,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-card small,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-cat-text small,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-cost,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-currency,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-code-label small,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-flow-steps li p,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-cat,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-card small,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-cat-text small,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-cost,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-currency {
  color: var(--spa-muted);
}

html[data-theme="dark"] #pdsAppView .pds-msf-ussd-code-input,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-ussd-code-input {
  background: var(--spa-surface-2);
  border-color: var(--spa-border);
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-content,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-color-tabs,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-content,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-color-tabs {
  background: var(--spa-surface-2);
  border-color: var(--spa-border-soft);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-color-tab.is-active,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-color-tab.is-active {
  background: var(--spa-surface);
  color: #93c5fd;
  box-shadow: none;
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-slug-group input,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-slug-group input {
  background: transparent;
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-panel,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-cat,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-pkg,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-save-bar,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-card,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-link-box,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-btn-outline,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-cat,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-pkg,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-save-bar,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-card,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-link-box,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-btn-outline {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-card.is-selected,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-card.is-selected {
  background: var(--spa-info-bg);
  border-color: #0056b3;
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-cat-body,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-info-banner,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-cat-body,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-info-banner {
  background: var(--spa-surface-2);
  border-color: var(--spa-border-soft);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-input-wrap,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-input-wrap {
  background: var(--spa-surface-2);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-input-wrap input.pds-pricing-price,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-input-wrap input.pds-pricing-price {
  background: transparent;
  color: var(--spa-heading);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-btn-outline,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-btn-outline {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.35);
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-packages,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-scroll,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-packages,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-scroll {
  scrollbar-color: #475569 transparent;
}

html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-pricing-packages::-webkit-scrollbar-thumb,
html[data-theme="dark"] #pdsAppView .pds-msf-page .pds-msf-theme-scroll::-webkit-scrollbar-thumb,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-pricing-packages::-webkit-scrollbar-thumb,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-msf-page .pds-msf-theme-scroll::-webkit-scrollbar-thumb {
  background: #475569;
}

/* ── Purchase / Data Packages ── */
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .purchase-mode,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .purchase-mode-row,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .purchase-network-accordion .accordion-item,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .purchase-network-accordion .accordion-button,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .purchase-network-accordion .accordion-body,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .excel-panel,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .bulk-panel-header,
html[data-theme="dark"] #pdsAppView .bulk-uploader-sneat,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .purchase-mode,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .purchase-mode-row,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .purchase-network-accordion .accordion-item,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .purchase-network-accordion .accordion-button,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .purchase-network-accordion .accordion-body,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .excel-panel,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .bulk-panel-header,
.pds-app-shell.pds-theme-dark #pdsAppView .bulk-uploader-sneat {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .purchase-sneat-page .purchase-mode.active,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .network-option.active,
html[data-theme="dark"] #pdsAppView .purchase-sneat-page .plan-card.active,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .purchase-mode.active,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .network-option.active,
.pds-app-shell.pds-theme-dark #pdsAppView .purchase-sneat-page .plan-card.active {
  background: var(--spa-info-bg);
  border-color: rgba(0, 86, 179, 0.45);
}

/* ── Profile extras ── */
html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-profile-pill,
html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-tier-badge,
html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-profile-password-reqs,
html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-profile-devices-table td,
html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-profile-btn-secondary,
html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-profile-floating-label,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-profile-pill,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-tier-badge,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-profile-password-reqs,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-profile-devices-table td,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-profile-btn-secondary,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-profile-floating-label {
  background: var(--spa-surface-2);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .pds-profile-page .pds-tier-admin,
.pds-app-shell.pds-theme-dark #pdsAppView .pds-profile-page .pds-tier-admin {
  background: var(--spa-info-bg);
  color: var(--spa-info-text);
}

/* ── Registration code admin ── */
html[data-theme="dark"] #pdsAppView .adm-reg-page .adm-reg-card,
html[data-theme="dark"] #pdsAppView .adm-reg-page .adm-reg-status,
html[data-theme="dark"] #pdsAppView .adm-reg-page .adm-reg-note,
html[data-theme="dark"] #pdsAppView .adm-reg-page input,
html[data-theme="dark"] #pdsAppView .adm-reg-page select,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page .adm-reg-card,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page .adm-reg-status,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page .adm-reg-note,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page input,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page select {
  background: var(--spa-surface);
  border-color: var(--spa-border);
  color: var(--spa-text);
}

html[data-theme="dark"] #pdsAppView .adm-reg-page h4,
html[data-theme="dark"] #pdsAppView .adm-reg-page label,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page h4,
.pds-app-shell.pds-theme-dark #pdsAppView .adm-reg-page label {
  color: var(--spa-heading);
}

/* ── Status badges (semantic — keep readable on dark) ── */
html[data-theme="dark"] #pdsAppView .orders-status-badge--completed,
html[data-theme="dark"] #pdsAppView .orders-badge--completed,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-status-badge--completed,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-badge--completed {
  background: var(--spa-success-bg);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--spa-success-text);
}

html[data-theme="dark"] #pdsAppView .orders-status-badge--pending,
html[data-theme="dark"] #pdsAppView .orders-badge--pending,
html[data-theme="dark"] #pdsAppView .orders-badge--warning,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-status-badge--pending,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-badge--pending,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-badge--warning {
  background: var(--spa-warning-bg);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--spa-warning-text);
}

html[data-theme="dark"] #pdsAppView .orders-status-badge--failed,
html[data-theme="dark"] #pdsAppView .orders-badge--failed,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-status-badge--failed,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-badge--failed {
  background: var(--spa-danger-bg);
  border-color: rgba(244, 63, 94, 0.35);
  color: var(--spa-danger-text);
}

html[data-theme="dark"] #pdsAppView .orders-badge--processing,
html[data-theme="dark"] #pdsAppView .orders-status-badge--processing,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-badge--processing,
.pds-app-shell.pds-theme-dark #pdsAppView .orders-status-badge--processing {
  background: var(--spa-info-bg);
  border-color: rgba(0, 86, 179, 0.35);
  color: var(--spa-info-text);
}

html[data-theme="dark"] #pdsAppView .sp-badge.paid,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-badge.paid {
  background: var(--spa-success-bg);
  color: var(--spa-success-text);
}

html[data-theme="dark"] #pdsAppView .sp-badge.pending,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-badge.pending {
  background: var(--spa-warning-bg);
  color: var(--spa-warning-text);
}

html[data-theme="dark"] #pdsAppView .sp-badge.failed,
.pds-app-shell.pds-theme-dark #pdsAppView .sp-badge.failed {
  background: var(--spa-danger-bg);
  color: var(--spa-danger-text);
}

/* ── Global toasts (rendered on body, outside #pdsAppView) ── */
html[data-theme="dark"] .pds-toast,
body.pds-theme-dark-page .pds-toast,
body.ghbm-dark .pds-toast {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .pds-toast-title,
body.pds-theme-dark-page .pds-toast-title,
body.ghbm-dark .pds-toast-title {
  color: #f1f5f9;
}

html[data-theme="dark"] .pds-toast-text,
body.pds-theme-dark-page .pds-toast-text,
body.ghbm-dark .pds-toast-text {
  color: #94a3b8;
}

html[data-theme="dark"] .pds-toast-close,
body.pds-theme-dark-page .pds-toast-close,
body.ghbm-dark .pds-toast-close {
  color: #94a3b8;
}