/* BMVP-LIGHT-OK — integrity sentinel, must stay line 1 */
/* ================================================================
   BATTLE MVP — theme-light.css
   Loads LAST, light theme only. Turns the former "dark islands"
   into normal light cards: art dimmed to a texture, dark ink,
   visible hairlines on every card. Dark theme is untouched.
   ================================================================ */

/* -- stronger hairlines + a real shadow so cards separate -------- */
html[data-theme="light"]{
  --bm-l1:rgba(13,23,33,.10);
  --bm-l2:rgba(13,23,33,.16);
  --bm-l3:rgba(13,23,33,.22);
  --bm-l4:rgba(13,23,33,.32);
  --bm-shadow:0 1px 3px rgba(13,23,33,.07);
  --bm-media:#ffffff;
  --bm-media-tx:#0d1721;
  --bm-media-mu:#59697b;
  --bm-media-line:rgba(13,23,33,.16);
}

/* -- 1. art becomes a faint texture instead of a black plate ----- */
html[data-theme="light"] .hp2-hero-art,
html[data-theme="light"] .hp2-hero-veil,
html[data-theme="light"] .hp2-promo--art::after,
html[data-theme="light"] .hp2-mode--art::after,
html[data-theme="light"] .hp2-kpi.has-art::after,
html[data-theme="light"] .hp2-flow-art.has-art,
html[data-theme="light"] .bt-hero::before,
html[data-theme="light"] .bt-hero::after,
html[data-theme="light"] .bt-srv::before,
html[data-theme="light"] .bt-coach::before,
html[data-theme="light"] .bt-coach::after,
html[data-theme="light"] .bt-game::before{opacity:.06;}

html[data-theme="light"] .hp2-hero,
html[data-theme="light"] .hp2-kpi.has-art,
html[data-theme="light"] .bt-hero,
html[data-theme="light"] .bt-srv,
html[data-theme="light"] .bt-coach,
html[data-theme="light"] .bt-game{background-color:var(--bm-card);}

/* -- 2. ink goes dark everywhere (overrides the island layers) --- */
html[data-theme="light"] .hp2-hero-body,
html[data-theme="light"] .hp2-hero-body .hp2-badge,
html[data-theme="light"] .hp2-mode--art .hp2-mode-t,
html[data-theme="light"] .hp2-why-card--art .hp2-why-t,
html[data-theme="light"] .hp2-promo--art .hp2-promo-t,
html[data-theme="light"] .hp2-promo--art .hp2-promo-hl,
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-val,
html[data-theme="light"] .hp2-flow-step:has(.hp2-flow-art.has-art) .hp2-flow-t,
html[data-theme="light"] .bt-srv:not(.no-art) .bt-srv-name,
html[data-theme="light"] .bt-srv:not(.no-art) .bt-srv-meta b,
html[data-theme="light"] .bt-coach:not(.no-art) h3,
html[data-theme="light"] .bt-game:not(.no-art) .nm{color:var(--bm-tx);}

html[data-theme="light"] .hp2-hero-body .hp2-sub,
html[data-theme="light"] .hp2-mode--art .hp2-mode-s,
html[data-theme="light"] .hp2-mode--art .hp2-mode-list li,
html[data-theme="light"] .hp2-why-card--art .hp2-why-s,
html[data-theme="light"] .hp2-promo--art .hp2-promo-s,
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-lbl,
html[data-theme="light"] .hp2-flow-step:has(.hp2-flow-art.has-art) .hp2-flow-s,
html[data-theme="light"] .bt-srv:not(.no-art) .bt-srv-sub,
html[data-theme="light"] .bt-srv:not(.no-art) .bt-srv-desc,
html[data-theme="light"] .bt-srv:not(.no-art) .bt-srv-meta,
html[data-theme="light"] .bt-coach:not(.no-art) .cd,
html[data-theme="light"] .bt-coach:not(.no-art) .bt-coach-note,
html[data-theme="light"] .bt-game:not(.no-art) .ds,
html[data-theme="light"] .bt-game:not(.no-art) .pb{color:var(--bm-mu);}

/* ghost button was tuned for a dark plate */
html[data-theme="light"] .hp2-hero-body .hp2-btn--ghost{
  color:var(--bm-tx);border-color:var(--bm-l3);background:var(--bm-card);}
html[data-theme="light"] .hp2-hero-body .hp2-btn--ghost:hover{
  background:var(--bm-w2);}

/* -- 3. every card gets a visible edge --------------------------- */
html[data-theme="light"] .hp2-hero,
html[data-theme="light"] .hp2-mode,
html[data-theme="light"] .hp2-kpi,
html[data-theme="light"] .hp2-why-card,
html[data-theme="light"] .hp2-promo,
html[data-theme="light"] .hp2-flow-step,
html[data-theme="light"] .bt-hero,
html[data-theme="light"] .bt-srv,
html[data-theme="light"] .bt-game,
html[data-theme="light"] .bt-coach,
html[data-theme="light"] .rsb-blk,
html[data-theme="light"] .lsb-play-card,
html[data-theme="light"] .lsb-user-card{
  border:1px solid var(--bm-l3);
  box-shadow:var(--bm-shadow);
}

