/* ==========================================================================
   EtheraFX — Premium Light Broker Theme (theme.css)
   --------------------------------------------------------------------------
   Loaded LAST, after styles.css / admin.css / terminal.css. It introduces a
   light white/soft-blue broker identity by:
     1. Redefining the design tokens (the legacy --bg / --panel / ... names that
        the rest of the CSS already consumes) to light values, so every
        token-driven rule flips automatically.
     2. Adding the brief's semantic token names (--color-primary, --radius-card,
        --shadow-card, ...) for new components.
     3. Overriding the hard-coded dark surfaces that do not use tokens.
     4. Re-asserting the original dark tokens *scoped to the live trading
        terminal* (body:has(.terminal-wide)) so Spot / Futures / Forex keep a
        refined dark "pro" workspace.
   All graphics are generated locally with CSS gradients and inline SVG — no
   external assets, fonts, or hot-links.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand / semantic palette (brief-aligned) */
    --color-primary: #0d6efd;
    --color-primary-dark: #0b5ed7;
    --color-primary-deep: #0b2a5b;
    --color-primary-soft: #eaf4ff;
    --color-primary-tint: rgba(13, 110, 253, 0.08);

    --color-bg: #f5f9ff;
    --color-bg-soft: #eaf2fd;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f3f7fe;

    --color-text: #102033;
    --color-heading: #0b2a5b;
    --color-muted: #5b6b82;
    --color-muted-2: #8493a8;
    --color-border: #d9e6f5;
    --color-border-strong: #c4d6ee;

    --color-success: #12a150;
    --color-success-soft: rgba(18, 161, 80, 0.12);
    --color-danger: #e0383e;
    --color-danger-soft: rgba(224, 56, 62, 0.10);
    --color-warning: #d98309;
    --color-warning-soft: rgba(217, 131, 9, 0.13);
    --color-info: #0d6efd;
    --color-info-soft: rgba(13, 110, 253, 0.10);

    --shadow-card: 0 18px 44px rgba(16, 42, 91, 0.10);
    --shadow-soft: 0 10px 26px rgba(16, 42, 91, 0.07);
    --shadow-raise: 0 26px 60px rgba(16, 42, 91, 0.16);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

    --radius-card: 22px;
    --radius-button: 14px;
    --radius-input: 14px;
    --radius-pill: 999px;

    --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);

    --gradient-primary: linear-gradient(135deg, #2f86ff 0%, #0d6efd 45%, #0b5ed7 100%);
    --gradient-primary-hover: linear-gradient(135deg, #3b90ff 0%, #1574ff 45%, #0d63e6 100%);
    --gradient-deep: linear-gradient(150deg, #0b2a5b 0%, #103a78 55%, #0d6efd 130%);
    --ring-focus: 0 0 0 3px rgba(13, 110, 253, 0.28);

    /* Subtle financial grid used behind hero / feature sections. */
    --chart-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%230d6efd' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");

    /* ----- Re-map the legacy tokens the existing stylesheets consume ----- */
    --bg: var(--color-bg);
    --bg-soft: var(--color-bg-soft);
    --panel: var(--color-surface);
    --panel-strong: var(--color-surface);
    --panel-raised: var(--color-surface-elevated);
    --text: var(--color-text);
    --muted: var(--color-muted);
    --muted-2: var(--color-muted-2);
    --line: var(--color-border);
    --line-soft: var(--color-bg-soft);
    --accent: var(--color-primary);
    --accent-strong: var(--color-primary-dark);
    --accent-soft: var(--color-primary-tint);
    --steel: var(--color-muted);
    --silver: #334155;
    --success: var(--color-success);
    --success-soft: var(--color-success-soft);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-soft);
    --info: var(--color-info);
    --info-soft: var(--color-info-soft);
    --amber: var(--color-warning);
    --radius-sm: 12px;
    --radius: var(--radius-input);
    --shadow: var(--shadow-card);
    --focus-ring: var(--ring-focus);
}

/* ----------------------------------------------------------------------------
   1b. Dark theme tokens — activated by [data-theme="dark"] on <html>.
   Only color tokens change; radii / transitions / shape tokens are shared.
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #3b8cff;
    --color-primary-dark: #7bb6ff;   /* readable primary text/links on dark */
    --color-primary-deep: #9cc6ff;
    --color-primary-soft: rgba(59, 140, 255, 0.16);
    --color-primary-tint: rgba(59, 140, 255, 0.12);

    --color-bg: #070d18;
    --color-bg-soft: #0b1424;
    --color-surface: #0f1a2e;
    --color-surface-elevated: #142339;
    --color-surface-muted: #16243c;

    --color-text: #e7eefb;
    --color-heading: #f4f8ff;
    --color-muted: #9fb1c9;
    --color-muted-2: #74879f;
    --color-border: rgba(130, 162, 204, 0.22);
    --color-border-strong: rgba(130, 162, 204, 0.34);

    --color-success: #36d399;
    --color-success-soft: rgba(54, 211, 153, 0.16);
    --color-danger: #ff6b73;
    --color-danger-soft: rgba(255, 107, 115, 0.16);
    --color-warning: #f5b041;
    --color-warning-soft: rgba(245, 176, 65, 0.16);
    --color-info: #3b8cff;
    --color-info-soft: rgba(59, 140, 255, 0.16);

    --shadow-card: 0 22px 52px rgba(0, 0, 0, 0.46);
    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.36);
    --shadow-raise: 0 30px 66px rgba(0, 0, 0, 0.56);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --gradient-deep: linear-gradient(150deg, #0b2a5b 0%, #103a78 55%, #2f86ff 130%);
    --ring-focus: 0 0 0 3px rgba(59, 140, 255, 0.34);

    --chart-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%237bb6ff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");

    /* Legacy aliases re-derived from the dark palette. */
    --bg: var(--color-bg);
    --bg-soft: var(--color-bg-soft);
    --panel: var(--color-surface);
    --panel-strong: var(--color-surface-elevated);
    --panel-raised: var(--color-surface-elevated);
    --text: var(--color-text);
    --muted: var(--color-muted);
    --muted-2: var(--color-muted-2);
    --line: var(--color-border);
    --line-soft: var(--color-bg-soft);
    --accent: var(--color-primary);
    --accent-strong: var(--color-primary-dark);
    --accent-soft: var(--color-primary-tint);
    --steel: var(--color-muted);
    --silver: #c4d2e6;
    --success: var(--color-success);
    --success-soft: var(--color-success-soft);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-soft);
    --info: var(--color-info);
    --info-soft: var(--color-info-soft);
    --amber: var(--color-warning);
    --shadow: var(--shadow-card);
    --focus-ring: var(--ring-focus);
}

/* ----------------------------------------------------------------------------
   2. Base / typography
   ------------------------------------------------------------------------- */
html,
body {
    background-color: var(--color-bg);
}

