/* Estatistica da bola — layout de docs/design/HANDOFF.md.

   Toda cor vem dos tokens abaixo; trocar de tema e trocar os tokens, em
   `:root[data-tema="claro"]`. Todo numero vai em Geist Mono, com virgula
   decimal (quem formata e o app.js). */

/* ---------- tokens ---------- */
:root{
  --bg:#0b1410;
  --surface:#111e17;
  --surface2:#0c1711;
  --line:#223629;
  --ink:#eef4ef;
  --muted:#9db3a6;
  --brand:#4ee0a0;
  --onbrand:#04210f;
  --amber:#ffb547;
  --coral:#ff8b7a;
  --chip:#1a2e23;
  --glow:rgba(78,224,160,.045);
  --f-titulo:"Bricolage Grotesque",system-ui,sans-serif;
  --f-texto:"Hanken Grotesk",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,monospace;
}
:root[data-tema="claro"]{
  --bg:#f2f6f0;
  --surface:#ffffff;
  --surface2:#e9f0e7;
  --line:#d3ddd1;
  --ink:#11201a;
  --muted:#46594f;
  --brand:#0b7a46;
  --onbrand:#ffffff;
  --amber:#8f5200;
  --coral:#b3382a;
  --chip:#e3ece1;
  --glow:rgba(11,122,70,.05);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-texto);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button{font-family:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0}

/* pilula de contorno discreto: tema, abrir card, acoes secundarias */
.btn-ghost{
  min-height:44px;padding:0 18px;border-radius:999px;border:0;
  background:transparent;color:var(--muted);font-size:12px;font-weight:600;
}
.btn-ghost:hover{background:var(--chip)}
.btn-ghost.mini{min-height:36px;padding:0 14px;border:1px solid var(--line);color:var(--ink);font-size:11px}
/* acao principal de um bloco: contorno ambar */
.btn-contorno{
  min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--amber);
  background:transparent;color:var(--amber);font-size:12px;font-weight:700;
}
.btn-contorno:hover{background:color-mix(in srgb,var(--amber) 14%,transparent)}
.btn-contorno:disabled{opacity:.6;cursor:wait}

/* etiquetas pequenas no topo dos cards e do painel */
.tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;
  padding:2px 10px;border-radius:999px;line-height:1.6}
.tag.valor{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand)}
.tag.ajust{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}

/* ---------- hero ---------- */
/* listras verticais quase invisiveis: as faixas do gramado */
.hero{
  background-image:repeating-linear-gradient(90deg,var(--glow) 0,var(--glow) 90px,transparent 90px,transparent 180px);
  border-bottom:1px solid var(--line);
}
.hero-in{max-width:1280px;margin:0 auto;padding:28px 32px 40px;display:flex;flex-direction:column;gap:32px}
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.marca{display:flex;align-items:center}
.logo{height:56px;width:auto;display:block}
.logo-claro{display:none}
:root[data-tema="claro"] .logo-claro{display:block}
:root[data-tema="claro"] .logo-escuro{display:none}
.tema{
  min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.tema:hover{background:var(--chip)}

.hero-grid{display:flex;gap:48px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.hero-txt{flex:1 1 560px;display:flex;flex-direction:column;gap:20px;max-width:760px}
.kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* some da tela, mas continua no leitor de tela */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero h1{font-family:var(--f-titulo);font-weight:800;font-size:clamp(34px,5vw,60px);
  line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.lead{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:60ch;text-wrap:pretty}

.destaque{
  flex:0 1 380px;min-width:280px;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;
}
.destaque-rot{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.destaque-jogo{font-family:var(--f-titulo);font-weight:700;font-size:18.5px;line-height:1.2}
.destaque p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.destaque strong{font-family:var(--f-mono);font-weight:600}
.destaque .m{color:var(--brand)}
.destaque .k{color:var(--amber)}
.destaque .d{color:var(--ink);font-family:inherit}

/* ---------- corpo ---------- */
.corpo{max-width:1280px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:32px}

/* ---------- filtros: menu suspenso em cascata ---------- */
/* esporte > pais > campeonato. Abre com :hover e :focus-within; o atraso na
   saida (visibility com delay) da tempo de ir na diagonal de um pais ate os
   campeonatos dele sem o submenu sumir no caminho. */
.filtros{position:relative;z-index:20;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mf,.mf-sub{list-style:none;margin:0;padding:0}
.mf{display:flex;gap:6px}
.mf-item{position:relative}
.mf-topo{
  min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.mf-topo.atual{border-color:var(--brand);color:var(--brand)}
.mf-item:hover > .mf-topo,.mf-item:focus-within > .mf-topo{background:var(--surface2)}
.mf-item:hover > .mf-topo .caret,.mf-item:focus-within > .mf-topo .caret{transform:rotate(180deg)}

.mf-sub{
  position:absolute;min-width:230px;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgb(0 0 0 / .22);
  visibility:hidden;opacity:0;transition:opacity .12s,visibility 0s .18s;
}
.mf-baixo{top:calc(100% + 6px);left:0}
/* ponte invisivel sobre o vao entre o botao e o submenu, para o hover nao cair */
.mf-baixo::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.mf-lado{top:-7px;left:calc(100% + 6px);max-height:70vh;overflow-y:auto}
.mf-lado::before{content:"";position:absolute;top:0;bottom:0;left:-8px;width:8px}
.mf-item:hover > .mf-sub,.mf-item:focus-within > .mf-sub{visibility:visible;opacity:1;transition-delay:0s}
/* depois de escolher a liga o menu some, mesmo com o mouse em cima */
.mf-fechado .mf-sub{visibility:hidden !important;opacity:0 !important}

.mf-op{
  width:100%;min-height:36px;padding:0 10px;display:flex;align-items:center;gap:10px;
  border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;font-size:13px;font-weight:600;
  white-space:nowrap;
}
.mf-op span{flex:1}
.mf-op:not(:disabled):hover,.mf-item:hover > .mf-pais,.mf-item:focus-within > .mf-pais{background:var(--chip)}
.mf-pais .caret{transform:rotate(-90deg);color:var(--muted)}
.mf-pais.atual{color:var(--brand);font-weight:800}
.mf-pais.off{color:var(--muted);font-weight:500}
.mf-liga[aria-current="true"]{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand);font-weight:800}
/* liga sem jogo: visivel, para saber que e coberta, mas sem clique */
.mf-liga:disabled{color:var(--muted);font-weight:500;text-decoration:line-through;opacity:.6}
.mf-n{font-family:var(--f-mono);font-size:10px;font-style:normal;color:var(--muted);font-weight:500}

.mf-caminho{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;min-width:0}
.mf-caminho span,.mf-caminho i{color:var(--muted);font-style:normal;font-weight:600}
.mf-caminho b{color:var(--brand);font-weight:800}

/* ---------- grade: pesos + jogos ---------- */
.grade{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}

.pesos{
  /* gruda na tela sem rolagem propria; quando e mais alto que a janela, o
     app.js ajusta o `top` para ele andar com a pagina ate mostrar o fim */
  flex:1 1 320px;max-width:380px;position:sticky;top:24px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;
  display:flex;flex-direction:column;gap:20px;
}
.pesos-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pesos-hd h2{font-family:var(--f-titulo);font-weight:700;font-size:18px;letter-spacing:-.01em}
.soma{font-size:12px;color:var(--muted)}
.soma b{font-weight:600;color:var(--ink)}
.pesos-ajuda{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pesos-ajuda b{color:var(--ink)}

.segmentado{display:flex;padding:4px;gap:4px;background:var(--surface2);border-radius:999px}
.segmentado button{
  flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;
  color:var(--muted);font-size:12px;font-weight:600;
}
.segmentado button:not(:disabled):not([aria-pressed="true"]):hover{background:var(--chip);color:var(--ink)}
.segmentado button[aria-pressed="true"]{background:var(--brand);color:var(--onbrand);font-weight:700}
.segmentado button:disabled{opacity:.5}

.reset-geral{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 8px 8px 14px;border-radius:14px;font-size:12px;color:var(--amber);
  background:color-mix(in srgb,var(--amber) 12%,transparent)}

.lista-pesos{display:flex;flex-direction:column;gap:18px}
.pesos-acoes{display:flex;flex-direction:column;gap:8px}
.pesos-acoes .btn-contorno{min-height:48px;font-size:13px}
.salvo-status{font-size:11.5px;color:var(--brand);text-align:center}
.salvo-status:empty{display:none}

@media(max-width:960px){
  .pesos{position:static;max-width:none;flex-basis:100%}
}

/* ---------- campo de peso (painel da rodada e aba da partida) ---------- */
.wattr{display:flex;flex-direction:column;gap:2px;padding-left:10px;border-left:2px solid transparent}
/* peso fora do padrao: sem marca, um ajuste antigo vira resultado inexplicavel */
.wattr.mudou{border-left-color:var(--amber)}
.wattr-top{display:flex;align-items:center;gap:8px}
.wattr-nome{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.3}
.wajuda{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  color:var(--muted);font-size:10px;font-weight:700;cursor:help;text-decoration:none;
}
.wtrava{
  width:44px;height:32px;margin:-6px 0;border:0;border-radius:8px;flex:none;
  background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
}
.wtrava:hover{background:var(--chip)}
.wtrava[aria-pressed="true"]{color:var(--brand)}
/* aberto o arco fica torto; fechado, encaixado no corpo do cadeado */
.wtrava[aria-pressed="false"] .arco{transform:translateX(3px) rotate(12deg);transform-origin:16px 10px}
/* o valor e digitavel: parece a etiqueta do design, mas e um campo */
.wattr-num{
  width:64px;flex:none;text-align:center;padding:4px 8px;border-radius:8px;
  border:1px solid transparent;background:var(--surface2);color:var(--amber);
  font-family:var(--f-mono);font-size:12px;font-weight:600;
}
.wattr-num:hover{border-color:var(--line)}
.wattr-num:focus{outline:none;border-color:var(--amber)}
.wattr.travado input[type=range]{opacity:.55}

/* slider: trilho ambar ate o valor (--v, atualizado pelo app.js) */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;
  background:transparent;margin:0;cursor:pointer;--v:0%;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(to right,var(--amber) var(--v),var(--surface2) var(--v));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;
  background:var(--amber);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--amber);
}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--surface2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--amber)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--amber);border:3px solid var(--surface)}
input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}

