/* ============================================================
   VAULTEX — COMPREHENSIVE LIGHT MODE OVERRIDES
   Applied when html[data-theme="light"]
   Covers: public site, dashboard, admin panel, all pages
   Strategy: override every hardcoded dark color with CSS vars
============================================================ */

/* ══════════════════════════════════════════════════════
   1. BODY & GLOBAL
══════════════════════════════════════════════════════ */
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: var(--text);
}
html[data-theme="light"] p { color: var(--text); }
html[data-theme="light"] span { color: inherit; }
html[data-theme="light"] a { color: var(--gold); }
html[data-theme="light"] a:hover { color: var(--gold-l); }

/* ══════════════════════════════════════════════════════
   2. NAVBAR & TOPBAR
══════════════════════════════════════════════════════ */
html[data-theme="light"] .navbar-light {
  background: rgba(245,243,239,.96) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .sticky-top.navbar-light {
  background: rgba(245,243,239,.99) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 0 var(--border-gold) !important;
}
html[data-theme="light"] .navbar-light .navbar-brand h1 { color: var(--text) !important; }
html[data-theme="light"] .navbar-light .navbar-nav .nav-link { color: var(--silver) !important; }
html[data-theme="light"] .navbar-light .navbar-nav .nav-link:hover,
html[data-theme="light"] .navbar-light .navbar-nav .nav-link.active { color: var(--text) !important; }
html[data-theme="light"] .navbar-light .navbar-collapse { border-top-color: var(--border); }
html[data-theme="light"] .topbar { background: var(--surface2); border-bottom-color: var(--border); }
html[data-theme="light"] .topbar a { color: var(--muted); }
html[data-theme="light"] .topbar a:hover { color: var(--gold); }
html[data-theme="light"] .theme-toggle-btn { border-color: var(--border); }
html[data-theme="light"] .theme-toggle-btn svg { stroke: var(--silver); }

/* ══════════════════════════════════════════════════════
   3. HOME PAGE — hero stays dark (image background)
      all other sections use variables
══════════════════════════════════════════════════════ */
html[data-theme="light"] .hero-headline { color: #F0EDE8; }
html[data-theme="light"] .hero-sub { color: rgba(240,237,232,.75); }
html[data-theme="light"] .line-deco { color: var(--gold); }

/* Stats bar */
html[data-theme="light"] .stats-bar { background: var(--surface); border-color: var(--border); border-top-color: var(--border-gold); }
html[data-theme="light"] .stat-item { border-right-color: var(--border); }
html[data-theme="light"] .stat-num { color: var(--text); }
html[data-theme="light"] .stat-label { color: var(--muted); }

/* Ticker */
html[data-theme="light"] .ticker-wrap { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .ticker-wrap::before { background: linear-gradient(90deg, var(--surface), transparent); }
html[data-theme="light"] .ticker-wrap::after  { background: linear-gradient(-90deg, var(--surface), transparent); }
html[data-theme="light"] .t-price { color: var(--text); }
html[data-theme="light"] .t-sym   { color: var(--muted); }

/* Feature cards */
html[data-theme="light"] .feature-card { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .feature-card h5 { color: var(--text); }
html[data-theme="light"] .feature-card p  { color: var(--silver); }

/* Step cards */
html[data-theme="light"] .step-card { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .step-card h5 { color: var(--text); }
html[data-theme="light"] .step-card p  { color: var(--silver); }
html[data-theme="light"] .step-num { color: var(--border); }

/* Section titles and badges */
html[data-theme="light"] .section-title     { color: var(--text); }
html[data-theme="light"] .section-title span,
html[data-theme="light"] .section-title em  { color: var(--gold); }
html[data-theme="light"] .section-badge     { color: var(--gold); }
html[data-theme="light"] .section-badge::before,
html[data-theme="light"] .section-badge::after { background: linear-gradient(90deg, transparent, var(--gold)); }

/* Plan cards on home */
html[data-theme="light"] .plan-card { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .plan-card.featured { background: var(--surface2); border-color: var(--gold); }
html[data-theme="light"] .plan-rate { color: var(--gold); }
html[data-theme="light"] .plan-feature { color: var(--silver); border-bottom-color: var(--border2); }
html[data-theme="light"] .plan-feature strong { color: var(--text); }

/* Home coin card (hero floating card) */
html[data-theme="light"] .hero-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .coin-row {
  border-bottom-color: var(--border2) !important;
}

/* Market table */
html[data-theme="light"] .market-table thead tr { border-bottom-color: var(--border); }
html[data-theme="light"] .market-table th { color: var(--muted); }
html[data-theme="light"] .market-table td { color: var(--silver); }
html[data-theme="light"] .market-table td:first-child { color: var(--text); }
html[data-theme="light"] .market-table tbody tr { border-bottom-color: var(--border2); }
html[data-theme="light"] .market-table tbody tr:hover { background: rgba(154,111,40,.04); }

/* Testimonials */
html[data-theme="light"] .testimonial-card { background: var(--surface); border-color: var(--border); border-left-color: var(--gold); }
html[data-theme="light"] .testimonial-card .quote { color: var(--silver); }
html[data-theme="light"] .testimonial-card .quote::before { color: var(--gold); opacity: .25; }
html[data-theme="light"] .author-name { color: var(--gold); }

/* CTA banner */
html[data-theme="light"] .cta-banner { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .cta-banner h2 { color: var(--text); }
html[data-theme="light"] .cta-banner p  { color: var(--silver); }

/* About checklist */
html[data-theme="light"] .check-list-v li { color: var(--silver); border-bottom-color: var(--border2); }

/* Page header */
html[data-theme="light"] .page-header      { background: var(--surface); border-bottom-color: var(--border); }
html[data-theme="light"] .page-header h1   { color: var(--text); }
html[data-theme="light"] .crypto-page-header,
html[data-theme="light"] .plans-page-header { background: var(--surface); border-bottom-color: var(--border); }

/* Breadcrumb */
html[data-theme="light"] .breadcrumb-v { color: var(--muted); }
html[data-theme="light"] .breadcrumb-v a { color: var(--gold); }

/* Home inline hardcoded colors — override ALL of them */
html[data-theme="light"] [style*="color:#F0EDE8"],
html[data-theme="light"] [style*="color: #F0EDE8"] { color: var(--text) !important; }
html[data-theme="light"] [style*="color:#8A95A3"],
html[data-theme="light"] [style*="color: #8A95A3"] { color: var(--silver) !important; }
html[data-theme="light"] [style*="color:#5A6478"],
html[data-theme="light"] [style*="color: #5A6478"] { color: var(--muted) !important; }
html[data-theme="light"] [style*="color:#2A3140"],
html[data-theme="light"] [style*="color: #2A3140"] { color: var(--ash) !important; }
html[data-theme="light"] [style*="color:#8eafc7"],
html[data-theme="light"] [style*="color: #8eafc7"] { color: var(--silver) !important; }
html[data-theme="light"] [style*="color:#8A95A3"],
html[data-theme="light"] [style*="color: #8A95A3"] { color: var(--silver) !important; }
html[data-theme="light"] [style*="color:#C9A84C"],
html[data-theme="light"] [style*="color: #C9A84C"] { color: var(--gold) !important; }
html[data-theme="light"] [style*="color:#E8C96A"],
html[data-theme="light"] [style*="color: #E8C96A"] { color: var(--gold-l) !important; }

/* Dark backgrounds that become white */
html[data-theme="light"] [style*="background:#0E1117"],
html[data-theme="light"] [style*="background: #0E1117"],
html[data-theme="light"] [style*="background:#080A0F"],
html[data-theme="light"] [style*="background: #080A0F"],
html[data-theme="light"] [style*="background:#141820"],
html[data-theme="light"] [style*="background: #141820"],
html[data-theme="light"] [style*="background:#1C2130"],
html[data-theme="light"] [style*="background: #1C2130"],
html[data-theme="light"] [style*="background:#2A3140"],
html[data-theme="light"] [style*="background: #2A3140"] { background: var(--surface) !important; }
/* Border color overrides */
html[data-theme="light"] [style*="border:1px solid #2A3140"],
html[data-theme="light"] [style*="border: 1px solid #2A3140"] { border-color: var(--border) !important; }
html[data-theme="light"] [style*="border-color:#2A3140"],
html[data-theme="light"] [style*="border-color: #2A3140"] { border-color: var(--border) !important; }
html[data-theme="light"] [style*="border-bottom:1px solid #2A3140"],
html[data-theme="light"] [style*="background:#2A3140"] { background: var(--border) !important; }

/* ══════════════════════════════════════════════════════
   4. FOOTER
══════════════════════════════════════════════════════ */
html[data-theme="light"] footer.footer { background: var(--surface2) !important; }
html[data-theme="light"] .copyright    { background: var(--surface3) !important; color: var(--muted); }
html[data-theme="light"] .footer h4, html[data-theme="light"] .footer h5 { color: var(--gold) !important; }
html[data-theme="light"] .btn-link     { color: var(--muted) !important; }
html[data-theme="light"] .btn-link:hover { color: var(--text) !important; }
html[data-theme="light"] .btn-social   { border-color: var(--border) !important; color: var(--silver) !important; }

/* ══════════════════════════════════════════════════════
   5. DROPDOWN
══════════════════════════════════════════════════════ */
html[data-theme="light"] .dropdown-menu { background: var(--surface) !important; border-color: var(--border) !important; border-top-color: var(--gold) !important; }
html[data-theme="light"] .dropdown-item { color: var(--text) !important; background: transparent !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .dropdown-item:hover { color: var(--gold) !important; background: rgba(154,111,40,.05) !important; }

/* ══════════════════════════════════════════════════════
   6. AUTH PAGES (login / register)
══════════════════════════════════════════════════════ */
html[data-theme="light"] .auth-page { background: var(--bg); }
html[data-theme="light"] .auth-hero  { background: var(--surface); }
html[data-theme="light"] .auth-form-panel { background: var(--bg); }
html[data-theme="light"] .auth-card  { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .auth-card h1 { color: var(--text); }
html[data-theme="light"] .auth-input { background: var(--input-bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="light"] .auth-input::placeholder { color: var(--muted) !important; }
html[data-theme="light"] .auth-input:focus { border-color: var(--border-gold) !important; }
html[data-theme="light"] .auth-select { background: var(--input-bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="light"] .auth-select option { background: var(--surface2) !important; color: var(--text) !important; }
html[data-theme="light"] .auth-label { color: var(--muted) !important; }
html[data-theme="light"] .auth-label.dark { color: var(--muted) !important; }
html[data-theme="light"] .select-wrap svg { color: var(--muted) !important; stroke: var(--muted) !important; }
html[data-theme="light"] .glow-line { opacity: .5; }
html[data-theme="light"] .hero-stat  { background: var(--surface2); border-color: var(--border); }
html[data-theme="light"] .hero-stat p { color: var(--text); }
html[data-theme="light"] .hero-step  { background: var(--surface2); border-color: var(--border); }
html[data-theme="light"] .hero-step p { color: var(--text); }
html[data-theme="light"] .cur-preview { background: rgba(154,111,40,.06) !important; border-color: var(--border-gold) !important; }

/* Auth inline hardcoded text */
html[data-theme="light"] .auth-card [style*="color:#fff"],
html[data-theme="light"] .auth-card [style*="color: #fff"] { color: var(--text) !important; }
html[data-theme="light"] .auth-card [style*="color:#8eafc7"],
html[data-theme="light"] .auth-card [style*="color: #8eafc7"] { color: var(--muted) !important; }
html[data-theme="light"] .auth-hero [style*="color:#fff"],
html[data-theme="light"] .auth-hero [style*="color: #fff"] { color: var(--text) !important; }
html[data-theme="light"] .auth-hero [style*="color:#8eafc7"],
html[data-theme="light"] .auth-hero [style*="color: #8eafc7"] { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════
   7. DASHBOARD — VX SHELL
══════════════════════════════════════════════════════ */
html[data-theme="light"] .vx-shell { background: var(--bg); }
html[data-theme="light"] .vx-sidebar { background: var(--surface); border-right-color: var(--border); }
html[data-theme="light"] .vx-topbar  { background: var(--surface); border-bottom-color: var(--border); }
html[data-theme="light"] .vx-main    { background: var(--bg); }
html[data-theme="light"] .vx-content { background: var(--bg); }
html[data-theme="light"] .vx-overlay { background: rgba(0,0,0,.35); }

/* Sidebar elements */
html[data-theme="light"] .sb-brand   { border-bottom-color: var(--border); }
html[data-theme="light"] .sb-brand-name { color: var(--text); }
html[data-theme="light"] .sb-user    { background: var(--input-bg); border-color: var(--border-gold); }
html[data-theme="light"] .sb-uname   { color: var(--text); }
html[data-theme="light"] .sb-umeta   { color: var(--muted); }
html[data-theme="light"] .sb-wallet  { background: var(--input-bg); border-color: var(--border-gold); }
html[data-theme="light"] .sb-wlabel  { color: var(--muted); }
html[data-theme="light"] .sb-wval    { color: var(--gold); }
html[data-theme="light"] .sb-wbtn.dep  { background: rgba(26,154,122,.08); border-color: rgba(26,154,122,.2); color: var(--green); }
html[data-theme="light"] .sb-wbtn.wdr  { background: var(--input-bg); border-color: var(--border-gold); color: var(--gold); }
html[data-theme="light"] .sb-sec    { color: var(--ash); }
html[data-theme="light"] .sb-link   { color: var(--muted); border-left-color: transparent; }
html[data-theme="light"] .sb-link:hover { color: var(--text); background: var(--input-bg); border-left-color: var(--border-gold); }
html[data-theme="light"] .sb-link.active { color: var(--gold); background: rgba(154,111,40,.06); border-left-color: var(--gold); }
html[data-theme="light"] .sb-link.danger { color: var(--muted); }
html[data-theme="light"] .sb-link.danger:hover { color: var(--red); background: rgba(192,57,43,.05); }
html[data-theme="light"] .sb-foot   { color: var(--ash); border-top-color: var(--border); }

/* Topbar elements */
html[data-theme="light"] .vx-page-title { color: var(--text); }
html[data-theme="light"] .vx-hamburger  { border-color: var(--border); }
html[data-theme="light"] .vx-hamburger svg { stroke: var(--silver); }
html[data-theme="light"] .vx-hamburger:hover { border-color: var(--gold); }
html[data-theme="light"] .vx-theme-btn  { border-color: var(--border); }
html[data-theme="light"] .vx-theme-btn svg { stroke: var(--silver); }
html[data-theme="light"] .vx-bal-pill   { background: rgba(154,111,40,.06); border-color: var(--border-gold); }
html[data-theme="light"] .vx-bal-label  { color: var(--muted); }
html[data-theme="light"] .vx-bal-val    { color: var(--gold); }
html[data-theme="light"] .vx-avatar     { background: rgba(154,111,40,.08); border-color: var(--gold); color: var(--gold); }
html[data-theme="light"] .vx-admin-tag  { background: rgba(154,111,40,.08); border-color: var(--border-gold); color: var(--gold); }

/* Cards */
html[data-theme="light"] .vx-card      { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .d-card       { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .vx-card-head { border-bottom-color: var(--border); }
html[data-theme="light"] .vx-card-title { color: var(--silver); }
html[data-theme="light"] .d-card-head  { border-bottom-color: var(--border); }
html[data-theme="light"] .d-card-title { color: var(--silver); }

/* Stat cards */
html[data-theme="light"] .vx-stat      { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .stat-card    { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .vx-stat-val  { color: var(--text); }
html[data-theme="light"] .vx-stat-meta { color: var(--muted); }
html[data-theme="light"] .vx-stat:hover { border-color: var(--border-gold); }

/* Page headings */
html[data-theme="light"] .vx-heading     { color: var(--text); }
html[data-theme="light"] .vx-heading em  { color: var(--gold); }
html[data-theme="light"] .vx-subhead     { color: var(--muted); }
html[data-theme="light"] .dash-greeting  { color: var(--text); }
html[data-theme="light"] .dash-greeting em { color: var(--gold); }
html[data-theme="light"] .dash-subtitle  { color: var(--muted); }
html[data-theme="light"] .dash-page-title { color: var(--text); }
html[data-theme="light"] .currency-pill  { background: rgba(154,111,40,.06); border-color: var(--border-gold); color: var(--gold); }

/* Buttons */
html[data-theme="light"] .vx-btn        { background: transparent; }
html[data-theme="light"] .vx-btn-gold   { border-color: var(--gold); color: var(--gold); }
html[data-theme="light"] .vx-btn-gold:hover { background: var(--gold); color: #fff; }
html[data-theme="light"] .vx-btn-ghost  { border-color: var(--border); color: var(--silver); }
html[data-theme="light"] .vx-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
html[data-theme="light"] .dash-btn-gold { border-color: var(--gold); color: var(--gold); }
html[data-theme="light"] .dash-btn-gold:hover { background: var(--gold); color: #fff; }
html[data-theme="light"] .dash-btn-green { border-color: var(--green); color: var(--green); }
html[data-theme="light"] .dash-btn-green:hover { background: var(--green); color: #fff; }

/* Forms */
html[data-theme="light"] .vx-label     { color: var(--muted); }
html[data-theme="light"] .vx-hint      { color: var(--muted); }
html[data-theme="light"] .vx-error     { color: var(--red); }
html[data-theme="light"] .vx-input     { background: var(--input-bg); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .vx-input::placeholder { color: var(--muted); }
html[data-theme="light"] .vx-input:focus { border-color: var(--border-gold); background: rgba(154,111,40,.03); }
html[data-theme="light"] .vx-input:disabled { background: var(--surface2); }
html[data-theme="light"] .vx-select    { background: var(--input-bg); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .vx-select option { background: var(--surface2); color: var(--text); }
html[data-theme="light"] .vx-textarea  { background: var(--input-bg); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .vx-textarea::placeholder { color: var(--muted); }
html[data-theme="light"] .vx-input-prefix .prefix { background: var(--surface2); border-color: var(--border); color: var(--muted); }
html[data-theme="light"] .calc-input-v  { background: var(--input-bg); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .calc-input-v::placeholder { color: var(--muted); }
html[data-theme="light"] .calc-select-v { background: var(--input-bg); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .calc-select-v option { background: var(--surface2); color: var(--text); }
html[data-theme="light"] .calc-result-box { background: var(--input-bg); border-color: var(--border-gold); }
html[data-theme="light"] .calc-result-label { color: var(--muted); }
html[data-theme="light"] .calc-result-val   { color: var(--gold); }
html[data-theme="light"] .calc-result-total { color: var(--muted); }

/* Tables */
html[data-theme="light"] .vx-table th  { color: var(--muted); }
html[data-theme="light"] .vx-table td  { color: var(--silver); }
html[data-theme="light"] .vx-table tbody tr { border-bottom-color: var(--border2); }
html[data-theme="light"] .vx-table tbody tr:hover { background: var(--input-bg); }
html[data-theme="light"] .vx-table .vx-td-main { color: var(--text); }
html[data-theme="light"] .mkt-table th { color: var(--muted); }
html[data-theme="light"] .mkt-table td { color: var(--silver); }
html[data-theme="light"] .mkt-table tbody tr:hover { background: var(--input-bg); }

/* Investment rows */
html[data-theme="light"] .inv-item   { border-bottom-color: var(--border); }
html[data-theme="light"] .inv-item:hover { background: var(--input-bg); }
html[data-theme="light"] .inv-name   { color: var(--text); }
html[data-theme="light"] .inv-meta   { color: var(--muted); }
html[data-theme="light"] .inv-amount-box { background: var(--input-bg); border-color: var(--border); }
html[data-theme="light"] .inv-amount-val { color: var(--text); }
html[data-theme="light"] .inv-amount-val.profit { color: var(--gold); }
html[data-theme="light"] .inv-top    { /* keep same */ }
html[data-theme="light"] .prog-track { background: var(--border); }

/* Transaction rows */
html[data-theme="light"] .txn-row  { border-bottom-color: var(--border); }
html[data-theme="light"] .txn-row:hover { background: var(--input-bg); }
html[data-theme="light"] .txn-name { color: var(--text); }
html[data-theme="light"] .txn-date { color: var(--muted); }

/* Crypto coin rows */
html[data-theme="light"] .coin-row-d { border-bottom-color: var(--border); }
html[data-theme="light"] .coin-row-d:hover { background: var(--input-bg); }
html[data-theme="light"] .coin-sym   { color: var(--text); }
html[data-theme="light"] .coin-name  { color: var(--muted); }
html[data-theme="light"] .coin-price { color: var(--text); }

/* Quick action items */
html[data-theme="light"] .qa-item  { background: var(--input-bg); border-color: var(--border); }
html[data-theme="light"] .qa-item:hover { border-color: var(--border-gold); background: rgba(154,111,40,.04); }
html[data-theme="light"] .vx-qa    { background: var(--input-bg); border-color: var(--border); }
html[data-theme="light"] .vx-qa:hover { border-color: var(--border-gold); }

/* Balance feature */
html[data-theme="light"] .balance-feature-label { color: var(--muted); }
html[data-theme="light"] .balance-feature-val   { color: var(--gold); }
html[data-theme="light"] .balance-feature-sub   { color: var(--muted); }

/* Address block */
html[data-theme="light"] .vx-addr       { background: var(--input-bg); border-color: var(--border); }
html[data-theme="light"] .vx-addr-text  { color: var(--text); }
html[data-theme="light"] .vx-copy-btn   { border-color: var(--border-gold); color: var(--gold); }
html[data-theme="light"] .vx-copy-btn:hover { background: var(--gold); color: #fff; }

/* Detail rows */
html[data-theme="light"] .vx-detail-row  { border-bottom-color: var(--border2); }
html[data-theme="light"] .vx-detail-label { color: var(--muted); }
html[data-theme="light"] .vx-detail-val   { color: var(--text); }

/* Empty state */
html[data-theme="light"] .vx-empty-icon { border-color: var(--border); }
html[data-theme="light"] .vx-empty-text { color: var(--muted); }
html[data-theme="light"] .empty-state   { /* inherit */ }

/* Alert boxes */
html[data-theme="light"] .vx-alert-gold  { border-color: var(--border-gold); color: var(--gold); background: rgba(154,111,40,.06); }
html[data-theme="light"] .vx-alert-green { border-color: rgba(26,154,122,.3); color: var(--green); background: rgba(26,154,122,.06); }
html[data-theme="light"] .vx-alert-red   { border-color: rgba(192,57,43,.3); color: var(--red); background: rgba(192,57,43,.06); }

/* Mobile bottom nav */
html[data-theme="light"] .vx-bnav       { background: var(--surface); border-top-color: var(--border); }
html[data-theme="light"] .bnav-item span { color: var(--muted); }
html[data-theme="light"] .bnav-item svg  { stroke: var(--muted); }
html[data-theme="light"] .bnav-item.active span { color: var(--gold); }
html[data-theme="light"] .bnav-item.active svg  { stroke: var(--gold); }
html[data-theme="light"] .dash-bottom-nav { background: var(--surface); border-top-color: var(--border); }
html[data-theme="light"] .bnav-item { border-top-color: transparent; }

/* Filter tabs */
html[data-theme="light"] .vx-filter-tab  { border-color: var(--border); color: var(--muted); }
html[data-theme="light"] .vx-filter-tab:hover { border-color: var(--gold); color: var(--gold); }
html[data-theme="light"] .vx-filter-tab.active { border-color: var(--gold); color: var(--gold); background: rgba(154,111,40,.06); }

/* Back link */
html[data-theme="light"] .vx-back { color: var(--muted); }
html[data-theme="light"] .vx-back:hover { color: var(--gold); border-bottom-color: var(--border-gold); }

/* Plan cards in plans page */
html[data-theme="light"] .plan-card-v     { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .plan-card-v.featured { background: var(--surface2); border-color: var(--gold); }
html[data-theme="light"] .plan-name-v     { color: var(--muted); }
html[data-theme="light"] .plan-roi-v      { color: var(--gold); }
html[data-theme="light"] .plan-dur-v      { color: var(--muted); }
html[data-theme="light"] .plan-row-v      { border-bottom-color: var(--border2); }
html[data-theme="light"] .plan-row-label  { color: var(--muted); }
html[data-theme="light"] .plan-row-val    { color: var(--text); }
html[data-theme="light"] .plan-row-val.gold { color: var(--gold); }

/* Trust cards */
html[data-theme="light"] .trust-card-v   { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .trust-title-v  { color: var(--text); }

/* Coin cards on crypto page */
html[data-theme="light"] .coin-card-v    { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .coin-name-v    { color: var(--text); }
html[data-theme="light"] .coin-sym-v     { color: var(--muted); }
html[data-theme="light"] .coin-price-v   { color: var(--text); }
html[data-theme="light"] .coin-meta-v    { color: var(--muted); border-top-color: var(--border); }
html[data-theme="light"] .mkt-stat       { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .mkt-stat-label { color: var(--muted); }
html[data-theme="light"] .mkt-stat-val   { color: var(--text); }
html[data-theme="light"] .tv-tab-btn     { color: var(--muted); }
html[data-theme="light"] .tv-tab-btn:hover { color: var(--text); }
html[data-theme="light"] .tv-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
html[data-theme="light"] .tv-tabs        { border-bottom-color: var(--border); }
html[data-theme="light"] .crypto-cta     { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .crypto-cta h2  { color: var(--text); }
html[data-theme="light"] .plans-cta      { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .plans-cta h2   { color: var(--text); }

/* Calc section */
html[data-theme="light"] .calc-section   { background: var(--surface); border-color: var(--border); border-top-color: var(--gold); }

/* ══════════════════════════════════════════════════════
   8. ABOUT / FAQ / CONTACT — Bootstrap text classes
══════════════════════════════════════════════════════ */
html[data-theme="light"] .text-white     { color: var(--text) !important; }
html[data-theme="light"] .bg-light       { background: var(--surface) !important; }
html[data-theme="light"] .text-muted     { color: var(--muted) !important; }
html[data-theme="light"] .border         { border-color: var(--border) !important; }
html[data-theme="light"] .service-item   { background: var(--surface); border-color: var(--border) !important; }
html[data-theme="light"] .service-item h5 { color: var(--text); }
html[data-theme="light"] .service-item p  { color: var(--silver); }
html[data-theme="light"] .team-item      { background: var(--surface); }
html[data-theme="light"] .team-item .bg-light { background: var(--surface2) !important; }
html[data-theme="light"] .team-item h5   { color: var(--text); }
html[data-theme="light"] .team-item small { color: var(--muted); }

/* ══════════════════════════════════════════════════════
   9. ADMIN PANEL — Tailwind overrides
   Admin uses Tailwind + admin/base.html (our new dark base)
   Tailwind bg-white / text-gray-* classes need overriding
══════════════════════════════════════════════════════ */
html[data-theme="light"] .vx-main .bg-white,
html[data-theme="light"] .vx-main [class*="bg-white"] { background: var(--surface) !important; }
html[data-theme="light"] .vx-main .bg-gray-50,
html[data-theme="light"] .vx-main [class*="bg-gray-50"] { background: var(--surface2) !important; }
html[data-theme="light"] .vx-main .bg-gray-100,
html[data-theme="light"] .vx-main [class*="bg-gray-100"] { background: var(--surface3) !important; }
html[data-theme="light"] .vx-main .border-gray-100,
html[data-theme="light"] .vx-main [class*="border-gray-100"] { border-color: var(--border) !important; }
html[data-theme="light"] .vx-main .border-gray-50,
html[data-theme="light"] .vx-main [class*="border-gray-50"] { border-color: var(--border2) !important; }
html[data-theme="light"] .vx-main .border-gray-200,
html[data-theme="light"] .vx-main [class*="border-gray-200"] { border-color: var(--border) !important; }
html[data-theme="light"] .vx-main .text-gray-800,
html[data-theme="light"] .vx-main [class*="text-gray-800"] { color: var(--text) !important; }
html[data-theme="light"] .vx-main .text-gray-700,
html[data-theme="light"] .vx-main [class*="text-gray-700"] { color: var(--text) !important; }
html[data-theme="light"] .vx-main .text-gray-600,
html[data-theme="light"] .vx-main [class*="text-gray-600"] { color: var(--silver) !important; }
html[data-theme="light"] .vx-main .text-gray-500,
html[data-theme="light"] .vx-main [class*="text-gray-500"] { color: var(--muted) !important; }
html[data-theme="light"] .vx-main .text-gray-400,
html[data-theme="light"] .vx-main [class*="text-gray-400"] { color: var(--muted) !important; }
html[data-theme="light"] .vx-main .divide-gray-50 > * + * { border-color: var(--border2) !important; }
html[data-theme="light"] .vx-main .divide-y > * + *       { border-color: var(--border) !important; }
html[data-theme="light"] .vx-main .hover\:bg-gray-50:hover { background: var(--input-bg) !important; }

/* Admin panel dark mode — these are now in VX base so admin uses dark by default,
   but with theme toggle they switch to light. Override Tailwind for light: */
html[data-theme="light"] .vx-main table thead { background: var(--surface2) !important; }
html[data-theme="light"] .vx-main table thead th { color: var(--muted) !important; }
html[data-theme="light"] .vx-main table tbody tr { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .vx-main table tbody tr:hover { background: var(--input-bg) !important; }
html[data-theme="light"] .vx-main table td { color: var(--silver) !important; }
html[data-theme="light"] .vx-main table .font-bold { color: var(--text) !important; }
html[data-theme="light"] .vx-main table .font-semibold { color: var(--text) !important; }
html[data-theme="light"] .vx-main table .font-medium { color: var(--text) !important; }

/* Admin input overrides */
html[data-theme="light"] .vx-main select,
html[data-theme="light"] .vx-main input[type="text"],
html[data-theme="light"] .vx-main input[type="email"],
html[data-theme="light"] .vx-main input[type="number"],
html[data-theme="light"] .vx-main input[type="password"],
html[data-theme="light"] .vx-main textarea {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .vx-main select option { background: var(--surface2) !important; color: var(--text) !important; }
html[data-theme="light"] .vx-main label { color: var(--text) !important; }

/* Admin tab buttons */
html[data-theme="light"] .vx-main .tab-btn { color: var(--muted) !important; border-color: transparent !important; }
html[data-theme="light"] .vx-main .tab-btn.text-blue-600 { color: var(--gold) !important; border-color: var(--gold) !important; }
html[data-theme="light"] .vx-main .border-b { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .vx-main .border-b-2 { border-bottom-color: transparent; }

/* Admin card bg */
html[data-theme="light"] .vx-main .rounded-2xl { background: var(--surface); }
html[data-theme="light"] .vx-main .shadow-sm   { box-shadow: var(--shadow); }
html[data-theme="light"] .vx-main p.text-gray-500 { color: var(--muted) !important; }
html[data-theme="light"] .vx-main span.text-gray-400 { color: var(--muted) !important; }

/* Admin wallet adjust */
html[data-theme="light"] .vx-main .bg-yellow-50  { background: rgba(154,111,40,.06) !important; }
html[data-theme="light"] .vx-main .bg-blue-50    { background: rgba(59,130,246,.06) !important; }
html[data-theme="light"] .vx-main .text-yellow-700 { color: #7A5520 !important; }
html[data-theme="light"] .vx-main .text-blue-700  { color: #1e40af !important; }

/* ══════════════════════════════════════════════════════
   10. LIVECHAT WIDGET
══════════════════════════════════════════════════════ */
html[data-theme="light"] #vx-bar { background: var(--surface) !important; border-top-color: var(--gold) !important; border-left-color: var(--border) !important; border-right-color: var(--border) !important; }
html[data-theme="light"] #vx-bar-lbl strong { color: var(--text) !important; }
html[data-theme="light"] #vx-bar-lbl small  { color: var(--muted) !important; }
html[data-theme="light"] #vx-win  { background: var(--surface) !important; border-color: var(--border) !important; border-top-color: var(--gold) !important; }
html[data-theme="light"] #vx-hdr  { background: var(--surface2) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] #vx-hdr-txt b { color: var(--text) !important; }
html[data-theme="light"] #vx-hdr-txt s { color: var(--muted) !important; }
html[data-theme="light"] #vx-msgs { background: var(--bg) !important; }
html[data-theme="light"] .vx-them .vx-bub { background: var(--surface) !important; border-color: var(--border) !important; border-left-color: var(--gold) !important; color: var(--text) !important; }
html[data-theme="light"] .vx-me .vx-bub   { background: var(--surface2) !important; border-color: var(--border-gold) !important; color: var(--text) !important; }
html[data-theme="light"] .vx-who  { color: var(--muted) !important; }
html[data-theme="light"] .vx-ts   { color: var(--muted) !important; }
html[data-theme="light"] .vx-divider { color: var(--ash) !important; }
html[data-theme="light"] #vx-ftr  { background: var(--surface) !important; border-top-color: var(--border) !important; }
html[data-theme="light"] #vx-irow { background: var(--input-bg) !important; border-color: var(--border) !important; }
html[data-theme="light"] #vx-irow:focus-within { border-color: var(--border-gold) !important; }
html[data-theme="light"] #vx-ta   { color: var(--text) !important; }
html[data-theme="light"] #vx-ta::placeholder { color: var(--muted) !important; }
html[data-theme="light"] #vx-sbtn { background: var(--surface2) !important; border-color: var(--border-gold) !important; color: var(--gold) !important; }
html[data-theme="light"] #vx-sbtn:hover { background: var(--gold) !important; color: #fff !important; }
html[data-theme="light"] #vx-pw   { color: var(--ash) !important; }
html[data-theme="light"] #vx-pw b { color: var(--gold) !important; }

/* ══════════════════════════════════════════════════════
   11. SCROLLBAR
══════════════════════════════════════════════════════ */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surface2); }