/* LineScout app styles. Layout: sticky top bar with nav and feed status, one content column (max 1320px).
   Every color is a token; dark values follow the OS setting. */
:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --ink: #111a24;
  --muted: #5a6776;
  --faint: #8592a0;
  --line: #e0e5eb;
  --line-strong: #cbd3dc;
  --chip: #edf0f4;
  --accent: #2756c8;
  --accent-soft: #e4ebfb;
  --good: #0f7f55;
  --good-soft: #e1f3ea;
  --warn: #9a5c00;
  --warn-soft: #fbefd9;
  --bad: #bf3a2e;
  --bad-soft: #fbe5e2;
  --shadow: 0 1px 2px rgba(17, 26, 36, .05), 0 2px 8px rgba(17, 26, 36, .04);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 12px;
  /* Aliases used by older page-level styles. */
  --fg: var(--ink);
  --ok: var(--good);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1016;
    --surface: #131a22;
    --surface-2: #18212b;
    --ink: #e6ecf2;
    --muted: #97a4b1;
    --faint: #6d7a88;
    --line: #222c37;
    --line-strong: #2f3b48;
    --chip: #1c2631;
    --accent: #7ea3ff;
    --accent-soft: #1b2744;
    --good: #43cf91;
    --good-soft: #12301f;
    --warn: #f0b34e;
    --warn-soft: #33270f;
    --bad: #ff7d70;
    --bad-soft: #3a1a17;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 600; }
h3 { font-size: .95rem; font-weight: 600; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .85em; background: var(--chip); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .8rem; }
.ok, .good { color: var(--good); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }

/* Top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1320px; margin: 0 auto; padding-inline: 16px; display: flex; align-items: center; gap: 20px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--surface); display: grid; place-items: center; font: 700 .8rem var(--mono); }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--muted); padding: 7px 11px; border-radius: 8px; white-space: nowrap; font-weight: 500; }
.nav a:hover { background: var(--chip); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav .sep { width: 1px; background: var(--line); margin: 8px 6px; flex: none; }
.statusbar { border-top: 1px solid var(--line); background: var(--surface-2); }
.statusbar-inner { max-width: 1320px; margin: 0 auto; padding-inline: 16px; padding-block: 6px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .78rem; color: var(--muted); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--faint); }
.dot.good { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; gap: 4px 12px; padding-block: 8px; }
  .nav { flex-basis: 100%; order: 2; margin-inline: -8px; }
}

/* Page */
.page { max-width: 1320px; margin: 0 auto; padding-inline: 16px; padding-block: 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-head > div:first-child { display: grid; gap: 4px; min-width: 0; }
.page-head p { color: var(--muted); max-width: 70ch; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Panels, stats */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-pad { padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px; box-shadow: var(--shadow); }
.stat span { font-size: .78rem; color: var(--muted); }
.stat b { font: 500 1.4rem/1.25 var(--mono); font-variant-numeric: tabular-nums; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }

/* Pills and chips */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--chip); color: var(--muted); white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.solid { background: var(--ink); color: var(--surface); letter-spacing: .04em; }
.chip { display: inline-block; background: var(--chip); border-radius: 6px; padding: 1px 7px; margin: 1px 3px 1px 0; font-size: .75rem; color: var(--muted); }

/* Controls */
.btn, button { font: inherit; font-weight: 500; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn:hover, button:hover { background: var(--chip); text-decoration: none; }
.btn.primary, button.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primary:hover, button.primary:hover { opacity: .9; }
.btn.small { padding: 3px 9px; font-size: .78rem; }
input, select { font: inherit; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
label { color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.money-input { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.money-input span { padding-left: 10px; color: var(--muted); font-family: var(--mono); }
.money-input input { border: 0; width: 7.5em; font-family: var(--mono); padding-left: 4px; }
.money-input input:focus { outline: none; }
.money-input:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Segmented tabs */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--chip); border-radius: 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 7px; color: var(--muted); white-space: nowrap; font-weight: 500; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.tabs .count { font: 500 .72rem var(--mono); background: var(--surface); color: var(--muted); padding: 1px 6px; border-radius: 999px; }
.tabs a[aria-current="page"] .count { background: var(--accent-soft); color: var(--accent); }

/* Notices */
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; font-size: .88rem; color: var(--muted); }
.notice summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.notice[open] summary { margin-bottom: 8px; }
.notice p + p { margin-top: 6px; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { position: sticky; top: 0; background: var(--surface-2); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); }
table.data ul { margin: 0; padding-left: 16px; }

/* Book logos */
.blogo { flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; }
.blogo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.blogo .ini { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 700 .78rem var(--sans); }

/* Opportunity cards */
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; align-items: start; }
.opp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; min-width: 0; }
.opp.is-withdrawn { opacity: .72; }
.opp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px 12px; }
.opp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.league { font: 600 .68rem var(--mono); letter-spacing: .04em; background: var(--ink); color: var(--surface); padding: 2px 6px; border-radius: 4px; }
.opp-teams { font-size: 1rem; font-weight: 600; margin-top: 6px; }
.opp-teams a { color: inherit; }
.opp-market { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.opp-profit { text-align: right; display: grid; gap: 2px; justify-items: end; align-content: start; }
.opp-profit b { font: 600 1.45rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.opp-profit span { font-size: .75rem; color: var(--muted); }
.opp-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

.legs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.leg { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; }
.leg + .leg { border-top: 1px dashed var(--line); }
.leg-n { font: 600 .75rem var(--mono); color: var(--faint); }
.leg-book { font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.leg-sel { font-size: .9rem; overflow-wrap: anywhere; }
.leg-bal { font-size: .72rem; font-weight: 500; color: var(--muted); }
.leg-bal.short { color: var(--warn); }
.leg-money { text-align: right; display: grid; gap: 1px; justify-items: end; }
.price { font: 600 .9rem var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--chip); }
.bet { font: 600 1rem var(--mono); font-variant-numeric: tabular-nums; }
.returns { font: .75rem var(--mono); color: var(--muted); }
.leg-problems { grid-column: 3 / -1; font-size: .76rem; color: var(--warn); }
.open-link { font-size: .75rem; font-weight: 500; }

.outcomes { border-top: 1px solid var(--line); background: var(--surface-2); padding: 10px 16px; display: grid; gap: 8px; }
.outcomes-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oc-list { display: flex; flex-wrap: wrap; gap: 6px; }
.oc { display: grid; gap: 0; padding: 5px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.oc span { font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
.oc b { font: 600 .88rem var(--mono); font-variant-numeric: tabular-nums; }
.oc.good b { color: var(--good); }
.oc.bad b { color: var(--bad); }
.oc.unknown { border-style: dashed; }
.oc.unknown b { color: var(--warn); font-family: var(--sans); font-weight: 500; font-size: .8rem; }

.opp-foot { border-top: 1px solid var(--line); padding: 9px 16px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); }
.opp-foot a { font-weight: 500; }

@media (max-width: 520px) {
  .leg { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 14px; }
  .leg-n { display: none; }
  .leg-problems { grid-column: 2 / -1; }
  .opp-head { padding: 12px 14px 10px; }
  .opp-profit b { font-size: 1.2rem; }
}

/* Detail page */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: .85rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }
.list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
details.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
details.section > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::after { content: "Show"; color: var(--accent); font-weight: 500; font-size: .82rem; }
details.section[open] > summary::after { content: "Hide"; }
details.section[open] > summary { border-bottom: 1px solid var(--line); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 9.5em 7em minmax(0, 1fr); gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: .82rem; }
.timeline li:last-child { border-bottom: 0; }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

@media (prefers-reduced-motion: no-preference) {
  .opp, .btn, .tabs a, .nav a { transition: background-color .15s, box-shadow .15s, color .15s; }
}

/* Book picker */
.count-badge { font: 500 .72rem var(--mono); background: var(--chip); color: var(--muted); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.count-badge.on { background: var(--accent-soft); color: var(--accent); }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.linkish:hover { background: none; text-decoration: underline; }
.icon-btn { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; }
.icon-btn:hover { background: var(--chip); color: var(--ink); }

.sheet { border: 0; padding: 0; border-radius: 16px; background: var(--surface); color: var(--ink); width: min(720px, calc(100vw - 32px)); max-height: min(84vh, 860px); box-shadow: 0 24px 64px rgba(8, 12, 18, .28), 0 0 0 1px var(--line); }
.sheet::backdrop { background: rgba(8, 12, 18, .5); backdrop-filter: blur(2px); }
.sheet-form { display: flex; flex-direction: column; max-height: min(84vh, 860px); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 20px 4px 24px; }
.sheet-head > div { display: grid; gap: 4px; }
.sheet-head h2 { font-size: 1.15rem; }
.sheet-head p { color: var(--muted); font-size: .85rem; max-width: 52ch; }
.sheet-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 24px 16px; border-bottom: 1px solid var(--line); }
.search { flex: 1 1 220px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); color: var(--faint); min-width: 0; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.search input { border: 0; background: transparent; padding: 8px 0; width: 100%; min-width: 0; }
.search input:focus { outline: none; }
.presets { display: flex; padding: 3px; gap: 2px; background: var(--chip); border-radius: 9px; }
.presets button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; color: var(--muted); font-size: .82rem; }
.presets button:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.presets button:disabled { opacity: .45; cursor: not-allowed; }
.sheet-body { overflow-y: auto; padding: 8px 16px 16px; display: grid; gap: 8px; overscroll-behavior: contain; }
.bgroup-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px; background: var(--surface); }
.bgroup-head h3 { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.bgroup-count { font-size: .72rem; color: var(--faint); }
.bgroup-head .linkish { margin-left: auto; font-size: .78rem; }
.brows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px 8px; }
.brow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--ink); cursor: pointer; }
.brow:hover { background: var(--surface-2); }
.brow .blogo { width: 32px; height: 32px; border-radius: 8px; transition: filter .15s, opacity .15s; }
.bname { display: grid; min-width: 0; }
.brow-plain { grid-template-columns: minmax(0, 1fr) auto; }
.bname small.muted { color: var(--muted); }
.bname span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bname small { font-size: .72rem; color: var(--good); }
.brow:has(.switch:not(:checked)) .blogo { filter: grayscale(1); opacity: .45; }
.brow:has(.switch:not(:checked)) .bname span { color: var(--muted); }
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 22px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background-color .15s; }
input.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::before { transform: translateX(14px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px 14px 24px; border-top: 1px solid var(--line); }
.sheet-foot b { color: var(--ink); }
@media (max-width: 600px) {
  .sheet { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .sheet-form { max-height: 92vh; }
  .sheet-head { padding: 16px 12px 4px 16px; }
  .sheet-tools { padding: 12px 16px; }
  .presets { width: 100%; }
  .presets button { flex: 1; }
  .sheet-body { padding: 4px 8px 12px; }
  .sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in .18s ease-out; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
}

/* User menu */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 .78rem var(--sans); letter-spacing: .02em; flex: none; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }
.usermenu { position: relative; margin-left: auto; flex: none; }
.usermenu > summary { list-style: none; cursor: pointer; border-radius: 50%; padding: 2px; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover .avatar, .usermenu[open] > summary .avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.usermenu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(8, 12, 18, .16); padding: 6px; display: grid; }
.usermenu-id { display: grid; padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; min-width: 0; }
.usermenu-id b, .usermenu-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-panel a, .usermenu-panel button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 500; }
.usermenu-panel a:hover, .usermenu-panel button:hover { background: var(--chip); text-decoration: none; }
.usermenu-panel form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.usermenu-panel button { color: var(--bad); cursor: pointer; }
@media (max-width: 720px) { .usermenu { order: 1; } }