body {
    background:
        var(--chart-grid),
        radial-gradient(1200px 620px at 82% -8%, rgba(13, 110, 253, 0.10), transparent 60%),
        radial-gradient(960px 520px at -6% 4%, rgba(47, 134, 255, 0.08), transparent 58%),
        linear-gradient(180deg, #f7fbff 0%, #f1f7ff 48%, #f5f9ff 100%);
    background-attachment: fixed, fixed, fixed, fixed;
    color: var(--color-text);
    font-family: Inter, "Plus Jakarta Sans", Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    color: var(--color-heading);
    letter-spacing: -0.018em;
    line-height: 1.16;
}

p {
    color: var(--color-text);
}

a {
    color: var(--color-primary-dark);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

::selection {
    background: rgba(13, 110, 253, 0.18);
}

/* Soft, modern scrollbars on light surfaces. */
* {
    scrollbar-color: var(--color-border-strong) transparent;
}
*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
*::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: #aac3e6;
    background-clip: padding-box;
}

/* ----------------------------------------------------------------------------
   3. Header / navigation
   ------------------------------------------------------------------------- */
.site-header {
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 30px rgba(16, 42, 91, 0.06);
    backdrop-filter: saturate(180%) blur(14px);
}

.brand {
    color: var(--color-heading);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.brand-logo-wrap {
    width: 42px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff, #eaf2fd);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.brand-mark {
    border: 1px solid transparent;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.28);
}

.nav-link,
.nav-menu-link {
    color: var(--color-muted);
    border-radius: var(--radius-button);
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.nav-link:hover,
.nav-menu-link:hover {
    color: var(--color-heading);
    background: var(--color-primary-soft);
    border-color: transparent;
}

.nav-link.is-active {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    border-color: var(--color-border);
    font-weight: 600;
}

.nav-menu-link.is-active {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    border-color: transparent;
}

.nav-dropdown-menu,
.notification-menu {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}

.notification-menu-item {
    border-radius: 12px;
    color: var(--color-text);
}
.notification-menu-item:hover {
    background: var(--color-surface-muted);
}
.notification-menu-item.is-unread {
    background: var(--color-primary-soft);
}
.notification-menu-item time {
    color: var(--color-muted-2);
}
.notification-empty {
    color: var(--color-muted);
}

.notification-count,
.notification-bell-count {
    background: var(--color-danger);
    color: #fff;
    box-shadow: 0 4px 10px rgba(224, 56, 62, 0.4);
}

.mobile-nav-toggle {
    color: var(--color-heading);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
}
.mobile-nav-toggle:hover {
    background: var(--color-primary-soft);
}

.demo-banner {
    background: linear-gradient(180deg, var(--color-primary-soft), #fff);
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.beta-badge {
    background: var(--gradient-primary);
    color: #fff;
}

/* Mobile nav menu (the collapsed nav panel was dark in the legacy theme) */
@media (max-width: 768px) {
    .nav-links {
        background: transparent;
    }
    .nav-link,
    .nav-button,
    .notification-trigger,
    .nav-menu-link {
        border-color: var(--color-border);
        background: var(--color-surface);
        color: var(--color-text);
        box-shadow: var(--shadow-soft);
    }
    .nav-link.is-active,
    .nav-menu-link.is-active {
        background: var(--color-primary-soft);
        color: var(--color-primary-dark);
        border-color: var(--color-border);
    }
    .nav-dropdown-menu {
        background: var(--color-surface-muted);
        border: 1px solid var(--color-border);
    }
}

/* ----------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */
.button,
button.button,
a.button {
    border-radius: var(--radius-button);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.button-primary {
    background: var(--gradient-primary);
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(13, 110, 253, 0.28);
}
.button-primary:hover {
    background: var(--gradient-primary-hover);
    box-shadow: 0 16px 32px rgba(13, 110, 253, 0.34);
    transform: translateY(-1px);
    color: #fff;
}
.button-primary:active {
    transform: translateY(0);
}

.button-secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
}
.button-secondary:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.button-ghost,
.button-link {
    color: var(--color-primary-dark);
}

button:focus-visible,
.button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* ----------------------------------------------------------------------------
   5. Cards / panels / surfaces
   ------------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}

.panel,
.surface,
.tile,
.widget,
.stat-card,
.metric-card,
.summary-card,
.dash-card,
.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}

/* Light surfaces for user finance & account pages. These containers carried
   bespoke dark backgrounds from earlier theme layers; the live trading
   terminal panels (forex-*, pair-search, terminal-*) are intentionally
   excluded so they keep their dark pro surface. */
.wallet-market-section,
.history-card,
.settings-card,
.kyc-card,
.legal-card,
.module-card,
.narrow-panel,
.not-found-card,
.status-grid > div,
.deposit-card,
.deposit-panel,
.deposit-side-panel,
.deposit-address-card,
.deposit-bank-card,
.deposit-estimate-card,
.deposit-network-card,
.deposit-receipt-card,
.deposit-security-card,
.deposit-modal-card,
.withdraw-panel,
.withdraw-balance-card,
.withdraw-review-card,
.withdraw-security-card,
.withdraw-modal-card,
.transfer-card,
.transfer-direction-card,
.transfer-summary-card,
.transfer-security-card,
.transfer-modal-card,
.payment-card,
.payment-entry-panel,
.payment-visual-panel,
.security-card,
.security-overview-card,
.security-score-card,
.security-warning-card,
.totp-enabled-panel,
.totp-setup-panel,
.support-card,
.support-category-card,
.support-thread-card,
.referral-card,
.referral-code-card,
.referral-stat-card,
.fees-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}
.wallet-card {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.wallet-market-description,
.wallet-action-note {
    color: var(--color-muted);
}
.wallet-asset-code,
.has-positive-balance td:first-child {
    color: var(--color-heading);
}
.wallet-table-value {
    color: var(--color-text);
}
.has-positive-balance td:first-child::after {
    color: var(--color-success);
}

/* Segmented tabs on finance pages */
.deposit-method-tabs,
.payment-method-tabs,
.transfer-tabs,
.wallet-tabs,
.withdraw-tabs {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    box-shadow: none;
}
.deposit-method-tab,
.payment-method-tab {
    color: var(--color-muted);
    border-radius: 9px;
}
.deposit-method-tab.is-active,
.payment-method-tab.is-active {
    background: var(--color-surface);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
    border-color: var(--color-border);
}

/* Step indicators */
.withdraw-stepper span,
.deposit-stepper span,
.transfer-stepper span {
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-muted);
}
.withdraw-stepper span.is-active,
.deposit-stepper span.is-active,
.transfer-stepper span.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Address / QR / instruction placeholders */
.deposit-address-placeholder,
.deposit-qr-placeholder,
.deposit-instructions,
.card-preview,
.withdraw-address-preview,
.transfer-preview {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-surface-muted);
    color: var(--color-muted);
}

/* Finance info cards that follow the label / value / note pattern */
.deposit-security-card span,
.withdraw-security-card span,
.transfer-security-card span,
.transfer-summary-card span,
.withdraw-balance-card span,
.security-overview-card span,
.referral-stat-card span {
    color: var(--color-primary-dark);
}
.deposit-security-card strong,
.withdraw-security-card strong,
.transfer-security-card strong,
.transfer-summary-card strong,
.withdraw-balance-card strong,
.security-overview-card strong,
.referral-stat-card strong {
    color: var(--color-heading);
}
.deposit-security-card small,
.withdraw-security-card small,
.transfer-security-card small,
.transfer-summary-card small,
.withdraw-balance-card small,
.security-overview-card small,
.referral-stat-card small {
    color: var(--color-muted);
}

/* Cell-grid summaries (withdraw / transfer / security) */
.withdraw-summary-grid,
.withdraw-review-grid,
.transfer-summary-grid,
.security-details {
    border: 1px solid var(--color-border);
    background: var(--color-border);
}
.withdraw-summary-grid div,
.withdraw-review-grid div,
.transfer-summary-grid div,
.security-details > div {
    background: var(--color-surface);
}
.withdraw-summary-grid span,
.withdraw-review-grid span,
.transfer-summary-grid span {
    color: var(--color-primary-dark);
}
.withdraw-summary-grid strong,
.withdraw-review-grid strong,
.transfer-summary-grid strong {
    color: var(--color-heading);
}
.deposit-warning-list,
.transfer-warning-list,
.withdraw-warning-list {
    border: 1px solid rgba(217, 131, 9, 0.28);
    background: var(--color-warning-soft);
    color: #80501f;
}

