:root {
  --bg: #0f1419; --card: #1a2129; --line: #2a343f; --text: #e6edf3; --muted: #8b98a5;
  --accent: #3fb950; --bad: #f85149; --warn: #d29922; --blue: #58a6ff;
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 980px; padding: 12px 16px 40px; background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
h1 { font-size: 20px; margin: 0; flex: 1; }
h2 { font-size: 15px; margin: 0 0 10px; }
.muted { color: var(--muted); font-weight: 400; font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { color: var(--muted); font-size: 13px; }
input, select, button { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 8px 10px; }
.picker input { flex: 1; min-width: 0; }
.picker select { width: 100%; margin-top: 8px; }
button { cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #04260f; font-weight: 600; margin-left: auto; }
button.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: wait; }
.msg { margin: 10px 0 0; color: var(--warn); }
.msg.err { color: var(--bad); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.stat b { display: block; font-size: 22px; }
.stat small { color: var(--muted); display: block; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chips button { padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.chips button.on { background: var(--blue); border-color: var(--blue); color: #04182e; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-size: 12px; font-weight: 500; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
td input { width: 72px; padding: 5px 7px; text-align: right; }
.pos { color: var(--accent); font-weight: 600; }
.neg { color: var(--bad); }
.tag { font-size: 12px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); }
.tag.ok { border-color: var(--accent); color: var(--accent); }
.tag.no { border-color: var(--bad); color: var(--bad); }
.tag.mid { border-color: var(--warn); color: var(--warn); }
.oddsbar { margin: 0 0 10px; font-size: 13px; }
.oddsbar.stale { color: var(--warn); }
#teamInput { flex: 1; min-width: 0; }
.row.head { margin: 0 0 10px; justify-content: space-between; }
.row.head h2 { margin: 0; }
:root { --good: #0ca30c; --critical: #d03b3b; --push: #6b7785; --grid: #3a4652; }
.dash { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.dash:first-of-type { border-top: 0; }
.dash header { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dash h3 { margin: 0; font-size: 17px; }
.kpis { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.histbox { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-width: 0; }
.histhead { display: flex; justify-content: space-between; font-size: 14px; }
svg.hist { width: 100%; height: auto; display: block; margin-top: 6px; }
svg.hist .good { fill: var(--good); } svg.hist .critical { fill: var(--critical); } svg.hist .push { fill: var(--push); }
svg.hist .half { opacity: .55; }
svg.hist .hit { fill: transparent; cursor: pointer; }
svg.hist .bar { outline: none; }
svg.hist.focus .bar path { opacity: .35; transition: opacity .12s; }
svg.hist.focus .bar.on path { opacity: 1; }
svg.hist .bar.on .hit { fill: rgba(255,255,255,.05); }
svg.hist .grid { stroke: var(--grid); stroke-width: 1; opacity: .45; }
svg.hist .mean { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.hist text.tick { text-anchor: end; font-size: 9px; }
svg.hist text.ax.small { font-size: 9px; }
.legend i.mean { background: none; border-top: 2px dashed var(--blue); height: 0; width: 14px; vertical-align: 3px; }
#chartTip { position: fixed; z-index: 50; max-width: 300px; background: #0b1016; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; }
#chartTip .tip-head { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
#chartTip .tip-score { font-size: 14px; margin-bottom: 6px; }
#chartTip .tip-metric { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; margin-bottom: 6px; }
#chartTip .tip-metric.good { background: rgba(12,163,12,.18); }
#chartTip .tip-metric.critical { background: rgba(208,59,59,.2); }
#chartTip .tip-metric.push { background: rgba(107,119,133,.25); }
#chartTip table { width: 100%; font-size: 12px; }
#chartTip td, #chartTip th { padding: 2px 4px; border: 0; text-align: right; }
#chartTip th { color: var(--muted); font-weight: 500; font-size: 11px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
#chartTip td:first-child, #chartTip th:first-child { text-align: left; padding-left: 0; }
#chartTip td:first-child { color: var(--muted); width: 78px; }
#chartTip .tip-note { color: var(--muted); font-size: 11px; margin-top: 4px; }
svg.hist .base { stroke: var(--grid); stroke-width: 1; }
svg.hist .ref { stroke: var(--text); stroke-width: 1.5; }
svg.hist text { font-size: 10px; text-anchor: middle; fill: var(--muted); }
svg.hist text.val { fill: var(--text); font-weight: 600; }
svg.hist text.reflabel { text-anchor: start; fill: var(--text); font-weight: 600; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend i.good { background: var(--good); } .legend i.critical { background: var(--critical); } .legend i.push { background: var(--push); }
td.book { color: var(--muted); font-size: 12px; text-align: left; }
#teamSel, #fixSel { width: 100%; margin-top: 8px; }
.insights { margin: 0; padding: 0; list-style: none; }
.insights li { padding: 7px 0 7px 26px; border-bottom: 1px solid var(--line); position: relative; }
.insights li::before { position: absolute; left: 0; }
.insights .info::before { content: 'ℹ️'; }
.insights .up::before { content: '📈'; }
.insights .down::before { content: '📉'; }
.insights .warn::before { content: '⚠️'; }
.games table { font-size: 13px; }
.games td, .games th { padding: 4px 6px; }
@media (max-width: 640px) { .teams { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr 1fr; } }

button.enter { background: var(--accent); border-color: var(--accent); color: #04260f; font-weight: 600; padding: 5px 12px; }
button.enter.mini { padding: 2px 9px; white-space: nowrap; }
button.enter.off { background: transparent; color: var(--accent); }
dialog#entryDlg { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  width: min(460px, calc(100vw - 32px)); }
dialog#entryDlg::backdrop { background: rgba(0,0,0,.6); }
dialog#entryDlg h2 { margin: 0 0 2px; font-size: 17px; }
dialog#entryDlg label { display: block; margin: 10px 0 4px; }
dialog#entryDlg select, dialog#entryDlg input { width: 100%; }
dialog#entryDlg .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
dialog#entryDlg .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; background: var(--bg);
  border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
dialog#entryDlg .facts b { font-weight: 600; }
dialog#entryDlg .check { font-size: 13px; margin: 10px 0 0; line-height: 1.5; }
dialog#entryDlg .row.end { justify-content: flex-end; margin-top: 14px; }
dialog#entryDlg .row.end .primary { margin-left: 0; }
dialog#entryDlg [hidden] { display: none !important; }
/* ✍️ aposta manual: o bilhete em pernas */
dialog#entryDlg { max-height: calc(100vh - 32px); overflow-y: auto; }
dialog#entryDlg .legs { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; margin: 10px 0; }
dialog#entryDlg .legs:empty { display: none; }
dialog#entryDlg .leghead { font-size: 12px; color: var(--muted); padding: 4px 0; }
dialog#entryDlg .legrow { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
dialog#entryDlg .legn { color: var(--muted); font-size: 12px; text-align: right; }
dialog#entryDlg .legtxt { overflow-wrap: anywhere; }
dialog#entryDlg .legedit { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }
dialog#entryDlg .gamenow { font-size: 13px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
dialog#entryDlg .pick { margin: 4px 0 6px; }
dialog#entryDlg .picklist { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-height: 240px; overflow-y: auto; }
dialog#entryDlg .picklist:empty { display: none; }
dialog#entryDlg .pickfx { text-align: left; width: 100%; padding: 7px 10px; font-size: 13px; }
dialog#entryDlg .chips { margin: 8px 0 0; }
dialog#entryDlg .legadd { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
dialog#entryDlg .legadd label { margin-top: 4px; }
dialog#entryDlg #enAddLeg { width: 100%; }
dialog#entryDlg .legodd { font-weight: 600; color: var(--blue); white-space: nowrap; }

#myText { width: 100%; }
#myMarket, #myLine { flex: 1; min-width: 160px; }
#myOdd { width: 140px; }
.verdict { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: 10px 12px; margin: 12px 0 4px; }
.verdict.ok { border-left-color: var(--accent); } .verdict.mid { border-left-color: var(--warn); } .verdict.no { border-left-color: var(--bad); }
.verdict.info { border-left-color: var(--blue); }
.verdict > b { font-size: 15px; margin-right: 8px; }
.verdict ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.verdict li { margin: 2px 0; }
h3.alt-h { font-size: 15px; margin: 16px 0 6px; }
.sug { font-size: 14px; margin: 0 0 8px; }
.sug button, table.alts button { padding: 3px 9px; font-size: 13px; }
table.alts td.why { white-space: normal; min-width: 160px; text-align: left; }
@media (max-width: 640px) { #myOdd { width: 100%; } }
label.gap { display: block; margin-top: 14px; }
#ghRepo { flex: 1; min-width: 200px; } #ghToken { flex: 2; min-width: 200px; }
#cloudInfo.err { color: var(--bad); }
#scanBudget, #planBudget { width: 100px; }
table.scanrank tr[data-go] { cursor: pointer; }
table.scanrank tr[data-go]:hover td { background: rgba(255,255,255,.03); }
table.scanrank tr.weak td, table.mainlines tr.weak td { opacity: .5; }
table.mainlines { font-size: 13px; margin: 8px 0 4px; }
table.mainlines tr.on td { background: rgba(255,255,255,.05); }
table.mainlines :is(td, th):first-child { text-align: left; }
.tag.price { border-color: var(--warn); color: var(--warn); border-style: dashed; }
table.scanrank :is(td, th):is(:nth-child(3), :nth-child(4), :nth-child(5)) { text-align: left; }
.scancard { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.scancard h3 { margin: 0; font-size: 16px; }
.scancard .facts { margin: 4px 0 0; }
.scancard .dash { border-top: 0; padding-top: 6px; }
.others { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin: 6px 0 4px; }
.skipped { font-size: 13px; margin: 8px 0; } .skipped ul { margin: 6px 0; padding-left: 18px; }
.specnote { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.specnote a { color: var(--blue); }
.specnote textarea { display: block; width: 100%; height: 90px; margin-top: 6px; font: 12px ui-monospace, Menlo, monospace; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.chips.saved { margin: 10px 0 0; align-items: center; }
#toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px)); background: #0b1016; border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#toast.err { border-color: var(--warn); }
#toast a { color: var(--blue); }
.histbox .rule { color: var(--text); font-weight: 600; }
svg.hist .bar.other-role path { opacity: .3; }
svg.hist .bar.other-role .val { opacity: .5; }
.histbox .byrole { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.histbox .byrole b { color: var(--text); font-weight: 600; }
.histhead .role-now { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
#chartTip .tip-role { font-size: 12px; color: var(--muted); margin: -2px 0 6px; }
#chartTip .tip-role b { color: var(--text); }

/* contexto do jogo e plano ao vivo dos escanteios do 1º tempo */
ul.ctx { margin: 8px 0 4px; padding-left: 18px; font-size: 13px; }
ul.ctx li { margin: 2px 0; }
details.h2h { font-size: 13px; margin: 0 0 6px; }
details.h2h ul { margin: 4px 0; padding-left: 18px; color: var(--muted); }
details.combos { margin: 8px 0; }
details.combos > summary { cursor: pointer; font-weight: 600; }
details.combos p { margin: 6px 0; }
.muted.small, .small { font-size: 12px; }
.plan { border: 1px solid var(--line, #2a3340); border-radius: 10px; padding: 8px 12px; margin: 8px 0 12px; }
.plan h4 { margin: 2px 0 6px; }
.plan ul { margin: 0; padding-left: 18px; }
.plan li { margin: 6px 0; }
.plan .chk { font-size: 12px; margin-top: 4px; }
.plan .verdict { font-size: 13px; border-left: 4px solid var(--muted); background: var(--card); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.plan .verdict > b { font-size: 14px; }
.plan .verdict ul { margin: 4px 0 0; padding-left: 4px; list-style: none; }
.plan .verdict li { margin: 2px 0; }
.plan .verdict li.pos { font-weight: 400; }
.plan .v-cheia { border-left-color: var(--accent); }
.plan .v-meia { border-left-color: var(--warn); }
.plan .v-nao { border-left-color: var(--bad); }
.plan .v-esperar { border-left-color: var(--blue); }
.plan details.xi { font-size: 12px; margin-top: 4px; }
button.mini { padding: 2px 8px; font-size: 12px; }
.ctxline { margin: 0 0 8px; font-size: 13px; }
.live { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; min-width: 0; }
.live h4 { margin: 0 0 8px; font-size: 14px; }
.live > p.muted { margin: 8px 0; }
table.livegrid { font-size: 13px; }
table.livegrid td .muted { font-size: 11px; }
.live .calc { border-top: 1px solid var(--line); padding-top: 8px; }
.live .calc label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.live .calc input { width: 90px; }
.live .calc select { width: 120px; }
.liveout { margin: 8px 0 0; font-size: 14px; }
table.scanrank.livelist :is(td, th):nth-child(n+5) { text-align: right; }
#scanOrder { align-items: center; }
table.livegrid :is(td, th):nth-child(n+2) { text-align: right; }

/* entrada manual */
dialog#entryDlg label.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text); margin: 12px 0 0; cursor: pointer; }
dialog#entryDlg label.chk input { width: auto; margin: 2px 0 0; }
dialog#entryDlg #enLineMsg { margin: 4px 0 0; }
dialog#entryDlg .facts[hidden] { display: none; }

/* tabela atual (momento dos times) */
table.tablenow { border-collapse: collapse; font-size: 12px; margin: 4px 0; }
table.tablenow th, table.tablenow td { padding: 2px 8px; text-align: right; border-bottom: 1px solid var(--line); }
table.tablenow th:nth-child(2), table.tablenow td:nth-child(2) { text-align: left; }
table.tablenow tr.on td { color: var(--blue); font-weight: 600; }

/* múltipla */
.multisum { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; display: grid; gap: 6px; font-size: 14px; }
.multisum input { width: 90px; }
table.multitab input.mleg { width: 70px; }
table.multitab tr.bad td { background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* simulação */
.simbar { margin: 6px 0 10px; }
details.sims { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin: 14px 0; }
details.sims > summary { font-weight: 700; cursor: pointer; }
.simcard { border-top: 1px solid var(--line); padding: 8px 0; }
table.simtab td, table.simtab th { white-space: nowrap; }
table.simtab td.acts .mini + .mini { margin-left: 4px; }
table.simtab tr.othrow > td { white-space: normal; background: var(--bg); padding: 8px 10px; }

/* plano do dia */
#planSec h3 { margin: 14px 0 6px; font-size: 15px; }
table.plantab td, table.plantab th { white-space: nowrap; }
textarea.plantext { width: 100%; min-height: 220px; font: 13px/1.5 ui-monospace, monospace; }
table.mlegs { border-collapse: collapse; font-size: 13px; margin: 4px 0; }
table.mlegs td { padding: 3px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.multisum select { max-width: 320px; }

/* o porquê de cada entrada do plano (planwhy.js) */
.whycard .facts { margin: 2px 0 6px; font-size: 14px; }
.whysum { margin: 4px 0 8px; font-size: 14px; line-height: 1.45; }
.whygrid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 6px 18px; align-items: start; margin-bottom: 8px; }
ul.why { margin: 0; padding: 0; list-style: none; font-size: 13px; }
ul.why li { margin: 3px 0; padding-left: 18px; position: relative; line-height: 1.4; }
ul.why li > b:first-child { position: absolute; left: 0; width: 16px; text-align: center; }
svg.chance { width: 100%; max-width: 420px; height: auto; display: block; }
svg.chance .grid { stroke: var(--grid); stroke-width: 1; opacity: .45; }
svg.chance .de { fill: #6b7785; }
svg.chance .em { fill: #388bfd; }
svg.chance text { font-size: 10px; fill: var(--muted); }
svg.chance text.lbl { text-anchor: end; font-size: 11px; }
svg.chance text.v { font-size: 11px; fill: var(--text); }
svg.chance text.on { fill: var(--text); font-weight: 600; }
svg.chance text.tick { text-anchor: middle; }
svg.chance .ref { stroke: var(--text); stroke-width: 1.5; }
svg.chance text.reflabel { fill: var(--text); font-weight: 600; text-anchor: middle; }
.strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 4px 0 2px; }
.stripbox small { display: block; font-size: 12px; color: var(--muted); }
.stripbox small b { color: var(--text); font-weight: 600; }
svg.hist.strip { max-width: 300px; margin-top: 2px; }
.legwhy { border-top: 1px solid var(--line); padding: 8px 0 4px; font-size: 13px; }
@media (max-width: 640px) { .whygrid, .strips { grid-template-columns: minmax(0, 1fr); } }

/* linhas da varredura (o que buscar e trazer) */
.row.markets { gap: 6px 12px; font-size: 13px; }
.row.markets label.mk { display: inline-flex; align-items: center; gap: 5px; color: var(--text); cursor: pointer; }
.row.markets label.mk input { width: auto; margin: 0; }

/* ---- layout (Jeferson, 13/10/2026: "o app está muito confuso e poluído — separações claras"): barra do topo com as
   abas, uma seção de cada vez, cabeçalhos curtos e as explicações recolhidas em "Como funciona" ---- */
body { max-width: 1040px; padding: 0 16px 48px; }
header.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 -16px 16px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
header.topbar h1 { flex: 0 0 auto; font-size: 18px; }
nav.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
nav.tabs button { border: 0; background: transparent; color: var(--muted); padding: 8px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
nav.tabs button:hover { color: var(--text); background: rgba(255,255,255,.04); }
nav.tabs button.on { color: var(--text); background: var(--card); box-shadow: inset 0 -2px 0 var(--accent); }
header.topbar #quota { font-size: 12px; }
.pane[hidden] { display: none; }
.card { border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.sechead h2 { font-size: 18px; margin: 0 0 2px; }
.sechead p { margin: 0; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.toolbar .primary { margin-left: auto; }
details.howto { margin: 10px 0 0; font-size: 13px; }
details.howto > summary { cursor: pointer; color: var(--blue); }
details.howto .howbody { margin-top: 6px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
details.howto .howbody p { margin: 0 0 8px; }
details.howto .howbody p:last-child { margin: 0; }
details.howto b { color: var(--text); }
.row.markets { padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--line); }

/* plano: cada parte num bloco próprio */
.pblock { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
header.pblock-h { display: block; margin: 0 0 10px; }
.pblock-h h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.pblock-h p { margin: 4px 0 0; }
.count { font-size: 12px; font-weight: 700; background: var(--line); color: var(--text); border-radius: 999px; padding: 1px 9px; }
.pblock.summary { border-left: 4px solid var(--accent); }
.sumtop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sumtop h3 { margin: 0 0 2px; font-size: 17px; }
.sumstake { text-align: right; font-size: 14px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.badge { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.badge b { margin-left: 2px; }
.badge.zero { opacity: .45; }
.badge.sub { color: var(--muted); }
.pblock .simbar { margin: 8px 0; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 13px; }
details.funnelbox { font-size: 13px; margin: 6px 0 0; }
details.funnelbox > summary { cursor: pointer; color: var(--muted); }
details.funnelbox p.funnel { margin: 6px 0 0; }
.empty-state { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; color: var(--muted); margin-bottom: 16px; }
.empty-state p { margin: 0 0 6px; }
table.plantab td { vertical-align: middle; }
table.plantab .game { font-weight: 600; }
table.plantab tr[data-go] { cursor: pointer; }
table.plantab tr[data-go]:hover td { background: rgba(255,255,255,.03); }
table.plantab :is(td, th):is(:nth-child(3), :nth-child(4)) { text-align: left; }
.pblock .multisum { background: var(--bg); }

/* o porquê de cada entrada e as outras linhas do jogo */
.whycard { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.whyhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.whyhead h4 { margin: 0; font-size: 15px; }
.whytools { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
details.othlines { flex: 1 1 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
details.othlines > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
table.othtab { font-size: 13px; margin-top: 6px; }
table.othtab tr.grp td { border-top: 2px solid var(--line); }
table.othtab td.acts { white-space: nowrap; }
.othchart { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.othhead { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 6px; }
@media (max-width: 640px) {
  header.topbar h1 { font-size: 16px; }
  nav.tabs { order: 3; flex-basis: 100%; }
  .sumstake { text-align: left; }
  .toolbar .primary { margin-left: 0; }
}
/* a barra do topo é fixa: o que a tela rola até (o porquê de cada entrada, os blocos, a análise do jogo) para abaixo dela */
:root { --topbar-h: 64px; }
@media (max-width: 640px) { :root { --topbar-h: 108px; } }
.pblock, .whycard, details.othlines, .othchart, #out, .card, .simcard { scroll-margin-top: calc(var(--topbar-h) + 8px); }
/* no celular a tabela das outras linhas rola dentro do quadro, sem esticar o cartão */
.whytools > *, details.othlines, .othbody, .pblock, .whycard { min-width: 0; }
details.othlines .scroll { max-width: 100%; }