@font-face{font-family:"Inter";src:url(fonts/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-lg:22px;--r:16px;--r-sm:12px;
  --win:#00e08a;--lose:#ff5470;--even:#ffb547;--blue:#4da3ff;--violet:#b78cff;--grey:#7c8796;
}
[data-theme=dark]{
  --bg:#0b0f14;--bg2:#0f141b;--card:#141a22;--card2:#1a222c;--line:rgba(255,255,255,.07);
  --txt:#eef2f6;--mut:#8b97a6;--shadow:0 10px 30px rgba(0,0,0,.35);
  --hero:radial-gradient(120% 140% at 0% 0%,#123d2f 0%,rgba(18,61,47,0) 55%),radial-gradient(120% 140% at 100% 0%,#3a1622 0%,rgba(58,22,34,0) 55%),linear-gradient(180deg,#151c25,#10161d);
  --press:rgba(255,255,255,.06);--sel:#0f151c;
}
[data-theme=light]{
  --bg:#f3f5f8;--bg2:#eef1f5;--card:#ffffff;--card2:#f6f8fb;--line:rgba(15,23,42,.08);
  --txt:#0f172a;--mut:#64748b;--shadow:0 8px 24px rgba(15,23,42,.08);
  --win:#00a865;--lose:#e2334f;--even:#d98a00;--blue:#2477e6;--violet:#8250df;
  --hero:radial-gradient(120% 140% at 0% 0%,#d6f7e8 0%,rgba(214,247,232,0) 55%),radial-gradient(120% 140% at 100% 0%,#ffe1e7 0%,rgba(255,225,231,0) 55%),linear-gradient(180deg,#fff,#f7f9fc);
  --press:rgba(15,23,42,.05);--sel:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.4;color:var(--txt);background:var(--bg);
  font-feature-settings:"cv11","ss01","tnum";-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;color:inherit;cursor:pointer}
.muted{color:var(--mut);font-size:12px;font-weight:500}
.cap{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.hint{color:var(--mut);font-size:12px;margin:10px 4px 0}.center{text-align:center}

/* top bar */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:34px;height:34px;border-radius:11px;background:conic-gradient(from 200deg,var(--win),#00b3ff,var(--win));position:relative;box-shadow:0 4px 14px color-mix(in srgb,var(--win) 35%,transparent)}
.logo::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg)}
.brand h1{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}
.brand p{margin:0;font-size:11.5px;color:var(--mut);font-weight:500}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;transition:transform .12s}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:var(--txt);stroke-width:2;stroke-linecap:round}
.icon-btn .moon{fill:var(--txt);stroke:none}
[data-theme=dark] .sun,[data-theme=light] .moon{display:none}

main{max-width:880px;margin:0 auto;padding:14px 14px 28px}
section{margin-bottom:16px}

/* hero */
.hero{background:var(--hero);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.team-pick{display:flex;flex-direction:column;gap:6px;min-width:0}
.team-pick.away{text-align:right}
.team-pick select{appearance:none;-webkit-appearance:none;width:100%;font:inherit;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--txt);
  background:var(--sel);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;
  text-overflow:ellipsis;transition:border-color .15s,box-shadow .15s}
.team-pick.home select{box-shadow:inset 3px 0 0 var(--win)}
.team-pick.away select{box-shadow:inset -3px 0 0 var(--lose);text-align:right;text-align-last:right}
.team-pick select:focus{outline:none;border-color:color-mix(in srgb,var(--win) 60%,transparent)}
.vs{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;transition:transform .2s}
.vs span{font-size:12px;font-weight:900;letter-spacing:.04em;transition:opacity .15s}
.vs svg{position:absolute;width:18px;height:18px;fill:none;stroke:var(--txt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.vs:hover span,.vs:active span{opacity:0}.vs:hover svg,.vs:active svg{opacity:1}
.vs:active{transform:rotate(180deg) scale(.92)}

.summary{margin-top:18px;text-align:center}
.verdict{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;letter-spacing:.02em}
.verdict.win{background:color-mix(in srgb,var(--win) 16%,transparent);color:var(--win)}
.verdict.lose{background:color-mix(in srgb,var(--lose) 16%,transparent);color:var(--lose)}
.verdict.even{background:color-mix(in srgb,var(--even) 16%,transparent);color:var(--even)}
.score{display:flex;justify-content:center;align-items:baseline;gap:14px;margin:10px 0 2px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.score b{font-size:52px;line-height:1}.score b.a{color:var(--win)}.score b.b{color:var(--lose)}
.score i{font-style:normal;color:var(--mut);font-size:26px;font-weight:600}
.score-cap{color:var(--mut);font-size:12px;font-weight:500}
.probbar{margin:16px 2px 6px}
.probbar .labels{display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-bottom:6px}
.probbar .labels .a{color:var(--win)}.probbar .labels .b{color:var(--lose)}
.probbar .labels small{color:var(--mut);font-weight:600;font-size:11px;margin:0 4px}
.track{height:10px;border-radius:99px;background:color-mix(in srgb,var(--lose) 85%,#000 0%);overflow:hidden;position:relative}
.track .fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#00b46e,var(--win));box-shadow:0 0 16px color-mix(in srgb,var(--win) 50%,transparent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.track::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--bg);opacity:.7}
.totals{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);font-weight:500;margin-top:8px}
.warn{margin-top:10px;font-size:12px;color:var(--even);font-weight:600}

/* segmented */
.seg-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 16px}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{border:0;background:transparent;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--mut);transition:background .2s,color .2s}
.seg button.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* head to head */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px}
h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
.h2h{display:flex;flex-direction:column;gap:8px}
.duel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 10px;transition:transform .12s}
.duel:active{transform:scale(.99)}
.duel-top{display:grid;grid-template-columns:22px minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.num{width:22px;height:22px;border-radius:7px;background:var(--card2);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--mut)}
.side{min-width:0;display:flex;flex-direction:column;gap:5px}
.side.b{align-items:flex-end;text-align:right}
.side .nm{font-weight:700;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.side.lead .nm{color:var(--txt)}.side.trail .nm{color:var(--mut)}
.empty{color:var(--mut);font-size:13px;font-style:italic}
.gap{min-width:64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.gap b{font-size:13px;font-weight:800;padding:3px 8px;border-radius:8px;font-variant-numeric:tabular-nums}
.gap b.win{color:var(--win);background:color-mix(in srgb,var(--win) 13%,transparent)}
.gap b.lose{color:var(--lose);background:color-mix(in srgb,var(--lose) 13%,transparent)}
.gap b.even{color:var(--even);background:color-mix(in srgb,var(--even) 13%,transparent)}
.gap b.na{color:var(--mut);background:var(--card2)}
.gap small{color:var(--mut);font-size:10.5px;font-weight:600}
.duel-bar{display:grid;grid-template-columns:38px 1fr 38px;gap:8px;align-items:center;margin-top:10px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.duel-bar .pa{color:var(--win)}.duel-bar .pb{color:var(--lose);text-align:right}
.duel-bar .na{color:var(--mut)}
.mini{height:5px;border-radius:99px;background:color-mix(in srgb,var(--lose) 55%,var(--card2));overflow:hidden}
.mini span{display:block;height:100%;border-radius:99px;background:var(--win);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mini.unknown{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--mut) 35%,transparent) 0 5px,transparent 5px 10px)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 8px 3px 6px;border-radius:99px;
  font-variant-numeric:tabular-nums;white-space:nowrap;border:1px solid transparent;transition:transform .12s,filter .12s}
.badge i{width:14px;height:14px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:900;color:#0b0f14}
.badge.verified{color:var(--win);background:color-mix(in srgb,var(--win) 12%,transparent)}.badge.verified i{background:var(--win)}.badge.verified i::before{content:"✓"}
.badge.manual{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}.badge.manual i{background:var(--blue)}.badge.manual i::before{content:"✓"}
.badge.estimate{color:var(--even);background:color-mix(in srgb,var(--even) 12%,transparent);border-style:dashed;border-color:color-mix(in srgb,var(--even) 45%,transparent)}.badge.estimate i{background:var(--even)}.badge.estimate i::before{content:"~"}
.badge.edited{color:var(--violet);background:color-mix(in srgb,var(--violet) 13%,transparent)}.badge.edited i{background:var(--violet)}.badge.edited i::before{content:"✎"}
.badge.none{color:var(--mut);background:var(--card2)}.badge.none i{background:var(--grey)}.badge.none i::before{content:"?"}
button.badge{cursor:pointer}button.badge:active{transform:scale(.94);filter:brightness(1.2)}

/* squads */
.squads{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.squads .panel{margin:0}
ul.squad{list-style:none;margin:0;padding:0}
.squad li{display:flex;align-items:center;gap:10px;padding:9px 8px;margin:0 -8px;border-radius:12px;cursor:pointer;transition:background .15s,opacity .2s,transform .1s}
.squad li:active{background:var(--press);transform:scale(.985)}
.squad li .p{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--card2);color:var(--mut)}
.squad li.play .p{background:color-mix(in srgb,var(--win) 18%,transparent);color:var(--win)}
.squad li .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}
.squad li.play .nm{font-weight:700}
.squad li.out{opacity:.38}.squad li.out .nm{text-decoration:line-through}
.squad li.out .p::before{content:"✕"}.squad li.out .p span{display:none}

.legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px}
.actions{display:flex;gap:10px;justify-content:center}
.btn{border:0;border-radius:12px;padding:11px 18px;font-size:14px;font-weight:700;transition:transform .12s,filter .12s}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(135deg,#00e08a,#00b3ff);color:#04110b;box-shadow:0 6px 18px color-mix(in srgb,var(--win) 30%,transparent)}
.btn.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line)}

