/* VCM shared shell — bottom nav + light/dark cards */
:root, [data-theme="dark"] {
  --bg: #0b0c0e;
  --card: #1a1c20;
  --panel: #1e2126;
  --line: #3a4048;
  --text: #e8eaed;
  --muted: #9aa3ad;
  --silver: #c5ccd4;
  --red: #c8102e;
  --red2: #e31c3d;
  --burgundy: #6b1020;
  --gold: #f0c14a;
  --good: #2fbf6b;
  --nav-h: 58px;
  --nav-bg: #121418;
  --nav-border: #2a2e34;
  --nav-icon: #9aa3ad;
  --nav-on: #fff;
  --nav-on-bg: rgba(200,16,46,.18);
  --shadow: 0 8px 28px rgba(0,0,0,.35);
  --player-gold: #f0c14a;
  --track: #2a2e34;
  --btn: #2a2e34;
  --header-bg: linear-gradient(90deg, #0e0f11, #2a0a10);
}

[data-theme="light"] {
  --bg: #e4e8ee;
  --card: #ffffff;
  --panel: #f7f8fa;
  --line: #c8d0d8;
  --text: #1a1d21;
  --muted: #5a6370;
  --silver: #3a424c;
  --red: #9b0d24;
  --red2: #8b0f22;
  --burgundy: #6b1020;
  --gold: #8a6510;
  --good: #1a7a42;
  --nav-bg: #ffffff;
  --nav-border: #d0d6de;
  --nav-icon: #5a6370;
  --nav-on: #6b1020;
  --nav-on-bg: rgba(107,16,32,.1);
  --shadow: 0 8px 24px rgba(30,40,60,.1);
  --player-gold: #8a6510;
  --track: #d8dde4;
  --btn: #e8eaed;
  --header-bg: linear-gradient(90deg, #f5f0e6, #ebe4d4);
}


html, body { background: var(--bg); color: var(--text); }
/* Content area sits above bottom nav — never scroll under it */
html { height: 100%; }
body.has-bottom-nav {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 8px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}
body.has-bottom-nav > .wrap,
body.has-bottom-nav > .stage,
body.has-bottom-nav > .page {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
body.has-bottom-nav > .hint {
  flex: 0 0 auto;
  font-size: 10px;
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted);
}

/* Bottom nav */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.2);
}
.bottom-nav a, .bottom-nav button.nav-item {
  flex: 1 1 0; min-width: 0; max-width: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; border: 0; background: transparent;
  color: var(--nav-icon); font-size: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  padding: 5px 1px 6px; border-radius: 8px 8px 0 0;
  font-family: inherit;
}
.bottom-nav a.on, .bottom-nav button.nav-item.on {
  color: var(--nav-on); background: var(--nav-on-bg);
}
.bottom-nav a.on svg, .bottom-nav button.nav-item.on svg {
  stroke: var(--red2);
}
.bottom-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@media (max-width: 380px) {
  .bottom-nav a span, .bottom-nav button.nav-item span { font-size: 7px; }
  .bottom-nav svg { width: 16px; height: 16px; }
}
.bottom-nav .theme-slot {
  position: absolute; right: 8px; top: -36px;
}
.bottom-nav .theme-fab {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--gold);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow);
}
.bottom-nav .theme-fab svg { width: 16px; height: 16px; }

