/* ==========================================================================
   Brand Studio — Phase 2 DARK-MODE structural overrides (client portal + shared)
   ==========================================================================

   The Brand Studio resolver injects a nonced <style> that RE-POINTS the design
   tokens (bg / surface / glass / shadow / text / border / brand) for dark mode,
   so every element that reads a token follows for free. This file fixes only the
   LIGHT-MODE LITERALS baked into the cascade that a token re-point cannot reach —
   hardcoded `rgba(255,255,255,·)` glass highlights, white surface washes and the
   `rgba(17,17,17,·)` / near-black overlays that glare or invert on a dark page.

   Gating (never changes the light look — light CSS stays byte-identical):
     * explicit Dark  → `html[data-appearance="dark"] …`
     * Match-device   → `@media (prefers-color-scheme: dark){ html[data-appearance="system"] … }`
   Both attributes are set on <html> from the resolved theme in frontend/base.html.
   Rules reference the (dark-re-pointed) tokens where possible so they stay
   brand-adaptive; only hard structural values are literal.
   ======================================================================= */

/* --- explicit Dark ----------------------------------------------------- */
html[data-appearance="dark"] .glass-panel::before {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.015) 44%, rgba(var(--color-primary-rgb), 0.22));
}

/* Panels/cards/inputs that hardcode a translucent-WHITE surface instead of a
   token: on dark they become bright tiles. Re-point to the dark surface token. */
html[data-appearance="dark"] .glass-card,
html[data-appearance="dark"] .app-card,
html[data-appearance="dark"] .surface-card {
    background: var(--glass-panel-bg);
    border-color: var(--color-panel-border);
}

/* Charts: the line stroke already reads --color-primary-strong (follows the
   palette); only the light-assumption grid + marker fills need dark values. */
html[data-appearance="dark"] .account-chart__grid line,
html[data-appearance="dark"] .ct-chart__grid line {
    stroke: rgba(255, 255, 255, 0.08);
}
html[data-appearance="dark"] .account-chart__marker {
    fill: var(--color-surface);
}
html[data-appearance="dark"] .account-chart__marker--start {
    fill: rgba(255, 255, 255, 0.88);
}

/* Scroll shadows / frosted sticky headers that hardcode near-white. */
html[data-appearance="dark"] .app-topbar,
html[data-appearance="dark"] .crm-sidebar {
    background: var(--glass-panel-bg);
}

/* Sidebar "Support" CTA: its background follows --glass-green-bg (→ dark), but its
   label + icon are hardcoded dark (#111 / #2d2f34) → dark-on-dark. The icon inherits
   currentColor, so flipping `color` to the (light) text token fixes both. */
html[data-appearance="dark"] .cta-button--support,
html[data-appearance="dark"] .cta-button--support .icon {
    color: var(--color-text);
}

/* Promo cards: the light shadow is a near-black tuned for a pale page, so on dark it
   simply disappears and the cards flatten into the background. Same three layers,
   deepened until the card lifts off a dark surface too. */
html[data-appearance="dark"] .promo-slide__frame {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.40),
        0 8px 18px -6px rgba(0, 0, 0, 0.46),
        0 26px 44px -16px rgba(0, 0, 0, 0.56);
}
html[data-appearance="dark"] a.promo-slide__frame:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.44),
        0 12px 26px -8px rgba(0, 0, 0, 0.52),
        0 38px 60px -20px rgba(0, 0, 0, 0.64);
}

/* --- Match-device (OS dark) ------------------------------------------- */
@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] .promo-slide__frame {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.40),
            0 8px 18px -6px rgba(0, 0, 0, 0.46),
            0 26px 44px -16px rgba(0, 0, 0, 0.56);
    }
    html[data-appearance="system"] a.promo-slide__frame:hover {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.44),
            0 12px 26px -8px rgba(0, 0, 0, 0.52),
            0 38px 60px -20px rgba(0, 0, 0, 0.64);
    }

    html[data-appearance="system"] .glass-panel::before {
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.015) 44%, rgba(var(--color-primary-rgb), 0.22));
    }
    html[data-appearance="system"] .glass-card,
    html[data-appearance="system"] .app-card,
    html[data-appearance="system"] .surface-card {
        background: var(--glass-panel-bg);
        border-color: var(--color-panel-border);
    }
    html[data-appearance="system"] .account-chart__grid line,
    html[data-appearance="system"] .ct-chart__grid line {
        stroke: rgba(255, 255, 255, 0.08);
    }
    html[data-appearance="system"] .account-chart__marker {
        fill: var(--color-surface);
    }
    html[data-appearance="system"] .account-chart__marker--start {
        fill: rgba(255, 255, 255, 0.88);
    }
    html[data-appearance="system"] .app-topbar,
    html[data-appearance="system"] .crm-sidebar {
        background: var(--glass-panel-bg);
    }
    html[data-appearance="system"] .cta-button--support,
    html[data-appearance="system"] .cta-button--support .icon {
        color: var(--color-text);
    }
}

/* ==========================================================================
   Feature-CSS dark literal overrides (Phase 2 sweep)
   Consolidated from an audit of every frontend feature stylesheet:
   hardcoded white/near-white surface backgrounds, dark body-text hex, and
   light borders a token re-point can't reach. Each maps to a (dark-re-pointed)
   token so it stays brand-adaptive; semantic/interactive text colours are left
   untouched. Light look is unaffected (rules are [data-appearance]-scoped).
   ========================================================================== */