/* Finance status badges */
.deposit-status-badge,
.deposit-payment-badges span,
.withdraw-status-badge,
.payment-status-badge {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* ----------------------------------------------------------------------------
   6. Forms / inputs
   ------------------------------------------------------------------------- */
input,
select,
textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
input::placeholder,
textarea::placeholder {
    color: var(--color-muted-2);
}
input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-primary);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring-focus);
    /* Token (not hard-coded #fff): in light this stays white, in dark it stays a
       readable elevated surface. The literal #fff turned focused/opened selects
       white in dark mode, leaving light option text unreadable. */
    background: var(--color-surface-elevated);
}
label {
    color: var(--color-heading);
}
.form-note,
.field-hint {
    color: var(--color-muted);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

/* ----------------------------------------------------------------------------
   7. Tables
   ------------------------------------------------------------------------- */
.table-wrap,
.table-scroll,
.table-responsive {
    overflow-x: auto;
    border-radius: var(--radius-card);
    -webkit-overflow-scrolling: touch;
}

table {
    color: var(--color-text);
}
th {
    color: var(--color-muted);
}
td {
    color: var(--color-text);
}
thead th,
.table-wrap thead th,
.mini-table-wrap thead th,
.history-table-wrap thead th {
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    backdrop-filter: none;
}
tbody td,
.table-wrap tbody tr,
.mini-table-wrap tbody tr,
.history-table-wrap tbody tr {
    border-bottom: 1px solid var(--color-border);
}
tbody tr {
    transition: background var(--transition-fast);
}
tbody tr:hover {
    background: var(--color-surface-muted);
}

/* ----------------------------------------------------------------------------
   8. Alerts
   ------------------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}
.alert-success {
    background: var(--color-success-soft);
    border-color: rgba(18, 161, 80, 0.35);
    color: #0c6b36;
}
.alert-error,
.alert-danger {
    background: var(--color-danger-soft);
    border-color: rgba(224, 56, 62, 0.32);
    color: #a51f24;
}
.alert-warning,
.alert-warn {
    background: var(--color-warning-soft);
    border-color: rgba(217, 131, 9, 0.32);
    color: #8a5208;
}
.alert-info {
    background: var(--color-info-soft);
    border-color: rgba(13, 110, 253, 0.3);
    color: var(--color-primary-dark);
}

/* ----------------------------------------------------------------------------
   9. Badges / pills
   ------------------------------------------------------------------------- */
.badge,
.pill,
.status-badge,
.tag {
    border-radius: var(--radius-pill);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------------------- */
.site-footer {
    background: linear-gradient(180deg, #fff, #eef5ff);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
}
.footer-summary span:first-child {
    color: var(--color-heading);
    font-weight: 700;
}
.legal-footer-links a {
    color: var(--color-muted);
    transition: color var(--transition-fast);
}
.legal-footer-links a:hover {
    color: var(--color-primary-dark);
}

/* ----------------------------------------------------------------------------
   11. Public landing
   ------------------------------------------------------------------------- */
.eyebrow {
    color: var(--color-primary-dark);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.74rem;
}

.landing-hero {
    position: relative;
    border-radius: 28px;
    margin-top: 18px;
    padding: clamp(28px, 5vw, 64px);
    overflow: hidden;
    background:
        radial-gradient(900px 460px at 88% 0%, rgba(13, 110, 253, 0.14), transparent 62%),
        linear-gradient(160deg, #ffffff 0%, #f1f7ff 60%, #eaf2fd 100%);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}
/* Original CSS/SVG candlestick + line chart motif behind the hero. */
.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
    background:
        var(--chart-grid),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='320' viewBox='0 0 760 320' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230d6efd' stroke-opacity='0.16' stroke-width='2.5'%3E%3Cpath d='M0 250 L90 220 L170 240 L250 180 L330 200 L410 140 L490 165 L570 110 L650 130 L760 70'/%3E%3C/g%3E%3Cg stroke='%230d6efd' stroke-opacity='0.10' stroke-width='2'%3E%3Cline x1='110' y1='190' x2='110' y2='270'/%3E%3Cline x1='210' y1='205' x2='210' y2='285'/%3E%3Cline x1='310' y1='150' x2='310' y2='235'/%3E%3Cline x1='430' y1='120' x2='430' y2='200'/%3E%3Cline x1='540' y1='95' x2='540' y2='180'/%3E%3Cline x1='640' y1='110' x2='640' y2='195'/%3E%3C/g%3E%3Cg fill='%230d6efd' fill-opacity='0.07'%3E%3Crect x='98' y='205' width='24' height='44' rx='3'/%3E%3Crect x='198' y='222' width='24' height='40' rx='3'/%3E%3Crect x='298' y='168' width='24' height='48' rx='3'/%3E%3Crect x='418' y='138' width='24' height='44' rx='3'/%3E%3Crect x='528' y='112' width='24' height='48' rx='3'/%3E%3Crect x='628' y='128' width='24' height='44' rx='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat, no-repeat;
    background-position: 0 0, right bottom;
    background-size: 48px 48px, 70% auto;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
}
.landing-hero > * {
    position: relative;
    z-index: 1;
}
.landing-hero-copy h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}
.landing-hero-copy > p {
    color: var(--color-muted);
    font-size: 1.05rem;
    max-width: 46ch;
}
.landing-hero-panel {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(6px);
}
.landing-hero-panel span {
    color: var(--color-primary-dark);
}
.landing-hero-panel strong {
    color: var(--color-heading);
}
.landing-hero-panel p {
    color: var(--color-muted);
}

.landing-intro {
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-primary-soft), #ffffff);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}
.landing-intro p {
    color: var(--color-muted);
}

.landing-section-heading h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.landing-section-heading > p {
    color: var(--color-muted);
}

.landing-card,
.market-card,
.testimonial-card,
.account-tier-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.landing-card:hover,
.market-card:hover,
.account-tier-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-raise);
    border-color: var(--color-border-strong);
}
.landing-card h3,
.account-tier-card h3 {
    color: var(--color-heading);
}
.landing-card p,
.market-card p,
.testimonial-card p {
    color: var(--color-muted);
}

.market-card span,
.account-tier-card span {
    color: var(--color-primary-dark);
    font-weight: 700;
}
.testimonial-card strong {
    color: var(--color-heading);
}

.landing-pro-cta {
    background: var(--gradient-deep);
    border: 1px solid transparent;
    border-radius: 24px;
    color: #eaf2ff;
    box-shadow: var(--shadow-raise);
}
.landing-pro-cta h2 {
    color: #fff;
}
.landing-pro-cta .eyebrow {
    color: #a9cbff;
}
.landing-pro-cta p {
    color: #cfe0fb;
}
.landing-pro-cta .button-primary {
    background: #fff;
    color: var(--color-primary-dark);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
.landing-pro-cta .button-primary:hover {
    background: #eaf2fd;
    color: var(--color-primary-dark);
}

.landing-contact-form,
.landing-contact-form.card {
    background: var(--color-surface);
}
.landing-form-message {
    border-radius: var(--radius-input);
}

/* ----------------------------------------------------------------------------
   12. Auth panels (login / register)
   ------------------------------------------------------------------------- */
.auth-copy h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.auth-copy p,
.auth-copy .eyebrow + h1 + p {
    color: var(--color-muted);
}
.auth-form.card,
.auth-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.auth-form h2 {
    color: var(--color-heading);
}
.ack-row span {
    color: var(--color-muted);
}

/* ----------------------------------------------------------------------------
   13. Modals / dialogs
   ------------------------------------------------------------------------- */
.modal,
.modal-card,
.modal-panel,
dialog {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raise);
    color: var(--color-text);
}
.modal-backdrop,
.modal-overlay {
    background: rgba(11, 42, 91, 0.42);
    backdrop-filter: blur(2px);
}

/* ----------------------------------------------------------------------------
   14. Risk disclaimer + empty-state helpers (light)
   ------------------------------------------------------------------------- */
.risk-disclaimer,
.disclaimer-card {
    background: var(--color-warning-soft);
    border: 1px solid rgba(217, 131, 9, 0.28);
    border-radius: var(--radius-card);
    color: #80501f;
}
.empty-state {
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    color: var(--color-muted);
}

/* ----------------------------------------------------------------------------
   14b. User dashboard
   ------------------------------------------------------------------------- */
.equity-tile {
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    background: var(--gradient-deep);
    box-shadow: var(--shadow-raise);
    color: #eaf2ff;
}
.equity-tile span {
    color: #a9cbff;
}
.equity-tile strong {
    color: #ffffff;
}
.equity-tile small {
    color: #cfe0fb;
}

.metric-card strong {
    color: var(--color-heading);
}
.metric-card span,
.equity-tile span {
    color: inherit;
}
.metric-card span {
    color: var(--color-primary-dark);
}
.metric-card small {
    color: var(--color-muted);
}

.section-heading h2 {
    color: var(--color-heading);
}

.notice-strip {
    border: 1px solid rgba(217, 131, 9, 0.3);
    border-radius: var(--radius-card);
    background: var(--color-warning-soft);
    color: #8a5208;
}
.notice-strip strong {
    color: #6f4208;
}

.notification-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}
.notification-item.is-unread {
    border-color: rgba(13, 110, 253, 0.32);
    background: var(--color-primary-soft);
}
.notification-item h3 {
    color: var(--color-heading);
}
.notification-item p {
    color: var(--color-muted);
}
.notification-item time {
    color: var(--color-muted-2);
}
.notification-badge {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-radius: var(--radius-pill);
}

.empty-state h3 {
    color: var(--color-heading);
}
.empty-state p {
    color: var(--color-muted);
}

/* Page banners that were hardcoded dark */
.kyc-hero,
.security-hero,
.support-hero,
.referral-hero,
.history-hero,
.settings-hero,
.payment-hero {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--color-primary-soft), #ffffff 70%);
    box-shadow: var(--shadow-soft);
}
.kyc-hero h1,
.security-hero h1,
.support-hero h1,
.referral-hero h1,
.history-hero h1,
.settings-hero h1,
.payment-hero h1 {
    color: var(--color-heading);
}
.kyc-hero p,
.security-hero p,
.support-hero p,
.referral-hero p,
.history-hero p,
.settings-hero p,
.payment-hero p {
    color: var(--color-muted);
}