/* Toasts */
.toasts { display: grid; gap: 8px; }
.toast { padding: 10px 14px; border-radius: 10px; background: var(--good-soft); color: var(--good); font-weight: 500; }
.toast.error { background: var(--bad-soft); color: var(--bad); }

/* Account pages */
.account { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: 18px; }
.account-head { display: flex; align-items: center; gap: 16px; }
.account-head > div { display: grid; gap: 4px; min-width: 0; }
.account-nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.account-nav a { padding: 8px 12px; color: var(--muted); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.account-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line-strong); }
.account section.panel { scroll-margin-top: 80px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid.one { grid-template-columns: minmax(0, 1fr); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field-label { color: var(--ink); font-weight: 500; font-size: .88rem; }
.field input:not([type=checkbox]), .field select { width: 100%; }
.field .money-input input { width: 100%; }
.field small { color: var(--muted); font-size: .78rem; }
.field small ul { margin: 4px 0 0; padding-left: 18px; }
.field.has-error input, .field.has-error select { border-color: var(--bad); }
.check-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.check-row > span { display: grid; gap: 2px; }
.check-row input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; }
.check-row input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.check-row input[type=checkbox]:checked { background: var(--accent); }
.check-row input[type=checkbox]:checked::before { transform: translateX(14px); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 0; flex-wrap: wrap; }
.link-row + .link-row { border-top: 1px solid var(--line); padding-top: 14px; }
.link-row > div { display: grid; gap: 2px; min-width: 0; }
.btn.danger { color: var(--bad); }

/* Segmented icon buttons (layout switches) */
.seg { display: flex; padding: 3px; gap: 2px; background: var(--chip); border-radius: 9px; }
.seg button { border: 0; background: transparent; border-radius: 7px; color: var(--muted); }
.seg button:hover { background: var(--surface); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.icon-seg button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; }

/* Opportunities as a list: one row each — game and profit on the left, bets on the right */
.opp-grid.as-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.as-list .opp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head legs" "foot foot"; }
.as-list .opp-head { grid-area: head; border-right: 1px solid var(--line); padding: 12px 16px; }
.as-list .opp-teams { margin-top: 4px; font-size: .95rem; }
.as-list .opp-profit b { font-size: 1.2rem; }
.as-list .legs { grid-area: legs; border-top: 0; align-self: center; }
.as-list .leg { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 8px 16px; gap: 2px 10px; }
.as-list .leg-n { display: none; }
.as-list .leg .blogo { width: 28px; height: 28px; border-radius: 7px; }
.as-list .leg-book { font-size: .85rem; }
.as-list .leg-sel { font-size: .85rem; }
.as-list .leg-money { grid-auto-flow: column; align-items: center; gap: 10px; }
.as-list .returns { display: none; }
.as-list .bet { font-size: .9rem; }
.as-list .leg-problems { grid-column: 2 / -1; }
.as-list .outcomes { display: none; }
.as-list .opp-foot { grid-area: foot; padding: 6px 16px; }
@media (max-width: 760px) {
  .as-list .opp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "legs" "foot"; }
  .as-list .opp-head { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Recheck */
.foot-actions { display: inline-flex; gap: 14px; align-items: center; }
.recheck-btn { font-size: .76rem; }
.recheck-btn:disabled { color: var(--muted); cursor: progress; }
.recheck-result { margin: 0 16px 10px; padding: 8px 12px; border-radius: 8px; font-size: .82rem; font-weight: 500;
                  background: var(--good-soft); color: var(--good); }
.recheck-result.changed { background: var(--warn-soft); color: var(--warn); }
.recheck-result.gone, .recheck-result.error { background: var(--bad-soft); color: var(--bad); }
.leg-age { font-size: .72rem; color: var(--faint); }

/* Logging bets & the Bets page */
.log-leg { grid-template-columns: 34px 36px minmax(0, 1fr) auto; }
.log-leg.is-off > :not(.log-placed) { opacity: .45; }
.log-placed { display: flex; }
.log-inputs { display: flex; gap: 8px; align-items: end; }
.log-inputs label { display: grid; gap: 2px; font-size: .72rem; }
.log-inputs input[data-odds] { width: 76px; }
.log-inputs .money-input input { width: 84px; }
.notice.bad { color: var(--bad); border-color: var(--bad); }
.check-row small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.bet-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; align-items: start; }
.betgroup .leg-money { gap: 4px; }
select.result { padding: 3px 8px; font-size: .8rem; }
select.result-won { color: var(--good); border-color: var(--good); }
select.result-lost { color: var(--bad); border-color: var(--bad); }
.small-btn { padding: 3px 9px; font-size: .76rem; }
.danger-link { color: var(--bad); font-size: .76rem; }
.betgroup .foot-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; }
@media (max-width: 520px) {
  .log-leg { grid-template-columns: 34px 36px minmax(0, 1fr); }
  .log-inputs { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Odds screen */
.seg a.btn { border: 0; background: transparent; border-radius: 7px; color: var(--muted); padding: 6px 12px; white-space: nowrap; }
.seg a.btn:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.seg a.btn.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.board-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.chips .chip { padding: 5px 11px; font-size: .8rem; font-weight: 500; border-radius: 999px; white-space: nowrap; margin: 0; }
.chips .chip:hover { color: var(--ink); text-decoration: none; }
.chips .chip.is-on { background: var(--ink); color: var(--surface); }
.board-wrap { overflow: auto; max-height: calc(100vh - 220px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.board { border-collapse: separate; border-spacing: 0; font-size: .82rem; min-width: 100%; }
.board th, .board td { padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.board thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: .72rem; font-weight: 600; color: var(--muted); text-align: center; vertical-align: bottom; }
.board thead th.b-label { text-align: left; }
.board .b-label { position: sticky; left: 0; z-index: 1; width: 210px; min-width: 210px; max-width: 210px; text-align: left; font-weight: 400; white-space: normal; border-right: 1px solid var(--line); }
.board thead .b-label { z-index: 3; }
.board .b-best { position: sticky; left: 210px; z-index: 1; min-width: 104px; }
.board .b-fair { position: sticky; left: 314px; z-index: 1; min-width: 58px; text-align: center; color: var(--muted); border-right: 2px solid var(--line-strong); }
.board thead .b-best, .board thead .b-fair { z-index: 3; }
.b-game tr:last-child > * { border-bottom: 1px solid var(--line-strong); }
.b-game tr:first-child > * { padding-top: 9px; }
.b-time { display: block; font: 500 .7rem var(--mono); color: var(--muted); margin-bottom: 2px; }
.b-team { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.b-best b { font-size: .9rem; }
.b-ev { display: block; font-size: .68rem; font-weight: 600; color: var(--good); }
.b-logos { display: flex; gap: 2px; margin-top: 2px; }
.b-logos .blogo, .b-book .blogo { width: 20px; height: 20px; border-radius: 5px; }
.b-logos .blogo .ini, .b-book .blogo .ini { font-size: .5rem; }
.b-book { min-width: 64px; }
.b-book .blogo { margin: 0 auto 3px; }
.b-name { display: block; max-width: 64px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.b-book.mine .b-name { color: var(--accent); }
.b-cell { text-align: center; font-variant-numeric: tabular-nums; }
.b-cell a { color: inherit; display: block; border-radius: 6px; }
.b-cell a:hover { text-decoration: none; background: var(--chip); }
.b-cell small { display: block; font-size: .68rem; color: var(--muted); }
.b-cell.is-best { background: var(--good-soft); }
.b-cell.is-best .mono { color: var(--good); font-weight: 700; }
.b-cell.is-offline small { color: var(--warn); }
.b-cell.is-offline .mono { color: var(--muted); }
.b-cell.is-stale { opacity: .5; }
.b-cell.is-suspect .mono { text-decoration: line-through; color: var(--faint); }
.board-legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.board-legend .key { padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line); }
.board-legend .key.is-best { background: var(--good-soft); color: var(--good); }
.board-legend .key.is-offline { color: var(--warn); }
.board-legend .key.is-stale { opacity: .5; }
.board-legend .key.is-suspect { text-decoration: line-through; }
@media (max-width: 600px) {
  .board .b-label { width: 128px; min-width: 128px; max-width: 128px; }
  .board .b-best, .board .b-fair { position: static; }
  .board .b-best { min-width: 72px; }
  .board .b-fair { border-right: 1px solid var(--line); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.period-pick select { padding: 6px 10px; font-size: .85rem; }
.stat-chips { flex-wrap: wrap; overflow: visible; margin-top: -4px; }
a.b-team { color: inherit; }
a.b-team:hover { color: var(--accent); }
.move-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.chart { margin: 0; }
.chart figcaption { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.chart svg { width: 100%; display: block; overflow: visible; }
.chart svg text { font: .68rem var(--mono); fill: var(--muted); }
.chart svg .grid { stroke: var(--line); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; }
.chart-key input { margin: 0; }
.swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

/* Player props table: one row per player */
.props-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.props-tools .search { flex: 0 1 280px; }
.board.props .b-label { width: 200px; min-width: 200px; max-width: 200px; }
.board.props .b-best { left: 200px; min-width: 132px; }
.board.props .b-fair { left: 332px; min-width: 66px; text-align: left; }
.board.props tbody tr > * { border-bottom: 1px solid var(--line); padding-top: 8px; padding-bottom: 8px; }
.board.props tbody tr:hover > * { background: var(--surface-2); }
.p-name { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.25; }
.p-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: .72rem; }
.p-team { font: 600 .66rem var(--mono); letter-spacing: .04em; color: var(--muted); background: var(--chip); padding: 1px 5px; border-radius: 4px; }
.p-line { font: 600 .74rem var(--mono); color: var(--ink); background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; }
.ou-k { display: inline-block; width: 12px; font: 600 .66rem var(--mono); color: var(--faint); }
.ou-best { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ou-best + .ou-best { margin-top: 4px; }
.ou-best b { min-width: 38px; }
.ou-best .b-logos { margin: 0; }
.ev-pill { font: 600 .64rem var(--mono); color: var(--good); background: var(--good-soft); padding: 1px 5px; border-radius: 999px; }
.board.props .b-fair div + div { margin-top: 4px; }
.board.props .b-cell { padding: 4px 6px; vertical-align: middle; }
.ou-p { display: block; font: .8rem var(--mono); color: var(--ink); padding: 2px 6px; border-radius: 5px; line-height: 1.35; }
a.ou-p:hover { background: var(--chip); text-decoration: none; }
.ou-p.is-best { background: var(--good-soft); color: var(--good); font-weight: 700; }
.ou-p.is-offline { color: var(--muted); }
.ou-p.is-stale { opacity: .5; }
.ou-p.is-suspect { text-decoration: line-through; color: var(--faint); }
.ou-line { display: block; font: 600 .62rem var(--mono); color: var(--warn); margin-bottom: 1px; }
@media (max-width: 600px) {
  .board.props .b-label { width: 140px; min-width: 140px; max-width: 140px; }
  .board.props .b-best, .board.props .b-fair { position: static; }
}

/* Prop trends */
.board.props .b-trend { position: sticky; left: 398px; z-index: 1; min-width: 150px; border-right: 2px solid var(--line-strong); }
.board.props thead .b-trend { z-index: 3; }
.board.props .b-fair { border-right: 1px solid var(--line); }
a.p-name:hover { color: var(--accent); text-decoration: none; }
.trend { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; color: var(--ink); }
.trend:hover { text-decoration: none; }
.tr-rates { grid-column: 1 / -1; display: flex; gap: 6px; }
.tr { font: 600 .74rem var(--mono); padding: 1px 4px; border-radius: 4px; background: var(--chip); }
.tr small { font-weight: 500; font-size: .6rem; color: var(--faint); margin-right: 2px; }
.tr.hot { background: var(--good-soft); color: var(--good); }
.tr.cold { background: var(--bad-soft); color: var(--bad); }
.tr-bars rect.over, .pp-chart rect.over { fill: var(--good); }
.tr-bars rect.under, .pp-chart rect.under { fill: var(--bad); opacity: .75; }
.tr-bars rect.push, .pp-chart rect.push { fill: var(--faint); }
.tr-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.tr-avg { font: .68rem var(--mono); color: var(--muted); }
.p-inj { font: 700 .62rem var(--mono); letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); }
.p-inj.severe { background: var(--bad-soft); color: var(--bad); }
.p-inj.big { font-size: .75rem; vertical-align: middle; }
.pp-head { display: flex; gap: 14px; align-items: center; }
.pp-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--chip); flex: none; }
.pp-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pp-rates .stat.hot b { color: var(--good); }
.pp-rates .stat.cold b { color: var(--bad); }
.pp-chart { margin: 0; }
.pp-chart svg { width: 100%; height: auto; max-height: 200px; display: block; overflow: visible; }
.pp-val { font: 600 9px var(--mono); fill: var(--ink); }
.pp-opp { font: 8px var(--mono); fill: var(--muted); }
@media (max-width: 600px) {
  .board.props .b-trend { position: static; }
}

/* Sign in / sign up */
.auth { max-width: 420px; width: 100%; margin: 24px auto 0; display: grid; gap: 12px; }
.auth-card h1 { margin-bottom: 4px; }
.auth-foot { text-align: center; }

/* Trends page: cards, cheatsheets, same-game trios and the ranked props list */
.game-chips { margin-top: 12px; }
.tsection { margin-top: 26px; }
.tsection-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 340px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.tscroll > * { scroll-snap-align: start; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); color: var(--ink); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
a.tcard:hover { text-decoration: none; border-color: var(--line-strong); }
.tcard-head { display: flex; gap: 10px; align-items: flex-start; }
.tcard-who { flex: 1; min-width: 0; }
.tprice { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.tprice .blogo, .trio-head .blogo { width: 24px; height: 24px; border-radius: 6px; }
.tprice .blogo .ini, .trio-head .blogo .ini, .trow-line .blogo .ini { font-size: .5rem; }
.tfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: .85rem; }
.tfacts li { display: grid; grid-template-columns: 15px 1fr auto; gap: 8px; align-items: center; }
.tfacts svg { width: 15px; height: 15px; color: var(--faint); }
.tfacts b { color: var(--ink); font-weight: 500; }
.tdots { display: flex; gap: 3px; margin-top: auto; }
.tdots i { flex: 1; height: 5px; border-radius: 3px; background: var(--bad); opacity: .3; }
.tdots i.hit { background: var(--good); opacity: 1; }
.tav { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; font: 600 .66rem var(--mono); color: var(--muted); }
.tav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--chip); }
.tav.sm { width: 28px; height: 28px; font-size: .5rem; }
.tsheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.tsheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.tsheet-head { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.tsheet-head svg { width: 16px; height: 16px; color: var(--accent); }
.tsheet ul { list-style: none; margin: 10px 0 0; padding: 0; }
.tsheet li a { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); }
.tsheet li a:hover { text-decoration: none; background: var(--surface-2); }
.tsheet-what { min-width: 0; }
.trio-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--muted); }
.trio-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.trio-legs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trio-legs li > a:first-of-type { color: var(--ink); }
.tfilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tfilters select, .tfilters input { font: inherit; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.tfilters input { flex: 1; min-width: 160px; }
.tlist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tlist > li + li { border-top: 1px solid var(--line); }
.trow { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; color: var(--ink); }
.trow:hover { text-decoration: none; background: var(--surface-2); }
.trow-what { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trow-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trow-line .blogo { width: 18px; height: 18px; border-radius: 5px; }
.trow-rate { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.trow-rate b { font-size: 1.05rem; font-weight: 600; }
.trow-rate.hot b { color: var(--good); }
.tmore { text-align: center; margin-top: 12px; }
.tfoot { margin-top: 16px; }
@media (max-width: 600px) {
  .tscroll { grid-auto-columns: 86%; }
  .trow { padding: 10px 12px; gap: 10px; }
}

/* Game trends page: prop tiles (left), matchup (middle), best prices (right) */
.game-open { margin-top: 8px; }
.gh { display: grid; gap: 6px; margin-bottom: 16px; }
.gh-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.gl { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) 280px; grid-template-areas: "tiles main side"; gap: 16px; align-items: start; }
.gl-tiles { grid-area: tiles; padding: 0; overflow: hidden; }
.gl-main { grid-area: main; min-width: 0; }
.gl-side { grid-area: side; position: sticky; top: 120px; }
.gl-head { display: grid; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.gl-sides { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.gl-note { padding: 12px 14px 0; }
.gtiles { list-style: none; margin: 0; padding: 0; }
.gtiles > li + li { border-top: 1px solid var(--line); }
.gtile { display: grid; gap: 8px; padding: 12px 14px; color: var(--ink); }
.gtile:hover { text-decoration: none; background: var(--surface-2); }
.gtile-head { display: flex; gap: 10px; align-items: flex-start; }
.gtile-who { flex: 1; min-width: 0; }
.gtile .tfacts { font-size: .8rem; gap: 3px; }
.gtrios { display: grid; gap: 12px; padding: 12px 14px 14px; }
.gtrios .tcard { box-shadow: none; }
.gteams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.gteam { display: grid; gap: 2px; align-content: start; }
.gsub { margin: 22px 0 8px; font-size: .9rem; }
.grec { width: 100%; border-collapse: collapse; font-size: .9rem; }
.grec th, .grec td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.grec thead th { text-align: left; font-weight: 600; font-size: .82rem; }
.grec thead th:last-child, .grec td:last-child { text-align: right; }
.grec th[scope="row"] { text-align: center; font-weight: 500; color: var(--muted); }
.gmeet { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.gmeet li { display: grid; grid-template-columns: 96px 1fr auto 1fr; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.gmeet li span:last-child { text-align: right; }
.gbars-title { margin: 16px 0 8px; }
.gbars { display: grid; gap: 12px; }
.gbars-teams { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .85rem; }
.gbars-teams span:last-child { color: var(--accent); text-align: right; }
.gbar { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; align-items: center; }
.gbar-label { text-align: center; color: var(--muted); font-size: .8rem; }
.gbar-track { grid-column: 1 / -1; display: flex; gap: 4px; height: 6px; }
.gbar-track i { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--ink); }
.gbar-track i + i { background: var(--accent); }
.gline { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.gline:hover { text-decoration: none; border-color: var(--line-strong); }
.gline .blogo { width: 22px; height: 22px; border-radius: 6px; }
.gline .blogo .ini { font-size: .5rem; }
.gl-side .gsub:first-of-type { margin-top: 14px; }
@media (max-width: 1100px) {
  .gl { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-template-areas: "tiles side" "tiles main"; }
  .gl-side { position: static; }
}
@media (max-width: 760px) {
  .gl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "tiles" "main"; }
  .gteams { gap: 10px; }
  .gmeet li { grid-template-columns: 1fr auto; }
  .gmeet li span:first-child { grid-column: 1 / -1; font-size: .8rem; }
  .gmeet li span:nth-child(3) { display: none; }
}
.gl-main.panel-pad, .gl-side.panel-pad { display: block; }

/* Prop workstation: props list (left), hit-rate chart and context (middle), line and prices (right) */
.ws-search { font: inherit; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); width: 100%; }
.wslist { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 230px); overflow-y: auto; }
.wslist > li + li { border-top: 1px solid var(--line); }
.wsrow { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; color: var(--ink); }
.wsrow:hover { text-decoration: none; background: var(--surface-2); }
.wsrow.is-on { background: var(--accent-soft); }
.wsrow-what { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.wsempty { padding: 14px; }
.ws .gl-main { padding: 0; }
.ws-head { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ws-head h1 { font-size: 1.3rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ws-head h1 .muted { font-weight: 500; }
.ws-head .tav { width: 52px; height: 52px; }
.ws-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ws-controls label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; }
.ws-controls select { font: inherit; font-weight: 400; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ws-body { padding: 16px 18px 20px; display: grid; gap: 14px; }
.ws-body > h2 { margin-top: 8px; }
.ws-rates { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.ws-rates > div { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; color: var(--muted); font-size: .85rem; }
.ws-rates > div > b { grid-column: 1 / 2; font-size: 1.45rem; color: var(--ink); font-weight: 600; }
.ws-rates > div:not(:last-child) > b { grid-column: 1 / 2; }
.ws-rates .badge { grid-row: 2; grid-column: 2; }
.ws-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 4px; }
.ws-key.over { background: var(--ink); }
.badge { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: .75rem; color: var(--muted); }
.ws-chart { display: grid; gap: 6px; }
.ws-plot { position: relative; height: 240px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--line-strong); background: repeating-linear-gradient(to top, transparent 0 47px, var(--line) 47px 48px); }
.ws-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.ws-val { font-size: .68rem; color: var(--muted); }
.ws-bar { display: block; width: 100%; max-width: 44px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--faint); opacity: .55; transition: height .15s; }
.ws-bar.over { background: var(--ink); opacity: 1; }
.ws-bar.push { background: var(--warn); opacity: .8; }
.ws-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 1; pointer-events: none; transition: bottom .15s; }
.ws-line span { position: absolute; right: 0; top: -20px; font-size: .7rem; background: var(--accent); color: #fff; padding: 0 5px; border-radius: 4px; }
.ws-x { display: flex; gap: 6px; }
.ws-x span { flex: 1; min-width: 0; display: grid; text-align: center; font-size: .66rem; color: var(--faint); overflow: hidden; white-space: nowrap; }
.ws-x b { color: var(--muted); font-weight: 600; }
.ws-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ws-table-title { padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ws-table table, .ws-inj table { width: 100%; border-collapse: collapse; }
.ws-table th, .ws-table td { padding: 8px 6px; text-align: center; border-right: 1px solid var(--line); }
.ws-table th:last-child, .ws-table td:last-child { border-right: 0; }
.ws-table th { font-size: .72rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.ws-table td { font: 500 1rem var(--mono); }
.ws-table td span { display: block; font-size: .72rem; }
.ws-inj-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.ws-inj table { font-size: .85rem; }
.ws-inj th { text-align: left; font-size: .72rem; color: var(--muted); font-weight: 600; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.ws-inj td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.ws-adjust { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; margin-top: 8px; }
.ws-adjust input { font: 500 1rem var(--mono); text-align: center; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; }
.ws-books { margin-top: 8px; }
.ws-books summary { cursor: pointer; color: var(--accent); margin-bottom: 6px; }
@media (max-width: 760px) {
  .ws { grid-template-areas: "main" "side" "tiles"; }
  .wslist { max-height: 60vh; }
  .ws-plot { height: 190px; gap: 3px; }
  .ws-x { gap: 3px; }
  .ws-val { font-size: .58rem; }
  .ws-x span { font-size: .56rem; }
  .ws-inj td:nth-child(2), .ws-inj th:nth-child(2) { display: none; }
}
.ws-page-head { margin-bottom: 10px; }
.ws-page-head + .tabs { margin-bottom: 16px; }
.ws-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ws-filters select { font: inherit; font-size: .82rem; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; }
.ws-filters select:first-of-type { grid-column: 1 / -1; }
.tsection-link { margin-left: auto; }
.tgames { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tgame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.tgame-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--ink); font-size: 1rem; }
.tgame-top { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; color: var(--ink); padding: 8px; border-radius: 8px; background: var(--surface-2); font-size: .85rem; }
.tgame-top > span { display: flex; flex-direction: column; }
.tgame-top:hover, .tgame-head:hover { text-decoration: none; }
.tgame-links { display: flex; gap: 14px; }

.gl-stack { display: grid; gap: 16px; align-content: start; }
.gl-stack > .panel-pad { display: block; }

/* Weather */
.wx-pill { gap: 5px; font: 600 .68rem var(--mono); vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.wx-pill:hover { text-decoration: none; color: var(--ink); }
.wx-pill .wx-t { color: var(--ink); }
.wx-pill .wx-roof { font-weight: 500; opacity: .8; }
.b-time .wx-pill { margin-left: 2px; }
.eyebrow .wx-pill { margin-left: 4px; }
.wx-panel { scroll-margin-top: 80px; }
.wx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.wx-table td { vertical-align: top; }
.wx-table .b-time { margin-bottom: 1px; }

/* League landing pages */
.lg-links { margin: 10px 0 0; }
.lg-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-top: 12px; }
.lg-game { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.lg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink); }
.lg-teams { display: grid; gap: 2px; color: var(--ink); font-size: .95rem; }
.lg-head:hover, .lg-teams:hover, .sp-card:hover { text-decoration: none; }
.lg-lines { width: 100%; border-collapse: collapse; font-size: .8rem; }
.lg-lines th, .lg-lines td { padding: 5px 4px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.lg-lines thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: .7rem; }
.lg-lines tbody th { font-weight: 600; }
.lg-lines td .blogo { display: inline-grid; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-left: 3px; }
.lg-lines td .blogo .ini { font-size: .42rem; }
.lg-open { justify-self: end; }
.lg-standings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.lg-stand-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lg-stand-title { padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 600; }
.lg-stand { width: 100%; border-collapse: collapse; font-size: .85rem; }
.lg-stand th, .lg-stand td { padding: 6px 12px; text-align: left; }
.lg-stand tbody tr + tr td { border-top: 1px solid var(--line); }
.lg-stand thead th { font-size: .72rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.sp-card { color: var(--ink); }

/* Public header/footer */
.btn.signin { margin-left: auto; }
.sitefoot { border-top: 1px solid var(--line); margin-top: 40px; background: var(--surface); }
.sitefoot-inner { max-width: 1320px; margin: 0 auto; padding: 18px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: .8rem; color: var(--muted); }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sitefoot a { color: var(--muted); }

/* Research: homepage and cards */
.rh { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
.rh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 20px; flex-wrap: wrap; }
.rh-head h1 { font-size: 1.9rem; }
.rh-tools { color: var(--muted); }
.rh-filters { display: grid; gap: 8px; }
.rh-h2 { font-size: 1.1rem; margin-bottom: 10px; }
.rh-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.rh-top:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.rh-today { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.rh-today h2 { font-size: 1rem; margin-bottom: 8px; }
.rh-today ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rh-today li { display: grid; gap: 2px; }
.rh-today li + li { border-top: 1px solid var(--line); padding-top: 10px; }
.rh-today a { color: var(--ink); font-weight: 600; }
.rh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.rh-pages { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.rcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.rcard-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--chip); }
.rcard-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.rcard-title { font-size: 1.02rem; line-height: 1.3; }
.rcard.big .rcard-title { font-size: 1.4rem; }
.rcard-title a { color: var(--ink); }
.rcard-excerpt { color: var(--muted); font-size: .9rem; }
.rlabels { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.rlabels span { font: 600 .68rem var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.rlabels span.topic, .rlabels span.kind { color: var(--muted); background: var(--chip); }
.rmeta { color: var(--faint); font-size: .78rem; }

/* Research: article */
.ra { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; font-size: 1.02rem; line-height: 1.65; }
.ra-banner { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.ra-crumbs { color: var(--muted); }
.ra-head { display: grid; gap: 8px; }
.ra-head h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); line-height: 1.15; letter-spacing: -.015em; }
.ra-sub { font-size: 1.15rem; color: var(--muted); line-height: 1.45; }
.ra-byline { font-weight: 500; }
.ra-hero { margin: 0; }
.ra-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.ra-hero figcaption { margin-top: 6px; }
.ra-matchup { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 26px 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--ink), #2a3a52); color: #fff; font: 700 clamp(1.1rem, 3.5vw, 1.6rem) var(--sans); text-align: center; }
.ra-matchup b { opacity: .6; font-weight: 500; }
.ra-matchup small { flex-basis: 100%; font: 500 .85rem var(--mono); opacity: .8; }
.ra-body > * + * { margin-top: 1em; }
.ra-body h2 { font-size: 1.3rem; margin-top: 1.4em; }
.ra-body h3 { font-size: 1.1rem; margin-top: 1.2em; }
.ra-body ul, .ra-body ol { padding-left: 1.3em; }
.ra-body blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.ra-body img { max-width: 100%; height: auto; border-radius: 8px; }
.ra-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ra-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ra-table th, .ra-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ra-table thead th { font-size: .74rem; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.ra-table tr:last-child td { border-bottom: 0; }
.ra-glance h2, .ra-pick h2, .ra-section h2, .ra-related h2 { font-size: 1.3rem; margin-bottom: 10px; }
.ra-glance { display: grid; gap: 8px; }
.ra-glance h2 { margin-bottom: 2px; }
tr.is-withdrawn td { text-decoration: line-through; color: var(--faint); }
.ra-event { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: .92rem; line-height: 1.5; }
.ra-event h2 { font-size: 1rem; margin-bottom: 8px; }
.ra-event dl { margin: 0; display: grid; gap: 8px; }
.ra-event dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.ra-event dt { color: var(--muted); font-weight: 600; font-size: .8rem; }
.ra-event dd { margin: 0; }
.ra-inj { margin: 0 0 4px; padding-left: 1.1em; }
.ra-pick { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 12px; }
.ra-pick.is-withdrawn h2 { text-decoration: line-through; color: var(--faint); }
.ra-orig { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: .92rem; }
.ra-note { padding: 8px 12px; border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: .9rem; }
.ra-risks h3, .ra-live h3 { font-size: .95rem; margin-bottom: 6px; }
.ra-live { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: .9rem; line-height: 1.5; }
.ra-prices { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.ra-prices li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.ra-prices li.best { background: var(--good-soft); }
.ra-prices li.stale { opacity: .55; }
.ra-prices .blogo { width: 22px; height: 22px; border-radius: 6px; }
.ra-prices .blogo .ini { font-size: .5rem; }
.ra-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.ra-sources { padding-left: 1.2em; font-size: .92rem; }
.ra-corr { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .92rem; }
.ra-corr time { display: block; color: var(--muted); font-size: .8rem; }
.ra-foot { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 14px; }
.ra-author { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.ra-author img { border-radius: 50%; object-fit: cover; flex: none; }
.ra-author.big h1 { font-size: 1.7rem; }
.ra-disclose p + p { margin-top: 6px; }
.ra-tools { color: var(--muted); }
@media (max-width: 760px) {
  .rh-top { grid-template-columns: minmax(0, 1fr); }
  .ra { font-size: 1rem; }
  .ra-event dl > div { grid-template-columns: 1fr; gap: 2px; }
}
.ra-more summary { cursor: pointer; color: var(--accent); margin: 2px 0 6px; }
@media (max-width: 560px) { .ra-table th, .ra-table td { white-space: normal; padding: 7px 8px; } }