/* ---------- coluna de jogos ---------- */
.jogos{flex:3 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.jogos-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.jogos-hd h2{font-family:var(--f-titulo);font-weight:800;font-size:27px;letter-spacing:-.02em}
#resumo-liga{font-size:13px;color:var(--muted)}
.lista{display:flex;flex-direction:column;gap:20px}
.vazio,.erro{padding:24px;border-radius:20px;border:1px dashed var(--line);color:var(--muted);text-align:center}
.erro{border-color:var(--coral);color:var(--coral)}

details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .caret{transform:rotate(180deg)}
.caret{flex:none;transition:transform .15s}

/* ---------- card de jogo ---------- */
.jogo{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.jogo.sem-mercado{border-style:dashed}
.j-topo{padding:20px 28px;display:flex;flex-direction:column;gap:14px}
.j-linha1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.j-quando{display:flex;align-items:baseline;gap:12px}
.j-data{font-weight:700;font-size:13px}
.j-meta{font-size:12px;color:var(--muted)}
.j-tags{display:flex;gap:6px;flex-wrap:wrap}
.j-linha2{display:flex;align-items:center;gap:20px}
.j-times{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.time{display:flex;align-items:center;gap:14px}
/* Escudo solto, sem circulo atras. Caixa quadrada fixa e object-fit:contain:
   escudos altos e largos ocupam o mesmo espaco e ficam proporcionais. */
.emblema{
  width:50px;height:50px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-titulo);font-weight:800;font-size:18px;color:var(--muted);
}
.emblema img{width:100%;height:100%;object-fit:contain}
.time-info{display:flex;flex-direction:column;gap:6px}
/* "Casa" / "Visitante" acima do nome: so uma ajuda discreta ao analista */
.time-lado{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  line-height:1;margin-bottom:-2px}
.time-nome{display:flex;align-items:baseline;gap:10px}
.time-nome .t{font-family:var(--f-titulo);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1}
.pos{font-family:var(--f-mono);font-size:17px;font-weight:700;color:var(--muted);cursor:help}
/* placar entre os times; antes do inicio, um traco em cada lado */
.placar{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}
.placar-gols{display:flex;align-items:center;gap:8px;font-family:var(--f-mono)}
.placar-gols b{font-size:24px;font-weight:600;min-width:1ch;text-align:center}
.placar-gols span{color:var(--muted);font-size:14px}
.placar.sem-placar .placar-gols b{color:var(--muted);font-weight:500}
.placar-selo{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:5px}
.placar-selo.ao-vivo{color:var(--coral)}
.placar-selo.ao-vivo i{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.placar-selo.ao-vivo i{animation:none}}

/* forma recente: a letra vai dentro, cor nunca e a unica pista */
.forma{display:flex;gap:4px}
.fq{
  width:22px;height:22px;border-radius:6px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--f-mono);font-size:10px;font-weight:600;font-style:normal;
}
.fq.v{background:var(--brand);color:var(--onbrand)}
.fq.d{background:var(--coral);color:var(--onbrand)}
.fq.e{background:var(--chip);color:var(--muted);border:1px solid var(--line)}


/* tabela de odds */
.odds{overflow-x:auto;border-top:1px solid var(--line)}
.odds-in{min-width:600px;padding:0 28px}
.odds-linha{
  display:grid;grid-template-columns:minmax(140px,1.4fr) repeat(3,minmax(90px,1fr)) 72px;
  gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);
}
.odds-cab{border-top:0;padding:10px 0;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.odds-cab span:not(:first-child){text-align:center}
.odds-cab span:last-child{text-align:right}
.casa-nome{display:flex;align-items:center;gap:8px;font-weight:600}
.selo-global{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;padding:2px 7px;
  border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:help}
.odd-cel{display:flex;flex-direction:column;align-items:center;gap:2px}
.odd{font-family:var(--f-mono);font-weight:600;font-size:13.5px;padding:3px 10px;border-radius:8px;color:var(--ink)}
/* melhor odd do resultado entre as casas */
.odd.best{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.odd-limpa{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.margem{text-align:right;font-family:var(--f-mono);font-size:11px;color:var(--muted)}

.sem-mercado-aviso{margin:0;padding:14px 28px;border-top:1px solid var(--line);
  background:var(--surface2);font-size:12.5px;color:var(--muted)}
.sem-mercado-aviso b{color:var(--ink)}

/* linha "Seu modelo" rebaixada */
.modelo{background:var(--surface2);border-top:1px solid var(--line);overflow-x:auto}
.modelo-in{min-width:600px;padding:10px 28px;display:grid;
  grid-template-columns:minmax(140px,1.4fr) repeat(3,minmax(90px,1fr)) 72px;gap:8px;align-items:center}
.modelo-rot{display:flex;flex-direction:column}
.modelo-rot b{font-weight:700;color:var(--brand)}
.modelo-rot span{font-size:10px;color:var(--muted)}
.modelo-v{text-align:center;font-family:var(--f-mono);font-weight:600;font-size:14.5px}

/* grafico Mercado x Seu modelo, escala 0-100% */
.comparacao{padding:14px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:20px;border-top:1px solid var(--line)}
.cmp{display:flex;flex-direction:column;gap:10px}
.cmp-cab{display:flex;align-items:center;justify-content:space-between}
.cmp-cab span:first-child{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.delta{font-family:var(--f-mono);font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.delta.mais{color:var(--brand)}
.delta.menos{color:var(--amber)}
.cmp-l{display:flex;align-items:center;gap:10px}
.cmp-rot{flex:0 0 68px;font-size:11px;font-weight:600;white-space:nowrap}
.cmp-l.mk .cmp-rot,.cmp-l.mk .cmp-v{color:var(--amber)}
.cmp-l.md .cmp-rot,.cmp-l.md .cmp-v{color:var(--brand)}
.trilho{flex:1;height:10px;border-radius:999px;background:var(--surface2)}
.trilho i{display:block;height:10px;border-radius:999px}
.cmp-l.mk .trilho i{background:var(--amber)}
.cmp-l.md .trilho i{background:var(--brand)}
.cmp-v{flex:0 0 52px;text-align:right;font-family:var(--f-mono);font-size:11px}

/* rodape do card */
.rodape{padding:12px 28px 14px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.metricas{display:flex;gap:32px;flex-wrap:wrap}
.metrica{display:flex;flex-direction:column;gap:2px}
.mk-lab{font-size:10px;color:var(--muted)}
.mk-val{font-size:13px;font-weight:600}
.mk-val.num{font-family:var(--f-mono)}
.mk-mercado{font-family:var(--f-mono);font-size:10px;color:var(--muted);font-weight:500;margin-left:6px;font-style:normal}
.xg-casa{font-family:var(--f-mono);color:var(--brand)}
.xg-fora{font-family:var(--f-mono);color:var(--amber)}

/* ---------- painel expandido com abas ---------- */
.painel{border-top:1px solid var(--line);background:var(--bg);padding:14px 20px 18px;
  display:flex;flex-direction:column;gap:12px}
/* botoes de aba embaixo dos times; nenhum aberto = card fechado */
.abas-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.abas{display:flex;gap:4px;padding:4px;background:var(--surface2);border-radius:8px;flex-wrap:wrap}
.aba{min-height:36px;padding:0 16px;border:0;border-radius:6px;font-size:11.5px;font-weight:700;
  background:transparent;color:var(--muted)}
/* hover: o botao inteiro clareia com um verde leve, nao so a letra */
.aba{transition:background .12s,color .12s}
.aba:not([aria-selected="true"]):hover{color:var(--ink);background:color-mix(in srgb,var(--brand) 18%,transparent)}
.aba[aria-selected="true"]:hover{filter:brightness(1.08)}
.aba[aria-selected="true"]{background:var(--brand);color:var(--onbrand)}
/* "Pesos da partida" e a opcao principal do card (dela saem todas as outras
   leituras): enquanto fechada, pisca devagar para chamar o analista. Aberta,
   fica no verde cheio de qualquer aba ativa. */
.aba[data-aba="pesos"]:not([aria-selected="true"]){color:var(--brand);animation:chamar-pesos 2.6s ease-in-out infinite}
.aba[data-aba="pesos"]:not([aria-selected="true"]):hover{animation-play-state:paused}
@keyframes chamar-pesos{
  0%,100%{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent)}
  50%{background:color-mix(in srgb,var(--brand) 24%,transparent);box-shadow:inset 0 0 0 1px var(--brand),0 0 12px color-mix(in srgb,var(--brand) 35%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .aba[data-aba="pesos"]:not([aria-selected="true"]){animation:none;background:color-mix(in srgb,var(--brand) 16%,transparent);
    box-shadow:inset 0 0 0 1px var(--brand)}
}
.btn-fechar{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);
  font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.btn-fechar:hover{color:var(--ink);background:var(--chip)}
.btn-fechar[hidden]{display:none}
/* aviso no topo da aba de pesos: o resto do painel deriva dela */
.pesos-aviso{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--amber);background:var(--surface2);
  border-radius:8px;font-size:12px;line-height:1.5;color:var(--muted)}
.pesos-aviso b{color:var(--ink)}
.pesos-estado{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:10px}

/* aba Pesos da partida: grade densa */
.grade-pesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:8px 24px}
.grade-pesos .wattr-nome{font-size:11px;line-height:1.25}
.grade-pesos .wajuda{width:20px;height:20px}
.grade-pesos .wtrava{width:32px;height:28px;margin:0}
.grade-pesos .wattr-num{width:56px;font-size:11px;padding:2px 6px}
.grade-pesos input[type=range]{height:22px}

/* aba Fatores */
.fatores{overflow-x:auto}
/* Uma grade so para todas as linhas (subgrid): a coluna do nome se ajusta ao
   nome mais longo, sem quebra, e as barras de todas as linhas comecam no mesmo x. */
.fatores-in{min-width:600px;display:grid;grid-template-columns:max-content 1fr max-content;gap:6px 14px}
.ft-linha{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:26px}
.ft-cab{align-items:end;font-size:10px;color:var(--muted)}
/* o titulo da coluna quebra a vontade e nao alarga a coluna dos nomes */
.ft-cab>span:first-child{width:0;min-width:100%}
.ft-times{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.ft-times span{display:flex;flex-direction:column;line-height:1.2}
.ft-times strong{font-size:16px;font-weight:800;color:var(--ink)}
.ft-times i{font-style:normal;font-size:10.5px;color:var(--muted)}
.ft-nome{font-size:11.5px;font-weight:600;white-space:nowrap}
.ft-peso{font-family:var(--f-mono);font-size:10px;color:var(--amber);font-weight:500}
.ft-barras{display:grid;grid-template-columns:26px 1fr 1fr 26px;gap:8px;align-items:center}
.ft-nota{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--muted)}
.ft-nota.casa{text-align:right}
.ft-nota.melhor{color:var(--brand)}
/* barras opostas: a do mandante cresce para a esquerda */
.ft-trilho{height:7px;border-radius:999px;background:var(--surface2);display:flex}
.ft-trilho.l{justify-content:flex-end}
.ft-trilho i{height:8px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.ft-trilho i.melhor{background:var(--brand);border:0}
.ft-vant{display:flex;align-items:baseline;gap:6px;font-size:11px;font-weight:600;cursor:help;white-space:nowrap}
.ft-vant b{font-family:var(--f-mono);font-weight:600;min-width:2.6em;text-align:right}
.ft-vant.casa{color:var(--brand)}
.ft-vant.fora{color:var(--amber)}
.ft-vant.equilibrado{color:var(--muted)}

/* aba Confrontos: duas linhas fixas — em cima o confronto direto (geral e
   so na competicao), embaixo a forma de cada equipe. Com auto-fit, as quatro
   colunas quebravam em lugares diferentes conforme a largura da tela. */
.confrontos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 28px;align-items:start;font-size:11px}
@media(max-width:640px){.confrontos{grid-template-columns:minmax(0,1fr)}}
.cf-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.cf-tit{font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-tit.casa{color:var(--brand)}
.cf-tit.fora{color:var(--amber)}
/* resumo: uma linha por equipe, uma coluna por metrica */
.h2h-res{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,22px) repeat(2,36px) repeat(2,24px) 38px;gap:2px 6px;
  align-items:center;padding-bottom:4px;border-bottom:1px solid var(--line)}
.h2h-res span{text-align:center;font-family:var(--f-mono);font-weight:600}
.h2h-res>span:nth-child(-n+9){font-family:var(--f-texto);font-size:10px;font-weight:500;
  color:var(--muted);cursor:help}
.h2h-res .r-time{text-align:left;font-family:var(--f-texto);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2h-res .casa{color:var(--brand)}
.h2h-res .fora{color:var(--amber)}
/* cada jogo numa linha: data | mandante daquele jogo | placar | visitante.
   Colunas fixas para o placar ficar na mesma vertical em todas as linhas. */
.h2h-jogo{display:grid;grid-template-columns:58px minmax(0,1fr) 34px minmax(0,1fr);gap:8px;
  align-items:baseline;padding:3px 0;border-bottom:1px dashed var(--line);cursor:default}
.h2h-jogo:last-child{border-bottom:0}
.h-time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.h2h-jogo .h-time:nth-child(2){text-align:right}
.h-time.casa{color:var(--brand)}
.h-time.fora{color:var(--amber)}
.h-time.venceu{font-weight:800}
/* o ponto de quem abriu o placar fica sempre do lado de dentro, junto do placar */
.h-ponto,.h-time.abriu::after,.h-time.abriu::before{display:inline-block;width:5px;height:5px;
  border-radius:50%;background:currentColor;vertical-align:middle}
.h2h-jogo .h-time.abriu:nth-child(2)::after{content:"";margin-left:5px}
.h2h-jogo .h-time.abriu:nth-child(4)::before{content:"";margin-right:5px}
.h-legenda{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}
.h-legenda .h-ponto{background:var(--muted)}
/* nomes longos de proposito: `.d`, `.p` de uma letra colidiam com as classes
   de resultado do quadradinho (`.fq.d` = derrota) e a data pintava o "D" */
.h-data{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.h-placar{font-family:var(--f-mono);font-weight:600;text-align:center}
.cf-sep{height:1px;background:var(--line);margin:4px 0}
.ult{display:grid;grid-template-columns:22px 40px 38px 1fr;gap:8px;align-items:center}
.u-data{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.u-placar{font-family:var(--f-mono);font-weight:600}
.u-loc{font-size:10px;color:var(--muted);cursor:help}
.cf-vazio{color:var(--muted)}

/* aba Analise por I.A. */
.ia{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ia-texto{margin:0;font-size:13px;line-height:1.6;text-wrap:pretty}
.ia-texto.carregando{color:var(--muted);font-style:italic}
.ia-texto.erro{color:var(--coral)}
.ia-aviso{margin:0;font-size:11px;color:var(--amber)}
.ia-nota{margin:0;font-size:10px;color:var(--muted)}

/* ---------- notas ---------- */
.notas{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.notas details{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.notas summary{min-height:56px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-titulo);font-weight:700;font-size:15.5px}
.notas p{margin:0;padding:0 24px 22px;max-width:90ch;color:var(--muted);line-height:1.65;text-wrap:pretty}
.notas p b{color:var(--ink)}

/* progresso da analise: barra fina no topo e um selo com a porcentagem.
   A API nao informa andamento, entao a barra avanca por estimativa, cada vez
   mais devagar, e so fecha em 100% quando a resposta chega. */
.progresso{position:fixed;inset:0 0 auto 0;z-index:50;pointer-events:none}
.progresso-barra{height:4px;background:color-mix(in srgb,var(--brand) 18%,transparent)}
.progresso-barra i{display:block;height:100%;width:0;background:var(--brand);transition:width .3s ease-out}
/* cartao flutuante com o radar do logotipo. O feixe da uma volta a cada 2 s;
   cada alvo acende no instante em que o feixe passa por ele (atraso = angulo
   do alvo / 360 x 2 s) e vai apagando ate a proxima volta. */
.progresso-card{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;
  padding:12px 20px 12px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 30px rgb(0 0 0 / .28);animation:surgir .25s ease-out}
.radar{width:58px;height:58px;flex:none;color:var(--brand);overflow:visible}
.radar-campo{opacity:.85}
.radar-feixe{transform-box:view-box;transform-origin:50px 50px;animation:giro 2s linear infinite}
.radar-alvo{opacity:.12;transform-box:fill-box;transform-origin:center;animation:alvo 2s ease-out infinite}
.radar-alvo.a1{animation-delay:.25s}
.radar-alvo.a2{animation-delay:1.27s}
.radar-alvo.a3{animation-delay:.73s}
.progresso-info{display:flex;flex-direction:column;gap:8px;min-width:170px}
.progresso-tit{font-family:var(--f-titulo);font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.progresso-linha{display:flex;align-items:center;gap:10px}
.progresso-mini{flex:1;height:5px;border-radius:4px;background:var(--surface2);overflow:hidden}
.progresso-mini i{display:block;height:100%;width:0;border-radius:4px;background:var(--brand);transition:width .3s ease-out}
.progresso-linha b{font-size:12px;color:var(--brand);min-width:3.2em;text-align:right}
@keyframes giro{to{transform:rotate(360deg)}}
@keyframes alvo{0%{opacity:1;transform:scale(1.5)}15%{opacity:1;transform:scale(1)}100%{opacity:.12;transform:scale(1)}}
@keyframes surgir{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){
  .radar-feixe,.radar-alvo,.progresso-card{animation:none}
  .radar-alvo{opacity:.6}
  .progresso-barra i,.progresso-mini i{transition:none}
}

/* ---------- tela de entrada (/entrar) ---------- */
.entrada{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;padding:32px 16px;
  background-image:repeating-linear-gradient(90deg,var(--glow) 0,var(--glow) 90px,transparent 90px,transparent 180px)}
.entrada-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:32px 28px;display:flex;flex-direction:column;gap:18px}
.entrada-card .logo{height:auto;width:100%;max-width:300px;align-self:center}
.entrada-lead{margin:0;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.5}
.entrada-abas{align-self:stretch}
.entrada-abas .aba{flex:1;font-size:12.5px}
.entrada-form{display:flex;flex-direction:column;gap:14px}
.entrada-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700}
.entrada-form input{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface2);color:var(--ink);font:inherit;font-size:14px;font-weight:400}
.entrada-form input:focus-visible{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.entrada-dica{font-weight:400;color:var(--muted);font-size:11.5px}
.entrada-erro{margin:0;color:var(--coral);font-size:12.5px;font-weight:600}
.entrada-erro:empty{display:none}
.entrada-btn{min-height:48px;border:0;border-radius:8px;background:var(--brand);color:var(--onbrand);
  font-size:14px;font-weight:800}
.entrada-btn:hover:not(:disabled){filter:brightness(1.08)}
.entrada-btn:disabled{opacity:.6;cursor:not-allowed}
.entrada-btn[aria-busy=true]{cursor:wait}
.entrada-titulo{margin:0;text-align:center;font-family:var(--f-titulo);font-size:20px;font-weight:800}
.entrada-link{align-self:center;min-height:44px;display:inline-flex;align-items:center;padding:0 8px;border:0;
  background:none;color:var(--brand);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.entrada-link[hidden]{display:none}
/* mostrar/ocultar senha */
.senha-campo{position:relative;display:flex}
.senha-campo input{flex:1;padding-right:52px}
.senha-olho{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;
  border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.senha-olho:hover{color:var(--ink)}
.senha-olho:focus-visible{outline:2px solid var(--brand);outline-offset:-4px}
.senha-olho .risco{display:none}
.senha-olho[aria-pressed=true] .risco{display:inline}
.captcha{min-height:65px;display:flex;justify-content:center}
/* 2FA */
.codigo{font-family:var(--f-mono,monospace);font-size:22px !important;letter-spacing:.4em;text-align:center}
.passos{margin:0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.55;display:grid;gap:4px}
.qr{display:grid;place-items:center;min-height:236px;padding:8px;border-radius:12px;background:#fff}
.qr img{display:block;width:220px;height:220px}
.qr .entrada-dica{color:#5b6475}
.qr-segredo summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--brand);min-height:32px}
.qr-segredo code{display:block;margin-top:6px;padding:10px;border-radius:8px;background:var(--surface2);
  font-size:13px;word-break:break-all;user-select:all}
.entrada-btn-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.entrada-btn-link[hidden]{display:none}
.entrada-form select{min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface2);color:var(--ink);font:inherit;font-size:14px;font-weight:400}
.mfa-estado{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.mfa-estado b{color:var(--ink)}
.btn-secundario{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:none;
  color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.btn-secundario:hover{border-color:var(--brand)}
/* cadastro */
.entrada-card-largo{max-width:560px}
.grupo{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.grupo legend{padding:0;margin-bottom:10px;font-family:var(--f-titulo);font-size:15px;font-weight:700}
.linha-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.opcional{font-weight:400;color:var(--muted)}
.maiusculas{text-transform:uppercase}
.entrada-form input[aria-invalid=true]{border-color:var(--coral)}
.entrada-form input[type=date]{color-scheme:light dark}
.aceite{flex-direction:row !important;align-items:flex-start;gap:10px !important;font-weight:400 !important;
  font-size:13px !important;line-height:1.5}
.aceite input{min-height:auto !important;width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--brand)}
.aceite a,.entrada-rodape a,.texto-legal a{color:var(--brand);font-weight:700}
.entrada-rodape{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.texto-legal{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.6}
.texto-legal h2{margin:8px 0 0;font-family:var(--f-titulo);font-size:16px}
.texto-legal p,.texto-legal ul{margin:0}
.aviso-provisorio{padding:12px 14px;border-radius:10px;border:1px solid var(--coral);font-size:13px}
.afiliado-link{display:flex;gap:8px;align-items:stretch}
.afiliado-link input{flex:1;min-width:0}
@media (max-width:480px){.entrada-card{padding:24px 18px}}

/* usuario logado, no topo da tela de analises */
.topo-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.conta{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;
  font-size:13px;color:var(--muted);text-decoration:none}
.conta:hover{background:var(--chip);color:var(--ink)}
.conta b{color:var(--ink);font-weight:700}

/* menu da conta: abre no hover e com foco (teclado). A ponte ::before cobre o
   vao entre o botao e a caixa para o hover nao cair no caminho. */
.conta-menu{position:relative}
.conta-menu .caret{transition:transform .15s}
.conta-menu:hover .caret,.conta-menu:focus-within .caret{transform:rotate(180deg)}
.conta-sub{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 28px rgb(0 0 0 / .22);visibility:hidden;opacity:0;transition:opacity .12s,visibility 0s .18s}
.conta-sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.conta-menu:hover .conta-sub,.conta-menu:focus-within .conta-sub{visibility:visible;opacity:1;transition-delay:0s}
.conta-sub a,.conta-sub button{min-height:38px;padding:0 12px;display:flex;align-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;text-align:left}
.conta-sub a:hover,.conta-sub button:hover{background:var(--chip)}
.conta-sub button{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--coral)}
.conta-email{padding:6px 12px 8px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* palpite do usuario, embaixo das abas de cada card */
.palpite{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--line)}
.palpite-rot{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.palpite-ops{display:flex;gap:4px;flex-wrap:wrap}
.palpite-op{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--muted);font-size:12px;font-weight:700;transition:background .12s,color .12s,border-color .12s}
.palpite-op:hover{color:var(--ink);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.palpite-op[aria-checked="true"]{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.btn-salvar{min-height:36px;padding:0 16px;border:0;border-radius:6px;background:var(--brand);color:var(--onbrand);
  font-size:12px;font-weight:800}
.btn-salvar:hover:not(:disabled){filter:brightness(1.08)}
.btn-salvar:disabled{background:var(--chip);color:var(--muted);cursor:default}
/* analise ja salva: azul-claro, para separar de "falta salvar" (verde) */
.btn-salvar.salva,.btn-salvar.salva:disabled{background:#9fd4fb;color:#06304f}
:root[data-tema="claro"] .btn-salvar.salva{background:#cde9fd;color:#0b4a75}
.palpite-excluir{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;
  background:transparent;color:var(--muted)}
.palpite-excluir:hover{color:var(--coral);background:color-mix(in srgb,var(--coral) 14%,transparent)}
.palpite-status{font-size:12px;color:var(--muted)}
.palpite-status.erro{color:var(--coral);font-weight:600}
.palpite a,.palpite-fechado a{color:var(--brand);font-weight:700}
.palpite-fechado{font-size:12.5px;color:var(--muted)}
.palpite-fechado b{color:var(--ink)}

/* ---------- perfil (/perfil) ---------- */
.hero-perfil .hero-in{padding-bottom:28px;gap:24px}
.perfil-cab{display:flex;flex-direction:column;gap:8px}
.perfil-cab h1{font-family:var(--f-titulo);font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;line-height:1}
.perfil-cab .lead{font-size:14px}
.perfil{gap:20px}
.perfil-abas{align-self:flex-start}
.perfil-abas .aba{font-size:12.5px}
.perfil-painel{display:flex;flex-direction:column;gap:14px}

/* historico em lista: uma linha por analise, detalhe abre embaixo */
.hist-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hist-resumo{margin:0;color:var(--muted)}
.hist-resumo b{color:var(--ink)}
.hist-filtros{min-width:min(420px,100%)}

/* busca por time com menu de sugestoes */
.hist-ferramentas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hist-busca{position:relative;flex:1 1 280px;max-width:420px}
.hist-busca input{width:100%;min-height:44px;padding:0 40px 0 38px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px}
.hist-busca input::-webkit-search-cancel-button{display:none}
.hist-busca input:focus-visible{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.hist-busca-lupa{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hist-busca-limpar{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;
  border-radius:6px;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.hist-busca-limpar:hover{background:var(--chip);color:var(--ink)}
.hist-sugestoes{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;list-style:none;margin:0;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgb(0 0 0 / .22)}
.hist-sugestoes li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:7px;
  cursor:pointer;font-size:13px;font-weight:600}
.hist-sugestoes li small{font-weight:500;color:var(--muted);font-size:11.5px}
.hist-sugestoes li:hover,.hist-sugestoes li[aria-selected="true"]{background:var(--chip)}
.hist-busca-aviso{margin:-4px 0 0;font-size:12.5px;color:var(--muted)}
.hist-busca-aviso:empty{display:none}
.hist-busca-aviso b{color:var(--ink)}
.hist-cab,.hist-linha{display:grid;grid-template-columns:18px 78px minmax(220px,2.2fr) minmax(160px,1.4fr) 64px 128px 112px 36px;
  gap:14px;align-items:center}
.hist-cab{padding:0 16px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hist-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hist-item{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;overflow:hidden}
.hist-item.st-acerto{border-left-color:var(--brand)}
.hist-item.st-erro{border-left-color:var(--coral)}
.hist-item.st-vivo{border-left-color:var(--amber)}
.hist-linha{padding:12px 16px}
.hist-data{display:flex;flex-direction:column;line-height:1.25}
.hist-data b{font-size:12.5px}
.hist-data small,.hist-partida small,.hist-palpite small{color:var(--muted);font-size:11px}
.hist-partida{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.hist-partida b{font-weight:700}
.hist-partida i{font-style:normal;color:var(--muted)}
.hist-partida small{flex-basis:100%}
.hist-escudo{width:22px;height:22px;object-fit:contain;flex:none}
.hist-sigla{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted)}
.hist-palpite{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.hist-placar{font-size:16px;font-weight:600;text-align:center}
.hist-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.hist-status.st-acerto{color:var(--brand)}
.hist-status.st-erro{color:var(--coral)}
.hist-status.st-vivo{color:var(--amber)}
.hist-abrir{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--muted);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hist-abrir:hover{color:var(--ink);background:var(--chip)}
.hist-abrir[aria-expanded="true"] svg{transform:rotate(180deg)}
.hist-detalhe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px 32px;
  padding:16px;background:var(--surface2);border-top:1px solid var(--line)}
.hist-detalhe h3{font-size:12px;font-weight:800;margin-bottom:10px}
.hist-detalhe h3 small{font-weight:500;color:var(--muted);margin-left:6px}
.hist-pesos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hist-pesos li{display:grid;grid-template-columns:minmax(0,1fr) 110px 52px;gap:10px;align-items:center;font-size:12px}
.hist-pesos .num{text-align:right;color:var(--amber);font-weight:600}
.hist-peso-barra{height:6px;border-radius:4px;background:var(--chip);display:block;overflow:hidden}
.hist-peso-barra b{display:block;height:100%;border-radius:4px;background:var(--amber)}
.hist-1x2{border-collapse:collapse;width:100%;font-size:12px}
.hist-1x2 th,.hist-1x2 td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line)}
.hist-1x2 thead th{font-size:10.5px;color:var(--muted);font-weight:700}
/* cada numero centralizado debaixo do nome da sua coluna */
.hist-1x2 thead th[scope="col"],.hist-1x2 td{text-align:center;font-variant-numeric:tabular-nums}
.hist-1x2 tr.seu th,.hist-1x2 tr.seu td{color:var(--brand);font-weight:700}
.hist-1x2 small{font-weight:500}
.hist-salvo{margin:10px 0;font-size:11.5px;color:var(--muted)}
/* paginacao do historico */
.hist-paginacao{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:6px}
.pag-qtd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.pag-qtd select{min-height:36px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.pag-info{font-size:12.5px;color:var(--muted)}
.pag-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.pag-btn{min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pag-btn:hover:not(:disabled){background:var(--chip)}
.pag-btn.atual{background:var(--brand);border-color:var(--brand);color:var(--onbrand)}
.pag-btn:disabled{opacity:.4;cursor:default}
.pag-reticencias{padding:0 4px;color:var(--muted)}

/* selecao em lote */
.hist-check{width:18px;height:18px;margin:0;accent-color:var(--brand);cursor:pointer}
.hist-item.marcada{background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.hist-selecao{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 8px 8px 16px;border-radius:10px;
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);
  font-size:13px;font-weight:700}
.hist-selecao #hist-sel-n{margin-right:auto}
.hist-excluir-sel{min-height:36px;padding:0 14px;border:0;border-radius:8px;background:var(--coral);color:var(--onbrand);
  font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.hist-excluir-sel:hover{filter:brightness(1.08)}
.hist-lixeira{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;
  border-radius:6px;background:transparent;color:var(--muted)}
.hist-lixeira:hover{color:var(--coral);background:color-mix(in srgb,var(--coral) 14%,transparent)}

/* caixa de confirmacao (excluir analise) */
.confirmar{max-width:420px;width:calc(100% - 32px);padding:24px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);color:var(--ink)}
.confirmar::backdrop{background:rgb(0 0 0 / .55)}
.confirmar h2{font-family:var(--f-titulo);font-size:18px;font-weight:700;margin-bottom:10px}
.confirmar p{margin:0 0 12px;line-height:1.55;color:var(--muted)}
.confirmar p b{color:var(--ink)}
.confirmar-acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.confirmar-sim{min-height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--coral);color:var(--onbrand);
  font-size:13px;font-weight:800}
.confirmar-sim:hover:not(:disabled){filter:brightness(1.08)}
.hist-vazio{padding:28px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:12px;margin:0}
.hist-vazio a{color:var(--brand);font-weight:700}

/* desempenho: indicadores e acerto por tipo de palpite */
.dp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.dp-tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.dp-tile.destaque{border-color:var(--brand)}
.dp-rot{font-size:12px;color:var(--muted);font-weight:600}
.dp-valor{font-size:32px;font-weight:600;line-height:1.1}
.dp-tile.destaque .dp-valor{color:var(--brand)}
.dp-sub{font-size:11.5px;color:var(--muted)}
.dp-bloco{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;margin-top:12px}
.dp-bloco h2{font-family:var(--f-titulo);font-size:16px;font-weight:700}
.dp-barra{display:grid;grid-template-columns:160px minmax(0,1fr) 190px;gap:14px;align-items:center;font-size:12.5px}
.dp-trilho{height:10px;border-radius:4px;background:var(--surface2);overflow:hidden}
.dp-trilho i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.dp-barra-v small{color:var(--muted)}
.dp-nota{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6;max-width:90ch}

/* grafico mensal: acertos (verde) x erros (vermelho, o mesmo do "Errou" do
   historico). Verde x vermelho se confunde para quem tem deuteranopia: o
   significado vai tambem no ✓/✗ da legenda, na dica e na tabela. */
:root{--c-acerto:#20a66f;--c-erro:var(--coral)}
:root[data-tema="claro"]{--c-acerto:#0b7a46;--c-erro:var(--coral)}
.mg-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mg-legenda{display:flex;gap:16px;font-size:12px;color:var(--muted)}
.mg-legenda span{display:inline-flex;align-items:center;gap:6px}
.mg-chave{width:12px;height:12px;border-radius:3px;display:inline-block}
.mg-sub{margin:-4px 0 4px;font-size:12px;color:var(--muted)}
.mg{display:grid;grid-template-columns:28px 1fr;grid-template-rows:220px auto;column-gap:8px;row-gap:6px}
.mg-eixo{position:relative}
.mg-eixo span{position:absolute;right:0;transform:translateY(50%);font-family:var(--f-mono);font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.mg-area{position:relative}
.mg-linha{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.mg-cols{position:absolute;inset:0;display:flex;align-items:flex-end}
.mg-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;outline:none;cursor:default;border-radius:6px}
.mg-col:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}
.mg-col.ativa{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.mg-pilha{width:min(24px,60%);display:flex;flex-direction:column;gap:2px}
.mg-pilha i{display:block;min-height:3px}
.mg-pilha i:first-child{border-radius:4px 4px 0 0}
.mg-acerto{background:var(--c-acerto)}
.mg-erro{background:var(--c-erro)}
.mg-col.ativa .mg-pilha i{filter:brightness(1.15)}
.mg-col{cursor:pointer}
.mg-col.apagada .mg-pilha{opacity:.3}
.mg-col.selecionada{background:color-mix(in srgb,var(--brand) 10%,transparent)}

/* filtro de mes do desempenho */
.dp-filtro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dp-filtro label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dp-filtro select{min-height:40px;padding:0 36px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.dp-filtro select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.mg-rotulos{display:flex}
.mg-rotulos span{flex:1;text-align:center;font-size:11px;color:var(--muted);white-space:nowrap}
.mg-tip{position:absolute;top:0;transform:translateX(-50%);z-index:5;pointer-events:none;min-width:150px;
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:var(--surface2);
  border:1px solid var(--line);box-shadow:0 8px 20px rgb(0 0 0 / .25);font-size:12px;color:var(--muted)}
.mg-tip-tit{color:var(--ink);font-size:12.5px;margin-bottom:2px}
.mg-tip span{display:flex;align-items:center;gap:6px}
.mg-tip span b{color:var(--ink);font-size:13px}
.mg-tip-chave{width:12px;height:3px;border-radius:2px;display:inline-block}
.mg-tip small{margin-top:2px}
.mg-tabela summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);padding:4px 0}
.mg-tabela summary:hover{color:var(--ink)}
.mg-tabela table{margin-top:8px;max-width:520px}
.mg-tabela thead th[scope="col"]:first-child{text-align:left}

/* meus dados */
.dados-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;align-items:start}
.dados-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.dados-card h2{font-family:var(--f-titulo);font-size:17px;font-weight:700}
.dados-ok{margin:0;color:var(--brand);font-size:12.5px;font-weight:600}
.dados-ok:empty{display:none}

@media(max-width:900px){
  .hist-cab{display:flex;padding:0 16px}
  .hist-cab span{display:none}
  .hist-linha{grid-template-columns:auto 1fr auto auto;gap:8px 12px}
  .hist-data{flex-direction:row;gap:8px}
  .hist-partida,.hist-palpite{grid-column:1/-1}
  .dp-barra{grid-template-columns:1fr;gap:4px}
}

/* ---------- rodape ---------- */
.rodape-site{border-top:1px solid var(--line);margin-top:16px}
.rodape-site p{max-width:1280px;margin:0 auto;padding:24px 32px;font-size:12px;color:var(--muted);text-align:center}

/* ---------- telas estreitas ---------- */
@media(max-width:640px){
  .hero-in{padding:20px 16px 28px}
  .corpo{padding:20px 16px}
  /* tela estreita: campeonatos abrem embaixo do pais, nao ao lado */
  .mf-lado{position:static;box-shadow:none;border:0;padding:0 0 0 14px;display:none}
  .mf-item:hover > .mf-lado,.mf-item:focus-within > .mf-lado{display:block}
  .mf-pais .caret{transform:none}
  .j-topo{padding:16px}
  .time-nome .t{font-size:17px}
  .logo{height:44px}
  .pos{font-size:15px}
  .odds-in,.modelo-in{padding:0 16px}
  .modelo-in{padding:10px 16px}
  .comparacao,.rodape{padding-left:16px;padding-right:16px}
  .painel{padding:12px}
}
.dados-fixos{margin:0;display:grid;gap:8px}
.dados-fixos div{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:6px}
.dados-fixos dt{color:var(--muted)}
.dados-fixos dd{margin:0;font-weight:700;text-align:right}
/* area do admin */
.adm-barra{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.adm-busca{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;flex:1;max-width:420px}
.adm-busca input{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);
  color:var(--ink);font:inherit;font-size:14px;font-weight:400}
.adm-barra .entrada-btn{padding:0 20px}
.adm-tabela-caixa{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.adm-tabela{width:100%;border-collapse:collapse;font-size:13px}
.adm-tabela th,.adm-tabela td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-tabela th{font-size:11.5px;color:var(--muted);font-weight:700}
.adm-tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.adm-tabela tbody tr:last-child td{border-bottom:0}
.adm-selo{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid var(--line);color:var(--muted)}
.adm-selo.ativo{border-color:var(--brand);color:var(--brand)}
.adm-dialogo{max-width:640px;max-height:calc(100vh - 32px);overflow-y:auto}
.adm-dialogo textarea{padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);
  color:var(--ink);font:inherit;font-size:14px;font-weight:400;resize:vertical}
.adm-dialogo input[readonly]{opacity:.75}
.adm-sub{margin:8px 0 0;font-size:14px}
.adm-indicados{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px;max-height:180px;overflow-y:auto}
.adm-indicados li{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.adm-indicados .vazio-li{color:var(--muted);justify-content:flex-start}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* meus dados: sub-abas */
.sub-abas{margin-bottom:12px;flex-wrap:wrap;max-width:100%}
.sub-abas .aba{font-size:12.5px}
.sub-abas .aba[hidden]{display:none}
.sub-paineis{max-width:640px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.sub-painel[hidden]{display:none}
.secao-corpo{padding:18px 20px 20px;gap:12px}
.secao-corpo input,.secao-corpo select{min-height:40px}
.secao-corpo .entrada-btn{min-height:42px;align-self:flex-start;padding:0 22px}
.secao-corpo .btn-secundario{align-self:flex-start}
/* planos e pagamento */
.pg-tit{margin:24px 0 10px;font-family:var(--f-titulo);font-size:18px}
.pg-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;max-width:820px}
.pg-cartao{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;
  flex-direction:column;gap:8px}
.pg-cartao h3{margin:0;font-size:15px}
.pg-preco{margin:0;font-family:var(--f-titulo);font-size:26px;font-weight:800}
.pg-sub{margin:0 0 6px;color:var(--muted);font-size:13px}
.pg-estado{max-width:820px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.pg-estado h2{margin:0 0 6px;font-size:16px}
.pg-estado p{margin:0 0 6px;font-size:14px;line-height:1.5}
.pg-ia{color:var(--muted)}
.pg-nota{max-width:820px;margin-top:18px;color:var(--muted);font-size:12.5px;line-height:1.5}
.pg-btn{display:inline-flex;align-items:center;margin:8px 8px 0 0;padding:0 18px;text-decoration:none}
.aviso-pg{max-width:820px;padding:12px 14px;border:1px solid var(--amber);border-radius:10px;font-size:13.5px}
.aviso-pg a,#erro a{color:var(--brand);font-weight:700}
.adm-in{min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface2);
  color:var(--ink);font:inherit;font-size:13px;width:100%;min-width:90px}
.adm-in.num{text-align:right;max-width:110px}
.adm-cota{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:12px;font-size:12.5px;font-weight:700}
.adm-cota label{display:flex;flex-direction:column;gap:6px}
.adm-cota input{min-height:40px;max-width:120px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface2);color:var(--ink);font:inherit}
.adm-ok{font-size:12px;color:var(--brand)}
.adm-ok.erro-txt{color:var(--coral)}