/* More sheet */
.more-sheet {
  position: fixed; inset: 0; z-index: 250; display: none;
  background: rgba(0,0,0,.55); align-items: flex-end; justify-content: center;
}
.more-sheet.open { display: flex; }
.more-sheet .sheet {
  width: min(420px, 100%); background: var(--card); color: var(--text);
  border-radius: 16px 16px 0 0; border: 1px solid var(--line);
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow);
}
.more-sheet h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.more-sheet a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px; border-radius: 8px; text-decoration: none;
  color: var(--text); font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
}
.more-sheet a:hover { background: var(--panel); border-color: var(--line); }
.more-sheet a span.sub { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
.more-sheet .close {
  width: 100%; margin-top: 8px; padding: 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-weight: 800; cursor: pointer; font-size: 12px;
}

/* Cards light mode text */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .summary {
  color: var(--text);
}
[data-theme="light"] .card h1,
[data-theme="light"] .card h2,
[data-theme="light"] .hero h1 {
  color: var(--burgundy);
}
[data-theme="light"] .muted,
[data-theme="light"] .sub,
[data-theme="light"] .meta { color: var(--muted); }
[data-theme="light"] .stat b { color: var(--burgundy); }
[data-theme="light"] .gold,
[data-theme="light"] .msg .who { color: var(--burgundy); }

/* Player font scale */
html.fs-sm { font-size: 14px; }
html.fs-md { font-size: 16px; }
html.fs-lg { font-size: 18px; }
html.fs-xl { font-size: 20px; }


/* ===== Multi-theme surfaces ===== */
/* Dark (default) */
html[data-theme="dark"] {
  --bg: #0b0c0e;
  --panel: #1a1c20;
  --card: #1e2126;
  --line: #3a4048;
  --text: #e8eaed;
  --muted: #9aa3ad;
  --silver: #c5ccd4;
  --gold: #f0c14a;
  --red: #c8102e;
  --burgundy: #6b1020;
  --accent: #c8102e;
  --hl: #f0c14a;
  --header-bg: linear-gradient(90deg, #0e0f11, #1a1c20 50%, #2a0a10);
  --btn-bg: #2a2e34;
}

/* GT themes: DARK chrome + one accent. Never wash the whole app in jersey pink/gold/red. */

/* TdF — yellow jersey as accent only */
html[data-theme="tdf"],
html[data-theme="light"] {
  --bg: #10110c;
  --panel: #181910;
  --card: #1c1d14;
  --line: #3a3a22;
  --text: #f4f1e0;
  --muted: #a8a078;
  --silver: #c8c4a8;
  --gold: #ffd200;
  --red: #c8102e;
  --burgundy: #6b5010;
  --accent: #ffd200;
  --hl: #ffe566;
  --header-bg: linear-gradient(90deg, #0c0c08, #1a180c 55%, #3a3208);
  --btn-bg: #2a2814;
}

/* Giro — maglia rosa as accent only */
html[data-theme="giro"] {
  --bg: #12080e;
  --panel: #1a1016;
  --card: #1e141a;
  --line: #4a2838;
  --text: #f6eef3;
  --muted: #b898a8;
  --silver: #d4c0ca;
  --gold: #f266a9;
  --red: #e94e8f;
  --burgundy: #7a2048;
  --accent: #f266a9;
  --hl: #ffb3d4;
  --header-bg: linear-gradient(90deg, #0e0a0c, #241018 55%, #f266a9);
  --btn-bg: #2a1820;
}

/* Vuelta — red jersey as accent only */
html[data-theme="vuelta"] {
  --bg: #12080a;
  --panel: #1a1012;
  --card: #1e1416;
  --line: #4a2226;
  --text: #f6eeef;
  --muted: #b8989a;
  --silver: #d4c0c2;
  --gold: #ef3340;
  --red: #ef3340;
  --burgundy: #6b1018;
  --accent: #ef3340;
  --hl: #ff8a90;
  --header-bg: linear-gradient(90deg, #0e0a0a, #241014 55%, #ef3340);
  --btn-bg: #2a1416;
}

html[data-theme="tdf"] body,
html[data-theme="giro"] body,
html[data-theme="vuelta"] body,
html[data-theme="light"] body {
  color: var(--text);
}

/* Light packs: force panels/cards off pure black */
html[data-theme="tdf"] .card,
html[data-theme="tdf"] .panel,
html[data-theme="tdf"] .stage,
html[data-theme="giro"] .card,
html[data-theme="giro"] .panel,
html[data-theme="giro"] .stage,
html[data-theme="vuelta"] .card,
html[data-theme="vuelta"] .panel,
html[data-theme="vuelta"] .stage,
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stage {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="tdf"] .topbar,
html[data-theme="tdf"] .topstrip,
html[data-theme="giro"] .topbar,
html[data-theme="giro"] .topstrip,
html[data-theme="vuelta"] .topbar,
html[data-theme="vuelta"] .topstrip,
html[data-theme="light"] .topbar,
html[data-theme="light"] .topstrip {
  background: var(--header-bg) !important;
  color: #f0f0f0 !important;
}
html[data-theme="tdf"] .topbar .mid,
html[data-theme="giro"] .topbar .mid,
html[data-theme="vuelta"] .topbar .mid,
html[data-theme="light"] .topbar .mid { color: #fff !important; }

html[data-theme="tdf"] .btn.primary,
html[data-theme="light"] .btn.primary {
  background: linear-gradient(180deg, #e0c040, #a08010) !important;
  border-color: #c9a227 !important;
  color: #1a1200 !important;
}
html[data-theme="giro"] .btn.primary {
  background: linear-gradient(180deg, #e060b0, #a02060) !important;
  border-color: #d946a6 !important;
  color: #fff !important;
}
html[data-theme="vuelta"] .btn.primary {
  background: linear-gradient(180deg, #c04048, #6b1018) !important;
  border-color: #a01820 !important;
  color: #fff !important;
}

/* Highlights use --hl */
html[data-theme="tdf"] .hl,
html[data-theme="tdf"] b,
html[data-theme="light"] .hl { color: var(--hl) !important; }

/* Font scale — more dramatic */
html.fs-sm { font-size: 13px !important; }
html.fs-md { font-size: 16px !important; }
html.fs-lg { font-size: 19px !important; }
html.fs-xl { font-size: 22px !important; }
html.fs-sm body { zoom: 0.88; }
html.fs-lg body { zoom: 1.12; }
html.fs-xl body { zoom: 1.22; }

.vcm-fs {
  display: inline-flex; gap: 4px; align-items: center;
}
.vcm-fs button {
  min-width: 32px; height: 30px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-weight: 800; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0 6px;
}




/* ===== Global game chrome: landing art + glass cards ===== */
html {
  min-height: 100%;
}
html, body {
  background-color: #0b0c0e;
  background-image:
    linear-gradient(180deg, rgba(8, 8, 10, 0.42) 0%, rgba(10, 10, 14, 0.55) 45%, rgba(12, 8, 12, 0.78) 100%),
    url('assets/branding/bg-peloton.jpg');
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Theme washes on top of the same photo */
html[data-theme="dark"] {
  background-image:
    linear-gradient(180deg, rgba(8, 8, 10, 0.55) 0%, rgba(10, 10, 14, 0.68) 50%, rgba(8, 8, 12, 0.82) 100%),
    url('assets/branding/bg-peloton.jpg');
}
html[data-theme="tdf"],
html[data-theme="light"] {
  background-image:
    linear-gradient(180deg, rgba(201, 162, 39, 0.42) 0%, rgba(100, 75, 15, 0.55) 100%),
    url('assets/branding/bg-peloton.jpg');
}
html[data-theme="giro"] {
  background-image:
    linear-gradient(180deg, rgba(80, 20, 50, 0.28) 0%, rgba(40, 10, 28, 0.55) 100%),
    url('assets/branding/bg-peloton.jpg');
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
}
html[data-theme="vuelta"] {
  background-image:
    linear-gradient(180deg, rgba(90, 12, 18, 0.50) 0%, rgba(40, 6, 10, 0.68) 100%),
    url('assets/branding/bg-peloton.jpg');
}

html[data-theme="tdf"] body,
html[data-theme="giro"] body,
html[data-theme="vuelta"] body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background: transparent !important;
}

/* Glass panels — translucent so peloton shows through (not headers) */
.card,
.panel,
.stage,
.wrap > .card,
.grid > .card,
.club,
.modal-box,
.summary,
.list-panel,
.main-panel,
.sq-wrap,
.media-main,
.media-side,
.rank-card,
.budget-card,
.filters,
.list-col,
.info,
.main,
.chart-wrap {
  background: rgba(22, 24, 28, 0.78) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="tdf"] .card,
html[data-theme="tdf"] .panel,
html[data-theme="tdf"] .stage,
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stage,
html[data-theme="giro"] .card,
html[data-theme="giro"] .panel,
html[data-theme="giro"] .stage,
html[data-theme="vuelta"] .card,
html[data-theme="vuelta"] .panel,
html[data-theme="vuelta"] .stage,
html[data-theme="tdf"] .filters,
html[data-theme="light"] .filters,
html[data-theme="tdf"] .list-col,
html[data-theme="light"] .list-col,
html[data-theme="tdf"] .info,
html[data-theme="light"] .info,
html[data-theme="tdf"] .main,
html[data-theme="light"] .main {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text) !important;
}

/* Keep headers / topstrips denser for contrast (not glass) */
.topstrip,
.topbar,
.hero-bar,
.bottom-nav,
.more-sheet .sheet {
  backdrop-filter: none;
}

/* Table bodies stay readable */
table.sq tbody td {
  background: transparent;
}


/* hide legacy light/dark toggles — theme pack lives in More sheet */
#themeBtn, .theme-btn, .theme-fab, .bottom-nav .theme-slot {
  display: none !important;
}

/* Classified climb / sprint markers — red circle + green S */
.vcm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  vertical-align: middle;
}
.vcm-badge.mtn { background: #c8102e; }
.vcm-badge.sprint { background: #1a9a4a; }
.vcm-badge.tt { background: #d4a017; color: #1a1200; }
.vcm-badge.hc { min-width: 20px; font-size: 7px; }
.vcm-badge-row { display: inline-flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.vcm-marks {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
}
.vcm-mark {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
}
.vcm-mark em {
  display: block;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  color: #1a1d21;
  background: rgba(255,255,255,.78);
  padding: 0 3px;
  border-radius: 2px;
  margin-top: 2px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vcm-earn {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(0,0,0,.18);
  font-size: 12px;
}
.vcm-earn h3 { font-size: 11px; color: var(--gold); text-transform: uppercase; margin: 0 0 6px; }
.vcm-earn .row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.vcm-earn .tot { font-weight: 800; color: var(--gold); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }


/* Failsafe: never leave the boot card on screen if JS boot never finishes */
#vcmLoad {
  animation: vcm-load-autohide 0.2s ease 4s forwards;
}
@keyframes vcm-load-autohide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}


/* Giro / TdF / Vuelta: no white sheets with white type */
html[data-theme="giro"] table,
html[data-theme="giro"] thead,
html[data-theme="giro"] tbody,
html[data-theme="giro"] tr,
html[data-theme="giro"] .roster,
html[data-theme="giro"] .legend,
html[data-theme="giro"] .weather-legend,
html[data-theme="giro"] .media-main,
html[data-theme="giro"] .media-card,
html[data-theme="giro"] .sheet,
html[data-theme="giro"] .list-panel,
html[data-theme="giro"] .main-panel,
html[data-theme="tdf"] table,
html[data-theme="tdf"] thead,
html[data-theme="tdf"] tbody,
html[data-theme="vuelta"] table,
html[data-theme="vuelta"] thead,
html[data-theme="vuelta"] tbody {
  background: #24141c !important;
  color: #fff !important;
}
html[data-theme="giro"] td,
html[data-theme="giro"] th,
html[data-theme="giro"] .muted,
html[data-theme="tdf"] td,
html[data-theme="tdf"] th,
html[data-theme="vuelta"] td,
html[data-theme="vuelta"] th {
  color: #fff !important;
}
html[data-theme="giro"] .muted { color: #f0c0d4 !important; }

/* leftover paper-white blocks → mid magenta so white titles read */
html[data-theme="giro"] [style*="background:#fff"],
html[data-theme="giro"] [style*="background: #fff"],
html[data-theme="giro"] [style*="background-color:#fff"],
html[data-theme="giro"] [style*="background-color: #fff"],
html[data-theme="giro"] [style*="background:#ffffff"],
html[data-theme="giro"] [style*="background: #ffffff"] {
  background: #6b3050 !important;
  color: #fff !important;
}


/* T-53/27s — Giro: pink paper cards, dark rows, readable squad/train */

html[data-theme="giro"] .card,
html[data-theme="giro"] .panel,
html[data-theme="giro"] .club,
html[data-theme="giro"] .grid > .card,
html[data-theme="giro"] .wrap > .card {
  background: rgba(244, 210, 226, 0.94) !important;
  color: #2a1020 !important;
}
html[data-theme="giro"] .card h2,
html[data-theme="giro"] .club .mgr,
html[data-theme="giro"] .stat span {
  color: #7a3058 !important;
}
html[data-theme="giro"] .stat b,
html[data-theme="giro"] .club .team,
html[data-theme="giro"] h1,
html[data-theme="giro"] h3 {
  color: #3a1028 !important;
}

/* messages + calendar rows: darker so white type pops */
html[data-theme="giro"] .msg,
html[data-theme="giro"] .cal-row {
  background: #4a2038 !important;
  color: #fff !important;
  border-color: #6a3050;
}
html[data-theme="giro"] .msg .who,
html[data-theme="giro"] .msg .del,
html[data-theme="giro"] .cal-row .d,
html[data-theme="giro"] .cal-row .nm,
html[data-theme="giro"] .cal-row .st {
  color: #fff !important;
}
html[data-theme="giro"] .cal-row.today {
  background: #7a3060 !important;
}
html[data-theme="giro"] .msg.ok { background: #2a4030 !important; }
html[data-theme="giro"] .msg.alert { background: #5a2030 !important; }

/* squad cards: mid magenta, white type — not near-black */
html[data-theme="giro"] .rcard {
  background: #5a2840 !important;
  color: #fff !important;
  border-color: #8a4068 !important;
}
html[data-theme="giro"] .rcard h3,
html[data-theme="giro"] .rcard .meta,
html[data-theme="giro"] .rcard .metrics b,
html[data-theme="giro"] .rcard .metrics span,
html[data-theme="giro"] .rcard .last-res {
  color: #fff !important;
}
html[data-theme="giro"] .rcard .metrics span { color: #f0c0d4 !important; }

/* weather legend: mid pink, dark text */
html[data-theme="giro"] #wxLegend,
html[data-theme="giro"] #wxLegend * {
  background: #e8b8d0 !important;
  color: #3a1028 !important;
}

/* train + planner name column like peaks */
html[data-theme="giro"] .row .gutter,
html[data-theme="giro"] .corner,
html[data-theme="tdf"] .row .gutter,
html[data-theme="tdf"] .corner,
html[data-theme="vuelta"] .row .gutter,
html[data-theme="vuelta"] .corner,
html[data-theme="dark"] .row .gutter,
html[data-theme="dark"] .corner {
  background: #1a1016 !important;
  color: #fff !important;
}
html[data-theme="giro"] .row.focus .gutter {
  background: #3a1828 !important;
}


/* T-53/27t */
html[data-theme="giro"] .card,
html[data-theme="giro"] .panel,
html[data-theme="giro"] .club,
html[data-theme="giro"] .grid > .card,
html[data-theme="giro"] .wrap > .card,
html[data-theme="giro"] .rank-card,
html[data-theme="giro"] .budget-card,
html[data-theme="giro"] .stage {
  background: #e59ac0 !important;
  color: #2a1020 !important;
}
html[data-theme="giro"] .kit-wrap,
html[data-theme="giro"] #kit {
  background: #3a1028 !important;
  border-radius: 12px;
}

/* rankings / tables */
html[data-theme="giro"] table thead th {
  background: #c56a98 !important;
  color: #fff !important;
}
html[data-theme="giro"] table tbody td,
html[data-theme="giro"] table tbody tr,
html[data-theme="giro"] table.sq tbody td {
  background: #3a1828 !important;
  color: #fff !important;
}
html[data-theme="giro"] .rcard {
  background: #4a2038 !important;
}
html[data-theme="giro"] table tbody tr.player td,
html[data-theme="giro"] table tbody tr.player {
  background: rgba(242,102,169,.38) !important;
  color: #ffe6f4 !important;
}
html[data-theme="tdf"] table tbody tr.player td {
  background: rgba(255,210,0,.28) !important;
  color: #fff6c8 !important;
}
html[data-theme="vuelta"] table tbody tr.player td {
  background: rgba(227,28,61,.32) !important;
  color: #ffd0d4 !important;
}

/* transfers / bids stay dark magenta, not raw black */
html[data-theme="giro"] .fa-wrap,
html[data-theme="giro"] .bid-card,
html[data-theme="giro"] .list-col,
html[data-theme="giro"] .info,
html[data-theme="giro"] .main,
html[data-theme="giro"] .log,
html[data-theme="giro"] .window,
html[data-theme="giro"] #faTable,
html[data-theme="giro"] .col {
  background: #2a1420 !important;
  color: #fff !important;
  border-color: #6a3050 !important;
}

/* forum */
html[data-theme="giro"] .layout > .card,
html[data-theme="giro"] #secList,
html[data-theme="giro"] #main.card {
  background: #3a1828 !important;
  color: #fff !important;
}
html[data-theme="giro"] .sec .t,
html[data-theme="giro"] .panel-head h2,
html[data-theme="giro"] .thread .title { color: #fff !important; }
html[data-theme="giro"] .sec .d,
html[data-theme="giro"] .sec .m,
html[data-theme="giro"] .thread .meta { color: #f0c0d4 !important; }
html[data-theme="giro"] .sec.on {
  background: #7a3060 !important;
  border-color: #f266a9 !important;
}

/* career curves — keep chart dark so lines read */
html[data-theme="giro"] .career-page .card,
html[data-theme="giro"] body.career-page .card {
  background: #241018 !important;
  color: #f6eef3 !important;
}


/* T-53/27u — 40% glass pink, darker type, budget off-white */
html[data-theme="giro"] .card,
html[data-theme="giro"] .panel,
html[data-theme="giro"] .club,
html[data-theme="giro"] .grid > .card,
html[data-theme="giro"] .wrap > .card,
html[data-theme="giro"] .rank-card,
html[data-theme="giro"] .stage {
  background: rgba(229, 154, 192, 0.40) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1a0810 !important;
}
html[data-theme="giro"] .club .team,
html[data-theme="giro"] .mgr-meta,
html[data-theme="giro"] .mgr-meta .stats,
html[data-theme="giro"] #mgrStatsStrip,
html[data-theme="giro"] .club h2,
html[data-theme="giro"] .card h2 {
  color: #2a0c18 !important;
}
html[data-theme="giro"] #mgrStatsStrip b,
html[data-theme="giro"] .mgr-meta .stats b {
  color: #7a1848 !important;
}

/* budget header tiles */
html[data-theme="giro"] .summary .stat b,
html[data-theme="giro"] .summary .stat span {
  color: #f7eef3 !important;
}

html[data-theme="giro"] .banner h1 { color: #ff8ec8 !important; }

html[data-theme="giro"] body.has-bottom-nav > .stage {
  max-height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px));
}


/* T-53/27v */
html[data-theme="giro"] .modal-box h3,
html[data-theme="giro"] .modal-box h2,
html[data-theme="giro"] .pop h4,
html[data-theme="giro"] .stat-tip b {
  color: #ff8ec8 !important;
}
html[data-theme="tdf"] .modal-box h3,
html[data-theme="tdf"] .modal-box h2 { color: #ffd200 !important; }
html[data-theme="vuelta"] .modal-box h3,
html[data-theme="vuelta"] .modal-box h2 { color: #ff6b7a !important; }

html[data-theme="giro"] #tickMsg { color: #fff !important; }