/* Geist (SIL Open Font License, see fonts/OFL.txt), served from this site so no visitor data goes to a font host. */
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* FairXG
   An analyst's workspace: graphite chrome that stays out of the way, real crests and kit colours
   carrying the colour. Floodlight amber is the single accent: the model's pick, the current
   selection and the kick-off countdown. Spacing sits on a 4px grid. */

:root {
  /* Graphite ramp */
  --g-0: #0f0f10;   /* sidebar */
  --g-1: #141415;   /* page */
  --g-2: #19191b;   /* card */
  --g-3: #232325;   /* raised: inputs, cells, active rows */
  --g-4: #2c2c2f;   /* hover on raised */
  --line: rgba(237, 237, 237, 0.08);
  --line-strong: rgba(237, 237, 237, 0.14);
  --text-1: #ededed;
  --text-2: #a1a1a6;
  --text-3: #85858b;

  --accent: #ffb547;
  --accent-soft: rgba(255, 181, 71, 0.12);
  --positive: #4cc38a;
  --negative: #e5484d;

  /* Team colours, set per match from the clubs' kits */
  --home: #6fade1;
  --away: #f0845a;

  --turf-a: #173a30;
  --turf-b: #1b4136;
  --chalk: rgba(237, 240, 228, 0.6);

  --r-sm: 6px;
  --r-ctl: 8px;
  --r-card: 12px;
  --r-panel: 16px;
  --sidebar: 248px;
  --panel-w: 440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--g-1);
  color: var(--text-2);
  font: 400 14px/20px var(--font);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { color: var(--text-1); margin: 0; font-weight: 500; }