/* bottom sheet */
dialog.sheet{border:0;padding:0;background:transparent;max-width:100vw;width:100%;margin:auto auto 0;color:var(--txt)}
dialog.sheet::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
dialog.sheet form{background:var(--card);border:1px solid var(--line);border-radius:24px 24px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;animation:up .25s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.grab{width:40px;height:4px;border-radius:9px;background:var(--line);margin:0 auto 12px;background:var(--mut);opacity:.4}
dialog h3{margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.links a{display:inline-flex;margin:4px 6px 0 0;padding:7px 11px;border-radius:10px;background:var(--card2);color:var(--txt);text-decoration:none;font-size:13px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field input{font:inherit;font-size:22px;font-weight:800;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);font-variant-numeric:tabular-nums}
.field input:focus{outline:none;border-color:var(--win)}
dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:16px 0 0}
@media (min-width:700px){dialog.sheet{margin:auto}dialog.sheet form{border-radius:24px}}
@media (max-width:640px){.squads{grid-template-columns:1fr}}
@media (max-width:380px){.score b{font-size:44px}.team-pick select{font-size:15px}.side .nm{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.side{align-items:flex-start}
@media (max-width:480px){
  .teams{grid-template-columns:1fr auto;grid-template-areas:"home vs" "away vs";gap:8px 10px;align-items:center}
  .team-pick.home{grid-area:home}.team-pick.away{grid-area:away;text-align:left}
  .team-pick{flex-direction:row;align-items:center;gap:10px}
  .team-pick .cap{width:62px;flex:none}
  .team-pick.away select{text-align:left;text-align-last:left;box-shadow:inset 3px 0 0 var(--lose)}
  .vs{grid-area:vs}
}
.fixture{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--txt);margin:0 0 12px}
.fixture.past{color:var(--mut)}
.fixture .ha{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.fixture .ha.H{background:color-mix(in srgb,var(--win) 16%,transparent);color:var(--win)}
.fixture .ha.A{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}