/* Glacier. One sheet, no framework. Palette and type are Glacier's own, not a UI kit's defaults. */
:root {
  --bg: #0b1320;
  --s1: #111b2b;
  --s2: #18253a;
  --line: #213149;
  --text: #edf2f8;
  --muted: #93a3b9;
  --dim: #7a8ba5;
  --ice: #9fdcff;
  --deep: #4f8fd8;
  --good: #4fcf8f;
  --bad: #ef6464;
  --warn: #e9b44c;
  --num: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font: "Barlow", "Segoe UI", -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.locked { position: fixed; left: 0; right: 0; overflow: hidden; }
body.has-fab main { padding-bottom: 170px; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; touch-action: manipulation; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.n { font-family: var(--num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.pos { color: var(--good); } .neg { color: var(--bad); } .warn { color: var(--warn); }

/* ---------- chrome ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 24px;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--num); font-weight: 700; font-size: 22px; letter-spacing: .12em; }
.brand img { width: 28px; height: 28px; }
.tabs-top { display: flex; height: 100%; }
.tabs-top a { display: flex; align-items: center; padding: 0 16px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs-top a.on { color: var(--text); border-color: var(--ice); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-weight: 700; }
.icon-btn span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); }
.help { margin-left: auto; }
#me span { background: var(--s2); color: var(--ice); }
body.signed-out .help, body.signed-out #me, body.signed-out #mkBet { display: none; }
#mkBet { margin-left: auto; }
#mkBet + .help { margin-left: 0; }
#mkBet span { color: var(--ice); border-color: var(--ice); font-size: 20px; line-height: 1; }
.mbday { margin: 6px 0 12px; }
.mbgs { display: grid; gap: 6px; }
.mbg { display: grid; grid-template-columns: 26px auto auto auto 26px 1fr; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--s1, #111b2b); color: var(--text, #e8eef7); text-align: left; }
.mbg img { width: 26px; height: 26px; }
.mbg .st { justify-self: end; color: var(--muted); font-size: 13px; }
.mbg .st.live { color: var(--good); }
.mbo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.mbo button { display: flex; justify-content: space-between; gap: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font-weight: 600; text-align: left; }
.mbo button b { font-family: var(--num); }
.mbo button.on { border-color: var(--ice); background: var(--s2); color: var(--ice); }
.sheet .back { display: inline-block; margin-bottom: 6px; color: var(--muted); background: none; border: 0; padding: 0; font-weight: 600; }
.rvcard { padding: 12px 0; border-top: 1px solid var(--line); }
.rvcard:first-child { border-top: 0; padding-top: 0; }
.story { margin: 10px 0 4px; }
.story p { margin: 0 0 6px; line-height: 1.45; }
.parts { display: grid; gap: 6px; margin: 4px 0 14px; }
.pr { display: grid; grid-template-columns: 170px 1fr 54px; gap: 10px; align-items: center; font-size: 13.5px; }
.pr.tot { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 700; }
.pb { position: relative; height: 10px; background: var(--s2); border-radius: 5px; }
.pb::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--dim); }
.pb i { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.pb i.up { background: var(--good); } .pb i.down { background: var(--bad); }
.pr b { text-align: right; }
.rvt { display: grid; margin: 4px 0 14px; font-size: 13.5px; }
.rvt .rh, .rvt .rr { display: grid; grid-template-columns: 1fr 86px 86px; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); align-items: center; }
.rvt .rh { border-top: 0; color: var(--muted); }
.rvt b { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.rvt small { color: var(--dim); font-weight: 400; font-size: 11px; }
.flow { width: 100%; height: 90px; display: block; margin: 4px 0 12px; }
.lesson { background: var(--s2); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.lesson b { color: var(--ice); margin-right: 4px; }
@media (max-width: 760px) { .pr { grid-template-columns: 1fr 70px 46px; } .pr .pb { order: 0; } .rvt .rh, .rvt .rr { grid-template-columns: 1fr 70px 70px; } }
.read { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); }
.read .rh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.read .rh b { font-size: 24px; }
.read .rl { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.read .rl .n { text-align: right; font-weight: 700; display: flex; flex-direction: column; }
.read .rl .n small { font-size: 11px; color: var(--dim); font-weight: 500; }
.read .rn { padding-top: 6px; }
.read details.more { margin-top: 8px; }
#pprice { width: 100%; margin-bottom: 8px; }
.stakebox { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.stakebox .seg { margin: 0; }
.slip .leg .input.ln { width: 64px; padding-left: 6px; padding-right: 6px; text-align: center; }
.towin { display: flex; justify-content: space-between; align-items: baseline; }
.wide-btn { width: 100%; margin-bottom: 18px; justify-content: center; gap: 10px; }
main { max-width: 960px; margin: 0 auto; padding: 22px 20px 120px; }
.tabbar { display: none; }

h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
h2 .c { font-family: var(--num); color: var(--dim); font-weight: 600; }
h2 .r { margin-left: auto; font-family: var(--num); font-weight: 600; }
.sec { margin-top: 28px; }
.sec:first-child, .bar-head + .strip + .sec, .strip + .sec { margin-top: 0; }
.stack { display: grid; gap: 12px; margin-top: 12px; }

.bar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.day { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; height: 44px; }
.day button { height: 100%; min-width: 44px; color: var(--muted); font-size: 18px; }
.day .cur { color: var(--text); font-weight: 600; font-size: 15px; min-width: 96px; padding: 0 12px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 44px; }
.seg button { padding: 0 14px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--s2); color: var(--text); }
.strip { display: flex; gap: 22px; color: var(--muted); font-size: 13.5px; margin-bottom: 22px; flex-wrap: wrap; }
.strip b { font-family: var(--num); font-size: 21px; color: var(--text); margin-right: 5px; font-weight: 600; }

/* ---------- game rows ---------- */
.rows { display: grid; gap: 8px; }
.rows + .rows { margin-top: 8px; }
[hidden] { display: none !important; }
.row { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: grid; gap: 10px; }
.row:active { background: var(--s2); }
.row.is-live .rtop > span:first-child { color: var(--bad); font-weight: 700; }
.rtop { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); min-height: 24px; }
.match { display: grid; grid-template-columns: 1fr minmax(140px, 1.6fr) 1fr; align-items: center; gap: 14px; }
.side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side.r { flex-direction: row-reverse; text-align: right; }
.side img { width: 34px; height: 34px; flex: none; }
.ab { font-family: var(--num); font-weight: 700; font-size: 23px; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.side.r .ab { justify-content: flex-end; }
.score { font-size: 28px; }
.tag { font-family: var(--font); font-size: 10.5px; font-weight: 700; color: var(--warn); letter-spacing: .04em; }
.side .sub { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.split { display: grid; gap: 6px; }
.split .pcts { display: flex; justify-content: space-between; font-family: var(--num); font-size: 18px; font-weight: 600; color: var(--muted); }
.split .pcts .fav { color: var(--text); }
.split .track { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.split .track i { display: block; height: 100%; background: #33445e; }
.split .track i.fav { background: var(--ice); }
.rbot { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.pick { font-family: var(--num); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.pick .dim { font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0; margin-right: 2px; }
.conf { font-family: var(--num); font-size: 19px; font-weight: 700; }
.meter5 { display: inline-flex; gap: 3px; }
.meter5 i { width: 13px; height: 6px; border-radius: 2px; background: var(--s2); }
.meter5 i.on { background: var(--ice); }
.rpick { display: flex; align-items: center; gap: 10px; }
.row.pick-away .side:not(.r) .ab, .row.pick-home .side.r .ab { color: var(--ice); }
.split-ph { display: block; }
.mkt { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.trks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trk .big { font-size: 34px; font-weight: 700; margin: 6px 0 4px; display: flex; align-items: baseline; gap: 8px; }
.trk .big small, .trk .kv small { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: .05em; }
.trk .kv { display: flex; gap: 22px; margin-bottom: 6px; }
.trk .kv > div { display: flex; flex-direction: column; font-weight: 700; }
.spark { width: 100%; height: 34px; display: block; margin: 4px 0 6px; }
.units { color: var(--ice); font-weight: 600; }
.advice { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--ice); background: var(--s2); border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.bl { padding: 10px 0; border-top: 1px solid var(--line); }
.bl:first-of-type, .row > .bl { border-top: 0; }
.bl.lead .t { font-size: 17px; }
.rpick .pick { font-size: 18px; color: var(--text); }
.tbd { font-size: 12px; font-weight: 700; color: var(--warn); }
.chart-lbl { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.bars div.tuned i { background: #26364e; } .bars div.tuned .n { color: var(--muted); }
.pwrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.pwrow .input { width: 100%; }
.row:focus-visible { outline: 2px solid var(--ice); }
.rbot .act { margin-left: auto; font-weight: 700; font-size: 14px; white-space: nowrap; }
.act.bet { color: var(--good); } .act.wait { color: var(--warn); }
.act .tag, .betline .t .tag { margin-left: 6px; }
.chip { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; color: var(--muted); background: var(--s2); white-space: nowrap; }
.chip.bet { background: var(--good); color: #062014; }
.chip.wait { background: rgba(233, 180, 76, .16); color: var(--warn); }
.chip.strong { background: var(--ice); color: #0a2233; }
.chip.solid { background: rgba(159, 220, 255, .16); color: var(--ice); }
.chip.won { background: rgba(79, 207, 143, .16); color: var(--good); }
.chip.lost { background: rgba(239, 100, 100, .16); color: var(--bad); }

.frows { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; }
.frow { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 0 14px; min-height: 48px; border-bottom: 1px solid var(--line); cursor: pointer; }
.frow:last-child { border-bottom: 0; }
.res { font-weight: 800; text-align: center; color: var(--dim); }
.res.won { color: var(--good); } .res.lost { color: var(--bad); }
.frow .fm { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--dim); }
.frow .fm img { width: 20px; height: 20px; }
.frow .fm b { color: var(--text); font-family: var(--num); font-size: 18px; }
.frow .fm .n { font-size: 19px; color: var(--text); font-weight: 600; }
.frow .fp { color: var(--muted); font-size: 13px; white-space: nowrap; }
.frow .fp .n { color: var(--text); font-size: 16px; }

/* ---------- game page ---------- */
.back { color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; height: 44px; margin: -8px 0 4px; padding-right: 16px; }
.hero { background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 18px; }
.hero .match { grid-template-columns: 1fr auto 1fr; }
.hero .side img { width: 60px; height: 60px; }
.hero .ab { font-size: 34px; }
.hero .mid { text-align: center; color: var(--muted); font-size: 13px; }
.hero .mid .t { font-family: var(--num); font-size: 30px; font-weight: 700; color: var(--text); }
.hero .split .pcts { font-size: 24px; }
.hero .split .track { height: 8px; }
.verdict { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; }
.verdict .who { font-family: var(--num); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.verdict .what { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.big-conf { text-align: right; display: grid; justify-items: end; gap: 6px; }
.big-conf .conf { font-size: 54px; line-height: .85; }
.big-conf small { color: var(--dim); font-size: 11px; letter-spacing: .08em; }
.big-conf .meter5 i { width: 20px; height: 7px; }
.reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.reasons li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.reasons li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); margin-top: 9px; }
.reasons li.down::before { background: var(--bad); } .reasons li.up::before { background: var(--good); } .reasons li.ok::before { background: var(--dim); }
details > summary { cursor: pointer; list-style: none; color: var(--muted); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--dim); }
details[open] > summary::after { content: "–"; }
details.more { border-top: 1px solid var(--line); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; padding-bottom: 6px; }
.cols2 h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.news { border: 1px solid rgba(233, 180, 76, .45); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-weight: 600; }

.panel { background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.panel > details > summary { margin: -12px 0; }
.betline { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.betline .t { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.betline .s { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.vs { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 10px; min-height: 30px; }
.vs .lbl { text-align: center; color: var(--muted); font-size: 13px; }
.vs .lbl b { color: var(--text); font-family: var(--num); font-size: 15px; margin-left: 4px; }
.vs .bar { height: 6px; background: var(--s2); border-radius: 3px; position: relative; }
.vs .bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ice); }
.vs .bar.l i { right: 0; } .vs .bar.r i { left: 0; }
.vs-head { display: grid; grid-template-columns: 1fr 150px 1fr; font-family: var(--num); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.vs-head span:last-child { text-align: right; }
.stat { display: grid; grid-template-columns: 1fr 150px 1fr; min-height: 38px; border-bottom: 1px solid var(--line); align-items: center; }
.stat:last-child { border-bottom: 0; }
.stat .lbl { text-align: center; color: var(--muted); font-size: 13px; }
.stat .a, .stat .h { font-family: var(--num); font-size: 18px; font-weight: 600; display: flex; gap: 7px; align-items: baseline; }
.stat .h { justify-content: flex-end; }
.stat .best { color: var(--ice); }
.rk { font-family: var(--font); font-size: 11px; color: var(--dim); font-weight: 500; }
.goalies { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gk { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.gk img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--s2); }
.gk .nm { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.gk .nums { display: flex; gap: 16px; margin-top: 4px; }
.gk .nums div { font-family: var(--num); font-size: 19px; font-weight: 600; }
.gk .nums small { display: block; font-family: var(--font); font-size: 10.5px; color: var(--dim); font-weight: 500; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.ok { background: var(--good); } .dot.mid { background: var(--warn); }
.form { display: flex; gap: 4px; flex-wrap: wrap; }
.form i { min-width: 22px; padding: 0 3px; height: 22px; border-radius: 5px; font-style: normal; font-family: var(--num); font-weight: 700; font-size: 13px; display: grid; place-items: center; background: var(--s2); color: var(--muted); }
.form .W { color: var(--good); } .form .L { color: var(--bad); } .form .O { color: var(--warn); }
.li { display: grid; grid-template-columns: 1fr auto; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: center; }
.li:last-child { border-bottom: 0; }
.li .t { font-weight: 600; }
.li .s { color: var(--muted); font-size: 12.5px; }
.li .n { font-size: 18px; font-weight: 600; text-align: right; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 .hd { font-weight: 700; margin-bottom: 4px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--dim); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td.best { color: var(--good); font-weight: 700; }
.c { text-align: center; } .r { text-align: right; }
.scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.pub { display: grid; grid-template-columns: 62px 40px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; min-height: 26px; }
.pub .track { height: 6px; background: var(--s2); border-radius: 3px; overflow: hidden; }
.pub .track i { display: block; height: 100%; background: var(--deep); }
.pub .track.m i { background: var(--good); }
.lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lg { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.lg b { display: block; font-size: 11px; color: var(--dim); font-weight: 600; margin-bottom: 3px; }
.grade { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.grade:last-child { border-bottom: 0; }
.gi { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; background: var(--s2); color: var(--muted); }
.gi.deserved { color: var(--good); } .gi.lucky { color: var(--ice); } .gi.unlucky { color: var(--warn); } .gi.missed { color: var(--bad); }
.find { color: var(--muted); font-size: 13px; margin-top: 3px; }

@media (min-width: 1000px) {
  .deep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .deep > .panel.wide { grid-column: 1 / -1; }
  .deep > div.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; grid-column: 1 / -1; }
  .deep div.col { display: grid; gap: 12px; }
}
.deep { display: grid; gap: 12px; }
.betline + details.more { margin-top: 12px; }
.deep .pair, .deep .col { display: contents; }

/* ---------- bets + record ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.tile b { display: block; font-family: var(--num); font-size: 30px; font-weight: 700; line-height: 1.05; }
.tile span { color: var(--muted); font-size: 12.5px; }
.btn { background: var(--ice); color: #0a2233; font-weight: 700; min-height: 44px; padding: 0 18px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.btn.ghost { background: none; color: var(--text); border: 1px solid var(--line); }
.btn.on { background: var(--s2); color: var(--ice); }
.btn:disabled { opacity: .45; }
.slipcard { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.slipcard .hd { display: flex; justify-content: space-between; align-items: baseline; }
.slipcard .od { font-family: var(--num); font-size: 28px; font-weight: 700; }
.kv { display: flex; gap: 20px; flex-wrap: wrap; }
.kv div { font-family: var(--num); font-size: 21px; font-weight: 600; }
.kv small { display: block; font-family: var(--font); font-size: 11px; color: var(--dim); font-weight: 500; }
.cal { display: grid; grid-template-columns: 70px 1fr 90px; gap: 10px; align-items: center; min-height: 26px; font-size: 13px; }
.cal .track { position: relative; height: 8px; background: var(--s2); border-radius: 4px; }
.cal .track i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--deep); border-radius: 4px; }
.cal .track em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ice); }
.log { padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 58px 1fr; gap: 10px; font-size: 13.5px; }
.log:last-child { border-bottom: 0; }
.chart { width: 100%; height: 140px; display: block; }
.form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.field { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; height: 44px; padding: 0 12px; width: 140px; font-size: 16px; }
.input:focus { outline: none; border-color: var(--ice); }
.betcard { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.betcard .legs div { font-weight: 600; padding: 2px 0; }
.betcard .legs small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.acts button { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 0 14px; }
.empty { color: var(--dim); padding: 20px 4px; text-align: center; }
.empty.sm { padding: 6px 0; text-align: left; }
.empty .btn { margin-top: 12px; }
.habits { display: flex; gap: 8px; margin-bottom: 10px; }
.habits div { flex: 1; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.habits b { display: block; font-size: 22px; }
.habits span { color: var(--muted); font-size: 12.5px; }
.gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {   /* mouse users get a scrollbar to reach the rest of the cards */
  .gallery { scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: 10px; }
  .gallery::-webkit-scrollbar { display: block; height: 8px; }
  .gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
}
.gcard { flex: 0 0 300px; scroll-snap-align: start; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.gtop { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.vtag { font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: var(--s2); color: var(--muted); }
.v-smart .vtag, .v-good .vtag, .v-pricehit .vtag { color: var(--good); } .v-lucky .vtag { color: var(--ice); }
.v-warned .vtag, .v-missed .vtag { color: var(--bad); } .v-risky .vtag, .v-unlucky .vtag, .v-weak .vtag, .v-priceplay .vtag { color: var(--warn); }
.glegs { display: grid; gap: 6px; }
.gl { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.gl .gn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.st { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--dim); }
.st.s-bet, .st.s-pick { color: var(--good); } .st.s-lean { color: var(--ice); } .st.s-against { color: var(--bad); }
.gbot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; }
.bars div { flex: 1; display: grid; justify-items: center; gap: 3px; align-content: end; }
.bars i { width: 100%; max-width: 34px; background: #33445e; border-radius: 4px 4px 0 0; }
.bars div.hold i { background: var(--ice); }
.bars .n { font-size: 15px; font-weight: 600; }
.bars small { color: var(--dim); font-size: 10.5px; }
.cap { color: var(--dim); font-size: 12.5px; margin-bottom: 8px; }
.model { display: grid; gap: 20px; }

.auth { max-width: 340px; margin: 10vh auto 0; display: grid; gap: 12px; text-align: center; }
.auth img { width: 56px; height: 56px; margin: 0 auto; }
.auth h1 { font-family: var(--num); font-size: 28px; margin: 4px 0 8px; }
.auth .input { width: 100%; }
.auth .err { color: var(--bad); min-height: 20px; font-size: 13.5px; }
.auth a { min-height: 44px; display: grid; place-items: center; }
.help-page dl { display: grid; grid-template-columns: 110px 1fr; gap: 12px 18px; margin: 0; }
.help-page dt { font-weight: 700; }
.help-page dd { margin: 0; color: var(--muted); }

/* ---------- sheets ---------- */
.slip-fab { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: none; gap: 10px; align-items: center; min-height: 48px;
  background: var(--ice); color: #0a2233; font-weight: 700; padding: 0 18px; border-radius: 12px; }
.slip-fab.show { display: flex; }
.slip-fab b { background: #0a2233; color: var(--ice); border-radius: 6px; min-width: 22px; padding: 1px 6px; font-size: 12px; text-align: center; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40; display: none; }
.scrim.show { display: block; }
.sheet, .slip { position: fixed; left: 50%; bottom: 0; width: 480px; max-width: 100%; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; z-index: 50;
  background: var(--s1); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
  transform: translate(-50%, 105%); transition: transform .22s ease; }
.sheet.show, .slip.show { transform: translate(-50%, 0); }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 12px; }
.sheet h2 { margin: 4px 0 6px; font-size: 17px; }
.sheet h3 { margin: 18px 0 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.sheet .lead { margin: 0 0 10px; color: var(--muted); }
.why-leg { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 3px; }
.why-leg .t { font-weight: 700; }
.why-leg .s { color: var(--muted); font-size: 13.5px; }
.invite { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; }
.invite code { font-family: var(--num); font-size: 19px; letter-spacing: .08em; }
.slip header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; }
.slip header button { width: 44px; height: 44px; font-size: 24px; color: var(--muted); margin-right: -12px; }
.slip .leg { display: grid; grid-template-columns: 1fr auto 76px 40px; gap: 8px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); }
.slip .leg small { display: block; color: var(--muted); }
.slip .leg .input { width: 100%; text-align: center; padding: 0 6px; }
.slip .leg button { height: 44px; color: var(--dim); font-size: 22px; }
.slip footer { display: grid; gap: 10px; padding-top: 12px; }
.slip .seg button { flex: 1; }
.slip .quick { display: flex; gap: 6px; }
.slip .quick button { flex: 1; border: 1px solid var(--line); border-radius: 8px; min-height: 44px; color: var(--muted); font-weight: 600; }
.slip .towin { display: flex; justify-content: space-between; color: var(--muted); align-items: baseline; }
.slip .towin b { color: var(--text); font-family: var(--num); font-size: 22px; }
.slip #stake { width: 100%; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--s2); border: 1px solid var(--line); padding: 10px 16px;
  border-radius: 10px; font-weight: 600; z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
.skel { height: 104px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .trks { grid-template-columns: 1fr; gap: 8px; }
  .trk { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 16px; }
  .trk .cap { grid-column: 1 / -1; }
  .trk .big { font-size: 26px; margin: 2px 0 0; }
  .trk .kv { margin: 0; gap: 16px; }
  .trk .spark, .trk > .s { display: none; }
  .betcard { grid-template-columns: 1fr; }
  .betcard .r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .betcard .r .acts { margin-left: auto; }
  .betcard .r .acts button { min-height: 36px; padding: 0 10px; }
  body.has-fab main { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .top { position: fixed; left: 0; right: 0; padding: env(safe-area-inset-top) 6px 0 16px; height: calc(56px + env(safe-area-inset-top)); gap: 0; }
  .tabs-top { display: none; }
  main { padding: calc(70px + env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--bg);
    border-top: 1px solid var(--line); padding: 4px 0 env(safe-area-inset-bottom); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; color: var(--dim); font-size: 11.5px; font-weight: 600; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--ice); }
  .slip-fab { right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .match { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .match .split { grid-column: 1 / -1; order: 3; }
  .row .side img { width: 30px; height: 30px; }
  .row .side .rec { display: none; }
  .split-ph { display: none; }
  .pwrow { grid-template-columns: 1fr; }
  .strip { gap: 28px; justify-content: center; }
  .strip span { display: grid; text-align: center; font-size: 12px; }
  .strip b { margin: 0; }
  .hero { padding: 16px; gap: 16px; }
  .hero .side, .hero .side.r { flex-direction: column; text-align: center; gap: 6px; }
  .hero .side.r .ab { justify-content: center; }
  .hero .side img { width: 48px; height: 48px; }
  .hero .ab { font-size: 28px; justify-content: center; }
  .verdict .who { font-size: 26px; }
  .big-conf .conf { font-size: 44px; }
  .cols2, .grid2, .goalies { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .vs, .vs-head { grid-template-columns: 1fr 110px 1fr; }
  .stat { grid-template-columns: 1fr 112px 1fr; }
  .gcard { flex-basis: 86%; }
  .sheet, .slip { width: 100%; }
  .frow { padding: 0 12px; }
  .frow .fm img { display: none; }
  .help-page dl { grid-template-columns: 1fr; gap: 2px; }
  .help-page dd { margin-bottom: 10px; }
}