/* ==========================================================
   DASHBOARD EXTRAS
   - Mini track preview (top-right)
   - Live timing strip (bottom-center)
   - Radial action menu on long-press of driver card
   - Race-control banner (DRS / VSC / Yellow / Green)
   Activates only on body.dashboard-page. Driver-card system
   is never targeted directly — radial overlay floats above it.
   ========================================================== */

/* ── 1. Mini track preview ─────────────────────────── */
body.dashboard-page #de-minitrack {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 99994;
  width: 92px; height: 92px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(8,10,16,0.78), rgba(4,5,8,0.88));
  border: 1px solid rgba(0,230,240,0.18);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 30px -22px rgba(0,0,0,0.7);
  display: none;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.dashboard-page #de-minitrack.active { display: block; animation: rd-modal-in .26s cubic-bezier(.2,.8,.2,1) both; }
body.dashboard-page #de-minitrack:hover {
  transform: scale(1.04);
  box-shadow: 0 0 22px rgba(0,230,240,0.32);
}
body.dashboard-page #de-minitrack svg { width: 100%; height: 100%; display: block; }
body.dashboard-page #de-minitrack .de-mt-label {
  position: absolute;
  top: 6px; left: 8px;
  font-family: 'Geist Mono','JetBrains Mono',monospace;
  font-size: 7px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rd-accent, #00e6f0);
  pointer-events: none;
}
body.dashboard-page #de-minitrack .de-mt-seg {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke: rgba(255,255,255,0.18);
  transition: stroke .35s ease, filter .35s ease;
}
body.dashboard-page #de-minitrack .de-mt-seg.green {
  stroke: #00e6a0;
  filter: drop-shadow(0 0 4px rgba(0,230,160,0.7));
}
body.dashboard-page #de-minitrack .de-mt-seg.purple {
  stroke: #d900ff;
  filter: drop-shadow(0 0 6px rgba(217,0,255,0.7));
}
body.dashboard-page #de-minitrack .de-mt-seg.yellow {
  stroke: #ffd84a;
  filter: drop-shadow(0 0 5px rgba(255,216,74,0.7));
}

/* ── 2. Live timing strip ─────────────────────────── */
body.dashboard-page #de-livetiming {
  position: fixed;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 99991;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(8,10,16,0.85), rgba(4,5,8,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 40px -22px rgba(0,0,0,0.7);
  font-family: 'Geist Mono','JetBrains Mono',monospace;
  max-width: calc(100vw - 32px);
  overflow: hidden;
}
body.dashboard-page #de-livetiming.active { display: inline-flex; }
body.dashboard-page #de-livetiming::before {
  content: "LIVE";
  padding: 6px 12px 6px 14px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--rd-accent, #00e6f0);
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  border-right: 1px solid rgba(255,255,255,0.06);
  margin-right: 4px;
}
body.dashboard-page #de-livetiming .de-lt-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  transition: background .2s ease;
}
body.dashboard-page #de-livetiming .de-lt-pill:hover { background: rgba(255,255,255,0.07); }
body.dashboard-page #de-livetiming .de-lt-pos {
  font-size: 9px; font-weight: 700;
  color: var(--rd-accent, #00e6f0);
  letter-spacing: 0.08em;
  width: 14px;
}
body.dashboard-page #de-livetiming .de-lt-name {
  font-weight: 600;
  font-family: 'Geist','Inter',sans-serif;
  letter-spacing: -0.005em;
}
body.dashboard-page #de-livetiming .de-lt-team-dot {
  width: 6px; height: 14px; border-radius: 2px;
  background: var(--rd-accent, #00e6f0);
}
body.dashboard-page #de-livetiming .de-lt-pts {
  font-variant-numeric: tabular-nums;
  color: var(--rd-text-dim, #8a8d96);
  font-size: 10px;
}

@media (max-width: 720px) {
  body.dashboard-page #de-livetiming { gap: 4px; padding: 4px; }
  body.dashboard-page #de-livetiming .de-lt-pill { padding: 5px 8px; font-size: 10px; }
  body.dashboard-page #de-livetiming .de-lt-pts { display: none; }
}