html[data-appearance="dark"] .btn-secondary:hover,
html[data-appearance="dark"] .ct-table th,
html[data-appearance="dark"] .partner-deal-side-panel--snapshot,
html[data-appearance="dark"] .react-btn:hover {
    background: var(--color-panel);
}
html[data-appearance="dark"] .account-chart__filter,
html[data-appearance="dark"] .account-chart__graphic-badge,
html[data-appearance="dark"] .account-chart__status,
html[data-appearance="dark"] .account-chart__tooltip,
html[data-appearance="dark"] .account-chart__trend-pill,
html[data-appearance="dark"] .account-cred-field input:focus,
html[data-appearance="dark"] .account-cred-modal,
html[data-appearance="dark"] .ann-item,
html[data-appearance="dark"] .bonus-button-secondary,
html[data-appearance="dark"] .bonus-button-secondary:focus-visible,
html[data-appearance="dark"] .bonus-button-secondary:hover,
html[data-appearance="dark"] .bonus-choice,
html[data-appearance="dark"] .bonus-field select,
html[data-appearance="dark"] .bonus-legend,
html[data-appearance="dark"] .bonus-rules,
html[data-appearance="dark"] .brand-mark--mobile.brand-mark--logo,
html[data-appearance="dark"] .coming-soon-secondary,
html[data-appearance="dark"] .coming-soon-visual__header span:nth-child(3),
html[data-appearance="dark"] .composer,
html[data-appearance="dark"] .composer textarea,
html[data-appearance="dark"] .ct-copier,
html[data-appearance="dark"] .ct-field input,
html[data-appearance="dark"] .ct-field select,
html[data-appearance="dark"] .ct-field textarea,
html[data-appearance="dark"] .ct-stop-loss,
html[data-appearance="dark"] .data-table tbody tr:hover td,
html[data-appearance="dark"] .data-table td,
html[data-appearance="dark"] .detail-table tbody tr:hover td,
html[data-appearance="dark"] .detail-table td,
html[data-appearance="dark"] .ib-wallet-transfer-form input,
html[data-appearance="dark"] .ib-wallet-transfer-form textarea,
html[data-appearance="dark"] .kyc-camera-modal,
html[data-appearance="dark"] .kyc-datepicker__popover,
html[data-appearance="dark"] .kyc-dropzone__action,
html[data-appearance="dark"] .kyc-dropzone__action:focus-visible,
html[data-appearance="dark"] .kyc-dropzone__action:hover,
html[data-appearance="dark"] .kyc-dropzone__preview,
html[data-appearance="dark"] .kyc-selfie-guide__poster,
html[data-appearance="dark"] .kyc-state__icon,
html[data-appearance="dark"] .kyc-state__note,
html[data-appearance="dark"] .new-account-input,
html[data-appearance="dark"] .new-account-mode-banner,
html[data-appearance="dark"] .new-account-mode-banner__label,
html[data-appearance="dark"] .new-account-result--success,
html[data-appearance="dark"] .new-account-select,
html[data-appearance="dark"] .new-account-tab.is-active,
html[data-appearance="dark"] .new-account-tabs,
html[data-appearance="dark"] .partner-deal-description,
html[data-appearance="dark"] .partner-deal-hero__metrics div,
html[data-appearance="dark"] .partner-deal-hero__metrics--pro div,
html[data-appearance="dark"] .partner-deal-path__step,
html[data-appearance="dark"] .partner-deal-status-card,
html[data-appearance="dark"] .partner-deal-status-card .partner-deal-hero__metrics div,
html[data-appearance="dark"] .partner-deal-status-panel,
html[data-appearance="dark"] .partner-plan-card__metrics div,
html[data-appearance="dark"] .partner-plan-card__metrics--pro div,
html[data-appearance="dark"] .partner-plan-card__spotlight,
html[data-appearance="dark"] .partner-plan-journey__step,
html[data-appearance="dark"] .partner-plan-mini-rates,
html[data-appearance="dark"] .partner-plan-progress--upgraded,
html[data-appearance="dark"] .partner-plan-requirement-list,
html[data-appearance="dark"] .partner-search input,
html[data-appearance="dark"] .partner-trades-section .detail-table tbody tr:hover td,
html[data-appearance="dark"] .partner-trades-section .detail-table td,
html[data-appearance="dark"] .pill-tab:hover,
html[data-appearance="dark"] .profile-settings-avatar.is-placeholder,
html[data-appearance="dark"] .recipient-opt,
html[data-appearance="dark"] .review-card,
html[data-appearance="dark"] .roster-row,
html[data-appearance="dark"] .roster-row__head:hover,
html[data-appearance="dark"] .section-empty-state,
html[data-appearance="dark"] .selfhosted-qr,
html[data-appearance="dark"] .settings-switch::after,
html[data-appearance="dark"] .sidebar-nav__link:hover,
html[data-appearance="dark"] .sidebar-subnav__link:hover,
html[data-appearance="dark"] .stat-tile,
html[data-appearance="dark"] .support-attachment-chip,
html[data-appearance="dark"] .support-dropzone,
html[data-appearance="dark"] .support-dropzone.is-dragover,
html[data-appearance="dark"] .support-dropzone:focus-visible,
html[data-appearance="dark"] .support-dropzone:hover,
html[data-appearance="dark"] .support-inline-edit,
html[data-appearance="dark"] .support-input:focus,
html[data-appearance="dark"] .support-message__bubble--deleted,
html[data-appearance="dark"] .support-select:focus,
html[data-appearance="dark"] .support-textarea:focus,
html[data-appearance="dark"] .support-ticket-hero__close,
html[data-appearance="dark"] .support-ticket-hero__closed,
html[data-appearance="dark"] .support-upload-list__item,
html[data-appearance="dark"] .support-view-toggle,
html[data-appearance="dark"] .trade-card,
html[data-appearance="dark"] .trade-card__foot,
html[data-appearance="dark"] .two-factor-qr,
html[data-appearance="dark"] .wallet-qr-frame,
html[data-appearance="dark"] .wallet-summary-card__icon--danger::before,
html[data-appearance="dark"] .wallet-summary-card__icon--pending::before {
    background: var(--color-surface);
}
html[data-appearance="dark"] .account-chart__graphic-badge,
html[data-appearance="dark"] .account-chart__graphic-shell,
html[data-appearance="dark"] .account-chart__stat-card,
html[data-appearance="dark"] .account-chart__status,
html[data-appearance="dark"] .account-chart__trend-pill,
html[data-appearance="dark"] .coming-soon-eyebrow,
html[data-appearance="dark"] .coming-soon-secondary,
html[data-appearance="dark"] .ct-back-link,
html[data-appearance="dark"] .deposit-provider-tab,
html[data-appearance="dark"] .finance-form-panel--feature .finance-form label,
html[data-appearance="dark"] .finance-input,
html[data-appearance="dark"] .finance-route-strip,
html[data-appearance="dark"] .finance-select,
html[data-appearance="dark"] .finance-step-stack span,
html[data-appearance="dark"] .finance-textarea,
html[data-appearance="dark"] .investment-badge--payout,
html[data-appearance="dark"] .investment-file-input,
html[data-appearance="dark"] .investment-file-input:focus,
html[data-appearance="dark"] .investment-fund-card__media,
html[data-appearance="dark"] .investment-fund-detail__media,
html[data-appearance="dark"] .investment-input,
html[data-appearance="dark"] .investment-input:focus,
html[data-appearance="dark"] .investment-metrics div,
html[data-appearance="dark"] .investment-page-tabs__link,
html[data-appearance="dark"] .investment-risk-panel,
html[data-appearance="dark"] .investment-select,
html[data-appearance="dark"] .investment-select:focus,
html[data-appearance="dark"] .investment-textarea,
html[data-appearance="dark"] .investment-textarea:focus,
html[data-appearance="dark"] .manager-account-metrics div,
html[data-appearance="dark"] .manager-account-selected,
html[data-appearance="dark"] .manager-fund-row dl div,
html[data-appearance="dark"] .notif-mark-all,
html[data-appearance="dark"] .notif-pager__btn,
html[data-appearance="dark"] .notif-row__markread,
html[data-appearance="dark"] .pill-tabs,
html[data-appearance="dark"] .profile-picture-button,
html[data-appearance="dark"] .selfhosted-history__item,
html[data-appearance="dark"] .selfhosted-network,
html[data-appearance="dark"] .selfhosted-status,
html[data-appearance="dark"] .support-input,
html[data-appearance="dark"] .support-select,
html[data-appearance="dark"] .support-textarea,
html[data-appearance="dark"] .transfer-flow__max,
html[data-appearance="dark"] .transfer-flow__swap,
html[data-appearance="dark"] .transfer-orbit {
    background: var(--glass-control-bg);
}
html[data-appearance="dark"] .account-chart,
html[data-appearance="dark"] .account-chart__graphic-shell,
html[data-appearance="dark"] .account-chart__stat-card,
html[data-appearance="dark"] .account-metrics-panel,
html[data-appearance="dark"] .account-setting-field__value,
html[data-appearance="dark"] .coming-soon-hero,
html[data-appearance="dark"] .coming-soon-roadmap,
html[data-appearance="dark"] .coming-soon-roadmap__list li,
html[data-appearance="dark"] .coming-soon-stat,
html[data-appearance="dark"] .copilot-card,
html[data-appearance="dark"] .finance-coming-soon,
html[data-appearance="dark"] .finance-empty-state,
html[data-appearance="dark"] .finance-form-panel--feature,
html[data-appearance="dark"] .finance-notice,
html[data-appearance="dark"] .finance-side-panel--spotlight,
html[data-appearance="dark"] .investment-empty-state,
html[data-appearance="dark"] .investment-fund-card,
html[data-appearance="dark"] .investment-table,
html[data-appearance="dark"] .kyc-doc-slot,
html[data-appearance="dark"] .kyc-dropzone,
html[data-appearance="dark"] .kyc-selfie-guide,
html[data-appearance="dark"] .kyc-status__notice,
html[data-appearance="dark"] .manager-account-panel,
html[data-appearance="dark"] .manager-account-tile,
html[data-appearance="dark"] .manager-fund-row,
html[data-appearance="dark"] .notification-bell__panel,
html[data-appearance="dark"] .partner-deal-showcase,
html[data-appearance="dark"] .partner-plan-command,
html[data-appearance="dark"] .profile-auth-code input:focus,
html[data-appearance="dark"] .profile-auth-modal,
html[data-appearance="dark"] .profile-field input:focus,
html[data-appearance="dark"] .profile-field select:focus,
html[data-appearance="dark"] .profile-menu__panel,
html[data-appearance="dark"] .profile-picture-modal,
html[data-appearance="dark"] .selfhosted-address-card,
html[data-appearance="dark"] .support-composer,
html[data-appearance="dark"] .support-message__bubble,
html[data-appearance="dark"] .transfer-node,
html[data-appearance="dark"] .transfer-panel--premium,
html[data-appearance="dark"] .wallet-hero-panel--premium,
html[data-appearance="dark"] .wallet-history-panel--premium,
html[data-appearance="dark"] .wallet-mini-ledger div,
html[data-appearance="dark"] .withdrawal-accounts-panel--premium,
html[data-appearance="dark"] .withdrawal-method-card {
    background: var(--glass-panel-bg);
}
html[data-appearance="dark"] .coming-soon-secondary,
html[data-appearance="dark"] .ct-copier,
html[data-appearance="dark"] .ct-stop-loss,
html[data-appearance="dark"] .profile-field input,
html[data-appearance="dark"] .profile-field select,
html[data-appearance="dark"] .profile-password-control,
html[data-appearance="dark"] .profile-settings-avatar__edit,
html[data-appearance="dark"] .wallet-summary-card__icon::after {
    border-color: var(--color-panel-border);
}
html[data-appearance="dark"] .account-type-carousel__arrow,
html[data-appearance="dark"] .kyc-camera-close,
html[data-appearance="dark"] .kyc-card__eyebrow,
html[data-appearance="dark"] .kyc-datepicker__day.is-disabled,
html[data-appearance="dark"] .kyc-datepicker__day.is-outside,
html[data-appearance="dark"] .kyc-datepicker__display.is-placeholder,
html[data-appearance="dark"] .kyc-datepicker__icon,
html[data-appearance="dark"] .kyc-datepicker__month.is-disabled,
html[data-appearance="dark"] .kyc-datepicker__title-year,
html[data-appearance="dark"] .kyc-datepicker__weekday,
html[data-appearance="dark"] .kyc-datepicker__year.is-disabled,
html[data-appearance="dark"] .kyc-doc-slot__caption,
html[data-appearance="dark"] .kyc-doc-slot__select-caret,
html[data-appearance="dark"] .kyc-dropzone__hint,
html[data-appearance="dark"] .kyc-selfie-guide__list li span,
html[data-appearance="dark"] .kyc-status__hint,
html[data-appearance="dark"] .kyc-step__header p,
html[data-appearance="dark"] .new-account-input::placeholder,
html[data-appearance="dark"] .new-account-tab,
html[data-appearance="dark"] .pagination__edge.is-muted,
html[data-appearance="dark"] .profile-field input:disabled,
html[data-appearance="dark"] .profile-field select:disabled,
html[data-appearance="dark"] .support-input::placeholder,
html[data-appearance="dark"] .support-textarea::placeholder {
    color: var(--color-muted);
}
html[data-appearance="dark"] .kyc-state__meta {
    color: var(--color-muted) !important;
}
html[data-appearance="dark"] .account-setting-field__copy,
html[data-appearance="dark"] .ann-item__text,
html[data-appearance="dark"] .bonus-modal__warning,
html[data-appearance="dark"] .coming-soon-secondary,
html[data-appearance="dark"] .copilot-avatar,
html[data-appearance="dark"] .ct-back-link,
html[data-appearance="dark"] .ct-stat .ct-stat__value,
html[data-appearance="dark"] .icon--nav,
html[data-appearance="dark"] .kyc-back-link,
html[data-appearance="dark"] .kyc-camera-tips li,
html[data-appearance="dark"] .kyc-check,
html[data-appearance="dark"] .kyc-datepicker__day,
html[data-appearance="dark"] .kyc-datepicker__day:hover:not([disabled]),
html[data-appearance="dark"] .kyc-datepicker__month,
html[data-appearance="dark"] .kyc-datepicker__month:hover:not([disabled]),
html[data-appearance="dark"] .kyc-datepicker__popover,
html[data-appearance="dark"] .kyc-datepicker__title,
html[data-appearance="dark"] .kyc-datepicker__title:hover:not([disabled]),
html[data-appearance="dark"] .kyc-datepicker__trigger,
html[data-appearance="dark"] .kyc-datepicker__year,
html[data-appearance="dark"] .kyc-datepicker__year:hover:not([disabled]),
html[data-appearance="dark"] .kyc-doc-slot__index,
html[data-appearance="dark"] .kyc-dropzone__action,
html[data-appearance="dark"] .kyc-dropzone__title,
html[data-appearance="dark"] .kyc-field > span,
html[data-appearance="dark"] .kyc-selfie-guide__list li strong,
html[data-appearance="dark"] .kyc-state__copy p,
html[data-appearance="dark"] .kyc-state__note,
html[data-appearance="dark"] .kyc-state__reasons li,
html[data-appearance="dark"] .kyc-status__eyebrow,
html[data-appearance="dark"] .kyc-status__notice-body p,
html[data-appearance="dark"] .kyc-status__notice-body ul,
html[data-appearance="dark"] .new-account-tab.is-active,
html[data-appearance="dark"] .review-card__body,
html[data-appearance="dark"] .wallet-modal-tab {
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
html[data-appearance="system"] .btn-secondary:hover,
html[data-appearance="system"] .ct-table th,
html[data-appearance="system"] .partner-deal-side-panel--snapshot,
html[data-appearance="system"] .react-btn:hover {
    background: var(--color-panel);
}
html[data-appearance="system"] .account-chart__filter,
html[data-appearance="system"] .account-chart__graphic-badge,
html[data-appearance="system"] .account-chart__status,
html[data-appearance="system"] .account-chart__tooltip,
html[data-appearance="system"] .account-chart__trend-pill,
html[data-appearance="system"] .account-cred-field input:focus,
html[data-appearance="system"] .account-cred-modal,
html[data-appearance="system"] .ann-item,
html[data-appearance="system"] .bonus-button-secondary,
html[data-appearance="system"] .bonus-button-secondary:focus-visible,
html[data-appearance="system"] .bonus-button-secondary:hover,
html[data-appearance="system"] .bonus-choice,
html[data-appearance="system"] .bonus-field select,
html[data-appearance="system"] .bonus-legend,
html[data-appearance="system"] .bonus-rules,
html[data-appearance="system"] .brand-mark--mobile.brand-mark--logo,
html[data-appearance="system"] .coming-soon-secondary,
html[data-appearance="system"] .coming-soon-visual__header span:nth-child(3),
html[data-appearance="system"] .composer,
html[data-appearance="system"] .composer textarea,
html[data-appearance="system"] .ct-copier,
html[data-appearance="system"] .ct-field input,
html[data-appearance="system"] .ct-field select,
html[data-appearance="system"] .ct-field textarea,
html[data-appearance="system"] .ct-stop-loss,
html[data-appearance="system"] .data-table tbody tr:hover td,
html[data-appearance="system"] .data-table td,
html[data-appearance="system"] .detail-table tbody tr:hover td,
html[data-appearance="system"] .detail-table td,
html[data-appearance="system"] .ib-wallet-transfer-form input,
html[data-appearance="system"] .ib-wallet-transfer-form textarea,
html[data-appearance="system"] .kyc-camera-modal,
html[data-appearance="system"] .kyc-datepicker__popover,
html[data-appearance="system"] .kyc-dropzone__action,
html[data-appearance="system"] .kyc-dropzone__action:focus-visible,
html[data-appearance="system"] .kyc-dropzone__action:hover,
html[data-appearance="system"] .kyc-dropzone__preview,
html[data-appearance="system"] .kyc-selfie-guide__poster,
html[data-appearance="system"] .kyc-state__icon,
html[data-appearance="system"] .kyc-state__note,
html[data-appearance="system"] .new-account-input,
html[data-appearance="system"] .new-account-mode-banner,
html[data-appearance="system"] .new-account-mode-banner__label,
html[data-appearance="system"] .new-account-result--success,
html[data-appearance="system"] .new-account-select,
html[data-appearance="system"] .new-account-tab.is-active,
html[data-appearance="system"] .new-account-tabs,
html[data-appearance="system"] .partner-deal-description,
html[data-appearance="system"] .partner-deal-hero__metrics div,
html[data-appearance="system"] .partner-deal-hero__metrics--pro div,
html[data-appearance="system"] .partner-deal-path__step,
html[data-appearance="system"] .partner-deal-status-card,
html[data-appearance="system"] .partner-deal-status-card .partner-deal-hero__metrics div,
html[data-appearance="system"] .partner-deal-status-panel,
html[data-appearance="system"] .partner-plan-card__metrics div,
html[data-appearance="system"] .partner-plan-card__metrics--pro div,
html[data-appearance="system"] .partner-plan-card__spotlight,
html[data-appearance="system"] .partner-plan-journey__step,
html[data-appearance="system"] .partner-plan-mini-rates,
html[data-appearance="system"] .partner-plan-progress--upgraded,
html[data-appearance="system"] .partner-plan-requirement-list,
html[data-appearance="system"] .partner-search input,
html[data-appearance="system"] .partner-trades-section .detail-table tbody tr:hover td,
html[data-appearance="system"] .partner-trades-section .detail-table td,
html[data-appearance="system"] .pill-tab:hover,
html[data-appearance="system"] .profile-settings-avatar.is-placeholder,
html[data-appearance="system"] .recipient-opt,
html[data-appearance="system"] .review-card,
html[data-appearance="system"] .roster-row,
html[data-appearance="system"] .roster-row__head:hover,
html[data-appearance="system"] .section-empty-state,
html[data-appearance="system"] .selfhosted-qr,
html[data-appearance="system"] .settings-switch::after,
html[data-appearance="system"] .sidebar-nav__link:hover,
html[data-appearance="system"] .sidebar-subnav__link:hover,
html[data-appearance="system"] .stat-tile,
html[data-appearance="system"] .support-attachment-chip,
html[data-appearance="system"] .support-dropzone,
html[data-appearance="system"] .support-dropzone.is-dragover,
html[data-appearance="system"] .support-dropzone:focus-visible,
html[data-appearance="system"] .support-dropzone:hover,
html[data-appearance="system"] .support-inline-edit,
html[data-appearance="system"] .support-input:focus,
html[data-appearance="system"] .support-message__bubble--deleted,
html[data-appearance="system"] .support-select:focus,
html[data-appearance="system"] .support-textarea:focus,
html[data-appearance="system"] .support-ticket-hero__close,
html[data-appearance="system"] .support-ticket-hero__closed,
html[data-appearance="system"] .support-upload-list__item,
html[data-appearance="system"] .support-view-toggle,
html[data-appearance="system"] .trade-card,
html[data-appearance="system"] .trade-card__foot,
html[data-appearance="system"] .two-factor-qr,
html[data-appearance="system"] .wallet-qr-frame,
html[data-appearance="system"] .wallet-summary-card__icon--danger::before,
html[data-appearance="system"] .wallet-summary-card__icon--pending::before {
    background: var(--color-surface);
}
html[data-appearance="system"] .account-chart__graphic-badge,
html[data-appearance="system"] .account-chart__graphic-shell,
html[data-appearance="system"] .account-chart__stat-card,
html[data-appearance="system"] .account-chart__status,
html[data-appearance="system"] .account-chart__trend-pill,
html[data-appearance="system"] .coming-soon-eyebrow,
html[data-appearance="system"] .coming-soon-secondary,
html[data-appearance="system"] .ct-back-link,
html[data-appearance="system"] .deposit-provider-tab,
html[data-appearance="system"] .finance-form-panel--feature .finance-form label,
html[data-appearance="system"] .finance-input,
html[data-appearance="system"] .finance-route-strip,
html[data-appearance="system"] .finance-select,
html[data-appearance="system"] .finance-step-stack span,
html[data-appearance="system"] .finance-textarea,
html[data-appearance="system"] .investment-badge--payout,
html[data-appearance="system"] .investment-file-input,
html[data-appearance="system"] .investment-file-input:focus,
html[data-appearance="system"] .investment-fund-card__media,
html[data-appearance="system"] .investment-fund-detail__media,
html[data-appearance="system"] .investment-input,
html[data-appearance="system"] .investment-input:focus,
html[data-appearance="system"] .investment-metrics div,
html[data-appearance="system"] .investment-page-tabs__link,
html[data-appearance="system"] .investment-risk-panel,
html[data-appearance="system"] .investment-select,
html[data-appearance="system"] .investment-select:focus,
html[data-appearance="system"] .investment-textarea,
html[data-appearance="system"] .investment-textarea:focus,
html[data-appearance="system"] .manager-account-metrics div,
html[data-appearance="system"] .manager-account-selected,
html[data-appearance="system"] .manager-fund-row dl div,
html[data-appearance="system"] .notif-mark-all,
html[data-appearance="system"] .notif-pager__btn,
html[data-appearance="system"] .notif-row__markread,
html[data-appearance="system"] .pill-tabs,
html[data-appearance="system"] .profile-picture-button,
html[data-appearance="system"] .selfhosted-history__item,
html[data-appearance="system"] .selfhosted-network,
html[data-appearance="system"] .selfhosted-status,
html[data-appearance="system"] .support-input,
html[data-appearance="system"] .support-select,
html[data-appearance="system"] .support-textarea,
html[data-appearance="system"] .transfer-flow__max,
html[data-appearance="system"] .transfer-flow__swap,
html[data-appearance="system"] .transfer-orbit {
    background: var(--glass-control-bg);
}
html[data-appearance="system"] .account-chart,
html[data-appearance="system"] .account-chart__graphic-shell,
html[data-appearance="system"] .account-chart__stat-card,
html[data-appearance="system"] .account-metrics-panel,
html[data-appearance="system"] .account-setting-field__value,
html[data-appearance="system"] .coming-soon-hero,
html[data-appearance="system"] .coming-soon-roadmap,
html[data-appearance="system"] .coming-soon-roadmap__list li,
html[data-appearance="system"] .coming-soon-stat,
html[data-appearance="system"] .copilot-card,
html[data-appearance="system"] .finance-coming-soon,
html[data-appearance="system"] .finance-empty-state,
html[data-appearance="system"] .finance-form-panel--feature,
html[data-appearance="system"] .finance-notice,
html[data-appearance="system"] .finance-side-panel--spotlight,
html[data-appearance="system"] .investment-empty-state,
html[data-appearance="system"] .investment-fund-card,
html[data-appearance="system"] .investment-table,
html[data-appearance="system"] .kyc-doc-slot,
html[data-appearance="system"] .kyc-dropzone,
html[data-appearance="system"] .kyc-selfie-guide,
html[data-appearance="system"] .kyc-status__notice,
html[data-appearance="system"] .manager-account-panel,
html[data-appearance="system"] .manager-account-tile,
html[data-appearance="system"] .manager-fund-row,
html[data-appearance="system"] .notification-bell__panel,
html[data-appearance="system"] .partner-deal-showcase,
html[data-appearance="system"] .partner-plan-command,
html[data-appearance="system"] .profile-auth-code input:focus,
html[data-appearance="system"] .profile-auth-modal,
html[data-appearance="system"] .profile-field input:focus,
html[data-appearance="system"] .profile-field select:focus,
html[data-appearance="system"] .profile-menu__panel,
html[data-appearance="system"] .profile-picture-modal,
html[data-appearance="system"] .selfhosted-address-card,
html[data-appearance="system"] .support-composer,
html[data-appearance="system"] .support-message__bubble,
html[data-appearance="system"] .transfer-node,
html[data-appearance="system"] .transfer-panel--premium,
html[data-appearance="system"] .wallet-hero-panel--premium,
html[data-appearance="system"] .wallet-history-panel--premium,
html[data-appearance="system"] .wallet-mini-ledger div,
html[data-appearance="system"] .withdrawal-accounts-panel--premium,
html[data-appearance="system"] .withdrawal-method-card {
    background: var(--glass-panel-bg);
}
html[data-appearance="system"] .coming-soon-secondary,
html[data-appearance="system"] .ct-copier,
html[data-appearance="system"] .ct-stop-loss,
html[data-appearance="system"] .profile-field input,
html[data-appearance="system"] .profile-field select,
html[data-appearance="system"] .profile-password-control,
html[data-appearance="system"] .profile-settings-avatar__edit,
html[data-appearance="system"] .wallet-summary-card__icon::after {
    border-color: var(--color-panel-border);
}
html[data-appearance="system"] .account-type-carousel__arrow,
html[data-appearance="system"] .kyc-camera-close,
html[data-appearance="system"] .kyc-card__eyebrow,
html[data-appearance="system"] .kyc-datepicker__day.is-disabled,
html[data-appearance="system"] .kyc-datepicker__day.is-outside,
html[data-appearance="system"] .kyc-datepicker__display.is-placeholder,
html[data-appearance="system"] .kyc-datepicker__icon,
html[data-appearance="system"] .kyc-datepicker__month.is-disabled,
html[data-appearance="system"] .kyc-datepicker__title-year,
html[data-appearance="system"] .kyc-datepicker__weekday,
html[data-appearance="system"] .kyc-datepicker__year.is-disabled,
html[data-appearance="system"] .kyc-doc-slot__caption,
html[data-appearance="system"] .kyc-doc-slot__select-caret,
html[data-appearance="system"] .kyc-dropzone__hint,
html[data-appearance="system"] .kyc-selfie-guide__list li span,
html[data-appearance="system"] .kyc-status__hint,
html[data-appearance="system"] .kyc-step__header p,
html[data-appearance="system"] .new-account-input::placeholder,
html[data-appearance="system"] .new-account-tab,
html[data-appearance="system"] .pagination__edge.is-muted,
html[data-appearance="system"] .profile-field input:disabled,
html[data-appearance="system"] .profile-field select:disabled,
html[data-appearance="system"] .support-input::placeholder,
html[data-appearance="system"] .support-textarea::placeholder {
    color: var(--color-muted);
}
html[data-appearance="system"] .kyc-state__meta {
    color: var(--color-muted) !important;
}
html[data-appearance="system"] .account-setting-field__copy,
html[data-appearance="system"] .ann-item__text,
html[data-appearance="system"] .bonus-modal__warning,
html[data-appearance="system"] .coming-soon-secondary,
html[data-appearance="system"] .copilot-avatar,
html[data-appearance="system"] .ct-back-link,
html[data-appearance="system"] .ct-stat .ct-stat__value,
html[data-appearance="system"] .icon--nav,
html[data-appearance="system"] .kyc-back-link,
html[data-appearance="system"] .kyc-camera-tips li,
html[data-appearance="system"] .kyc-check,
html[data-appearance="system"] .kyc-datepicker__day,
html[data-appearance="system"] .kyc-datepicker__day:hover:not([disabled]),
html[data-appearance="system"] .kyc-datepicker__month,
html[data-appearance="system"] .kyc-datepicker__month:hover:not([disabled]),
html[data-appearance="system"] .kyc-datepicker__popover,
html[data-appearance="system"] .kyc-datepicker__title,
html[data-appearance="system"] .kyc-datepicker__title:hover:not([disabled]),
html[data-appearance="system"] .kyc-datepicker__trigger,
html[data-appearance="system"] .kyc-datepicker__year,
html[data-appearance="system"] .kyc-datepicker__year:hover:not([disabled]),
html[data-appearance="system"] .kyc-doc-slot__index,
html[data-appearance="system"] .kyc-dropzone__action,
html[data-appearance="system"] .kyc-dropzone__title,
html[data-appearance="system"] .kyc-field > span,
html[data-appearance="system"] .kyc-selfie-guide__list li strong,
html[data-appearance="system"] .kyc-state__copy p,
html[data-appearance="system"] .kyc-state__note,
html[data-appearance="system"] .kyc-state__reasons li,
html[data-appearance="system"] .kyc-status__eyebrow,
html[data-appearance="system"] .kyc-status__notice-body p,
html[data-appearance="system"] .kyc-status__notice-body ul,
html[data-appearance="system"] .new-account-tab.is-active,
html[data-appearance="system"] .review-card__body,
html[data-appearance="system"] .wallet-modal-tab {
    color: var(--color-text);
}
}