h2 { font-size: 16px; line-height: 24px; }
h3 { font-size: 14px; line-height: 20px; }
code { color: var(--text-1); background: var(--g-3); padding: 0 4px; border-radius: 4px; }
.meta { font-size: 12px; line-height: 16px; color: var(--text-3); }
.muted { color: var(--text-3); }
.hint { color: var(--text-3); font-size: 12px; line-height: 18px; margin: 12px 0 0; max-width: 72ch; }
.link { color: var(--text-1); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color 150ms var(--ease); }
.link:hover { text-decoration-color: var(--text-1); }
.strong { color: var(--text-1); font-weight: 500; }
.error { color: var(--negative); }
.empty { color: var(--text-3); padding: 32px 4px; margin: 0; text-align: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Shell: sidebar, top bar ---------- */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 20;
  display: flex; flex-direction: column; padding: 16px 12px;
  background: var(--g-0); border-right: 1px solid var(--line); scrollbar-width: thin;
}
.brand { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px; margin-bottom: 16px; color: var(--text-1); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brand svg { width: 28px; height: 28px; stroke: none; }
.wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.035em; color: var(--text-1); }
.wordmark b { font-weight: 600; color: var(--accent); margin-left: 0.04em; }
.brand .lg-h { fill: var(--text-1); }
.brand .lg-d { fill: var(--text-3); }
.brand .lg-a { fill: var(--accent); }
.side-section { padding: 0 8px; margin: 24px 0 8px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item, .side-subitem {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--r-ctl);
  color: var(--text-2); transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.side-item svg { width: 18px; height: 18px; color: var(--text-3); }
.side-item > span:first-of-type, .side-subitem > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover, .side-subitem:hover { color: var(--text-1); background: var(--g-2); }
.side-item[aria-current="page"], .side-subitem[aria-current] { color: var(--text-1); background: var(--g-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.side-item[aria-current="page"] svg { color: var(--text-1); }
.side-count { font-size: 12px; color: var(--text-3); }
.side-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 18px; padding-left: 10px; border-left: 1px solid var(--line); }
.side-subitem { min-height: 32px; font-size: 13px; }
.side-account { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.side-signin { width: 100%; justify-content: center; gap: 8px; height: 36px; }
.side-signin svg { width: 16px; height: 16px; }
.side-email { font-size: 13px; }
.avatar { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--g-4);
  color: var(--text-1); font-size: 11px; font-weight: 500; }
.side-foot { padding: 12px 8px 0; font-size: 12px; color: var(--text-3); }
.topbar .topbar-account { display: none; flex: none; }
.topbar-account svg { width: 18px; height: 18px; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px;
  background: rgba(20, 20, 21, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-title { color: var(--text-1); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb { color: var(--text-3); transition: color 150ms var(--ease); }
.crumb:hover { color: var(--text-1); }
.crumb-sep { color: var(--text-3); margin: 0 8px; }
.search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  width: min(320px, 32vw); height: 36px; padding: 0 8px 0 12px;
  background: var(--g-2); border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--text-3);
  transition: border-color 150ms var(--ease);
}
.search:focus-within { border-color: var(--line-strong); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-1); }
.search input::placeholder { color: var(--text-3); }
.search kbd { font: 400 12px/16px var(--font); color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 6px; }
.clock { min-width: 44px; text-align: right; color: var(--text-2); font-size: 13px; }

.content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px; flex: 1; }
.foot { padding: 16px 24px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.foot p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.foot-links a { color: var(--text-2); }
.tabbar { display: none; }
.topbar-brand { display: none; font-size: 17px; flex: none; }

/* ---------- Surfaces ---------- */

.panel { background: var(--g-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; margin-bottom: 16px; }
.panel h3 { margin-bottom: 12px; }
.panel.narrow { max-width: 540px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-title { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.lede { max-width: 64ch; margin: 8px 0 0; }

.stat-strip { display: flex; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--g-2); overflow: hidden; }
.stat-strip > div { padding: 12px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 120px; border-left: 1px solid var(--line); }
.stat-strip > div:first-child { border-left: 0; }
.stat-strip b { color: var(--text-1); font-size: 22px; line-height: 28px; font-weight: 500; }
.stat-strip span { font-size: 12px; line-height: 16px; color: var(--text-3); }
.stat-strip.compact { margin-bottom: 16px; background: var(--g-1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong);
  font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}
.btn-primary { background: var(--text-1); border-color: var(--text-1); color: var(--g-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-primary:hover { background: #ffffff; }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { background: var(--g-3); color: var(--text-1); height: 32px; padding: 0 12px; font-size: 13px; border-color: var(--line); }
.btn-ghost:hover { background: var(--g-4); }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--g-3); color: var(--text-2); cursor: pointer; transition: color 150ms var(--ease), background-color 150ms var(--ease); }
.icon-btn:hover { color: var(--text-1); background: var(--g-4); }

/* Crests: real club crests and player flags, initials as the fallback */
.crest { --s: 28px; width: var(--s); height: var(--s); flex: none; object-fit: contain; display: inline-block; vertical-align: middle; }
.crest.is-flag { height: calc(var(--s) * 0.7); width: var(--s); object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.crest.is-initials {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: hsl(var(--h) 38% 24%); box-shadow: inset 0 0 0 1.5px hsl(var(--h) 48% 48%);
  color: hsl(var(--h) 70% 86%); font: 500 calc(var(--s) * 0.38) / 1 var(--font);
}
.crest-xs { --s: 16px; }
.crest-sm { --s: 22px; }
.crest-md { --s: 28px; }
.crest-xl { --s: 64px; }

/* Filters */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font-size: 13px; cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.chip:hover { color: var(--text-1); background: var(--g-3); }
.chip.is-on { color: var(--text-1); background: var(--g-3); border-color: var(--line-strong); box-shadow: inset 0 -2px 0 var(--accent); }
.chip-n { color: var(--text-3); }

.days { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; border-radius: var(--r-ctl); border: 0; background: transparent;
  cursor: pointer; transition: background-color 150ms var(--ease);
}
.day span { font-size: 11px; line-height: 14px; color: var(--text-3); }
.day b { color: var(--text-2); font-size: 15px; line-height: 20px; font-weight: 500; }
.day:hover:not(:disabled) { background: var(--g-3); }
.day.is-on { background: var(--g-3); box-shadow: inset 0 -2px 0 var(--accent); }
.day.is-on b { color: var(--text-1); }
.day:disabled { opacity: 0.35; cursor: default; }

.meter { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--g-3); overflow: hidden; }
.meter > span { position: absolute; inset: 0; background: var(--text-3); border-radius: inherit; transform-origin: left; transform: scaleX(var(--w, 0)); }
.pbar { display: flex; gap: 2px; height: 4px; margin: 8px 0 16px; }
.pbar span { border-radius: 2px; }
.pbar .h { background: var(--home); }
.pbar .d { background: var(--text-3); }
.pbar .a { background: var(--away); }

/* ---------- Overview workspace ---------- */

.content.is-workspace { max-width: none; padding: 0; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); align-items: start; }
.ws-main { min-width: 0; padding: 24px; }
.ws-panel {
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px; border-left: 1px solid var(--line); background: var(--g-1); scrollbar-width: thin;
  transition: opacity 150ms var(--ease);
}
.ws-panel.is-loading { opacity: 0.5; }
.ws-panel .split { grid-template-columns: 1fr; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--g-2); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.kpi span { font-size: 12px; line-height: 16px; color: var(--text-3); }
.kpi b { color: var(--text-1); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; }
.kpi small { font-size: 12px; line-height: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.top-strip { margin-bottom: 24px; }
.top-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.top-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0;
  background: var(--g-2); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.top-card:hover { border-color: var(--line-strong); background: #1c1c1e; }
.top-card.is-selected { border-color: rgba(255, 181, 71, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.tc-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.tc-head span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-head span:last-child { white-space: nowrap; color: var(--text-2); }
.tc-teams { display: grid; gap: 8px; }
.tc-team { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-1); font-size: 15px; font-weight: 500; }
.tc-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tc-odds.two { grid-template-columns: repeat(2, 1fr); }
.tc-odds > span { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px; border-radius: var(--r-sm); background: var(--g-3); color: var(--text-1); font-size: 13px; font-weight: 500; }
.tc-odds i { font-style: normal; font-weight: 400; color: var(--text-3); font-size: 12px; }
.tc-odds .is-pick { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.35); }

/* ---------- Fixture board ---------- */

.fixtures { padding: 16px 0 8px; }
.fixtures > .panel-head, .fixtures > .chips { padding: 0 16px; }
.board-group + .board-group { margin-top: 16px; }
.board-head, .mrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto 16px; align-items: center; gap: 12px; }
.board-head { padding: 8px 16px; background: var(--g-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.board-title { color: var(--text-1); font-size: 13px; font-weight: 500; grid-column: 1 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-title .meta { margin-left: 8px; }
.board-cols { display: grid; grid-template-columns: repeat(3, 56px); gap: 4px; text-align: center; font-size: 12px; color: var(--text-3); }
.board-cols.two { grid-template-columns: repeat(2, 56px); }
.board-cols.extra { grid-template-columns: repeat(2, 56px); padding-left: 12px; }

.mrow { position: relative; padding: 6px 16px; border-bottom: 1px solid var(--line); transition: background-color 150ms var(--ease); }
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: rgba(237, 237, 237, 0.025); }
.mrow.is-selected { background: rgba(255, 181, 71, 0.05); box-shadow: inset 2px 0 0 var(--accent); }
.mrow:hover .mrow-go { color: var(--text-1); }
.mrow-time { display: flex; flex-direction: column; }
.mrow-clock { color: var(--text-1); font-size: 13px; line-height: 18px; font-weight: 500; }
.mrow-day { font-size: 11px; line-height: 16px; color: var(--text-3); }
.mrow-teams { display: grid; gap: 4px; min-width: 0; }
.mrow-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; }
.mrow-team .name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-team .name.is-fav { color: var(--text-1); font-weight: 500; }
.mrow-cells, .mrow-extra { display: grid; grid-template-columns: repeat(3, 56px); gap: 4px; }
.mrow-cells.two, .mrow-extra { grid-template-columns: repeat(2, 56px); }
.mrow-extra { padding-left: 12px; border-left: 1px solid var(--line); }
.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; border-radius: var(--r-sm); background: var(--g-3); transition: background-color 150ms var(--ease); }
.mrow:hover .cell { background: var(--g-4); }
.cell-v { color: var(--text-1); font-size: 13px; line-height: 18px; font-weight: 500; }
.cell-o { font-size: 11px; line-height: 14px; color: var(--text-3); }
.cell.is-pick, .mrow:hover .cell.is-pick { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.35); }
.cell.is-pick .cell-v { color: var(--accent); }
.mrow-extra .cell, .mrow:hover .mrow-extra .cell { background: transparent; }
.mrow-go { color: var(--text-3); display: grid; place-items: center; transition: color 150ms var(--ease); }
.mrow[hidden], .board-group[hidden] { display: none; }

/* ---------- Tabs ---------- */

.tab-list { position: relative; display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tab-list::-webkit-scrollbar { display: none; }
.tab-list [role="tab"] {
  background: none; border: 0; padding: 10px 10px; cursor: pointer; white-space: nowrap;
  color: var(--text-3); font-size: 13px; transition: color 150ms var(--ease);
}
.tab-list [role="tab"]:hover { color: var(--text-2); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--text-1); }
.tab-ink { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--text-1); transition: transform 300ms var(--ease), width 300ms var(--ease); }
.tab-panel[hidden] { display: none; }

/* ---------- Match analysis ---------- */

.match-head { padding-bottom: 20px; }
.mh-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mh-comp { color: var(--text-1); font-size: 13px; font-weight: 500; }
.mh-when { color: var(--text-3); font-size: 13px; margin-right: auto; }
.match-page .mh-open { display: none; }
.mh-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; margin-bottom: 20px; }
.mh-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.mh-team b { color: var(--text-1); font-size: 17px; line-height: 22px; font-weight: 500; overflow-wrap: anywhere; }
.mh-team .meta { margin-top: -4px; }
.mh-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; }
.mh-xg { font-size: 12px; color: var(--text-3); }
.mh-xg b { color: var(--text-1); font-weight: 500; }
.versus { color: var(--text-3); font-size: 15px; padding-top: 12px; }

.countdown { display: flex; gap: 2px; background: var(--g-0); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 6px 8px; }
.countdown > div { display: flex; flex-direction: column; align-items: center; min-width: 32px; }
.countdown b { color: var(--accent); font-size: 18px; line-height: 22px; font-weight: 500; }
.countdown span { font-size: 10px; line-height: 14px; color: var(--text-3); }
.countdown.is-live b { color: var(--positive); }

/* Team-coloured result tiles */
.team-tiles { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 8px; }
.team-tiles.two { grid-template-columns: 1fr 1fr; }
.team-tile {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; min-width: 0;
  border-radius: var(--r-card); background: var(--fill); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.team-tile.is-draw { background: var(--g-3); color: var(--text-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.team-tile.is-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; }
.tt-top .crest-sm { --s: 16px; }
.tt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
.tt-pick { margin-left: auto; white-space: nowrap; font-size: 11px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.22); color: inherit; }
.team-tile.is-draw .tt-pick { background: var(--accent-soft); color: var(--accent); }
.tt-value { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; }
.tt-value small { font-size: 15px; opacity: 0.7; margin-left: 1px; letter-spacing: 0; }
.tt-odds { display: flex; flex-direction: column; font-size: 11px; line-height: 14px; opacity: 0.8; }

.match-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.match-page-main, .match-page-side { min-width: 0; }
.match-page-side { position: sticky; top: 80px; }
.match-page .mh-team b { font-size: 22px; line-height: 28px; }
.match-page .team-tile { padding: 16px; }
.match-page .tt-value { font-size: 36px; line-height: 40px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.split > .panel { margin-bottom: 0; }

.flag { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--g-3); border-left: 2px solid var(--accent); color: var(--text-2); font-size: 13px; max-width: 80ch; }
.flag b { color: var(--text-1); font-weight: 500; }

/* The probability pitch */
.pitch { margin: 0; }
.pitch svg { display: block; width: 100%; height: auto; border-radius: var(--r-ctl); }
.pitch .turf { fill: var(--turf-a); }
.pitch .turf.alt { fill: var(--turf-b); }
.pitch .terr { transform-box: fill-box; }
.pitch .terr-h { fill: color-mix(in srgb, var(--home) 48%, transparent); transform-origin: left center; }
.pitch .terr-a { fill: color-mix(in srgb, var(--away) 44%, transparent); transform-origin: right center; }
.pitch .terr-d { fill: rgba(237, 240, 228, 0.04); }
.pitch .chalk { fill: none; stroke: var(--chalk); stroke-width: 2.5; }
.pitch .chalk .spot { fill: var(--chalk); stroke: none; }
.pitch .chalk .goal { stroke-width: 2; }
.pitch .chalk .net { stroke: rgba(237, 240, 228, 0.9); stroke-width: 4; stroke-dasharray: 2 6; }
.pitch .pct { fill: var(--text-1); font: 500 88px/1 var(--font); letter-spacing: -0.03em; paint-order: stroke; stroke: rgba(10, 20, 16, 0.4); stroke-width: 6px; }
.pitch .pct.mid { font-size: 60px; fill: rgba(237, 237, 237, 0.85); }
.pitch .pct .unit { font-size: 0.42em; fill: rgba(237, 237, 237, 0.7); letter-spacing: 0; }
.pitch .pct.is-pick { fill: var(--accent); }
.pitch .who { fill: var(--text-1); font: 500 22px var(--font); paint-order: stroke; stroke: rgba(10, 20, 16, 0.5); stroke-width: 5px; }

/* Last-10 form chart */
.form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.form-team { display: flex; align-items: center; gap: 8px; color: var(--text-1); }
.form-team b { font-weight: 500; }
.form-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); }
.form-stats b { color: var(--text-1); font-weight: 500; font-size: 13px; margin-right: 2px; }
.form-chart { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 20px; border-bottom: 1px solid var(--line-strong); }
.fc-line { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(237, 237, 237, 0.35); pointer-events: none; z-index: 1; }
.fc-line span { position: absolute; right: 0; top: -9px; padding: 0 4px; font-size: 10px; line-height: 16px; color: var(--text-2); background: var(--g-2); border-radius: 4px; }
.fc-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.fc-bar { position: relative; width: 100%; display: flex; flex-direction: column; border-radius: 5px 5px 2px 2px; overflow: visible; transform-origin: bottom; }
.fc-total { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; line-height: 16px; color: var(--text-2); }
.fc-bar.is-over .fc-total { color: var(--text-1); font-weight: 500; }
.fc-for, .fc-against { display: grid; place-items: center; min-height: 0; font-size: 10px; font-weight: 500; overflow: hidden; }
.fc-for { background: var(--team); color: #141415; border-radius: 0 0 2px 2px; }
.fc-against { background: #4a4a4f; color: var(--text-1); border-radius: 5px 5px 0 0; }
.fc-for:first-child { border-radius: 5px 5px 2px 2px; }
.fc-against:last-child { border-radius: 5px 5px 2px 2px; }
.form-axis { display: flex; gap: 6px; margin-top: 8px; }
.fc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fc-meta .res { width: 20px; height: 20px; font-size: 11px; }
.fc-date { font-size: 10px; line-height: 14px; color: var(--text-3); white-space: nowrap; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
thead th { color: var(--text-3); font-weight: 400; font-size: 12px; line-height: 16px; }
tbody th { color: var(--text-2); font-weight: 400; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td { color: var(--text-2); }
.num { text-align: right; }
td.strong { color: var(--text-1); }
tr.secondary th, tr.secondary td { color: var(--text-3); }
.table-wrap { overflow-x: auto; }

.chart { width: 100%; height: 180px; display: block; }
.chart .grid, .calib .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart polyline.h { stroke: var(--home); }
.chart polyline.a { stroke: var(--away); }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; }
.legend { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.key { width: 12px; height: 2px; border-radius: 1px; margin-left: 12px; }
.key:first-child { margin-left: 0; }
.key.h { background: var(--home); }
.key.a { background: var(--away); }

.market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mkt {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 8px 12px; border-radius: var(--r-ctl); background: var(--g-3); transition: background-color 150ms var(--ease);
}
.mkt:hover { background: var(--g-4); }
.mkt span { color: var(--text-2); font-size: 13px; grid-row: 1 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt b { color: var(--text-1); font-size: 15px; line-height: 20px; font-weight: 500; text-align: right; }
.mkt small { font-size: 11px; line-height: 14px; color: var(--text-3); text-align: right; }

.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scores li { display: grid; grid-template-columns: 40px 1fr 40px 40px; align-items: center; gap: 12px; }
.scores .score { color: var(--text-1); font-weight: 500; }
.scores li:first-child .meter > span { background: var(--accent); }
.scores .meta { text-align: right; color: var(--text-2); font-size: 13px; }
.scores .muted { color: var(--text-3); }

.heat { border-collapse: separate; border-spacing: 4px; font-size: 12px; width: auto; }
.heat th { color: var(--text-3); font-weight: 400; text-align: center; border: 0; padding: 0 4px; }
.heat td { text-align: center; padding: 8px 4px; min-width: 36px; border: 0; border-radius: var(--r-sm); color: var(--text-1); }
.heat td.hw { background: color-mix(in srgb, var(--home) calc(var(--a) * 70%), var(--g-3)); }
.heat td.dr { background: color-mix(in srgb, #b8b8bd calc(var(--a) * 50%), var(--g-3)); }
.heat td.aw { background: color-mix(in srgb, var(--away) calc(var(--a) * 70%), var(--g-3)); }
.heat td.hot { color: #111112; font-weight: 500; }

.htft { border-collapse: separate; border-spacing: 4px; }
.htft th, .htft td { border: 0; }
.htft thead th { text-align: center; }
.htft thead th:first-child { text-align: left; }
.htft td { text-align: center; border-radius: var(--r-sm); background: color-mix(in srgb, var(--text-1) calc(var(--a) * 14%), var(--g-3)); padding: 8px 4px; }
.htft td b { display: block; color: var(--text-1); font-weight: 500; }
.htft td small { font-size: 11px; color: var(--text-3); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; min-width: 0; border-radius: var(--r-ctl); background: var(--g-3); border-top: 2px solid var(--text-3); }
.tile-home { border-top-color: var(--home); }
.tile-away { border-top-color: var(--away); }
.tile-label { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { color: var(--text-1); font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; }
.tile.is-pick .tile-value { color: var(--accent); }
.tile-value small { font-size: 14px; color: var(--text-3); margin-left: 2px; letter-spacing: 0; }
.tile-odds { font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.results { list-style: none; margin: 0; padding: 0; }
.results li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.results li:last-child { border-bottom: 0; }
.results .when { min-width: 44px; }
.results .venue { width: 12px; }
.results .opp { flex: 1; min-width: 0; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .score { color: var(--text-1); font-weight: 500; }
.results .pbar { width: 96px; margin: 0; flex: none; }
.res { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; flex: none; }
.res-W { background: rgba(76, 195, 138, 0.16); color: var(--positive); }
.res-D { background: var(--g-3); color: var(--text-2); }
.res-L { background: rgba(229, 72, 77, 0.16); color: var(--negative); }
.chips-inline { display: inline-flex; gap: 4px; }
.chips-inline .res { width: 18px; height: 18px; font-size: 10px; }

.h2h { display: flex; justify-content: space-around; text-align: center; padding: 4px 0 8px; }
.h2h > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.h2h b { color: var(--text-1); font-size: 28px; line-height: 32px; font-weight: 500; }
.h2h span { font-size: 12px; color: var(--text-3); }

.picker { display: grid; gap: 12px; }
.field { display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }
.field input { height: 40px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--g-3); color: var(--text-1); outline: none; transition: border-color 150ms var(--ease); }
.field input:focus { border-color: var(--line-strong); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

.ratings td, .ratings th { padding: 8px; }
.ratings .rank { color: var(--text-3); }
.team-cell { display: inline-flex; align-items: center; gap: 10px; color: var(--text-1); }
.rating-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
.rating-cell .meter { width: 80px; }
.rating-cell b { color: var(--text-1); font-weight: 500; min-width: 40px; }
.ratings tr[hidden] { display: none; }

.calib { width: 100%; max-width: 320px; height: auto; }
.calib-ideal { stroke: var(--text-3); stroke-dasharray: 4 4; stroke-width: 1; }
.calib-dot { fill: var(--accent); fill-opacity: 0.9; }
.calib .axis { fill: var(--text-3); font: 10px var(--font); }
.disclosure { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.disclosure summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--text-2); list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary svg { transition: transform 200ms var(--ease); }
.disclosure[open] summary svg { transform: rotate(90deg); }
.disclosure .results { margin-top: 8px; }

/* ---------- Drawer (medium screens and sport pages) ---------- */

.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 300ms var(--ease); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--g-1); border-left: 1px solid var(--line-strong);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 400ms var(--ease);
}
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-title { color: var(--text-1); font-size: 14px; font-weight: 500; margin-right: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.drawer-body .mh-open { display: none; }
.drawer-body .split { grid-template-columns: 1fr; }
.skeleton { display: grid; gap: 16px; }
.skeleton div { height: 140px; border-radius: var(--r-card); background: var(--g-2); }
.skeleton div:nth-child(2) { height: 280px; }
body.drawer-open { overflow: hidden; }

/* ---------- Motion: the pitch claims its territory; everything else answers the user ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
  .pitch .terr-h, .pitch .terr-a { animation: claim 1000ms var(--ease) both; animation-delay: 150ms; }
  .pitch .terr-d, .pitch .pct, .pitch .who { animation: settle 400ms var(--ease) both; animation-delay: 600ms; }
  .tab-panel { animation: settle 200ms var(--ease) both; }
  .tab-panel:not([hidden]) .fc-bar { animation: rise-bar 600ms var(--ease) both; }
}
@keyframes claim { from { transform: scaleX(0); } }
@keyframes settle { from { opacity: 0; } }
@keyframes rise-bar { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-backdrop, .tab-ink, .ws-panel { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1440px) {
  :root { --panel-w: 400px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .ws-panel { display: none; }
  .match-page { grid-template-columns: minmax(0, 1fr); }
  .match-page-side { position: static; }
  .kpis, .top-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .topbar .topbar-account { display: grid; }  /* the sidebar, which holds the account link, is hidden */
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around;
    background: rgba(15, 15, 16, 0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: var(--r-ctl); color: var(--text-3); font-size: 11px; line-height: 14px; }
  .tabbar a svg { width: 20px; height: 20px; }
  .tabbar a[aria-current="page"] { color: var(--text-1); background: var(--g-3); }
  .main { padding-bottom: 68px; }
  .topbar-brand { display: inline; }
}

@media (max-width: 760px) {
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar-title, .clock { display: none; }
  .search { width: auto; flex: 1; margin-left: 0; }
  .search kbd { display: none; }
  .content { padding: 16px; }
  .ws-main { padding: 16px; }
  .foot { padding: 16px; }

  .page-head { align-items: stretch; }
  .page-title { font-size: 24px; line-height: 28px; }
  .stat-strip { width: 100%; }
  .stat-strip > div { min-width: 0; flex: 1; padding: 8px 12px; }
  .stat-strip b { font-size: 18px; line-height: 24px; }

  .kpis { gap: 8px; margin-bottom: 16px; }
  .kpi { padding: 12px; }
  .kpi b { font-size: 22px; line-height: 28px; }
  .top-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .top-cards::-webkit-scrollbar { display: none; }
  .top-card { flex: 0 0 82%; scroll-snap-align: start; }
  .top-strip { margin-bottom: 16px; }

  .board-head, .mrow { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .board-head .board-cols.extra, .board-pad, .mrow-extra, .mrow-go { display: none; }
  .board-cols, .mrow-cells { grid-template-columns: repeat(3, 44px); }
  .board-cols.two, .mrow-cells.two { grid-template-columns: repeat(2, 48px); }
  .fixtures > .panel-head, .fixtures > .chips { padding: 0 12px; }
  .cell-o { font-size: 10px; }
  .mrow-day { white-space: nowrap; }

  /* Chip rows scroll sideways inside their panel; a fade at the edge shows there's more. */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chips.is-scrollable, .tab-list.is-scrollable { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .chips.is-scrollable.at-end, .tab-list.is-scrollable.at-end { mask-image: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* The day filter fits the width as equal columns instead of running off the edge. */
  .fixtures > .panel-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; overflow: visible; }
  .day { min-width: 0; }
  .day span { font-size: 10px; }

  .mh-teams { gap: 8px; }
  .crest-xl { --s: 48px; }
  .mh-team b { font-size: 15px; line-height: 20px; }
  .match-page .mh-team b { font-size: 17px; line-height: 22px; }
  .team-tile { padding: 10px; }
  .tt-value, .match-page .tt-value { font-size: 22px; line-height: 28px; }
  .tt-pick { display: none; }
  .pitch .pct { font-size: 112px; }
  .pitch .pct.mid { font-size: 80px; }
  .pitch .who { font-size: 30px; }
  .form-chart { gap: 3px; height: 140px; }
  .form-axis { gap: 3px; }
  .fc-date { display: none; }
  .tile-value { font-size: 22px; line-height: 28px; }
  .mkt span { font-size: 12px; }
  .hide-sm { display: none; }
  .rating-cell .meter { display: none; }
  .drawer-panel { width: 100vw; }
}

/* In the narrow panel and drawer the amber outline alone marks the pick. */
.ws-panel .tt-pick, .drawer-body .tt-pick { display: none; }

/* ---------- Season outlook ---------- */
.outlook > .tab-list { margin-bottom: 12px; }
.outlook-table td, .outlook-table th { padding: 8px; }
.outlook-table .rank { color: var(--text-3); width: 32px; }
.outlook-table tr.zone-top td:first-child { box-shadow: inset 2px 0 0 var(--positive); }
.outlook-table tr.zone-rel td:first-child { box-shadow: inset 2px 0 0 var(--negative); }
.chance { color: var(--text-2); }
.chance.good { background: color-mix(in srgb, var(--positive) calc(var(--p) * 38%), transparent); }
.chance.bad { background: color-mix(in srgb, var(--negative) calc(var(--p) * 42%), transparent); }
.chance:not(.good):not(.bad) { background: color-mix(in srgb, var(--text-1) calc(var(--p) * 18%), transparent); }
.finish { display: flex; gap: 2px; height: 16px; align-items: stretch; }
.finish i { flex: 1; min-width: 4px; max-width: 10px; border-radius: 2px; background: color-mix(in srgb, var(--text-1) calc(var(--p) * 85%), var(--g-3)); }
.side-outlook { color: var(--text-1); }

@media (max-width: 760px) { .outlook-table td, .outlook-table th { padding: 8px 4px; } .outlook-table .rank { width: 20px; } }

/* ---------- Live ---------- */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--negative); margin-right: 6px; vertical-align: 1px; flex: none; }
.live-strip { margin-bottom: 24px; }
.live-strip h2 { display: flex; align-items: center; }
.live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.live-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0;
  background: var(--g-2); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.live-card:hover { border-color: var(--line-strong); background: #1c1c1e; }
.live-card.is-live { border-color: rgba(229, 72, 77, 0.35); }
.lc-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.lc-comp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-status { display: inline-flex; align-items: center; white-space: nowrap; color: var(--text-2); }
.live-card.is-live .lc-status { color: var(--text-1); font-weight: 500; }
.lc-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text-1); }
.lc-team .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-team b { font-size: 18px; font-weight: 500; min-width: 16px; text-align: right; }
.lc-sets { display: inline-flex; gap: 8px; }
.lc-sets i { font-style: normal; font-size: 14px; color: var(--text-3); min-width: 10px; text-align: center; }
.lc-sets i.won { color: var(--text-1); font-weight: 500; }
.lc-bar { display: flex; gap: 2px; height: 4px; margin-top: 4px; }
.lc-bar span { border-radius: 2px; transition: flex-grow 600ms var(--ease); }
.lc-bar .h { background: var(--home); }
.lc-bar .d { background: var(--text-3); }
.lc-bar .a { background: var(--away); }
.lc-probs { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--text-1); }
.lc-pre { font-size: 11px; line-height: 14px; color: var(--text-3); }

.live-status { display: inline-flex; align-items: center; font-size: 12px; color: var(--text-2); }
.live-status.is-live { color: var(--text-1); font-weight: 500; }
.live-score { color: var(--text-1); font-size: 34px; line-height: 38px; font-weight: 500; letter-spacing: -0.02em; }
.live-score i { font-style: normal; color: var(--text-3); margin: 0 6px; }
.live-sets { font-size: 12px; color: var(--text-2); }
.match-head.is-live .team-tiles { animation: none; }
.pre-line { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }
.live-markets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.lm { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--g-3); }
.lm:first-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.lm span { font-size: 12px; color: var(--text-3); }
.lm b { font-size: 14px; font-weight: 500; color: var(--text-1); }
.live-stats { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.ls-row { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; row-gap: 4px; }
.ls-val { color: var(--text-1); font-size: 13px; font-weight: 500; }
.ls-row .ls-val:last-of-type { text-align: right; }
.ls-label { text-align: center; font-size: 12px; color: var(--text-3); }
.ls-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 4px; }
.ls-bar span { border-radius: 2px; }
.ls-bar .h { background: var(--home); }
.ls-bar .a { background: var(--away); }

@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 1.6s ease-in-out infinite; }
}
@keyframes live-pulse { 50% { opacity: 0.35; } }
@media (max-width: 760px) {
  .live-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .live-cards::-webkit-scrollbar { display: none; }
  .live-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- Team pages ---------- */
.team-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.team-head .crest-xl { --s: 80px; }
.team-id { flex: 1; min-width: 220px; }
.team-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; color: var(--text-2); font-size: 13px; }
.team-next { width: min(340px, 100%); display: grid; gap: 8px; }
.team-kpis { margin-bottom: 8px; }
.team-hint { margin: 0 0 24px; }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.team-main, .team-side { min-width: 0; }
.team-side { position: sticky; top: 80px; }
.team-chart polyline.team-line { stroke: var(--team); }
.team-results .comp { flex: none; }
.team-results .opp { color: var(--text-1); }
.team-results .opp:hover { text-decoration: underline; text-underline-offset: 3px; }
.called { min-width: 40px; text-align: right; font-size: 12px; color: var(--text-3); }
.called.is-surprise { color: var(--accent); }
.outlook-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.outlook-facts div { display: flex; flex-direction: column; gap: 2px; }
.outlook-facts span { font-size: 12px; color: var(--text-3); }
.outlook-facts b { color: var(--text-1); font-size: 20px; line-height: 24px; font-weight: 500; }
.finish.big { height: 28px; gap: 3px; }
.finish.big i { max-width: none; }
.team-link { color: inherit; }
.team-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .team-side { position: static; }
}
@media (max-width: 760px) {
  .team-head .crest-xl { --s: 56px; }
  .team-results .comp { display: none; }
  .outlook-facts b { font-size: 17px; }
}

/* Team finder */
.search { position: relative; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 4px;
  background: var(--g-2); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); max-height: 360px; overflow-y: auto;
}
.sr-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text-1); font-size: 13px; }
.sr-item.is-active, .sr-item:hover { background: var(--g-3); }
.sr-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ---------- Slip check ---------- */
.slip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.slip-build, .slip-result { min-width: 0; }
.slip-result { position: sticky; top: 80px; }
.slip-find {
  position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--g-3); color: var(--text-3);
}
.slip-find:focus-within { border-color: var(--line-strong); }
.slip-find input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-1); }
.slip-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slip-leg {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px 96px 32px; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-ctl); background: var(--g-1); border: 1px solid var(--line);
}
.slip-leg.is-gone { grid-template-columns: 1fr 32px; color: var(--text-3); }
.sl-match { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-teams { display: flex; align-items: center; gap: 6px; color: var(--text-1); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-teams i { font-style: normal; color: var(--text-3); font-weight: 400; }
.slip-leg select, .slip-leg input, .stake-input {
  height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--g-3); color: var(--text-1); font: inherit; font-size: 13px;
}
.slip-leg select { padding: 0 8px; min-width: 0; }
.slip-leg input { padding: 0 10px; width: 100%; }
.slip-leg select:focus, .slip-leg input:focus { outline: none; border-color: var(--accent); }
.slip-empty { padding: 20px 4px; }
.slip-stake { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 220px; }
.stake-input { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 40px; }
.stake-input b { color: var(--text-3); font-weight: 500; }
.stake-input input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-1); font: inherit; }
.stake-input:focus-within { border-color: var(--accent); }

