/* sm-modern.css: the 2026-11 restyle, so SharpModels reads as BetSharp's sibling (Barlow Condensed headings, Inter
   body, light ice page with dark "arena" bands) while keeping its own cyan accent. Loaded last from base.html, after
   each page's own CSS, so it only has to restate what changes. The !important flags beat the matching !important
   colour rules near the end of sharpmodels-unified-v19.css. Colours and fonts themselves live in tokens.css. */

:root {
  --sm-cyan: #00b4d8;            /* the logo cyan: on dark bands */
  --sm-cyan-ink: #00739a;        /* cyan dark enough for small text on white (4.9:1) */
  --sm-band: #060912;
  --sm-band-2: #0e1528;
  --sm-band-line: #1f2a47;
  --sm-band-text-2: #a9b4d0;
}

body { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- headings */
.sm-page-title,
.sm-matchup__card-title,
.sm-table-toolbar__title,
.sm-section-title,
.sm-sidepanel__title,
.sm-league-sidepanel__title {
  font-family: var(--sm-font-heading) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.sm-matchup__card-title, .sm-table-toolbar__title { font-size: 28px !important; line-height: 1.05; }
.sm-sidepanel__title, .sm-league-sidepanel__title { font-size: 26px !important; line-height: 1.05; }

/* ---------------------------------------------------------------- header: one dark band */
.sm-header {
  background: rgba(6, 9, 18, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sm-band-line);
}
/* two-colour wordmark, as BetSharp (BET + green SHARP) and SharpBetting (SHARP + red BETTING) */
.sm-header__brand-title {
  font-weight: 800;
  font-style: italic;
  font-size: 34px;
  letter-spacing: .01em;
}
.sm-header__brand-title b,
.sm-footer__brand b { color: var(--sm-cyan); font-weight: inherit; }
.sm-header__brand-mark { width: 38px !important; height: 38px !important; }
.sm-header__brand-mark { filter: drop-shadow(0 0 10px rgba(0, 180, 216, .35)); }
.sm-header__sport-strip { background: transparent; border-top: 1px solid var(--sm-band-line); border-bottom: 0; }
.sm-header__sport-pill {
  background: transparent;
  border: 0 !important;
  border-radius: 10px;
  padding: 7px 12px;
  font-family: var(--sm-font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sm-band-text-2);
  transition: background .15s, color .15s;
}
.sm-header__sport-pill:hover,
.sm-header__sport-pill.is-active {
  background: var(--sm-band-2);
  color: #ffffff;
}
.sm-header__sport-pill.is-active { box-shadow: inset 0 -2px 0 var(--sm-cyan); }
.sm-header__subnav { background: var(--sm-band) !important; border-top: 1px solid var(--sm-band-line); }
.sm-header__subnav-link {
  font-family: var(--sm-font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sm-band-text-2);
}
.sm-header__subnav-link:hover { color: #ffffff; }
.sm-header__subnav-link.is-active { color: #ffffff; box-shadow: inset 0 -2px 0 var(--sm-cyan); text-decoration: none; }

/* ---------------------------------------------------------------- breadcrumbs */
.sm-breadcrumbs { font-size: 13px !important; font-weight: 500; }
.sm-breadcrumbs a { font-weight: 600; }

/* ---------------------------------------------------------------- cards and tables */
.sm-matchup__card,
.sm-table-card,
.sm-sidepanel__card,
.sm-league-sidepanel__card,
.sm-card {
  border: 1px solid var(--sm-color-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--sm-shadow-card) !important;
  background: #ffffff;
}
.sm-table thead th {
  background: var(--sm-color-surface-alt) !important;
  color: var(--sm-color-muted) !important;
  font-family: var(--sm-font-body);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sm-color-line) !important;
}
.sm-table td { border-color: var(--sm-color-line) !important; font-variant-numeric: tabular-nums; }
.sm-table tbody tr:hover td { background: #f6f8fc; }
.sm-table__link-btn {
  border-radius: 10px !important;
  font-family: var(--sm-font-heading);
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* sidebar link lists: SM's cyan ink rather than the old navy */
.sm-league-sidepanel__link,
.sm-sidepanel__link { color: var(--sm-color-text) !important; font-weight: 500; }
.sm-league-sidepanel__link:hover,
.sm-sidepanel__link:hover { color: var(--sm-cyan-ink) !important; }
.sm-league-sidepanel__label,
.sm-sidepanel__label { color: var(--sm-color-muted) !important; letter-spacing: .1em; }

/* ---------------------------------------------------------------- matchup hero: BetSharp's game-page band
   Full width above the content + sidebar grid, dark, tinted with each team's colour from its side (the __bg
   gradient is set inline by getMatchupHeroHTML), team art beside the name, score or "@" big in the middle. */
.sm-matchup-top { max-width: 1520px; margin: 0 auto; padding-top: 22px; }
.sm-matchup-grid { padding-top: 22px !important; }
.sm-matchup-hero-v2 {
  position: relative;
  overflow: hidden;
  background: #0a1020 !important;
  border: 1px solid #2a3860 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(6, 9, 18, .18) !important;
  color: #eef2ff;
  padding: 22px 26px 26px !important;
  margin: 14px 0 0 !important;
}
.sm-matchup-hero-v2__bg { position: absolute; inset: 0; opacity: .32; pointer-events: none; }
.sm-matchup-hero-v2__top,
.sm-matchup-hero-v2__main { position: relative; }
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__top {
  max-width: none !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.sm-matchup-hero-v2__title {
  color: #ffffff !important;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 26px !important;
  line-height: 1.05 !important;
  letter-spacing: .02em;
}
.sm-matchup-hero-v2__subtitle,
.sm-matchup-hero-v2__date,
.sm-matchup-hero-v2__form { color: #a9b4d0 !important; font-size: 13px !important; }
.sm-matchup-hero-v2__subtitle { margin-top: 4px; }
.sm-matchup-hero-v2__when { text-align: right; }
.sm-matchup-hero-v2__status {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  font-family: var(--sm-font-heading);
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-height: 28px !important;
  margin-bottom: 6px !important;
}
.sm-matchup-hero-v2__date { margin: 0 !important; }

.sm-matchup-hero-v2__main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: center;
  margin-top: 26px !important;
}
/* undo unified-v19's phone grid areas (centre first, teams 2-up below): BetSharp keeps away | centre | home */
.sm-matchup-hero-v2__main { grid-template-areas: none !important; }
.sm-matchup-hero-v2__main > * { grid-area: auto !important; max-width: none !important; }
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__team {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 18px;
}
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__team--right { flex-direction: row-reverse !important; text-align: right !important; }
.sm-matchup-hero-v2__team-text { min-width: 0; }
.sm-matchup-hero-v2__team-icon {
  width: 96px !important;
  height: 96px !important;
  margin: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));   /* the white edge is in the art itself */
}
.sm-matchup-hero-v2__loc {
  font-size: 13px;
  font-weight: 600;
  color: #a9b4d0;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.sm-matchup-hero-v2__team-name {
  display: block;
  color: #ffffff !important;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 44px) !important;
  line-height: .95 !important;
  letter-spacing: .01em;
}
.sm-matchup-hero-v2__team-meta {
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  color: #eef2ff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__team--left .sm-matchup-hero-v2__team-meta { justify-content: flex-start !important; }
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__team--right .sm-matchup-hero-v2__team-meta { justify-content: flex-end !important; }
.sm-matchup-hero-v2__form { margin-top: 2px !important; }
.sm-matchup-team-nav { margin-top: 10px !important; }
.sm-matchup-team-nav__label { display: none; }
.sm-matchup-team-nav__links { justify-content: center !important; }
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__team--left .sm-matchup-team-nav__links { justify-content: flex-start !important; }
.sm-matchup-hero-v2--band .sm-matchup-hero-v2__team--right .sm-matchup-team-nav__links { justify-content: flex-end !important; }
.sm-matchup-nav-link {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #eef2ff !important;
  border-radius: 8px !important;
}
.sm-matchup-nav-link:hover { border-color: var(--sm-cyan) !important; }

.sm-matchup-hero-v2__center { text-align: center; }
.sm-matchup-hero-v2__score,
.sm-matchup-hero-v2__vs {
  font-family: var(--sm-font-heading);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.sm-matchup-hero-v2__score { font-size: 58px; color: #ffffff; }
.sm-matchup-hero-v2__vs { font-size: 32px; font-style: italic; color: #7a87ab; }
.sm-matchup-hero-v2__prob-label { color: #a9b4d0 !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .1em !important; }
.sm-matchup-hero-v2__pct {
  font-weight: 900;
  font-style: italic;
  font-size: 34px !important;
  color: #ffffff !important;   /* the inline team colour is often too dark for the band; the bar carries it */
  font-variant-numeric: tabular-nums;
}
.sm-matchup-hero-v2__bar {
  background: rgba(255, 255, 255, .85) !important;
  height: 14px !important;
  padding: 2px;
  box-sizing: border-box;
}
.sm-matchup-hero-v2__bar-left,
.sm-matchup-hero-v2__bar-right { border-radius: 999px; }
.sm-matchup-hero-v2__bar-left { border-right: 2px solid rgba(255, 255, 255, .85) !important; }
.sm-matchup-hero-v2__margin { color: #eef2ff !important; font-weight: 600 !important; font-size: 14px; }

/* tablets: not enough width for art beside the name, so the art goes above it (as on phones) */
@media (max-width: 1060px) {
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team,
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team--right { flex-direction: column !important; text-align: center !important; gap: 8px; }
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team .sm-matchup-hero-v2__team-meta { justify-content: center !important; }
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team .sm-matchup-team-nav__links { justify-content: center !important; }
  .sm-matchup-hero-v2__team-icon { width: 76px !important; height: 76px !important; }
}

/* phones: away | centre | home in one row as on BetSharp, art above each name, heading stacked */
@media (max-width: 760px) {
  .sm-matchup-top { padding-top: 14px; }
  .sm-matchup-hero-v2 { padding: 16px 12px 18px !important; border-radius: 16px !important; }
  .sm-matchup-hero-v2--band .sm-matchup-hero-v2__when { text-align: left; }
  .sm-matchup-hero-v2__title { font-size: 22px !important; }
  .sm-matchup-hero-v2__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team,
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team--right { flex-direction: column !important; text-align: center !important; gap: 6px; }
  .sm-matchup-hero-v2__team-icon { width: 58px !important; height: 58px !important; }
  .sm-matchup-hero-v2__loc { font-size: 10px; letter-spacing: .06em; }
  .sm-matchup-hero-v2__team-name { font-size: 20px !important; overflow-wrap: anywhere; }
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team .sm-matchup-hero-v2__team-meta { justify-content: center !important; flex-direction: column; gap: 0 !important; font-size: 12px !important; }
  .sm-matchup-hero-v2__form { font-size: 11px !important; }
  .sm-matchup-hero-v2 .sm-matchup-hero-v2__team .sm-matchup-team-nav__links { justify-content: center !important; }
  .sm-matchup-hero-v2__score { font-size: 34px; margin-bottom: 10px; }
  .sm-matchup-hero-v2__vs { font-size: 24px; }
  .sm-matchup-hero-v2__pct { font-size: 22px !important; }
  .sm-matchup-hero-v2__margin { font-size: 12px; }
  .sm-matchup-team-nav__links { gap: 4px !important; flex-wrap: nowrap; }
  .sm-matchup-nav-link { font-size: 11px !important; padding: 3px 6px !important; min-height: 0 !important; }
  .sm-matchup-hero-v2__bar { height: 12px !important; }
}

/* ---------------------------------------------------------------- footer: dark band */
.sm-footer { background: var(--sm-band) !important; border-top: 1px solid var(--sm-band-line); }
.sm-footer__heading {
  font-family: var(--sm-font-heading);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ================================================================ rest of the site (stage 2)
   Page heroes become dark bands like BetSharp's hub heroes; card and tile titles, tabs and buttons follow
   BetSharp's components. Team links and rating badges keep their meaning, only the look changes. */

/* ---------------------------------------------------------------- page heroes: dark bands */
.sm-home-hero,
.sm-playoff-hero,
.sm-results-hero,
.sm-article-hero,
.sm-team-hero-v2,
.sm-league-hero,
.sm-teams-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(0, 180, 216, .18), transparent 60%),
    linear-gradient(135deg, #0a1020 0%, #0e1a33 100%) !important;
  border: 1px solid #2a3860 !important;
  border-bottom: 2px solid var(--sm-cyan) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(6, 9, 18, .18), 0 6px 20px -8px rgba(0, 180, 216, .35) !important;
  color: #eef2ff;
}
.sm-team-hero-v2__bg { position: absolute; inset: 0; opacity: .38; pointer-events: none; }
.sm-team-hero-v2 > *:not(.sm-team-hero-v2__bg) { position: relative; }
.sm-home-hero__title,
.sm-playoff-hero__title,
.sm-results-hero__title,
.sm-article-hero__title,
.sm-team-hero-v2__title,
.sm-league-hero__title,
.sm-teams-hero__title {
  color: #ffffff !important;
  font-family: var(--sm-font-heading) !important;
  font-weight: 900 !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1 !important;
  font-size: clamp(34px, 5vw, 56px) !important;
}
.sm-home-hero--compact .sm-home-hero__title { font-size: clamp(30px, 4vw, 46px) !important; }
.sm-home-hero__summary,
.sm-playoff-hero__summary,
.sm-results-hero__summary,
.sm-article-hero__subtitle,
.sm-team-hero-v2__subtitle,
.sm-league-hero__summary,
.sm-teams-hero__summary,
.sm-playoff-hero__updated { color: #a9b4d0 !important; }
/* the "Updated daily ..." kicker: BetSharp's green "SHARPMODELS RATED" pill, in SM cyan */
.sm-home-hero__kicker {
  display: inline-flex !important;
  width: auto !important;
  background: rgba(0, 180, 216, .12) !important;
  border: 1px solid rgba(0, 180, 216, .35) !important;
  color: #5fd8f0 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sm-home-hero__inner,
.sm-article-hero__inner { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* stat boxes inside heroes (playoff "Best AFC", results "Games", team record/rating). The team stat class is
   also reused on light cards (team page Season Outlook), so those rules are scoped to the hero. */
.sm-playoff-stat,
.sm-results-stat,
.sm-team-hero-v2 .sm-team-hero-v2__stat {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.sm-playoff-stat__label,
.sm-results-stat__label,
.sm-team-hero-v2 .sm-team-hero-v2__stat-label { color: #a9b4d0 !important; }
.sm-playoff-stat__value,
.sm-results-stat__value,
.sm-team-hero-v2 .sm-team-hero-v2__stat-value { color: #ffffff !important; }
.sm-playoff-stat__label,
.sm-results-stat__label,
.sm-team-hero-v2__stat-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sm-playoff-stat__value,
.sm-results-stat__value,
.sm-team-hero-v2__stat-value {
  font-family: var(--sm-font-heading) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
}
.sm-team-hero__helmet { object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.sm-team-hero-v2__icon { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* pickers and date controls on the dark band */
.sm-team-hero-v2 .sm-nav-select,
.sm-results-hero .sm-date-trigger {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
}
.sm-team-hero-v2 .sm-nav-select option { color: #0b1430; }
.sm-team-hero-v2 .sm-nav-arrow,
.sm-results-hero .sm-date-arrow {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
}
.sm-results-hero .sm-date-popup { color: var(--sm-color-text); }   /* the calendar itself stays a light panel */

/* ---------------------------------------------------------------- card, tile and section titles */
.sm-home-card__title,
.sm-outlook-card__title,
.sm-matchup-tile__title,
.sm-ratings-page__section-title,
.sm-playoff-page__section-title,
.sm-standings-page__section-title,
.sm-teams-page__section-title,
.sm-home-method__title {
  font-family: var(--sm-font-heading) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.sm-home-card__title { font-size: 28px !important; }
.sm-outlook-card__title { font-size: 20px !important; }
.sm-matchup-tile__title { font-size: 21px !important; line-height: 1.05 !important; }
.sm-feature-card__title { font-family: var(--sm-font-heading) !important; font-weight: 700 !important; font-size: 21px !important; line-height: 1.1 !important; }
.sm-feature-card__tag {
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* cards inside cards (outlook lists, tiles, feature cards): quieter edge, BetSharp's game-card hover */
.sm-home-card { border: 1px solid var(--sm-color-line) !important; border-radius: 14px !important; box-shadow: var(--sm-shadow-card) !important; }
.sm-outlook-card,
.sm-matchup-tile,
.sm-feature-card {
  border: 1px solid var(--sm-color-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--sm-shadow-soft) !important;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sm-matchup-tile:hover,
.sm-feature-card:hover { transform: translateY(-2px); border-color: #cdd6e6 !important; box-shadow: var(--sm-shadow-card) !important; }

/* team links: text colour, cyan on hover (was navy everywhere) */
.sm-outlook-card__team a,
.sm-outlook-card__row > a,
.sm-table td a { color: var(--sm-color-text) !important; font-weight: 600; text-decoration: none; }
.sm-outlook-card__row > a:hover,
.sm-outlook-card__team a:hover,
.sm-table td a:hover { color: var(--sm-cyan-ink) !important; }
/* list numbers (ratings, playoff %, schedule): neutral chips in the heading font instead of the old blue
   heat shading (an inline background from _heat_style, overridden here); the list's leader gets the cyan accent */
.sm-outlook-card__row strong {
  background: #f1f4f9 !important;
  color: var(--sm-color-text) !important;
  border: 1px solid var(--sm-color-line);
  border-radius: 8px !important;
  min-width: 54px;
  text-align: center;
  font-family: var(--sm-font-heading);
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.sm-outlook-card__title + .sm-outlook-card__row strong {
  background: rgba(0, 180, 216, .12) !important;
  border-color: rgba(0, 180, 216, .45);
  color: var(--sm-cyan-ink) !important;
}
.sm-outlook-card__rank { color: var(--sm-color-muted) !important; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tabs and buttons: BetSharp's .tab and chips */
.sm-view-tab {
  padding: 7px 13px !important;
  border-radius: 9px !important;
  border: 1px solid #cdd6e6 !important;
  background: #ffffff !important;
  color: var(--sm-color-text-soft) !important;
  font-family: var(--sm-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.sm-view-tab:hover { color: var(--sm-color-text) !important; border-color: var(--sm-color-text-soft) !important; }
.sm-view-tab--active,
.sm-view-tab--active:hover {
  background: var(--sm-color-text) !important;
  border-color: var(--sm-color-text) !important;
  color: #ffffff !important;
}
.sm-table__link-btn,
.sm-home-card__link,
.sm-feature-card__link {
  border-radius: 999px !important;
}
.sm-table__link-btn {
  background: #ffffff !important;
  border: 1px solid #cdd6e6 !important;
  color: var(--sm-color-text) !important;
  font-size: 15px !important;
  padding: 6px 14px !important;
}
.sm-table__link-btn:hover { border-color: var(--sm-cyan) !important; color: var(--sm-cyan-ink) !important; }

/* ---------------------------------------------------------------- footer brand */
.sm-footer__brand {
  font-family: var(--sm-font-heading) !important;
  font-weight: 800 !important;
  font-style: italic;
  font-size: 30px !important;
  letter-spacing: .01em;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .sm-header__brand-title { font-size: 28px; }
  .sm-header__brand-mark { width: 32px !important; height: 32px !important; }
  .sm-playoff-stat__value,
  .sm-results-stat__value,
  .sm-team-hero-v2__stat-value { font-size: 21px !important; }
}

/* ---------------------------------------------------------------- soccer match hero (same band, plus the draw) */
.sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__pct--draw {
  align-self: center;
  font-family: var(--sm-font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 13px !important;
  color: #a9b4d0 !important;
  text-shadow: none;
}
.sm-matchup-hero-v2__bar-draw { height: 100%; background: #a9b4d0; }
.sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__bar-left { border-right: 2px solid rgba(255, 255, 255, .85) !important; }
.sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__bar-right { border-left: 2px solid rgba(255, 255, 255, .85); }
.sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__title { font-size: 22px !important; }
.ssm-scope .sm-matchup-top { padding-bottom: 0; }
@media (max-width: 760px) {
  /* home and away % share the row; the draw drops underneath it so nothing overlaps the team columns */
  .sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__pct-row { flex-wrap: wrap; gap: 0 4px !important; }
  .sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__pct { font-size: 18px !important; }
  .sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__pct--draw { order: 3; width: 100%; font-size: 11px !important; }
  .sm-matchup-hero-v2--soccer .sm-matchup-hero-v2__title { font-size: 19px !important; }
}

/* ================================================================ mini matchup cards (getGameCardHTML / soccer gamecard)
   BetSharp's game cards: a row per team (art, name, sub line, score when final, win % right), a slim bar, footer.
   Light in grids; inside the homepage carousel a dark band tinted top-left/bottom-right by the two teams. */
.sm-gamecard { display: block; height: 100%; color: inherit; text-decoration: none; }
.sm-gamecard__card {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--sm-color-line);
  border-radius: 14px;
  padding: 13px 16px 12px 19px;
  box-shadow: var(--sm-shadow-soft);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sm-gamecard__card::before {      /* team-colour edge: away/home (or home/away) top to bottom */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gc-a) 0 50%, var(--gc-b) 50% 100%);
}
.sm-gamecard:hover .sm-gamecard__card { transform: translateY(-2px); border-color: #cdd6e6; box-shadow: var(--sm-shadow-card); }
.sm-gamecard__meta {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--sm-color-muted) !important;   /* beats unified-v19's !important meta grey */
  min-height: 18px;
}
.sm-gamecard__status {
  font-family: var(--sm-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-color-text);
}
.sm-gamecard__title {            /* kept for headings/SEO; the rows below say the same thing visually */
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: 0;
}
.sm-gamecard__row {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}
.sm-gamecard__art { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; }
.sm-gamecard__art img,
.sm-gamecard__art svg,
.sm-gamecard__img { width: 38px !important; height: 38px !important; object-fit: contain; display: block; margin: 0 !important; }
.sm-gamecard__art .sm-hero-carousel__crest-fallback {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--sm-font-heading); font-weight: 800; font-size: 18px;
}
.sm-gamecard__name {
  min-width: 0;
  font-family: var(--sm-font-heading);
  font-weight: 800;
  font-style: italic;
  font-size: 21px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--sm-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-gamecard__name small {
  display: block;
  margin-top: 3px;
  font-family: var(--sm-font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--sm-color-muted);
}
.sm-gamecard__score {
  font-family: var(--sm-font-heading);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--sm-color-text);
  font-variant-numeric: tabular-nums;
}
.sm-gamecard__pct {
  min-width: 52px;
  text-align: right;
  font-family: var(--sm-font-heading);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: var(--sm-color-text);
  font-variant-numeric: tabular-nums;
}
.sm-gamecard__score + .sm-gamecard__pct { min-width: 40px; font-size: 14px; font-weight: 700; color: var(--sm-color-muted); }
.sm-gamecard__bar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: 4px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--sm-color-line);
}
.sm-gamecard__bar i { display: block; height: 100%; }
.sm-gamecard__draw { background: #c3ccdb; }
.sm-gamecard__foot {
  position: relative;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 12px;
  color: var(--sm-color-text-soft);
}
.sm-gamecard__go { flex: none; font-weight: 700; color: var(--sm-cyan-ink); }

/* homepage carousel: dark, team-tinted */
.sm-hero-carousel .sm-gamecard__card {
  background: #0a1020;
  border-color: #2a3860;
  box-shadow: 0 8px 22px rgba(6, 9, 18, .22);
  padding-top: 12px;
}
.sm-hero-carousel .sm-gamecard__card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  pointer-events: none;
  background: linear-gradient(160deg, var(--gc-a) 0%, transparent 48%, transparent 52%, var(--gc-b) 100%);
}
.sm-hero-carousel .sm-gamecard__card > * { z-index: 1; }
.sm-hero-carousel .sm-gamecard__meta { color: #a9b4d0 !important; padding-right: 54px; }
.sm-hero-carousel .sm-gamecard__name,
.sm-hero-carousel .sm-gamecard__pct,
.sm-hero-carousel .sm-gamecard__score,
.sm-hero-carousel .sm-gamecard__status { color: #ffffff; }
.sm-hero-carousel .sm-gamecard__name small,
.sm-hero-carousel .sm-gamecard__foot { color: #a9b4d0; }
.sm-hero-carousel .sm-gamecard__bar { background: rgba(255, 255, 255, .16); }
.sm-hero-carousel .sm-gamecard__draw { background: #7a87ab; }
.sm-hero-carousel .sm-gamecard__go { color: #5fd8f0; }
.sm-hero-carousel .sm-gamecard__img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.sm-hero-carousel .sm-gamecard:hover .sm-gamecard__card { border-color: var(--sm-cyan); }
.sm-hero-carousel__sport-tag {
  top: 11px !important;
  left: auto !important;
  right: 14px;
  background: rgba(0, 180, 216, .16) !important;
  border: 1px solid rgba(0, 180, 216, .4);
  color: #5fd8f0 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
}
.sm-gamecard__meta * { color: inherit !important; }   /* the time-zone span carries its own grey */

/* homepage intro under the carousel: lighter than the other page heroes (the dark carousel cards sit right
   above it), with room below the carousel dots */
.sm-home-hero.sm-home-hero--compact {
  margin-top: 22px !important;
  background:
    radial-gradient(80% 180% at 100% 0%, rgba(0, 180, 216, .12), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f3f7fc 100%) !important;
  border: 1px solid var(--sm-color-line) !important;
  border-left: 4px solid var(--sm-cyan) !important;
  border-bottom: 1px solid var(--sm-color-line) !important;
  box-shadow: var(--sm-shadow-soft) !important;
  color: var(--sm-color-text);
}
.sm-home-hero--compact .sm-home-hero__title { color: var(--sm-color-text) !important; font-size: clamp(26px, 3.4vw, 38px) !important; }
.sm-home-hero--compact .sm-home-hero__summary { color: var(--sm-color-text-soft) !important; }

/* ================================================================ side panels and page body: some tone
   Panel title on a dark band with the cyan edge (like the heroes), an ice-tinted body, link rows with a
   cyan hover; a faint cyan glow at the top of the page. The mobile menu reuses these panels inside the
   dark header, so it's reset to plain there. */
body {
  background:
    radial-gradient(1100px 480px at 88% -160px, rgba(0, 180, 216, .10), transparent 70%),
    radial-gradient(900px 420px at 0% 30%, rgba(31, 111, 224, .04), transparent 70%),
    var(--sm-color-bg);
  background-attachment: fixed;
}
.sm-league-sidepanel__card,
.sm-sidepanel__card {
  padding: 0 0 8px !important;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fb 100%) !important;
  border: 1px solid var(--sm-color-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sm-shadow-card) !important;
}
.sm-league-sidepanel__title,
.sm-sidepanel__title {
  margin: 0 0 6px !important;
  padding: 16px 18px 14px;
  color: #ffffff !important;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(0, 180, 216, .22), transparent 60%),
    linear-gradient(135deg, #0a1020 0%, #0e1a33 100%);
  border-bottom: 2px solid var(--sm-cyan);
}
.sm-league-sidepanel__group,
.sm-sidepanel__group {
  margin: 0 !important;
  padding: 12px 18px 10px !important;
  border-top: 1px solid var(--sm-color-line) !important;
  border-bottom: 0 !important;
}
.sm-league-sidepanel__title + .sm-league-sidepanel__group,
.sm-sidepanel__title + .sm-sidepanel__group { border-top: 0 !important; }
.sm-league-sidepanel__label,
.sm-sidepanel__label {
  color: var(--sm-cyan-ink) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.sm-league-sidepanel__link,
.sm-sidepanel__link {
  display: block;
  margin: 0 -10px !important;
  padding: 7px 10px !important;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.sm-league-sidepanel__link:hover,
.sm-sidepanel__link:hover { background: rgba(0, 180, 216, .09); }

/* mobile menu copy of the panel: no card, no band */
.sm-header__mobile .sm-league-sidepanel__card,
.sm-header__mobile .sm-sidepanel__card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.sm-header__mobile .sm-league-sidepanel__title,
.sm-header__mobile .sm-sidepanel__title { background: none; border: 0; padding: 8px 0; }
.sm-header__mobile .sm-league-sidepanel__group,
.sm-header__mobile .sm-sidepanel__group { padding: 10px 0 !important; border-top-color: rgba(255, 255, 255, .1) !important; }
.sm-header__mobile .sm-league-sidepanel__link,
.sm-header__mobile .sm-sidepanel__link { color: #eef2ff !important; }
.sm-header__mobile .sm-league-sidepanel__label,
.sm-header__mobile .sm-sidepanel__label { color: #5fd8f0 !important; }

/* ================================================================ phones: tables
   The table stylesheets give .sm-table fixed min-widths (360-680px) so even 3-5 column tables scrolled
   sideways on a phone. On phones a table is only as wide as its content needs; tables that still don't
   fit scroll inside their card with the team column pinned (sm-modern.js marks it). */
@media (max-width: 640px) {
  .sm-table,
  .ssm-scope .sm-table { min-width: 0 !important; width: 100% !important; --sm-table-min-width: 0px !important; }
  .sm-table th,
  .sm-table td { padding-left: 8px !important; padding-right: 8px !important; }
  .sm-table thead th { font-size: 10px !important; letter-spacing: .05em; }
  .sm-table td { font-size: 13px !important; }
  /* unified-v19 fixes team and "compact-2" (division) columns at 160px and the rank at 44px */
  .sm-table th.sm-table__cell--compact-team,
  .sm-table td.sm-table__cell--compact-team { width: auto !important; min-width: 112px !important; }
  .sm-table th.sm-table__cell--compact-2,
  .sm-table td.sm-table__cell--compact-2 { width: auto !important; min-width: 0 !important; }
  .sm-table th.sm-table__cell--compact-index,
  .sm-table td.sm-table__cell--compact-index { width: 30px !important; min-width: 30px !important; max-width: 30px !important; }
  .sm-table td .arrow-after::after,
  .sm-table td a.arrow-after::after { display: none !important; }   /* the -> after team links: no room */
  .sm-table [data-sm-phone-hide] { display: none !important; }
  .ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:nth-child(1) { width: 28px; }
  .ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:nth-child(2) { width: auto; }
  .ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:nth-child(n+3) { width: auto; }
  .sm-table [data-sm-pin] {
    position: sticky;
    z-index: 2;
    background: #ffffff;
  }
  .sm-table thead [data-sm-pin] { background: var(--sm-color-surface-alt) !important; z-index: 3; }
  .sm-table [data-sm-pin-last] { box-shadow: 6px 0 8px -6px rgba(15, 25, 60, .25); }
}

/* ================================================================ page tops without a hero
   US ratings / schedule / teams pages: the page h1 is the title of the first table card, so that card's
   toolbar becomes the dark band (as the side panel titles). Soccer pages: their .sm-hero and title rows
   become dark bands, and a bare h1 + intro at the top of the page is drawn as one band. */
.sm-table-toolbar:has(h1) {
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(0, 180, 216, .2), transparent 60%),
    linear-gradient(135deg, #0a1020 0%, #0e1a33 100%) !important;
  border-bottom: 2px solid var(--sm-cyan) !important;
  padding: 18px 20px 16px !important;
}
.sm-table-toolbar:has(h1) h1 {
  color: #ffffff !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  font-weight: 900 !important;
}
.sm-table-toolbar:has(h1) .sm-table-toolbar__meta { color: #a9b4d0 !important; }
.sm-table-toolbar:has(h1) .sm-table__link-btn { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .18) !important; color: #ffffff !important; }

.ssm-scope .sm-hero,
.ssm-scope .sm-page-header-row {
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(0, 180, 216, .18), transparent 60%),
    linear-gradient(135deg, #0a1020 0%, #0e1a33 100%) !important;
  border: 1px solid #2a3860 !important;
  border-bottom: 2px solid var(--sm-cyan) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(6, 9, 18, .18), 0 6px 20px -8px rgba(0, 180, 216, .35) !important;
  padding: 24px 26px !important;
  margin-bottom: 22px !important;
  color: #eef2ff;
}
.ssm-scope .sm-hero__title,
.ssm-scope .sm-page-header-row .sm-page-title,
.ssm-scope .sm-results-hero .sm-page-title {
  color: #ffffff !important;
  font-family: var(--sm-font-heading) !important;
  font-weight: 900 !important;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1 !important;
  letter-spacing: .01em;
  font-size: clamp(30px, 4.6vw, 52px) !important;
}
.ssm-scope .sm-hero__summary,
.ssm-scope .sm-page-header-row .sm-page-intro,
.ssm-scope .sm-results-hero .sm-page-intro { color: #a9b4d0 !important; }
.ssm-scope .sm-hero a,
.ssm-scope .sm-page-header-row a:not(.sm-nav-arrow):not(.sm-btn-ghost),
.ssm-scope .sm-results-hero .sm-page-intro a { color: #5fd8f0 !important; }
.ssm-scope .sm-hero__kicker {
  display: inline-flex !important;
  background: rgba(0, 180, 216, .12) !important;
  border: 1px solid rgba(0, 180, 216, .35) !important;
  color: #5fd8f0 !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ssm-scope .sm-hero .sm-nav-select,
.ssm-scope .sm-page-header-row .sm-nav-select,
.ssm-scope .sm-results-hero .sm-nav-select,
.ssm-scope .sm-hero .sm-nav-arrow,
.ssm-scope .sm-page-header-row .sm-nav-arrow,
.ssm-scope .sm-results-hero .sm-nav-arrow,
.ssm-scope .sm-page-header-row .sm-btn-ghost {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
}
/* a bare h1 + intro straight in the page body: one band drawn across the two */
.ssm-scope .sm-page-shell > div > h1.sm-page-title {
  margin: 0 0 22px !important;
  padding: 24px 26px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 52px) !important;
  line-height: 1 !important;
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(0, 180, 216, .18), transparent 60%),
    linear-gradient(135deg, #0a1020 0%, #0e1a33 100%);
  border: 1px solid #2a3860;
  border-bottom: 2px solid var(--sm-cyan);
  border-radius: 20px;
}
.ssm-scope .sm-page-shell > div > h1.sm-page-title:has(+ .sm-page-intro) {
  margin-bottom: 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
.ssm-scope .sm-page-shell > div > h1.sm-page-title + .sm-page-intro {
  margin: 0 0 22px !important;
  padding: 0 26px 22px;
  max-width: none;
  color: #a9b4d0 !important;
  background: linear-gradient(135deg, #0a1020 0%, #0e1a33 100%);
  border: 1px solid #2a3860;
  border-top: 0;
  border-bottom: 2px solid var(--sm-cyan);
  border-radius: 0 0 20px 20px;
}
.ssm-scope .sm-page-shell > div > h1.sm-page-title + .sm-page-intro a { color: #5fd8f0 !important; }
.ssm-scope .sm-page-title:not(.sm-page-shell > div > h1) { font-weight: 800; font-style: italic; text-transform: uppercase; }

/* table team icons are now the outlined PNG/stroked art (hero_team_art) */
.sm-standard-team__svg,
.sm-teams-team__svg { object-fit: contain; }
.sm-gamecard__flag { font-size: 30px; line-height: 1; }

/* old matchup hero markup (the ~262k prebuilt archive pages, until they're regenerated): the same dark band,
   with its stacked layout (art above each name, title block on top); the side-by-side rules above are
   scoped to the new markup's --band class */
.sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__title { font-size: clamp(26px, 3.6vw, 40px) !important; margin: 6px 0 4px !important; }
.sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__team-icon { width: 84px !important; height: 84px !important; margin-bottom: 8px !important; }
.sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__team-name { font-size: clamp(24px, 3vw, 36px) !important; }
.sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__team-icon {   /* old flat art: a light edge on the dark band */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 1px rgba(255, 255, 255, .6)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}

/* ================================================================ light page tops (owner, 3 Nov: "not keen on the dark headers")
   Page heroes, soccer title bands, table-title bands and side panel titles use the homepage intro's light card
   (white to ice, cyan left edge, faint cyan glow). Dark stays for the header/footer, the matchup and team
   heroes (team-colour tints need it) and the homepage carousel cards. Overrides the dark rules above. */
.sm-home-hero,
.sm-playoff-hero,
.sm-results-hero,
.sm-article-hero,
.sm-league-hero,
.sm-teams-hero,
.ssm-scope .sm-hero,
.ssm-scope .sm-page-header-row,
.sm-table-toolbar:has(h1) {
  background:
    radial-gradient(80% 180% at 100% 0%, rgba(0, 180, 216, .12), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f3f7fc 100%) !important;
  border: 1px solid var(--sm-color-line) !important;
  border-left: 4px solid var(--sm-cyan) !important;
  box-shadow: var(--sm-shadow-soft) !important;
  color: var(--sm-color-text);
}
.sm-table-toolbar:has(h1) { border-width: 0 0 1px 4px !important; box-shadow: none !important; }
.sm-home-hero__title,
.sm-playoff-hero__title,
.sm-results-hero__title,
.sm-article-hero__title,
.sm-league-hero__title,
.sm-teams-hero__title,
.ssm-scope .sm-hero__title,
.ssm-scope .sm-page-header-row .sm-page-title,
.ssm-scope .sm-results-hero .sm-page-title,
.sm-table-toolbar:has(h1) h1 { color: var(--sm-color-text) !important; }
.sm-home-hero__summary,
.sm-playoff-hero__summary,
.sm-results-hero__summary,
.sm-article-hero__subtitle,
.sm-league-hero__summary,
.sm-teams-hero__summary,
.sm-playoff-hero__updated,
.ssm-scope .sm-hero__summary,
.ssm-scope .sm-page-header-row .sm-page-intro,
.ssm-scope .sm-results-hero .sm-page-intro,
.sm-table-toolbar:has(h1) .sm-table-toolbar__meta { color: var(--sm-color-text-soft) !important; }
.ssm-scope .sm-hero a,
.ssm-scope .sm-page-header-row a:not(.sm-nav-arrow):not(.sm-btn-ghost),
.ssm-scope .sm-results-hero .sm-page-intro a { color: var(--sm-cyan-ink) !important; }
.sm-home-hero__kicker,
.ssm-scope .sm-hero__kicker {
  background: rgba(0, 180, 216, .10) !important;
  border-color: rgba(0, 180, 216, .35) !important;
  color: var(--sm-cyan-ink) !important;
}
/* stat boxes and pickers inside the (now light) page tops */
.sm-playoff-stat,
.sm-results-stat {
  background: #ffffff !important;
  border: 1px solid var(--sm-color-line) !important;
  box-shadow: none !important;
}
.sm-playoff-stat__label,
.sm-results-stat__label { color: var(--sm-color-muted) !important; }
.sm-playoff-stat__value,
.sm-results-stat__value { color: var(--sm-color-text) !important; }
.sm-results-hero .sm-date-trigger,
.sm-results-hero .sm-date-arrow,
.ssm-scope .sm-hero .sm-nav-select,
.ssm-scope .sm-page-header-row .sm-nav-select,
.ssm-scope .sm-results-hero .sm-nav-select,
.ssm-scope .sm-hero .sm-nav-arrow,
.ssm-scope .sm-page-header-row .sm-nav-arrow,
.ssm-scope .sm-results-hero .sm-nav-arrow,
.ssm-scope .sm-page-header-row .sm-btn-ghost,
.sm-table-toolbar:has(h1) .sm-table__link-btn {
  background: #ffffff !important;
  border: 1px solid #cdd6e6 !important;
  color: var(--sm-color-text) !important;
}
/* soccer pages' bare h1 + intro: the same light card drawn across the two */
.ssm-scope .sm-page-shell > div > h1.sm-page-title,
.ssm-scope .sm-page-shell > div > h1.sm-page-title + .sm-page-intro {
  color: var(--sm-color-text) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f3f7fc 100%);
  border-color: var(--sm-color-line);
  border-left: 4px solid var(--sm-cyan);
}
.ssm-scope .sm-page-shell > div > h1.sm-page-title:not(:has(+ .sm-page-intro)) { border-bottom: 1px solid var(--sm-color-line); }
.ssm-scope .sm-page-shell > div > h1.sm-page-title + .sm-page-intro { color: var(--sm-color-text-soft) !important; border-bottom: 1px solid var(--sm-color-line); }
.ssm-scope .sm-page-shell > div > h1.sm-page-title + .sm-page-intro a { color: var(--sm-cyan-ink) !important; }
/* side panel titles: light, with the cyan edge */
.sm-league-sidepanel__title,
.sm-sidepanel__title {
  color: var(--sm-color-text) !important;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(0, 180, 216, .12), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f1f6fb 100%) !important;
  border-bottom: 1px solid var(--sm-color-line) !important;
  box-shadow: inset 4px 0 0 var(--sm-cyan);
}
.sm-header__mobile .sm-league-sidepanel__title,
.sm-header__mobile .sm-sidepanel__title { color: #ffffff !important; background: none !important; box-shadow: none; border: 0 !important; }

/* mini cards, per-team bars (owner: a shared bar under both rows didn't say which team was which):
   art | name | that team's win-% bar | (score) | win % */
.sm-gamecard__row { grid-template-columns: 38px minmax(0, 1.15fr) minmax(48px, 1fr) auto auto; }
.sm-gamecard__row:not(:has(.sm-gamecard__score)) { grid-template-columns: 38px minmax(0, 1.15fr) minmax(48px, 1fr) auto; }
.sm-gamecard__meter {
  display: block;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--sm-color-line);
}
.sm-gamecard__meter i { display: block; height: 100%; border-radius: 99px; }
.sm-hero-carousel .sm-gamecard__meter { background: rgba(255, 255, 255, .14); }
.sm-hero-carousel .sm-gamecard__meter i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.sm-gamecard__foot:has(> span:first-child:empty) { justify-content: flex-end; }
@media (max-width: 480px) {      /* phones: the name gets the room, the bar shrinks */
  .sm-gamecard__row,
  .sm-gamecard__row:not(:has(.sm-gamecard__score)) { grid-template-columns: 34px minmax(0, 1.7fr) minmax(32px, .8fr) auto; gap: 8px; }
  .sm-gamecard__row:has(.sm-gamecard__score) { grid-template-columns: 34px minmax(0, 1.7fr) minmax(28px, .7fr) auto auto; }
  .sm-gamecard__art, .sm-gamecard__art img, .sm-gamecard__art svg, .sm-gamecard__img { width: 34px !important; height: 34px !important; }
  .sm-gamecard__name { font-size: 19px; }
  .sm-gamecard__pct { min-width: 44px; font-size: 21px; }
}
@media (max-width: 760px) {      /* old archive hero on phones: names at the new hero's phone size */
  .sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__team-name { font-size: 18px !important; overflow-wrap: normal; }
  .sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__team-icon { width: 56px !important; height: 56px !important; }
  .sm-matchup-hero-v2:not(.sm-matchup-hero-v2--band) .sm-matchup-hero-v2__title { font-size: 22px !important; }
}