/* ==========================================================================
   Account-created receipt page + native language selector (Phase 2 dark fix)
   --------------------------------------------------------------------------
   The "Your MT5 account is ready" receipt DOCUMENT bakes white/near-white
   surface washes and light borders that a token re-point can't reach, so on a
   dark page it stayed a white card while --color-text flipped to light → the
   receipt fields rendered light-on-white (invisible). Re-point those surfaces
   to the dark tokens; the text tokens are already legible on them. The credential
   "vault" is intentionally near-black already, so it only gains a subtle edge.

   The language <select> control uses dark-safe tokens, but its NATIVE <option>
   popup renders on the OS default (white) surface → unreadable in dark. `color-scheme`
   makes Chromium paint the popup dark; explicit option colours cover other engines.
   ========================================================================== */
html[data-appearance="dark"] .account-receipt-document,
html[data-appearance="dark"] .account-receipt-login-strip,
html[data-appearance="dark"] .transaction-receipt-summary {
    border-color: var(--color-panel-border);
}
html[data-appearance="dark"] .account-receipt-document {
    background: var(--glass-panel-bg);
}
html[data-appearance="dark"] .account-receipt-login-strip {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.18), var(--glass-panel-bg));
}
html[data-appearance="dark"] .transaction-receipt-summary {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), var(--glass-panel-bg));
}
html[data-appearance="dark"] .account-receipt-field {
    background: var(--color-surface);
    border-color: var(--color-panel-border);
}
html[data-appearance="dark"] .account-receipt-link-button {
    background: var(--glass-control-bg);
    border-color: var(--color-panel-border);
}
html[data-appearance="dark"] .account-receipt-link-button:hover,
html[data-appearance="dark"] .account-receipt-link-button:focus-visible {
    background: var(--color-panel);
}
html[data-appearance="dark"] .account-receipt-document__footer {
    border-top-color: var(--color-panel-border);
}
html[data-appearance="dark"] .account-receipt-funding__copy p {
    color: var(--color-muted);
}
html[data-appearance="dark"] .account-receipt-vault {
    border-color: rgba(255, 255, 255, 0.1);
}
html[data-appearance="dark"] .language-switcher select {
    color-scheme: dark;
}
html[data-appearance="dark"] .language-switcher option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] .account-receipt-document,
    html[data-appearance="system"] .account-receipt-login-strip,
    html[data-appearance="system"] .transaction-receipt-summary {
        border-color: var(--color-panel-border);
    }
    html[data-appearance="system"] .account-receipt-document {
        background: var(--glass-panel-bg);
    }
    html[data-appearance="system"] .account-receipt-login-strip {
        background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.18), var(--glass-panel-bg));
    }
    html[data-appearance="system"] .transaction-receipt-summary {
        background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), var(--glass-panel-bg));
    }
    html[data-appearance="system"] .account-receipt-field {
        background: var(--color-surface);
        border-color: var(--color-panel-border);
    }
    html[data-appearance="system"] .account-receipt-link-button {
        background: var(--glass-control-bg);
        border-color: var(--color-panel-border);
    }
    html[data-appearance="system"] .account-receipt-link-button:hover,
    html[data-appearance="system"] .account-receipt-link-button:focus-visible {
        background: var(--color-panel);
    }
    html[data-appearance="system"] .account-receipt-document__footer {
        border-top-color: var(--color-panel-border);
    }
    html[data-appearance="system"] .account-receipt-funding__copy p {
        color: var(--color-muted);
    }
    html[data-appearance="system"] .account-receipt-vault {
        border-color: rgba(255, 255, 255, 0.1);
    }
    html[data-appearance="system"] .language-switcher select {
        color-scheme: dark;
    }
    html[data-appearance="system"] .language-switcher option {
        background-color: var(--color-surface);
        color: var(--color-text);
    }
}