/* ── 3. Radial action menu (long-press driver card) ── */
body.dashboard-page #de-radial {
  position: fixed;
  z-index: 100003;
  pointer-events: none;
  display: none;
  width: 280px; height: 280px;
  transform: translate(-50%, -50%);
}
body.dashboard-page #de-radial.open {
  display: block;
  pointer-events: auto;
  animation: de-radial-in .25s cubic-bezier(.2,.8,.2,1) both;
}
body.dashboard-page #de-radial-bg {
  position: fixed; inset: 0;
  background: rgba(4,5,8,0.55);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  z-index: 100002;
  display: none;
}
body.dashboard-page #de-radial-bg.open { display: block; animation: de-fade-in .2s ease both; }
body.dashboard-page #de-radial .de-r-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,230,240,0.4), rgba(180,90,255,0.25));
  border: 1px solid rgba(0,230,240,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 30px rgba(0,230,240,0.4);
  pointer-events: none;
}
body.dashboard-page #de-radial .de-r-center b {
  font-family: 'Geist', sans-serif;
  font-size: 13px; font-weight: 800;
  margin-bottom: 2px;
}
body.dashboard-page #de-radial .de-r-action {
  position: absolute;
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(22,24,32,0.95), rgba(8,10,14,0.95));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  font-family: 'Geist Mono', monospace;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rd-text-dim, #8a8d96);
  text-transform: uppercase;
  text-align: center;
  padding: 4px;
  user-select: none;
}
body.dashboard-page #de-radial .de-r-action i {
  font-size: 18px;
  color: var(--rd-accent, #00e6f0);
  margin-bottom: 2px;
}
body.dashboard-page #de-radial .de-r-action:hover {
  background: rgba(0,230,240,0.12);
  border-color: rgba(0,230,240,0.5);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(0,230,240,0.4);
}
@keyframes de-radial-in {
  from { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);  opacity: 1; }
}
@keyframes de-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 4. Race-control banner (DRS / VSC / flag events) ── */
body.dashboard-page #de-rcbanner {
  position: fixed;
  top: 60px; left: 50%; transform: translateX(-50%) translateY(-30px);
  z-index: 99998;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(22,24,32,0.95), rgba(8,10,14,0.95));
  border: 1px solid rgba(255,216,74,0.4);
  border-radius: 12px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  align-items: center; gap: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
body.dashboard-page #de-rcbanner.show {
  display: inline-flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.dashboard-page #de-rcbanner .de-rc-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
body.dashboard-page #de-rcbanner.green  { border-color: rgba(0,230,160,0.5); box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7), 0 0 24px rgba(0,230,160,0.25); }
body.dashboard-page #de-rcbanner.green  .de-rc-icon { background: rgba(0,230,160,0.18); color: #00e6a0; }
body.dashboard-page #de-rcbanner.yellow { border-color: rgba(255,216,74,0.5); box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7), 0 0 24px rgba(255,216,74,0.25); }
body.dashboard-page #de-rcbanner.yellow .de-rc-icon { background: rgba(255,216,74,0.18); color: #ffd84a; }
body.dashboard-page #de-rcbanner.red    { border-color: rgba(255,80,80,0.5);   box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7), 0 0 24px rgba(255,80,80,0.25); }
body.dashboard-page #de-rcbanner.red    .de-rc-icon { background: rgba(255,80,80,0.18); color: #ff7070; }
body.dashboard-page #de-rcbanner.cyan   { border-color: rgba(0,230,240,0.5);   box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7), 0 0 24px rgba(0,230,240,0.3); }
body.dashboard-page #de-rcbanner.cyan   .de-rc-icon { background: rgba(0,230,240,0.18); color: var(--rd-accent, #00e6f0); }
body.dashboard-page #de-rcbanner small {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--rd-text-dim, #8a8d96);
  font-size: 10px;
  margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-page #de-rcbanner { transition: none; }
  body.dashboard-page #de-radial.open { animation: none; }
}

