/*
 * MARATHON CUSTOMER PAGES — GLOBAL DARK/LIGHT THEME
 *
 * Full replacement for site-theme.css.
 * Load this file AFTER each customer page's own CSS file.
 *
 * IMPORTANT:
 * - Home .app-container and Home components are intentionally not targeted.
 * - Light mode continues to use each page's original CSS unchanged.
 * - Dark rules are scoped to the seven supplied customer page roots only.
 */


/* =====================================================
   CUSTOMER-PAGE TOKENS — HOME IS EXCLUDED
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    body:has(
        .checkin-app,
        .my-app,
        .order-app,
        .product-app,
        .recharge-app,
        .vip-app,
        .withdraw-app
    ),
    .checkin-app,
    .my-app,
    .order-app,
    .product-app,
    .recharge-app,
    .vip-app,
    .withdraw-app
) {
    color-scheme: dark;

    --theme-page: #020617;
    --theme-app: #0f172a;
    --theme-surface: #1e293b;
    --theme-surface-soft: #172033;
    --theme-surface-raised: #243247;
    --theme-text: #f8fafc;
    --theme-text-soft: #cbd5e1;
    --theme-muted: #94a3b8;
    --theme-border: #334155;
    --theme-border-strong: #475569;
    --theme-blue-soft: #172554;
    --theme-cyan-soft: #164e63;
    --theme-green-soft: #14532d;
    --theme-amber-soft: #78350f;
    --theme-red-soft: #7f1d1d;

    /* Existing variable families used by the supplied customer pages. */
    --page: var(--theme-app);
    --surface: var(--theme-surface);
    --text: var(--theme-text);
    --muted: var(--theme-text-soft);
    --border: var(--theme-border);
    --page-background: var(--theme-app);
    --card-background: var(--theme-surface);
    --text-dark: var(--theme-text);
    --text-light: var(--theme-text-soft);
    --border-color: var(--theme-border);
    --soft-blue: var(--theme-blue-soft);
    --primary-soft: var(--theme-blue-soft);
    --success-soft: var(--theme-green-soft);
    --warning-soft: var(--theme-amber-soft);
    --small-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    --card-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);

    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) body:has(
    .checkin-app,
    .my-app,
    .order-app,
    .product-app,
    .recharge-app,
    .vip-app,
    .withdraw-app
) {
    background: var(--theme-page);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    .checkin-app,
    .my-app,
    .order-app,
    .product-app,
    .recharge-app,
    .vip-app,
    .withdraw-app
) ::selection {
    background: #1d4ed8;
    color: #ffffff;
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    .checkin-app,
    .my-app,
    .order-app,
    .product-app,
    .recharge-app,
    .vip-app,
    .withdraw-app
) :where(input, select, textarea) {
    caret-color: #60a5fa;
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    .checkin-app,
    .my-app,
    .order-app,
    .product-app
) .bottom-navigation {
    background: rgba(17, 24, 39, 0.97);
    border-color: var(--theme-border);
    box-shadow: 0 -9px 28px rgba(0, 0, 0, 0.36);
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    .my-app,
    .order-app,
    .product-app
) .bottom-navigation .nav-item {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    .my-app,
    .order-app,
    .product-app
) .bottom-navigation .nav-item.active {
    color: #60a5fa;
}

:where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
    .my-app,
    .order-app,
    .product-app
) .bottom-navigation .vip-icon {
    border-color: #111827;
}