/* text riding directly on hero art needs no scrim now */
html[data-theme="light"] .hp2-hero-glow{opacity:.25;}

/* -- 4. gradient-clipped headings --------------------------------
   background-clip:text makes the glyphs themselves transparent, so
   tokens cannot reach them — the light-theme fix is a second
   gradient built from dark stops. */
html[data-theme="light"] .sitePage .siteTitle{
  background:linear-gradient(105deg,#0d1721 0%,#14304a 40%,#00714c 78%,#00708a 100%);
  text-shadow:none;
}
html[data-theme="light"] .bt-title b{
  background:linear-gradient(90deg,#00714c,#00708a);
}

/* remaining gradient-clipped headings */
html[data-theme="light"] .training-title-accent{
  background:linear-gradient(90deg,#00714c,#00708a);
}
html[data-theme="light"] .sp-h1-grd{
  background:linear-gradient(135deg,#00714c 0%,#00708a 50%,#5b3fb8 100%);
  -webkit-text-fill-color:transparent;
}
html[data-theme="light"] .mm2-status{
  background:linear-gradient(180deg,#0d1721,#14504a);
}
html[data-theme="light"] .mm2-team .mm2-status{
  background:linear-gradient(180deg,#0d1721,#14304a);
}

/* ================================================================
   5. SCRIMS
   Dimming the art was not enough: every art block also paints a
   dark veil on top (rgba(5,11,18,...) / rgba(6,12,19,...)). Those
   veils are what kept the cards dark. Light theme swaps them for
   white ones and drops the text-shadows tuned for black.
   ================================================================ */

/* mode cards: art layer + veil */
html[data-theme="light"] .hp2-mode--art::before{opacity:.10;}
html[data-theme="light"] .hp2-mode--art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.80) 50%,
    rgba(255,255,255,.92) 100%);
}
html[data-theme="light"] .hp2-mode--art:hover::before{opacity:.16;}
html[data-theme="light"] .hp2-mode--art .hp2-mode-ico{background:var(--bm-w3);}
html[data-theme="light"] .hp2-mode--art .hp2-mode-go{background:var(--bm-w2);}

/* why cards: art and veil share one paint - replace it wholesale */
html[data-theme="light"] .hp2-why-card--art{background:var(--bm-card);}
html[data-theme="light"] .hp2-why-card--art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.80) 48%,
    rgba(255,255,255,.70) 100%);
}

/* flow tiles */
html[data-theme="light"] .hp2-flow-art.has-art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 100%);
}

/* kpi tiles: readability wash behind the copy */
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-b::before{
  background:linear-gradient(90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.78) 55%,
    rgba(255,255,255,0)  100%);
}

/* hero veil */
html[data-theme="light"] .hp2-hero-veil{
  background:linear-gradient(90deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.86) 42%,
    rgba(255,255,255,.96) 78%);
  opacity:1;
}

/* text shadows were built for a black plate */
html[data-theme="light"] .hp2-mode--art .hp2-mode-t,
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-val,
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-lbl,
html[data-theme="light"] .hp2-hero-body .hp2-title,
html[data-theme="light"] .hp2-hero-body .hp2-sub{text-shadow:none;}

/* accent list markers need the ink variant on white */
html[data-theme="light"] .hp2-mode--art .hp2-mode-list b{color:var(--bm-acc-ink);}

/* ================================================================
   6. PER-BLOCK ART LEVELS
   One blanket opacity was wrong. Where copy sits ON the artwork it
   must stay faint; where copy sits BESIDE it (hero, flow tiles, kpi)
   the art can run near full strength and still read cleanly.
   ================================================================ */

/* art beside the copy - bring it back */
html[data-theme="light"] .hp2-hero-art{opacity:.85;}
html[data-theme="light"] .hp2-flow-art.has-art{opacity:.90;}
html[data-theme="light"] .hp2-kpi.has-art::after{opacity:.80;}
html[data-theme="light"] .hp2-promo--art::after{opacity:.55;}
html[data-theme="light"] .bt-hero::before{opacity:.75;}
html[data-theme="light"] .bt-srv::before{opacity:.55;}
html[data-theme="light"] .bt-game::before{opacity:.55;}
html[data-theme="light"] .bt-coach::before{opacity:.65;}

/* hero veil: clear on the art side, opaque under the copy */
html[data-theme="light"] .hp2-hero-veil{
  background:linear-gradient(90deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.55) 34%,
    rgba(255,255,255,.92) 58%,
    rgba(255,255,255,.97) 100%);
}