@media (max-width: 768px) {
  body.dashboard-page #de-minitrack { width: 72px; height: 72px; top: 8px; right: 8px; }
  body.dashboard-page #de-livetiming { bottom: 76px; max-width: calc(100vw - 16px); font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════
   PIT STRATEGY WIDGET — serious analysis tile
   ══════════════════════════════════════════════════════════ */
body.dashboard-page #de-pitstrategy {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0 !important;
  margin: 4px 0 10px !important;
  padding: 12px 14px !important;
  background:
    linear-gradient(180deg, rgba(28,30,40,0.78), rgba(14,16,22,0.86)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 30px -22px rgba(0,0,0,0.6) !important;
  position: relative;
  overflow: visible !important;
  transition: border-color .35s ease, box-shadow .35s ease;
}
body.dashboard-page #de-pitstrategy::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,160,0.5), transparent);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transition: background .35s ease;
}
body.dashboard-page #de-pitstrategy.warn { border-color: rgba(255,216,74,0.32) !important; }
body.dashboard-page #de-pitstrategy.warn::before { background: linear-gradient(90deg, transparent, rgba(255,216,74,0.6), transparent); }
body.dashboard-page #de-pitstrategy.crit { border-color: rgba(255,80,80,0.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 30px -10px rgba(255,80,80,0.32); }
body.dashboard-page #de-pitstrategy.crit::before { background: linear-gradient(90deg, transparent, rgba(255,80,80,0.7), transparent); }

body.dashboard-page #de-pitstrategy .de-ps-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 4px;
}
body.dashboard-page #de-pitstrategy .de-ps-eyebrow {
  font-family: 'JetBrains Mono','Geist Mono',monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rd-accent, #00f2ff);
  flex: 1;
  display: inline-flex; align-items: center; gap: 8px;
}
body.dashboard-page #de-pitstrategy .de-ps-eyebrow::before {
  content: "\eb6c"; /* boxicons bx-pit (fallback to plug if missing) */
  font-family: 'boxicons';
  font-size: 14px;
  letter-spacing: 0;
  opacity: .9;
}
body.dashboard-page #de-pitstrategy .de-ps-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00e6a0;
  box-shadow: 0 0 0 0 rgba(0,230,160,0.6);
  animation: mu-pulse-ring 2s ease-out infinite;
}
body.dashboard-page #de-pitstrategy.warn .de-ps-pulse { background: #ffd84a; box-shadow: 0 0 0 0 rgba(255,216,74,0.6); }
body.dashboard-page #de-pitstrategy.crit .de-ps-pulse { background: #ff5060; box-shadow: 0 0 0 0 rgba(255,80,80,0.7); }

body.dashboard-page #de-pitstrategy .de-ps-risk {
  font-family: 'JetBrains Mono','Geist Mono',monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,230,160,0.14);
  color: #00e6a0;
  border: 1px solid rgba(0,230,160,0.35);
}
body.dashboard-page #de-pitstrategy.idle .de-ps-risk { background: rgba(255,255,255,0.05); color: #8a8d96; border-color: rgba(255,255,255,0.1); }
body.dashboard-page #de-pitstrategy.warn .de-ps-risk { background: rgba(255,216,74,0.14); color: #ffd84a; border-color: rgba(255,216,74,0.35); }
body.dashboard-page #de-pitstrategy.crit .de-ps-risk { background: rgba(255,80,80,0.18); color: #ff7a7a; border-color: rgba(255,80,80,0.4); }

body.dashboard-page #de-pitstrategy .de-ps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px;
  flex-shrink: 0;
}
body.dashboard-page #de-pitstrategy .de-ps-cell {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 8px 10px;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 60px;
  position: relative;
  overflow: hidden;
}
body.dashboard-page #de-pitstrategy .de-ps-k {
  font-family: 'JetBrains Mono','Geist Mono',monospace;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #9ea2ad;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
body.dashboard-page #de-pitstrategy .de-ps-k i {
  font-size: 12px; color: var(--rd-accent, #00f2ff);
  flex-shrink: 0;
}
body.dashboard-page #de-pitstrategy .de-ps-v {
  font-family: 'JetBrains Mono','Geist Mono',monospace;
  font-size: 15px; font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-shadow: 0 0 16px rgba(0,230,240,0.18);
  display: inline-flex; align-items: center; gap: 5px;
}
body.dashboard-page #de-pitstrategy .de-ps-v small {
  font-size: 9px; font-weight: 500;
  color: #6c6f78; letter-spacing: 0.08em;
  margin-left: 2px;
}
body.dashboard-page #de-pitstrategy .de-ps-sub {
  font-family: 'JetBrains Mono','Geist Mono',monospace;
  font-size: 9px;
  color: #6c6f78;
  letter-spacing: 0.04em;
}