/* =====================================================
   CHECK-IN PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .checkin-app {
    background:
        radial-gradient(
            circle at 0 5%,
            rgba(6, 182, 212, 0.12),
            transparent 30%
        ),
        linear-gradient(180deg, #0f172a 0%, #020617 72%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-header {
    background: rgba(15, 23, 42, 0.94);
    border-bottom-color: rgba(51, 65, 85, 0.9);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .back-button {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .back-button:hover {
    background: var(--theme-blue-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-hero {
    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(125, 211, 252, 0.12),
            transparent 27%
        ),
        linear-gradient(135deg, #172554 0%, #1e3a8a 52%, #164e63 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-summary-card {
    background: rgba(30, 41, 59, 0.97);
    border-color: rgba(100, 116, 139, 0.62);
    box-shadow: var(--card-shadow);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .summary-item strong {
    color: #60a5fa;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app :is(.checkin-calendar-card, .checkin-rules) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-grid-wrapper::after {
    background: linear-gradient(transparent, var(--theme-surface) 88%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-day {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-day.is-completed {
    background: var(--theme-green-soft);
    border-color: #166534;
    color: #bbf7d0;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-day.is-next {
    background: var(--theme-blue-soft);
    border-color: #60a5fa;
    color: #bfdbfe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-day.is-milestone {
    background: var(--theme-amber-soft);
    border-color: #b45309;
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app :is(
    .checkin-day.is-milestone.is-completed,
    .checkin-day.is-milestone-claimed
) {
    background: #2e1065;
    border-color: #7c3aed;
    color: #ddd6fe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .checkin-day.is-milestone-claimed::after {
    border-color: var(--theme-surface);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.checkin-app .calendar-toggle-button {
    background: var(--theme-surface-soft);
    color: #bfdbfe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) .checkin-wallet-modal {
    background: rgba(2, 6, 23, 0.78);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) .checkin-wallet-sheet {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.5);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) :is(
    .wallet-modal-close,
    .wallet-modal-cancel
) {
    background: var(--theme-surface-soft);
    color: #bfdbfe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) .wallet-sheet-handle {
    background: #64748b;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) .wallet-reward-day {
    background: var(--theme-blue-soft);
    border-color: #1d4ed8;
    color: #bfdbfe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) .wallet-choice-button {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.checkin-app) .wallet-choice-button:hover {
    background: var(--theme-surface-raised);
    border-color: #3b82f6;
}


/* =====================================================
   MY ACCOUNT PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .my-app {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .my-main {
    background: #0f172a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .balance-card {
    background: rgba(30, 41, 59, 0.94);
    border-color: var(--theme-border-strong);
    box-shadow: var(--card-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app :is(
    .balance-card > h2,
    .balance-item strong,
    .shortcut-name
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .wallet-button {
    background: var(--theme-surface);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .account-menu {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .account-menu-item {
    background: transparent;
    border-bottom-color: var(--theme-border);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .menu-icon {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .menu-arrow {
    color: #64748b;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .wallet-summary-card {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .currency-wallet-card {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .currency-wallet-card.selected {
    background: var(--theme-blue-soft);
    border-color: #3b82f6;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .currency-wallet-card[data-wallet-currency="USDT"].selected {
    background: #134e4a;
    border-color: #14b8a6;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .currency-wallet-amount {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .selected-wallet-summary {
    background: var(--theme-surface-soft);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app :is(
    .selected-wallet-summary strong,
    .commission-balance-row strong,
    .wallet-summary-heading h2
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.my-app .commission-balance-row {
    border-top-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-modal-backdrop {
    background: rgba(2, 6, 23, 0.8);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-modal-dialog {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-modal-close {
    background: var(--theme-surface-soft);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) :is(
    .my-modal-dialog h2,
    .my-record-information strong,
    .my-bound-account-row strong,
    .my-setting-information strong,
    .my-team-member-information strong
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) :is(
    .my-modal-description,
    .my-modal-content,
    .my-record-information small,
    .my-record-amount small,
    .my-bound-account-row span,
    .my-setting-information small,
    .my-team-member-information small
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-modal-cancel {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) :is(
    .my-statistic-item,
    .my-bound-account
) {
    background: var(--theme-surface-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) :is(
    .my-record-item,
    .my-setting-option,
    .my-team-member-item
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-bound-account-row {
    border-bottom-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-record-icon {
    background: var(--theme-cyan-soft);
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-team-member-avatar {
    background: linear-gradient(135deg, #164e63, #155e75);
    color: #a5f3fc;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-team-member-status {
    background: var(--theme-border);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.my-app) .my-team-member-status.active {
    background: var(--theme-green-soft);
    color: #86efac;
}


/* =====================================================
   ORDER PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .order-app {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .holdings-card {
    background: linear-gradient(145deg, #1e293b 0%, #172554 55%, #164e63 100%);
    border-color: var(--theme-border-strong);
    box-shadow: var(--card-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app :is(
    .holding-item strong,
    .empty-order-state h2,
    .order-error-state h2
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app :is(
    .holding-item span,
    .empty-order-state p,
    .order-error-state p,
    .order-tab
) {
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .order-tab.active {
    color: #60a5fa;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-card {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-image {
    background: linear-gradient(135deg, #164e63, #172554);
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-heading h2 {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-id {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-data-item {
    background: var(--theme-surface-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-data-item span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-data-item strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-data-item.income-item strong {
    color: #4ade80;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-progress-heading {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-progress-heading strong {
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-progress-track {
    background: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-footer {
    border-top-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app :is(
    .saved-order-purchased,
    .saved-order-claimable span
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-claimable strong {
    color: #4ade80;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-badge {
    background: var(--theme-cyan-soft);
    color: #a5f3fc;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-badge.status-active {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-badge.status-completed {
    background: var(--theme-blue-soft);
    color: #93c5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app :is(
    .saved-order-badge.status-cancelled,
    .saved-order-badge.status-expired
) {
    background: var(--theme-red-soft);
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-badge.special-badge {
    background: var(--theme-amber-soft);
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-badge.currency-inr {
    background: #312e81;
    color: #c7d2fe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.order-app .saved-order-badge.currency-usdt {
    background: #134e4a;
    color: #99f6e4;
}


/* =====================================================
   PRODUCT PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .product-app {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app :is(.product-header h1, .product-heading h2) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-tab {
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-tab.active {
    color: #60a5fa;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-card {
    border-color: var(--theme-border-strong);
    box-shadow: var(--card-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app :is(.short-term-card, .product-card-blue) {
    background: linear-gradient(145deg, #164e63 0%, #134e4a 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app :is(.long-term-card, .product-card-indigo) {
    background: linear-gradient(145deg, #1e3a8a 0%, #172554 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app :is(.special-product-card, .product-card-violet) {
    background: linear-gradient(145deg, #4c1d95 0%, #2e1065 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-image-box {
    background: rgba(15, 23, 42, 0.44);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-information li {
    background: rgba(15, 23, 42, 0.58);
    color: var(--theme-text-soft);
    box-shadow: none;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-information li strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-card-footer {
    border-top-color: rgba(148, 163, 184, 0.26);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .progress-bar,
:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .progress-bar::-webkit-progress-bar {
    background: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-countdown b {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .commission-badge {
    background: rgba(46, 16, 101, 0.82);
    color: #ddd6fe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-currency-card {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-currency-copy strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-currency-switch {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-currency-option {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.product-app .product-currency-option.active {
    background: var(--theme-surface-raised);
    color: #60a5fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-modal-backdrop {
    background: rgba(2, 6, 23, 0.82);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-modal-dialog {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-modal-close {
    background: var(--theme-surface-soft);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-modal-dialog h2 {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-modal-message {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-product-name {
    background: var(--theme-surface-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-product-name span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-product-name strong {
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-balance-details {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-balance-row {
    border-bottom-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-balance-row span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-balance-row strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-balance-row.shortfall-row strong {
    color: #f87171;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-balance-row.remaining-row strong {
    color: #4ade80;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.product-app) .purchase-cancel-button {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text-soft);
}


/* =====================================================
   RECHARGE PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .recharge-app {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-main {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(37, 99, 235, 0.1),
            transparent 32%
        ),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .current-balance-card::after {
    background: #0f172a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .custom-recharge-section h2,
    .payment-method-section h2,
    .payment-method-heading h2,
    .receiving-card-heading h2,
    .usdt-history-header h3,
    .payment-name,
    .payment-name strong,
    .recharge-history-toolbar h3,
    .customer-payment-reference-heading h3
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .minimum-deposit,
    .recharge-wallet-note,
    .payment-name small,
    .payment-method-note,
    .usdt-setup-card > p,
    .usdt-recharge-result p,
    .receiving-message,
    .receiving-qr-message,
    .customer-payment-reference-heading p,
    .customer-payment-reference-help
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .amount-option,
    .payment-option,
    .custom-input-wrapper input,
    .usdt-recharge-form .custom-input-wrapper
) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .amount-option.active,
    .amount-option.selected,
    .payment-option.selected,
    .payment-option:has(input:checked)
) {
    background: var(--theme-blue-soft);
    border-color: #3b82f6;
    color: #bfdbfe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .radio-mark {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .payment-option:has(input:disabled) {
    background: rgba(30, 41, 59, 0.55);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-wallet-tabs {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-wallet-tab {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-wallet-tab.selected {
    background: var(--theme-surface-raised);
    border-color: #3b82f6;
    color: #93c5fd;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.24);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app
.recharge-wallet-tab[data-recharge-currency="USDT"].selected {
    background: #134e4a;
    border-color: #14b8a6;
    color: #99f6e4;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-setup-card,
    .usdt-recharge-result,
    .usdt-history-panel
) {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .usdt-network-preview span {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(.usdt-security-note, .usdt-recharge-disabled) {
    background: var(--theme-amber-soft);
    border-color: #b45309;
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-button,
    .usdt-history-refresh,
    .usdt-history-load-more,
    .payment-method-refresh
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: #93c5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .usdt-history-item {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-row,
    .usdt-history-item-top,
    .usdt-history-details
) {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-row span,
    .usdt-history-message,
    .usdt-history-transaction
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(.usdt-history-row strong, .usdt-history-amount) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-status,
    .receiving-status,
    .usdt-result-status,
    .recharge-record-status
) {
    background: var(--theme-amber-soft);
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-status.processing,
    .receiving-status.processing
) {
    background: var(--theme-blue-soft);
    color: #93c5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-status.successful,
    .receiving-status.successful
) {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .usdt-history-status.failed,
    .usdt-history-status.expired,
    .usdt-history-status.cancelled,
    .receiving-status.expired,
    .receiving-status.cancelled
) {
    background: var(--theme-red-soft);
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .payment-method-message {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .payment-method-message[data-state="empty"] {
    background: var(--theme-amber-soft);
    border-color: #b45309;
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .payment-method-message[data-state="error"] {
    background: var(--theme-red-soft);
    border-color: #b91c1c;
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .payment-method-icon {
    background: var(--theme-cyan-soft);
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .usdt-setup-card .payment-option {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .usdt-setup-card .payment-option:has(input:checked) {
    background: #134e4a;
    border-color: #14b8a6;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .recharge-receiving-card,
    .usdt-recharge-result.recharge-receiving-card,
    .customer-payment-reference
) {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-request-reference {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-request-reference > span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-request-reference > strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .receiving-copy-button,
    .receiving-view-button,
    .receiving-refresh-button,
    .receiving-new-button
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-detail-row {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-detail-row dt {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-detail-row dd {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-qr-block {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

/* A white QR canvas is intentional and keeps every code scannable. */
:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-qr-image {
    background: #ffffff;
    border-color: #ffffff;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-network-note {
    background: var(--theme-blue-soft);
    border-color: #1d4ed8;
    color: #bfdbfe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-verification-note {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .receiving-qr-message {
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .recharge-history-record {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(
    .history-record-heading,
    .history-record-amount,
    .history-record-meta strong
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app :is(.history-record-reference, .history-record-meta) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-icon {
    background: var(--theme-cyan-soft);
    color: #67e8f9;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-controls input {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-controls input:disabled {
    background: #111827;
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-form label {
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-feedback[data-state="success"] {
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-feedback[data-state="error"] {
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.recharge-app .customer-payment-reference-feedback[data-state="info"] {
    color: #93c5fd;
}

/* Recharge confirmation and history modals are siblings of .recharge-app. */
:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .recharge-modal-backdrop,
    .recharge-detail-backdrop
) {
    background: rgba(2, 6, 23, 0.82);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .recharge-modal-dialog,
    .recharge-detail-dialog
) {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.52);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .recharge-modal-close,
    .recharge-detail-close,
    .recharge-modal-cancel
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .recharge-modal-dialog h2,
    .recharge-detail-dialog > h2,
    .recharge-history-section h3,
    .recharge-record-information strong,
    .recharge-detail-empty h3
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .recharge-modal-dialog > p,
    .recharge-detail-description,
    .recharge-record-information small,
    .recharge-detail-empty p
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-payment-summary {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-summary-row {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-summary-row span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-summary-row strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-summary-row.bonus-row strong {
    color: #4ade80;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-summary-row.total-row {
    background: var(--theme-blue-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-summary-row.total-row strong {
    color: #93c5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-detail-statistic {
    background: var(--theme-surface-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-detail-statistic span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-detail-record {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-history-record {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .history-record-amount,
    .history-record-meta strong
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) :is(
    .history-record-reference,
    .history-record-meta
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-record-icon {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-record-status {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-record-status.pending {
    background: var(--theme-amber-soft);
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.recharge-app) .recharge-record-status.failed {
    background: var(--theme-red-soft);
    color: #fca5a5;
}


/* =====================================================
   VIP PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .vip-app {
    background:
        radial-gradient(
            circle at 100% 18%,
            rgba(124, 58, 237, 0.13),
            transparent 31%
        ),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-main {
    background: transparent;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-rank-card {
    background: linear-gradient(145deg, #1e293b 0%, #172554 100%);
    border-color: var(--theme-border-strong);
    box-shadow: var(--card-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .podium-tier {
    background: linear-gradient(180deg, #334155, #1e293b);
    border-color: var(--theme-border-strong);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .view-rules-button {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: #c4b5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-tab {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-tab.current-level {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app :is(.vip-level-details, .vip-tasks-section) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app :is(
    .vip-level-details-header h2,
    .vip-level-information-row strong,
    .task-title h2,
    .task-information h3
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app :is(
    .vip-level-information-row span,
    .task-title span,
    .task-information p,
    .reset-time
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-level-information-row {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-level-benefit {
    background: transparent;
    border-color: var(--theme-border);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-level-status {
    background: var(--theme-red-soft);
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-level-status.unlocked {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .vip-task-item {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .task-action-button:disabled {
    background: var(--theme-border);
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.vip-app .task-action-button.claimed {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-modal-backdrop {
    background: rgba(2, 6, 23, 0.82);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-modal-dialog {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.52);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-modal-close {
    background: var(--theme-surface-soft);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-modal-dialog h2 {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) :is(.vip-modal-description, .vip-general-rules) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-rule-level {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-rule-level.selected {
    background: var(--theme-blue-soft);
    border-color: #3b82f6;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-rule-level span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.vip-app) .vip-rule-level strong {
    color: var(--theme-text);
}


/* =====================================================
   WITHDRAW PAGE
===================================================== */

:where(html.dark-theme, html[data-marathon-theme="dark"]) .withdraw-app {
    background:
        radial-gradient(
            circle at 0 20%,
            rgba(6, 182, 212, 0.1),
            transparent 31%
        ),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .withdraw-main {
    background: transparent;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app :is(
    .balance-type-section > h2,
    .withdraw-amount-section > h2,
    .section-heading h2
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .balance-type-card {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .balance-type-card.active {
    background: var(--theme-blue-soft);
    border-color: #3b82f6;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app
.balance-type-card[data-wallet-currency="USDT"].active {
    background: #134e4a;
    border-color: #14b8a6;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app :is(.balance-type-card strong, .balance-type-name) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .balance-type-card > small {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .withdraw-input-wrapper input {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .withdraw-input-wrapper input:disabled {
    background: #111827;
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .withdraw-available-balance {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .receiving-account-card {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .receiving-account-card.bound {
    background: var(--theme-surface-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .receiving-account-card.selected {
    background: var(--theme-blue-soft);
    border-color: #3b82f6;
    box-shadow: var(--small-shadow);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .receiving-account-information strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .receiving-account-information small {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .bank-icon {
    background: var(--theme-blue-soft);
    color: #93c5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .usdt-icon {
    background: #134e4a;
    color: #99f6e4;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .usdt-setup-notice {
    background: var(--theme-cyan-soft);
    border-color: #0e7490;
    color: #cffafe;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .usdt-setup-notice strong {
    color: #ecfeff;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
.withdraw-app .usdt-setup-notice small {
    color: #a5f3fc;
}

/* Withdraw popups and history modal are siblings of .withdraw-app. */
:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) :is(
    .withdraw-popup-backdrop,
    .withdraw-detail-backdrop
) {
    background: rgba(2, 6, 23, 0.82);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) :is(
    .withdraw-popup-dialog,
    .withdraw-detail-dialog
) {
    background: var(--theme-surface);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.52);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) :is(
    .withdraw-popup-close,
    .withdraw-detail-close,
    .withdraw-popup-cancel
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) :is(
    .withdraw-popup-dialog h2,
    .withdraw-detail-dialog > h2,
    .withdraw-history-section h3,
    .withdraw-record-information strong,
    .withdraw-detail-empty h3
) {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) :is(
    .withdraw-popup-message,
    .withdraw-detail-description,
    .withdraw-record-information small,
    .withdraw-record-amount small,
    .withdraw-detail-empty p,
    .withdraw-rules-list
) {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .account-input-group span {
    color: var(--theme-text-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) :is(
    .account-input-group input,
    .account-input-group select
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-summary {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-summary-row {
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-summary-row span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-summary-row strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .balance-after-row {
    background: var(--theme-blue-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .balance-after-row strong {
    color: #93c5fd;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .shortfall-row strong {
    color: #f87171;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-detail-statistic {
    background: var(--theme-surface-soft);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-detail-statistic span {
    color: var(--theme-muted);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-detail-statistic strong {
    color: var(--theme-text);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-detail-statistic.pending-stat strong {
    color: #fbbf24;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-detail-statistic.success-stat strong {
    color: #4ade80;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-detail-record {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-record-icon {
    background: var(--theme-red-soft);
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-record-status.pending {
    background: var(--theme-amber-soft);
    color: #fde68a;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-record-status.successful {
    background: var(--theme-green-soft);
    color: #86efac;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-record-status.failed {
    background: var(--theme-red-soft);
    color: #fca5a5;
}

:where(html.dark-theme, html[data-marathon-theme="dark"])
body:has(.withdraw-app) .withdraw-record-amount strong {
    color: #f87171;
}


/* =====================================================
   ACCESSIBLE THEME TRANSITION — CUSTOMER PAGES ONLY
===================================================== */

@media (prefers-reduced-motion: no-preference) {
    :where(html.dark-theme, html[data-marathon-theme="dark"]) :is(
        .checkin-app,
        .my-app,
        .order-app,
        .product-app,
        .recharge-app,
        .vip-app,
        .withdraw-app
    ) {
        transition:
            background-color 0.2s ease,
            color 0.2s ease;
    }
}