/* flow tiles: veil only at the bottom edge, art stays legible */
html[data-theme="light"] .hp2-flow-art.has-art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 100%);
}

/* accent text on white needs the ink variant, not the fill */
html[data-theme="light"] .hp2-mode-go,
html[data-theme="light"] .hp2-mode--art .hp2-mode-go,
html[data-theme="light"] .hp2-sec-more:hover,
html[data-theme="light"] .hp2-flow-ico{color:var(--bm-acc-ink);}

/* ================================================================
   7. CORRECTIONS
   Flow tiles and promos carry their copy ON the art, not beside it,
   so they belong to the "faint" group after all. The clipped title
   also needs its text-fill kept transparent.
   ================================================================ */

/* flow tiles: copy sits over the art -> keep it faint */
html[data-theme="light"] .hp2-flow-art.has-art{opacity:.22;}
html[data-theme="light"] .hp2-flow-art.has-art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.35) 0%, rgba(255,255,255,.75) 100%);
}

/* promo banners: same case */
html[data-theme="light"] .hp2-promo--art::after{opacity:.20;}
html[data-theme="light"] .hp2-promo--art.hp2-promo--cover::after{opacity:.20;}
html[data-theme="light"] .hp2-promo--art .hp2-promo-t,
html[data-theme="light"] .hp2-promo--art .hp2-promo-hl{
  color:var(--bm-tx);text-shadow:none;}
html[data-theme="light"] .hp2-promo--art .hp2-promo-s{color:var(--bm-mu);}

/* clipped headings: background alone is not enough, the glyphs must
   stay transparent or the gradient paints the whole box */
html[data-theme="light"] .sitePage .siteTitle,
html[data-theme="light"] .bt-title b,
html[data-theme="light"] .training-title-accent,
html[data-theme="light"] .mm2-status,
html[data-theme="light"] .mm2-team .mm2-status{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ================================================================
   8. SURFACE DEPTH
   White cards on a near-white page have nowhere to sit. Three
   distinct levels + real hairlines so nested blocks read as nested.
   ================================================================ */
html[data-theme="light"]{
  --bm-bg:#e6ecf4;
  --bm-bg2:#eef2f7;
  --bm-card:#ffffff;
  --bm-card2:#f2f6fb;
  --bm-elev:#ffffff;
  --bm-w1:rgba(13,23,33,.035);
  --bm-w2:rgba(13,23,33,.055);
  --bm-w3:rgba(13,23,33,.075);
  --bm-w4:rgba(13,23,33,.11);
  --bm-l1:rgba(13,23,33,.13);
  --bm-l2:rgba(13,23,33,.19);
  --bm-l3:rgba(13,23,33,.28);
  --bm-l4:rgba(13,23,33,.38);
  --bm-shadow:0 1px 2px rgba(13,23,33,.06);
  --bm-shadow-lg:0 6px 20px rgba(13,23,33,.10);
}

/* every top-level card: white plate, clear edge, slight lift */
html[data-theme="light"] .hp2-sec-card,
html[data-theme="light"] .hp2-flow,
html[data-theme="light"] .hp2-why,
html[data-theme="light"] .hp2-panel,
html[data-theme="light"] .bm-card,
html[data-theme="light"] .m-card,
html[data-theme="light"] .mm2-card,
html[data-theme="light"] .rk-card,
html[data-theme="light"] .sp-card,
html[data-theme="light"] .ch-card,
html[data-theme="light"] .bt-card,
html[data-theme="light"] .bt-lb,
html[data-theme="light"] .feed-card,
html[data-theme="light"] .cc-card,
html[data-theme="light"] .rsb-blk,
html[data-theme="light"] .lsb-stats{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
  box-shadow:var(--bm-shadow);
}

/* nested blocks step down one level so they read as inside */
html[data-theme="light"] .hp2-flow-step,
html[data-theme="light"] .hp2-kpi:not(.has-art),
html[data-theme="light"] .hp2-why-card:not(.hp2-why-card--art),
html[data-theme="light"] .bt-cs,
html[data-theme="light"] .bt-lbtable tbody tr,
html[data-theme="light"] .m-row,
html[data-theme="light"] .rk-row{
  background:var(--bm-card2);
  border:1px solid var(--bm-l2);
}

/* table headers and section strips need their own tone */
html[data-theme="light"] thead th,
html[data-theme="light"] .bt-lbtable thead th,
html[data-theme="light"] .hp2-sec{
  background:var(--bm-card2);
  border-bottom:1px solid var(--bm-l2);
}

/* sidebars sit on the page tone, not on card white */
html[data-theme="light"] .lsb-inner,
html[data-theme="light"] .rsb-inner{
  background:var(--bm-bg2);
}
html[data-theme="light"] .lsb-inner{border-right:1px solid var(--bm-l3);}
html[data-theme="light"] .rsb-inner{border-left:1px solid var(--bm-l3);}

/* ================================================================
   9. HOME PAGE FINISH
   KPI tiles were still dark while their neighbour was white, the
   step numbers ran at .62 opacity, and the promo strip had no
   plate of its own. All four now share one light treatment.
   ================================================================ */

/* KPI tiles: same white plate as the art-less one */
html[data-theme="light"] .hp2-kpi.has-art{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}
html[data-theme="light"] .hp2-kpi.has-art::after{opacity:.18;}
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-val{color:var(--bm-tx);}
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-lbl{color:var(--bm-mu);}

/* step numbers: full strength, dark ink */
html[data-theme="light"] .hp2-flow-num{
  opacity:1;
  color:var(--bm-mu2);
}
html[data-theme="light"] .hp2-flow-step{
  background:var(--bm-card);
  border:1px solid var(--bm-l2);
}
html[data-theme="light"] .hp2-flow-art.has-art{opacity:.30;}

/* mode cards: the CTA strip gets its own tone and a divider */
html[data-theme="light"] .hp2-mode-go{
  background:var(--bm-card2);
  border-top:1px solid var(--bm-l2);
  color:var(--bm-acc-ink);
}
html[data-theme="light"] .hp2-mode--art{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}

/* promo banners: white plate, art as a hint only */
html[data-theme="light"] .hp2-promo{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}
html[data-theme="light"] .hp2-promo--art::after,
html[data-theme="light"] .hp2-promo--art.hp2-promo--cover::after{opacity:.28;}

/* why-cards keep their accent bar but sit on white */
html[data-theme="light"] .hp2-why-card--art{
  border:1px solid var(--bm-l3);
}

/* ================================================================
   10. ART STRENGTH BY REAL LAYOUT
   Flow tiles keep their art in a separate 66px block with the copy
   BELOW it, not over it - so the art can run at full strength and
   the caption just needs dark ink on the white plate underneath.
   ================================================================ */

/* flow tiles: art at full strength, no veil, dark caption */
html[data-theme="light"] .hp2-flow-art.has-art{opacity:1;}
html[data-theme="light"] .hp2-flow-art.has-art::after{background:none;}
html[data-theme="light"] .hp2-flow-step:has(.hp2-flow-art.has-art) .hp2-flow-t{
  color:var(--bm-tx);}
html[data-theme="light"] .hp2-flow-step:has(.hp2-flow-art.has-art) .hp2-flow-s{
  color:var(--bm-mu);}
html[data-theme="light"] .hp2-flow-foot{
  background:var(--bm-card);
  border-top:1px solid var(--bm-l2);
}

/* kpi: white wash already protects the copy, let the art show */
html[data-theme="light"] .hp2-kpi.has-art::after{opacity:.75;}

/* promo: art sits on the right, copy on the left */
html[data-theme="light"] .hp2-promo--art::after,
html[data-theme="light"] .hp2-promo--art.hp2-promo--cover::after{opacity:.45;}

/* mode cards: copy covers the whole tile, art stays a texture */
html[data-theme="light"] .hp2-mode--art::before{opacity:.22;}

/* kpi: strengthen the wash under the copy, art stays visible */
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-b::before{
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.90) 60%,
    rgba(255,255,255,.55) 100%);
  inset:-14px -30px -14px -40px;
}