/* Tyre-life progress bar */
body.dashboard-page #de-pitstrategy .de-ps-foot {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 2px;
}
body.dashboard-page #de-pitstrategy .de-ps-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
body.dashboard-page #de-pitstrategy .de-ps-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00e6a0 0%, #ffd84a 60%, #ff5060 100%);
  border-radius: 3px;
  transition: width .6s ease;
  box-shadow: 0 0 10px rgba(0,230,160,0.4);
}
body.dashboard-page #de-pitstrategy .de-ps-bar-marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
  transform: translateX(-1px);
  transition: left .6s ease;
}
body.dashboard-page #de-pitstrategy .de-ps-bar-labels {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono','Geist Mono',monospace;
  font-size: 8px;
  color: #6c6f78;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.dashboard-page #de-pitstrategy .de-ps-bar-labels span:nth-child(2) {
  color: var(--rd-accent, #00f2ff);
  font-weight: 700;
}

@media (max-width: 720px) {
  body.dashboard-page #de-pitstrategy .de-ps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   STANDINGS — premium row treatment
   The dashboard.html loadStandings() builds rows via inline HTML;
   we restyle by targeting the container + child structure.
   ══════════════════════════════════════════════════════════ */
body.dashboard-page #standingsTable {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Geist','Inter',sans-serif;
}
body.dashboard-page #standingsTable > div {
  position: relative;
  padding: 9px 12px 9px 14px !important;
  border-bottom: none !important;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 9px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  font-size: 12px !important;
  overflow: hidden;
}
body.dashboard-page #standingsTable > div::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--rd-accent, #00e6f0), rgba(0,230,240,0.2));
}
body.dashboard-page #standingsTable > div:nth-child(1)::before { background: linear-gradient(180deg, #ffd84a, #ff8c00); }
body.dashboard-page #standingsTable > div:nth-child(2)::before { background: linear-gradient(180deg, #d6dade, #6c727a); }
body.dashboard-page #standingsTable > div:nth-child(3)::before { background: linear-gradient(180deg, #d99155, #7a4a25); }
body.dashboard-page #standingsTable > div:hover {
  background: rgba(0,230,240,0.05);
  border-color: rgba(0,230,240,0.22);
  transform: translateX(2px);
}
/* Position number — bold, accent, fixed width */
body.dashboard-page #standingsTable > div span:first-child {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: var(--rd-accent, #00e6f0) !important;
  width: 22px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.dashboard-page #standingsTable > div:nth-child(1) span:first-child { color: #ffd84a !important; }
/* Driver code — bigger, sentence-case-ish */
body.dashboard-page #standingsTable > div span:nth-child(2) {
  font-family: 'Geist','Inter',sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  font-size: 13px !important;
  color: #fff !important;
}
/* Team name — small, muted, mono */
body.dashboard-page #standingsTable > div span:nth-child(3) {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.12em;
  color: #6c6f78 !important;
}
/* Points — right-aligned mono with cyan tint */
body.dashboard-page #standingsTable > div > span[style*="font-family:monospace"],
body.dashboard-page #standingsTable > div > span:last-child {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
body.dashboard-page #standingsTable > div > span:last-child::after {
  content: " pts";
  font-size: 9px;
  color: #5a5d66;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════
   SESSION SUMMARY MODAL — premium polish
   Targets #sumModal #sumContent (built by openSummary()).
   ══════════════════════════════════════════════════════════ */
body.dashboard-page #sumModal .cmd-center,
body.dashboard-page #sumModal .cmd-body { font-family: 'Geist','Inter',sans-serif; }
body.dashboard-page #sumContent {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  padding: 8px 0;
}
body.dashboard-page #sumContent .h-sum-card {
  position: relative;
  padding: 22px 18px !important;
  background:
    linear-gradient(180deg, rgba(28,30,40,0.85), rgba(14,16,22,0.9)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 40px -22px rgba(0,0,0,0.6);
  transition: border-color .2s ease, transform .2s ease;
}
body.dashboard-page #sumContent .h-sum-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,240,0.45), transparent);
}
body.dashboard-page #sumContent .h-sum-card:hover {
  border-color: rgba(0,230,240,0.28) !important;
  transform: translateY(-2px);
}
body.dashboard-page #sumContent .h-sum-lbl {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--rd-accent, #00e6f0) !important;
  margin-bottom: 14px !important;
  display: flex; align-items: center; gap: 6px;
}
body.dashboard-page #sumContent .h-sum-lbl::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e6a0;
  box-shadow: 0 0 8px rgba(0,230,160,0.5);
}
body.dashboard-page #sumContent .h-sum-val {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 22px rgba(0,230,240,0.18);
  margin-bottom: 6px !important;
}
body.dashboard-page #sumContent .h-sum-sub {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.06em !important;
  color: #8a8d96 !important;
}

