:root {
    --bg: #0a0f15;
    --bg-elevated: #16202b;     /* cards and rows — the app's tlElevated */
    --bg-muted: #1f2b39;        /* things on a card, controls — the app's tlMuted */
    --bg-hover: #26333f;
    --border: #233040;
    --text: #e8eef5;
    --text-muted: #b4c0ce;
    --text-faint: #a3b0c0;   /* 8.7:1 page, 7.5 cards, 6.5 tiles — lightened 2026-10-18 (owner: hard to read with the phone dimmed; #8696ab was 6.4 / 5.5 / 4.8) */
    --accent: #3ccbff;
    --accent-ink: #04202e;
    --accent-soft: rgba(60, 203, 255, 0.11);
    --accent-soft2: rgba(60, 203, 255, 0.28);
    --accent-line: rgba(60, 203, 255, 0.42);
    --away: #b69cff;
    --hit: #3ddc97;
    --hit-soft: rgba(61, 220, 151, 0.13);
    --hit-mid: rgba(61, 220, 151, 0.26);
    --home: #3ccbff;
    --positive: #3ddc97;
    --negative: #ff7b93;
    --warn: #c3cdd9;
    --warn-soft: rgba(195, 205, 217, 0.06);
    --bar-miss: #2a3748;
    --radius: 10px;
    --font: "DM Sans", system-ui, sans-serif;
    --display: "Archivo", "DM Sans", system-ui, sans-serif;
    --wordmark: "Space Grotesk", "Archivo", sans-serif;   /* the TallyLine logotype only */
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; }
  button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
  .num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  .layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh; }

  /* ---------- sidebar ---------- */
  .sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border); padding: 0 0 32px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .side-head { position: sticky; top: 0; z-index: 2; background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 18px 16px 14px; }
  .brand-title { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
  .brand-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  .live-count { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
  .live-count .big { font-family: var(--mono); font-size: 22px; font-weight: 500; }
  .live-count .of { font-size: 12px; color: var(--text-muted); }
  .side-actions { display: flex; gap: 8px; margin-top: 10px; }

  .fgroup { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .fgroup > h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
  .fgroup > h3 .clear { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--accent); cursor: pointer; background: none; border: 0; padding: 0; font-size: 11px; }
  .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
  .field:last-child { margin-bottom: 0; }
  .field > label, .lbl { font-size: 12px; color: var(--text-muted); }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hint { font-size: 11px; color: var(--text-faint); line-height: 1.35; margin-top: 4px; }

  select, input[type=number], input[type=text], input[type=search] {
    width: 100%; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; outline: none;
  }
  select:focus, input:focus { border-color: var(--accent-line); }
  /* drop-downs draw the site's chevron, with room around it — the browser's own arrow sat hard against the edge */
  select { -webkit-appearance: none; appearance: none; padding-right: 30px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%2391a0b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 12px 12px !important; text-overflow: ellipsis; }
  .chv { vertical-align: -1.5px; flex: none; }
  input[type=number] { font-family: var(--mono); }

  .chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .chip { border: 1px solid var(--border); background: var(--bg-muted); color: var(--text-muted); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; user-select: none; line-height: 1.3; }
  .chip:hover { color: var(--text); }
  .chip.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }
  .chip:disabled { opacity: 0.35; cursor: not-allowed; }

  .seg { display: inline-flex; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; flex-wrap: wrap; }
  .seg button { border: 0; background: none; color: var(--text-muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; }
  .seg button:hover:not(:disabled) { color: var(--text); }
  .seg button.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-line); }
  .seg button:disabled { opacity: 0.35; cursor: not-allowed; }
  .seg.full { display: flex; } .seg.full button { flex: 1; }

  .btn { font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-muted); cursor: pointer; }
  .btn:hover { border-color: var(--accent-line); }

  .range-vals { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
  .seg.bands button { padding: 5px 6px; font-size: 11.5px; }
  .gaprow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .gaprow input { width: 64px; }
  .excl { display: none; margin-top: 10px; padding: 9px 10px; border-radius: 8px; border: 1px dashed var(--text-faint); background: var(--warn-soft); }
  .excl.show { display: block; }
  .excl p { margin: 0 0 8px; font-size: 12px; color: var(--text); line-height: 1.45; }
  .excl-adv { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
  .excl-adv summary { cursor: pointer; }
  .reflist { max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-muted); margin-top: 6px; }
  .reflist label { display: flex; align-items: center; gap: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
  .reflist label:hover { background: var(--bg-hover); }
  .reflist .cnt { margin-left: auto; font-family: var(--mono); color: var(--text-faint); font-size: 11px; }
  .reflist input { accent-color: var(--accent); margin: 0; }


  /* ---------- main ---------- */
  .main { padding: 22px 26px 40px; min-width: 0; }
  .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .topbar h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
  .topbar p { margin: 0; color: var(--text-muted); font-size: 13px; max-width: 620px; }
  .tested { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--bg-elevated); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--text-muted); cursor: help; }
  .tested b { font-family: var(--mono); color: var(--text); font-weight: 500; }
  .tested.hot b { color: var(--warn); }
  .tip { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.45; color: var(--text); z-index: 20; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
  .tested:hover .tip, .tested:focus .tip { display: block; }

  .marketbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
  .markets { display: flex; flex-wrap: wrap; gap: 5px; }

  .summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; font-size: 13px; color: var(--text-muted); }
  .summary .n { font-family: var(--mono); color: var(--text); font-size: 15px; }
  .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
  .badge.low { background: var(--warn-soft); color: var(--warn); border: 1px dashed var(--text-faint); }
  .badge.tiny { background: var(--bg-muted); color: var(--text-muted); border: 1px solid var(--border); }
  .badge.info { background: var(--bg-muted); color: var(--text-muted); border: 1px solid var(--border); font-weight: 500; }

  .grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
  .card + .card { margin-top: 16px; }
  .card h2 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
  .card .sub { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

  /* ladder */
  table { border-collapse: collapse; width: 100%; }
  .ladder th { font-size: 11px; font-weight: 500; color: var(--text-muted); text-align: right; padding: 4px 6px 8px; white-space: nowrap; border-bottom: 1px solid var(--border); }
  .ladder th.side-h { text-align: center; color: var(--text); font-weight: 600; font-size: 12px; }
  .ladder td { padding: 7px 6px; text-align: right; font-family: var(--mono); font-size: 12px; white-space: nowrap; border-bottom: 1px solid rgba(37,42,54,.6); }
  .ladder td.line { text-align: left; color: var(--text); font-weight: 500; font-family: var(--font); font-size: 13px; }
  .ladder .cell { cursor: pointer; }
  .ladder tr:hover td.cell { background: var(--bg-hover); }
  .ladder td.sel { background: var(--accent-soft) !important; box-shadow: inset 0 1px 0 var(--accent-line), inset 0 -1px 0 var(--accent-line); }
  .ladder td.divider { border-left: 1px solid var(--border); }
  .pct { color: var(--text); font-size: 13px; }
  .ci { color: var(--text-faint); font-size: 11px; }
  .hits { color: var(--text-muted); }
  .lift.pos { color: var(--positive); } .lift.neg { color: var(--negative); } .lift.zero { color: var(--text-faint); }
  .na { color: var(--text-faint); font-style: italic; font-family: var(--font); font-size: 11px; }
  .muted { color: var(--text-muted); }
  .scroll-x { overflow-x: auto; }
  /* sideways-scrolling rows fade at the edge while there's more that way (data-fade set by initEdgeFades). Drawn as a
     gradient laid over the edge in the page colour, held in place with position: sticky — not a mask, which also faded
     the background of the pinned tab bar and let the page show through it. */
  [data-fade*="r"]::after, [data-fade*="l"]::before { content: ""; position: sticky; flex: none; align-self: stretch; width: 28px; pointer-events: none; z-index: 1; }
  .fxs-row { --gap: 8px; } .tabs { --gap: 2px; } .chipseg, .linepick, .st-lines { --gap: 6px; }     /* each row's own flex gap, so the edge pieces take no room */
  /* they slide sideways only: with overflow-x alone the browser makes overflow-y auto too, and a thumb on a tab row
     dragged the tabs up and down inside it on phones (owner's recording, 2026-10-17) */
  .ds-days, .fxs-row, .tabs, .chipseg, .linepick, .st-lines { overflow-y: hidden; overscroll-behavior-x: contain; }
  [data-fade*="r"]::after { right: 0; margin-left: calc(-28px - var(--gap, 0px)); background: linear-gradient(to right, transparent, var(--fade-bg, var(--bg))); }
  [data-fade*="l"]::before { left: 0; margin-right: calc(-28px - var(--gap, 0px)); background: linear-gradient(to left, transparent, var(--fade-bg, var(--bg))); }
  /* a row on a card fades into the card's colour, not the page's (the chart's window chips showed a dark band — owner, 2026-10-18) */
  .card [data-fade] { --fade-bg: var(--bg-elevated); }

  /* charts */
  .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .chart .axis text { fill: var(--text-muted); font-size: 10px; font-family: var(--mono); }
  .chart .grid-line { stroke: var(--border); stroke-width: 1; }
  .legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-muted); margin-top: 8px; flex-wrap: wrap; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .ctip { position: fixed; pointer-events: none; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 12px; z-index: 50; display: none; box-shadow: 0 6px 18px rgba(0,0,0,.45); white-space: nowrap; }
  .ctip .mono { font-size: 11px; color: var(--text-muted); }

  .strip-row { display: grid; grid-template-columns: 70px 1fr 132px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(37,42,54,.6); font-size: 12px; }
  .strip-row:last-child { border-bottom: 0; }
  .strip-row .lab { color: var(--text); }
  .strip-row .val { text-align: right; font-family: var(--mono); font-size: 12px; }

  /* edge */
  .edge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; min-width: 0; }
  .stat .k { font-size: 11px; color: var(--text-muted); }
  .stat .v { font-family: var(--mono); font-size: 17px; margin-top: 2px; }
  .stat .d { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-top: 1px; }
  .pos { color: var(--positive); } .neg { color: var(--negative); }
  .price-in { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; flex-wrap: wrap; }
  .price-in input { width: 110px; }
  .edge-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

  /* games table */
  .games-card { margin-top: 16px; }
  .games th { font-size: 11px; font-weight: 500; color: var(--text-muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; position: sticky; top: 0; background: var(--bg-elevated); }
  .games th:hover { color: var(--text); }
  .games th.sorted { color: var(--text); }
  .games th.r, .games td.r { text-align: right; }
  .games td { padding: 7px 8px; border-bottom: 1px solid rgba(37,42,54,.6); font-size: 12.5px; white-space: nowrap; }
  .games tbody tr.g { cursor: pointer; }
  .games tbody tr.g:hover td { background: var(--bg-hover); }
  .games tbody tr.open td { background: var(--bg-muted); }
  .games td.num { font-family: var(--mono); font-size: 12px; }
  .hit-y { color: var(--positive); } .hit-n { color: var(--text-faint); }
  .detail td { background: var(--bg-muted); padding: 12px 14px 16px; white-space: normal; }
  .detail-grid { position: sticky; left: 14px; width: var(--cw, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .detail h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
  .kv { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 12px; font-size: 12px; }
  .kv span:nth-child(3n+1) { color: var(--text-muted); }
  .kv span:nth-child(3n+2), .kv span:nth-child(3n) { font-family: var(--mono); text-align: right; }
  .kv .hd { color: var(--text-faint) !important; font-size: 10px; text-transform: uppercase; }
  .more { margin-top: 10px; }

  .loading, .error { padding: 60px 20px; text-align: center; color: var(--text-muted); }
  .error code { color: var(--text); }

  .mobile-toggle { display: none; }

  /* ---------- brand ---------- */
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand svg { flex: none; }
  .brand-title { font-family: var(--wordmark); font-weight: 700; font-size: 17px; letter-spacing: -0.03em; }
  .brand-title span { color: var(--accent); }
  .viewtabs { margin-top: 14px; }
  h1, .display { font-family: var(--display); }

  /* ---------- match-up: side rail ---------- */

  /* ---------- match-up: main ---------- */




  /* ---------- match-up: chart view ---------- */


  /* ---------- match-up ---------- */
  /* ---------- app shell ---------- */
  :root { --appbar-h: 56px; }
  .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; }
  .skip:focus { left: 8px; }
  .appbar { position: sticky; top: 0; z-index: 30; height: var(--appbar-h); display: flex; align-items: center; gap: 20px; padding: 0 20px; background: rgba(10, 15, 21, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
  .appbar .brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
  .topnav { display: flex; gap: 4px; height: 100%; }
  .topnav a { display: flex; align-items: center; padding: 0 12px; color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .topnav a:hover { color: var(--text); }
  .topnav a.on { color: var(--text); border-bottom-color: var(--accent); }
  .lgsw { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }      /* the page's main control: the cyan-tinted pill, with an edge that stands out from the bar */
  .lgsw:hover { border-color: var(--accent); background: rgba(60, 203, 255, .18); }
  .lgsw .chev { color: var(--accent); font-size: 11px; }
  .side-title { font-weight: 600; font-size: 14px; }
  .sidebar { top: var(--appbar-h); height: calc(100vh - var(--appbar-h)); }
  body:not([data-view="explore"]) .sidebar { display: none; }
  body:not([data-view="explore"]) .layout { grid-template-columns: minmax(0, 1fr); }
  body:not([data-view="explore"]) .main { max-width: 1240px; margin: 0 auto; width: 100%; }
  .botnav { display: none; }
  .pg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .pg-title { margin: 0; font-size: 24px; letter-spacing: -0.03em; }
  .pg-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); max-width: 560px; }

  .sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-start; justify-content: flex-end; padding: 64px 16px 16px; opacity: 0; transition: opacity .18s; }
  .sheet-back.open { opacity: 1; }
  .sheet-back[hidden] { display: none; }   /* author display:flex would otherwise override [hidden] and block the page */
  .sheet { width: 340px; max-width: 100%; max-height: calc(100vh - 90px); overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 8px 8px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 10px; }
  .sheet-group { font-size: 12px; color: var(--text-muted); padding: 8px 10px 4px; }
  .flag { vertical-align: -2.5px; margin-right: 7px; }
  a.btn { color: var(--text); text-decoration: none; display: inline-block; }
  .tm-fx .house { color: var(--text-muted); vertical-align: -1px; margin-left: 4px; }
  .tm-line .who::before { content: " · "; }
  @media (max-width: 640px) { .tm-line { grid-template-columns: 76px minmax(0, 1fr); gap: 6px 14px; align-items: start; } .tm-line .who { display: block; font-weight: 400; color: var(--text-muted); font-size: 13px; } .tm-line .who::before { content: none; } .tm-line .hr-form { grid-column: 2; } }
  .tbl .house { color: var(--text-muted); vertical-align: -1px; margin-left: 4px; }
  .mxl-row .teams em.sc { font-size: 13.5px; font-weight: 600; color: var(--text); } .mxl-row .teams .lo { color: var(--text-faint); font-weight: 500; }
  .hitpill { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .hitpill b { font-family: var(--mono); color: var(--text); font-weight: 500; }
  .hrow.hc.res { grid-template-columns: 64px minmax(0, 1fr) auto; } .hrow.hc[disabled] { cursor: default; opacity: 1; }
  .hc-res { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
  .hc-res em { font-style: normal; } .hc-res .mk { flex: none; display: block; }
  .pm-head { margin: 4px 0 12px; } .pm-head h1 { font-family: var(--display); font-size: 22px; margin: 0; } .pm-head span { color: var(--text-muted); font-size: 13px; }
  .pm-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 16px; margin-bottom: 12px; }
  .pm-team b { display: block; font-size: 16px; } .pm-team small { color: var(--text-muted); font-size: 12px; } .pm-team.a { text-align: right; }
  .pm-team.h b { border-left: 3px solid var(--home); padding-left: 8px; } .pm-team.a b { border-right: 3px solid var(--away); padding-right: 8px; }
  .pm-ft { font-family: var(--display); font-size: 34px; font-weight: 700; white-space: nowrap; }
  .pm-score p { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; color: var(--text-muted); font-size: 12.5px; }
  .pm-stats { padding: 12px 16px; margin-bottom: 18px; }
  .pm-keys { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
  .pm-keys i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 6px; } .pm-keys i.h { background: var(--home); margin-left: 0; } .pm-keys i.a { background: var(--away); margin-right: 0; }
  .pm-stat { display: grid; grid-template-columns: 56px 1fr 56px; align-items: baseline; padding: 8px 0; font-family: var(--mono); font-size: 14px; color: var(--text-muted); }
  .pm-stat em { font-style: normal; font-family: var(--font); font-size: 13px; text-align: center; } .pm-stat span:last-of-type { text-align: right; } .pm-stat .hi { color: var(--text); font-weight: 600; }
  .pm-bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 5px; margin-top: 6px; } .pm-bar i { border-radius: 3px; background: var(--away); flex: 1; } .pm-bar i:first-child { background: var(--home); flex: none; }
  .pm-h2 { font-family: var(--display); font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
  /* the finished-match page's story (mockups/postmatch.html) */
  .pm-h2 { margin-top: 22px; } .pm-head + .pm-score { margin-top: 0; }
  .pm-team .tlink { color: inherit; text-decoration: underline; text-decoration-color: var(--text-faint); text-underline-offset: 3px; } .pm-team .tlink:hover { color: var(--accent); }
  .pm-ft small { display: block; font: 600 11.5px var(--mono); color: var(--text-faint); margin-top: 4px; text-align: center; }
  .pm-gl { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: baseline; margin-top: 10px; font-size: 13.5px; font-weight: 600; }
  .pm-gl .h { text-align: right; } .pm-gl .c { text-align: center; min-width: 60px; color: var(--text-faint); font-weight: 500; font-size: 12.5px; }
  .pm-gl.as { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 400; color: var(--text-muted); } .pm-gl.as .c { color: var(--text); font-weight: 600; }
  .pm-score p { display: none; }
  .pm-tl { padding: 14px 16px 12px; } .pm-tl svg { width: 100%; height: auto; display: block; }
  .pm-tn { font: 600 11px var(--font); } .pm-tn.h { fill: var(--home); } .pm-tn.a { fill: var(--away); }
  .pm-axis { stroke: #2c3b4d; stroke-width: 2; } .pm-ht { stroke: #2c3b4d; stroke-dasharray: 3 3; } .pm-tick { fill: var(--text-faint); font: 10px var(--mono); }
  .pm-stem { stroke-opacity: .5; } .pm-stem.h { stroke: var(--home); } .pm-stem.a { stroke: var(--away); }
  .pm-goal { fill: #fff; stroke-width: 2; } .pm-goal.og { stroke-dasharray: 2.5 2; stroke-width: 2.4; } .pm-goal.h { stroke: var(--home); } .pm-goal.a { stroke: var(--away); }
  .pm-var { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 2 2; }
  .pm-yc { fill: #f5c542; } .pm-rc { fill: #e5484d; }   /* cards in their real colours, like the flags (owner's call) */
  .pm-ev { fill: #c9d3de; font: 10.5px var(--font); } .pm-ev.v { fill: var(--text-faint); }
  .pm-key { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-faint); font-size: 12px; margin-top: 6px; } .pm-key span { display: inline-flex; align-items: center; gap: 6px; }
  .pm-key i { display: inline-block; } .pm-key .g { width: 10px; height: 10px; border-radius: 50%; background: #fff; } .pm-key .og { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px dashed var(--home); } .pm-key .v { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--text-faint); }
  .pm-key .y, .pm-key .r, .pm-ycard, .pm-rcard { width: 8px; height: 11px; border-radius: 2px; background: #f5c542; display: inline-block; } .pm-key .r, .pm-rcard { background: #e5484d; }
  .pm-grp { padding: 4px 0; border-top: 1px solid rgba(35,48,64,.8); } .pm-grp:first-of-type { border-top: 0; }
  .pm-gh { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 8px 0 0; }
  .pm-none { padding: 14px 16px; color: var(--text-muted); }
  .pm-tabs { margin: 16px 0 4px; } .tabs.pm-tabs button { flex: 1 1 0; }   /* Match | Line-ups: two halves, each word centred in its own (owner) */ .pm-tabs + .card { margin-top: 12px; }
  .pm-lu { padding: 14px 16px 16px; } .pm-sw { margin-bottom: 10px; } .pm-form { color: var(--text-faint); font-size: 12.5px; margin-bottom: 8px; } .pm-form b { color: var(--text); font-weight: 600; }
  /* the pitch is one height whatever the formation (a 5-4-1 isn't squeezed next to a 4-2-3-1) */
  .pm-pitch { height: 420px; display: flex; flex-direction: column-reverse; justify-content: space-between; padding: 14px 6px; border-radius: 12px; background: linear-gradient(#13202a, #10202a); border: 1px solid var(--border); }
  .pm-line { display: flex; justify-content: space-around; }
  .pm-pl { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
  .pm-pl .num, .pm-sub .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); background: var(--bg-muted); border: 1.5px solid var(--home); flex: none; }
  .pm-pl.a .num, .pm-sub .num.a { border-color: var(--away); }
  .pm-pl .nm { font-size: 12px; line-height: 1.2; } .pm-pl .ev { display: flex; gap: 4px; align-items: center; font: 11px var(--mono); color: var(--text-faint); min-height: 12px; }
  .pm-ball { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: inline-block; }
  .pm-sh { font: 600 15px var(--display); margin: 16px 0 4px; }
  .pm-sub { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid rgba(35,48,64,.8); font-size: 13.5px; }
  .pm-sub .num { width: 26px; height: 26px; font-size: 11px; } .pm-sub b { font-weight: 600; } .pm-sub .in { font: 12px var(--mono); color: var(--hit); } .pm-sub .for { color: var(--text-faint); font-size: 12.5px; }
  @media (max-width: 640px) { .pm-pitch { height: 380px; padding: 12px 2px; } .pm-pl { width: 64px; } .pm-pl .nm { font-size: 11px; } .pm-gl { font-size: 12.5px; gap: 8px; } .pm-gl .c { min-width: 44px; } }
  .pm-back { display: inline-block; margin: 0 0 10px; color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 600; }
  .pm-back:hover { color: var(--accent); }
  .bc-more { display: flex; justify-content: center; margin-top: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--accent-line); color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
  .sheet-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
  .sheet-row:hover, .sheet-row:focus-visible { background: var(--bg-hover); outline: none; }
  .sheet-row.on { background: var(--accent-soft); }
  .sheet-row b { display: block; font-size: 14.5px; }
  .sheet-row small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
  .sheet-row .tick { color: var(--accent); font-weight: 700; }
  .sheet-ico { flex: none; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- matches: list + match ---------- */
  .mx { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  /* pinned beside the match while there is match left to scroll; at the end of the page it scrolls away with
     everything else as the footer comes up (owner's call — it must not look as if the footer belongs to one column) */
  .mx-list { position: sticky; top: calc(var(--appbar-h) + 16px); max-height: calc(100vh - var(--appbar-h) - 32px); overflow-y: auto; scrollbar-width: none; }
  .mx-list::-webkit-scrollbar { display: none; }   /* still scrolls; no bar drawn over the rows (as in the app) */
  .mx-detail .fxs-row { display: none; }   /* the round's strip of matches is off on phones too (owner, 2026-10-17): it pushed the match down and repeated the list "‹ Back to Matches" returns to */
  .mxl-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 14px; }
  .mxl-step .btn { padding: 6px 8px; line-height: 1; display: inline-flex; }
  .mxl-step .muted { font-size: 12.5px; }
  .mxl-step b { white-space: nowrap; }
  .mxl-step .kz { margin-left: auto; flex-wrap: nowrap; } .mxl-step .kz button { padding: 4px 8px; font-size: 11.5px; white-space: nowrap; }
  .mxl-day { font-size: 12px; color: var(--text-muted); margin: 12px 0 4px 2px; }
  .mxl-step > .muted { white-space: nowrap; }
  .daystrip { position: sticky; top: var(--appbar-h); z-index: 6; background: var(--bg); margin: 0 0 10px; padding: 6px 0 4px; border-bottom: 1px solid var(--border); }
  .mx-list .daystrip { top: 0; }
  .ds-head { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-bottom: 8px; } .ds-head .ds-month { font-size: 14px; font-weight: 600; white-space: nowrap; } .ds-head .ds-gap { flex: 1; }
  .ds-head { flex-wrap: wrap; } .ds-head .kz { flex-wrap: nowrap; } .ds-head .kz button { padding: 4px 8px; font-size: 11.5px; white-space: nowrap; }
  .ds-today[hidden] { display: none; }
  .ds-today { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
  .ds-days { display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: auto; } .ds-days::-webkit-scrollbar { display: none; }
  .ds-days button { flex: none; width: 52px; padding: 4px 0 7px; border: 0; background: none; color: var(--text-muted); font: inherit; cursor: pointer; position: relative; }
  .ds-days button small { display: block; font-size: 12px; } .ds-days button b { display: block; font-size: 16px; font-weight: 400; margin-top: 1px; }
  .ds-days button:hover:not(:disabled) { color: var(--text); }
  .ds-days button.on { color: var(--text); } .ds-days button.on small { font-weight: 600; } .ds-days button.on b { font-weight: 700; }
  .ds-days button.on::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 3px; border-radius: 2px; background: var(--accent); }
  .ds-days button:disabled { color: var(--text-faint); opacity: .45; cursor: default; }
  @media (max-width: 860px) { .mx-list .daystrip { top: var(--appbar-h); } }
  .mxl-lg { position: relative; margin: 10px 0 2px; }
  .mxl-lg .lg-main { width: 100%; display: block; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .mxl-lg .lg-main:hover { border-color: var(--accent-line); }
  .mxl-lg .l1 { display: flex; align-items: center; } .mxl-lg .l1 b { flex: 1; font-size: 14px; font-weight: 600; } .mxl-lg .l1 .chv { color: var(--text-muted); }
  .mxl-lg .l2 { display: block; margin-top: 3px; padding-right: 64px; font-size: 12.5px; color: var(--text-muted); } .mxl-lg .hotc { color: var(--hit); }
  .mxl-lg .lg-table { position: absolute; right: 11px; bottom: 8px; font-size: 12.5px; color: var(--accent); text-decoration: none; padding: 2px 0; }
  .mxl-lg .lg-table:hover { text-decoration: underline; }
  .hf-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; min-width: 0; }
  .hf-filters .hf-cats { margin: 0; min-width: 0; flex: 1 1 360px; }   /* drops under the match menu on a phone */
  .hf-filters .kz { flex: none; flex-wrap: nowrap; } .hf-filters .kz button { padding: 4px 8px; font-size: 11.5px; white-space: nowrap; }   /* the clock, beside the match pill */
  .hfm { position: relative; flex: none; }
  .hf-match { display: inline-flex; align-items: center; gap: 10px; min-width: 150px; justify-content: space-between; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .hf-match .chv { color: var(--text-muted); }
  .hfm-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(300px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow-y: auto; scrollbar-width: none; padding: 6px 0; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
  .hfm-pop::-webkit-scrollbar { display: none; } .hfm-pop[hidden] { display: none; }
  .hfm-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .hfm-row:hover, .hfm-row:focus-visible { background: var(--bg-hover); outline: none; }
  .hfm-row .tick { flex: none; width: 16px; color: var(--accent); font-weight: 700; font-size: 13px; }
  .hfm-row b { display: block; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hfm-row small { display: block; font-size: 12px; color: var(--text-muted); }
  .hfm-row > span:last-child { min-width: 0; }
  .hfm-row.grp { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; } .hfm-row.grp b { font-weight: 600; }
  .mxl-row { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) 80px; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
  .mxl-row:hover { background: var(--bg-elevated); }
  .mxl-row.on { background: var(--accent-soft); border-color: var(--accent-line); }
  .mxl-row .t { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
  .mxl-row .teams { max-width: 152px; }      /* the scores / positions column sits just past the longest name left in the lists, not at the far edge */
  .mxl-row .teams span { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; line-height: 1.45; }
  .mxl-row .teams b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mxl-row .teams em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
  .mxl-row .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .mxl-row .meta small { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
  .hotpill { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--hit); }
  .hotpill.none { color: var(--text-faint); } .hotpill.none .hotdot { background: none; box-shadow: inset 0 0 0 1px currentColor; }
  .mxl-custom { display: none; margin-top: 14px; font-size: 13px; }   /* "Compare any two clubs" is off, as in the app (owner's call — every fixture is already in the rounds); the selects stay for the code that reads them */
  .mxl-custom summary { cursor: pointer; color: var(--text-muted); padding: 6px 2px; }
  .mxl-custom .fxs-custom { margin-top: 6px; flex-wrap: wrap; }
  .mx-detail .mh-team a, .mh-team span a { color: inherit; text-decoration: underline; text-decoration-color: var(--text-faint); text-underline-offset: 2px; }

  /* ---------- tables ---------- */
  .tb-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
  .tb-controls select { width: auto; border-radius: 999px; border: 1px solid var(--accent-line); background-color: var(--accent-soft); color: var(--text); font-weight: 600; }   /* drop-downs: the cyan pill, as the league and match pickers */
  .tb-metrics { margin-bottom: 12px; }
  .tb-card { padding: 6px 8px 10px; overflow-x: auto; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .tbl th { font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: right; padding: 8px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .tbl td { text-align: right; padding: 8px 8px; border-bottom: 1px solid rgba(35,48,64,.6); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
  .tbl .c-team { text-align: left; font-family: var(--font); }
  .tbl .c-team b { font-weight: 600; }
  .tbl .c-team .fitn { display: inline-block; vertical-align: bottom; }
  @media (max-width: 640px) { .tbl .c-team .fitn { max-width: calc(100vw - 256px); } }   /* phones: the Form column stays on screen — long names go short (MLS, Brazil) */
  .tbl .c-team sup { color: var(--negative); font-family: var(--mono); font-size: 10.5px; margin-left: 3px; }
  .tbl .c-pos { text-align: left; width: 34px; color: var(--text-muted); position: relative; }
  .tbl .c-pts { font-weight: 600; color: var(--text); }
  .tbl .c-form { text-align: left; }
  .tbl .c-next { text-align: left; font-family: var(--font); font-size: 12.5px; }
  .tbl tr.tr { cursor: pointer; }
  .tbl tr.tr:hover td { background: var(--bg-hover); }
  .tbl tr.is-hl td { background: rgba(60, 203, 255, .16); }
  .tbl tr.open td { background: var(--bg-muted); }
  .tbl tr.open.is-hl td { background: rgba(60, 203, 255, .16); }     /* the open team is tinted like its opponent */
  .tbl tr.tr-open td { text-align: left; font-family: var(--font); background: var(--bg-muted); padding: 10px 12px; }
  /* the opened row, as the app's TeamOpenRow: Last · Next · the kickoff on its own line, then two equal buttons. It
     wraps — on one line it needed ~580px and stretched the whole table on a phone (owner, 2026-10-18) */
  .tbl tr.tr-open td { white-space: normal; }
  .tbo { display: grid; gap: 3px; max-width: 460px; line-height: 1.4; }
  .tbo .when { color: var(--text-muted); font-size: 12.5px; }
  .tbo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
  .tbo-btns .btn { display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 13px; color: var(--text); text-decoration: none; border-color: var(--accent-line); }
  .tbo-btns .btn.go { background: var(--accent-soft); }
  .tbo-btns .btn.pg { background: none; }
  .tbl tr.z-top td.c-pos::before, .tbl tr.z-bot td.c-pos::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
  .tbl tr.z-top td.c-pos, .tbl tr.z-bot td.c-pos { padding-left: 12px; }
  .tbl tr.z-top td.c-pos::before { background: var(--hit); }
  .tbl tr.z-bot td.c-pos::before { background: var(--negative); }
  .ov-dots.tagged { display: flex; gap: 3px; } .fmw { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 22px; }
  .fmw em { font: 600 8.5px var(--mono); font-style: normal; color: var(--text-faint); } .fmw em.eu { color: var(--accent); } .ov-dots.tagged .fm { margin-right: 0; }
  .fm { display: inline-flex; justify-content: center; align-items: center; width: 18px; height: 18px; margin-right: 3px; border-radius: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; font-family: var(--font); }
  .fm.W { background: var(--hit-mid); color: var(--hit); }
  .fm.D { background: var(--bg-muted); color: var(--text-muted); }
  .fm.L { background: rgba(255, 123, 147, .16); color: var(--negative); }
  .fm.last { width: 22px; height: 22px; font-size: 11.5px; box-shadow: 0 0 0 1.5px currentColor; margin-left: 2px; }
  .tbl .c-last { text-align: left; font-family: var(--mono); font-size: 12.5px; }
  .lr b { font-family: var(--font); font-weight: 700; margin-right: 4px; }
  .lr.W b { color: var(--hit); } .lr.D b { color: var(--text-muted); } .lr.L b { color: var(--negative); }
  .tbl.stats td.sorted { color: var(--text); }
  .tbl.stats td.top { color: var(--hit); font-weight: 600; }
  .th-sort { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
  .th-sort.on { color: var(--text); }
  /* zones: coloured position numbers (q1 green top prize, q2 blue, q3 lilac, d2 pale rose play-off, d1 rose down) */
  .pz { display: inline-flex; justify-content: center; align-items: center; min-width: 24px; height: 21px; padding: 0 3px; border-radius: 6px; font: 600 12px var(--mono); color: var(--text-muted); }
  .pz.q1 { background: var(--hit); color: #06281a; } .pz.q2 { background: #5b7cfa; color: #fff; } .pz.q3 { background: #b69cff; color: #1d1236; }
  .pz.d2 { background: rgba(255,123,147,.28); color: #ffc2cd; } .pz.d1 { background: var(--negative); color: #3a0710; }
  .pz.key { min-width: 18px; height: 13px; margin-right: 7px; vertical-align: -2px; }
  .tbl tr.tr-split td { padding: 3px 12px; } .tr-split span { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text-faint); }
  .tr-split span::before, .tr-split span::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
  .tb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-muted); padding: 10px 8px 2px; }
  .zk { display: inline-block; width: 3px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }
  .zk.z-top { background: var(--hit); } .zk.z-bot { background: var(--negative); }
  .mini { margin-top: 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 6px; }
  .mini-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 2px 4px 4px; }
  .mini-head a { color: var(--accent); text-decoration: none; }
  .mini-t td { padding: 7px 6px; font-size: 13px; } .mini-t th { font-size: 12px; }
  .mini-t .tdot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; }
  .mini-t tr.hl-h td, .mini-t tr.hl-a td { color: var(--text); font-weight: 600; }
  .mini-t tr.gap td { text-align: center; color: var(--text-faint); padding: 0; }
  .hf-cats { margin-bottom: 12px; flex-wrap: nowrap; }   /* one scrolling row, as in the app — wrapped to two on a phone once Saves joined */
  .st-btn { border: 1px solid var(--border); text-align: left; cursor: pointer; font: inherit; color: inherit; }
  .st-btn:hover { border-color: var(--accent-line); }
  .st-btn small { display: block; font-size: 12px; color: var(--text-muted); }
  .tb-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
  .tb-check input { accent-color: var(--accent); }
  .tbl tr.lg-row td { color: var(--text-muted); font-style: italic; background: var(--bg-muted); }
  .tbl.refs .lift { font-size: 11.5px; margin-left: 2px; }
  .btn.sm { padding: 3px 8px; font-size: 12px; }
  .hf-noise { grid-template-columns: auto 1fr; }
  .mu-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
  .btn.ghost { background: none; }
  .btn.ghost.on { border-color: var(--accent-line); color: var(--text); }
  .btn:disabled { opacity: .3; cursor: default; }

  .fxs { margin-bottom: 18px; }
  .fxs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .fxs-head #muCustomBtn { margin-left: auto; }
  .rstep { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
  .rstep b { color: var(--text); font-weight: 600; }
  .rstep .btn { padding: 4px 10px; font-size: 15px; line-height: 1; }
  .fxs-custom { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; max-width: 560px; }
  .fxs-custom[hidden] { display: none; }
  .fxs-custom select { flex: 1; }
  .fxs-custom .vs { color: var(--text-faint); font-size: 12px; }
  .fxs-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 6px; scroll-behavior: smooth; }
  .fxt { flex: none; width: 176px; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: var(--bg-elevated); cursor: pointer; }
  .fxt:hover { background: var(--bg-hover); }
  .fxt.on { border-color: var(--accent); background: var(--accent-soft); }
  .fxt-when { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
  .fxt-team { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
  .fxt-team b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fitn { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fxt-team em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
  .fxt-foot { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
  .hotdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hit); margin-right: 5px; vertical-align: 0; }

  .mh { padding: 4px 0 16px; margin-bottom: 4px; }
  .mh-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
  .info { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-muted); font: italic 600 11px/1 var(--display); cursor: help; margin-left: 6px; vertical-align: 1px; }
  .mh-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
  .mh-team { display: flex; align-items: center; gap: 10px; min-width: 0; } .mh-team > div { min-width: 0; }
  .mh-team b .tlink { display: block; } .mh-team b .fitn { font-size: inherit; color: inherit; margin-top: 0; padding-bottom: 3px; }   /* room for the underline under the clipped line */
  .mh-team.away { justify-content: flex-end; text-align: right; }
  .mh-team b { display: block; font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
  .mh-team span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
  .tdot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
  .cbar { flex: none; display: inline-block; width: 4px; height: 18px; border-radius: 2px; vertical-align: -3px; margin-right: 8px; } .cbar.dk { box-shadow: 0 0 0 1px var(--border); }
  .mh-team .cbar { height: 22px; margin: 0; } .pm-team .cbar { margin: 0; } .tm-head h1 .cbar { height: 26px; vertical-align: -2px; margin-right: 10px; } .srch-row span .cbar { height: 15px; vertical-align: -2px; }
  .tdot.home { background: var(--home); } .tdot.away { background: var(--away); }
  .mh-vs { font-size: 13px; color: var(--text-faint); }
  .odds-bar { margin-top: 14px; }
  .odds-bar .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
  .odds-bar .bar i { display: block; height: 100%; }
  .odds-bar .lbls { display: grid; grid-template-columns: 1fr auto 1fr; } .odds-bar .lbls span:nth-child(2) { text-align: center; } .odds-bar .lbls span:last-child { text-align: right; }   /* codes, draw always centred */
  .odds-bar .lbls { justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 5px; }
  .mh-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .st { background: var(--bg-elevated); border-radius: 10px; padding: 8px 12px; min-width: 0; }
  .st span { display: block; font-size: 12px; color: var(--text-muted); }
  .st b { display: block; font-size: 14px; font-weight: 600; margin-top: 1px; white-space: nowrap; }

  .tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
  #muMarket { position: sticky; top: var(--appbar-h); z-index: 7; background: var(--bg); }      /* the match's tabs stay under the bar, as in the app */
  .tabs button, .tabs a { flex: none; text-decoration: none; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px 11px; color: var(--text-muted); font-weight: 500; font-size: 14px; cursor: pointer; margin-bottom: -1px; }
  .tabs button:hover, .tabs a:hover { color: var(--text); }
  .tabs button.on, .tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
  /* one underline per tab row that slides to the picked tab (owner, 2026-10-17 — as in the app); drawn by inkTabs */
  .tabs { position: relative; }
  .tabs.has-ink button.on, .tabs.has-ink a.on { border-bottom-color: transparent; }
  .tab-ink { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--accent); pointer-events: none; transition: transform .28s cubic-bezier(.3, .9, .3, 1), width .28s cubic-bezier(.3, .9, .3, 1); }
  @media (prefers-reduced-motion: reduce) { .tab-ink { transition: none; } }
  .tabs .hot .cnt { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; font-size: 11.5px; font-family: var(--mono); background: var(--hit-soft); color: var(--hit); }
  .tabs .moresel { flex: none; width: auto; margin-left: 6px; padding: 5px 8px; font-size: 13.5px; color: var(--text-muted); background: none; border-color: transparent; }
  .tabs .moresel.on { color: var(--text); border-color: var(--accent-line); }

  .band { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
  .band-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .band-lbl { flex: none; width: 60px; font-size: 12px; color: var(--text-muted); }
  .band-tools { flex-wrap: wrap; }
  .chipseg.wins button { border-style: dashed; }
  .chipseg.wins button.on { border-style: solid; }
  .band-tools .band-lbl { width: auto; }
  .chipseg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .chipseg button { flex: none; border: 1px solid var(--border); background: none; color: var(--text-muted); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .chipseg button:hover { color: var(--text); border-color: var(--text-faint); }
  .chipseg button.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
  .chipseg em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); margin-left: 3px; }
  .chipseg button.on em { color: var(--text-muted); }
  .chipseg em.r-hi, .chipseg em.r-mid { color: var(--hit); }

  .linepick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
  .lp { flex: none; min-width: 52px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid transparent; background: var(--bg-elevated); color: var(--text); font: inherit; font-family: var(--mono); font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; }
  .lp:hover { border-color: var(--text-faint); }
  .lp.r-hi { background: var(--hit-mid); color: var(--hit); } .lp.r-mid { background: var(--hit-soft); color: #8ee8bf; } .lp.none { color: var(--text-muted); }
  .lp.on { color: var(--text); }
  .lp.on { border-color: var(--accent); opacity: 1; }

  .chartcard { padding: 18px 18px 12px; }
  .hl { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; }
  .hl-price { align-self: flex-start; margin-top: 18px; font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--text); }
  .lp.priced { padding-top: 5px; padding-bottom: 5px; line-height: 1.15; } .lp small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 1px; } .lp small.none { color: var(--text-faint); opacity: .6; }
  .hl-title { font-size: 14px; font-weight: 600; }
  .hl-rate { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
  .hl-rate b { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
  .hl-rate span { font-size: 14px; color: var(--text-muted); }
  .hl-ctx { font-size: 13px; color: var(--text-muted); }
  b.r-hi { color: var(--hit); } b.r-mid { color: #8ee8bf; } b.r-lo { color: var(--text-muted); }
  .hl-kpis { display: flex; gap: 10px; }
  /* match page, laid out as the app's */
  .mh.slim { margin-bottom: 4px; } .mh-title { font-family: var(--display); font-size: 22px; margin: 0 0 6px; letter-spacing: -0.02em; } .mh-title span { color: var(--text-faint); font-weight: 500; font-size: 15px; margin: 0 4px; }
  .ov-card { padding: 14px 16px; margin-bottom: 14px; }
  .ov-forms { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
  .ov-forms > div:last-child { text-align: right; } .ov-forms > div:last-child .ov-dots { justify-content: flex-end; }
  /* form: the Table's W / D / L squares (letters, not colour alone), the latest outlined */
  .ov-dots { display: flex; align-items: center; margin-top: 8px; padding: 0 2px; } .ov-dots .fm:last-child { margin-right: 0; }
  .ov-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0 0; font-size: 13.5px; } .ov-row > span { color: var(--text-muted); } .ov-row b { font-weight: 600; text-align: right; } .ov-row small { font-weight: 400; color: var(--text-muted); font-size: 12.5px; }
  .ov-h { margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); }
  .ov-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
  .ov-tile { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
  .ov-tile span { display: block; font-size: 12.5px; color: var(--text-muted); } .ov-tile b { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; margin: 2px 0; } .ov-tile small { font-size: 12px; color: var(--text-faint); }
  .ov-all { width: 100%; margin: 10px 0 0; padding: 12px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .ov-all:hover { background: rgba(60, 203, 255, .2); }
  #muBody .mini { margin-top: 20px; }
  .band-rule { border: 0; border-top: 1px solid var(--border); margin: 0; width: 100%; }
  .ch-avg { margin: 6px 2px 10px; font-size: 13px; color: var(--text-muted); } .ch-avg b { color: var(--text); font-weight: 600; }
  .ch-wins { margin-top: 12px; }
  .kpi { background: var(--bg-muted); border-radius: 10px; padding: 8px 12px; min-width: 96px; }
  .kpi span { display: block; font-size: 12px; color: var(--text-muted); }
  .kpi b { display: block; font-family: var(--mono); font-weight: 500; font-size: 18px; margin-top: 1px; }
  .kpi small { display: block; font-size: 12px; color: var(--text-faint); }
  .gchart { overflow: hidden; }
  .gchart svg { display: block; max-width: 100%; height: auto; }
  .gchart .grid-line { stroke: var(--border); stroke-width: 1; }
  .gchart .ax { fill: var(--text-faint); font-size: 11px; font-family: var(--mono); }
  .gchart .xl { fill: var(--text-muted); }
  .gchart .bv { fill: var(--text); font-size: 11px; font-family: var(--mono); }
  .gchart .bv.m { fill: var(--text-faint); }
  .gchart .thr { fill: var(--accent); font-size: 11.5px; font-family: var(--mono); font-weight: 500; }
  .gchart .gb { cursor: pointer; }
  .gchart .hitbar { fill: var(--hit); }
  .gchart .missbar { fill: transparent; stroke: var(--text-faint); stroke-width: 1.5; }
  .gchart .gb:hover .hitbar { fill: #7eeabb; }
  .gchart .gb:hover .missbar { stroke: var(--text-muted); }
  .gchart .gb.dim { opacity: .35; }                       /* a tapped bar stands out by the others fading, as in the app */
  .gchart .vd { stroke-width: 1.4; } .gchart .vd.h { fill: var(--home); } .gchart .vd.a { fill: var(--away); } .gchart .vd.x { fill: none; stroke: var(--text-faint); }
  .legend i.vd { border-radius: 50%; width: 8px; height: 8px; } .legend i.vd.h { background: var(--home); } .legend i.vd.a { background: var(--away); } .legend i.vd.x { background: none; border: 1.4px solid var(--text-faint); }
  .barcard { margin-top: 10px; background: var(--bg-muted); border-radius: 10px; padding: 11px 13px; }
  .bc-top b { display: block; font-size: 14px; }
  .bc-top span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
  .bc-val { font-size: 13px; font-weight: 600; margin-top: 4px; }
  .bc-val.y { color: var(--hit); } .bc-val.n { color: var(--text-muted); }
  /* the game's stats as an even grid (it wrapped raggedly beside a floated link on phones — owner, 2026-10-20) */
  .bc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px 14px; margin-top: 9px; font-family: var(--mono); font-size: 12.5px; }
  .bc-stats span { display: flex; justify-content: space-between; gap: 8px; }
  .bc-stats em { font-style: normal; font-family: var(--font); color: var(--text-muted); }

  .prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--text-faint); font-size: 13px; color: var(--text); margin-bottom: 12px; }
  .noise { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg-elevated); margin-bottom: 12px; }
  .noise .big { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
  .noise .meter { position: relative; height: 8px; background: var(--bg); border-radius: 4px; }
  .noise .meter i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
  .noise .meter b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
  .noise p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
  .noise p b { color: var(--text); font-family: var(--mono); font-weight: 500; }
  .noise .warnp { color: var(--text); }
  .hotlist { padding: 4px 6px; }
  /* team page */
  #teamView { max-width: none; }   /* the same width as every other page (it was 1100px, left-aligned — it looked off-centre) */
  .tlink { color: inherit; text-decoration: none; } .tlink:hover { text-decoration: underline; text-decoration-color: var(--text-faint); text-underline-offset: 3px; }
  .tm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; } .tm-ctl .tm-mk { margin-bottom: 0; } .tm-ctl .seg button { padding: 6px 13px; font-size: 13px; }
  .tm-fx.res { grid-template-columns: 58px 18px 34px minmax(0, 1fr) auto; } .tm-fx .fm { margin: 0; } .tm-fx .sc { font-family: var(--mono); font-weight: 600; font-size: 13px; }
  .tm-head { margin-bottom: 14px; }
  .tm-head h1 { font-family: var(--display); font-size: 30px; margin: 2px 0; letter-spacing: -0.02em; } .tm-head p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
  .tm-head a { color: var(--accent); text-decoration: none; font-weight: 600; } .tm-head a:hover { text-decoration: underline; }
  .tm-form { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
  @media (min-width: 641px) { .tm-head p { display: inline; } .tm-form { display: inline-flex; margin: 0 0 0 8px; vertical-align: 1px; font-size: 13.5px; } .tm-form::before { content: "·"; } } .tm-form .ov-dots { margin-top: 0; }
  .tm-next { display: flex; justify-content: space-between; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
  .tm-next:hover { border-color: var(--accent-line); } .tm-next b { display: block; font-size: 15px; } .tm-next small { display: block; font-size: 12.5px; color: var(--text-muted); }
  .tm-next .r { text-align: right; } .tm-next em { display: block; font-style: normal; color: var(--accent); font-weight: 600; font-size: 13px; margin-top: 4px; }
  .tm-bar { position: sticky; top: var(--appbar-h); z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .tm-bar .seg button { padding: 6px 13px; font-size: 13px; } .tm-bar .what { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }
  .tm-sub { font-family: var(--font); font-weight: 400; font-size: 12.5px; color: var(--text-muted); } .tm-gap { margin-top: 24px !important; }
  .tm-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 11px 8px; border-bottom: 1px solid rgba(35,48,64,.7); } .tm-line:last-child { border-bottom: 0; }
  .tm-line .hc-rate > b { font-size: 24px; } .tm-mk { margin-bottom: 10px; flex-wrap: wrap; }
  .tm-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .tm-g2 > .card { margin-top: 0; }
  .tm-lad { padding: 6px 14px 10px; } .tm-lad > div { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13.5px; }
  .tm-lad.three > div { grid-template-columns: minmax(0, 1fr) 112px 112px; } @media (max-width: 480px) { .tm-lad > div { grid-template-columns: minmax(0, 1fr) 92px; } .tm-lad.three > div { grid-template-columns: minmax(0, 1fr) 92px 92px; } } .tm-lad .lh { font-size: 12px; color: var(--text-faint); padding: 6px 0; } .tm-lad .lh span:not(:first-child) { text-align: center; }
  .tm-lad b { font-weight: 600; } .pc { font-family: var(--mono); font-size: 13px; text-align: center; border-radius: 7px; padding: 5px 0; background: var(--bg-muted); }
  .pc.r-hi { background: var(--hit-mid); color: var(--hit); } .pc.r-mid { background: var(--hit-soft); color: #8ee8bf; }
  .tm-yn { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .tm-yn .ov-tile b { font-size: 20px; }
  @media (max-width: 640px) { .tm-pg th:nth-child(5), .tm-pg td:nth-child(5) { display: none; } .tm-pg td, .tm-pg th { padding-left: 6px; padding-right: 6px; } .tm-pg .tm-short { display: inline; } .tm-pg .tm-long { display: none; } }
  .tm-short { display: none; }
  .tm-resc { max-width: 560px; } .tm-resc b small { display: block; font-weight: 400; font-size: 12px; color: var(--text-faint); } .tm-resc .lgc { background: none; color: var(--text-muted); }
  .tm-resc .tm-rule { display: block; height: 1px; background: var(--border); margin: 6px 0; padding: 0; }
  .tm-pg td, .tm-pg th { text-align: right; } .tm-pg .c-team { text-align: left; font-family: var(--font); } .tm-pg .tm-rank { font-family: var(--font); color: var(--text-muted); font-size: 12.5px; } .tm-pg .tm-rank b { color: var(--text); font-weight: 600; }
  .tm-list { padding: 4px 6px; } .tm-fx { width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border: 0; border-bottom: 1px solid rgba(35,48,64,.7); background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
  .tm-fx:last-child { border-bottom: 0; } .tm-fx:hover { background: var(--bg-hover); } .tm-fx .d { color: var(--text-muted); font-size: 12.5px; } .tm-fx em { font-style: normal; color: var(--text-faint); font-size: 12px; margin-left: 4px; }
  #teamView .mini { margin-top: 24px; }
  @media (max-width: 860px) { .tm-g2 { grid-template-columns: minmax(0, 1fr); } .tm-yn { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-bar .what { width: 100%; margin: 0; } .tm-head h1 { font-size: 24px; } }
  /* desktop rows */
  #hotView { max-width: 1240px; }
  .hotlist.rows { container-type: inline-size; padding: 2px 6px; }
  /* every column a set width, the result column too (it was as wide as its own figure, so "3" and "38" pushed the
     last-5 squares to different places and the heading sat over neither) */
  .hotlist.rows { --res-w: 0px; } .hotlist.rows:has(.hc-res) { --res-w: 68px; }
  .hr-head, .hrow.hr2 { display: grid; grid-template-columns: 84px minmax(0, 1.05fr) 58px minmax(0, 1.5fr) 132px var(--res-w); gap: 16px; align-items: center; }
  .hr-price { font-family: var(--mono); font-size: 15px; font-weight: 600; text-align: right; } .hr-head .r { text-align: right; }
  .hrow.hr2 .hc-res { justify-content: flex-end; }
  .hr-head { padding: 9px 8px 8px; font-size: 12px; color: var(--text-faint); border-bottom: 1px solid rgba(35,48,64,.7); }
  .hrow.hr2 { padding: 12px 8px; min-height: 0; } .hrow.hr2[disabled] { cursor: default; opacity: 1; }
  .hrow.hr2 .hc-rate > b { font-size: 24px; } .hrow.hr2 .hc-rate small { margin-top: 4px; }
  .hr-why { min-width: 0; } .hr-why .hc-src { margin: 0 !important; font-size: 12.5px; color: var(--text-muted); }
  .hr-say { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); } .hr-say b { color: var(--text); font-weight: 600; }
  .hr-form { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-faint); }
  .hr-form > span { display: flex; align-items: center; gap: 4px; } .hr-form em { font-style: normal; width: 34px; } .hr-form .pips { margin: 0; }
  @container (max-width: 640px) { .hr-say { display: none; } .hr-head, .hrow.hr2 { grid-template-columns: 84px minmax(0, 1.2fr) 58px minmax(0, 1fr) 132px var(--res-w); } }
  .hrow { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 14px; align-items: center; padding: 11px 8px; border: 0; border-bottom: 1px solid rgba(35,48,64,.7); background: none; text-align: left; cursor: pointer; border-radius: 8px; }
  .hrow:last-child { border-bottom: 0; }
  .hrow:hover { background: var(--bg-hover); }
  .hn { font-weight: 600; font-size: 14px; min-width: 0; }
  .hn small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
  .hr, .hl2 { text-align: right; white-space: nowrap; }
  .hr b { font-family: var(--display); font-size: 20px; font-weight: 700; }
  .hr small, .hl2 small { display: block; font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
  .hl2 .lift { font-family: var(--mono); font-size: 14px; }
  .disc { display: flex; align-items: center; gap: 6px; margin: 14px auto 0; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
  .disc:hover { color: var(--text); border-color: var(--text-faint); }
  @media (max-width: 860px) {
    :root { --appbar-h: 52px; }
    .appbar { padding: 0 14px; gap: 10px; }
    .topnav { display: none; }
    .appbar .brand-title { font-size: 16px; }
    .botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(16, 24, 33, 0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
    .botnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; color: var(--text-muted); text-decoration: none; font-size: 11.5px; font-weight: 500; border-radius: 10px; }
    .botnav a svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .botnav a.on { color: var(--accent); }
    .botnav a.on svg .fillable { fill: currentColor; }      /* filled when selected, where a filled form exists — as in the app */
    /* Table controls, laid out as in the app: full-width switches, the season beside All / Home / Away */
    .tb-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .tb-controls > .seg { display: flex; flex-wrap: nowrap; min-width: 0; } .tb-controls > .seg button { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tb-controls select { min-width: 0; max-width: 46vw; }
    /* nothing may be wider than the phone: a too-wide page makes the browser pan, and the fixed bottom bar slides out of view */
    #main { overflow-x: clip; } .tb-card { overflow-x: auto; }
    .tb-controls > .seg:nth-of-type(1) { grid-column: 1 / -1; order: -1; }
    .tb-controls > .seg:nth-of-type(3), .tb-controls > .tb-check, .tb-controls > .seg-conf { grid-column: 1 / -1; }   /* MLS: Eastern · Western · Overall gets the full width — it was squeezed to "Weste…" */
    .tb-controls select { height: 100%; }
    .main { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
    .sheet-back { align-items: flex-end; padding: 0; }
    .sheet { width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateY(20px); transition: transform .18s; }
    .sheet-back.open .sheet { transform: none; }
    .mx { grid-template-columns: minmax(0, 1fr); }
    .mx-list { position: static; max-height: none; overflow: visible; padding: 0; }
    body[data-view="match"] .mx-list { display: none; }
    body[data-view="matches"] .mx-detail { display: none; }
    .mxl-row { padding: 11px 10px; }
    .tbl .c-opt, .tbl .c-next, .tbl .c-last { display: none; }
    .tbl .c-form .muted { display: none; }
    .tbl th, .tbl td { padding: 8px 5px; }
    .tb-card { padding: 4px 4px 8px; }
    .tbl .c-form .fm:nth-last-child(n+4) { display: none; }      /* the latest three (was the first two hidden — a cup club with two games showed none) */
    .pg-title { font-size: 21px; }
    .mh-team b { font-size: 20px; }
    .band-lbl { width: auto; }
    .band-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .band-tools { padding-left: 0; flex-direction: row; flex-wrap: wrap; }
    .chipseg { width: 100%; }
    /* match page controls on a phone: roomier, and the two switches share the row's full width */
    #muBand .band-tools { flex-wrap: nowrap; gap: 8px; width: 100%; }
    #muBand .band-tools .seg { display: flex; flex-wrap: nowrap; flex: 2 1 0; min-width: 0; } #muBand .band-tools .seg + .seg { flex: 3 1 0; }
    #muBand .band-tools .seg button { flex: 1 1 0; min-width: 0; padding: 9px 4px; font-size: 14px; white-space: nowrap; }
    #muBand .band-tools .band-lbl + .seg { flex: 1 1 0; }
    #muBand .chipseg button, .ch-wins button { padding: 8px 14px; font-size: 14px; }
    .lp { padding: 10px 14px; font-size: 15px; min-width: 58px; }
    .hl-kpis { width: 100%; }
    .hrow { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
    .fxs-head #muCustomBtn { margin-left: 0; }
  }
  @media (max-width: 1180px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 860px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .sidebar { padding-bottom: 0; }
    .sidebar.open { padding-bottom: 20px; }
    .sidebar .side-body { display: none; }
    .sidebar.open .side-body { display: block; }
    .mobile-toggle { display: inline-block; }
    .side-head { position: static; }
    .main { padding: 16px 16px 32px; }
    .edge-grid { grid-template-columns: 1fr 1fr; }
    .tip { right: auto; left: 0; width: min(300px, calc(100vw - 32px)); }
  }

  /* ---- hot line card (as in the app) ---- */
  .hrow.hc { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; min-height: 104px; }
  /* the right-hand column: the market's price at the top (white — green stays for hits), the result at the foot */
  .hc-side { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 1px 0 2px; }
  .hc-price { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
  .hc-rate { text-align: left; }
  .hc-rate > b { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; }   /* 22px (was 28): the line gets the width */
  .hc-rate small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--text-muted); font-family: var(--mono); }
  .hc-rate small b { color: var(--text); font-weight: 500; }
  .hc .hn { font-size: 15px; }
  .hc-src { display: flex !important; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px !important; }
  /* phone card: every row on one line, so every card is one height (owner, 2026-10-18) — the headline falls back to the
     short name then the code (fitn), the tags to dots with counts and the last-5 row loses "Last 5 ·" (fitalt) */
  .hc .hn > .hc-l1, .hc .hn > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hc .hn > .hc-l1 { display: block; }
  .hc .hc-src.fitalt { flex-wrap: nowrap; overflow: hidden; }
  .fitalt .vf, .fitalt .vd { display: inline-flex; align-items: center; gap: 2px 14px; }
  .fitalt .vd, .fitalt.tight .vf { display: none; }
  .fitalt.tight .vd { display: inline-flex; }
  .hc .hn > .hc-l1.sq { font-size: 13px; letter-spacing: -.1px; }   /* 0.87 of 15px — the app allows 0.85 */
  .hc-form .vf, .hc-form .vd { gap: 0; }
  .hc-form.tight .vd .pips { gap: 2px; margin-right: 4px; }
  @media (max-width: 760px) { .hrow.hc, .hrow.hc.res { grid-template-columns: 60px minmax(0, 1fr) auto; } }   /* the app's rate column is 56pt: the line gets the room */
  @media (max-width: 359px) {   /* the narrowest phones (320): a smaller rate, so the line keeps its words */
    .hrow.hc, .hrow.hc.res { grid-template-columns: 54px minmax(0, 1fr) auto; column-gap: 8px; }
    .hrow.hc .hc-rate > b { font-size: 22px; } .hrow.hc .hc-rate small { font-size: 11.5px; } .hc-res { gap: 5px; }
  }
  .hc-src i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
  .hc-form { color: var(--text-faint) !important; margin-top: 5px !important; font-size: 12px !important; }
  .pips { display: inline-flex; gap: 3px; vertical-align: -1px; margin: 0 6px 0 2px; }
  .pips i { width: 7px; height: 7px; border-radius: 2px; background: var(--hit); display: block; box-sizing: border-box; }
  .pips i.m { background: none; border: 1.5px solid var(--text-faint); }
  .cntchip { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--hit); background: var(--hit-soft); padding: 3px 10px; border-radius: 99px; vertical-align: middle; margin-left: 6px; letter-spacing: 0; }
  .nohot { text-align: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 26px 20px; color: var(--text-faint); }
  .nohot b { display: block; color: var(--text); font-size: 16px; margin-top: 8px; }
  .nohot p { color: var(--text-muted); font-size: 14px; max-width: 34em; margin: 6px auto 14px; }
  .nohot .btn { color: var(--accent); border-color: var(--accent-line); }
  /* ---- site shell: app prompts, first-visit intro, footer ---- */
  .appstrip { display: none; align-items: center; gap: 12px; padding: 9px 14px; background: var(--bg-muted); border-bottom: 1px solid var(--border); }
  .appstrip[hidden], .intro[hidden], .getpop[hidden] { display: none; }
  .appstrip .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; flex: none; }
  .appstrip .txt { flex: 1; min-width: 0; line-height: 1.25; }
  .appstrip .txt b { display: block; font-family: var(--display); font-size: 14px; }
  .appstrip .txt span { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appstrip .soon { border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 9px; }   /* a label until the App Store link exists */
  .appstrip .x, .intro .x { background: none; border: 0; color: var(--text-faint); font-size: 20px; line-height: 1; padding: 6px; cursor: pointer; }
  .intro { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); font-size: 13.5px; color: var(--text-muted); }
  .intro b { color: var(--text); font-family: var(--display); font-weight: 700; }
  .intro a { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .intro p { margin: 0; flex: 1; min-width: 0; }
  /* ---------- stats ---------- */
  #statsView { max-width: 1180px; margin: 0 auto; }
  .st-ttl { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .st-ttl .pg-title { margin-bottom: 4px; }
  .st-lead { color: var(--text-muted); margin: 0 0 14px; max-width: 640px; font-size: 14px; }
  .st-filt { display: none; }
  .st-ctl { position: sticky; top: var(--appbar-h); z-index: 6; background: var(--bg); padding: 10px 0 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-tabs { margin: 0 0 2px; } .st-ctl .st-row3 { padding-top: 12px; border-top: 1px solid var(--border); } .st-side { margin-left: 4px; }
  .st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } .st-row > * { min-width: 0; }
  .st-dsk { display: contents; } .st-lines { display: flex; gap: 6px; } .st-lines .lp { min-width: 50px; }
  .st-lgm .hf-match { height: 34px; } .st-lgm .hfm-row b { display: flex; align-items: center; gap: 8px; }
  .st-what { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; margin: 6px 2px 16px; } .st-kz { order: 2; margin-left: auto; flex: none; } .st-what b { color: var(--text); }
  .st-tbl { padding: 0; overflow: hidden; } .st-tbl .tbl td, .st-tbl .tbl th { vertical-align: middle; text-align: left; } .st-tbl .tbl td:last-child { text-align: right; }
  body[data-view="stats"] .lgsw { display: none; }                 /* the page has its own league filter */
  .st-tbl .c-team b { font-weight: 600; } .st-tbl .c-team small { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; } .st-tbl .tlink { text-decoration: none; color: var(--text); } .st-tbl .tlink:hover b { color: var(--accent); }
  .st-rate b { font-family: var(--display); font-size: 21px; } .st-rate small { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-muted); } .st-rate small b { font: 600 12px var(--mono); color: var(--text); }
  .st-avg b { font-family: var(--mono); font-weight: 600; } .st-avg small { display: block; font-size: 11.5px; color: var(--text-faint); }
  .st-lg { font-family: var(--mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; } .st-gap { margin-left: 6px; font-weight: 600; font-size: 12px; color: var(--hit); } .st-gap.neg { color: var(--negative); } .st-gap.z { color: var(--text-muted); }
  .st-pr { font: 600 13px var(--mono); color: var(--text); }
  .st-nx b { display: block; font-weight: 500; white-space: nowrap; } .st-nx small { color: var(--text-muted); font-size: 12px; } .st-nx .house, .st-card .house { color: var(--text-muted); vertical-align: -1px; margin-left: 4px; }
  .st-go { white-space: nowrap; border: 1px solid var(--accent-line); background: none; color: var(--accent); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .st-go:hover { background: var(--accent-soft); }
  .srt { cursor: pointer; user-select: none; } .srt:hover { color: var(--text); } .srt.on { color: var(--text); } .srt.on::after { content: " ↓"; color: var(--accent); }
  .st-cards { display: none; }
  .st-empty { text-align: center; color: var(--text-muted); padding: 40px 16px; max-width: 460px; margin: 0 auto; } .st-empty svg { color: var(--text-faint); } .st-empty b { display: block; color: var(--text); font-family: var(--display); font-size: 18px; margin: 10px 0 6px; } .st-empty p { margin: 0; font-size: 14px; }
  .st-hub { margin-top: 14px; } .st-foot p { margin: 6px 0 0; }
  .st-foot { color: var(--text-muted); font-size: 13px; margin: 18px 2px 0; } .st-foot > b { color: var(--text); } .st-foot ul { margin: 6px 0 0; padding-left: 18px; } .st-foot li { margin: 3px 0; } .st-foot li b { color: var(--text); }
  .st-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; } .st-sheet[hidden] { display: none; }
  .st-sh { width: 100%; background: var(--bg-elevated); border-radius: 18px 18px 0 0; border-top: 1px solid var(--border); padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; }
  .st-sh-head { display: flex; justify-content: space-between; align-items: center; } .st-sh-head b { font-family: var(--display); font-size: 18px; }
  .st-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--bg-muted); color: var(--text-muted); font-size: 20px; cursor: pointer; }
  .st-sh .lbl { margin: 14px 0 6px; font-size: 12px; color: var(--text-faint); } .st-sh .wide .seg { display: flex; width: 100%; } .st-sh .wide .seg button { flex: 1; } .st-sh .wide + .wide { margin-top: 8px; }
  .st-sh .hf-match { width: 100%; justify-content: space-between; } .st-sh .hfm { position: relative; } .st-sh .hfm-pop { width: 100%; }
  .st-done { width: 100%; margin-top: 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; padding: 12px; cursor: pointer; }
  @media (max-width: 860px) {
    .st-lead, .st-dsk, .st-dsk-li, .st-tbl, .st-row3, .st-kz { display: none !important; } .st-filt { display: inline-flex; gap: 6px; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-muted); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .st-ttl { margin-bottom: 8px; } .st-ctl { gap: 8px; padding: 0 0 8px; }
    .st-row { flex-wrap: nowrap; } .st-row > .seg { flex: none; } .st-lines { flex: 1; overflow-x: auto; scrollbar-width: none; } .st-lines::-webkit-scrollbar { display: none; } .st-lines .lp { flex: none; min-width: 0; padding: 6px 9px; }
    .st-cards { display: block; }
    .st-card { padding: 10px 14px 10px 12px; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; margin: 0 0 6px !important; align-items: center; color: var(--text); text-decoration: none; }
    .st-card .st-rate { grid-row: 1 / span 3; align-self: start; padding-top: 1px; } .st-card .st-rate > b { font-size: 22px; } .st-card .st-rate small, .st-card .st-rate small b { font-size: 13px; } .st-card .st-rate small { margin-top: 3px; }
    .st-card .c1 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }
    .st-card .c1 .nm { display: flex; align-items: baseline; font-weight: 600; font-size: 15px; white-space: nowrap; min-width: 0; } .st-card .c1 .fitn { overflow: hidden; min-width: 0; }
    .st-card .c1 em { font: 500 11.5px var(--mono); color: var(--text-faint); font-style: normal; margin-right: 6px; }
    .st-card .c1 .pr { flex: none; font: 600 14px var(--mono); color: var(--text); }
    .st-card .c2 { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; } .st-card .c2 i { font-style: normal; color: var(--text-faint); }
    .st-card .opp { color: var(--text); overflow: hidden; text-overflow: ellipsis; min-width: 0; } .st-card .lgn, .st-card .dy { flex: none; }
    .st-card .c3 { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .st-card .c3 .pips { margin: 0; }
    .st-card .avm { font-size: 12px; color: var(--text-muted); } .st-card .avm b { font: 600 12px var(--mono); color: var(--text); }
  }
  /* ---------- home ---------- */
  body[data-view="home"] .lgsw, body[data-view="home"] .intro { display: none; }        /* Home is every league; its own first-visit block replaces the strip */
  #homeView { max-width: 1180px; margin: 0 auto; }
  #homeView h2 { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.01em; } #homeView .sub { color: var(--text-muted); font-size: 13.5px; }
  .hm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 34px 0 12px; } .hm-head > a { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13.5px; text-decoration: none; } .hm-head > a:hover { text-decoration: underline; }
  .hm-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 30px 0 4px; }
  .hm-hero h1 { font-family: var(--display); font-size: 44px; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 14px; } .hm-hero h1 em { font-style: normal; color: var(--hit); }
  .hm-hero p { color: var(--text-muted); font-size: 16.5px; max-width: 520px; margin: 0 0 20px; }
  .hm-cta { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 999px; padding: 11px 20px; margin: 0 10px 8px 0; text-decoration: none; } .hm-cta.ghost { background: none; color: var(--accent); border: 1px solid var(--accent-line); }
  .hm-read { padding: 18px; } .hm-read .lbl { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
  .hm-read .row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; } .hm-read .row > div:last-child b { font-size: 16px; } .hm-read .row small { display: block; color: var(--text-muted); font-size: 13px; }
  .hm-read .hc-rate > b { font-size: 34px; }
  .hm-read ul { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--border); } .hm-read li { display: flex; gap: 10px; padding: 9px 0 0; font-size: 13px; color: var(--text-muted); } .hm-read li > b { color: var(--text); font-weight: 600; flex: none; width: 104px; } .hm-read li span b { color: var(--text); }
  .hm-greet { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 0 0; } .hm-greet h1 { font-family: var(--display); font-size: 28px; margin: 0; letter-spacing: -.02em; } .hm-greet .kz { margin-left: auto; }
  /* returning visitors: what TallyLine is, with the day in three numbers that link through (owner's pick, mockups/home-banner.html B) */
  .hm-claim { display: flex; align-items: flex-end; gap: 24px; padding: 18px 0 18px; border-bottom: 1px solid var(--border); }
  .hm-claim h1 { font: 700 32px/1.08 var(--display); margin: 0; letter-spacing: -.02em; }
  .hm-claim h1 em { font-style: normal; color: var(--positive); }
  .hm-claim p { margin: 8px 0 0; color: var(--text-muted); font-size: 14.5px; max-width: 40em; }
  .hm-claim .facts { margin-left: auto; display: flex; gap: 8px; flex: none; }
  .hm-claim .facts a { display: block; min-width: 92px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 9px 13px; text-align: right; color: var(--text); text-decoration: none; }
  .hm-claim .facts a:hover { border-color: var(--accent); }
  .hm-claim .facts b { display: block; font: 700 22px/1.15 var(--display); } .hm-claim .facts b.g { color: var(--positive); }
  .hm-claim .facts small { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
  .hm-claim + .hm-greet h2 { font: 600 17px var(--display); margin: 0; letter-spacing: -.01em; }
  .hm-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  /* both cards reach the bottom of the row, their footers ("+ N more", "See all N hot lines") pinned to the bottom */
  .hm-cols > div { display: flex; flex-direction: column; min-width: 0; } .hm-cols > div > .card { flex: 1; display: flex; flex-direction: column; }
  .hm-cols .hm-more, .hm-cols .hm-allhot { margin-top: auto; }
  .hm-lg + .hm-lg { margin-top: 12px; } .hm-lg { padding: 0; overflow: hidden; }
  .hm-lg .lg { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; } .hm-lg .lg b { font-weight: 600; } .hm-lg .lg small { color: var(--text-muted); margin-left: auto; font-size: 12.5px; } .hm-lg .lg:hover b { color: var(--accent); }
  .hm-fx { display: grid; grid-template-columns: 48px minmax(0, 1fr) 104px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(35,48,64,.6); color: var(--text); text-decoration: none; } .hm-fx:last-child { border-bottom: 0; } .hm-fx:hover { background: var(--bg-hover); }
  .hm-fx .t { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); } .hm-fx .n > span { display: flex; align-items: baseline; gap: 6px; line-height: 1.55; } .hm-fx .n small { color: var(--text-faint); font-family: var(--mono); font-size: 12px; }
  .hm-fx .n { width: 100%; max-width: 190px; }   /* the same width on every row (the right-hand column is fixed too), so positions and scores line up down the card; they sit beside the names, not at the card's far edge */
  .hm-fx .n small { margin-left: auto; }
  .hm-fx .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
  .hm-fx .lgtag { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 12px; white-space: nowrap; }
  .hm-more { display: flex !important; align-items: center; gap: 10px; color: var(--text-muted) !important; font-weight: 400 !important; }
  .hm-more b { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }
  .hm-allhot { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--border); color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
  .hm-fx .n b { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: 13px; } .hm-fx .lose, .hm-res .lose { color: var(--text-faint); }
  .hm-more { display: block; padding: 10px 16px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; } .hm-next { margin: 0; padding: 10px 16px; border-top: 1px solid rgba(35,48,64,.6); color: var(--text-muted); font-size: 13.5px; } .hm-next b { color: var(--text); } .hm-next a, .hm-note a, #homeView .more { color: var(--accent); font-weight: 600; text-decoration: none; }
  .hm-note { margin: 10px 2px 0; color: var(--text-muted); font-size: 13.5px; }
  .hm-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .hm-res .card { padding: 12px 14px; color: var(--text); text-decoration: none; margin: 0; } .hm-res .card:hover, .hm-tabs a:hover { border-color: var(--accent-line); }
  .hm-res .top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); margin-bottom: 6px; } .hm-res .ln { display: flex; justify-content: space-between; } .hm-res .ln b { font-family: var(--mono); font-weight: 600; }
  .hm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hm-stats .hm-stat { margin: 0; }
  .hm-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin: 0; color: var(--text); text-decoration: none; } .hm-stat:hover { border-color: var(--accent-line); } .hm-stat > b { font-family: var(--display); font-size: 16px; } .hm-stat > .sub { font-size: 12.5px !important; margin-bottom: 4px; }
  .hm-st-row { display: flex; align-items: center; gap: 8px; font-size: 14px; } .hm-st-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-st-row .cbar { margin: 0; height: 16px; } .hm-st-row em { font: 700 15px var(--display); font-style: normal; } .hm-st-row small { width: 34px; text-align: right; font: 12px var(--mono); color: var(--text-muted); }
  .hm-stat .more { margin-top: 4px; font-size: 13px; color: var(--accent); }   /* the same cyan link on the home page and the Stats overview */
  .hm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hm-tabs a.card { padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin: 0; min-width: 0; } .hm-tabs a b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-tabs a small { margin-left: auto; color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
  .hm-how { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }   /* the app card went: the footer's band asks once */ .hm-how .card { padding: 22px; margin: 0; }
  .hm-how .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 16px 0 18px; } .hm-how .steps b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 4px; } .hm-how .steps span { color: var(--text-muted); font-size: 13.5px; } .hm-how .steps i { display: block; font: 700 30px/1 var(--display); color: var(--accent); font-style: normal; margin-bottom: 8px; }
  .hm-app { display: flex; align-items: center; } .hm-app h2 { font-size: 18px !important; } .hm-app p { color: var(--text-muted); font-size: 13.5px; margin: 6px 0 10px; }
  @media (max-width: 860px) {
    .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 16px; } .hm-hero h1 { font-size: 32px; } .hm-hero p { font-size: 15.5px; }
    .hm-cols, .hm-how, .hm-res, .hm-stats { grid-template-columns: minmax(0, 1fr); } .hm-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-tabs a small { display: none; } .hm-how .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hm-greet h1 { font-size: 23px; width: 100%; } .hm-greet .kz { margin: 8px 0 0; } .hm-head { margin-top: 28px; }
    .hm-claim { display: block; padding: 14px 0 16px; } .hm-claim h1 { font-size: 24px; } .hm-claim p { font-size: 13.5px; }
    .hm-claim .facts { margin: 14px 0 0; } .hm-claim .facts a { flex: 1; min-width: 0; text-align: left; padding: 8px 11px; } .hm-claim .facts b { font-size: 19px; }
  }
  /* search: a box in the bar on a desktop; on a phone an icon that opens the box across the bar */
  .srch { margin-left: auto; position: relative; } .srch ~ .getapp { margin-left: 0; }
  .srch-open { display: none; }
  .srch-box { display: flex; align-items: center; gap: 8px; width: 250px; height: 34px; padding: 0 10px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); }
  .srch-box:focus-within { border-color: var(--accent-line); }
  .srch-box input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 13.5px; } .srch-box input::placeholder { color: var(--text-faint); }
  .srch-x { display: none; background: none; border: 0; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
  .srch-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 340px; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px 0; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
  .srch-pop[hidden] { display: none; }
  .srch-h { padding: 8px 14px 4px; font-size: 11.5px; color: var(--text-faint); } .srch-none { padding: 14px; font-size: 13.5px; color: var(--text-muted); }
  .srch-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--text); text-decoration: none; font-size: 14px; cursor: pointer; }
  .srch-row:hover, .srch-row.on { background: var(--bg-hover); }
  .srch-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srch-row small { flex: none; font-size: 12px; color: var(--text-muted); }
  .about-m { display: none; }
  @media (max-width: 359px) { .appbar .brand-title { display: none; } }
  .getapp { margin-left: auto; position: relative; }
  .getapp > button { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
  .getapp > button:hover { border-color: var(--accent-line); }
  .getapp + .lgsw { margin-left: 0; }
  .getpop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 280px; display: flex; gap: 14px; align-items: center; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
  .getpop b { display: block; font-family: var(--display); font-size: 15px; }
  .getpop span { font-size: 12.5px; color: var(--text-muted); }
  .qr { width: 84px; flex: none; padding: 7px; background: #e8eef5; border-radius: 10px; }
  .qr .g { display: grid; grid-template-columns: repeat(13, 1fr); aspect-ratio: 1; }
  .qr .g b { background: #0b1a2e; display: block; }
  .sitefoot { border-top: 1px solid var(--border); padding: 28px max(26px, calc((100% - 1188px) / 2)) calc(36px + env(safe-area-inset-bottom)); }   /* content on the 1240px frame of .main */
  .sitefoot .sf-band { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-bottom: 22px; }
  .sitefoot .sf-band h2 { font-family: var(--display); font-size: 20px; margin: 0; letter-spacing: -0.01em; }
  .sitefoot .sf-band p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
  .sitefoot .sf-band .sf-ico { width: 52px; height: 52px; border-radius: 13px; flex: none; display: block; }   /* the real app icon (apple-touch-icon.png, from ios/scripts/make-icon.py) */
  .sitefoot .sf-band .soon { margin-left: auto; border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 12px; white-space: nowrap; }   /* a label, not a button: nothing to tap until the App Store link exists */
  @media (max-width: 860px) { .sitefoot .sf-band .soon { margin-left: 0; } }
  .sitefoot .sf-band .dl { margin-left: auto; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 11px 18px; border-radius: 12px; text-decoration: none; white-space: nowrap; }
  .sitefoot .links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
  .sitefoot .links a { color: var(--text-muted); text-decoration: none; }
  .sitefoot .links a:hover { color: var(--text); }
  .sitefoot small { display: block; margin-top: 12px; color: var(--text-faint); font-size: 12.5px; line-height: 1.45; }
  .sitefoot .abn { white-space: nowrap; }
  @media (max-width: 760px) {
    .appstrip { display: flex; }
    .getapp { display: none; }
    .about-m { display: grid; place-items: center; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; font-weight: 700; font-size: 14px; }
    .about-m + .getapp + .lgsw { margin-left: 0; }
    .srch { position: static; } .srch ~ .about-m { margin-left: 0; }
    /* the bar must never be wider than the screen (it dragged the whole page sideways on a narrow phone): the league
       name shortens before anything is pushed off, and under 360px the wordmark goes, leaving the mark */
    .lgsw { min-width: 0; flex-shrink: 1; } .lgsw #lgName { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .appbar .brand, .srch-open, .about-m { flex: none; }
    .srch-open { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; }
    .srch-box { display: none; } .srch-x { display: block; }
    .srch.open .srch-box { display: flex; position: absolute; left: 0; right: 0; top: 0; z-index: 46; width: auto; height: var(--appbar-h); padding: 0 14px; border: 0; border-radius: 0; background: var(--bg); } .srch.open .srch-box input { font-size: 16px; }
    .srch-pop { left: 0; right: 0; top: 100%; width: auto; border-radius: 0 0 14px 14px; border-width: 0 0 1px; max-height: calc(100vh - var(--appbar-h) - 120px); }
    .intro { padding: 10px 14px; align-items: flex-start; }
    .sitefoot { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
    .sitefoot .sf-band .dl { margin-left: 0; }
  }

  /* the Stats overview has no Filters button, so its league picker stays on a phone */
  .st-hubctl .st-row3 { display: flex !important; border-top: 0; padding-top: 10px; }

/* pre-built pages (scripts/prerender): the page's own content before the app loads, and a text block under the app */
.prebuilt { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.prebuilt h1 { color: var(--text); } .prebuilt h2 { color: var(--text); font-size: 17px; margin: 18px 0 6px; } .prebuilt a, .seo a { color: var(--accent); text-decoration: none; }
.prebuilt ul, .prebuilt ol, .seo ul { padding-left: 18px; } .prebuilt table { width: 100%; border-collapse: collapse; } .prebuilt th, .prebuilt td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.crumbs { font-size: 12.5px; color: var(--text-faint); margin: 4px 0 10px; } .crumbs span { color: var(--text-muted); }
.seo { max-width: 1240px; margin: 28px auto 0; padding: 0 16px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.seo h2 { font-family: var(--display); font-size: 18px; color: var(--text); margin: 0 0 8px; } .seo h3 { font-size: 14.5px; color: var(--text); margin: 16px 0 4px; } .seo p { margin: 6px 0; max-width: 780px; }

/* links inside the Stats text blocks were the browser's default (underlined, purple once visited) */
.st-foot a, .st-foot a:visited, .seo a:visited, .prebuilt a:visited { color: var(--accent); text-decoration: none; }
.st-foot a:hover, .seo a:hover { text-decoration: underline; }

/* league navigation on Home, a league's overview and the Stats overview: a strip of links on a desktop, the drop-down on a phone */
.lg-nav { margin: 4px 0 14px; } .lg-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-strip a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lg-strip a:hover { color: var(--text); } .lg-strip a.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.lg-strip .flag { width: 18px; height: 12px; }
.lg-menu, .st-lgphone { display: none; }
@media (max-width: 860px) { .lg-strip { display: none; } .lg-menu, .st-lgphone { display: block; } .st-hubctl .st-lgphone { display: flex !important; } }
.lg-head { display: flex; flex-direction: column; margin: 6px 0 2px; } .lg-head .pg-title { margin: 8px 0 12px; }
.st-hubctl .st-lgstrip { margin: 10px 0 2px; }
@media (min-width: 861px) { .st-hubctl .st-lgphone { display: none !important; } }
.hm-daylbl { padding: 10px 16px 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.hm-tbl { display: flex; flex-direction: column; padding: 4px 16px; color: var(--text); text-decoration: none; margin: 0 0 14px; } .hm-tbl:hover { border-color: var(--accent-line); }
.hm-trow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(35,48,64,.6); font-size: 14px; } .hm-trow:last-child { border-bottom: 0; }
.hm-trow em { width: 18px; font: 12.5px var(--mono); color: var(--text-faint); font-style: normal; } .hm-trow small { margin-left: auto; color: var(--text-faint); } .hm-trow b { width: 30px; text-align: right; font-family: var(--mono); }
.lgcrumb { box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; padding: 14px 26px 0; font-size: 13px; text-align: left; }
@media (max-width: 860px) { .lgcrumb { padding: 12px 16px 0; } } .lgcrumb a { color: var(--accent); text-decoration: none; }
body[data-view="league"] .lgsw, body[data-view="league"] .intro { display: none; }
body[data-view="league"] .hm-fx .lgtag { display: none; }

.hm-mini { padding: 0; margin-bottom: 14px; } .hm-mini .mini { margin: 0; border: 0; background: none; }
/* the pre-built text is always visible: it is replaced by the app's own page of the same content once it loads */

/* Overview: Team stats and When goals come */
.ts-card, .gt-card { padding: 14px 16px; margin: 0 0 14px; } .ts-card { margin-top: 22px; }     /* clear of the hot lines' "See all" button above it */ .ts-h { font-family: var(--display); font-size: 17px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ts-h small { font: 12px var(--mono); color: var(--text-faint); font-weight: 400; }
.ts-seg, .gt-seg { display: inline-flex; margin-bottom: 8px; } .ts-note { margin: 0 0 8px; color: var(--text-faint); font-size: 12.5px; }
.ts-clubs { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; margin: 6px 0 2px; } .ts-clubs .cbar { margin: 0 2px; }
.ts-card .pm-grp { margin-top: 6px; } .ts-foot { margin: 10px 0 0; color: var(--text-faint); font-size: 12px; } .ts-none { margin: 8px 0; }
.ts-toggle { display: none; background: none; border: 0; color: var(--accent); font-size: 13.5px; padding: 10px 0 0; cursor: pointer; }
@media (max-width: 860px) { .ts-card:not(.ts-open) .ts-more { display: none; } .ts-toggle { display: block; } }
.gt { margin: 10px 0 4px; --c: var(--home); } .gt.a { --c: var(--away); } .gt h4 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .gt h4 small { font: 12px var(--mono); color: var(--text-faint); font-weight: 400; }
.gt-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 110px; padding-top: 16px; align-items: end; margin-top: 4px; }
.gt-bin { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100%; } .gt-bin i { position: relative; display: block; width: 42%; max-width: 24px; border-radius: 3px 3px 0 0; }
.gt-bin i.f { background: var(--c); } .gt-bin i.a { border: 1.5px solid var(--c); border-bottom: 0; }
.gt-bin i b { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font: 600 11px var(--mono); color: var(--text-muted); }
.gt-ticks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 4px; font: 11px var(--mono); color: var(--text-faint); text-align: center; }
.gt-key { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-top: 10px; } .gt-key .k { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .gt-key .k.f { background: var(--text-muted); } .gt-key .k.a { border: 1.5px solid var(--text-muted); }

/* Players tab: the squad in the left column on a desktop (or the roster in the tab on a phone), the player's chart in the market charts' own look */
.pl-loading, .pl-pick { margin: 14px 0; } .pl-lbl { margin: 4px 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .chips.scroll::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--border); background: none; color: var(--text-muted); border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap; cursor: pointer; } .chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.pl-top { margin-bottom: 14px; }
.mx-sw { display: flex; width: 100%; margin-bottom: 10px; } .mx-sw button { flex: 1; }
.mx-roster { min-width: 0; } .pl-roster { margin-top: 4px; } .pl-seg { display: flex; width: 100%; margin-bottom: 8px; } .pl-seg button { flex: 1; } .pl-chips { margin-bottom: 8px; }
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.pl-row:hover { background: var(--bg-hover); } .pl-row.on { background: var(--accent-soft); border-color: var(--accent-line); }
.pl-row .who b { display: block; font-size: 14px; font-weight: 600; } .pl-row .who small { color: var(--text-faint); font-size: 12px; } .pl-row .hot { font: 600 12px var(--mono); color: var(--hit); white-space: nowrap; } .pl-row .hot.none { color: var(--text-faint); }
.pl-more { background: none; border: 0; color: var(--accent); font-size: 13.5px; padding: 10px 10px 0; cursor: pointer; }
.pl-back { background: none; border: 0; color: var(--accent); font-size: 13.5px; padding: 0 0 8px; cursor: pointer; }
.pl-mks { overflow-x: auto; scrollbar-width: none; } .pl-mks::-webkit-scrollbar { display: none; } .pl-mks button { white-space: nowrap; }

/* Hot lines: three drop-down pills (Games, Over / Under, Markets) — a drop-down on a desktop, a bottom sheet with Apply on a phone */
.hf-pills { position: relative; display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hf-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text); font-weight: 600; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hf-pill .chv { color: var(--accent); } .hf-pill.open { border-color: var(--accent); }
.hf-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 540px); overflow-y: auto; scrollbar-width: none; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 6px 14px 10px; }
.hf-panel::-webkit-scrollbar { display: none; } .hf-p-mk { width: min(580px, calc(100vw - 32px)); }
.hf-sheethead, .hf-foot, .hf-backdrop { display: none; } .hf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.hf-panel .hfm-row { padding-left: 4px; }
.hf-tg { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 2px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.hf-body > .hf-tg:first-child, .hf-cols > div > .hf-tg:first-child { border-top: 0; }
.hf-tg > span:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .hf-tg.master { font-weight: 700; } .hf-tg.child { padding-left: 18px; } .hf-tg.sub { font-weight: 600; font-size: 13px; color: var(--text-muted); }
.hf-tg small { color: var(--text-faint); font-size: 12.5px; } .hf-tg .flag { width: 18px; height: 12px; }
.hf-sw { flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px; background: #33424f; transition: background .15s; }
.hf-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #cdd6df; transition: left .15s; }
.hf-sw.on { background: var(--accent); } .hf-sw.on::after { left: 19px; background: #04202e; } .hf-sw.part { background: var(--accent); } .hf-sw.part::after { left: 11px; background: #04202e; opacity: .85; }
.hf-note { color: var(--text-faint); font-size: 12px; margin: 10px 2px 2px; line-height: 1.4; }
@media (max-width: 860px) {
  .hf-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; }
  .hf-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto !important; max-height: 84vh; z-index: 90; border-radius: 20px 20px 0 0; border-bottom: 0; display: flex; flex-direction: column; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); }
  .hf-sheethead { display: block; text-align: left; } .hf-sheethead b { font-family: var(--display); font-size: 20px; display: block; margin: 4px 0 6px; } .hf-grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: #3a4b5f; margin: 2px auto 8px; }
  .hf-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-width: none; overscroll-behavior: contain; } .hf-body::-webkit-scrollbar { display: none; } .hf-cols { grid-template-columns: 1fr; }
  .hf-foot { display: block; padding-top: 10px; } .hf-apply { display: block; width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
  .hf-clear { display: block; width: 100%; margin-top: 4px; padding: 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
}

/* chevrons on the Overview toggles, Over/Under beside the player lines, a note under the match's player lines */
.ts-toggle { align-items: center; gap: 6px; } @media (max-width: 860px) { .ts-toggle { display: inline-flex; } }
.ts-toggle .chv, .pl-more .chv { color: var(--accent); flex: none; } .pl-more { display: inline-flex; align-items: center; gap: 6px; }
.pl-linerow { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px; } .pl-linerow .seg { flex: none; } .pl-linerow .linepick { flex: 1 1 auto; min-width: 0; }
.pl-note { margin: 8px 2px 0; color: var(--text-faint); font-size: 12.5px; }
@media (max-width: 860px) { #muBand .band-tools { align-items: center; } }

.pl-pill { max-width: 100%; } .pl-pill > span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { #muBand .pl-linerow .seg button { padding: 9px 12px; font-size: 14px; } }
.pl-card .hl { flex-wrap: nowrap; } .pl-card .hl > div:first-child { flex: 1 1 0; min-width: 0; }

/* the squad scored on the chosen line: rate and count on the right, a price beside it, a dot for a hot line */
.pl-lwin { display: flex; width: 100%; margin: 0 0 8px; } .pl-lwin button { flex: 1; padding: 6px 4px; font-size: 12.5px; white-space: nowrap; }
.pl-row .pl-rt { margin-left: auto; display: flex; align-items: center; gap: 8px; text-align: right; } .pl-row .pl-rt b { font: 700 15px var(--display); } .pl-row .pl-rt small { display: block; color: var(--text-faint); font: 11.5px var(--mono); }
.pl-row .pl-rt > .hotdot { flex: none; } .pl-rate b, .pl-rate small { display: block; } .pl-na { color: var(--text-faint); }
.pl-row .pl-pr { flex: none; min-width: 38px; text-align: right; font: 600 13.5px var(--mono); color: var(--text); }

/* the Players controls: lines, then three drop-downs (games · clubs · how many); a rate column that stays put with or without a price */
.pl-pills { gap: 8px; flex-wrap: wrap; } .pl-pw { position: relative; }
.pl-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 6px; }
.pl-row .pl-pr { flex: none; width: 46px; text-align: right; font: 600 13.5px var(--mono); color: var(--text); }
/* the three drop-downs share one line on a phone */
.pl-pills { flex-wrap: nowrap; } .pl-pw { flex: 1 1 0; min-width: 0; } .pl-dd { width: 100%; justify-content: space-between; padding: 7px 10px; gap: 6px; } .pl-dd > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { #muBand .pl-pills { flex-direction: row; align-items: center; width: 100%; } }
@media (min-width: 861px) { .pl-pw { flex: 0 1 auto; } .pl-dd { width: auto; } }
/* the drop-downs are the cyan rounded pill, as the league and match pickers; on a desktop they share the line numbers' row */
.pl-linerow { flex-wrap: wrap; } .pl-pills { display: flex; gap: 8px; }
@media (min-width: 861px) { .pl-linerow { flex-wrap: nowrap; } .pl-pills { flex: none; margin-left: auto; } .pl-pop { left: auto; right: 0; } }
@media (max-width: 860px) { .pl-linerow .pl-pills { flex: 1 0 100%; } }