/* ================================================================
   11. AI COACH
   Same shape as the training page: ::before carries the art,
   ::after paints a dark scrim over it. Light theme dims the art
   and flips the scrim to white.
   ================================================================ */
html[data-theme="light"] .cx-hero::before{opacity:.30;}
html[data-theme="light"] .cx-hero::after{
  background:linear-gradient(100deg,
    rgba(255,255,255,.96) 10%,
    rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.55) 100%);
}
html[data-theme="light"] .cx-d::before,
html[data-theme="light"] .cx-dr::before{opacity:.14;}

html[data-theme="light"] .cx-hero,
html[data-theme="light"] .cx-d,
html[data-theme="light"] .cx-dr{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}

/* surfaces left hardcoded outside the var block */
html[data-theme="light"] .cx-hero h1,
html[data-theme="light"] .cx-hero p,
html[data-theme="light"] .cx-d,
html[data-theme="light"] .cx-dr{color:var(--bm-tx);}

/* coach: scrims sit in pseudo-elements that outrank plain overrides */
html[data-theme="light"] .cx-d::after{
  background:linear-gradient(165deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.94) 55%,
    #ffffff 100%) !important;
}
html[data-theme="light"] .cx-dr::after{
  background:linear-gradient(100deg,
    #ffffff 42%,
    rgba(255,255,255,.90) 62%,
    rgba(255,255,255,.60)) !important;
}
html[data-theme="light"] .cx-d::before,
html[data-theme="light"] .cx-dr::before{opacity:.12 !important;}
html[data-theme="light"] .cx-d,
html[data-theme="light"] .cx-dr{
  background:var(--bm-card) !important;
  border:1px solid var(--bm-l3) !important;
}
html[data-theme="light"] .cx-pn{color:var(--bm-mu2);}