.slip-headline { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.slip-headline span { font-size: 12px; color: var(--text-3); }
.slip-headline b { color: var(--text-1); font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; }
.slip-headline small { font-size: 13px; color: var(--text-2); }
.slip-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.slip-figs div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--g-3); min-width: 0; }
.slip-figs b, .slip-headline small { overflow-wrap: anywhere; }
.slip-figs span { font-size: 12px; color: var(--text-3); }
.slip-figs b { color: var(--text-1); font-size: 17px; font-weight: 500; }
.slip-verdict { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--g-3); border-left: 2px solid var(--text-3); font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.slip-verdict b { color: var(--text-1); font-weight: 500; display: block; margin-bottom: 4px; }
.slip-verdict.is-value { border-left-color: var(--positive); }
.slip-verdict.is-poor { border-left-color: var(--negative); }
.slip-note { font-size: 13px; color: var(--text-2); margin: 0 0 12px; }
.slip-note b { color: var(--text-1); font-weight: 500; }
.slip-note.is-warn { color: var(--accent); }
.slip-table td { vertical-align: top; }
.st-sel { display: block; color: var(--text-1); }
.verdict { display: inline-block; padding: 0 8px; border-radius: 4px; font-size: 12px; line-height: 20px; background: var(--g-3); color: var(--text-2); }
.verdict.is-value { background: rgba(76, 195, 138, 0.16); color: var(--positive); }
.verdict.is-poor { background: rgba(229, 72, 77, 0.16); color: var(--negative); }
.gamble-note { margin-top: 12px; }