/* ══════════════════════════════════════════════════════════
   TOP-BAR ACTION BUTTONS — unified premium look
   STANDINGS / SUMMARY / MULTI / COMPARE / GAME / ENG
   ══════════════════════════════════════════════════════════ */
body.dashboard-page .top-bar .standings-btn,
body.dashboard-page .top-bar .sum-btn,
body.dashboard-page .top-bar .eng-btn {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(28,30,40,0.7), rgba(14,16,22,0.78)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 18px -14px rgba(0,0,0,0.6);
  position: relative;
}
body.dashboard-page .top-bar .standings-btn i,
body.dashboard-page .top-bar .sum-btn i,
body.dashboard-page .top-bar .eng-btn i {
  font-size: 13px !important;
  color: var(--rd-accent, #00e6f0) !important;
  transition: color .2s ease;
}
body.dashboard-page .top-bar .standings-btn:hover,
body.dashboard-page .top-bar .sum-btn:hover,
body.dashboard-page .top-bar .eng-btn:hover {
  background:
    linear-gradient(180deg, rgba(0,230,240,0.08), rgba(0,230,240,0.02)) !important;
  border-color: rgba(0,230,240,0.4) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 22px -12px rgba(0,230,240,0.4);
}
body.dashboard-page .top-bar .standings-btn:active,
body.dashboard-page .top-bar .sum-btn:active,
body.dashboard-page .top-bar .eng-btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Tone-specific accent bar — preserves identity (gold standings,
   green multi, orange compare, yellow game) without per-button
   coloured backgrounds. The accent is a tiny left border. */
body.dashboard-page .top-bar .standings-btn { border-left: 2px solid #ffd84a !important; }
body.dashboard-page .top-bar .standings-btn i { color: #ffd84a !important; }
body.dashboard-page #compareBtn               { border-left: 2px solid #ff8c00 !important; }
body.dashboard-page #compareBtn i             { color: #ff8c00 !important; }
body.dashboard-page .top-bar .sum-btn[onclick*="openMultiCmp"]  { border-left: 2px solid #00ff88 !important; }
body.dashboard-page .top-bar .sum-btn[onclick*="openMultiCmp"] i{ color: #00ff88 !important; }
body.dashboard-page .top-bar .sum-btn[onclick*="openGameModal"] { border-left: 2px solid #ffcc00 !important; }
body.dashboard-page .top-bar .sum-btn[onclick*="openGameModal"] i{ color: #ffcc00 !important; }
body.dashboard-page .top-bar .sum-btn[onclick*="openSummary"]   { border-left: 2px solid var(--rd-accent, #00e6f0) !important; }
body.dashboard-page .top-bar .sum-btn[onclick*="openSummary"] i { color: var(--rd-accent, #00e6f0) !important; }

/* Override the per-button inline styles so the unified treatment
   actually wins. */
body.dashboard-page .top-bar .sum-btn[style*="background:rgba(0,255,136"],
body.dashboard-page .top-bar .sum-btn[style*="background:rgba(255,140,0"],
body.dashboard-page .top-bar .sum-btn[style*="background:rgba(255,204,0"] {
  background: linear-gradient(180deg, rgba(28,30,40,0.7), rgba(14,16,22,0.78)) !important;
}

/* Locked / gated state still uses the .gate-locked treatment,
   our unified bg doesn't override that. */
body.dashboard-page .top-bar .sum-btn.gate-locked {
  filter: saturate(.4) brightness(.78);
}

/* ══════════════════════════════════════════════════════════
   STANDINGS / MULTI / COMPARE / GAME modals — premium glass
   They all use .cmd-center; .cmd-head + .cmd-body get refined.
   ══════════════════════════════════════════════════════════ */
body.dashboard-page .cmd-overlay { z-index: 99996; }
body.dashboard-page .cmd-overlay .cmd-center {
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 50px 100px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(0,230,240,0.06) !important;
}
body.dashboard-page .cmd-overlay .cmd-head {
  background:
    linear-gradient(180deg, rgba(0,230,240,0.04), transparent) !important;
  position: relative;
}
body.dashboard-page .cmd-overlay .cmd-head::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,240,0.55), transparent);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
body.dashboard-page .cmd-overlay .cmd-title {
  font-family: 'Geist','Inter',sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}
body.dashboard-page .cmd-overlay .cmd-title i {
  font-size: 18px;
  color: var(--rd-accent, #00e6f0);
}
body.dashboard-page .cmd-overlay .cmd-close {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer;
  transition: all .15s ease;
}
body.dashboard-page .cmd-overlay .cmd-close:hover {
  background: rgba(255,80,80,0.18) !important;
  border-color: rgba(255,80,80,0.4) !important;
  color: #ff7a7a !important;
  transform: rotate(90deg);
}

/* ══════════════════════════════════════════════════════════
   SETTINGS POPUP — iframe-loaded glass modal
   ══════════════════════════════════════════════════════════ */
#de-settings-modal {
  position: fixed; inset: 0;
  z-index: 100040;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .3s ease;
}
#de-settings-modal.open { display: flex; opacity: 1; }
#de-settings-modal .de-set-bg {
  position: absolute; inset: 0;
  background: rgba(4,5,8,0.66);
  backdrop-filter: blur(16px) saturate(0.9);
  -webkit-backdrop-filter: blur(16px) saturate(0.9);
}
#de-settings-modal .de-set-card {
  position: relative;
  width: min(960px, 100%);
  height: min(720px, 90vh);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,24,32,0.96), rgba(12,14,20,0.96));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 50px 100px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(0,230,240,0.06);
  transform: scale(.96) translateY(8px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
#de-settings-modal.open .de-set-card { transform: scale(1) translateY(0); }
#de-settings-modal .de-set-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,240,0.55), transparent);
}
#de-settings-modal .de-set-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0,230,240,0.04), transparent);
}
#de-settings-modal .de-set-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rd-accent, #00e6f0);
}
#de-settings-modal .de-set-title {
  flex: 1;
  font-family: 'Geist','Inter',sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin-left: 8px;
}
#de-settings-modal .de-set-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--rd-text, #e9eaee);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all .15s ease;
}
#de-settings-modal .de-set-close:hover {
  background: rgba(255,80,80,0.18);
  border-color: rgba(255,80,80,0.4);
  color: #ff7a7a;
  transform: rotate(90deg);
}
#de-settings-modal .de-set-frame {
  flex: 1;
  background: #06070a;
  position: relative;
  overflow: hidden;
}
#de-settings-modal .de-set-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #06070a;
  color-scheme: dark;
}
@media (max-width: 720px) {
  #de-settings-modal { padding: 10px; }
  #de-settings-modal .de-set-card { height: 96vh; border-radius: 14px; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD TOP BAR — bump contrast so it's distinguishable
   from the page background. Was nearly black-on-black before.
   ══════════════════════════════════════════════════════════ */
body.dashboard-page header.top-bar {
  background:
    linear-gradient(180deg, rgba(20,22,30,0.92), rgba(10,12,18,0.85)) !important;
  border-bottom: 1px solid rgba(0,230,240,0.1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 30px -22px rgba(0,0,0,0.7);
  position: relative;
}
body.dashboard-page header.top-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,240,0.45), transparent);
  pointer-events: none;
}