/* coach: secondary and disabled buttons were tuned for a dark plate */
html[data-theme="light"] .cx-b.sec{
  color:var(--bm-tx);
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}
html[data-theme="light"] .cx-b.sec:hover{background:var(--bm-w2);}
html[data-theme="light"] .cx-b.dis{
  color:var(--bm-mu2);
  background:var(--bm-w2);
  border:1px solid var(--bm-l2);
}

/* coach rings: any dark svg stroke on a light plate */
html[data-theme="light"] .cx-ring circle,
html[data-theme="light"] .cx-goal circle{stroke:#cfd8e2;}
html[data-theme="light"] .cx-ring circle[stroke^="url"],
html[data-theme="light"] .cx-goal circle[stroke^="url"]{stroke:inherit;}

/* ================================================================
   12. AI COACH — ART LEVEL + UNIFORM EDGES
   The hero scrim is already white, so the art no longer needs to be
   crushed; and every panel on the page gets the same hairline so the
   grid reads as a grid.
   ================================================================ */

/* hero: art up, veil eased on the art side */
html[data-theme="light"] .cx-hero::before{opacity:.75 !important;}
html[data-theme="light"] .cx-hero::after{
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 8%,
    rgba(255,255,255,.90) 38%,
    rgba(255,255,255,.42) 68%,
    rgba(255,255,255,.18) 100%) !important;
}

/* card art a touch stronger than a ghost */
html[data-theme="light"] .cx-d::before,
html[data-theme="light"] .cx-dr::before{opacity:.30 !important;}