/* Add-to-slip buttons on match analyses */
.add-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
.add-slip a { padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-2); transition: color 150ms var(--ease), border-color 150ms var(--ease); }
.add-slip a:hover { color: var(--text-1); border-color: var(--line-strong); }

@media (max-width: 1180px) {
  .slip-layout { grid-template-columns: minmax(0, 1fr); }
  .slip-result { position: static; }
}
@media (max-width: 760px) {
  .slip-leg { grid-template-columns: minmax(0, 1fr) 96px 32px; }
  .slip-leg .sl-match { grid-column: 1 / -1; }
  .slip-leg select { grid-column: 1 / 2; }
  .slip-headline b { font-size: 32px; line-height: 36px; }
}

/* ---------- Why this prediction ---------- */

.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.why-row { padding: 12px 0; border-top: 1px solid var(--line); }
.why-row:first-child { border-top: 0; padding-top: 4px; }
.why-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.why-head b { font-weight: 500; }
.why-for { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.why-for.is-home { color: var(--home); }
.why-for.is-away { color: var(--away); }
.why-row p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.why-row.is-context p { color: var(--text-3); }
.why-tag { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.why-bar { position: relative; height: 16px; margin-top: 8px; }
.why-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--g-3); border-radius: 1px; }
.why-bar::after { content: ""; position: absolute; left: 50%; top: 2px; width: 1px; height: 12px; background: var(--text-3); }
.why-bar span { position: absolute; top: 6px; height: 4px; border-radius: 2px; }
.why-bar span.h { background: var(--home); }
.why-bar span.a { background: var(--away); }
.why-bar em { position: absolute; right: 0; top: -2px; font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------- Corners and cards ---------- */

.count-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.count-sides div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: var(--g-3); }
.count-sides div:first-child { box-shadow: inset 2px 0 0 var(--home); }
.count-sides div:last-child { box-shadow: inset 2px 0 0 var(--away); }
.count-sides span { color: var(--text-2); font-size: 13px; }
.count-sides b { font-weight: 500; font-variant-numeric: tabular-nums; }
.market-grid + .market-grid { margin-top: 12px; }
h4.sub { margin: 16px 0 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }

.line-move { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.line-move b { font-size: 28px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.line-move p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; max-width: 64ch; }

.mh-share.is-done { color: var(--accent); }
.mh-share.is-done::after { content: "Link copied"; position: absolute; right: 0; top: 100%; margin-top: 4px; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.mh-share { position: relative; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.st-src { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); }
.st-best { display: block; color: var(--accent); }

/* ---------- Slip screenshot import ---------- */

.scan { margin: 12px 0 16px; }
.scan-drop {
  display: flex; align-items: center; gap: 16px; padding: 16px; cursor: pointer;
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.scan-drop:hover { background: var(--g-3); border-style: solid; }
.scan-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.scan.is-over .scan-drop { background: var(--accent-soft); border-color: var(--accent); border-style: solid; }
.scan.is-over .scan-icon { color: var(--accent); border-color: rgba(255, 181, 71, 0.35); }
.scan-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-ctl); background: var(--g-3); border: 1px solid var(--line); color: var(--text-2);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.scan-icon svg { width: 18px; height: 18px; }
.scan-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-copy b { color: var(--text-1); font-size: 14px; font-weight: 500; }
.scan-copy span { color: var(--text-3); font-size: 13px; line-height: 20px; }
.scan-copy u { color: var(--text-1); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
kbd {
  display: inline-block; padding: 0 6px; font: 500 11px/18px inherit; font-family: inherit; color: var(--text-2);
  background: var(--g-3); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px;
}

.scan-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--g-1);
}
.scan-thumb {
  position: relative; width: 56px; height: 76px; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--g-3);
}
.scan-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
}
.scan[data-state="reading"] .scan-line { opacity: 1; animation: scan-sweep 1.8s var(--ease) infinite alternate; }
.scan[data-state="reading"] .scan-thumb img { filter: brightness(0.8); }
@keyframes scan-sweep { from { transform: translateY(0); } to { transform: translateY(74px); } }