/* History page tabs / filters */
.history-tabs {
    background: var(--color-surface-muted);
    border-radius: var(--radius-button);
    border-bottom-color: var(--color-border);
}
.history-status-row {
    background: transparent;
}
.history-tab,
.history-tabs a {
    color: var(--color-muted);
}
.history-tab:hover,
.history-tab.is-active,
.history-tabs a:hover,
.history-tabs a.is-active {
    border-color: var(--color-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.history-filters {
    background: transparent;
}
.history-filters select,
.history-filters input {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
}
.history-section-pill {
    border: 1px solid var(--color-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Fees page */
.fees-table th {
    color: var(--color-muted);
}
.fees-table td {
    color: var(--color-text);
}
.fees-method-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface-muted);
}
.fees-method-row strong {
    color: var(--color-heading);
}
.fees-method-row span,
.fees-muted {
    color: var(--color-muted);
}
.referral-code-display {
    border: 1px solid var(--color-border-strong);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Status pills (KYC/account states) */
.status-pill {
    border-radius: var(--radius-pill);
    font-weight: 700;
}
.status-pill.status-approved,
.status-pill.status-active {
    background: var(--color-success-soft);
    color: #0c6b36;
    border: 1px solid rgba(18, 161, 80, 0.32);
}
.status-pill.status-pending,
.status-pill.status-not_submitted,
.status-pill.status-submitted {
    background: var(--color-warning-soft);
    color: #8a5208;
    border: 1px solid rgba(217, 131, 9, 0.3);
}
.status-pill.status-rejected {
    background: var(--color-danger-soft);
    color: #a51f24;
    border: 1px solid rgba(224, 56, 62, 0.3);
}

/* ----------------------------------------------------------------------------
   14b. Finance / info page polish pass — closes the theming gaps the earlier
   pass left on history.php / fees.php / wallet/deposit.php so they match the
   referral-page quality bar. Rules are token-driven (one declaration adapts to
   BOTH themes); the handful of light-only fixes are scoped to
   [data-theme="light"] so the already-correct dark base is left untouched.
   ------------------------------------------------------------------------- */

/* fees.php — the bold note title was hard-coded #fff (invisible on the light
   card) and the FAQ summary/answer kept the legacy dark-purple colours, so the
   FAQ questions disappeared in the light theme. */
.fees-note strong {
    color: var(--color-heading);
}
.fees-faq-grid summary {
    color: var(--color-heading);
}
.fees-faq-grid p {
    color: var(--color-muted);
}
.fees-faq-grid details {
    border-bottom-color: var(--color-border);
}
/* fees.php — manual-review explanation block above the deposit/withdrawal
   method list. Token-driven so it stays readable in both themes; the safety
   line is emphasised with the heading colour. */
.fees-manual-note {
    display: grid;
    gap: 8px;
    margin: 14px 22px 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}
.fees-manual-note p {
    margin: 0;
    color: var(--color-muted);
}
.fees-manual-note .fees-manual-safety {
    color: var(--color-heading);
    font-weight: 600;
}

/* wallet/deposit.php — the side-panel FAQ rendered as a hard-coded dark box in
   the light theme; the estimate value and the payment eyebrow used leftover
   blue/violet accents with no contrast on a light surface. */
.deposit-faq details {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
}
.deposit-faq summary {
    color: var(--color-heading);
}
.deposit-faq p {
    color: var(--color-muted);
}
.deposit-estimate-card strong {
    color: var(--color-heading);
}
.deposit-payment-intro span {
    color: var(--color-primary-dark);
}
[data-theme="light"] .deposit-qr-grid {
    border-color: var(--color-border-strong);
    background:
        linear-gradient(90deg, rgba(13, 110, 253, 0.12) 12px, transparent 12px 24px) 0 0 / 24px 24px,
        linear-gradient(rgba(13, 110, 253, 0.09) 12px, transparent 12px 24px) 0 0 / 24px 24px,
        var(--color-surface-muted);
}

/* Empty-state cells inside data tables kept the dark-theme muted purple. */
.empty-cell,
.history-table td[colspan],
.terminal-table td[colspan] {
    color: var(--color-muted);
}

/* Generic status pills (status-success / -warning / -error / -neutral) were
   only themed for their KYC-specific variants; the generic classes used by
   fees / history / referral kept light-on-light text in the light theme. The
   fix is scoped to light so the (working) dark pills are left exactly as-is. */
[data-theme="light"] .status-pill.status-success {
    background: var(--color-success-soft);
    color: #0c6b36;
    border: 1px solid rgba(18, 161, 80, 0.32);
}
[data-theme="light"] .status-pill.status-warning {
    background: var(--color-warning-soft);
    color: #8a5208;
    border: 1px solid rgba(217, 131, 9, 0.30);
}
[data-theme="light"] .status-pill.status-error {
    background: var(--color-danger-soft);
    color: #a51f24;
    border: 1px solid rgba(224, 56, 62, 0.30);
}
[data-theme="light"] .status-pill.status-neutral {
    background: var(--color-info-soft);
    color: var(--color-primary-dark);
    border: 1px solid rgba(13, 110, 253, 0.22);
}

/* history.php — the legacy 820px breakpoint dropped the summary cards and the
   filter row straight from the desktop multi-column grid to a single column,
   which left big sparse gaps on tablets. Add a balanced tablet step between the
   desktop grid and the mobile single column. (Loads last, so it wins over the
   styles.css 820px rule for this range; below 600px the single column stands.) */
@media (min-width: 600px) and (max-width: 820px) {
    .history-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .history-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------------------------
   15. Live trading terminals (Spot / Futures / Forex) — both themes.
   A dedicated --terminal-* token layer drives every Spot / Futures / Forex
   surface so the two palettes stay internally consistent. terminal.css is
   hand-rolled (a navy "logo-matched" dark base with leftover indigo/teal
   accents); these token-driven rules are scoped under .terminal-wide (higher
   specificity, and theme.css loads last) so they win in BOTH themes and adapt
   purely through the tokens. Buy/Sell and positive/negative stay green/red.
   ------------------------------------------------------------------------- */
[data-theme="light"] .terminal-wide,
[data-theme="light"] .page-shell:has(.terminal-wide) {
    --terminal-bg: #f6faff;
    --terminal-surface: #ffffff;
    --terminal-surface-elevated: #ffffff;
    --terminal-surface-soft: #eef6ff;
    --terminal-toolbar: #f1f7ff;
    --terminal-text: #102033;
    --terminal-muted: #5b6b82;
    --terminal-border: #d9e6f5;
    --terminal-border-strong: #c4d6ee;
    --terminal-grid: #dcebfa;
    --terminal-chart-bg: #ffffff;
    --terminal-chart-grid: #dcebfa;
    --terminal-accent: #0d6efd;
    --terminal-accent-strong: #0b5ed7;
    --terminal-accent-soft: rgba(13, 110, 253, 0.10);
    --terminal-buy: #16a34a;
    --terminal-buy-strong: #15803d;
    --terminal-buy-soft: rgba(22, 163, 74, 0.12);
    --terminal-sell: #dc2626;
    --terminal-sell-strong: #b91c1c;
    --terminal-sell-soft: rgba(220, 38, 38, 0.10);
    --terminal-warning: #b86a00;
    --terminal-warning-soft: rgba(217, 131, 9, 0.13);
    --terminal-danger: #dc2626;
    --terminal-shadow: 0 16px 40px rgba(16, 42, 91, 0.10);
}
[data-theme="dark"] .terminal-wide,
[data-theme="dark"] .page-shell:has(.terminal-wide) {
    --terminal-bg: #07111f;
    --terminal-surface: #0f1a2e;
    --terminal-surface-elevated: #13233a;
    --terminal-surface-soft: #16243c;
    --terminal-toolbar: #0c1626;
    --terminal-text: #e7eefb;
    --terminal-muted: #94a3b8;
    --terminal-border: rgba(130, 162, 204, 0.22);
    --terminal-border-strong: rgba(130, 162, 204, 0.34);
    --terminal-grid: #1e3350;
    --terminal-chart-bg: #08111f;
    --terminal-chart-grid: #1e3350;
    --terminal-accent: #3b8cff;
    --terminal-accent-strong: #7bb6ff;
    --terminal-accent-soft: rgba(59, 140, 255, 0.16);
    --terminal-buy: #22c55e;
    --terminal-buy-strong: #4ade80;
    --terminal-buy-soft: rgba(34, 197, 94, 0.16);
    --terminal-sell: #ef4444;
    --terminal-sell-strong: #f87171;
    --terminal-sell-soft: rgba(239, 68, 68, 0.16);
    --terminal-warning: #f5b041;
    --terminal-warning-soft: rgba(245, 176, 65, 0.16);
    --terminal-danger: #ef4444;
    --terminal-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
}

/* Re-map the legacy tokens the hand-rolled terminal CSS still consumes so any
   token-driven rule there follows the same palette as the new tokens. */
.terminal-wide,
.page-shell:has(.terminal-wide) {
    --bg: var(--terminal-bg);
    --bg-soft: var(--terminal-surface-soft);
    --panel: var(--terminal-surface);
    --panel-strong: var(--terminal-surface-elevated);
    --panel-raised: var(--terminal-surface-elevated);
    --text: var(--terminal-text);
    --muted: var(--terminal-muted);
    --line: var(--terminal-border);
    --accent: var(--terminal-accent);
    --accent-strong: var(--terminal-accent-strong);
    --accent-soft: var(--terminal-accent-soft);
    --success: var(--terminal-buy);
    --danger: var(--terminal-sell);
    --color-surface: var(--terminal-surface);
    --color-surface-muted: var(--terminal-surface-soft);
    --color-text: var(--terminal-text);
    --color-muted: var(--terminal-muted);
    --color-border: var(--terminal-border);
    --color-border-strong: var(--terminal-border-strong);
}

/* Page background behind the terminal. */
[data-theme="light"] body:has(.terminal-wide) {
    background:
        radial-gradient(900px 480px at 84% -10%, rgba(13, 110, 253, 0.06), transparent 60%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
    background-attachment: fixed;
}
[data-theme="dark"] body:has(.terminal-wide) {
    background:
        radial-gradient(900px 480px at 84% -10%, rgba(59, 140, 255, 0.14), transparent 60%),
        linear-gradient(180deg, #08111f 0%, #060c16 48%, #07101d 100%);
    background-attachment: fixed;
}

.terminal-wide {
    color: var(--terminal-text);
}

/* ---- Surfaces: panels, headers, popovers, cards ---- */
.terminal-wide .terminal-market-header,
.terminal-wide .terminal-panel,
.terminal-wide .chart-panel,
.terminal-wide .order-form-panel,
.terminal-wide .depth-panel,
.terminal-wide .bottom-panel {
    background: var(--terminal-surface);
    border-color: var(--terminal-border);
    color: var(--terminal-text);
    box-shadow: var(--terminal-shadow);
}
.terminal-wide .pair-search-panel,
.terminal-wide .chart-menu-panel,
.terminal-wide .ohlc-tooltip,
.terminal-wide .chart-floating-tooltip,
.terminal-wide .terminal-toast {
    background: var(--terminal-surface-elevated);
    border-color: var(--terminal-border);
    color: var(--terminal-text);
    box-shadow: var(--terminal-shadow);
}
.terminal-wide .chart-menu-panel strong,
.terminal-wide .ohlc-tooltip strong,
.terminal-wide .chart-floating-tooltip strong {
    color: var(--terminal-text);
}

/* Toolbars / strips that sit on a panel get a soft elevated tint. */
.terminal-wide .panel-topbar,
.terminal-wide .chart-control-row,
.terminal-wide .chart-bottom-row,
.terminal-wide .book-view-row,
.terminal-wide .book-header,
.terminal-wide .book-ratio-footer {
    background: var(--terminal-surface-soft);
    border-color: var(--terminal-border);
    border-bottom-color: var(--terminal-border);
}
.terminal-wide .left-toolbar {
    background: var(--terminal-surface-soft);
    border-right-color: var(--terminal-border);
}
.terminal-wide .chart-type-row {
    border-left-color: var(--terminal-border);
}

/* Soft-tinted info blocks. */
.terminal-wide .ticker-strip > div,
.terminal-wide .overview-grid > div,
.terminal-wide .analysis-placeholder,
.terminal-wide .estimate-box,
.terminal-wide .tpsl-fields,
.terminal-wide .forex-rate-detail div {
    background: var(--terminal-surface-soft);
    border-color: var(--terminal-border);
}

/* Chart-area background (CSS layer beneath the JS canvas paint). */
.terminal-wide .chart-workspace,
.terminal-wide .terminal-chart-canvas,
.terminal-wide .depth-chart-canvas,
.terminal-wide .depth-mini-canvas {
    background: var(--terminal-chart-bg);
}
.terminal-wide .chart-panel.is-fullscreen {
    background: var(--terminal-surface);
}

/* ---- Text: labels, muted, values ---- */
.terminal-wide .terminal-label,
.terminal-wide .terminal-muted,
.terminal-wide .terminal-note,
.terminal-wide .form-row span,
.terminal-wide .check-row span,
.terminal-wide .estimate-box span,
.terminal-wide .chart-menu-panel label,
.terminal-wide .book-header,
.terminal-wide .book-ratio-footer,
.terminal-wide .chart-status,
.terminal-wide .form-hint,
.terminal-wide .wallet-action-note,
.terminal-wide .forex-rate-detail span,
.terminal-wide .forex-pair-button small {
    color: var(--terminal-muted);
}
.terminal-wide .ticker-strip > div,
.terminal-wide .spread-line,
.terminal-wide .overview-grid strong,
.terminal-wide .estimate-box strong,
.terminal-wide .market-pair-block,
.terminal-wide .terminal-table td,
.terminal-wide .forex-rate-detail strong {
    color: var(--terminal-text);
}
.terminal-wide .ticker-main strong {
    color: var(--terminal-accent-strong);
}
.terminal-wide .terminal-safety-line {
    background: var(--terminal-warning-soft);
    border-color: var(--terminal-border);
    color: var(--terminal-text);
}

/* ---- Inputs / selects / pair picker ---- */
.terminal-wide .terminal-select,
.terminal-wide .compact-select,
.terminal-wide .spot-order-form input,
.terminal-wide .spot-order-form select,
.terminal-wide .chart-menu-panel select,
.terminal-wide .pair-search-input,
.terminal-wide .pair-search-current {
    background: var(--terminal-surface);
    border-color: var(--terminal-border-strong);
    color: var(--terminal-text);
}
.terminal-wide .pair-search-current small {
    color: var(--terminal-muted);
}
.terminal-wide .terminal-select:hover,
.terminal-wide .spot-order-form input:hover,
.terminal-wide .spot-order-form select:hover,
.terminal-wide .pair-search-current:hover,
.terminal-wide .pair-search-current[aria-expanded="true"] {
    border-color: var(--terminal-accent);
}
.terminal-wide .terminal-select:focus,
.terminal-wide .spot-order-form input:focus,
.terminal-wide .spot-order-form select:focus,
.terminal-wide .pair-search-input:focus {
    border-color: var(--terminal-accent);
    box-shadow: 0 0 0 3px var(--terminal-accent-soft);
    outline: none;
}
.terminal-wide .chart-menu-panel input[type="checkbox"],
.terminal-wide .spot-order-form input[type="checkbox"] {
    accent-color: var(--terminal-accent);
}
.terminal-wide .pair-search-option {
    color: var(--terminal-text);
}
.terminal-wide .pair-search-option small,
.terminal-wide .pair-search-empty {
    color: var(--terminal-muted);
}
.terminal-wide .pair-search-current b,
.terminal-wide .pair-search-option b {
    background: var(--terminal-accent-soft);
    border-color: var(--terminal-accent);
    color: var(--terminal-accent-strong);
}

/* ---- Tables ---- */
.terminal-wide .terminal-table th,
.terminal-wide .orderbook-table th,
.terminal-wide .futures-table th,
.terminal-wide .mini-table-wrap th {
    color: var(--terminal-muted);
    background: var(--terminal-surface-soft);
    border-bottom-color: var(--terminal-border);
}
.terminal-wide .terminal-table td,
.terminal-wide .orderbook-table td,
.terminal-wide .futures-table td,
.terminal-wide .mini-table-wrap td {
    color: var(--terminal-text);
    border-bottom-color: var(--terminal-border);
}
.terminal-wide .terminal-table tbody tr:hover,
.terminal-wide .book-row:hover,
.terminal-wide .trade-row:hover,
.terminal-wide .feed-item:hover,
.terminal-wide .pair-search-option:hover,
.terminal-wide .pair-search-option.is-active {
    background: var(--terminal-accent-soft);
}
.terminal-wide .book-row.is-placeholder,
.terminal-wide .trade-row.is-placeholder {
    color: var(--terminal-muted);
    opacity: 0.5;
}

/* ---- Tabs / segmented controls / tool buttons (inactive) ---- */
.terminal-wide .terminal-tab,
.terminal-wide .timeframe-button,
.terminal-wide .chip,
.terminal-wide .range-button,
.terminal-wide .tool-button,
.terminal-wide .book-view-button,
.terminal-wide .order-type-button,
.terminal-wide .percent-button,
.terminal-wide .icon-button,
.terminal-wide .side-button,
.terminal-wide .chart-reset-button,
.terminal-wide .mini-action-button,
.terminal-wide .chart-menu summary,
.terminal-wide .terminal-mobile-tab {
    background: var(--terminal-surface-soft);
    border-color: var(--terminal-border);
    color: var(--terminal-muted);
}
.terminal-wide .terminal-tab:hover,
.terminal-wide .timeframe-button:hover,
.terminal-wide .chip:hover,
.terminal-wide .range-button:hover,
.terminal-wide .tool-button:hover,
.terminal-wide .book-view-button:hover,
.terminal-wide .order-type-button:hover,
.terminal-wide .percent-button:hover,
.terminal-wide .icon-button:hover,
.terminal-wide .side-button:hover,
.terminal-wide .chart-reset-button:hover,
.terminal-wide .chart-menu summary:hover {
    background: var(--terminal-accent-soft);
    border-color: var(--terminal-accent);
    color: var(--terminal-text);
}
.terminal-wide .terminal-tab.is-active,
.terminal-wide .timeframe-button.is-active,
.terminal-wide .chip.is-active,
.terminal-wide .range-button.is-active,
.terminal-wide .tool-button.is-active,
.terminal-wide .book-view-button.is-active,
.terminal-wide .order-type-button.is-active,
.terminal-wide .terminal-mobile-tab.is-active,
.terminal-wide .compact-segmented .side-button.is-active {
    background: var(--terminal-accent-soft);
    border-color: var(--terminal-accent);
    color: var(--terminal-accent-strong) !important;
}
.terminal-wide .terminal-mobile-tabs {
    background: var(--terminal-surface);
    border-color: var(--terminal-border);
}

/* ---- Pills ---- */
.terminal-wide .source-pill,
.terminal-wide .live-status-pill,
.terminal-wide .utc-clock,
.terminal-wide .forex-count-pill,
.terminal-wide .status-pill {
    background: var(--terminal-accent-soft);
    border-color: var(--terminal-border);
    color: var(--terminal-accent-strong);
}
.terminal-wide .demo-pill {
    background: var(--terminal-accent);
    border-color: var(--terminal-accent);
    color: #ffffff;
}

/* ---- Buy / Sell / positive / negative (green / red in both themes) ---- */
.terminal-wide .price-up,
.terminal-wide .is-positive,
.terminal-wide .bid,
.terminal-wide .buy,
.terminal-wide .ohlc-tooltip .is-positive,
.terminal-wide .chart-floating-tooltip .is-positive {
    color: var(--terminal-buy-strong) !important;
}
.terminal-wide .price-down,
.terminal-wide .is-negative,
.terminal-wide .ask,
.terminal-wide .sell,
.terminal-wide .ohlc-tooltip .is-negative,
.terminal-wide .chart-floating-tooltip .is-negative {
    color: var(--terminal-sell-strong) !important;
}
.terminal-wide .side-button.buy.is-active {
    background: var(--terminal-buy-soft);
    border-color: var(--terminal-buy);
    color: var(--terminal-buy-strong) !important;
}
.terminal-wide .side-button.sell.is-active {
    background: var(--terminal-sell-soft);
    border-color: var(--terminal-sell);
    color: var(--terminal-sell-strong) !important;
}
.terminal-wide .submit-order-button.buy,
.terminal-wide .submit-order-button.buy:hover,
.terminal-wide .submit-order-button.buy:focus,
.terminal-wide .submit-order-button.buy:disabled {
    background: var(--terminal-buy);
    border-color: var(--terminal-buy);
    color: #ffffff !important;
    text-shadow: none;
}
.terminal-wide .submit-order-button.sell,
.terminal-wide .submit-order-button.sell:hover,
.terminal-wide .submit-order-button.sell:focus,
.terminal-wide .submit-order-button.sell:disabled {
    background: var(--terminal-sell);
    border-color: var(--terminal-sell);
    color: #ffffff !important;
    text-shadow: none;
}
.terminal-wide .mini-action-button,
.terminal-wide .terminal-toast.error {
    background: var(--terminal-sell-soft);
    border-color: var(--terminal-sell);
    color: var(--terminal-sell-strong);
}

/* ---- Forex market watch ---- */
.terminal-wide .forex-pair-button {
    background: var(--terminal-surface-soft);
    border-color: var(--terminal-border);
    color: var(--terminal-text);
}
.terminal-wide .forex-pair-button:hover,
.terminal-wide .forex-pair-button.is-active {
    background: var(--terminal-accent-soft);
    border-color: var(--terminal-accent);
    color: var(--terminal-text);
}
.terminal-wide .forex-pair-button strong,
.terminal-wide .forex-terminal-rate strong {
    color: var(--terminal-text);
}
.terminal-wide .forex-side-badge.buy {
    background: var(--terminal-buy-soft);
    color: var(--terminal-buy-strong);
}
.terminal-wide .forex-side-badge.sell {
    background: var(--terminal-sell-soft);
    color: var(--terminal-sell-strong);
}

/* ---- Empty states ---- */
.terminal-wide .empty-state {
    background: var(--terminal-surface-soft);
    border-color: var(--terminal-border);
    color: var(--terminal-text);
}

/* ---- KYC / authority modal (injected near the page root, themed globally) ---- */
.kyc-modal-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.kyc-modal-card h2 {
    color: var(--color-heading);
}
.kyc-modal-card p {
    color: var(--color-muted);
}
[data-theme="light"] .kyc-modal-backdrop {
    background: rgba(11, 42, 91, 0.42);
}

/* ==========================================================================
   16. Admin back-office — refined dark-navy sidebar + light content
   ========================================================================== */
.admin-body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* --- Sidebar (kept dark for a premium back-office feel) --- */
.admin-sidebar {
    background: linear-gradient(180deg, #0c2a57 0%, #0a2350 58%, #0b1f44 100%);
    border-right: 1px solid rgba(150, 180, 220, 0.16);
    box-shadow: 14px 0 40px rgba(11, 31, 68, 0.10);
}
.admin-brand {
    color: #f1f6ff;
}
.admin-brand small {
    color: #9db4d8;
}
.admin-brand-mark {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
}
.admin-nav-link {
    color: #c4d6ef;
    border-radius: 10px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}
.admin-nav-link.is-active {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.34);
}
.admin-logout button {
    border-radius: var(--radius-button);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #dfeaff;
    transition: background var(--transition-fast);
}
.admin-logout button:hover {
    background: rgba(255, 255, 255, 0.14);
}
.admin-mobile-toggle {
    border-radius: var(--radius-button);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #eaf2ff;
}

/* --- Topbar / content --- */
.admin-main {
    background: transparent;
}
.admin-topbar {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 26px rgba(16, 42, 91, 0.05);
    backdrop-filter: saturate(160%) blur(10px);
}
.admin-topbar h1 {
    color: var(--color-heading);
}
.admin-kicker,
.admin-topbar .admin-kicker {
    color: var(--color-primary-dark);
}
.admin-user-pill {
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-primary-dark);
}
.admin-user-pill strong {
    color: var(--color-heading);
}
.admin-content {
    background: transparent;
    color: var(--color-text);
}
.admin-demo-banner {
    background: linear-gradient(180deg, var(--color-primary-soft), #fff);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
}

/* --- Cards / panels --- */
.admin-card,
.admin-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}
.admin-card span {
    color: var(--color-primary-dark);
}
.admin-card strong {
    color: var(--color-heading);
}
.admin-panel-head h2 {
    color: var(--color-heading);
}
.admin-panel-head span {
    color: var(--color-muted);
}
.admin-muted,
.admin-note,
.admin-inline-note {
    color: var(--color-muted);
}
.admin-check-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-muted);
}
.admin-check-row small {
    color: var(--color-muted);
}
.admin-check-row strong {
    color: var(--color-heading);
}
.admin-check-row input {
    accent-color: var(--color-primary);
}

/* Roles / RBAC permission editor */
.permission-search {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    color: var(--color-text);
}
.permission-search:focus {
    border-color: var(--color-primary);
    box-shadow: var(--ring-focus);
    outline: none;
}
.permission-category {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}
.permission-category legend {
    color: var(--color-heading);
}
.permission-option,
.permission-override-option,
.permission-chip {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface-muted);
}
.permission-option strong {
    color: var(--color-heading);
}
.permission-option small,
.permission-option em,
.permission-chip small {
    color: var(--color-muted);
}
.permission-option input,
.permission-override-option input {
    accent-color: var(--color-primary);
}

/* --- Filters / inputs --- */
.admin-filters {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}
.admin-filters input,
.admin-filters select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-inline-editor input,
.admin-inline-editor textarea,
.admin-inline-form input,
.table-input {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    color: var(--color-text);
}
.admin-filters input:focus,
.admin-filters select:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus,
.admin-inline-editor input:focus,
.admin-inline-editor textarea:focus,
.table-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--ring-focus);
    outline: none;
}
.admin-form label {
    color: var(--color-heading);
}