/* svg rings: any dark stroke on a light plate */
html[data-theme="light"] .cx-ring circle,
html[data-theme="light"] svg circle[stroke="#16222c"]{stroke:#cfd8e2;}

/* one hairline for every panel on the page */
html[data-theme="light"] .cx-card,
html[data-theme="light"] .cx-g,
html[data-theme="light"] .cx-d,
html[data-theme="light"] .cx-dr{
  border:1px solid var(--bm-l3);
  background:var(--bm-card);
  border-radius:14px;
}

/* progress tracks need to sit visibly inside their card */
html[data-theme="light"] .cx-bar{
  background:var(--bm-w4) !important;
  border:1px solid var(--bm-l1);
}

/* row separators inside lists */
html[data-theme="light"] .cx-li,
html[data-theme="light"] .cx-row,
html[data-theme="light"] .cx-s{border-bottom:1px solid var(--bm-l1);}

/* coach: one edge tone for every panel, svg is not a panel */
html[data-theme="light"] .cx-card,
html[data-theme="light"] .cx-g,
html[data-theme="light"] .cx-d,
html[data-theme="light"] .cx-dr,
html[data-theme="light"] .cx-hero{border-color:var(--bm-l3) !important;}
html[data-theme="light"] .cx-chart{border:none !important;background:none !important;}
html[data-theme="light"] .cx-empty{border:1px dashed var(--bm-l3);}
html[data-theme="light"] .cx-pnote{border-left-color:var(--bm-l3);}

/* match page: live panels + scoreboard edges */
html[data-theme="light"] .mx-lp,
html[data-theme="light"] .mx-sb,
html[data-theme="light"] .mx-card,
html[data-theme="light"] .mx-tabs{border:1px solid var(--bm-l3);}
html[data-theme="light"] .mx-kill,
html[data-theme="light"] .mx-lcard{border:1px solid var(--bm-l2);}
html[data-theme="light"] .mx-mom-track{background:var(--bm-w4);}

/* match: live card numbers were white on a dark plate */
html[data-theme="light"] .mx-lcard-mini .v{color:var(--bm-tx);}
html[data-theme="light"] .mx-lcard-mini .k{color:var(--bm-mu2);}
html[data-theme="light"] .mx-kill .w{color:var(--bm-tx);}
html[data-theme="light"] .mx-feed-empty{color:var(--bm-mu);}
/* breadcrumb + tabs */
html[data-theme="light"] .mx-bc,
html[data-theme="light"] .mx-bc a{color:var(--bm-mu);}
html[data-theme="light"] .mx-tabs{border-bottom:1px solid var(--bm-l2);}

/* flow tiles: white plate under the caption for a uniform page */
html[data-theme="light"] .hp2-flow-foot{
  background:var(--bm-card) !important;
  border-top:1px solid var(--bm-l2);
}
html[data-theme="light"] .hp2-flow-step:has(.hp2-flow-art.has-art) .hp2-flow-t{color:var(--bm-tx) !important;}
html[data-theme="light"] .hp2-flow-step:has(.hp2-flow-art.has-art) .hp2-flow-s{color:var(--bm-mu) !important;}

/* ================================================================
   13. SIDEBARS
   Both rails were built as dark panels: section labels, item
   descriptions and friend statuses all ran at low-alpha greys that
   vanish on white. Here they get real contrast and real edges.
   ================================================================ */

/* rails sit on the page tone with a hard edge toward the content */
html[data-theme="light"] .lsb-inner{
  background:var(--bm-bg2);
  border-right:1px solid var(--bm-l3);
}
html[data-theme="light"] .rsb-inner{
  background:var(--bm-bg2);
  border-left:1px solid var(--bm-l3);
}
html[data-theme="light"] .lsb-inner::after{opacity:.35;}

/* cards on the rails */
html[data-theme="light"] .lsb-user-card,
html[data-theme="light"] .lsb-play-card,
html[data-theme="light"] .lsb-guest-card,
html[data-theme="light"] .rsb-blk{
  background:var(--bm-card) !important;
  border:1px solid var(--bm-l3) !important;
  box-shadow:var(--bm-shadow);
}
html[data-theme="light"] .lsb-stats{
  background:var(--bm-card) !important;
  border-top:1px solid var(--bm-l3) !important;
}

/* nav items: readable labels, visible active state */
html[data-theme="light"] .lsb-nav-label,
html[data-theme="light"] .rsb-sec-label{color:var(--bm-mu);}
html[data-theme="light"] .lsb-item-name{color:var(--bm-tx2);}
html[data-theme="light"] .lsb-item-desc{color:var(--bm-mu);}
html[data-theme="light"] .lsb-item-icon{
  background:var(--bm-card);
  border:1px solid var(--bm-l2);
  color:var(--bm-mu);
}
html[data-theme="light"] .lsb-item:hover{background:var(--bm-w2);}
html[data-theme="light"] .lsb-nav .lsb-item.active{
  background:var(--bm-acc-dim);
  border:1px solid var(--bm-acc-bdr);
}
html[data-theme="light"] .lsb-nav .lsb-item.active .lsb-item-name{color:var(--bm-tx);}
html[data-theme="light"] .lsb-nav .lsb-item.active .lsb-item-desc{color:var(--bm-acc-ink);}
html[data-theme="light"] .lsb-nav .lsb-item.active .lsb-item-icon{
  background:var(--bm-card);
  border-color:var(--bm-acc-bdr);
  color:var(--bm-acc-ink);
}
html[data-theme="light"] .lsb-nav .lsb-item.active::before{box-shadow:none;}

/* footer counters */
html[data-theme="light"] .lsb-stat b{color:var(--bm-tx);}
html[data-theme="light"] .lsb-stat span{color:var(--bm-mu);}
html[data-theme="light"] .lsb-stat-sep{background:var(--bm-l3);}

/* friends list */
html[data-theme="light"] .rsb-p-name{color:var(--bm-tx2);}
html[data-theme="light"] .rsb-p-av{border:1px solid var(--bm-l3);}
html[data-theme="light"] .rsb-player:hover{background:var(--bm-w2);}
html[data-theme="light"] .rsb-offline{opacity:.65;}
html[data-theme="light"] .rsb-see-all{color:var(--bm-mu);}
html[data-theme="light"] .rsb-feature-txt{color:var(--bm-mu);}
html[data-theme="light"] .rsb-bar{background:var(--bm-w4);}

/* friends: dim the avatar, not the text */
html[data-theme="light"] .rsb-offline{opacity:1;}
html[data-theme="light"] .rsb-offline .rsb-p-av{opacity:.55;}
html[data-theme="light"] .rsb-offline .rsb-p-name{color:var(--bm-mu);}
html[data-theme="light"] .rsb-p-status{font-weight:700;}

/* kpi wash: full-bleed fade instead of a floating plate */
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-b::before{
  inset:0 0 0 -14px !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 45%,
    rgba(255,255,255,.55) 78%,
    rgba(255,255,255,0) 100%) !important;
}

/* kpi wash: extend past the copy box so the fade ends off-tile */
html[data-theme="light"] .hp2-kpi.has-art .hp2-kpi-b::before{
  inset:0 -70% 0 -14px !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.90) 30%,
    rgba(255,255,255,.60) 55%,
    rgba(255,255,255,.20) 78%,
    rgba(255,255,255,0) 100%) !important;
}

/* mode cards: let the art show through, keep the copy readable */
html[data-theme="light"] .hp2-mode--art::before{opacity:.42 !important;}
html[data-theme="light"] .hp2-mode--art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.62) 45%,
    rgba(255,255,255,.80) 100%) !important;
}

/* mode cards: art visible but the plate stays clean and white */
html[data-theme="light"] .hp2-mode--art::before{opacity:.26 !important;}
html[data-theme="light"] .hp2-mode--art::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.80) 45%,
    rgba(255,255,255,.90) 100%) !important;
}