.scan-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.scan-body > b { color: var(--text-1); font-size: 14px; font-weight: 500; }
.scan-body > .meta { font-size: 13px; line-height: 20px; color: var(--text-2); }
.scan[data-state="error"] .scan-body > b { color: var(--negative); }
.scan-progress { height: 2px; margin-top: 8px; border-radius: 1px; background: var(--g-4); overflow: hidden; }
.scan-progress span { display: block; width: 32%; height: 100%; border-radius: 1px; background: var(--accent); animation: scan-progress 1.4s var(--ease) infinite; }
.scan:not([data-state="reading"]) .scan-progress { display: none; }
@keyframes scan-progress { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
.scan-actions { display: flex; gap: 8px; }

.scan-review { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.scan-review li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scan-review li:last-child { border-bottom: 0; }
.scan-review .sr-text { display: flex; flex-direction: column; min-width: 0; }
.scan-review b { font-weight: 400; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-review .sr-text span { font-size: 12px; color: var(--text-3); }
.scan-review .link { background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; font-size: 12px; }

.slip-legs.is-skeleton li {
  height: 64px; border-radius: var(--r-ctl);
  background: linear-gradient(90deg, var(--g-3) 0%, var(--g-4) 50%, var(--g-3) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.slip-leg.is-new { animation: leg-in 420ms var(--ease) both, leg-mark 2.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes leg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes leg-mark { from { box-shadow: inset 2px 0 0 var(--accent); } to { box-shadow: inset 2px 0 0 transparent; } }
.sl-read { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-read.is-warn { color: var(--accent); white-space: normal; }
.sl-live { color: var(--text-1); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .scan-card { grid-template-columns: 48px minmax(0, 1fr); }
  .scan-thumb { width: 48px; height: 64px; }
  .scan-actions { grid-column: 1 / -1; }
  .scan-actions .btn { flex: 1; }
  .scan-review li { align-items: flex-start; }
  .scan-review b { white-space: normal; }
  @keyframes scan-sweep { to { transform: translateY(62px); } }
}

@media (prefers-reduced-motion: reduce) {
  .scan[data-state="reading"] .scan-line, .scan-progress span, .slip-legs.is-skeleton li, .slip-leg.is-new { animation: none; }
  .scan[data-state="reading"] .scan-line { top: 50%; }
  .scan-progress span { width: 100%; opacity: 0.5; }
}

/* ---- How it works ---- */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.how-steps > li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.how-steps > li:first-child { border-top: 0; padding-top: 4px; }
.how-step-label { font-size: 12px; line-height: 20px; color: var(--text-3); }
.how-step-body p { margin: 0; max-width: 64ch; }
.how-step-body p + * { margin-top: 12px; }
.how-grid { display: inline-grid; gap: 4px; font-variant-numeric: tabular-nums; }
.how-grid-row { display: grid; grid-template-columns: 32px repeat(5, 48px); gap: 4px; }
.how-grid-head { display: grid; place-items: center; font-size: 12px; color: var(--text-3); height: 24px; }
.how-grid-row > .how-grid-head:first-child { height: 40px; }
.how-cell { height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; color: var(--text-1);
  background: color-mix(in srgb, var(--c) calc(var(--w) * 70%), var(--g-1)); }
.how-cell.is-home { --c: var(--home); }
.how-cell.is-away { --c: var(--away); }
.how-cell.is-draw { --c: var(--text-2); }
.how-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.how-prices > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--line); margin-left: -1px; }
.how-prices span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how-prices b { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums; }
.how-prices small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.how-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 8px 32px; margin: 24px 0; }
.how-text section { padding: 0 0 16px; }
.how-text h2 { margin: 0 0 8px; }
.how-text p { margin: 0 0 12px; max-width: 64ch; color: var(--text-2); }
.how-limits { display: block; }
.how-intro { margin: 0 0 12px; max-width: 72ch; }
@media (max-width: 640px) {
  .how-steps > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .how-grid-row { grid-template-columns: 24px repeat(5, minmax(0, 1fr)); }
  .how-grid { display: grid; }
}

.price-intro { margin: 0 0 12px; max-width: 72ch; }
.scan-share { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--text-3); cursor: pointer; }
.scan-share input { margin: 2px 0 0; accent-color: var(--accent); }
.scan-share a { color: var(--text-2); }

/* ---- Team news ---- */
.news-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px 24px; }
.news-team { display: block; font-weight: 500; margin-bottom: 8px; }
.news-team.is-home { color: var(--home); }
.news-team.is-away { color: var(--away); }
.news-side ul { list-style: none; margin: 0; padding: 0; }
.news-side li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.news-side li:first-child { border-top: 0; padding-top: 0; }
.news-side li .meta { grid-column: 1 / -1; }
.news-side li.is-minor .news-player { color: var(--text-2); }
.news-player { color: var(--text-1); }
.news-status { font-size: 12px; color: var(--text-3); }
.news-status.is-out { color: var(--negative); }
.news-note { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.news-test { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); max-width: 72ch; }
.news .hint a { color: var(--text-2); }

/* ---- Legal pages and the 18+ notice ---- */
.legal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 8px 32px; margin: 8px 0 24px; }
.legal section { padding-bottom: 16px; }
.legal h2, .legal-help h2 { margin: 0 0 8px; }
.legal p, .legal-help p { margin: 0 0 12px; max-width: 64ch; color: var(--text-2); }
.legal a, .legal-help a { color: var(--text-1); }
.age-gate { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--g-2); color: var(--text-1); }
.age-gate::backdrop { background: rgba(8, 8, 9, 0.8); backdrop-filter: blur(6px); }
.age-gate h2 { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 500; }
.age-gate p { margin: 0 0 16px; color: var(--text-2); }
.age-gate .hint { margin: 16px 0 0; }
.age-gate a { color: var(--text-1); }
.age-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.age-actions .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.age-under { margin: 0 !important; color: var(--text-1) !important; }