/* Group the action buttons in a glass tray so they read as one
   coherent control cluster instead of floating tiles. */
body.dashboard-page .top-bar > button.standings-btn,
body.dashboard-page .top-bar > button.sum-btn {
  flex-shrink: 0;
}
body.dashboard-page .top-bar .view-tabs {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
body.dashboard-page .top-bar .vt-btn {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: none !important;
  color: var(--rd-text-dim, #8a8d96) !important;
  cursor: pointer;
  transition: background .18s ease, color .18s ease !important;
}
body.dashboard-page .top-bar .vt-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}
body.dashboard-page .top-bar .vt-btn.active {
  background: linear-gradient(180deg, rgba(0,230,240,0.16), rgba(0,230,240,0.06)) !important;
  color: var(--rd-accent, #00e6f0) !important;
  box-shadow: inset 0 1px 0 rgba(0,230,240,0.25);
}

/* ══════════════════════════════════════════════════════════
   STANDINGS / MULTI / COMPARE / GAME modal BODIES
   These use generic .cmd-body — we don't know each modal's exact
   inner markup but we can lift typography + table styling.
   ══════════════════════════════════════════════════════════ */
body.dashboard-page .cmd-overlay .cmd-body {
  font-family: 'Geist','Inter',sans-serif !important;
  color: var(--rd-text, #e9eaee) !important;
  padding: 22px 26px !important;
}
body.dashboard-page .cmd-overlay .cmd-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}
body.dashboard-page .cmd-overlay .cmd-body table th {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--rd-accent, #00e6f0) !important;
  text-align: left !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(0,230,240,0.18) !important;
  background: linear-gradient(180deg, rgba(0,230,240,0.04), transparent) !important;
}
body.dashboard-page .cmd-overlay .cmd-body table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--rd-text, #e9eaee) !important;
  font-variant-numeric: tabular-nums;
}
body.dashboard-page .cmd-overlay .cmd-body table tr:hover td {
  background: rgba(0,230,240,0.04) !important;
}

/* Generic inputs / selects inside modals */
body.dashboard-page .cmd-overlay .cmd-body input,
body.dashboard-page .cmd-overlay .cmd-body select,
body.dashboard-page .cmd-overlay .cmd-body textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-family: 'Geist','Inter',sans-serif !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  transition: border-color .15s ease, background .15s ease !important;
}
body.dashboard-page .cmd-overlay .cmd-body input:focus,
body.dashboard-page .cmd-overlay .cmd-body select:focus,
body.dashboard-page .cmd-overlay .cmd-body textarea:focus {
  outline: none !important;
  border-color: rgba(0,230,240,0.5) !important;
  background: rgba(0,230,240,0.04) !important;
}