/* ================================================================
   14. MATCH PAGE — TINTS
   Hero glows and card washes are alpha layers tuned for a black
   plate; at the same alpha they read as solid colour on white.
   Cut them right down, keep only what carries meaning.
   ================================================================ */
html[data-theme="light"] .mx-hbg-ga,
html[data-theme="light"] .mx-hbg-gb{opacity:.35;}
html[data-theme="light"] .mx-hbg-scan{opacity:.12;}
html[data-theme="light"] .mx-hbg-grid{opacity:.30;}
html[data-theme="light"] .mx-hero{background:var(--bm-card);}

/* card washes back to a plain plate + a visible edge */
html[data-theme="light"] .mx-mc.mvp,
html[data-theme="light"] .mx-sc.mx-sc-conn-active{
  background:var(--bm-card) !important;
  border:1px solid var(--bm-acc-bdr) !important;
}
html[data-theme="light"] .mx-mvp-block{background:var(--bm-card) !important;}
html[data-theme="light"] .mx-mvp-glow{opacity:.30;}
html[data-theme="light"] .mxtr.is-me{background:var(--bm-acc-dim);}

/* panels and rows get one edge tone */
html[data-theme="light"] .mx-sc,
html[data-theme="light"] .mx-mc,
html[data-theme="light"] .mx-hero,
html[data-theme="light"] .mx-mvp-block{border:1px solid var(--bm-l3);}
html[data-theme="light"] .mx-mom-track{background:var(--bm-w4) !important;}

/* ================================================================
   15. MATCH HERO — STRUCTURE ON WHITE
   The grid was drawn in white lines, invisible here. Redraw it in
   ink and give each half a faint team wash so the panel has depth.
   ================================================================ */