/* --- Tables --- */
.table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}
.admin-table {
    color: var(--color-text);
}
.admin-table th {
    background: var(--color-surface-muted);
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.admin-table td {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.admin-table tbody tr:hover {
    background: var(--color-surface-muted);
}

/* --- Buttons (admin uses .btn) --- */
.btn {
    border-radius: var(--radius-button);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        background var(--transition-fast), border-color var(--transition-fast);
    font-weight: 600;
}
.btn-primary {
    background: var(--gradient-primary);
    border: 1px solid transparent;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.26);
}
.btn-primary:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-1px);
    color: #ffffff;
}
.btn-secondary,
.btn-ghost,
.btn-outline {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-primary-dark);
}
.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}
.btn-danger {
    background: var(--color-danger);
    border: 1px solid transparent;
    color: #ffffff;
}
.table-action {
    color: var(--color-primary-dark);
    border-radius: 9px;
}
.table-action:hover {
    background: var(--color-primary-soft);
}
.table-action.danger {
    color: var(--color-danger);
}
.table-action.danger:hover {
    background: var(--color-danger-soft);
}

/* --- Badges --- */
.admin-badge {
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-weight: 600;
}
.admin-badge.is-good {
    background: var(--color-success-soft);
    border-color: rgba(18, 161, 80, 0.3);
    color: #0c6b36;
}
.admin-badge.is-danger {
    background: var(--color-danger-soft);
    border-color: rgba(224, 56, 62, 0.3);
    color: #a51f24;
}
.admin-badge.is-warn {
    background: var(--color-warning-soft);
    border-color: rgba(217, 131, 9, 0.3);
    color: #8a5208;
}

