/* ============================================================
   BrainX Light Mode Polish
   Loaded by every client page after themes.js + theme-loader.js.
   Most elements use CSS variables already and need no help here.
   This file fixes the handful of places that hardcoded dark colors.
   ============================================================ */

html.theme-light body {
  /* Replace the dark radial glows in the body background */
  background:
    radial-gradient(circle at 20% 0%, rgba(245,183,0,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(59,130,246,0.05) 0%, transparent 50%),
    var(--bg) !important;
}

/* Sticky top bars and bottom navs use rgba(15,18,24,0.85) — looks black in light mode.
   Repaint them with the theme bg + alpha so they blend correctly. */
html.theme-light .top-bar,
html.theme-light .bottom-nav {
  background: color-mix(in srgb, var(--bg) 80%, transparent) !important;
  border-color: var(--border) !important;
}

/* The "Sign Out" button uses a dark gradient on dark themes.
   In light mode keep it on-brand by using only the accent color. */
html.theme-light .signout-btn {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: #fff !important;
}

/* Cards / surfaces — give them a real light-on-light shadow,
   since the dark theme relied on translucent borders alone */
html.theme-light .card,
html.theme-light .stat-tile,
html.theme-light .menu-list,
html.theme-light .wallet-card,
html.theme-light .balance-card,
html.theme-light .info-card,
html.theme-light .perf-tile,
html.theme-light .bot-hero,
html.theme-light .referral-card,
html.theme-light .chart-card,
html.theme-light .fee-card,
html.theme-light .input-card,
html.theme-light .amount-card {
  box-shadow: 0 1px 2px rgba(15,18,24,0.04), 0 1px 8px rgba(15,18,24,0.04);
}

/* The gold-on-black text in counters etc. needs a subtle shadow
   to stay readable on light backgrounds */
html.theme-light .wallet-amount,
html.theme-light .stat-tile-value,
html.theme-light .currency,
html.theme-light .countdown-time {
  text-shadow: none;
}

/* Form inputs: ensure visible borders + dark-on-light text */
html.theme-light input,
html.theme-light select,
html.theme-light textarea {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: var(--text-faint) !important;
  opacity: 0.85;
}

/* Modal overlays were rgba(0,0,0,0.65) — fine on dark, OK on light too,
   but soften slightly so the page underneath is still legible */
html.theme-light [style*="rgba(0,0,0,0.65)"] {
  /* No change needed — black 65% works fine over light too */
}

/* Toasts — gold color works on both, but the surface needs to invert */
html.theme-light .toast {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Marquee gradient mask on the home page — dark stops were custom.
   Just neutralize it by recoloring the overlay for light themes. */
html.theme-light .marquee-fade-left,
html.theme-light .marquee-fade-right {
  background: linear-gradient(to right, var(--surface), transparent) !important;
}
html.theme-light .marquee-fade-right {
  background: linear-gradient(to left, var(--surface), transparent) !important;
}

/* Buttons that hardcoded dark text colors */
html.theme-light .copy-btn,
html.theme-light .submit-btn,
html.theme-light .btn-primary,
html.theme-light .bot-toggle:not(.locked) {
  /* Gold buttons keep dark text — readable on accent in both modes */
}