/* ==========================================================================
   Wallet / Finance page — dark-mode literal fixes
   --------------------------------------------------------------------------
   The wallet hero + summary cards + Deposit/Withdraw buttons + finance pills
   bake in translucent-WHITE gradients and near-opaque white inset highlights.
   On dark they glare (the diagonal sheen overlay) or wash out to a bright tile
   whose text — the light --color-text token — becomes invisible. Re-point them
   to the dark surface tokens and dim the sheen. Light look stays byte-identical.
   ========================================================================== */

/* --- explicit Dark ----------------------------------------------------- */
/* 1. Diagonal-line sheen overlay on the premium panels: the white lines at
      0.24α glare on dark — drop them near-invisible and soften the brand wash. */
html[data-appearance="dark"] .wallet-hero-panel--premium::after,
html[data-appearance="dark"] .finance-form-panel--feature::after,
html[data-appearance="dark"] .finance-side-panel--spotlight::after,
html[data-appearance="dark"] .transfer-panel--premium::after,
html[data-appearance="dark"] .wallet-history-panel--premium::after,
html[data-appearance="dark"] .withdrawal-accounts-panel--premium::after {
    background:
        linear-gradient(90deg, rgba(var(--color-primary-strong-rgb), 0.1), transparent 26%, transparent 74%, rgba(241, 191, 76, 0.05)),
        repeating-linear-gradient(135deg, transparent 0 20px, rgba(255, 255, 255, 0.04) 20px 21px);
    opacity: 0.55;
}

