/* Layout: dark scoreboard sidebar on the left; pages scroll on the right, summary first, detail below. */
/* Layout: locker-room steel sidebar with a kickoff clock; scoreboard-black LED boards carry the key numbers; steel panels hold detail. */
@font-face { font-family: "DSEG7"; src: url("fonts/DSEG7Classic-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "DSEG7"; src: url("fonts/DSEG7Classic-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
:root {
  --bg: #07090C;            /* locker room floor */
  --surface: #12171D;       /* steel panel */
  --surface-hi: #18202A;
  --ink: #E4E8EE; --muted: #8592A4; --line: #222B36; --soft: #1B232D;
  --accent: #FFB21E; --accent-soft: #2B200A;            /* amber LED */
  --board: #030405; --board-2: #10161E; --board-ink: #E9EDF2; --board-muted: #7D8899; --glow: #FFB21E;
  --win: #36E07A; --win-soft: #0E2618; --loss: #FF4D3D; --loss-soft: #2C110E; --push: #8592A4; --push-soft: #1A212A;
  --led-ghost: rgba(255, 178, 30, 0.07);
  --f-display: "Saira Condensed", "Arial Narrow", "Bahnschrift Condensed", sans-serif;
  --f-stencil: "Saira Stencil One", "Saira Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Share Tech Mono", Consolas, ui-monospace, monospace;
  --f-led: "DSEG7", "Share Tech Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: radial-gradient(1200px 600px at 70% -10%, #121A24 0%, transparent 60%), var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14.5px; line-height: 1.45; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--win); } .neg { color: var(--loss); } .zero { color: var(--muted); }
.muted { color: var(--muted); }
h2, h3 { text-wrap: balance; }

.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; }
.side { background: var(--board); color: var(--board-ink); display: flex; flex-direction: column; padding: 18px 12px; gap: 18px; overflow-y: auto; }
.brand { display: grid; gap: 2px; padding: 0 8px; }
.logo { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.logo b { color: var(--glow); }
.brand .tag { color: var(--board-muted); font-size: 12px; }
nav { display: grid; gap: 2px; }
nav button { text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; color: var(--board-muted); font-weight: 500; }
nav button:hover { color: var(--board-ink); background: var(--board-2); }
nav button[aria-current="page"] { color: var(--board-ink); background: var(--board-2); box-shadow: inset 3px 0 0 var(--glow); }
.data-status { margin-top: auto; font-size: 12px; color: var(--board-muted); padding: 10px; border-top: 1px solid var(--board-2); display: grid; gap: 8px; }
.data-status b { color: var(--board-ink); font-weight: 500; }
.data-status button { background: var(--board-2); border: 1px solid #2B3B5C; color: var(--board-ink); border-radius: 7px; padding: 6px 10px; }

.main { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.topbar h1 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; }
.quick { display: flex; gap: 6px; align-items: center; flex: 1 1 360px; max-width: 560px; }
.quick input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.iconbtn { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--muted); font-size: 13px; }
.iconbtn:hover { border-color: var(--accent); color: var(--ink); }
#page { flex: 1; overflow-y: auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
#page > * { flex-shrink: 0; }

.btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 14px; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--glow); border-color: var(--glow); color: #1A1406; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.05); border-color: var(--glow); }
.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn-danger { border-color: var(--loss); color: var(--loss); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; max-width: 420px; box-shadow: 0 6px 24px rgba(0,0,0,0.25); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.card h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card h2 small { font-family: var(--f-body); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.card h2 .right { margin-left: auto; }
.row2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.field { display: grid; gap: 4px; min-width: 0; }
.field > span, .lab { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
select, .input, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 0; max-width: 100%; }
textarea { resize: vertical; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 7px 12px; border-right: 1px solid var(--line); color: var(--muted); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--muted); }
.chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.banner { border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.banner.info { background: var(--accent-soft); border: 1px solid var(--accent); }
.banner.warn { background: var(--loss-soft); border: 1px solid var(--loss); }

/* Scoreboard */
.score { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--board); color: var(--board-ink); border-radius: 12px; overflow: hidden; }
.cell { padding: 14px 16px; border-right: 1px solid var(--board-2); min-width: 0; }
.cell:last-child { border-right: 0; }
.cell .lab { color: var(--board-muted); }
.cell .val { font-family: var(--f-display); font-weight: 600; font-size: 34px; line-height: 1.1; color: var(--glow); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .val.pos { color: #5FD08F; } .cell .val.neg { color: #FF7E73; } .cell .val.zero { color: var(--board-ink); }
.cell .sub { font-size: 12px; color: var(--board-muted); }
.dots { display: flex; gap: 4px; margin-top: 10px; }
.dot { width: 12px; height: 12px; border-radius: 3px; background: rgba(255,255,255,0.12); }
.dot.W { background: #5FD08F; } .dot.L { background: #FF7E73; } .dot.P { background: #9AA7BD; }
@media (max-width: 1100px) { .score { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cell:nth-child(3) { border-right: 0; } .cell:nth-child(-n+3) { border-bottom: 1px solid var(--board-2); } }

.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ins { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; background: var(--bg); align-content: start; }
.ins .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ins .t { font-weight: 600; }
.ins .v { font-family: var(--f-display); font-size: 24px; font-weight: 600; line-height: 1.1; }
.ins .d { font-size: 13px; color: var(--muted); }

.chart svg { display: block; width: 100%; height: auto; }
.chart text { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }

.split { display: grid; gap: 7px; }
.srow { display: grid; grid-template-columns: minmax(0, 1.3fr) 90px minmax(80px, 1.6fr) 70px 60px; gap: 10px; align-items: center; }
.srow .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .rec, .srow .roi { color: var(--muted); font-size: 12px; font-family: var(--f-mono); text-align: right; }
.srow .u { text-align: right; font-family: var(--f-mono); font-size: 13px; }
.srow.head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.bar { position: relative; height: 10px; background: var(--soft); border-radius: 3px; }
.bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.bar i.p { left: 50%; background: var(--win); } .bar i.n { right: 50%; background: var(--loss); }

.kv { display: grid; gap: 0; }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.kv > div:first-child { border-top: 0; }
.kv .r { font-family: var(--f-mono); font-size: 12px; color: var(--muted); text-align: right; }
.kv .u { font-family: var(--f-mono); text-align: right; min-width: 70px; }
.kv .hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: -2px; }

/* Bets list */
.betlist { display: grid; }
.bet { border-top: 1px solid var(--line); }
.bet:first-child { border-top: 0; }
.bet-main { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto auto 92px; gap: 14px; padding: 11px 4px; align-items: center; cursor: pointer; }
.bet-main:hover { background: var(--bg); }
.bet .date { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.bet .pick { font-weight: 600; overflow-wrap: anywhere; }
.meta { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px; }
.pl { font-family: var(--f-mono); font-weight: 500; text-align: right; }
.pill { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.W { background: var(--win-soft); color: var(--win); } .pill.L { background: var(--loss-soft); color: var(--loss); }
.pill.P { background: var(--push-soft); color: var(--push); } .pill.O { background: var(--accent-soft); color: var(--accent); }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.good { border-color: var(--win); color: var(--win); } .badge.bad { border-color: var(--loss); color: var(--loss); }
.stars { color: var(--accent); letter-spacing: 1px; }
.bet-detail { padding: 4px 4px 14px 76px; display: grid; gap: 10px; }
.legs { display: grid; gap: 6px; }
.leg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions select { padding: 4px 8px; font-size: 13px; }
.actions .input { width: 90px; padding: 4px 8px; font-size: 13px; }
.note { font-size: 13px; color: var(--muted); white-space: pre-wrap; }

/* Prop trends */
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; min-width: 0; align-content: start; }
.thead { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.thead b { font-size: 15px; }
.tsub { display: block; font-size: 12px; color: var(--muted); }
.side-tag { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.08em; font-size: 14px; padding: 2px 10px; border-radius: 6px; }
.side-tag.over { background: var(--win-soft); color: var(--win); } .side-tag.under { background: var(--accent-soft); color: var(--accent); }
.tline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tline .big { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; }
.tline .streak { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.bars { position: relative; height: 78px; display: flex; gap: 4px; align-items: flex-end; padding-top: 14px; }
.bars .b { flex: 1; position: relative; border-radius: 3px 3px 0 0; min-width: 0; }
.bars .b.hit { background: var(--win); } .bars .b.miss { background: var(--loss); opacity: 0.75; } .bars .b.push { background: var(--push); }
.bars .b span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.bars .ln { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ink); opacity: 0.55; pointer-events: none; }
.opps { display: flex; gap: 4px; }
.opps span { flex: 1; text-align: center; font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); min-width: 0; overflow: hidden; }
.tfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tfoot .input { width: 84px; padding: 4px 8px; }
.ai-out { background: var(--bg); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.ai-out p { margin: 0 0 8px; } .ai-out p:last-child { margin: 0; } .ai-out ul { margin: 0 0 8px; padding-left: 18px; }
.ai-out .by { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* Lookup */
.suggest { position: relative; }
.suggest-list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; max-height: 300px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.suggest-list button { display: flex; width: 100%; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 8px 12px; text-align: left; }
.suggest-list button:hover, .suggest-list button:focus { background: var(--bg); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.tile .v { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.1; }
.tile .s { font-size: 12px; color: var(--muted); }
table.log { width: 100%; border-collapse: collapse; font-size: 13px; }
table.log th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.log td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.log td.hit { color: var(--win); font-weight: 600; } table.log td.miss { color: var(--loss); }
.tablewrap { overflow-x: auto; }

/* Chat */
.chat { display: grid; gap: 12px; }
.msg { max-width: 760px; padding: 10px 14px; border-radius: 12px; line-height: 1.55; }
.msg.user { justify-self: end; background: var(--ink); color: var(--bg); }
.msg.ai { background: var(--surface); border: 1px solid var(--line); }
.msg.ai p { margin: 0 0 8px; } .msg.ai p:last-child { margin: 0; } .msg.ai ul { margin: 0 0 8px; padding-left: 18px; }
.chatbox { display: flex; gap: 8px; }
.chatbox textarea { flex: 1; min-height: 44px; }

/* Dialogs */
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--surface); color: var(--ink); width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 40px); }
dialog::backdrop { background: rgba(8, 12, 22, 0.6); }
.dlg { padding: 20px; display: grid; gap: 14px; }
.dlg h3 { margin: 0; font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 22px; }
.fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fgrid .s2 { grid-column: span 2; } .fgrid .s4 { grid-column: 1 / -1; }
.fgrid .input, .fgrid select, .fgrid textarea { width: 100%; }
@media (max-width: 700px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; background: var(--bg); }
.formerr { color: var(--loss); font-size: 13px; min-height: 1em; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; align-items: center; }
.dlg-actions .left { margin-right: auto; color: var(--muted); font-size: 13px; }
.starpick { display: inline-flex; gap: 2px; }
.starpick button { background: none; border: 0; font-size: 20px; padding: 0 2px; color: var(--line); line-height: 1; }
.starpick button.on { color: var(--accent); }
.check { display: inline-flex; gap: 6px; align-items: center; }
canvas.slip { width: 100%; max-width: 420px; border-radius: 12px; border: 1px solid var(--line); justify-self: center; }
.empty { color: var(--muted); display: grid; gap: 10px; justify-items: start; padding: 6px 0; }
.empty strong { color: var(--ink); font-size: 15px; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.foot { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .side { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 12px; }
  nav { display: flex; } .data-status { display: none; }
  .bet-main { grid-template-columns: 52px minmax(0, 1fr) auto; } .bet-main .clvcol, .bet-main .stcol { display: none; }
  .bet-detail { padding-left: 4px; }
}

/* ===== Locker room skin ===== */
.side { background: linear-gradient(180deg, #151B23 0%, #0C1015 100%); border-right: 1px solid #1E2630; position: relative; }
.side::before { content: ""; position: absolute; left: 14px; right: 14px; top: 74px; height: 22px; background: repeating-linear-gradient(180deg, #05070A 0 3px, transparent 3px 6px); opacity: 0.85; border-radius: 3px; pointer-events: none; }
.brand { padding-bottom: 30px; }
.logo { font-family: var(--f-stencil); font-weight: 400; font-size: 25px; letter-spacing: 0.02em; color: #D9DEE5; white-space: nowrap; }
.logo b { color: var(--glow); text-shadow: 0 0 10px rgba(255, 178, 30, 0.6); }
nav button { font-family: var(--f-display); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
nav button[aria-current="page"] { background: #0A0D11; box-shadow: inset 3px 0 0 var(--glow), inset 0 0 0 1px #1E2630; }
.topbar { background: linear-gradient(180deg, #11161C, #0C1015); border-bottom: 1px solid #1E2630; }
.topbar h1 { font-family: var(--f-stencil); font-weight: 400; letter-spacing: 0.05em; color: #D9DEE5; }
.card, .tcard { background: linear-gradient(180deg, var(--surface-hi) 0%, var(--surface) 38%); border-color: #232C37; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(0,0,0,0.6); position: relative; }
.card::after, .tcard::after { content: ""; position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4A5562, #1A2028); box-shadow: 0 0 0 1px #0A0D11; pointer-events: none; }
.card h2 { font-family: var(--f-display); color: #CFD5DD; }
.card h2 .right { padding-right: 10px; }
select, .input, textarea, .quick input { background: #0A0D11; border-color: #26303C; }
.btn { background: #161D26; border-color: #2A3542; }
.btn:hover { border-color: var(--glow); }
.btn-primary { background: var(--glow); border-color: var(--glow); color: #1A1204; box-shadow: 0 0 14px rgba(255, 178, 30, 0.25); font-family: var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 15px; }
.seg { background: #0A0D11; border-color: #26303C; }
.seg button { border-right-color: #26303C; }
.seg button[aria-pressed="true"] { background: var(--glow); color: #1A1204; }
.chips button { background: #0A0D11; border-color: #26303C; }
.chips button[aria-pressed="true"] { background: var(--glow); border-color: var(--glow); color: #1A1204; }
.toast { background: #0A0D11; color: var(--ink); border: 1px solid var(--glow); }
dialog { background: linear-gradient(180deg, #18202A, #12171D 30%); border-color: #2A3542; }
.box, .ins, .tile, .leg, .ai-out { background: #0B0F14; border-color: #222B36; }
.msg.user { background: #2B200A; color: var(--ink); border: 1px solid #5A4212; }
.msg.ai { background: var(--surface); }

/* LED numbers: seven-segment digits over faint "unlit" segments */
.led { font-family: var(--f-led); font-weight: 700; font-style: normal; color: var(--glow); text-shadow: 0 0 6px rgba(255, 178, 30, 0.55), 0 0 18px rgba(255, 178, 30, 0.18); position: relative; display: inline-block; letter-spacing: 0.02em; font-variant-numeric: normal; white-space: nowrap; }
.led::before { content: attr(data-ghost); position: absolute; inset: 0; color: var(--led-ghost); text-shadow: none; z-index: 0; }
.led { z-index: 0; }
.led.pos { color: var(--win); text-shadow: 0 0 6px rgba(54, 224, 122, 0.55), 0 0 18px rgba(54, 224, 122, 0.18); }
.led.neg { color: var(--loss); text-shadow: 0 0 6px rgba(255, 77, 61, 0.55), 0 0 18px rgba(255, 77, 61, 0.18); }
.led.zero { color: #9AA5B5; text-shadow: none; }
.led.pos::before { color: rgba(54, 224, 122, 0.07); } .led.neg::before { color: rgba(255, 77, 61, 0.07); } .led.zero::before { color: rgba(154, 165, 181, 0.06); }

.score { background: var(--board); border: 1px solid #1A2129; box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 0 4px #0B0E12, 0 0 0 5px #1E2630; }
.cell { border-right-color: #12181F; }
.cell .lab { font-family: var(--f-mono); letter-spacing: 0.14em; }
.cell .val { font-family: var(--f-led); font-size: 30px; line-height: 1.25; overflow: visible; }
.cell .sub { font-family: var(--f-body); }
.dot { border-radius: 2px; background: #10151B; box-shadow: inset 0 0 0 1px #1A2129; }
.dot.W { background: var(--win); box-shadow: 0 0 8px rgba(54, 224, 122, 0.6); } .dot.L { background: var(--loss); box-shadow: 0 0 8px rgba(255, 77, 61, 0.6); } .dot.P { background: #8592A4; }
.ins .v { font-size: 22px; line-height: 1.35; }
.tile .v { font-size: 24px; line-height: 1.35; }
.tline .big { font-size: 28px; }
.tline .streak { font-family: var(--f-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tline .streak .led { font-size: 22px; margin-right: 4px; }
.meta, .srow .rec, .srow .roi, .srow .u, .kv .r, .kv .u, .pl, .bet .date, table.log td, .opps span { font-family: var(--f-mono); }
.ledinput { font-family: var(--f-led); font-size: 20px; color: var(--glow); width: 100%; max-width: 150px; background: #050608; }
.fdline { font-family: var(--f-mono); font-size: 13px; color: #6FB7FF; border: 1px solid #1B3A5C; background: #08121D; border-radius: 6px; padding: 3px 8px; justify-self: start; }

/* Kickoff clock */
.kickoff { display: grid; gap: 4px; padding: 12px; background: var(--board); border: 1px solid #1A2129; border-radius: 10px; box-shadow: inset 0 0 24px rgba(0,0,0,0.9); font-size: 12px; color: var(--board-muted); margin-top: auto; }
.kickoff:empty { display: none; }
.kickoff .clock .led { font-size: 22px; }
.kickoff + .data-status { margin-top: 0; }

/* Parlay lab legs */
.lableg { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; background: #0B0F14; border: 1px solid #222B36; border-radius: 10px; }
.lableg.weak { border-color: var(--loss); box-shadow: inset 3px 0 0 var(--loss); }
.lableg .lrate .led { font-size: 24px; }
.lableg .actions .input { width: 86px; }
@media (max-width: 820px) { .lableg { grid-template-columns: 70px minmax(0, 1fr); } .lableg .actions { grid-column: 1 / -1; } .kickoff { display: none; } }
.flags { display: grid; gap: 5px; }
.flag { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; padding: 5px 8px; border-radius: 6px; background: #0A0D11; border: 1px solid #222B36; }
.flag b { font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; }
.flag.high { border-color: var(--loss); background: var(--loss-soft); } .flag.high b { color: var(--loss); }
.flag.medium { border-color: #6B4E12; background: #1E1708; } .flag.medium b { color: var(--glow); }
.flag.info b { color: var(--muted); }
.projline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; padding: 8px 10px; background: #0B0F14; border: 1px solid #222B36; border-radius: 8px; }
.projline b { font-family: var(--f-mono); font-weight: 400; color: var(--ink); font-size: 15px; }
.projline .combo { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); }
.projline .combo .led { font-size: 18px; }
.dropzone { display: grid; gap: 4px; place-items: center; text-align: center; padding: 28px 16px; border: 2px dashed #2F3B4A; border-radius: 12px; background: #090C10; cursor: pointer; color: var(--muted); }
.dropzone b { color: var(--ink); font-family: var(--f-display); font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; }
.dropzone:hover, .dropzone.over { border-color: var(--glow); color: var(--ink); }
.lableg.dim { opacity: 0.72; }
.lableg .lrate { text-align: center; }
.link:disabled { color: var(--muted); text-decoration: none; cursor: not-allowed; }
.row2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .row2.even { grid-template-columns: minmax(0, 1fr); } }
table.mu td { padding: 5px 8px; }
table.mu tr.grp td { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow); padding-top: 14px; border-bottom-color: #2A3542; }
.rk { font-size: 10.5px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.rk.good { color: var(--win); } .rk.bad { color: var(--loss); }
.srow.tbl { grid-template-columns: 90px minmax(0, 1fr) 80px; }
.srow.hl .lbl { color: var(--glow); font-weight: 600; }
.bar.flat::after { display: none; }
.bar.flat i.p, .bar.flat i.n { left: 0; right: auto; }

.btn.fd { border-color: #1493ff; color: #4fb3ff; }
.btn.fd:hover { background: #0f2a44; }

/* ---------- view-only link (friends) ---------- */
body.viewer [data-act="ai-test"],
body.viewer [data-act="ask"],
body.viewer [data-act="bstatus"],
body.viewer [data-act="chat-clear"],
body.viewer [data-act="clear-key"],
body.viewer [data-act="clear-odds"],
body.viewer [data-act="del"],
body.viewer [data-act="edit"],
body.viewer [data-act="export"],
body.viewer [data-act="folder"],
body.viewer [data-act="lab-ai"],
body.viewer [data-act="lab-fd"],
body.viewer [data-act="lab-log"],
body.viewer [data-act="lab-check"],
body.viewer [data-act="lab-from"],
body.viewer [data-act="lc-clear"],
body.viewer [data-act="lc-fd"],
body.viewer [data-act="lc-fd-load"],
body.viewer [data-act="lc-log"],
body.viewer [data-act="lc-rm"],
body.viewer [data-act="leg-result"],
body.viewer [data-act="lk-ai"],
body.viewer [data-act="lk-fd"],
body.viewer [data-act="lk-log"],
body.viewer [data-act="model-tune"],
body.viewer [data-act="paper-lock"],
body.viewer [data-act="parsed-edit"],
body.viewer [data-act="parsed-save"],
body.viewer [data-act="refresh"],
body.viewer [data-act="result"],
body.viewer [data-act="review"],
body.viewer [data-act="save-claude"],
body.viewer [data-act="save-fd"],
body.viewer [data-act="save-money"],
body.viewer [data-act="save-ollama"],
body.viewer [data-act="save-slip"],
body.viewer [data-act="copy-slip"],
body.viewer [data-act="share"],
body.viewer [data-act="t-ai"],
body.viewer [data-act="t-fd"],
body.viewer [data-act="t-log"],
body.viewer [data-act="hedge-bet"],
body.viewer [data-act="bt-season"],
body.viewer #quickForm, body.viewer #logBtn, body.viewer .owner-only, body.viewer #labSlip, body.viewer #labFromBet,
body.viewer #nav [data-page="settings"], body.viewer #nav [data-page="analyst"],
body.viewer:not(.shared-bets) #nav [data-page="dashboard"], body.viewer:not(.shared-bets) #nav [data-page="bets"] { display: none !important; }
body.viewer .brand .tag { color: var(--accent); }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  html, body { height: auto; }
  .shell { display: block; height: auto; }
  .side { position: sticky; top: 0; z-index: 20; display: block; padding: 10px 0 0; overflow: visible; border-right: 0; border-bottom: 1px solid #1E2630; }
  .side::before, .kickoff, .data-status { display: none; }
  .brand { padding: 0 16px 8px; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
  .logo { font-size: 22px; }
  #nav { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #nav::-webkit-scrollbar { display: none; }
  #nav button { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; white-space: nowrap; border-radius: 999px; margin: 0; }
  .main { height: auto; display: block; }
  #page { overflow: visible; padding: 12px 16px 40px; gap: 12px; }
  .topbar { padding: 10px 16px; gap: 8px; }
  .topbar h1 { font-size: 20px; }
  .topbar .quick { display: none; }
  #logBtn { padding: 7px 12px; font-size: 13px; }
  .card { padding: 14px; }
  .card h2 { font-size: 17px; }
  .card h2 small { flex-basis: 100%; }
  .card h2 .right { margin-left: 0; padding-right: 0; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .score { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .score .cell { border-right: 0 !important; border-bottom: 1px solid var(--board-2); min-width: 0; }
  .score .cell .val .led { font-size: 26px; }
  .score .cell .sub { overflow-wrap: anywhere; }
  .lableg { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .lableg .lrate .led { font-size: 19px; }
  .lableg .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .lableg .meta { font-size: 12px; overflow-wrap: anywhere; }
  .filters { gap: 8px; }
  .filters .seg { flex-wrap: wrap; }
  #lcQ, #tpOdds { width: 100% !important; }
  .kv > div { flex-wrap: wrap; }
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  dialog { width: calc(100vw - 24px); max-width: none; }
  .btn.fd { order: -1; }
}

/* ---------- tap-to-add lines and the bet slip ---------- */
.lcline { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 36px; gap: 12px; align-items: center; padding: 10px 12px; background: #0B0F14;
  border: 1px solid #222B36; border-radius: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.lcline:hover { border-color: #3A4656; }
.lcline.dim { opacity: 0.78; }
.lcline.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: #14120A; opacity: 1; }
.lcline .lrate { text-align: center; } .lcline .lrate .led { font-size: 22px; }
.lcline .pick { font-weight: 600; }
.lcline .meta { font-size: 12.5px; color: var(--muted); }
.lc-tick { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3A4656; display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.lcline.on .lc-tick { background: var(--accent); border-color: var(--accent); color: #1A1204; }
.lc-info { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #2A3542; background: transparent; color: var(--muted); font-style: italic; font-family: Georgia, serif; }
.lc-info:hover { border-color: var(--accent); color: var(--ink); }
.warnchip { color: var(--accent); }
.badge.fdb { border-color: #1493ff; color: #4fb3ff; }
.ld-opt { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #222B36; border-radius: 10px; margin-bottom: 8px; }
.ld-opt.on { border-color: var(--accent); }
.ld-opt .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#lineDlg .dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
#lineDlg .dlg-head h2 { margin: 0; font-family: var(--f-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; }
#lineDlg .dlg-body { padding: 14px 16px 18px; }
body.viewer #lineDlg .owner-only { display: none !important; }
.labpay { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid #222B36; border-radius: 10px; background: #0B0F14; }
.slipbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #0F141B; border-top: 2px solid var(--accent); box-shadow: 0 -8px 24px rgba(0,0,0,0.5); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.slipbar[hidden] { display: none; }
body.has-slip #page { padding-bottom: 120px; }
.sb-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.sb-count { background: none; border: 1px solid #2A3542; border-radius: 999px; color: var(--ink); padding: 6px 12px; }
.sb-count b { color: var(--accent); }
.sb-price .led { font-family: "DSEG7", var(--f-display); color: var(--accent); font-size: 18px; margin-left: 4px; }
.sb-stake input { width: 70px; margin-left: 4px; }
.sb-pay b { color: var(--win); }
.sb-btns { margin-left: auto; display: flex; gap: 8px; }
.sb-legs { max-width: 1200px; margin: 10px auto 0; max-height: 42vh; overflow-y: auto; }
.sb-leg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid #1B232D; align-items: center; }
.sb-leg .r { font-variant-numeric: tabular-nums; }
.sb-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .lcline { grid-template-columns: 58px minmax(0, 1fr) 30px; gap: 8px; padding: 10px; }
  .lcline .lc-info { display: none; }
  .lcline .lrate .led { font-size: 17px; }
  .sb-head { gap: 8px 10px; }
  .sb-btns { margin-left: 0; width: 100%; }
  .sb-btns .btn { flex: 1; padding: 9px; }
  .toast { bottom: 130px; }
}

/* ---------- headshots, logos, Hail Mary, slip check ---------- */
.av { position: relative; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #1B232D; border: 1px solid #2A3542; overflow: visible; vertical-align: middle; margin-right: 10px; }
.av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }
.av-img.logo { object-fit: contain; padding: 4px; }
.av-badge { position: absolute; right: -4px; bottom: -4px; width: 45%; height: 45%; border-radius: 50%; background: #0B0F14; border: 1px solid #2A3542; object-fit: contain; padding: 1px; }
.glogos { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; vertical-align: middle; }
.glogos i { font-style: normal; color: var(--muted); font-size: 11px; }
.lcline .pick { display: flex; align-items: center; }
.withav { display: flex; align-items: center; gap: 4px; }
.hm-legs { margin-top: 8px; }
.hm-leg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #1B232D; }
.hm-leg .r { font-variant-numeric: tabular-nums; } .hm-leg .u { color: var(--muted); }
.hailmary h2 { color: var(--accent); }
.sc-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; background: var(--board); border: 1px solid #1A2129; border-radius: 12px; padding: 12px; }
.sc-sum .lab { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--board-muted); margin-bottom: 4px; }
.sc-sum .led { font-size: 24px; }
.sc-h { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; margin: 6px 0 8px; }
.sc-legs { list-style: none; margin: 0; padding: 0; counter-reset: leg; }
.sc-legs li { display: flex; gap: 6px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #1B232D; counter-increment: leg; }
.sc-legs li::before { content: counter(leg); font-family: "DSEG7", var(--f-display); color: var(--accent); width: 22px; padding-top: 8px; }
.sc-leg { flex: 1; min-width: 0; }
.sc-bar { position: relative; height: 16px; background: #141A21; border-radius: 4px; margin: 6px 0 4px; overflow: hidden; }
.sc-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #1f7a46, #2bd46b); }
.sc-bar span { position: relative; font-size: 11px; padding-left: 6px; line-height: 16px; color: #fff; }
.box.good { border-color: #1f5a37; } .box.bad { border-color: #6a2a2a; }
.box ul { margin: 6px 0 0; padding-left: 18px; } .box li { margin: 4px 0; }
@media (max-width: 640px) { .sc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-sum .led { font-size: 20px; } }

.sc-list { display: grid; gap: 6px; }
.sc-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #222B36; border-radius: 8px; }
.sc-item.on { border-color: var(--accent); }
.sc-item > span:first-child { flex: 1; min-width: 160px; }

.ppl { display: grid; gap: 8px; margin-top: 10px; }
.ppl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #222B36; border-radius: 10px; }
.ppl-row .meta { font-size: 12.5px; color: var(--muted); }