/* --- Footer --- */
.admin-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
}
.admin-footer a {
    color: var(--color-muted);
}
.admin-footer a:hover {
    color: var(--color-primary-dark);
}

/* --- Admin login page --- */
.admin-login-page {
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(13, 110, 253, 0.12), transparent 60%),
        linear-gradient(160deg, #f7fbff 0%, #eaf2fd 100%);
    color: var(--color-text);
}
.admin-login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raise);
    color: var(--color-text);
}
.admin-login-brand h1 {
    color: var(--color-heading);
}
.admin-login-brand p {
    color: var(--color-muted);
}

/* ==========================================================================
   17. Dark-mode component overrides
   Tokens flip most components automatically; these rules cover the surfaces
   and text colours that were hard-coded light and must adapt for dark mode.
   Brand surfaces that are always blue/navy (primary buttons, .equity-tile,
   .landing-pro-cta, the admin sidebar) intentionally render the same in both.
   ========================================================================== */
[data-theme="dark"] body {
    background:
        var(--chart-grid),
        radial-gradient(1200px 620px at 82% -8%, rgba(59, 140, 255, 0.12), transparent 60%),
        radial-gradient(960px 520px at -6% 4%, rgba(59, 140, 255, 0.08), transparent 58%),
        linear-gradient(180deg, #091226 0%, #070d18 48%, #0a1224 100%);
    background-attachment: fixed, fixed, fixed, fixed;
}

[data-theme="dark"] .site-header {
    background: rgba(9, 16, 30, 0.82);
    border-bottom-color: var(--color-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42);
}
[data-theme="dark"] .brand-logo-wrap {
    background: linear-gradient(135deg, #142339, #0f1a2e);
}
[data-theme="dark"] .demo-banner,
[data-theme="dark"] .admin-demo-banner {
    background: linear-gradient(180deg, var(--color-primary-soft), transparent);
}

[data-theme="dark"] .site-footer {
    background: linear-gradient(180deg, #0b1424, #070d18);
}

/* Alerts / status / badge text on (now dark) soft backgrounds */
[data-theme="dark"] .alert-success,
[data-theme="dark"] .status-pill.status-approved,
[data-theme="dark"] .status-pill.status-active,
[data-theme="dark"] .admin-badge.is-good {
    color: #6ee7a8;
}
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .status-pill.status-rejected,
[data-theme="dark"] .admin-badge.is-danger {
    color: #ff9ba0;
}
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-warn,
[data-theme="dark"] .status-pill.status-pending,
[data-theme="dark"] .status-pill.status-not_submitted,
[data-theme="dark"] .status-pill.status-submitted,
[data-theme="dark"] .admin-badge.is-warn,
[data-theme="dark"] .notice-strip,
[data-theme="dark"] .risk-disclaimer,
[data-theme="dark"] .disclaimer-card {
    color: #f3cd8c;
}
[data-theme="dark"] .alert-info {
    color: var(--color-primary-dark);
}
[data-theme="dark"] .notice-strip strong {
    color: #f7dcab;
}

/* Landing */
[data-theme="dark"] .landing-hero {
    background:
        radial-gradient(900px 460px at 88% 0%, rgba(59, 140, 255, 0.18), transparent 62%),
        linear-gradient(160deg, #0f1a2e 0%, #0b1424 60%, #0a1322 100%);
}
[data-theme="dark"] .landing-hero-panel {
    background: rgba(15, 26, 46, 0.74);
}
[data-theme="dark"] .landing-intro,
[data-theme="dark"] .kyc-hero,
[data-theme="dark"] .security-hero,
[data-theme="dark"] .support-hero,
[data-theme="dark"] .referral-hero,
[data-theme="dark"] .history-hero,
[data-theme="dark"] .settings-hero,
[data-theme="dark"] .payment-hero {
    background: linear-gradient(135deg, var(--color-primary-soft), transparent 70%);
}

/* Admin */
[data-theme="dark"] .admin-topbar {
    background: rgba(11, 20, 36, 0.82);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .admin-login-page {
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(59, 140, 255, 0.16), transparent 60%),
        linear-gradient(160deg, #091226 0%, #070d18 100%);
}

/* ==========================================================================
   18. Theme toggle button + placement
   ========================================================================== */
.nav-utility {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
        color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.theme-toggle:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}
.theme-toggle .theme-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-normal);
}
.theme-toggle:hover .theme-icon {
    transform: rotate(18deg);
}
.theme-toggle .theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Light mode shows the moon (tap to go dark); dark mode shows the sun. */
.theme-toggle .icon-sun {
    display: none;
}
.theme-toggle .icon-moon {
    display: block;
}
[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* ==========================================================================
   18b. Public language selector (logged-out). Theme-aware in light + dark.
   ========================================================================== */
.lang-dropdown {
    position: relative;
}
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-fast), border-color var(--transition-fast),
        color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.lang-trigger::-webkit-details-marker {
    display: none;
}
.lang-trigger:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.lang-dropdown[open] > .lang-trigger {
    border-color: var(--color-primary);
    color: var(--color-text);
}
.lang-trigger:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}
.lang-trigger .lang-globe {
    width: 18px;
    height: 18px;
}
.lang-trigger .lang-current {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.lang-trigger::after {
    opacity: 0.6;
}
.lang-dropdown .lang-menu {
    right: 0;
    left: auto;
    min-width: 184px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-elevated);
    box-shadow: 0 18px 48px rgba(8, 18, 38, 0.18);
}
[data-theme="dark"] .lang-dropdown .lang-menu {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.lang-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--color-muted);
    font-weight: 600;
    white-space: nowrap;
}
.lang-option:hover {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text);
}
.lang-option.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.lang-option .lang-option-short {
    min-width: 26px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-primary-dark);
}
.lang-option .lang-option-name {
    font-weight: 600;
}