/* 2. Premium panels: replace the near-white (0.96α) inset top hairline + light
      drop shadow with the dark panel shadow so the top edge stops glaring. */
html[data-appearance="dark"] .wallet-hero-panel--premium,
html[data-appearance="dark"] .finance-form-panel--feature,
html[data-appearance="dark"] .finance-side-panel--spotlight,
html[data-appearance="dark"] .transfer-panel--premium,
html[data-appearance="dark"] .wallet-history-panel--premium,
html[data-appearance="dark"] .withdrawal-accounts-panel--premium {
    border-color: var(--color-panel-border);
    box-shadow: var(--shadow-panel);
}

/* 3. Summary cards (Posted Balance / Available Now / Pending …): white gradient
      tile → invisible light text. Re-point to the dark glass panel token. */
html[data-appearance="dark"] .wallet-summary-card--premium {
    background: var(--glass-panel-bg);
    border-color: var(--color-panel-border);
}
html[data-appearance="dark"] .wallet-summary-card--premium:hover {
    border-color: rgba(var(--color-primary-strong-rgb), 0.4);
}

/* 4. Deposit / Withdraw action buttons: white gradient tiles → dark control
      surface with light text (the Transfer button stays the brand CTA). */
html[data-appearance="dark"] .wallet-action-button--deposit,
html[data-appearance="dark"] .wallet-action-button--withdraw {
    background: var(--glass-control-bg) !important;
    border-color: var(--color-panel-border);
    box-shadow: var(--shadow-control);
    color: var(--color-text);
}
html[data-appearance="dark"] .wallet-action-row--premium .wallet-action-button::after {
    background: linear-gradient(110deg, transparent 0 30%, rgba(255, 255, 255, 0.12) 42%, transparent 56% 100%);
}

