/* ── RIDER DASHBOARD LIGHT THEME (scoped via :has) ───────────────────────── */
#root-inner:has(.rider-dash)>.screen{
  background:
    radial-gradient(900px 500px at 100% 0%,rgba(86,213,216,0.18) 0%,transparent 55%),
    radial-gradient(600px 400px at -5% 100%,rgba(var(--rgb-soft),0.70) 0%,transparent 55%),
    var(--c-bg);
}

/* ── LOG SESSION LIGHT THEME ─────────────────────────────────────────────── */
#root-inner:has(.log-session)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}

/* ── SESSION DETAIL LIGHT THEME ──────────────────────────────────────────── */
#root-inner:has(.session-detail)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}

/* ── HISTORY LIGHT THEME ─────────────────────────────────────────────────── */
#root-inner:has(.history-screen)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}

/* ── PROFILE LIGHT THEME ──────────────────────────────────────────────────── */
#root-inner:has(.profile-screen)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}

/* ── STATS LIGHT THEME ───────────────────────────────────────────────────── */
#root-inner:has(.stats-screen)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}
/* Override dark CSS vars for all stats content */
.stats-screen{
  --bg2:var(--c-card);
  --bg3:rgba(var(--rgb-surface),0.85);
  --bg:var(--c-bg);
  --border:rgba(183,218,221,0.42);
  --text:var(--c-ink);
  --text2:var(--c-text2);
  --text3:rgba(var(--rgb-muted),0.65);
  --green:#19B875;
  --red:#D65A5A;
  --yellow:#F2D23C;
  --accent:#F2D23C;
}

/* ── COACH DASHBOARD LIGHT THEME ───────────────────────────────────────────── */
#root-inner:has(.coach-dash)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}

/* ── COACH RIDER DETAIL LIGHT THEME ────────────────────────────────────────── */
#root-inner:has(.coach-rider-detail)>.screen{
  background:
    radial-gradient(900px 400px at 100% 0%,rgba(86,213,216,0.15) 0%,transparent 55%),
    radial-gradient(600px 350px at -5% 100%,rgba(var(--rgb-soft),0.65) 0%,transparent 55%),
    var(--c-bg);
}

/* ── DARK THEME ─────────────────────────────────────────────────────────────
   Most colour comes from --c-* tokens in inline styles; these cover the few
   spots that still style through the original dark-era variables. */
:root[data-theme="dark"] .notif-center{background:var(--c-bg) !important}
:root[data-theme="dark"] select option{background:var(--c-card);color:var(--c-ink)}