:root { --bg:#f5f6f8; --card:#fff; --ink:#1c2330; --muted:#6b7280; --line:#e5e7eb; --acc:#1d4ed8; --ok:#15803d; --bad:#b91c1c; --warn:#b45309; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
header.top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem; padding:.6rem 1.2rem; background:#111827; color:#fff; }
header nav { display:flex; flex-wrap:wrap; align-items:center; }
header .brand { color:#fff; font-weight:700; text-decoration:none; letter-spacing:.3px; }
header nav a { color:#cbd5e1; text-decoration:none; margin-left:1rem; }
header nav a.on, header nav a:hover { color:#fff; }
header .who { color:#94a3b8; margin-left:1rem; }
main { max-width: 1200px; margin: 1.2rem auto; padding: 0 1rem; overflow-x:hidden; }
.stats > div { min-width:0; } .row.between h1 { margin-right:.5rem; }
@media (max-width: 600px) { main { padding: 0 .6rem; } .card { padding:.8rem .8rem; } h1 { font-size:1.25rem; } }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:2rem 0; }
h1 { font-size:1.5rem; margin:.4rem 0 1rem; } h2 { font-size:1.1rem; margin:0 0 .7rem; } h3 { font-size:1rem; margin:1rem 0 .4rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1rem; overflow-x:auto; max-width:100%; }
.card.narrow { max-width: 420px; margin: 3rem auto; }
a.card { display:block; color:inherit; text-decoration:none; } a.card:hover { border-color:#9ca3af; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.row { display:flex; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; } .gap > * { margin-right:.6rem; }
.small { font-size:.85rem; } .muted { color:var(--muted); } .err { color:var(--bad); font-weight:600; } .warn { color:var(--warn); font-weight:600; } .ok { color:var(--ok); }
label { display:block; margin:.5rem 0; font-size:.9rem; } label input, label select { display:block; width:100%; padding:.45rem .55rem; border:1px solid #cbd5e1; border-radius:6px; font-size:.95rem; margin-top:.2rem; }
.row label input, .row label select { display:inline-block; width:auto; margin-left:.3rem; }
button, .btn { display:inline-block; background:var(--acc); color:#fff; border:0; border-radius:6px; padding:.5rem .9rem; font-size:.95rem; cursor:pointer; text-decoration:none; }
button.secondary, .btn.secondary { background:#e5e7eb; color:var(--ink); } button.ok { background:var(--ok); } button.bad { background:var(--bad); } button.small { padding:.2rem .5rem; font-size:.8rem; }
form.params button { margin-top:.6rem; } form.start { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:.92rem; } th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.3px; }
table.kv td:last-child { text-align:right; } tr.hl td { background:#eff6ff; } table.small { font-size:.82rem; }
.scroll { overflow-x:auto; } td.news { max-width: 360px; font-size:.8rem; color:#374151; }
tr.win td { background:#f0fdf4; } tr.loss td { background:#fef2f2; } tr.open td { background:#fffbeb; }
.bar { position:relative; height:12px; background:#e5e7eb; border-radius:6px; overflow:hidden; margin:.6rem 0; } .bar .fill { height:100%; background:linear-gradient(90deg,#2563eb,#16a34a); }
.bar.big { height:26px; } .bar.big .lbl { position:absolute; inset:0; text-align:center; font-size:.85rem; line-height:26px; color:#111; font-weight:600; }
.stats { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.8rem; } .stats > div { flex:1 1 150px; } .stats .n { display:block; font-size:1.3rem; font-weight:700; } .stats .n.small { font-size:.95rem; } .stats .l { display:block; color:var(--muted); font-size:.8rem; }
.tag { font-size:.7rem; padding:.15rem .5rem; border-radius:999px; vertical-align:middle; background:#e5e7eb; } .tag.active { background:#dbeafe; color:#1e40af; } .tag.completed { background:#dcfce7; color:#166534; } .tag.busted { background:#fee2e2; color:#991b1b; }
.pending { background:#fffbeb; border:1px solid #fcd34d; border-radius:8px; padding:.8rem 1rem; margin-top:.8rem; }
code { background:#f1f5f9; padding:.1rem .35rem; border-radius:4px; }

/* --- predictions & scenarios --- */
.section { margin: 1.4rem 0 .6rem; }
.kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:.7rem; margin-bottom:1rem; }
.kpis.tight { margin-top:.4rem; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem; }
.kpi .n { display:block; font-size:1.6rem; font-weight:700; line-height:1.1; } .kpi .n small { font-size:1rem; color:var(--muted); font-weight:600; } .kpi .n.small { font-size:1.05rem; }
.kpi .l { display:block; color:var(--muted); font-size:.8rem; margin-top:.15rem; } .kpi .sub { display:block; font-size:.78rem; margin-top:.2rem; }
.explain { background:#f8fafc; border-left:4px solid var(--acc); border-radius:6px; padding:.7rem .9rem; margin:.4rem 0 .9rem; font-size:.92rem; line-height:1.5; }
.pick-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap:.8rem; }
.pick { background:var(--card); border:1px solid var(--line); border-left:5px solid #94a3b8; border-radius:10px; padding:.8rem .9rem; display:flex; flex-direction:column; gap:.35rem; }
.pick.win { border-left-color: var(--ok); } .pick.loss { border-left-color: var(--bad); } .pick.open { border-left-color: #f59e0b; }
.pick-top { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--muted); } .pick-top .comp { background:#eef2ff; color:#3730a3; padding:.1rem .45rem; border-radius:999px; font-weight:600; } .pick-top .res { margin-left:auto; }
.pick .match { font-weight:600; font-size:1rem; } .pick .sel { font-size:1.15rem; font-weight:700; color:#0f172a; }
.pick .probs { display:flex; gap:1rem; margin-top:.2rem; } .pick .probs .v { display:block; font-weight:700; font-size:1.05rem; } .pick .probs .k { display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.pick .news { font-size:.8rem; color:#374151; border-top:1px dashed var(--line); padding-top:.4rem; }
.res { font-size:.75rem; padding:.12rem .5rem; border-radius:999px; font-weight:600; white-space:nowrap; } .res.win { background:#dcfce7; color:#166534; } .res.loss { background:#fee2e2; color:#991b1b; } .res.open { background:#fef3c7; color:#92400e; } .res.void { background:#e5e7eb; color:#374151; }
td.news { max-width:420px; }
@media (max-width: 720px) {
  table.resp, table.resp tbody, table.resp tr, table.resp td { display:block; width:100%; }
  table.resp thead { display:none; }
  table.resp tr { border:1px solid var(--line); border-radius:8px; margin-bottom:.6rem; padding:.3rem .2rem; background:#fff; }
  table.resp tr.win { background:#f0fdf4; } table.resp tr.loss { background:#fef2f2; } table.resp tr.open { background:#fffbeb; }
  table.resp td { border:0; padding:.2rem .5rem; display:flex; justify-content:space-between; gap:.8rem; }
  table.resp td::before { content: attr(data-l); color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.3px; flex:0 0 38%; }
  table.resp td.news { display:block; } table.resp td.news::before { display:block; margin-bottom:.15rem; }
  td.news { max-width:none; }
}

details.days { border:1px dashed var(--line); border-radius:8px; padding:.4rem .7rem; margin:.5rem 0; }
details.days summary { cursor:pointer; font-size:.9rem; color:var(--acc); font-weight:600; }

/* --- bet picker --- */
.tabs { display:flex; gap:.4rem; margin:.3rem 0 .6rem; } .tab { background:#e5e7eb; color:var(--ink); } .tab.on { background:var(--acc); color:#fff; }
.picklist { display:flex; flex-direction:column; gap:.4rem; max-height:420px; overflow-y:auto; padding-right:.2rem; }
.pickrow { display:flex; align-items:flex-start; gap:.6rem; border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; margin:0; cursor:pointer; font-size:.9rem; }
.pickrow.rec { border-left:4px solid var(--ok); } .pickrow:has(input:checked) { background:#eff6ff; border-color:var(--acc); }
.pickrow input { width:auto; margin:.25rem 0 0; display:inline-block; }
.pr-main { flex:1; display:flex; flex-direction:column; } .pr-match { font-weight:600; } .pr-sel { color:#0f172a; } .pr-meta { color:var(--muted); font-size:.78rem; text-align:right; white-space:nowrap; }
.combo { display:flex; gap:1.2rem; flex-wrap:wrap; background:#f8fafc; border-radius:8px; padding:.6rem .8rem; margin:.7rem 0 .3rem; }
.combo .k { display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; } .combo .v { display:block; font-weight:700; font-size:1.15rem; }
button:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width: 600px) { .pickrow { flex-wrap:wrap; } .pr-meta { text-align:left; white-space:normal; width:100%; padding-left:1.6rem; } }

.pickfilter { margin:.3rem 0 .5rem; } .pickfilter input[type=search] { padding:.4rem .55rem; border:1px solid #cbd5e1; border-radius:6px; }
label.inline { display:inline-flex; align-items:center; gap:.3rem; margin:0; } label.inline input { width:auto; display:inline-block; margin:0; }