/* 5. Finance pills (Live ledger / card pills / page badge): mint-over-white
      gradient with low-contrast text → dark control surface + light text. */
html[data-appearance="dark"] .finance-live-pill,
html[data-appearance="dark"] .finance-page-badge,
html[data-appearance="dark"] .finance-card-pill {
    background: var(--glass-control-bg);
    border-color: rgba(var(--color-primary-strong-rgb), 0.35);
    color: var(--color-text);
}

/* --- Match-device (OS dark) -------------------------------------------- */
@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] .wallet-hero-panel--premium::after,
    html[data-appearance="system"] .finance-form-panel--feature::after,
    html[data-appearance="system"] .finance-side-panel--spotlight::after,
    html[data-appearance="system"] .transfer-panel--premium::after,
    html[data-appearance="system"] .wallet-history-panel--premium::after,
    html[data-appearance="system"] .withdrawal-accounts-panel--premium::after {
        background:
            linear-gradient(90deg, rgba(var(--color-primary-strong-rgb), 0.1), transparent 26%, transparent 74%, rgba(241, 191, 76, 0.05)),
            repeating-linear-gradient(135deg, transparent 0 20px, rgba(255, 255, 255, 0.04) 20px 21px);
        opacity: 0.55;
    }
    html[data-appearance="system"] .wallet-hero-panel--premium,
    html[data-appearance="system"] .finance-form-panel--feature,
    html[data-appearance="system"] .finance-side-panel--spotlight,
    html[data-appearance="system"] .transfer-panel--premium,
    html[data-appearance="system"] .wallet-history-panel--premium,
    html[data-appearance="system"] .withdrawal-accounts-panel--premium {
        border-color: var(--color-panel-border);
        box-shadow: var(--shadow-panel);
    }
    html[data-appearance="system"] .wallet-summary-card--premium {
        background: var(--glass-panel-bg);
        border-color: var(--color-panel-border);
    }
    html[data-appearance="system"] .wallet-summary-card--premium:hover {
        border-color: rgba(var(--color-primary-strong-rgb), 0.4);
    }
    html[data-appearance="system"] .wallet-action-button--deposit,
    html[data-appearance="system"] .wallet-action-button--withdraw {
        background: var(--glass-control-bg) !important;
        border-color: var(--color-panel-border);
        box-shadow: var(--shadow-control);
        color: var(--color-text);
    }
    html[data-appearance="system"] .wallet-action-row--premium .wallet-action-button::after {
        background: linear-gradient(110deg, transparent 0 30%, rgba(255, 255, 255, 0.12) 42%, transparent 56% 100%);
    }
    html[data-appearance="system"] .finance-live-pill,
    html[data-appearance="system"] .finance-page-badge,
    html[data-appearance="system"] .finance-card-pill {
        background: var(--glass-control-bg);
        border-color: rgba(var(--color-primary-strong-rgb), 0.35);
        color: var(--color-text);
    }
}

/* ==========================================================================
   Profile-zoom range thumb — restored as STANDALONE rules.
   --------------------------------------------------------------------------
   These vendor pseudo-elements used to sit inside the big grouped
   `background: var(--color-surface)` rules. A comma-separated style rule is
   NOT forgiving: every browser treats the OTHER vendor's pseudo-element as an
   invalid selector and drops the ENTIRE group — which silently killed the dark
   background on .section-empty-state, .stat-tile, .trade-card, .review-card,
   .roster-row, .support-* and every other selector in that group. Kept in
   their own single-selector rules so an unknown pseudo only drops itself.
   ========================================================================== */
html[data-appearance="dark"] .profile-picture-zoom input[type="range"]::-moz-range-thumb {
    background: var(--color-surface);
}
html[data-appearance="dark"] .profile-picture-zoom input[type="range"]::-webkit-slider-thumb {
    background: var(--color-surface);
}
@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] .profile-picture-zoom input[type="range"]::-moz-range-thumb {
        background: var(--color-surface);
    }
    html[data-appearance="system"] .profile-picture-zoom input[type="range"]::-webkit-slider-thumb {
        background: var(--color-surface);
    }
}