html[data-theme="light"] .mx-hbg-grid{
  opacity:1;
  background-image:
    repeating-linear-gradient(0deg,  rgba(13,23,33,.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(13,23,33,.055) 0 1px, transparent 1px 34px);
}
html[data-theme="light"] .mx-hbg-scan{
  opacity:.20;
  background:repeating-linear-gradient(0deg,
    rgba(13,23,33,.030) 0 2px, transparent 2px 6px);
}

/* team washes: left teal, right rose, both barely there */
html[data-theme="light"] .mx-hbg-gb{
  opacity:1;
  background:radial-gradient(60% 90% at 12% 50%,
    rgba(0,180,120,.13), transparent 70%);
  filter:none;
}
html[data-theme="light"] .mx-hbg-ga{
  opacity:1;
  background:radial-gradient(60% 90% at 88% 50%,
    rgba(224,52,47,.10), transparent 70%);
  filter:none;
}

/* the score block itself sits on a slightly raised plate */
html[data-theme="light"] .mx-hero{
  background:linear-gradient(180deg,#ffffff 0%,#f7fafd 100%);
  box-shadow:var(--bm-shadow);
}

/* hero grid: 1px lines need real alpha to register on white */
html[data-theme="light"] .mx-hbg-grid{
  opacity:1 !important;
  background:
    repeating-linear-gradient(90deg, rgba(13,23,33,.11) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  rgba(13,23,33,.11) 0 1px, transparent 1px 46px) !important;
}

/* ================================================================
   16. MATCH HERO — LOSER SIDE + STAT PILLS
   .mx-hteam.loser dims the whole block at .6, which on white wipes
   out the name and the stat line. Dim the avatar instead and give
   the pills real ink.
   ================================================================ */
html[data-theme="light"] .mx-hteam.loser{opacity:1;}
html[data-theme="light"] .mx-hteam.loser .mx-hav-big{opacity:.70;}
html[data-theme="light"] .mx-hteam.loser .mx-hnm{color:var(--bm-mu);}

html[data-theme="light"] .mx-hpill{
  color:var(--bm-mu);
  border:1px solid var(--bm-l3);
  background:var(--bm-card);
}
html[data-theme="light"] .mx-hpill.a{color:var(--bm-cyan-ink);}
html[data-theme="light"] .mx-hpill.b{color:var(--bm-mu);}

/* winner side: a real plate instead of a wash */
html[data-theme="light"] .mx-hteam.winner .mx-hplayer{
  background:var(--bm-card);
  border:1px solid var(--bm-acc-bdr);
  border-radius:14px;
}
html[data-theme="light"] .mx-hteam.winner .mx-hav-big{
  border-color:var(--bm-acc-bdr);
  box-shadow:0 0 0 1px var(--bm-acc-dim), var(--bm-shadow);
}
html[data-theme="light"] .mx-hav-big{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}
html[data-theme="light"] .mx-hteam.winner .mx-hnm{color:var(--bm-acc-ink);}

/* hero: both sides get a plate, only the accent differs */
html[data-theme="light"] .mx-hteam .mx-hplayer{
  background:var(--bm-card);
  border:1px solid var(--bm-l2);
  border-radius:14px;
}
html[data-theme="light"] .mx-hteam.winner .mx-hplayer{
  border-color:var(--bm-acc-bdr);
  box-shadow:var(--bm-shadow);
}
html[data-theme="light"] .mx-hteam.winner .mx-hnm{color:var(--bm-tx);}
html[data-theme="light"] .mx-hteam.loser .mx-hnm{color:var(--bm-tx2);}

/* breadcrumbs and card labels were mid-greys on black */
html[data-theme="light"] .mx-bc,
html[data-theme="light"] .mx-bc a,
html[data-theme="light"] .mx-bc span,
html[data-theme="light"] .mx-sc-t,
html[data-theme="light"] .mx-mc-label{color:var(--bm-mu) !important;}

/* profile: color-mix washes at 2-3% are too faint to define a card */
html[data-theme="light"] .pv7-kpi,
html[data-theme="light"] .pv7-panel,
html[data-theme="light"] .pv7-card,
html[data-theme="light"] .pv7-box{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
  box-shadow:var(--bm-shadow);
}
html[data-theme="light"] .pv7-tab{border:1px solid var(--bm-l2);}
html[data-theme="light"] .pv7-tab:hover{background:var(--bm-w2);}
html[data-theme="light"] .pv7-mrow:hover,
html[data-theme="light"] .pv7-row:hover,
html[data-theme="light"] .pv7-wt tbody tr:hover td{background:var(--bm-w2);}

/* support: the clipped headline needs dark stops on white */
html[data-theme="light"] .sp-h1-grd{
  background:linear-gradient(135deg,#00714c 0%,#00708a 50%,#5b3fb8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* user menu: the dropdown plate is a hard-coded dark gradient */
html[data-theme="light"] .bmum-panel,
html[data-theme="light"] .bmHeader__dropdown{
  background:linear-gradient(180deg,#ffffff,#f7fafd) !important;
  border:1px solid var(--bm-l3) !important;
  box-shadow:var(--bm-shadow-lg) !important;
}
html[data-theme="light"] .bmum-panel::before,
html[data-theme="light"] .bmum-head{background:none;}

/* ================================================================
   17. MATCHMAKING PAGE (/play/)
   The queue panel bakes the monogram under a flat dark gradient, and
   the promo rail fades a colour accent into a near-black plate. Both
   keep their structure here; only the dark half is flipped.
   ================================================================ */
html[data-theme="light"] .mm2-queue-side{
  background-color:var(--bm-card) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url(/assets/brand/bm_mark.png?v=20260722_final) !important;
  border:1px solid var(--bm-l3) !important;
}
html[data-theme="light"] .mm2-promo-b{
  background:linear-gradient(105deg,rgba(58,159,255,.16) 0%,var(--bm-card) 56%) !important;}
html[data-theme="light"] .mm2-promo-p{
  background:linear-gradient(105deg,rgba(168,85,247,.16) 0%,var(--bm-card) 56%) !important;}
html[data-theme="light"] .mm2-promo-g{
  background:linear-gradient(105deg,rgba(255,184,0,.18) 0%,var(--bm-card) 56%) !important;}
html[data-theme="light"] .mm2-promo-card{
  border:1px solid var(--bm-l3);
  box-shadow:var(--bm-shadow);
}
html[data-theme="light"] .mm2-promo-tx{color:var(--bm-tx);}
html[data-theme="light"] .mm2-promo-b span{color:#2f4bc4;}
html[data-theme="light"] .mm2-promo-p span{color:#6b2fb8;}
html[data-theme="light"] .mm2-promo-g span{color:#8a5600;}

/* panels and feeds on this page */
html[data-theme="light"] .mm2-panel,
html[data-theme="light"] .mm2-card,
html[data-theme="light"] .mm2-feed,
html[data-theme="light"] .mm2-veto,
html[data-theme="light"] .mm2-maps{
  background:var(--bm-card);
  border:1px solid var(--bm-l3);
}


/* ===== MAP ART BEHIND MATCH HERO - LIGHT (2026-08-06) =====
   Map screenshots are in-game captures and are dark by nature. Text sits
   ON TOP of them, so the dark veil is flipped to a white one and the art
   is pushed further down. Same gradient geometry, inverted half. */
html[data-theme="light"] .mx-hbg-map{opacity:.16;filter:saturate(.6) brightness(1.18)}
html[data-theme="light"] .mx-hero.fin .mx-hbg-map{opacity:.11}
html[data-theme="light"] .mx-hero.cancelled .mx-hbg-map{opacity:.06;filter:grayscale(1)}
html[data-theme="light"] .mx-hbg-map::after{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.90) 100%)}

html[data-theme="light"] .rsb-dev{background:var(--bm-w4);}
html[data-theme="light"] .rsb-dna-conf{background:var(--bm-w4);}
html[data-theme="light"] .rsb-dev-mid{background:rgba(0,0,0,.15);}