/* ---- Accounts ---- */
.auth { display: grid; place-items: start center; padding: 48px 0; }
.auth-card { width: min(420px, 100%); padding: 24px; }
.auth-title { margin: 0 0 8px; font-size: 22px; line-height: 30px; font-weight: 500; }
.auth-card .muted { margin: 0 0 20px; }
.auth-email { color: var(--text-1); font-weight: 500; }
.auth-btn { width: 100%; height: 40px; justify-content: center; font-size: 14px; }
.auth-google { gap: 10px; }
.auth-google svg { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 12px; color: var(--text-3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: grid; gap: 12px; }
.auth-form .field input { width: 100%; }
.auth .error { margin: 0 0 16px; }
.follow-list { list-style: none; margin: 0; padding: 0; }
.follow-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.follow-list li:first-child { border-top: 0; }
.follow-list a { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-1); }
.follow-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--text-2); }
.check input { margin-top: 3px; accent-color: var(--accent); }
.delete-form { display: grid; gap: 12px; max-width: 320px; }
.btn-danger { color: var(--negative); }
.btn-follow { gap: 6px; margin-top: 12px; }
.btn-follow svg { width: 16px; height: 16px; }
.btn-follow[aria-pressed="true"] svg { fill: var(--accent); color: var(--accent); }
.slips-edge { margin: -4px 0 16px; }
.saved-slips { list-style: none; margin: 0 0 16px; padding: 0; }
.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ss-head .meta { flex: 1; min-width: 0; }
.ss-status { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--g-3); color: var(--text-2); white-space: nowrap; }
.ss-status.is-won { color: var(--positive); background: color-mix(in srgb, var(--positive) 14%, transparent); }
.ss-status.is-lost { color: var(--negative); background: color-mix(in srgb, var(--negative) 14%, transparent); }
.ss-legs { list-style: none; margin: 0; padding: 0; }
.ss-legs li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 72px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.ss-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--g-4); }
.ss-legs .is-won .ss-mark { background: var(--positive); }
.ss-legs .is-lost .ss-mark { background: var(--negative); }
.ss-sel { display: flex; flex-direction: column; min-width: 0; }
.ss-sel b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-odds { font-variant-numeric: tabular-nums; color: var(--text-2); }
.ss-res { font-size: 12px; color: var(--text-3); text-align: right; }
.ss-legs .is-won .ss-res { color: var(--positive); }
.ss-legs .is-lost .ss-res { color: var(--negative); }

