/* Reference client — the odds-portal LAYOUT (a sports sidebar, Live / Scheduled, bookmakers as rows, outcomes as columns,
   best highlighted, payout, average) in the console's skin: graphite panels, bone ink, one amber accent, Barlow Condensed
   for headings, IBM Plex Mono for every price and count, IBM Plex Sans for the prose. */
:root {
  --bg: #101418; --panel: #181d23; --panel2: #1e242b; --ink: #eef1f3; --ash: #8a95a1; --line: #262d35; --line2: #333c46;
  --amber: #f0b429; --moss: #3ecf8e; --ember: #f26d6d; --ice: #79b8ff;
  --link: var(--ice); --up: var(--moss); --down: var(--ember); --susp: var(--amber); --live: var(--ember);
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.45 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--ash); }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* the bar */
.top { display: flex; align-items: stretch; gap: 0; height: 46px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font: 700 20px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; padding: 0 18px; border-right: 1px solid var(--line); }
.brand:hover { text-decoration: none; }
.brand span { color: var(--amber); }
.top nav { display: flex; }
.top nav a { display: inline-flex; align-items: center; padding: 0 14px; color: var(--ash); font: 600 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.top nav a.active { color: var(--ink); border-bottom-color: var(--amber); }
.top nav a:hover { color: var(--ink); text-decoration: none; }
.spacer { flex: 1; }
.top .chip, .top .relay, .top .plan { align-self: center; margin-right: 12px; }
.chip { background: var(--panel2); color: var(--ink); border: 1px solid var(--line2); border-radius: 5px; padding: 3px 10px; font: 500 12px/1.2 var(--sans); cursor: pointer; }
.chip:hover { border-color: var(--amber); }
.chip.on { color: var(--ink); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.relay { font: 500 12px/1 var(--mono); color: var(--ash); }
.relay.open { color: var(--moss); }
.relay.closed { color: var(--ember); }
.plan { font: 500 11px/1 var(--mono); color: var(--ash); }

/* the page: sidebar + main */
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; max-width: 1400px; margin: 0 auto; padding: 16px 18px 90px; }
.side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); align-self: start; position: sticky; top: 60px; max-height: calc(100vh - 76px); overflow: auto; }
.side h3 { margin: 0; padding: 10px 12px; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ash); border-bottom: 1px solid var(--line); }
.side a { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; }
.side a:hover { background: color-mix(in srgb, var(--amber) 7%, transparent); text-decoration: none; }
.side a.on { background: color-mix(in srgb, var(--amber) 13%, transparent); box-shadow: inset 3px 0 0 var(--amber); color: var(--ink); }
.side a .n { color: var(--ash); font: 500 11px/1 var(--mono); }
.side a.league { padding-left: 24px; font: 600 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.side a.league.on { color: var(--ink); }
main { min-width: 0; }
h1 { font: 700 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 10px; }
h1 .muted { font: 400 12px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.error { color: var(--ember); padding: 12px; border: 1px solid var(--ember); border-radius: var(--r); background: var(--panel); }

/* sections: LIVE / SCHEDULED */
.section { margin: 0 0 18px; }
.section > h2 { margin: 0 0 8px; font: 700 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 8px; }
.section > h2 .muted { font: 500 11px/1 var(--mono); }
.section > h2 .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent); }
.league { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.league .lh { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font: 700 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.league .lh .sport { color: var(--ash); font-weight: 500; }
.league .lh .n { margin-left: auto; color: var(--ash); font: 500 11px/1 var(--mono); }
table.games { width: 100%; border-collapse: collapse; }
table.games th { font: 600 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: center; }
table.games th.l { text-align: left; }
table.games td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.games tr:last-child td { border-bottom: 0; }
table.games tr:hover td { background: color-mix(in srgb, var(--amber) 6%, transparent); }
table.games td.time { width: 100px; color: var(--ash); font: 500 12px/1.3 var(--mono); }
table.games td.time .live { color: var(--live); font: 700 11px/1 var(--display); letter-spacing: .1em; }
table.games td.match a { color: var(--ink); }
table.games td.match .sep { color: var(--ash); margin: 0 6px; }
table.games td.match .stage { font: 500 10px/1 var(--mono); color: var(--ash); margin-left: 6px; }
table.games td.px { width: 92px; text-align: center; font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
table.games td.px .book { display: block; font: 400 10px/1.4 var(--sans); color: var(--ash); letter-spacing: 0; text-transform: none; }
table.games td.px.best { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent); border-radius: 4px; }
table.games td.px.best .book { color: var(--amber); }
table.games td.bs { width: 48px; text-align: center; color: var(--ash); font: 500 12px/1 var(--mono); }
table.games td.meta { text-align: right; color: var(--ash); font-size: 11px; }
.tag { display: inline-block; font: 600 10px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 0 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ash); margin-left: 6px; vertical-align: 1px; }
.tag.live { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
.empty { padding: 14px; color: var(--ash); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }

/* the event page */
.evhead { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.evhead h1 { margin: 0; }
.evhead h1 .sep { color: var(--ash); font-weight: 400; margin: 0 10px; }
.evhead .sub { color: var(--ash); font-size: 12px; margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.evhead .ids { font: 500 11px/1.3 var(--mono); color: var(--ash); }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line2); margin-bottom: 10px; }
.tabs a { padding: 8px 12px; color: var(--ash); font: 600 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--amber); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a .n { font: 500 11px/1 var(--mono); color: var(--amber); margin-left: 6px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--amber) 14%, transparent); }
.block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.block .bh { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); font: 700 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.block .bh .muted { font-weight: 500; }
.block .bh .chip { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; }
table.odds { width: 100%; border-collapse: collapse; }
table.odds th { font: 600 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); padding: 6px 12px; border-bottom: 1px solid var(--line); text-align: center; }
table.odds th.l { text-align: left; }
table.odds td { padding: 4px 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
table.odds td.l { text-align: left; }
table.odds td.book { font-weight: 600; }
table.odds td.book a { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; }
table.odds td.pay { color: var(--ash); font: 500 12px/1.3 var(--mono); }
table.odds tr.avg td { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ash); border-bottom: 0; font-family: var(--mono); }
table.odds tr.avg td.l { font: 600 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.cell { display: inline-block; min-width: 68px; padding: 3px 8px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--ink) 6%, var(--panel)); font: 600 14px/18px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); transition: background .8s; }
.cell.best { border-color: color-mix(in srgb, var(--amber) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.cell.susp { color: var(--susp); border-color: var(--susp); text-decoration: line-through; }
.cell.closed { color: var(--ash); opacity: .6; text-decoration: line-through; }
.cell.none { color: var(--ash); border-color: transparent; background: transparent; }
.cell.up { background: color-mix(in srgb, var(--up) 22%, var(--panel)); }
.cell.down { background: color-mix(in srgb, var(--down) 22%, var(--panel)); }
.cell.up::after { content: '▲'; color: var(--up); font-size: 9px; margin-left: 5px; }
.cell.down::after { content: '▼'; color: var(--down); font-size: 9px; margin-left: 5px; }
.cell.stale { border-bottom-style: dotted; border-bottom-color: var(--susp); }
.player { margin: 16px 0 6px; display: flex; align-items: baseline; gap: 8px; }
.player b { font: 700 15px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.player .muted { font-size: 12px; }

/* the props screener */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; color: var(--ash); }
.filters select, .filters input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line2); border-radius: 5px; padding: 4px 8px; font: 500 12px/1.2 var(--sans); }
table.screener { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
table.screener th, table.screener td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: right; font-size: 12px; white-space: nowrap; }
table.screener th { font: 600 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); position: sticky; top: 46px; background: var(--panel); }
table.screener th:first-child, table.screener td:first-child, table.screener th:nth-child(2), table.screener td:nth-child(2), table.screener th:nth-child(3), table.screener td:nth-child(3) { text-align: left; }
table.screener td.num { font-family: var(--mono); }
table.screener tr:hover td { background: color-mix(in srgb, var(--amber) 6%, transparent); }

