/**
 * Customer app dark mode — html[data-theme="dark"] + .dark (Tailwind class).
 * Brand colors stay server-driven; surfaces and text flip via tokens.
 */

html[data-theme="dark"] {
    --app-bg: #0d0d0d;
    --app-bg-gradient: linear-gradient(135deg, #0d0d0d 0%, #161616 100%);
    --app-surface: #1a1a1a;
    --app-surface-elevated: #242424;
    --app-text: #f5f5f5;
    --app-text-muted: #a3a3a3;
    --app-border: #2e2e2e;
    --app-border-subtle: #222222;
    --app-hover: #262626;
    --app-input-bg: #141414;
    /* Do not override --brand-50/--brand-100 — Tailwind text-blue-100 maps to brand-100 */
    color-scheme: dark;
}

/* ── Base shell (base_light.html) ───────────────────────────── */
html[data-theme="dark"] body {
    background: var(--app-bg-gradient) !important;
    color: var(--app-text);
}

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

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #475569;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

html[data-theme="dark"] .profile-menu-btn:hover {
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface));
}

html[data-theme="dark"] .profile-menu-btn .name {
    color: var(--app-text);
}

html[data-theme="dark"] .profile-menu-dropdown {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .profile-menu-dropdown a,
html[data-theme="dark"] .profile-menu-dropdown button.logout-link {
    color: var(--app-text);
}

html[data-theme="dark"] .profile-menu-dropdown a:hover,
html[data-theme="dark"] .profile-menu-dropdown button.logout-link:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .profile-menu-dropdown a.logout-link,
html[data-theme="dark"] .profile-menu-dropdown button.logout-link {
    color: #f87171;
    border-top-color: var(--app-border);
}

html[data-theme="dark"] .profile-menu-dropdown a.logout-link i,
html[data-theme="dark"] .profile-menu-dropdown button.logout-link i {
    color: #f87171;
}

html[data-theme="dark"] .card {
    background: var(--app-surface);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .bottom-nav {
    background: rgba(26, 26, 26, 0.95);
}

/* ── Tailwind utility overrides ─────────────────────────────── */
html[data-theme="dark"] .bg-white {
    background-color: var(--app-surface) !important;
}

html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-yellow-50 {
    background-color: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
}

html[data-theme="dark"] .bg-gray-100 {
    background-color: var(--app-hover) !important;
}

html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .hover\:bg-white:hover {
    background-color: var(--app-hover) !important;
}

html[data-theme="dark"] .hover\:bg-blue-50:hover {
    background-color: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .hover\:bg-indigo-100:hover {
    background-color: color-mix(in srgb, #6366f1 18%, var(--app-surface)) !important;
}

html[data-theme="dark"] .hover\:bg-red-50:hover {
    background-color: color-mix(in srgb, #ef4444 12%, var(--app-surface)) !important;
}

html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-900 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-indigo-700 {
    color: color-mix(in srgb, var(--brand-accent) 80%, white) !important;
}

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-50 {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] #notif-dropdown-content {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] #notif-dropdown-content .border-b,
html[data-theme="dark"] #notif-dropdown-content .border-t {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .border-purple-100 {
    border-color: color-mix(in srgb, var(--brand-color) 25%, var(--app-border)) !important;
}

html[data-theme="dark"] header.sticky {
    background: rgba(26, 26, 26, 0.92) !important;
    border-bottom-color: var(--app-border) !important;
}

html[data-theme="dark"] aside.app-sidebar {
    background: var(--app-surface) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .shadow-elevated,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-border);
}

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

html[data-theme="dark"] label {
    color: var(--app-text-muted);
}

/* ── App screen pages (settings, support, etc.) ───────────── */
html[data-theme="dark"] .app-screen-page,
html[data-theme="dark"] .app-screen-page--support {
    background: var(--app-bg);
}

html[data-theme="dark"] .app-screen-card {
    background: var(--app-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .app-screen-body {
    background: var(--app-bg);
}

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

html[data-theme="dark"] .app-screen-empty p {
    color: var(--app-text-muted);
}

/* Brand header block — keep light text on colored top */
html[data-theme="dark"] .app-screen-top .app-screen-header h1,
html[data-theme="dark"] .app-screen-top .app-screen-profile .meta h3 {
    color: #fff !important;
}

html[data-theme="dark"] .app-screen-top .app-screen-profile .meta p {
    color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="dark"] .app-screen-top .app-screen-hero h2,
html[data-theme="dark"] .app-screen-top .app-screen-hero p {
    color: #fff !important;
}

html[data-theme="dark"] .app-screen-top .app-screen-hero p {
    color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .app-screen-body .app-screen-header h1,
html[data-theme="dark"] .app-screen-body .app-screen-profile .meta h3 {
    color: var(--app-text);
}

html[data-theme="dark"] .app-screen-profile .meta p,
html[data-theme="dark"] .app-screen-section-title {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-screen-list {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="dark"] .app-screen-item {
    border-bottom-color: var(--app-border-subtle);
    color: var(--app-text);
}

html[data-theme="dark"] .app-screen-item:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .app-screen-item .item-icon {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface-elevated));
}

html[data-theme="dark"] .app-screen-item .item-info h4 {
    color: var(--app-text);
}

html[data-theme="dark"] .app-screen-item .item-info p {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-screen-item .item-arrow {
    color: #64748b;
}

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

html[data-theme="dark"] .app-developer-header:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .app-developer-header .item-icon {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface-elevated));
    color: var(--brand-accent);
}

html[data-theme="dark"] .app-developer-header h4 {
    color: var(--app-text);
}

html[data-theme="dark"] .app-developer-header p,
html[data-theme="dark"] .app-developer-header .toggle-icon {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-developer-body {
    border-top-color: var(--app-border-subtle);
}

html[data-theme="dark"] .app-developer-link {
    border-bottom-color: var(--app-border-subtle);
}

html[data-theme="dark"] .app-developer-link:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .app-developer-link .sub-icon {
    background: var(--app-input-bg);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-developer-link h4 {
    color: var(--app-text);
}

html[data-theme="dark"] .app-developer-link p,
html[data-theme="dark"] .app-developer-link .item-arrow {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-logout {
    background: color-mix(in srgb, #ef4444 12%, var(--app-surface));
    color: #fca5a5;
}

html[data-theme="dark"] .app-version {
    color: var(--app-text-muted);
}

/* ── Mobile dashboard ───────────────────────────────────────── */
@media (max-width: 767px) {
    html[data-theme="dark"] body {
        background: var(--app-bg) !important;
    }
}

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

html[data-theme="dark"] .quick-actions-card {
    background: var(--app-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .quick-actions-label,
html[data-theme="dark"] .quick-action-item span {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .quick-action-item .icon-box {
    background: color-mix(in srgb, var(--brand-color) 16%, var(--app-surface-elevated));
}

html[data-theme="dark"] .more-services-sheet {
    background: var(--app-surface);
}

html[data-theme="dark"] .more-services-header {
    border-bottom-color: var(--app-border);
}

html[data-theme="dark"] .more-services-header h3 {
    color: var(--app-text);
}

html[data-theme="dark"] .more-services-close {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .kyc-banner-app {
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface));
    border-color: color-mix(in srgb, var(--brand-color) 28%, var(--app-border));
}

html[data-theme="dark"] .kyc-banner-app .kyc-icon {
    background: color-mix(in srgb, var(--brand-color) 20%, var(--app-surface-elevated));
}

html[data-theme="dark"] .kyc-banner-app .kyc-text strong {
    color: var(--app-text);
}

html[data-theme="dark"] .kyc-banner-app .kyc-text p {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-bottom-nav {
    background: var(--app-surface);
    border-top-color: var(--app-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .app-nav-item {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .app-nav-item.is-active {
    color: var(--brand-accent, #9B3DB5);
}

/* ── Theme toggle button in header ──────────────────────────── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.theme-toggle-btn:hover {
    background: color-mix(in srgb, var(--brand-color) 8%, white);
    color: var(--brand-color);
}

html[data-theme="dark"] .theme-toggle-btn {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
    background: var(--app-hover);
    color: var(--app-text);
}

/* ── Toasts ─────────────────────────────────────────────────── */
html[data-theme="dark"] #toast-container > div {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* ── Service pages (data, airtime, cable, etc.) ─────────────── */
html[data-theme="dark"] .service-page {
    background: var(--app-bg);
}

html[data-theme="dark"] .content-card {
    background: var(--app-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .phone-section label,
html[data-theme="dark"] .amount-section label,
html[data-theme="dark"] .plans-section > label,
html[data-theme="dark"] .data-type-section > label,
html[data-theme="dark"] .pin-section label {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .phone-input-wrap,
html[data-theme="dark"] .amount-input-wrap {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .phone-input-wrap:focus-within,
html[data-theme="dark"] .amount-input-wrap:focus-within {
    background: var(--app-surface-elevated);
    border-color: var(--brand-color);
}

html[data-theme="dark"] .phone-input-wrap input,
html[data-theme="dark"] .amount-input-wrap input {
    color: var(--app-text);
}

html[data-theme="dark"] .amount-input-wrap .currency {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .network-logo {
    background: var(--app-surface-elevated);
    border-color: var(--app-border);
}

html[data-theme="dark"] .quick-amount-btn {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .quick-amount-btn:hover:not(.selected) {
    border-color: var(--brand-color);
    color: var(--brand-accent);
}

html[data-theme="dark"] .quick-amount-btn.selected {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}

html[data-theme="dark"] .data-type-tab,
html[data-theme="dark"] .plan-card {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

/* Must beat html[data-theme="dark"] .data-type-tab above — otherwise active looks inactive */
html[data-theme="dark"] .data-type-tab.active {
    background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-dark) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

html[data-theme="dark"] .data-type-tab:hover:not(.active) {
    border-color: var(--brand-color);
    color: var(--app-text);
}

html[data-theme="dark"] .plan-card.selected {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 16%, var(--app-surface)) !important;
}

html[data-theme="dark"] .plan-card.selected .data-size {
    color: var(--brand-color) !important;
}

html[data-theme="dark"] .data-type-tabs-wrapper::after {
    background: linear-gradient(to right, transparent, var(--app-surface));
}

html[data-theme="dark"] .plan-card .data-size {
    color: var(--app-text);
}

html[data-theme="dark"] .plan-card .type-badge {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .loading-plans {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .network-modal-content,
html[data-theme="dark"] .confirm-modal-content {
    background: var(--app-surface);
}

html[data-theme="dark"] .network-modal-header,
html[data-theme="dark"] .confirm-row {
    border-color: var(--app-border-subtle);
}

html[data-theme="dark"] .network-modal-header h3,
html[data-theme="dark"] .confirm-modal-header .amount,
html[data-theme="dark"] .confirm-row .value,
html[data-theme="dark"] .network-modal-option .info .name {
    color: var(--app-text);
}

html[data-theme="dark"] .network-modal-header .close-btn {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .network-modal-option {
    border-color: var(--app-border);
}

html[data-theme="dark"] .network-modal-option:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .network-modal-option .info .desc,
html[data-theme="dark"] .confirm-row .label {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .pin-input {
    background: var(--app-input-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .pin-section {
    border-top-color: var(--app-border);
}

html[data-theme="dark"] .balance-info {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .balance-info .balance-label {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .balance-info .balance-value {
    color: var(--app-text);
}

html[data-theme="dark"] .buy-btn:disabled {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

/* ── Wallet funding pages (ATM card, VA, manual bank) ─────── */
html[data-theme="dark"] .amt-wrap {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .amt-wrap:focus-within {
    background: var(--app-surface-elevated);
    border-color: var(--brand-color);
}

html[data-theme="dark"] .amt-wrap .currency,
html[data-theme="dark"] .fund-hint,
html[data-theme="dark"] .secure-badge {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .amt-wrap input {
    color: var(--app-text);
}

html[data-theme="dark"] .amt-wrap input::placeholder {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .quick-chip {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .quick-chip:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface));
}

html[data-theme="dark"] .quick-chip.active {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}

html[data-theme="dark"] .pay-btn:disabled {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .balance-pill,
html[data-theme="dark"] .fund-balance-pill {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .balance-pill .label,
html[data-theme="dark"] .fund-balance-pill .label,
html[data-theme="dark"] .fund-field-label {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .balance-pill .value,
html[data-theme="dark"] .fund-balance-pill .value {
    color: var(--app-text);
}

html[data-theme="dark"] .notice-box {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--brand-color) 28%, var(--app-border));
    color: var(--app-text);
}

html[data-theme="dark"] .notice-box.warn {
    background: color-mix(in srgb, #f59e0b 14%, var(--app-surface));
    border-color: color-mix(in srgb, #f59e0b 30%, var(--app-border));
    color: #fcd34d;
}

html[data-theme="dark"] .va-card {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .va-card:hover {
    border-color: var(--brand-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .va-bank-name,
html[data-theme="dark"] .va-number {
    color: var(--app-text);
}

html[data-theme="dark"] .va-acct-name {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .va-copy-btn {
    background: var(--app-surface-elevated);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .va-copy-btn:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface));
}

html[data-theme="dark"] .va-copy-btn.copied {
    border-color: #16a34a;
    color: #86efac;
    background: color-mix(in srgb, #16a34a 14%, var(--app-surface));
}

html[data-theme="dark"] .va-primary-badge {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface));
    color: #86efac;
}

html[data-theme="dark"] .va-section-title,
html[data-theme="dark"] .provision-state h3 {
    color: var(--app-text);
}

html[data-theme="dark"] .va-section-sub,
html[data-theme="dark"] .provision-state p {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .provision-refresh {
    background: var(--app-surface-elevated);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .provision-refresh:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

html[data-theme="dark"] .info-box {
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface));
    border-color: color-mix(in srgb, var(--brand-color) 26%, var(--app-border));
    color: var(--app-text);
}

html[data-theme="dark"] .info-box i {
    color: var(--brand-color);
}

html[data-theme="dark"] .provision-spinner {
    background: color-mix(in srgb, var(--brand-color) 16%, var(--app-surface-elevated));
}

html[data-theme="dark"] .success-card {
    background: var(--app-surface);
}

html[data-theme="dark"] .success-card h2,
html[data-theme="dark"] .success-card strong#successBalance,
html[data-theme="dark"] #successTitle {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .success-card p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .mbt-page,
html[data-theme="dark"] .hist-page {
    background: var(--app-bg);
}

html[data-theme="dark"] .mbt-page .content-card,
html[data-theme="dark"] .hist-page .content-card {
    background: var(--app-surface);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .section-label,
html[data-theme="dark"] .form-field label,
html[data-theme="dark"] .bc-name,
html[data-theme="dark"] .ti-meta,
html[data-theme="dark"] .ti-ref,
html[data-theme="dark"] .form-field .hint,
html[data-theme="dark"] .empty-state {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .bank-card,
html[data-theme="dark"] .transfer-item {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .bank-card:hover,
html[data-theme="dark"] .bank-card.selected {
    border-color: var(--brand-color);
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 18%, transparent);
}

html[data-theme="dark"] .bc-bank,
html[data-theme="dark"] .bc-num,
html[data-theme="dark"] .ti-amount,
html[data-theme="dark"] .ti-bank {
    color: var(--app-text);
}

html[data-theme="dark"] .bc-num {
    color: var(--brand-color);
}

html[data-theme="dark"] .bc-copy {
    background: color-mix(in srgb, var(--brand-color) 16%, var(--app-surface));
    color: var(--brand-color);
}

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .fp-field-input {
    background: var(--app-input-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field select:focus,
html[data-theme="dark"] .form-field textarea:focus,
html[data-theme="dark"] .fp-field-input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 20%, transparent);
}

html[data-theme="dark"] .instructions-box {
    background: color-mix(in srgb, #16a34a 12%, var(--app-surface));
    border-color: color-mix(in srgb, #16a34a 28%, var(--app-border));
    color: #86efac;
}

html[data-theme="dark"] .steps-box {
    background: color-mix(in srgb, #f59e0b 12%, var(--app-surface));
    border-color: color-mix(in srgb, #f59e0b 28%, var(--app-border));
}

html[data-theme="dark"] .steps-box .step p {
    color: #fcd34d;
}

html[data-theme="dark"] .warning-box {
    background: color-mix(in srgb, #f97316 12%, var(--app-surface));
    border-color: color-mix(in srgb, #f97316 28%, var(--app-border));
    color: #fdba74;
}

html[data-theme="dark"] .warning-box .warn-title {
    color: #fb923c;
}

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

html[data-theme="dark"] .disabled-banner {
    background: color-mix(in srgb, #ef4444 12%, var(--app-surface));
    border-color: color-mix(in srgb, #ef4444 28%, var(--app-border));
    color: #fca5a5;
}

html[data-theme="dark"] .bc-bank {
    color: var(--app-text);
}

html[data-theme="dark"] .bc-icon {
    color: var(--brand-color);
}

html[data-theme="dark"] .notify-btn:hover,
html[data-theme="dark"] .submit-btn:hover,
html[data-theme="dark"] .cta-link:hover {
    background: var(--brand-dark);
}

html[data-theme="dark"] .submit-btn:disabled {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .badge-pending {
    background: color-mix(in srgb, #f59e0b 16%, var(--app-surface));
    color: #fcd34d;
}

html[data-theme="dark"] .badge-approved {
    background: color-mix(in srgb, #16a34a 16%, var(--app-surface));
    color: #86efac;
}

html[data-theme="dark"] .badge-rejected,
html[data-theme="dark"] .ti-rejection {
    background: color-mix(in srgb, #ef4444 14%, var(--app-surface));
    color: #fca5a5;
}

html[data-theme="dark"] .fp-field-icon {
    color: var(--app-text-muted);
}

/* ── eSIM pages (shop + my eSIMs) ─────────────────────────── */
html[data-theme="dark"] .esim-step > label {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .esim-select,
html[data-theme="dark"] .esim-search {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border);
    color: var(--app-text) !important;
    color-scheme: dark;
}

html[data-theme="dark"] .esim-select:focus,
html[data-theme="dark"] .esim-search:focus {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color);
}

html[data-theme="dark"] .esim-select option {
    background: var(--app-surface-elevated);
    color: var(--app-text);
}

html[data-theme="dark"] .balance-bar {
    background: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .balance-bar .bal-label {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .balance-bar .bal-value {
    color: var(--app-text);
}

html[data-theme="dark"] .package-card {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="dark"] .package-card:hover {
    background: var(--app-hover);
    border-color: var(--app-border);
}

html[data-theme="dark"] .package-card.active {
    border-color: var(--brand-color);
    background: rgba(var(--brand-rgb, 83, 5, 103), 0.14);
}

html[data-theme="dark"] .package-card .pc-name {
    color: var(--app-text);
}

html[data-theme="dark"] .package-card .pc-meta {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .package-card .pc-price {
    color: var(--brand-color);
}

html[data-theme="dark"] .package-card.active .pc-price {
    color: var(--brand-color);
}

html[data-theme="dark"] .esim-links a {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .esim-links a.active {
    border-color: var(--brand-color);
    color: var(--brand-color);
    background: rgba(var(--brand-rgb, 83, 5, 103), 0.14);
}

html[data-theme="dark"] .esim-empty {
    color: var(--app-text-muted);
}

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

html[data-theme="dark"] .esim-card {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="dark"] .esim-card h3 {
    color: var(--app-text);
}

html[data-theme="dark"] .esim-card .meta {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .esim-card .status {
    background: var(--app-hover);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .esim-card .actions button,
html[data-theme="dark"] .esim-card .actions a {
    background: var(--app-surface-elevated);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .esim-card .actions button:hover,
html[data-theme="dark"] .esim-card .actions a:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .code-box {
    background: var(--app-input-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .code-box strong {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .qr-wrap img {
    border-color: var(--app-border);
}

html[data-theme="dark"] .esim-detail-hint {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .esim-detail-error {
    color: #f87171;
}

/* ── Brand / gradient surfaces — preserve light text ──────── */
html[data-theme="dark"] aside.app-sidebar .text-blue-100,
html[data-theme="dark"] aside.app-sidebar .text-blue-200 {
    color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .dash-header,
html[data-theme="dark"] .dash-header .dash-greeting .hi,
html[data-theme="dark"] .dash-header .dash-greeting .welcome,
html[data-theme="dark"] .dash-header-action span,
html[data-theme="dark"] .dash-balance-label span,
html[data-theme="dark"] .dash-balance-amount,
html[data-theme="dark"] .dash-tier-pill,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header .history-btn,
html[data-theme="dark"] .page-header .back-btn {
    color: #fff !important;
}

html[data-theme="dark"] .dash-greeting .welcome,
html[data-theme="dark"] .dash-balance-label span {
    color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .desktop-balance-card,
html[data-theme="dark"] .desktop-balance-card h1,
html[data-theme="dark"] .desktop-balance-card p,
html[data-theme="dark"] .desktop-balance-card [class*="text-white"] {
    color: #fff !important;
}

/* White action pills on brand gradient headers */
html[data-theme="dark"] .desktop-balance-card .bg-white,
html[data-theme="dark"] .dash-header .bg-white {
    background-color: #ffffff !important;
}

html[data-theme="dark"] .desktop-balance-card .bg-white .text-purple-700,
html[data-theme="dark"] .desktop-balance-card .bg-white.text-purple-700,
html[data-theme="dark"] .desktop-balance-card .bg-white span,
html[data-theme="dark"] .desktop-balance-card .bg-purple-100 i {
    color: var(--brand-color, #530567) !important;
}

html[data-theme="dark"] .desktop-balance-card .bg-purple-100 {
    background-color: color-mix(in srgb, var(--brand-color) 12%, #ffffff) !important;
}

/* ── Dashboard desktop cards ──────────────────────────────── */
html[data-theme="dark"] .desktop-card,
html[data-theme="dark"] .section-card {
    background: var(--app-surface) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .section-header h3,
html[data-theme="dark"] .txn-details .title,
html[data-theme="dark"] .txn-amount .amount {
    color: var(--app-text);
}

html[data-theme="dark"] .txn-item {
    border-bottom-color: var(--app-border-subtle);
}

html[data-theme="dark"] .txn-details .date {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .desktop-service-item {
    background: transparent;
}

html[data-theme="dark"] .desktop-service-item:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .desktop-service-item span {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dash-txn-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] main .bg-gray-50 {
    background-color: var(--app-input-bg) !important;
}

/* ══════════════════════════════════════════════════════════════
   Extended page coverage — pricing, commission, rewards, bills, etc.
   ══════════════════════════════════════════════════════════════ */

/* Shared page shells */
html[data-theme="dark"] .pricing-page,
html[data-theme="dark"] .notif-page,
html[data-theme="dark"] .history-page,
html[data-theme="dark"] .rewards-page,
html[data-theme="dark"] .redeem-page,
html[data-theme="dark"] .upgrade-page,
html[data-theme="dark"] .detail-page,
html[data-theme="dark"] .cm-mobile {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .cm-content-card {
    background: var(--app-surface) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Brand gradient headers — all variants */
html[data-theme="dark"] .cm-page-header,
html[data-theme="dark"] .cm-balance-card {
    background: linear-gradient(135deg, var(--brand-color, #530567) 0%, var(--brand-dark, #2A0135) 100%) !important;
}

html[data-theme="dark"] .cm-page-header h1,
html[data-theme="dark"] .cm-page-header .cm-back,
html[data-theme="dark"] .cm-balance-amt,
html[data-theme="dark"] .cm-balance-meta strong,
html[data-theme="dark"] .pricing-hero h2,
html[data-theme="dark"] .pricing-hero p,
html[data-theme="dark"] .pricing-hero-icon i,
html[data-theme="dark"] .rewards-page .page-header h1,
html[data-theme="dark"] .rewards-page .page-header a,
html[data-theme="dark"] .notif-page .page-header h1,
html[data-theme="dark"] .history-page .page-header h1 {
    color: #fff !important;
}

html[data-theme="dark"] .cm-balance-lbl,
html[data-theme="dark"] .cm-balance-meta {
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] [class*="text-white/"] {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Pricing page ───────────────────────────────────────────── */
html[data-theme="dark"] .pricing-page .content-body {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .tab-btn:not(.active),
html[data-theme="dark"] .sub-tab:not(.active),
html[data-theme="dark"] .network-tab:not(.active) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .tab-btn:not(.active):hover,
html[data-theme="dark"] .sub-tab:not(.active):hover,
html[data-theme="dark"] .network-tab:not(.active):hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .pricing-page .network-tab-label,
html[data-theme="dark"] .network-tabs .network-tab-label {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .pricing-page .network-tab.active .network-tab-label,
html[data-theme="dark"] .network-tabs .network-tab.active .network-tab-label {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .network-tab.active {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .network-header,
html[data-theme="dark"] .network-header.mtn,
html[data-theme="dark"] .network-header.glo,
html[data-theme="dark"] .network-header.airtel,
html[data-theme="dark"] .network-header.t2,
html[data-theme="dark"] .network-header.cable {
    background: var(--app-input-bg) !important;
    border-bottom: 1px solid var(--app-border);
}

html[data-theme="dark"] .services-header {
    background: var(--app-input-bg) !important;
    border-bottom: 1px solid var(--app-border);
}

html[data-theme="dark"] .network-card,
html[data-theme="dark"] .services-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .network-title h3,
html[data-theme="dark"] .services-title h3,
html[data-theme="dark"] .plan-size {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .network-title p,
html[data-theme="dark"] .services-title p,
html[data-theme="dark"] .pricing-table td,
html[data-theme="dark"] .validity {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .pricing-table th {
    background: var(--app-input-bg) !important;
    color: var(--app-text-muted) !important;
    border-bottom-color: var(--app-border) !important;
}

html[data-theme="dark"] .pricing-table td {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .pricing-table tbody tr:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .validity {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .info-banner {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 25%, var(--app-border)) !important;
    color: var(--app-text) !important;
}

/* ── Commission page ────────────────────────────────────────── */
html[data-theme="dark"] .cm-body {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .cm-card,
html[data-theme="dark"] .cm-stat {
    background: var(--app-surface) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .cm-card-header h3,
html[data-theme="dark"] .cm-stat-val {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .cm-stat-lbl {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .cm-ref-row {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .cm-step {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .wd-tab:not(.active),
html[data-theme="dark"] .payout-option {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .payout-ico {
    background: var(--app-input-bg) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .cm-modal {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .cm-modal h2 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .cm-modal .bal-note {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .cm-amount-input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .cm-amount-sym {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .cm-modal-handle {
    background: var(--app-border) !important;
}

/* ── Notifications & transactions ───────────────────────────── */
html[data-theme="dark"] .notif-tabs,
html[data-theme="dark"] .product-tabs,
html[data-theme="dark"] .search-section {
    background: var(--app-surface) !important;
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .notif-tab:not(.active),
html[data-theme="dark"] .product-tab:not(.active) {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .product-tab .count:not(.active) {
    background: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .search-box {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .search-box input {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .search-box i {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .notif-card,
html[data-theme="dark"] .transaction-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .notif-card.unread {
    background: color-mix(in srgb, var(--brand-color) 6%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 28%, var(--app-border)) !important;
}

html[data-theme="dark"] .notif-title,
html[data-theme="dark"] .transaction-title,
html[data-theme="dark"] .transaction-amount {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .notif-message,
html[data-theme="dark"] .transaction-subtitle,
html[data-theme="dark"] .notif-meta,
html[data-theme="dark"] .transaction-meta,
html[data-theme="dark"] .date-header {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .notif-cat-badge {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .notif-icon.cat-default {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

/* ── Rewards page ───────────────────────────────────────────── */
html[data-theme="dark"] .rewards-page .border-gray-100 {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .rewards-page .bg-gray-50,
html[data-theme="dark"] .rewards-page .bg-gray-100 {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .rewards-page .border-blue-200.bg-blue-50\/50,
html[data-theme="dark"] .rewards-page [class*="bg-blue-50"] {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
}

/* ── Cable, electricity & biller pickers ────────────────────── */
html[data-theme="dark"] .provider-section > label,
html[data-theme="dark"] .meter-section > label,
html[data-theme="dark"] .iuc-section > label,
html[data-theme="dark"] .plans-section > label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .provider-btn {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .provider-btn:hover,
html[data-theme="dark"] .provider-btn:focus {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .provider-btn .prov-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .provider-btn .prov-hint,
html[data-theme="dark"] .provider-btn .prov-chevron {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .meter-input-wrap,
html[data-theme="dark"] .iuc-input-wrap {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .meter-input-wrap:focus-within,
html[data-theme="dark"] .iuc-input-wrap:focus-within {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .meter-input-wrap input,
html[data-theme="dark"] .iuc-input-wrap input {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .biller-modal,
html[data-theme="dark"] .biller-modal-overlay .biller-modal {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .biller-modal-header {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .biller-modal-header h3,
html[data-theme="dark"] .biller-option .bo-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .biller-modal-close,
html[data-theme="dark"] .biller-option .bo-placeholder,
html[data-theme="dark"] .provider-btn .prov-logo-placeholder {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .biller-option:hover {
    background: var(--app-hover) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .biller-search-input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .biller-search-input:focus {
    background: var(--app-surface-elevated) !important;
}

html[data-theme="dark"] .amount-card,
html[data-theme="dark"] .plan-item {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .plan-item .plan-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .plan-item .plan-check,
html[data-theme="dark"] .biller-option .bo-check {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .drag-handle {
    background: var(--app-border) !important;
}

html[data-theme="dark"] .no-plans,
html[data-theme="dark"] .biller-no-results {
    color: var(--app-text-muted) !important;
}

/* ── Shared empty states ────────────────────────────────────── */
html[data-theme="dark"] .empty-icon {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .empty-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .empty-text {
    color: var(--app-text-muted) !important;
}

/* ── Wallet / transfer / support pages (shared patterns) ────── */
html[data-theme="dark"] .transfer-shell,
html[data-theme="dark"] .wallet-shell,
html[data-theme="dark"] .bank-shell,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .upgrade-card,
html[data-theme="dark"] .detail-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .transfer-page,
html[data-theme="dark"] .wallet-page,
html[data-theme="dark"] .bank-page,
html[data-theme="dark"] .support-page,
html[data-theme="dark"] .upgrade-page {
    background: var(--app-bg) !important;
}

/* Catch common inline form rows */
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .txn-detail-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .styled-input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* ── Transaction detail receipt ─────────────────────────────── */
html[data-theme="dark"] .detail-page {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .detail-page .content-wrapper {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .receipt-hero::after {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .receipt-hero .page-header h1,
html[data-theme="dark"] .receipt-hero .summary-label,
html[data-theme="dark"] .receipt-hero .summary-amount,
html[data-theme="dark"] .receipt-hero .back-btn,
html[data-theme="dark"] .receipt-hero .share-btn {
    color: #fff !important;
}

html[data-theme="dark"] .details-section {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .detail-value {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .detail-label,
html[data-theme="dark"] .detail-value.mono {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .detail-row {
    border-bottom-color: var(--app-border-subtle) !important;
}

/* ── Transfer / wallet pages ──────────────────────────────────── */
html[data-theme="dark"] .transfer-page .content-card {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .transfer-page {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .transfer-page .content-body,
html[data-theme="dark"] .transfer-page .recipient-card,
html[data-theme="dark"] .transfer-page .amount-btn,
html[data-theme="dark"] .transfer-page .username-input-wrap,
html[data-theme="dark"] .transfer-page .amount-input-wrap {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .transfer-page .recipient-label,
html[data-theme="dark"] .transfer-page .recipient-phone,
html[data-theme="dark"] .transfer-page .form-section > label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .transfer-page .recipient-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .transfer-page .amount-btn.active,
html[data-theme="dark"] .transfer-page .amount-btn:hover {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
}

/* ── Upgrade / pricing compare tables ───────────────────────── */
html[data-theme="dark"] .upgrade-page .content-card,
html[data-theme="dark"] .redeem-page .content-card {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .compare-table th,
html[data-theme="dark"] .compare-table td {
    border-color: var(--app-border-subtle) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .compare-table thead th {
    background: var(--app-input-bg) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .compare-table tbody tr:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .benefits-list .bl-icon.fallback {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   Auth screens (login, signup, OTP, password reset)
   ══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] body.auth-page,
html[data-theme="dark"] .auth-split-right {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .auth-page-title,
html[data-theme="dark"] .auth-brand-name,
html[data-theme="dark"] .auth-card-title,
html[data-theme="dark"] .signup-step-label,
html[data-theme="dark"] .auth-back-link {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .auth-page-subtitle,
html[data-theme="dark"] .auth-card-subtitle,
html[data-theme="dark"] .auth-footer,
html[data-theme="dark"] .page-footer,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .auth-split-right-header {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .auth-split-right-header a,
html[data-theme="dark"] .auth-footer a {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .otp-resend-row {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .otp-resend-row a,
html[data-theme="dark"] .otp-resend-row .resend-active {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .auth-page-subtitle strong {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .form-input,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] .textinput,
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] .phone-input-wrap,
html[data-theme="dark"] .otp-box {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] input.form-control:focus,
html[data-theme="dark"] .textinput:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] input[type="text"]:focus {
    background: var(--app-surface-elevated) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 18%, transparent) !important;
}

html[data-theme="dark"] .password-toggle,
html[data-theme="dark"] .form-forgot {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .form-forgot:hover {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .auth-card {
    background: var(--app-surface) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .auth-back-link:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .signup-step-bar {
    background: var(--app-border) !important;
}

html[data-theme="dark"] .auth-password-requirements,
html[data-theme="dark"] .tips-box {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .auth-password-requirements-title,
html[data-theme="dark"] .tips-box-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .password-strength-bar:not(.weak):not(.medium):not(.strong) {
    background: var(--app-border) !important;
}

html[data-theme="dark"] .btn-auth,
html[data-theme="dark"] .btn-submit {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .btn-auth:hover:not(:disabled),
html[data-theme="dark"] .btn-submit:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .alert-box.error {
    background: color-mix(in srgb, #dc2626 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #dc2626 28%, var(--app-border)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .alert-box.success {
    background: color-mix(in srgb, #16a34a 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 28%, var(--app-border)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .alert-box.warning,
html[data-theme="dark"] .alert-box.info,
html[data-theme="dark"] .info-box {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .alert-text,
html[data-theme="dark"] .info-box-text {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .control-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .help-block,
html[data-theme="dark"] small.form-text {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .auth-icon-circle.success {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
}

html[data-theme="dark"] .auth-icon-circle.error {
    background: color-mix(in srgb, #dc2626 18%, var(--app-surface)) !important;
}

/* ══════════════════════════════════════════════════════════════
   Card-style inner pages (profile, PIN, FAQ, API, leaderboard…)
   ══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .profile-page,
html[data-theme="dark"] .edit-page,
html[data-theme="dark"] .password-page,
html[data-theme="dark"] .pin-page,
html[data-theme="dark"] .faq-page,
html[data-theme="dark"] .terms-page,
html[data-theme="dark"] .api-page,
html[data-theme="dark"] .lb-page,
html[data-theme="dark"] .payout-page,
html[data-theme="dark"] .request-page,
html[data-theme="dark"] .kp {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .profile-page .content-card,
html[data-theme="dark"] .edit-page .content-card,
html[data-theme="dark"] .password-page .content-card,
html[data-theme="dark"] .pin-page .content-card,
html[data-theme="dark"] .faq-page .content-card,
html[data-theme="dark"] .terms-page .content-card,
html[data-theme="dark"] .api-page .content-card,
html[data-theme="dark"] .lb-page .content-card,
html[data-theme="dark"] .payout-page .content-card,
html[data-theme="dark"] .request-page .content-card,
html[data-theme="dark"] .kp-wrap {
    background: var(--app-surface) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .profile-body,
html[data-theme="dark"] .content-body,
html[data-theme="dark"] .faq-body,
html[data-theme="dark"] .terms-body,
html[data-theme="dark"] .pin-body,
html[data-theme="dark"] .kp-body {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .profile-page .page-header h1,
html[data-theme="dark"] .edit-page .page-header h1,
html[data-theme="dark"] .password-page .page-header h1,
html[data-theme="dark"] .pin-page .page-header h1,
html[data-theme="dark"] .faq-page .page-header h1,
html[data-theme="dark"] .terms-page .page-header h1,
html[data-theme="dark"] .api-page .page-header h1,
html[data-theme="dark"] .lb-page .page-header h1,
html[data-theme="dark"] .payout-page .page-header h1,
html[data-theme="dark"] .kp-head h1,
html[data-theme="dark"] .kp-head-sub {
    color: #fff !important;
}

/* Profile / edit */
html[data-theme="dark"] .info-section,
html[data-theme="dark"] .info-card-row,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .settings-group {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .info-label,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .info-value,
html[data-theme="dark"] .action-card-title h3,
html[data-theme="dark"] .profile-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .info-value.muted,
html[data-theme="dark"] .action-card-title p,
html[data-theme="dark"] .profile-email,
html[data-theme="dark"] .profile-meta {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .info-divider {
    border-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .tier-badge,
html[data-theme="dark"] .status-pill {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

/* PIN / password shared patterns */
html[data-theme="dark"] .info-banner,
html[data-theme="dark"] .security-banner,
html[data-theme="dark"] .requirements-card {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .info-banner p,
html[data-theme="dark"] .security-banner h3,
html[data-theme="dark"] .security-banner p,
html[data-theme="dark"] .requirements-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .action-card-icon.blue {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .action-card-icon.green {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .action-card-header {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .pin-page .form-group label,
html[data-theme="dark"] .password-page .form-group label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .btn-action.primary,
html[data-theme="dark"] .btn-action.green {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .btn-action:disabled {
    background: var(--app-border) !important;
}

/* FAQ / terms */
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .terms-item {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .faq-item:hover,
html[data-theme="dark"] .terms-item:hover {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .faq-item.active,
html[data-theme="dark"] .terms-item.active {
    border-color: color-mix(in srgb, var(--brand-color) 35%, var(--app-border)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .faq-question-text span,
html[data-theme="dark"] .terms-question-text span,
html[data-theme="dark"] .empty-state h3 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .faq-question-text .q-icon,
html[data-theme="dark"] .terms-question-text .q-icon {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .faq-toggle,
html[data-theme="dark"] .terms-toggle {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .faq-toggle i,
html[data-theme="dark"] .terms-toggle i {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .faq-answer-inner,
html[data-theme="dark"] .terms-answer-inner {
    border-top-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .faq-answer-inner p,
html[data-theme="dark"] .faq-answer-inner li,
html[data-theme="dark"] .terms-answer-inner p,
html[data-theme="dark"] .terms-answer-inner li,
html[data-theme="dark"] .empty-state p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .search-box input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .search-box input:focus {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .contact-banner {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .contact-banner h4 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .contact-banner p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .contact-banner .btn-contact {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* API integration (keys, webhook, IP whitelist) */
html[data-theme="dark"] .api-page .tab-nav {
    background: var(--app-surface) !important;
    border-bottom-color: var(--app-border) !important;
}

html[data-theme="dark"] .api-page .tab-btn:not(.active) {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .api-page .tab-btn:hover:not(.active) {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .api-page .tab-panel,
html[data-theme="dark"] .api-page .card-body {
    background: transparent !important;
}

html[data-theme="dark"] .key-reveal {
    background: color-mix(in srgb, #16a34a 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .key-reveal h4 {
    color: #86efac !important;
}

html[data-theme="dark"] .key-box,
html[data-theme="dark"] .secret-display {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .key-box code,
html[data-theme="dark"] .secret-display code,
html[data-theme="dark"] .no-access h3 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .no-access p,
html[data-theme="dark"] .api-page .field-hint,
html[data-theme="dark"] .api-page .section-desc {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .no-access .icon-wrap {
    background: color-mix(in srgb, #d97706 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .webhook-info {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .webhook-info .wh-label {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .webhook-info .wh-url {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .ip-list {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .ip-item {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .ip-icon {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .ip-info h4 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .ip-info span {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .gen-form input,
html[data-theme="dark"] .add-ip-form input,
html[data-theme="dark"] .api-page .form-field input,
html[data-theme="dark"] .api-page .form-field textarea,
html[data-theme="dark"] .api-page .form-field select {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .api-page .form-field label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .api-key-row,
html[data-theme="dark"] .key-row {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

/* Leaderboard & rewards Tailwind patches */
html[data-theme="dark"] .lb-page .bg-gray-100,
html[data-theme="dark"] .lb-page .bg-gray-50,
html[data-theme="dark"] .redeem-page .bg-gray-50 {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .lb-page .bg-gray-200 {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .lb-page .text-gray-800,
html[data-theme="dark"] .lb-page .text-gray-600 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .lb-page .text-gray-500,
html[data-theme="dark"] .lb-page .text-gray-400,
html[data-theme="dark"] .rewards-page .text-gray-500,
html[data-theme="dark"] .rewards-page .text-gray-400 {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .lb-page .border-gray-200,
html[data-theme="dark"] .lb-page .border-gray-100 {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .lb-page .border-blue-200,
html[data-theme="dark"] .lb-page [class*="bg-blue-50"],
html[data-theme="dark"] .lb-page [class*="border-blue-200"] {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .lb-page .bg-yellow-50 {
    background: color-mix(in srgb, #eab308 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #eab308 25%, var(--app-border)) !important;
}

html[data-theme="dark"] .lb-page .bg-orange-50 {
    background: color-mix(in srgb, #f97316 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #f97316 25%, var(--app-border)) !important;
}

html[data-theme="dark"] .rewards-page .text-blue-600 {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .rewards-page .border-gray-100.bg-blue-50,
html[data-theme="dark"] .rewards-page .rounded-xl.bg-blue-50 {
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 20%, var(--app-border)) !important;
}

/* Redeem page cards */
html[data-theme="dark"] .redeem-page .network-card,
html[data-theme="dark"] .redeem-page .plan-card,
html[data-theme="dark"] .redeem-page .preset-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .redeem-page .network-card.selected,
html[data-theme="dark"] .redeem-page .plan-card.selected,
html[data-theme="dark"] .redeem-page .preset-btn.selected {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .redeem-page .btn-redeem {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* KYC / account limits (verify_account) */
html[data-theme="dark"] .uc {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .uc.uc-locked {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    opacity: 0.7;
}

html[data-theme="dark"] .uc.uc-done {
    background: color-mix(in srgb, #16a34a 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 35%, var(--app-border)) !important;
    opacity: 0.9;
}

html[data-theme="dark"] .uc.uc-current {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .uc.uc-next {
    border-color: #f59e0b !important;
    background: color-mix(in srgb, #f59e0b 12%, var(--app-surface)) !important;
}

html[data-theme="dark"] .uc-title,
html[data-theme="dark"] .ov-section-title,
html[data-theme="dark"] .tis-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .uc-sub,
html[data-theme="dark"] .tis-sub,
html[data-theme="dark"] .uc-limits span {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .uc-current .uc-icon,
html[data-theme="dark"] .uc-next .uc-icon {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .uc-next .uc-icon {
    background: color-mix(in srgb, #f59e0b 22%, var(--app-surface)) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .uc-locked .uc-icon,
html[data-theme="dark"] .ub-locked {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .uc-done .uc-icon,
html[data-theme="dark"] .ub-done {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .ub-current {
    background: var(--brand-color) !important;
    color: #fff !important;
}

html[data-theme="dark"] .ub-next {
    background: #f59e0b !important;
    color: #111 !important;
}

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .kp-select,
html[data-theme="dark"] .kp-input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .form-field label,
html[data-theme="dark"] .kp-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .tis-card,
html[data-theme="dark"] .tier-info-strip,
html[data-theme="dark"] .doc-upload-zone,
html[data-theme="dark"] .meter-picker {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .tis-pill {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .f-label,
html[data-theme="dark"] .fu-title {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .f-label i {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .f-ctrl,
html[data-theme="dark"] .dob-select {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .dob-select.placeholder {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dob-chevron {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .f-divider {
    border-top-color: var(--app-border) !important;
}

/* NIN / BVN selector */
html[data-theme="dark"] .id-radio-opt {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .id-radio-opt:hover {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 8%, var(--app-surface)) !important;
}

html[data-theme="dark"] .id-radio-opt.sel {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface)) !important;
}

html[data-theme="dark"] .id-radio-icon {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .id-radio-opt.sel .id-radio-icon {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .id-radio-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .id-radio-opt.sel .id-radio-name {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .id-radio-sub,
html[data-theme="dark"] .fu-sub {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .id-radio-dot {
    border-color: var(--app-border) !important;
    background: var(--app-input-bg) !important;
}

/* Overview tier limit pills */
html[data-theme="dark"] .lp-g {
    background: color-mix(in srgb, #16a34a 14%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .lp-b {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .lp-v {
    background: color-mix(in srgb, #9333ea 14%, var(--app-surface)) !important;
    color: #d8b4fe !important;
}

html[data-theme="dark"] .lp-gr {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .uc-foot {
    border-top-color: var(--app-border) !important;
}

html[data-theme="dark"] .ub-active {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .ub-rejected {
    background: color-mix(in srgb, #ef4444 18%, var(--app-surface)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .uc-rejected .uc-icon {
    background: color-mix(in srgb, #ef4444 18%, var(--app-surface)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .btn-resubmit {
    background: color-mix(in srgb, #ef4444 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #ef4444 35%, var(--app-border)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .btn-resubmit:hover {
    background: color-mix(in srgb, #ef4444 16%, var(--app-surface)) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .btn-upgrade-locked {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

/* Form alerts */
html[data-theme="dark"] .al-info {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 25%, var(--app-border)) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .al-danger,
html[data-theme="dark"] .err-banner {
    background: color-mix(in srgb, #ef4444 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #ef4444 30%, var(--app-border)) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .al-warning {
    background: color-mix(in srgb, #f59e0b 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #f59e0b 30%, var(--app-border)) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .al-success {
    background: color-mix(in srgb, #16a34a 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 30%, var(--app-border)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .err-banner-icon {
    background: color-mix(in srgb, #ef4444 20%, var(--app-surface)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .err-banner-title,
html[data-theme="dark"] .err-banner-msg {
    color: #fecaca !important;
}

/* File upload & yes/no */
html[data-theme="dark"] .fu-area {
    border-color: var(--app-border) !important;
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .fu-area:hover,
html[data-theme="dark"] .fu-area.has-file {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 8%, var(--app-surface)) !important;
}

html[data-theme="dark"] .fu-icon {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .fu-area.has-file .fu-icon,
html[data-theme="dark"] .fu-name {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .yn-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .yn-btn:hover,
html[data-theme="dark"] .yn-btn.sel {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

/* Tier 3 proof picker */
html[data-theme="dark"] #proof-sheet {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .proof-sheet-opt {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .proof-sheet-opt:hover,
html[data-theme="dark"] .proof-sheet-opt.selected {
    border-color: var(--brand-color) !important;
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] #proof-trigger {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] #proof-trigger.has-value {
    border-color: var(--brand-color) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] #proof-sheet [style*="background:#e2e8f0"],
html[data-theme="dark"] #proof-sheet [style*="background: #e2e8f0"] {
    background: var(--app-border) !important;
}

html[data-theme="dark"] #proof-sheet p[style*="color:#1e293b"],
html[data-theme="dark"] #proof-sheet p[style*="color: #1e293b"] {
    color: var(--app-text) !important;
}

html[data-theme="dark"] #proof-sheet p[style*="color:#94a3b8"],
html[data-theme="dark"] #proof-sheet p[style*="color: #94a3b8"] {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] #proof-sheet button[style*="background:#f1f5f9"] {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .proof-sheet-opt span[style*="background:#eff6ff"] {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
}

/* State / LGA / Disco picker sheets (verify_account Tier 3) */
html[data-theme="dark"] #state-sheet,
html[data-theme="dark"] #lga-sheet,
html[data-theme="dark"] #disco-sheet {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] #state-sheet p[style*="color:#1e293b"],
html[data-theme="dark"] #lga-sheet p[style*="color:#1e293b"],
html[data-theme="dark"] #disco-sheet p[style*="color:#1e293b"],
html[data-theme="dark"] #state-sheet p[style*="color: #1e293b"],
html[data-theme="dark"] #lga-sheet p[style*="color: #1e293b"],
html[data-theme="dark"] #disco-sheet p[style*="color: #1e293b"] {
    color: var(--app-text) !important;
}

html[data-theme="dark"] #state-sheet p[style*="color:#94a3b8"],
html[data-theme="dark"] #lga-sheet p[style*="color:#94a3b8"],
html[data-theme="dark"] #disco-sheet p[style*="color:#94a3b8"],
html[data-theme="dark"] #lga-sheet-sub {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] #state-sheet [style*="background:#e2e8f0"],
html[data-theme="dark"] #lga-sheet [style*="background:#e2e8f0"],
html[data-theme="dark"] #disco-sheet [style*="background:#cbd5e1"],
html[data-theme="dark"] #disco-sheet [style*="background:#e2e8f0"] {
    background: var(--app-border) !important;
}

html[data-theme="dark"] #state-sheet button[style*="background:#f1f5f9"],
html[data-theme="dark"] #lga-sheet button[style*="background:#f1f5f9"],
html[data-theme="dark"] #disco-sheet button[style*="background:#f1f5f9"] {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] #state-search,
html[data-theme="dark"] #lga-search,
html[data-theme="dark"] #disco-search {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] #state-list button,
html[data-theme="dark"] #lga-list button,
html[data-theme="dark"] #disco-list button {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] #state-list button[style*="background:#eff6ff"],
html[data-theme="dark"] #lga-list button[style*="background:#eff6ff"],
html[data-theme="dark"] #disco-list button[style*="background:#eff6ff"] {
    background: color-mix(in srgb, var(--brand-color) 12%, var(--app-surface)) !important;
    border-color: var(--brand-color) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] #state-trigger.has-value,
html[data-theme="dark"] #lga-trigger.has-value {
    color: var(--app-text) !important;
}

/* Liveness modal */
html[data-theme="dark"] .lv-panel {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .lv-title,
html[data-theme="dark"] .lv-instruction,
html[data-theme="dark"] .lv-timer-num {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .lv-close-btn {
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .lv-close-btn:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .lv-circle-inner {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .lv-btn-proceed {
    background: var(--brand-color, #530567) !important;
    color: #fff !important;
}

html[data-theme="dark"] .lv-btn-proceed:hover {
    filter: brightness(1.08);
    opacity: 1 !important;
}

html[data-theme="dark"] .lv-btn-retake {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .lv-btn-retake:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .lv-step-dot {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .lv-step-line {
    background: var(--app-border) !important;
}

html[data-theme="dark"] .lv-ring-bg {
    stroke: var(--app-border) !important;
}

/* Session expired modal (session_idle_guard.html) */
html[data-theme="dark"] #session-expired-overlay > div {
    background: var(--app-surface) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] #session-expired-overlay > div > div:first-child {
    background: color-mix(in srgb, #ef4444 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] #session-expired-overlay h3 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] #session-expired-overlay p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] #idle-warning {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

/* ── Customer app modals (payout OTP, shared modals, API keys confirm) ── */

/* Payout account — “Verify it's you” OTP modal */
html[data-theme="dark"] .otp-modal {
    background: var(--app-surface) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .otp-icon {
    background: color-mix(in srgb, var(--brand-color) 16%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .otp-modal h3 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .otp-modal p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .otp-modal p strong {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .otp-box.filled {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .otp-error {
    background: color-mix(in srgb, #ef4444 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #ef4444 28%, var(--app-border)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .otp-resend {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .otp-resend button {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .otp-resend button:disabled,
html[data-theme="dark"] #otpResendTimer {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .btn-otp-confirm:disabled {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .btn-otp-cancel {
    background: transparent !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .btn-otp-cancel:hover {
    background: var(--app-hover) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* Shared modals (components/modals.html — status, loading, confirm) */
html[data-theme="dark"] .modal-overlay .modal-content {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .status-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .modal-header .modal-close {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .modal-header .modal-close:hover {
    background: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .status-message,
html[data-theme="dark"] .modal-loading p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .confirm-modal-details {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .confirm-modal-row:not(:last-child) {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .pin-section label {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .modal-btn-secondary {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .modal-btn-secondary:hover {
    background: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .status-icon.success {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .status-icon.error {
    background: color-mix(in srgb, #ef4444 14%, var(--app-surface)) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .status-icon.warning {
    background: color-mix(in srgb, #d97706 14%, var(--app-surface)) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .status-icon.info {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

/* API keys confirm modal */
html[data-theme="dark"] .confirm-overlay .confirm-modal {
    background: var(--app-surface) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .confirm-modal h3 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .confirm-modal p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .confirm-modal .modal-icon {
    background: color-mix(in srgb, #d97706 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .confirm-modal .modal-icon.danger {
    background: color-mix(in srgb, #ef4444 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .confirm-modal .btn-cancel {
    background: var(--app-hover) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .confirm-modal .btn-cancel:hover {
    background: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* Referrals payout modal */
html[data-theme="dark"] .modal-overlay .modal-content .modal-header h3,
html[data-theme="dark"] .modal-overlay#payoutModal .modal-content {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .uc-foot [style*="color:#059669"],
html[data-theme="dark"] .uc-foot [style*="color: #059669"] {
    color: #86efac !important;
}

html[data-theme="dark"] .uc-foot [style*="color:#d97706"],
html[data-theme="dark"] .uc-foot [style*="color: #d97706"] {
    color: #fcd34d !important;
}

html[data-theme="dark"] .uc-sub [style*="color:#f59e0b"] {
    color: #fcd34d !important;
}

/* Payout account */
html[data-theme="dark"] .bank-card,
html[data-theme="dark"] .bank-option,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .empty-bank {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .bank-card h3,
html[data-theme="dark"] .bank-option .bank-name,
html[data-theme="dark"] .account-card .acct-num {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .bank-card p,
html[data-theme="dark"] .bank-option .bank-code,
html[data-theme="dark"] .empty-bank p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .bank-search input,
html[data-theme="dark"] .payout-page .form-control {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* Transfer page — info cards, KYC gate, buttons */
html[data-theme="dark"] .transfer-page .info-card .text h4 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .transfer-page .info-card .text p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .transfer-page .info-card .icon.blue {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .transfer-page .info-card .icon.green {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .transfer-page .submit-btn {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .transfer-page .submit-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .kyc-gate-title,
html[data-theme="dark"] .kyc-gate-desc strong {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .kyc-gate-desc {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .kyc-steps-pill {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .kyc-step-label.active {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .kyc-step-label,
html[data-theme="dark"] .kyc-gate-footnote,
html[data-theme="dark"] .kyc-steps-pill .fa-chevron-right {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .kyc-step-num.pending {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .kyc-verify-btn {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .transfer-page .loading-content p {
    color: var(--app-text-muted) !important;
}

/* Upgrade page extras */
html[data-theme="dark"] .upgrade-page .tier-card,
html[data-theme="dark"] .upgrade-page .benefit-row {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .upgrade-page .tier-name,
html[data-theme="dark"] .upgrade-page .benefit-row span {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .upgrade-page .tier-desc,
html[data-theme="dark"] .upgrade-page .benefit-row small {
    color: var(--app-text-muted) !important;
}

/* Profile page */
html[data-theme="dark"] .profile-page .balance-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .profile-page .balance-card .amount {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .profile-page .balance-card .label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .profile-page .balance-card .icon.blue {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .profile-page .balance-card .icon.green {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .profile-page .info-card {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .profile-page .info-item {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .profile-page .info-icon.blue {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .profile-page .info-icon.green {
    background: color-mix(in srgb, #16a34a 18%, var(--app-surface)) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .profile-page .info-icon.purple {
    background: color-mix(in srgb, #9333ea 18%, var(--app-surface)) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] .profile-page .info-icon.orange {
    background: color-mix(in srgb, #ea580c 18%, var(--app-surface)) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .profile-page .info-icon.cyan {
    background: color-mix(in srgb, #0891b2 18%, var(--app-surface)) !important;
    color: #67e8f9 !important;
}

html[data-theme="dark"] .profile-page .info-icon.gray {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .profile-page .info-icon.teal {
    background: color-mix(in srgb, #0f766e 18%, var(--app-surface)) !important;
    color: #5eead4 !important;
}

html[data-theme="dark"] .profile-page .info-icon.rose {
    background: color-mix(in srgb, #e11d48 18%, var(--app-surface)) !important;
    color: #fda4af !important;
}

html[data-theme="dark"] .profile-page .section-header i {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .profile-page .info-action.verify {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

/* Terms page */
html[data-theme="dark"] .terms-page .last-updated {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .terms-page .last-updated span {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .terms-page .last-updated i {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .terms-page .toc {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .terms-page .toc h4,
html[data-theme="dark"] .terms-page .terms-section-header h3,
html[data-theme="dark"] .terms-page .terms-section-body strong {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .terms-page .toc li a {
    background: var(--app-surface) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .terms-page .toc li a:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .terms-page .terms-section {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .terms-page .terms-section-header {
    background: var(--app-input-bg) !important;
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .terms-page .terms-section-header .section-icon {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .terms-page .terms-section-body p,
html[data-theme="dark"] .terms-page .terms-section-body li {
    color: var(--app-text-muted) !important;
}

/* Payout account (extra selectors) */
html[data-theme="dark"] .payout-page .current-bank-card,
html[data-theme="dark"] .payout-page .form-section,
html[data-theme="dark"] .payout-page .selected-bank,
html[data-theme="dark"] .payout-page .bank-dropdown {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .payout-page .current-bank-header,
html[data-theme="dark"] .payout-page .form-section h3,
html[data-theme="dark"] .payout-page .bank-info h4 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .payout-page .bank-info p,
html[data-theme="dark"] .payout-page .form-group label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .payout-page .bank-search-input,
html[data-theme="dark"] .payout-page .form-control {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .payout-page .bank-option:hover {
    background: var(--app-hover) !important;
}

/* Virtual cards list */
html[data-theme="dark"] main h2.text-gray-800 {
    color: var(--app-text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Round 2 — API access, auth split, service pages, dashboard, etc.
   ══════════════════════════════════════════════════════════════ */

/* API access request panel / page */
html[data-theme="dark"] .api-access-panel .api-access-intro,
html[data-theme="dark"] .api-access-panel .api-submission-details,
html[data-theme="dark"] .request-page .status-banner:not(.pending):not(.approved):not(.rejected) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .api-access-panel .api-access-intro h3,
html[data-theme="dark"] .api-access-panel .api-submission-details,
html[data-theme="dark"] .api-access-panel .api-submission-details strong,
html[data-theme="dark"] .request-page .form-group label,
html[data-theme="dark"] .api-access-panel .form-group label {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .api-access-panel .api-access-intro .status-icon {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .api-access-panel .api-access-intro p,
html[data-theme="dark"] .api-access-panel .form-hint,
html[data-theme="dark"] .api-access-panel .status-banner p,
html[data-theme="dark"] .request-page .status-banner p {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .api-access-panel .form-input,
html[data-theme="dark"] .request-page .form-input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .api-access-panel .file-upload {
    border-color: var(--app-border) !important;
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .api-access-panel .file-upload:hover {
    background: var(--app-hover) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .api-access-panel .file-upload.has-file {
    background: color-mix(in srgb, #16a34a 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 25%, var(--app-border)) !important;
}

html[data-theme="dark"] .api-access-panel .file-upload .upload-text,
html[data-theme="dark"] .api-access-panel .section-title {
    color: var(--app-text-muted) !important;
}

/* Auth desktop split layout */
@media (min-width: 900px) {
    html[data-theme="dark"] body.auth-page {
        background: var(--app-bg) !important;
    }

    html[data-theme="dark"] .auth-split-left {
        background: color-mix(in srgb, var(--brand-color) 6%, var(--app-bg)) !important;
    }

    html[data-theme="dark"] .auth-split-right {
        background: var(--app-bg) !important;
    }

    html[data-theme="dark"] .auth-split-logo-name,
    html[data-theme="dark"] .auth-split-headline,
    html[data-theme="dark"] .auth-split-headline-brand {
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .auth-split-features li {
        color: var(--app-text-muted) !important;
    }

    html[data-theme="dark"] .auth-split-deco {
        border-color: color-mix(in srgb, var(--brand-color) 20%, var(--app-border)) !important;
    }
}

html[data-theme="dark"] .auth-totp-hint {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .otp-box {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .otp-box:focus {
    border-color: var(--brand-color) !important;
    background: var(--app-surface-elevated) !important;
}

/* Service balance strips (betting, shared) */
html[data-theme="dark"] .service-balance-strip,
html[data-theme="dark"] .a2c-balance-strip,
html[data-theme="dark"] .betting-balance-strip,
html[data-theme="dark"] .wallet-header-strip {
    background: var(--app-input-bg) !important;
    border-bottom: 1px solid var(--app-border-subtle) !important;
}

html[data-theme="dark"] .service-balance-strip .sbs-label,
html[data-theme="dark"] .a2c-balance-label,
html[data-theme="dark"] .betting-balance-strip .bbs-label,
html[data-theme="dark"] .wallet-header-strip .whs-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .service-balance-strip .sbs-value,
html[data-theme="dark"] .a2c-balance-value,
html[data-theme="dark"] .betting-balance-strip .bbs-value,
html[data-theme="dark"] .wallet-header-strip .whs-value {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .a2c-balance-divider {
    background: var(--app-border) !important;
}

/* A2C network cards */
html[data-theme="dark"] .net-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .net-card .net-name {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .net-card.selected .net-name,
html[data-theme="dark"] .net-card.selected .net-rate {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .net-card .net-logo {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .net-card .net-logo-placeholder {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .quick-amount-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .quick-amount-btn.selected {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}

html[data-theme="dark"] .quick-amount-btn:hover:not(.selected) {
    border-color: var(--brand-color) !important;
    color: var(--app-text) !important;
}

/* Education — balance bar & quantity */
html[data-theme="dark"] .balance-bar {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .balance-bar .bal-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .balance-bar .bal-value {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .balance-bar .bal-value span {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .quantity-wrap {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .quantity-wrap:focus-within {
    background: var(--app-surface-elevated) !important;
}

html[data-theme="dark"] .qty-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .qty-btn:hover:not(:disabled) {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .qty-value {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .qty-hint {
    color: var(--app-text-muted) !important;
}

/* Betting — inputs, amounts, platform search */
html[data-theme="dark"] .field-wrap,
html[data-theme="dark"] .custom-amount-wrap {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .field-wrap:focus-within,
html[data-theme="dark"] .custom-amount-wrap:focus-within {
    background: var(--app-surface-elevated) !important;
}

html[data-theme="dark"] .field-wrap input,
html[data-theme="dark"] .custom-amount-wrap input {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .field-hint {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .amount-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .amount-card .card-amount {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .amount-card.selected .card-amount {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .custom-amount-wrap .naira-sign {
    color: var(--app-text-muted) !important;
}

/* Internet — account ID field */
html[data-theme="dark"] .account-section label,
html[data-theme="dark"] .account-section .field-hint {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .account-input-wrap {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .account-input-wrap:focus-within {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .account-input-wrap input {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .account-input-wrap input::placeholder {
    color: var(--app-text-muted) !important;
}

/* Bulk SMS */
html[data-theme="dark"] .route-section > label,
html[data-theme="dark"] .field-section > label,
html[data-theme="dark"] .dnd-section > label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .route-tab,
html[data-theme="dark"] .dnd-tab {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .route-tab:hover,
html[data-theme="dark"] .dnd-tab:hover {
    border-color: var(--brand-color) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .route-tab.selected,
html[data-theme="dark"] .dnd-tab.selected {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}

html[data-theme="dark"] .dnd-tab .dnd-desc {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dnd-tab.selected .dnd-desc {
    color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .cost-card {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}

html[data-theme="dark"] .cost-card .cost-label,
html[data-theme="dark"] .cost-card .cost-value {
    color: #86efac !important;
}

html[data-theme="dark"] .cost-card .cost-row.total .cost-label,
html[data-theme="dark"] .cost-card .cost-row.total .cost-value {
    color: #bbf7d0 !important;
}

html[data-theme="dark"] .recipient-badge {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .recipient-badge.warn {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #fde047 !important;
}

html[data-theme="dark"] .char-counter {
    color: var(--app-text-muted) !important;
}

/* Recharge pin page */
html[data-theme="dark"] .rechargepin-page {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .rechargepin-page .content-card {
    background: var(--app-surface) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .rechargepin-page .section-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .rechargepin-page .network-card {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .rechargepin-page .network-card:hover {
    background: var(--app-hover) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .rechargepin-page .network-card.selected {
    background: rgba(var(--brand-rgb, 83, 5, 103), 0.12) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .rechargepin-page .network-card .name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .rechargepin-page .network-card .available {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .rechargepin-page .network-card .logo {
    background: var(--app-surface-elevated) !important;
}

html[data-theme="dark"] .rechargepin-page .amount-select,
html[data-theme="dark"] .rechargepin-page .name-input {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .rechargepin-page .amount-select:focus,
html[data-theme="dark"] .rechargepin-page .name-input:focus {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .rechargepin-page .amount-select-wrapper::after {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .rechargepin-page .quantity-input-wrap {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .rechargepin-page .quantity-input-wrap:focus-within {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .rechargepin-page .quantity-input-wrap input {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .rechargepin-page .quantity-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .rechargepin-page .quantity-btn:hover:not(:disabled) {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .rechargepin-page .quantity-hint,
html[data-theme="dark"] .rechargepin-page .amount-placeholder,
html[data-theme="dark"] .rechargepin-page .quick-amounts.loading {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .rechargepin-page .available-pins {
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .rechargepin-page .available-pins-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .rechargepin-page .pin-item {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .rechargepin-page .pin-item .network-name {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .rechargepin-page .pin-item .count {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .rechargepin-page .generate-btn:disabled {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .biller-search-wrap {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .biller-search-wrap:focus-within {
    background: var(--app-surface-elevated) !important;
}

html[data-theme="dark"] .biller-search-wrap input {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .biller-modal-search {
    border-bottom-color: var(--app-border-subtle) !important;
}

/* Virtual card KYC gate */
html[data-theme="dark"] .vc-kyc-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .vc-kyc-desc {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .vc-kyc-benefits {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .vc-kyc-benefit-text {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .kyc-gate-wrapper a[style*="color: #64748b"] {
    color: var(--app-text-muted) !important;
}

/* Redeem points summary card */
html[data-theme="dark"] .redeem-page .text-gray-500,
html[data-theme="dark"] .redeem-page .text-gray-400 {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .redeem-page .bg-gray-50,
html[data-theme="dark"] .redeem-page .rounded-2xl.bg-gray-50 {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .redeem-page .border-gray-200,
html[data-theme="dark"] .redeem-page .border-t.border-gray-200 {
    border-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .redeem-page .font-semibold:not([style*="color"]),
html[data-theme="dark"] .redeem-page .font-bold:not([style*="color"]) {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .redeem-page .text-gray-800 {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .redeem-page .bg-red-50 {
    background: color-mix(in srgb, #dc2626 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #dc2626 22%, var(--app-border)) !important;
}

/* Upgrade — group selector */
html[data-theme="dark"] .upgrade-page .group-selector label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-trigger,
html[data-theme="dark"] .custom-select-trigger {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-trigger:hover,
html[data-theme="dark"] .custom-select-trigger:hover {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-trigger.open,
html[data-theme="dark"] .custom-select-trigger.open {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-trigger .cst-text.placeholder,
html[data-theme="dark"] .custom-select-trigger .cst-text.placeholder {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-trigger i.cst-arrow,
html[data-theme="dark"] .custom-select-trigger i.cst-arrow {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-dropdown,
html[data-theme="dark"] .custom-select-dropdown {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .upgrade-page .csd-search-wrap,
html[data-theme="dark"] .csd-search-wrap {
    background: var(--app-surface) !important;
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .upgrade-page .csd-search,
html[data-theme="dark"] .csd-search {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .upgrade-page .csd-search:focus,
html[data-theme="dark"] .csd-search:focus {
    background: var(--app-surface-elevated) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .upgrade-page .csd-search-icon,
html[data-theme="dark"] .csd-search-icon {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .upgrade-page .csd-no-results,
html[data-theme="dark"] .csd-no-results {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-option,
html[data-theme="dark"] .custom-select-option {
    border-bottom-color: var(--app-border-subtle) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-option:hover,
html[data-theme="dark"] .custom-select-option:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-option.selected,
html[data-theme="dark"] .custom-select-option.selected {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
}

html[data-theme="dark"] .upgrade-page .custom-select-option.selected .cso-name,
html[data-theme="dark"] .custom-select-option.selected .cso-name {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .upgrade-page .cso-fee,
html[data-theme="dark"] .cso-fee {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .upgrade-page .cso-check,
html[data-theme="dark"] .cso-check {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .upgrade-page .group-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .group-card-header,
html[data-theme="dark"] .group-card-body,
html[data-theme="dark"] .group-card-footer {
    border-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .current-group-banner {
    background: color-mix(in srgb, #16a34a 10%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 22%, var(--app-border)) !important;
}

html[data-theme="dark"] .current-group-banner .cg-text h4 {
    color: #86efac !important;
}

html[data-theme="dark"] .current-group-banner .cg-text p {
    color: var(--app-text-muted) !important;
}

/* Payout — bank list & info banner text */
html[data-theme="dark"] .payout-page .info-banner p,
html[data-theme="dark"] .payout-page .info-banner strong {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .payout-page .bank-option {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .payout-page .bank-option.selected {
    color: var(--app-text) !important;
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
}

html[data-theme="dark"] .payout-page .bank-option i {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .payout-page .selected-bank {
    background: color-mix(in srgb, var(--brand-color) 10%, var(--app-surface)) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .payout-page .selected-bank-name {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .payout-page .name-match-hint.match {
    background: color-mix(in srgb, #16a34a 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 25%, var(--app-border)) !important;
    color: #86efac !important;
}

/* USSD Check Phone Balance card */
html[data-theme="dark"] .ussd-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .ussd-header:hover {
    background: var(--app-hover) !important;
}

html[data-theme="dark"] .ussd-title,
html[data-theme="dark"] .ussd-network-header span {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .ussd-subtitle {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .ussd-toggle {
    background: var(--app-hover) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .ussd-network-group {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .ussd-network-header {
    border-bottom-color: var(--app-border-subtle) !important;
}

html[data-theme="dark"] .ussd-code-item {
    background: var(--app-surface) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .ussd-code-item:hover {
    background: var(--app-hover) !important;
    border-color: var(--brand-color) !important;
}

html[data-theme="dark"] .ussd-code-item .code-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .ussd-code-item .code-value {
    color: var(--brand-accent, #9B3DB5) !important;
}

/* Confirm modal balance info */
html[data-theme="dark"] .balance-info {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .balance-label {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .balance-value {
    color: var(--app-text) !important;
}

/* Dashboard recent transactions */
html[data-theme="dark"] .desktop-card .dash-recent-title,
html[data-theme="dark"] .desktop-card .dash-recent-title-text,
html[data-theme="dark"] .desktop-card .dash-empty-title {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .desktop-card .dash-recent-icon {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .dash-recent-link {
    color: var(--brand-accent, #9B3DB5) !important;
}

html[data-theme="dark"] .desktop-card .dash-empty-desc {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dash-recent-empty > div[style*="background:#f1f5f9"],
html[data-theme="dark"] .dash-recent-empty > div {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dash-txn-title,
html[data-theme="dark"] .dash-txn-amount {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .dash-txn-sub,
html[data-theme="dark"] .dash-txn-meta {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dash-type-badge {
    background: var(--app-hover) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dash-type-badge.data,
html[data-theme="dark"] .dash-st-pending,
html[data-theme="dark"] .dash-st-processing {
    background: color-mix(in srgb, var(--brand-color) 14%, var(--app-surface)) !important;
    color: var(--brand-accent, #9B3DB5) !important;
}

/* Request API access standalone page — status banners */
html[data-theme="dark"] .request-page .status-banner.pending {
    background: color-mix(in srgb, #d97706 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #d97706 28%, var(--app-border)) !important;
}

html[data-theme="dark"] .request-page .status-banner.pending h3 {
    color: #fcd34d !important;
}

html[data-theme="dark"] .request-page .status-banner.approved {
    background: color-mix(in srgb, #16a34a 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 28%, var(--app-border)) !important;
}

html[data-theme="dark"] .request-page .status-banner.approved h3 {
    color: #86efac !important;
}

html[data-theme="dark"] .request-page .status-banner.rejected {
    background: color-mix(in srgb, #dc2626 12%, var(--app-surface)) !important;
    border-color: color-mix(in srgb, #dc2626 28%, var(--app-border)) !important;
}

html[data-theme="dark"] .request-page .status-banner.rejected h3 {
    color: #fca5a5 !important;
}

html[data-theme="dark"] .request-page .admin-note {
    background: var(--app-input-bg) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .request-page .file-upload {
    border-color: var(--app-border) !important;
    background: var(--app-input-bg) !important;
}

html[data-theme="dark"] .request-page .file-upload:hover {
    background: var(--app-hover) !important;
}

/* Legacy auth card pages (_auth_base_styles) */
html[data-theme="dark"] body:has(.auth-form-wrapper) {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .tips-box li {
    color: var(--app-text-muted) !important;
}