/* Logged-in settings language card select. */
.settings-language-form .form-grid {
    align-items: end;
}

.admin-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.admin-login-brand {
    position: relative;
}
.theme-toggle-corner {
    margin-left: auto;
}

@media (max-width: 768px) {
    .nav-utility {
        margin-left: 0;
        justify-self: end;
    }
}

/* ============================================================================
   18. Site-wide visual softening pass — rounder, softer, more breathing room.
   Token-driven so both themes follow the same shapes; no layout/logic change.
   (The radius tokens themselves were bumped in section 1: card 18→22,
   button/input 12→14, sm 10→12.)
   ========================================================================== */

/* 18a. Mobile side gutters were as tight as 8–9px, so cards felt clipped
   against the screen edge. Restore a comfortable ~16px gutter from tablet down
   (matching the desktop inset) across every page shell. Loads last, so it wins
   over the legacy 24px / 18px / 16px width rules in styles.css. */
@media (max-width: 900px) {
    .page-shell,
    .notification-center,
    .settings-shell,
    .kyc-shell {
        width: min(1180px, calc(100% - 32px));
    }
}

/* 18b. Inner-table framing: the header strip inside a card kept square top
   corners, which read as a hard edge against the rounded card. Round the outer
   top corners of the first/last header cell so the inset table reads as a soft,
   intentionally framed block. Cell radii only render under border-collapse:
   separate; these content tables only ever set a row border-bottom (verified),
   so separate + zero spacing is visually identical apart from the rounding.
   Scoped to .page-shell so admin tables and the live trading terminals keep
   their own collapsed tables untouched. */
.page-shell .table-wrap > table {
    border-collapse: separate;
    border-spacing: 0;
}
.terminal-wide .table-wrap > table {
    border-collapse: collapse;
}
.page-shell .table-wrap table thead th:first-child {
    border-top-left-radius: var(--radius-sm);
}
.page-shell .table-wrap table thead th:last-child {
    border-top-right-radius: var(--radius-sm);
}

/* 18c. Soften the remaining components that still used small legacy radii so
   nothing sharp is left behind next to the now-rounder cards. Token-driven. */
.empty-state,
.empty-state.compact,
.notice-strip,
.history-tab-note,
.deposit-instructions,
.deposit-address-placeholder,
.deposit-qr-placeholder,
.card-preview {
    border-radius: var(--radius-card);
}
.notification-menu,
.notification-menu-link,
.notification-menu a,
.dropdown-menu,
.menu-panel {
    border-radius: var(--radius-input);
}
.history-tab,
.history-tabs a,
.deposit-method-tab,
.payment-method-tab,
.chip,
.tag,
.filter-chip {
    border-radius: var(--radius-button);
}

/* 18d. A touch more vertical rhythm between stacked dashboard/finance blocks so
   sections breathe rather than butting together. */
.dashboard-grid,
.referral-grid,
.fees-grid {
    gap: 20px;
}

/* 18e. A few form controls used scoped selectors with a legacy 6px radius that
   slipped past the generic token rounding (notably the history filter row, and
   the KYC/legal acknowledgement rows). Round every content-shell form control,
   plus those scoped selectors, to the input token so no sharp control is left. */
.page-shell input,
.page-shell select,
.page-shell textarea,
.history-filters select,
.history-filters input,
.history-search input,
.ack-row {
    border-radius: var(--radius-input);
}

/* ==========================================================================
   19. Spacing & framing refinement pass (user-facing)
   --------------------------------------------------------------------------
   Earlier polish passes inset card empty-states but left the bordered inner
   table block pressed against the card frame and glued right beneath the card
   header. In the active theme .table-wrap carries its own border, surface and
   radius, so when it is a direct child of a (zero-padding) .card the inner
   frame collides with the outer frame. This pass floats that inner block
   inside the card with even insets on all four sides plus a clear gap under
   the header, restoring a calm hierarchy:

       outer shell -> inset -> framed inner block -> content breathing room.

   Purely visual (spacing + nested radius only): no color, structural, or
   logic change. Scoped to non-terminal .page-shell pages, so admin
   (.admin-shell) is untouched and the live trading terminals (Spot / Futures
   / Forex) keep their dense pro layout. Only direct .card children are
   targeted, so containers that already pad their own children
   (e.g. .wallet-market-section) are never double-inset.
   ========================================================================== */
:root {
    /* Responsive inset between an outer card and its inner content blocks. */
    --card-inset: clamp(16px, 1.9vw, 26px);
    /* Breathing room between a card header and the block directly below it. */
    --card-header-gap: clamp(13px, 1.4vw, 18px);
}

/* Card header inset, kept in step with the inner-block inset. */
.page-shell:not(:has(.terminal-wide)) .card > .section-heading {
    padding: var(--card-inset) var(--card-inset) 0;
}

/* Float the bordered inner table block inside the card: even insets on every
   side, a clear gap under the header, and a smaller radius that nests cleanly
   inside the card radius (and matches the rounded thead corners). */
.page-shell:not(:has(.terminal-wide)) .card > .table-wrap {
    margin: var(--card-header-gap) var(--card-inset) var(--card-inset);
    padding: 0;
    border-radius: var(--radius-sm);
}

/* Empty-state inside a card: same inset rhythm, so populated and empty cards
   line up (supersedes the older 4px/16px inset). */
.page-shell:not(:has(.terminal-wide)) .card > .empty-state {
    margin: var(--card-header-gap) var(--card-inset) var(--card-inset);
}

/* Summary / stat tiles: a little more inner breathing room. */
.page-shell:not(:has(.terminal-wide)) .metric-card {
    padding: 20px;
}

/* ==========================================================================
   20. Native <select> / <option> readability (esp. Dark theme)
   --------------------------------------------------------------------------
   Native option popups were left unstyled (transparent background, inherited
   light text). Combined with the now-fixed white focus background, opening a
   select in Dark theme produced light text on a near-white list. Give the
   field, the opened list, and the highlighted/selected option an explicit
   token-driven surface/text pair so they stay readable in BOTH themes. Native
   controls are also told the colour-scheme so the OS chrome (scrollbar, arrow)
   matches. Purely presentational — no markup, behaviour, or logic change.
   ========================================================================== */
select {
    color-scheme: light dark;
}
select option,
select optgroup {
    background-color: var(--color-surface);
    color: var(--color-text);
}
select option:checked,
select option:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-heading);
}