/* Multi-driver picker grid (used in openMultiCmp etc) */
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-pick"],
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-tile"],
body.dashboard-page .cmd-overlay .cmd-body [class*="cmp-driver"] {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(28,30,40,0.6), rgba(14,16,22,0.6)) !important;
  transition: border-color .18s ease, transform .18s ease !important;
}
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-pick"]:hover,
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-tile"]:hover,
body.dashboard-page .cmd-overlay .cmd-body [class*="cmp-driver"]:hover {
  border-color: rgba(0,230,240,0.4) !important;
  transform: translateY(-2px);
}
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-pick"].active,
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-tile"].active,
body.dashboard-page .cmd-overlay .cmd-body [class*="cmp-driver"].active,
body.dashboard-page .cmd-overlay .cmd-body [class*="driver-pick"].selected,
body.dashboard-page .cmd-overlay .cmd-body [class*="cmp-driver"].selected {
  border-color: rgba(0,230,240,0.6) !important;
  background: linear-gradient(180deg, rgba(0,230,240,0.16), rgba(0,230,240,0.04)) !important;
  box-shadow: 0 0 22px rgba(0,230,240,0.3) !important;
}

/* Buttons inside modals */
body.dashboard-page .cmd-overlay .cmd-body button:not(.cmd-close):not(.de-set-close) {
  font-family: 'Geist Mono','JetBrains Mono',monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, rgba(28,30,40,0.7), rgba(14,16,22,0.78)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  cursor: pointer;
  transition: all .18s ease !important;
}
body.dashboard-page .cmd-overlay .cmd-body button:not(.cmd-close):not(.de-set-close):hover {
  border-color: rgba(0,230,240,0.4) !important;
  background:
    linear-gradient(180deg, rgba(0,230,240,0.08), rgba(0,230,240,0.02)) !important;
  transform: translateY(-1px);
}

/* Mobile usability — bigger touch targets, simpler layout */
@media (max-width: 768px) {
  body.dashboard-page header.top-bar {
    padding: 10px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  body.dashboard-page .top-bar .standings-btn,
  body.dashboard-page .top-bar .sum-btn,
  body.dashboard-page .top-bar .eng-btn {
    padding: 9px 11px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    min-height: 38px;
  }
  body.dashboard-page .top-bar .sum-btn-label {
    display: none;
  }
  body.dashboard-page .top-bar .standings-btn span:not([class]),
  body.dashboard-page .top-bar .standings-btn:not(:has(i:only-child)) {
    /* Keep text on standings even on mobile */
  }
  body.dashboard-page .cmd-overlay .cmd-body { padding: 14px 16px !important; }
  body.dashboard-page .cmd-overlay .cmd-center { width: 96vw !important; max-width: 96vw !important; }
  body.dashboard-page #user-dropdown {
    position: fixed !important;
    top: 60px !important;
    right: 8px !important;
    left: auto !important;
    min-width: 220px !important;
    max-width: calc(100vw - 16px);
  }
}