.welcome { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding: 24px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--g-2); }
.welcome h1 { margin: 0 0 8px; font-size: 22px; line-height: 30px; font-weight: 500; max-width: 30ch; }
.welcome p { margin: 0; color: var(--text-2); max-width: 64ch; }
.welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.welcome-actions .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.welcome-close { position: absolute; top: 12px; right: 12px; }
.welcome > div:first-child { padding-right: 32px; }
.follow-tip { margin: 0 0 16px; }
.slip-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.slip-save .btn { gap: 8px; }
.slip-save svg { width: 16px; height: 16px; }
.slip-save .meta a { color: var(--text-1); }
.site-notice { padding: 10px 24px; background: color-mix(in srgb, var(--accent) 12%, var(--g-1)); border-bottom: 1px solid var(--line);
  color: var(--text-1); font-size: 13px; }

/* ---- Admin ---- */
.admin-jump { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.admin-jump a { color: var(--text-2); }
.admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-kpis .kpi small { white-space: normal; }
.admin-split { align-items: start; }
.admin-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 140px; align-items: end; }
.admin-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.admin-bar span { display: block; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--g-4); }
.admin-bar.is-today span { background: var(--accent); }
.admin-bar em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10px; color: var(--text-3); }
.admin-totals { margin: 28px 0 0; }
.admin-health { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13px; }
.admin-health dt { color: var(--text-3); }
.admin-health dd { margin: 0; color: var(--text-1); }
.admin-warn { margin-top: 12px; }
.admin-warn ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.admin-warn code { font-size: 11px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.admin-controls { display: grid; gap: 16px; max-width: 720px; }
.admin-controls .check b { color: var(--text-1); font-weight: 500; margin-right: 4px; }
.admin-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.admin-controls .field input { width: 100%; }
.admin-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.admin-actions form { margin: 0; }
.admin-users .is-suspended th, .admin-users .is-suspended td { color: var(--text-3); }
.admin-feed { list-style: none; margin: 0; padding: 0; }
.admin-feed li { display: grid; grid-template-columns: 96px minmax(120px, 220px) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.admin-feed li:first-child { border-top: 0; }
.admin-who { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .admin-feed li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.side-more > summary { list-style: none; cursor: pointer; color: var(--text-3); }
.side-more > summary::-webkit-details-marker { display: none; }
.side-more > summary:hover { color: var(--text-1); }
.side-more[open] > summary { color: var(--text-2); }
.side-more { display: flex; flex-direction: column; gap: 2px; }

/* ---- Suggested slip ---- */
.slip-improve-btn { gap: 8px; margin-top: 12px; }
.slip-improve-btn svg { width: 16px; height: 16px; color: var(--accent); }
.slip-improve { margin-top: 12px; }
.si-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.si-mode { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.si-mode:hover { background: var(--g-3); }
.si-mode.is-on { background: var(--g-3); border-color: var(--line-strong); box-shadow: inset 0 -2px 0 var(--accent); color: var(--text-1); }
.si-mode b { font-weight: 500; color: var(--text-1); font-size: 13px; }
.si-mode span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.si-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.si-compare > div { background: var(--g-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.si-compare span { font-size: 11px; color: var(--text-3); }
.si-compare b { font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums; }
.si-tips { margin: 12px 0; font-size: 13px; color: var(--text-2); }
.si-tips ul { margin: 4px 0 0; padding-left: 18px; }
.si-list { margin-top: 8px; }
.si-list > summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 6px 0; }
.si-list ul { list-style: none; margin: 0; padding: 0; }
.si-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.si-mark { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--positive); }
.is-dropped .si-mark { background: var(--g-4); }
.is-dropped .si-sel b { color: var(--text-2); }
.si-sel { display: flex; flex-direction: column; min-width: 0; }
.si-sel b { font-weight: 500; font-size: 13px; }
.si-why { font-size: 12px; color: var(--text-3); }
.si-odds { font-size: 13px; color: var(--text-2); }
.si-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.si-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) { .si-modes { grid-template-columns: minmax(0, 1fr); } }