/* ==========================================================================
   21. fees.php spacing & framing polish
   --------------------------------------------------------------------------
   The page mixed framed cards (now inset by section 19) with two zero-padding
   .card shells — the "Platform fee schedule" info strip and the FAQ card —
   whose content was glued to the frame, and the section stack was only 18px
   apart. Give the strip and FAQ real inner padding, open up the FAQ rows, and
   add premium breathing room between the major sections. Token-driven, so it
   adapts to both themes; fees-* selectors are unique to this page.
   ========================================================================== */
.fees-shell {
    gap: clamp(20px, 2.4vw, 30px);
}

/* Info strip: was a flush .card. Inset its content and balance the row. */
.fees-note {
    padding: clamp(14px, 1.6vw, 18px) var(--card-inset);
    gap: 14px;
    align-items: center;
}

/* FAQ card: <h2> + <details> sat directly inside a zero-padding card. */
.fees-faq-grid .fees-card {
    padding: var(--card-inset);
}
.fees-faq-grid .fees-card > h2 {
    margin: 0 0 4px;
}
.fees-faq-grid details {
    padding: 16px 0;
}
.fees-faq-grid summary {
    font-size: 1.02rem;
    line-height: 1.5;
}
.fees-faq-grid p {
    margin: 10px 0 0;
    line-height: 1.65;
}

@media (max-width: 640px) {
    /* Single-column strip: keep label/text left-aligned, not centred. */
    .fees-note {
        align-items: flex-start;
    }
}

/* ==========================================================================
   22. legal/terms.php — long-form Terms & Conditions document
   --------------------------------------------------------------------------
   The Terms page renders 38 numbered sections from the i18n structure. These
   rules give it a comfortable reading measure, clear numbered headings, body
   text at full (non-muted) contrast for readability in both themes, and safe
   wrapping for long email/URL/licence tokens. Token-driven; no logic change.
   ========================================================================== */
.legal-terms-page {
    max-width: 860px;
}
.legal-terms-updated {
    margin: 0 0 4px;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.95rem;
}
.legal-terms-card {
    display: block;
    padding: clamp(20px, 3vw, 40px);
}
.legal-terms-intro {
    color: var(--color-text);
    line-height: 1.7;
    margin: 0 0 12px;
}
.legal-terms-section {
    margin-top: 30px;
}
.legal-terms-section:first-of-type {
    margin-top: 10px;
}
.legal-terms-heading {
    margin: 0 0 12px;
    font-size: 1.14rem;
    line-height: 1.4;
    color: var(--color-heading);
    scroll-margin-top: 90px;
}
.legal-terms-num {
    color: var(--color-primary-dark);
    margin-right: 4px;
}
/* Body copy at full contrast (the shared .legal-card p is intentionally muted;
   a long legal document reads better with primary text colour). */
.legal-terms-card p {
    margin: 0 0 12px;
    color: var(--color-text);
    line-height: 1.72;
    overflow-wrap: anywhere;
}
.legal-terms-card p:last-child {
    margin-bottom: 0;
}
.legal-terms-list {
    margin: 0 0 14px;
    padding-left: 24px;
    display: grid;
    gap: 8px;
    color: var(--color-text);
}
.legal-terms-list li {
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.legal-terms-list li::marker {
    color: var(--color-muted-2);
}

@media (max-width: 560px) {
    .legal-terms-heading {
        font-size: 1.06rem;
    }
    .legal-terms-list {
        padding-left: 20px;
    }
}

/* ==========================================================================
   23. legal/privacy.php — Privacy Policy additions
   --------------------------------------------------------------------------
   The Privacy Policy reuses the legal/terms.php document layout (section 22)
   and adds two block types: subheadings for the numbered data categories
   (3.1, 5.2, …) and labelled contact blocks for the company / contact-us
   details. Token-driven; emails, URLs, addresses and licence IDs wrap safely
   in both themes. No logic change.
   ========================================================================== */
.legal-privacy-subheading {
    margin: 22px 0 10px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-heading);
    scroll-margin-top: 90px;
}
.legal-privacy-contact {
    margin: 4px 0 14px;
    padding: clamp(14px, 2.2vw, 18px) clamp(16px, 2.6vw, 22px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 12px);
    background: var(--color-surface-muted);
    display: grid;
    gap: 6px;
}
.legal-privacy-contact-line {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.legal-privacy-contact-line.is-name {
    font-weight: 700;
    color: var(--color-heading);
}
.legal-privacy-contact-label {
    color: var(--color-muted);
    margin-right: 6px;
}
.legal-privacy-contact-value {
    font-weight: 600;
    color: var(--color-text);
}
a.legal-privacy-contact-value {
    color: var(--color-primary-dark);
    text-decoration: none;
}
a.legal-privacy-contact-value:hover,
a.legal-privacy-contact-value:focus-visible {
    text-decoration: underline;
}
@media (max-width: 560px) {
    .legal-privacy-subheading {
        font-size: 0.96rem;
    }
    .legal-privacy-contact {
        padding: 14px 16px;
    }
}

/* ==========================================================================
   24. wallet/deposit.php — Card Deposit "secure payment" intro panel
   --------------------------------------------------------------------------
   The intro block (.deposit-payment-intro) carried a hard-coded dark
   purple/navy gradient and its <strong>/<p> inherited the dark-origin text
   colours from styles.css. In the light theme that produced a near-black box
   with near-black text — the heading and body copy were effectively invisible
   (and in the dark theme it was an off-palette violet). Re-skin the panel and
   its text with the shared tokens so it reads as a calm, on-brand contained
   block in BOTH themes. The eyebrow <span> is already tokenised (section 14).
   Purely presentational — no markup, behaviour, or logic change.
   ========================================================================== */
.deposit-payment-intro {
    border-color: var(--color-border);
    background:
        radial-gradient(circle at 12% 0%, var(--color-primary-tint), transparent 62%),
        linear-gradient(180deg, var(--color-primary-soft), var(--color-surface-muted));
}
.deposit-payment-intro strong {
    color: var(--color-heading);
}
.deposit-payment-intro p {
    color: var(--color-muted);
}

/* ==========================================================================
   25. wallet/transfer.php — direction card text + summary grid containment
   --------------------------------------------------------------------------
   Two light-theme defects:
     (a) .transfer-direction-card sits on a tokenised white surface, but its
         <strong> wallet names kept the dark-origin #d6ecff text — invisible on
         white. Map them to the heading token (readable in both themes).
     (b) .transfer-summary-grid is a 2-column gap-as-gridlines grid with an ODD
         number of tiles (9), so the final row left one empty grid track that
         exposed the --color-border "gridline" fill as a stray blue half-cell.
         Span the last tile across both columns so the block closes cleanly.
   Token-driven / structural only — no logic change.
   ========================================================================== */
.transfer-direction-card strong {
    color: var(--color-heading);
}
.transfer-direction-card small {
    color: var(--color-muted);
}
.transfer-summary-grid > div:last-child {
    grid-column: 1 / -1;
}

/* ==========================================================================
   26. security.php — full light-theme readability pass
   --------------------------------------------------------------------------
   The page reuses several dark-origin components whose text/surfaces were
   never re-tokenised, so on the light theme a lot of essential content was
   faint-to-invisible:
     - .security-detail-list dd  (#f7f0ff)  -> invisible values ("Not tracked
       yet", "Enabled at", recovery count, …)
     - .security-detail-list dt / .security-muted (#b9b0d0) -> low-contrast
       labels, helper and intro copy
     - .security-score-card strong (#fff) -> the score % vanished on the white
       hero card; its label (span) was faint; the track was nearly transparent
     - .security-detail-list rows used translucent-white border/background that
       disappeared on white
     - .security-details summary and the TOTP manual/recovery <code> chips kept
       light-on-light text / off-palette dark chips
   All remapped to shared tokens, so the dark theme keeps its (correct) light
   text on dark surfaces while the light theme becomes fully readable. Purely
   presentational — structure, hierarchy and logic are unchanged.
   ========================================================================== */
.security-detail-list dd {
    color: var(--color-text);
}
.security-detail-list dt {
    color: var(--color-muted);
}
.security-detail-list > div {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
}
.security-muted {
    color: var(--color-muted);
}
.security-score-card span {
    color: var(--color-muted);
}
.security-score-card strong {
    color: var(--color-heading);
}
.security-score-track {
    background: var(--color-border);
}
.security-details {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
}
.security-details summary {
    color: var(--color-heading);
}
.totp-manual code,
.recovery-code-grid code {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

/* ==========================================================================
   27. wallet/index.php — inner balance-table corner harmony
   --------------------------------------------------------------------------
   Each .wallet-market-section is a tokenised card (radius var(--radius-card),
   22px). Its inner .table-wrap inherits the generic table frame which is ALSO
   22px, so a framed block with the same radius nested inside ~18px of padding
   read as a bulged, mismatched corner. The shared section-19 nesting fix only
   targets direct .card > .table-wrap children, so the wallet's section-nested
   table was missed. Give it the smaller nested radius so the inner frame seats
   cleanly inside the card — matching the rest of the finance pages. Scoped to
   non-terminal page-shells so the trading terminals are untouched. Spacing /
   radius only; no colour or logic change.
   ========================================================================== */
.page-shell:not(:has(.terminal-wide)) .wallet-market-section > .wallet-market-table {
    border-radius: var(--radius-sm);
}