/* findings */
.findings-btn { position: fixed; right: 16px; bottom: 16px; z-index: 6; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 14px; font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.findings-btn b { color: var(--amber); margin-left: 6px; font-family: var(--mono); }
.findings { position: fixed; right: 16px; bottom: 60px; width: min(560px, 92vw); max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-top: 3px solid var(--amber); border-radius: var(--r); z-index: 6; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.findings-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.findings-head strong { font: 700 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.findings-head .muted { flex: 1; font-size: 12px; }
.finding { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.finding b { font-family: var(--mono); color: var(--amber); }
.finding .n { float: right; color: var(--ash); font-family: var(--mono); }
.finding .ex { color: var(--ash); font-family: var(--mono); font-size: 11px; white-space: pre-wrap; word-break: break-all; margin-top: 3px; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: 10px; }
  .side { position: static; max-height: none; }
  .side a { padding: 9px 12px; }
  table.games td.meta { display: none; }
  .top nav a { padding: 0 10px; }
}

/* the live score, between the teams */
.score { display: inline-block; margin: 0 10px; padding: 0 8px; border-radius: 4px; background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--ink); font: 700 13px/20px var(--mono); font-variant-numeric: tabular-nums; }
.score i { font-style: normal; color: var(--ash); margin: 0 2px; }
.score.big { font-size: 20px; line-height: 28px; margin: 0 14px; padding: 0 12px; vertical-align: 2px; }