/* Volante — identidade visual própria (sem referência à Caixa). Mobile first. */

:root {
  --fundo: #f5f3ee;
  --cartao: #ffffff;
  --tinta: #16191f;
  --tinta-2: #4a5160;
  --tinta-3: #7a8190;
  --borda: #e3dfd5;
  --primaria: #0f6b5a;
  --primaria-forte: #0a5043;
  --primaria-suave: #e1f1ec;
  --sobre-primaria: #ffffff;
  --ouro: #e0a100;
  --ouro-suave: #fff3cf;
  --erro: #b3261e;
  --erro-suave: #fde8e6;
  --ok: #1b7a3d;
  --ok-suave: #e3f4e8;

  /* Regiões da cruz */
  --q1: #dce8ff;
  --q2: #d8f1e4;
  --q3: #fff0c9;
  --q4: #ffe0e7;
  --cruz: #e9e5dc;

  --raio: 14px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(22, 25, 31, .06), 0 4px 16px rgba(22, 25, 31, .05);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111418;
    --cartao: #1a1e24;
    --tinta: #eef0f3;
    --tinta-2: #b8bec9;
    --tinta-3: #8a919d;
    --borda: #2c323b;
    --primaria: #3fb89f;
    --primaria-forte: #62cdb6;
    --primaria-suave: #16332d;
    --sobre-primaria: #0b1512;
    --ouro: #f2c14a;
    --ouro-suave: #3a3016;
    --erro: #ff8a80;
    --erro-suave: #3b1c1a;
    --ok: #6fd28f;
    --ok-suave: #173323;
    --q1: #1f2c44;
    --q2: #1b3529;
    --q3: #3a3219;
    --q4: #3d2229;
    --cruz: #2a2d33;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 var(--fonte);
  padding-bottom: 76px; /* barra inferior no celular */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

a { color: var(--primaria); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
.mudo { color: var(--tinta-2); }
.pequeno { font-size: .875rem; }
.centro { text-align: center; }
.oculto { display: none !important; }
.em-linha { display: inline; }
.sem-fundo { padding-bottom: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteudo { max-width: 1040px; margin: 0 auto; padding: 16px; }
.pilha > * + * { margin-top: 16px; }

/* ---- topo e navegação ---- */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topo .conteudo { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; color: var(--tinta); text-decoration: none; }
.marca-icone { width: 28px; height: 28px; border-radius: 8px; background: var(--primaria); display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px; }
.marca-icone i { background: var(--sobre-primaria); border-radius: 50%; opacity: .9; }
.nav-topo { display: none; gap: 4px; margin-left: auto; }
.nav-topo a { color: var(--tinta-2); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.nav-topo a:hover, .nav-topo a[aria-current="page"] { background: var(--primaria-suave); color: var(--primaria-forte); }
.topo-conta { margin-left: auto; }
@media (min-width: 900px) { .nav-topo { display: flex; } .topo-conta { margin-left: 0; } }

.nav-baixo {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--cartao); border-top: 1px solid var(--borda);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-baixo a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--tinta-3); font-size: .72rem; font-weight: 600; padding: 4px 0; }
.nav-baixo a[aria-current="page"] { color: var(--primaria); }
.nav-baixo svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .nav-baixo { display: none; } }

.aviso-legal { background: var(--ouro-suave); color: var(--tinta); font-size: .82rem; text-align: center; padding: 6px 16px; }

.rodape { border-top: 1px solid var(--borda); margin-top: 32px; color: var(--tinta-3); font-size: .85rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.rodape a { color: var(--tinta-2); }

/* ---- blocos ---- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); }
.grade { display: grid; gap: 16px; }
@media (min-width: 720px) { .grade-2 { grid-template-columns: 1fr 1fr; } .grade-3 { grid-template-columns: repeat(3, 1fr); } }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--primaria); color: var(--sobre-primaria);
}
.botao:hover { background: var(--primaria-forte); }
.botao:focus-visible, .chip input:focus-visible + span, .estilo input:focus-visible + .estilo-corpo { outline: 3px solid var(--ouro); outline-offset: 2px; }
.botao-sec { background: transparent; color: var(--primaria); border-color: var(--borda); }
.botao-sec:hover { background: var(--primaria-suave); }
.botao-peq { min-height: 38px; padding: 0 14px; font-size: .9rem; }
.botao-largo { width: 100%; }
.botao-link { background: none; border: 0; color: var(--primaria); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

.etiqueta { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--primaria-suave); color: var(--primaria-forte); }
.etiqueta-ouro { background: var(--ouro-suave); color: var(--tinta); }

.aviso { border-radius: var(--raio-p); padding: 12px 14px; font-size: .95rem; }
.aviso-ok { background: var(--ok-suave); color: var(--ok); }
.aviso-erro { background: var(--erro-suave); color: var(--erro); }
.aviso-info { background: var(--primaria-suave); color: var(--primaria-forte); }

/* ---- herói ---- */
.heroi { padding: 8px 0 4px; }
.heroi h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.heroi p { font-size: 1.05rem; color: var(--tinta-2); max-width: 44ch; }

.proximo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.proximo .valor { font-size: 1.6rem; font-weight: 800; color: var(--primaria); line-height: 1.1; }
.cartao-loteria h2 { display: flex; align-items: center; gap: 8px; }

/* ---- bolas e volante ---- */
.bolas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.bola {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .95rem/1 var(--mono); background: var(--primaria); color: var(--sobre-primaria);
}
.bolas-peq .bola { width: 30px; height: 30px; font-size: .85rem; }
.bola.fora { background: var(--cartao); color: var(--erro); border: 2px solid var(--erro); position: relative; }
.bola.acerto { background: var(--ok); color: #fff; position: relative; }
.bolas:has(.acerto, .fora) { gap: 10px 9px; }
.bola.acerto::after, .bola.fora::after { position: absolute; top: -5px; right: -6px; width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center; font: 800 .6rem/1 var(--fonte, sans-serif); color: #fff; }
.bola.acerto::after { content: "✓"; background: var(--ok); box-shadow: 0 0 0 2px var(--cartao); }
.bola.fora::after { content: "✗"; background: var(--erro); box-shadow: 0 0 0 2px var(--cartao); }
.legenda-conferencia { display: flex; align-items: center; gap: 8px; margin: 0; }
.bola-leg { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; }
.bola-leg.acerto { background: var(--ok); }
.bola-leg.fora { background: var(--erro); }
.acoes-linha { display: flex; align-items: center; gap: 10px; }
.pilha-curta { display: grid; gap: 4px; }
.bola.minha { box-shadow: 0 0 0 3px var(--ouro); }

.volante { display: grid; gap: 4px; }
.volante .casa {
  aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center;
  font: 600 .85rem/1 var(--mono); color: var(--tinta-2); position: relative;
}
.volante .q1 { background: var(--q1); }
.volante .q2 { background: var(--q2); }
.volante .q3 { background: var(--q3); }
.volante .q4 { background: var(--q4); }
.volante .cruz { background: var(--cruz); }
.volante .casa.marcada { background: var(--primaria); color: var(--sobre-primaria); font-weight: 800; }
.volante .casa.sorteada { box-shadow: inset 0 0 0 3px var(--ouro); }
.volante .casa.marcada.sorteada { background: var(--ouro); color: #1a1400; box-shadow: none; }
.volante-5 { grid-template-columns: repeat(5, 1fr); max-width: 260px; }
.volante-10 { grid-template-columns: repeat(10, 1fr); max-width: 420px; gap: 3px; }
.volante-10 .casa { font-size: .72rem; border-radius: 6px; }
.volante-mini.volante-5 { max-width: 150px; gap: 2px; }
.volante-mini.volante-10 { max-width: 220px; gap: 2px; }
.volante-mini .casa { font-size: 0; border-radius: 4px; }
.legenda-cruz { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; color: var(--tinta-2); margin-top: 8px; }
.legenda-cruz span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.legenda-cruz .l-q1::before { background: var(--q1); }
.legenda-cruz .l-q2::before { background: var(--q2); }
.legenda-cruz .l-q3::before { background: var(--q3); }
.legenda-cruz .l-q4::before { background: var(--q4); }
.legenda-cruz .l-cruz::before { background: var(--cruz); }

/* ---- gerador ---- */
.abas { display: flex; gap: 8px; overflow-x: auto; }
.abas a { flex: 0 0 auto; text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--borda); color: var(--tinta-2); font-weight: 700; background: var(--cartao); }
.abas a[aria-current="page"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }

.passo { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 0 0 8px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.estilos { display: grid; gap: 10px; }
@media (min-width: 720px) { .estilos { grid-template-columns: repeat(3, 1fr); } }
.estilo { display: block; cursor: pointer; color: inherit; text-decoration: none; }
.estilo input { position: absolute; opacity: 0; pointer-events: none; }
.estilo-corpo { display: block; height: 100%; border: 2px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; background: var(--cartao); }
.estilo-corpo strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.estilo-corpo span { display: block; font-size: .9rem; color: var(--tinta-2); }
.estilo input:checked + .estilo-corpo { border-color: var(--primaria); background: var(--primaria-suave); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: grid; place-items: center; min-width: 56px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--borda); background: var(--cartao); font-weight: 800; font-size: 1.05rem; }
.chip input:checked + span { border-color: var(--primaria); background: var(--primaria); color: var(--sobre-primaria); }

.gerar-barra { position: sticky; bottom: 76px; padding: 12px 0; background: linear-gradient(transparent, var(--fundo) 30%); }
@media (min-width: 900px) { .gerar-barra { bottom: 0; } }

.carregando { display: none; }
.htmx-request .carregando, .htmx-request.carregando { display: inline; }
.htmx-request .rotulo-botao { display: none; }

.jogos { display: grid; gap: 12px; }
@media (min-width: 720px) { .jogos { grid-template-columns: repeat(2, 1fr); } }
.jogo { display: flex; gap: 14px; align-items: center; }
.jogo .volante-mini { flex: 0 0 96px; }
.jogo .volante-mini.volante-10 { flex-basis: 120px; }
.jogo-num { font-weight: 800; color: var(--tinta-3); font-size: .85rem; }
.jogo .bolas { flex: 1; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.resumo-geracao { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }

details.explica summary { cursor: pointer; font-weight: 600; color: var(--primaria); }
details.explica { font-size: .92rem; color: var(--tinta-2); }

/* ---- tabelas ---- */
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); }
.tabela th { font-size: .8rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

.lista-concursos { list-style: none; margin: 0; padding: 0; }
.lista-concursos li { border-bottom: 1px solid var(--borda); }
.lista-concursos a { display: block; padding: 12px 4px; color: inherit; text-decoration: none; }
.lista-concursos a:hover { background: var(--primaria-suave); }
.lista-concursos .cab { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .9rem; }

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---- formulários ---- */
.form { display: grid; gap: 14px; max-width: 420px; }
.campo label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .95rem; }
.campo input[type=email], .campo input[type=password], .campo input[type=text], textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--tinta);
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-p);
}
textarea { min-height: 96px; font-family: var(--mono); }
.ver-senha { margin-top: 6px; padding: 4px 0; font: inherit; font-size: .88rem; color: var(--azul-vivo); background: none; border: 0; cursor: pointer; text-decoration: underline; }
input:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--primaria) 35%, transparent); border-color: var(--primaria); }
.caixa { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.caixa input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primaria); }
.ajuda { font-size: .85rem; color: var(--tinta-3); margin-top: 4px; }

/* ---- meus jogos ---- */
.grupo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.linha-jogo { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); }
.linha-jogo .bolas { flex: 1; }
.resultado-jogo { text-align: right; min-width: 88px; font-size: .9rem; }
.resultado-jogo strong { display: block; font-size: 1.05rem; }
.premiado strong { color: var(--ok); }

.legal { max-width: 70ch; }
.legal h2 { margin-top: 1.5rem; }
.texto-email { white-space: pre-line; overflow-wrap: anywhere; }

/* ---- painel de estratégias ---- */
:root { --reg-a: #0f6b5a; --reg-b: #c77700; --reg-c: #6d4bd1; --reg-d: #c2185b; --fixa: #16191f; }
@media (prefers-color-scheme: dark) { :root { --reg-a: #3fb89f; --reg-b: #f0a73a; --reg-c: #a58cf0; --reg-d: #f06292; --fixa: #eef0f3; } }
.duas-colunas { display: grid; gap: 16px; }
@media (min-width: 900px) { .duas-colunas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.modelos { display: grid; gap: 12px; }
@media (min-width: 720px) { .modelos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .modelos { grid-template-columns: repeat(3, 1fr); } }
.modelo { display: flex; gap: 14px; align-items: center; }
.modelo .volante-mini { flex: 0 0 96px; }
.modelo .volante-mini.volante-10 { flex-basis: 120px; }
.modelo-link { color: inherit; text-decoration: none; }
.modelo-link:hover { border-color: var(--primaria); }
.modelo-link strong { display: block; }

.ferramentas { display: flex; flex-wrap: wrap; gap: 6px; }
.ferramenta input { position: absolute; opacity: 0; pointer-events: none; }
.ferramenta span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--borda); background: var(--cartao); font-weight: 700; font-size: .9rem; cursor: pointer; }
.ferramenta span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-f); }
.ferramenta input:checked + span { border-color: var(--c-f); box-shadow: inset 0 0 0 1px var(--c-f); }
.ferramenta input:focus-visible + span { outline: 3px solid var(--ouro); outline-offset: 2px; }
.cor-a { --c-f: var(--reg-a); } .cor-b { --c-f: var(--reg-b); } .cor-c { --c-f: var(--reg-c); } .cor-d { --c-f: var(--reg-d); }
.cor-fixa { --c-f: var(--fixa); } .cor-excluida { --c-f: var(--erro); }

.cartela { max-width: 420px; }
.cartela.volante-5 { max-width: 340px; }
.cartela .casa { border: 0; cursor: pointer; font-size: .95rem; min-height: 40px; }
.cartela.volante-10 .casa { font-size: .78rem; min-height: 32px; }
.cartela .casa:focus-visible { outline: 3px solid var(--ouro); outline-offset: 1px; }
.cartela .casa.em-a { background: var(--reg-a); color: #fff; }
.cartela .casa.em-b { background: var(--reg-b); color: #fff; }
.cartela .casa.em-c { background: var(--reg-c); color: #fff; }
.cartela .casa.em-d { background: var(--reg-d); color: #fff; }
.cartela .casa.multi { box-shadow: inset 0 0 0 3px var(--ouro); }
.cartela .casa.fixa { background: var(--fixa); color: var(--fundo); }
.cartela .casa.fixa::after { content: "📌"; position: absolute; top: -6px; right: -4px; font-size: .7rem; }
.cartela .casa.excluida { background: var(--cartao); color: var(--tinta-3); text-decoration: line-through; box-shadow: inset 0 0 0 2px var(--erro); }

.regiao-edit { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px; display: grid; gap: 8px; }
.nome-regiao { flex: 1; min-height: 36px; padding: 4px 10px; font: inherit; font-weight: 700; color: var(--tinta); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.nome-regiao:hover, .nome-regiao:focus { border-color: var(--borda); background: var(--cartao); }
.segmentos { display: flex; flex-wrap: wrap; gap: 4px; }
.segmentos button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta-2); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.segmentos button[aria-checked="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.faixa { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .9rem; }
.faixa input { width: 64px; min-height: 36px; padding: 4px 8px; font: inherit; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--tinta); }
.faixa input:disabled { opacity: .6; }
.faixa .remover { margin-left: auto; }
.seletor { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta); }

.raio { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.raio.destaque { border: 2px solid var(--primaria); border-radius: var(--raio-p); padding: 12px; background: var(--primaria-suave); }
.raio-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-f); color: #fff; font-weight: 800; font-size: .85rem; }
.barras { display: grid; gap: 4px; }
.barra { display: grid; grid-template-columns: 76px 1fr 52px; align-items: center; gap: 8px; font-size: .85rem; }
.barra .rotulo { color: var(--tinta-2); }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }
.trilho { height: 10px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.enchimento { display: block; height: 100%; border-radius: 999px; }
.enchimento.real { background: var(--primaria); }
.enchimento.acaso { background: var(--tinta-3); }
.veredito { font-weight: 700; }
.v-ok { color: var(--tinta-2); }
.v-alerta { color: var(--reg-b); }

.mapa-calor { max-width: 420px; }
.mapa-calor .casa { display: flex; flex-direction: column; line-height: 1.1; }
.mapa-calor .casa small { font-size: .62rem; opacity: .8; }
.volante-10.mapa-calor .casa small { font-size: .5rem; }
.mapa-calor .calor-m2 { background: #cfe0ff; } .mapa-calor .calor-m1 { background: #e6efff; }
.mapa-calor .calor-0 { background: var(--cruz); }
.mapa-calor .calor-p1 { background: #ffe2c2; } .mapa-calor .calor-p2 { background: #ffc48a; }
@media (prefers-color-scheme: dark) {
  .mapa-calor .calor-m2 { background: #22406e; } .mapa-calor .calor-m1 { background: #273449; }
  .mapa-calor .calor-p1 { background: #4a3520; } .mapa-calor .calor-p2 { background: #6b4418; }
}
.legenda-cruz .l-calor-m2::before { background: #cfe0ff; }
.legenda-cruz .l-calor-0::before { background: var(--cruz); }
.legenda-cruz .l-calor-p2::before { background: #ffc48a; }
.w0 { width: 0%; }
.w1 { width: 1%; }
.w2 { width: 2%; }
.w3 { width: 3%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w7 { width: 7%; }
.w8 { width: 8%; }
.w9 { width: 9%; }
.w10 { width: 10%; }
.w11 { width: 11%; }
.w12 { width: 12%; }
.w13 { width: 13%; }
.w14 { width: 14%; }
.w15 { width: 15%; }
.w16 { width: 16%; }
.w17 { width: 17%; }
.w18 { width: 18%; }
.w19 { width: 19%; }
.w20 { width: 20%; }
.w21 { width: 21%; }
.w22 { width: 22%; }
.w23 { width: 23%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w26 { width: 26%; }
.w27 { width: 27%; }
.w28 { width: 28%; }
.w29 { width: 29%; }
.w30 { width: 30%; }
.w31 { width: 31%; }
.w32 { width: 32%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w35 { width: 35%; }
.w36 { width: 36%; }
.w37 { width: 37%; }
.w38 { width: 38%; }
.w39 { width: 39%; }
.w40 { width: 40%; }
.w41 { width: 41%; }
.w42 { width: 42%; }
.w43 { width: 43%; }
.w44 { width: 44%; }
.w45 { width: 45%; }
.w46 { width: 46%; }
.w47 { width: 47%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w51 { width: 51%; }
.w52 { width: 52%; }
.w53 { width: 53%; }
.w54 { width: 54%; }
.w55 { width: 55%; }
.w56 { width: 56%; }
.w57 { width: 57%; }
.w58 { width: 58%; }
.w59 { width: 59%; }
.w60 { width: 60%; }
.w61 { width: 61%; }
.w62 { width: 62%; }
.w63 { width: 63%; }
.w64 { width: 64%; }
.w65 { width: 65%; }
.w66 { width: 66%; }
.w67 { width: 67%; }
.w68 { width: 68%; }
.w69 { width: 69%; }
.w70 { width: 70%; }
.w71 { width: 71%; }
.w72 { width: 72%; }
.w73 { width: 73%; }
.w74 { width: 74%; }
.w75 { width: 75%; }
.w76 { width: 76%; }
.w77 { width: 77%; }
.w78 { width: 78%; }
.w79 { width: 79%; }
.w80 { width: 80%; }
.w81 { width: 81%; }
.w82 { width: 82%; }
.w83 { width: 83%; }
.w84 { width: 84%; }
.w85 { width: 85%; }
.w86 { width: 86%; }
.w87 { width: 87%; }
.w88 { width: 88%; }
.w89 { width: 89%; }
.w90 { width: 90%; }
.w91 { width: 91%; }
.w92 { width: 92%; }
.w93 { width: 93%; }
.w94 { width: 94%; }
.w95 { width: 95%; }
.w96 { width: 96%; }
.w97 { width: 97%; }
.w98 { width: 98%; }
.w99 { width: 99%; }
.w100 { width: 100%; }
.faixa-beta { background: var(--tinta); color: var(--fundo); font-size: .8rem; font-weight: 700; text-align: center; padding: 4px 16px; }

/* ---- abas do módulo de estratégias ---- */
.abas-secao { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid var(--borda); scrollbar-width: none; }
.abas-secao::-webkit-scrollbar { display: none; }
.abas-secao a { flex: 0 0 auto; padding: 10px 14px; text-decoration: none; color: var(--tinta-2); font-weight: 700; font-size: .95rem; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.abas-secao a:hover { color: var(--tinta); }
.abas-secao a[aria-current="page"] { color: var(--primaria); border-bottom-color: var(--primaria); }

.chips-peq { gap: 6px; }
.chip-link { display: inline-grid; place-items: center; min-width: 48px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta-2); font-weight: 700; font-size: .9rem; text-decoration: none; }
.chip-link[aria-current="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }

.cartela-analise { max-width: 420px; }
.cartela-analise.volante-5 { max-width: 340px; }
.cartela-analise .casa { font-size: .95rem; }
.cartela-analise.volante-10 .casa { font-size: .75rem; }
.mapa-calor .casa.marcada { background: var(--primaria); color: var(--sobre-primaria); }
.mapa-calor .casa.marcada.sorteada { background: var(--ouro); color: #1a1400; }
.mapa-calor .casa.sorteada:not(.marcada) { box-shadow: inset 0 0 0 3px var(--ouro); }

.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }
.ranking li:not(:has(.trilho)) { grid-template-columns: 36px auto; }
.ranking b { font-variant-numeric: tabular-nums; }

.par-cartelas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.par-cartelas figure { margin: 0; display: grid; gap: 6px; justify-items: center; }
.par-cartelas figcaption { font-size: .85rem; font-weight: 700; color: var(--tinta-2); }
.par-cartelas .volante-mini.volante-5 { max-width: 130px; }
.par-cartelas .volante-mini.volante-10 { max-width: 170px; }

.barra-curta { grid-template-columns: 1fr 52px; }
.destaque-numero h2 { font-size: 1.35rem; }
.modelos-1 { grid-template-columns: 1fr !important; }
.par-cartelas figure .volante { width: 100%; }
.modelo > .volante-mini { width: 96px; }
.modelo > .volante-mini.volante-10 { width: 120px; }

/* ---- combinador de critérios ---- */
.abas-mini button { flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.abas-mini button[aria-selected="true"] { color: var(--primaria); border-bottom-color: var(--primaria); }
.contador-grupo:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--primaria); color: var(--sobre-primaria); font-size: .75rem; }
.grupo-criterios { display: grid; gap: 10px; }
@media (min-width: 720px) { .grupo-criterios { grid-template-columns: 1fr 1fr; } }
.criterio { border: 2px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: grid; gap: 10px; background: var(--cartao); transition: border-color .15s, background .15s; }
.criterio.ligado { border-color: var(--primaria); background: var(--primaria-suave); }
.marcador { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.marcador input { position: absolute; opacity: 0; pointer-events: none; }
.marcador .marca { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--borda); background: var(--cartao); display: grid; place-items: center; }
.marcador input:checked + .marca { background: var(--primaria); border-color: var(--primaria); }
.marcador input:checked + .marca::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--sobre-primaria); border-bottom: 3px solid var(--sobre-primaria); transform: rotate(-45deg) translate(1px, -1px); }
.marcador input:focus-visible + .marca { outline: 3px solid var(--ouro); outline-offset: 2px; }
.marcador strong { display: block; }
.marcador .mudo { display: block; }
.params { display: none; flex-wrap: wrap; gap: 10px 14px; padding-left: 38px; font-size: .88rem; color: var(--tinta-2); }
.criterio.ligado .params { display: flex; }
.params label { display: inline-flex; align-items: center; gap: 6px; }
.linhas-corpo { display: grid; gap: 10px; }
.criterio.linha-a-linha:not(.ligado) .linhas-corpo { opacity: .75; }
.linha-volante { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.linha-nome strong, .linha-nome .mudo { display: block; }
.linha-bolas { display: flex; gap: 6px; }
.linha-bolas i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borda); background: var(--cartao); }
.linha-bolas i.cheia { background: var(--primaria); border-color: var(--primaria); }
.passo-num { display: inline-flex; align-items: center; gap: 4px; }
.passo-num button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--borda); background: var(--cartao); color: var(--tinta); font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.passo-num button:disabled { opacity: .35; cursor: default; }
.passo-num input { width: 48px; min-height: 40px; text-align: center; font: inherit; font-weight: 800; font-size: 1.1rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--tinta); }
.linha-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borda); }
.linhas-soma { font-weight: 800; }
.linhas-soma.fora { color: var(--erro); }
.criterio.ligado .params.params-bloco { display: grid; gap: 8px; padding-left: 0; font-size: 1rem; color: var(--tinta); }
.base-esp { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding: 10px 12px; border-radius: var(--raio); background: var(--primaria-suave); }
.base-esp strong, .base-esp .mudo { display: block; }
.montador-exemplo .cartela-grande { margin-inline: auto; }
.previa-dados { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .montador-exemplo { position: sticky; top: 12px; } }
@media (max-width: 420px) { .linha-bolas i { width: 16px; height: 16px; } .linha-volante { gap: 6px; } }
.params input[type=number] { width: 64px; min-height: 36px; padding: 4px 8px; font: inherit; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--tinta); }

.linha-opcoes { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: .92rem; }
.linha-opcoes label { display: inline-flex; align-items: center; gap: 8px; }
.trilho-grosso { display: block; height: 14px; }
.resumo-dinheiro > div { display: grid; gap: 2px; padding: 12px; border-radius: var(--raio-p); background: var(--fundo); }
.resumo-dinheiro strong { font-size: 1.3rem; }
.grupo-criterios[hidden] { display: none; }

/* ---- assinatura ---- */
.lista-beneficios { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.preco-cartao { align-content: center; justify-items: center; }
.preco { font-size: 2.4rem; font-weight: 800; color: var(--primaria); line-height: 1.1; }
.preco span { font-size: 1rem; font-weight: 600; color: var(--tinta-2); }
.status-plano { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.fatura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: var(--fundo); box-shadow: none; }
.fatura > div { display: grid; }
.fatura strong { font-size: 1.3rem; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.dados dt { color: var(--tinta-3); }
.dados dd { margin: 0; }
.numero-grande { font-size: 2rem; font-weight: 800; }
.campo-busca { flex: 1; min-width: 200px; min-height: 40px; padding: 6px 12px; font: inherit; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); color: var(--tinta); }
.tabela-admin td { vertical-align: top; }
.acoes-admin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.em-linha-flex { display: inline-flex; gap: 6px; align-items: center; }
.link-copia { display: block; overflow-wrap: anywhere; font-size: .8rem; background: var(--cartao); padding: 6px 8px; border-radius: 6px; }
.selo-teste { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ouro-suave); color: var(--tinta); text-decoration: none; white-space: nowrap; }
.topo-conta { display: flex; align-items: center; gap: 8px; }

/* ---- captadores ---- */
.link-grande { font-size: 1rem; padding: 10px 12px; }
.campo-mini { width: 70px; min-height: 34px; padding: 4px 8px; font: inherit; font-size: .88rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--tinta); }
.campo-medio { width: 150px; }

/* ---- prestação de contas ---- */
.relatorio-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.filtros { display: grid; gap: 12px; }
.destaque-verde { border-color: var(--primaria); background: var(--primaria-suave); }
.numero-grande small { font-size: .9rem; font-weight: 600; color: var(--tinta-2); }
.alerta-relatorio { border: 2px solid var(--ouro); background: var(--ouro-suave); }
.linha-alerta td { background: var(--ouro-suave); }
.tabela tfoot th { border-top: 2px solid var(--borda); border-bottom: 0; color: var(--tinta); font-size: .95rem; text-transform: none; }
@media print {
  .topo, .nav-baixo, .rodape, .aviso-legal, .faixa-beta, .nao-imprimir { display: none !important; }
  body { background: #fff; padding: 0; }
  .cartao { box-shadow: none; break-inside: avoid; }
}

.simulador .campo span { display: block; font-weight: 600; margin-bottom: 4px; font-size: .92rem; }
.simulador input[type=number] { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1.1rem; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); color: var(--tinta); }
.resultado-sim .numero-grande { color: var(--primaria); }

.form-largo { max-width: 640px; }
.seletor-largo { width: 100%; min-height: 48px; }
.pedido { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; background: var(--cartao); }
.pedido-dados { flex: 1; min-width: 260px; }

.novo-usuario summary { cursor: pointer; }

.passo-guia h2 { display: flex; align-items: center; gap: 10px; }

.campo-tamanho { display: grid; gap: 6px; margin-top: 12px; max-width: 480px; }

/* ---- Estratégia do Especialista (módulo em destaque) ---- */
.selo-especialista { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; background: var(--ouro); color: #1a1400; }
.especialista-cab { border: 2px solid var(--ouro); background: linear-gradient(135deg, var(--ouro-suave), var(--cartao) 60%); }
.destaque-especialista { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; text-decoration: none; color: inherit; border: 2px solid var(--ouro); background: linear-gradient(135deg, var(--ouro-suave), var(--cartao) 70%); }
.destaque-especialista:hover { box-shadow: 0 0 0 3px var(--ouro-suave); }
.legenda-cruz .l-esq::before { background: var(--primaria); }

/* ---- gerador com cartela grande: estilo | cartela fixa ao lado (no celular, entre o estilo e o botão) ---- */
.gerador { display: grid; gap: 16px; grid-template-areas: "estilo" "painel" "opcoes"; }
.gerador-estilo { grid-area: estilo; }
.gerador-painel { grid-area: painel; }
.gerador-opcoes { grid-area: opcoes; }
@media (min-width: 900px) {
  .gerador { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; grid-template-areas: "estilo painel" "opcoes painel"; align-items: start; }
  .gerador-painel { position: sticky; top: 12px; }
  .gerador .estilos { grid-template-columns: 1fr; }
}
.misto-alternar { position: absolute; opacity: 0; pointer-events: none; }
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.interruptor-trilho { flex: 0 0 52px; height: 30px; border-radius: 999px; background: var(--borda); position: relative; transition: background .15s; }
.interruptor-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--cartao); transition: transform .15s; }
.misto-alternar:checked + .interruptor .interruptor-trilho { background: var(--primaria); }
.misto-alternar:checked + .interruptor .interruptor-trilho::after { transform: translateX(22px); }
.misto-alternar:focus-visible + .interruptor .interruptor-trilho { outline: 3px solid var(--ouro); outline-offset: 2px; }
.misto-dica, .misto-limpar { display: none; }
.misto-ligado .misto-dica { display: block; }
.misto-ligado .misto-limpar { display: inline; justify-self: start; }
.cartela-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.legenda-cartela { display: flex; gap: 10px; }
.leg-minha::before, .leg-sistema::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.leg-minha::before { background: var(--primaria); }
.leg-sistema::before { background: var(--ouro); }
/* A cartela grande: números grandes e áreas de toque largas (pensado também para quem enxerga pouco). */
.cartela-grande { width: 100%; }
.cartela-grande.volante-5 { max-width: 440px; gap: 8px; }
.cartela-grande.volante-10 { max-width: 620px; gap: 5px; }
.cartela-grande .casa { cursor: default; padding: 0; font-size: 1.35rem; font-weight: 700; color: var(--tinta); border-radius: 12px; }
.cartela-grande.volante-10 .casa { font-size: 1rem; border-radius: 8px; }
.cartela-grande input { position: absolute; opacity: 0; pointer-events: none; }
.cartela-grande .casa span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; }
.misto-ligado .cartela-grande .casa { cursor: pointer; }
.cartela-grande input:checked + span { background: var(--primaria); color: var(--sobre-primaria); font-weight: 800; }
.gerador:not(.misto-ligado) .cartela-grande input:checked + span { background: none; color: inherit; font-weight: 700; }
.cartela-grande .casa.sistema span { background: var(--ouro); color: #1a1400; font-weight: 800; }
.cartela-grande .casa.entrando span { animation: entrar .35s ease-out; }
@keyframes entrar { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cartela-grande .casa.entrando span { animation: none; } }
.cartela-grande input:focus-visible + span { outline: 3px solid var(--ouro); outline-offset: 1px; }
.misto-ligado .cartela-grande input:disabled:not(:checked) + span { opacity: .45; cursor: not-allowed; }
.lista-jogos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jogo-item { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  border: 2px solid var(--borda); background: var(--cartao); color: var(--tinta); border-radius: 12px; padding: 10px 12px; font: inherit; }
.jogo-item.ativo { border-color: var(--primaria); background: var(--primaria-suave); }
.jogo-item:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }
.acoes-grandes .botao { min-height: 52px; font-size: 1.05rem; }
.minhas-dezenas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- receita do método (só administrador e especialista) ---- */
.metodo-privado { border: 2px dashed var(--ouro); border-radius: 14px; padding: 12px; }
.selo-privado { margin: 0; font-weight: 700; font-size: .85rem; color: var(--tinta); background: var(--ouro-suave); border-radius: 8px; padding: 6px 10px; }

/* ---- Central do Operador (só administrador) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-topo { background: var(--primaria); color: var(--sobre-primaria); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.co-topo h1 { margin: 0; color: inherit; }
.co-topo p { margin: 0; max-width: 70ch; opacity: .92; }
.co-topo .botao-sec { background: transparent; color: var(--sobre-primaria); border-color: currentColor; }
.co-busca { position: sticky; top: 0; z-index: 5; background: var(--fundo); padding: 12px 0 6px; }
.co-campo { width: 100%; min-height: 50px; font: inherit; font-size: 1.05rem; padding: 10px 14px; border: 2px solid var(--borda); border-radius: 12px; background: var(--cartao); color: var(--tinta); }
.co-campo:focus { outline: none; border-color: var(--primaria); }
.co-secao { margin: 18px 0 26px; scroll-margin-top: 90px; }
.co-secao > h2 { border-bottom: 2px solid var(--tinta); padding-bottom: 6px; }
.co-tema { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; margin-bottom: 10px; scroll-margin-top: 90px; }
.co-tema[open] { border-color: var(--primaria); }
.co-tema > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; }
.co-tema > summary::-webkit-details-marker { display: none; }
.co-ico { font-size: 1.3rem; text-align: center; }
.co-corpo { padding: 0 16px 16px 58px; display: grid; gap: 12px; line-height: 1.6; }
@media (max-width: 720px) { .co-corpo { padding-left: 16px; } }
.co-rot { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); }
.co-corpo ol, .co-corpo ul { margin: 0; padding-left: 22px; }
.co-bloq { background: var(--ouro-suave); border-left: 3px solid var(--ouro); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.co-pedir { margin: 0; background: var(--primaria-suave); border-radius: 10px; padding: 10px 12px; }
.co-cmd { display: flex; background: #0f172a; border-radius: 10px; overflow: hidden; }
.co-cmd code { flex: 1; color: #dbeafe; font: .8rem/1.5 var(--mono); padding: 10px 12px; overflow-x: auto; white-space: pre; }
.co-cmd button { border: 0; background: var(--primaria); color: var(--sobre-primaria); font-weight: 700; padding: 0 14px; cursor: pointer; }
.co-vazio { display: none; }
.lt-data { margin: 14px 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.co-lt.testado { opacity: .8; }
.lt-barra { height: 10px; background: var(--borda); border-radius: 999px; overflow: hidden; }
.lt-progresso { display: block; height: 100%; background: var(--primaria); border-radius: 999px; }
.lt-check { border: 2px solid var(--primaria); background: var(--cartao); color: var(--primaria); font: inherit; font-weight: 700; border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 44px; }
.lt-check.feito { background: var(--primaria); color: var(--sobre-primaria); }
.lt-p0 { width: 0%; }
.lt-p5 { width: 5%; }
.lt-p10 { width: 10%; }
.lt-p15 { width: 15%; }
.lt-p20 { width: 20%; }
.lt-p25 { width: 25%; }
.lt-p30 { width: 30%; }
.lt-p35 { width: 35%; }
.lt-p40 { width: 40%; }
.lt-p45 { width: 45%; }
.lt-p50 { width: 50%; }
.lt-p55 { width: 55%; }
.lt-p60 { width: 60%; }
.lt-p65 { width: 65%; }
.lt-p70 { width: 70%; }
.lt-p75 { width: 75%; }
.lt-p80 { width: 80%; }
.lt-p85 { width: 85%; }
.lt-p90 { width: 90%; }
.lt-p95 { width: 95%; }
.lt-p100 { width: 100%; }
.etiqueta-origem { justify-self: start; }
.receitas { margin-top: 10px; }
.receitas > summary { cursor: pointer; }
.receitas ul { margin: 4px 0 8px; padding-left: 20px; }

/* ---- painel de captação ---- */
.funil { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .funil { grid-template-columns: repeat(6, 1fr); } }
.funil > div { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px 12px; background: var(--cartao); }
.funil strong { display: block; font-size: 1.6rem; font-weight: 800; }
.funil .funil-perdido { border-color: var(--ouro); background: var(--ouro-suave); }
.tabela-rolagem { overflow-x: auto; }
.avisos-captacao { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.avisos-captacao li { padding: 8px 10px; border-radius: var(--raio-p); background: var(--cartao); border: 1px solid var(--borda); }
.avisos-captacao li.aviso-novo { border-color: var(--primaria); background: var(--primaria-suave); }
.sino { position: relative; text-decoration: none; font-size: 1.1rem; }
.sino-num { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ouro); color: var(--tinta); font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.convite-rapido { border: 2px solid var(--primaria); }
.link-cartao { display: block; text-decoration: none; color: inherit; }
.flyer-previa { display: grid; grid-template-columns: 135px 1fr; gap: 12px; align-items: start; }
.flyer-previa img { width: 135px; height: auto; border-radius: 8px; border: 1px solid var(--borda); }

/* ---- boas-vindas e faixa da inicial: gerar jogos (principal) ou convidar ---- */
.escolhas, .faixa-inicio { display: grid; gap: 12px; }
@media (min-width: 720px) { .escolhas, .faixa-inicio { grid-template-columns: 1.2fr 1fr; } }
.escolha { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: var(--raio-p); border: 2px solid var(--borda); background: var(--cartao); color: var(--tinta); text-decoration: none; }
.escolha strong { font-size: 1.15rem; }
.escolha span { color: var(--tinta-2); }
.escolha-principal { border-color: var(--primaria); background: var(--primaria); }
.escolha-principal strong, .escolha-principal span { color: var(--sobre-primaria); }
a.escolha:hover, .escolha-link:hover strong { text-decoration: underline; }
.escolha-link { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.escolha-ganhe { border-color: var(--ouro); }
.escolha-ganhe .acoes { margin-top: 4px; }

/* ---- Meus jogos: resultado do concurso, dezenas acertadas e "o que aconteceu" ---- */
.resultado-concurso { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--primaria-suave); }
.acertadas { color: var(--tinta-2); }
.campo-concurso { width: 6.5em; }
.linha-destaque td { background: var(--primaria-suave); }
.o-que-aconteceu h3 { margin: 0; }
.campo-pix summary, .campo-pix legend { cursor: pointer; font-weight: 600; padding: 0 4px; }
.pix-campos { display: grid; gap: 6px; margin-top: 8px; }
.pix-campos label { font-size: .9rem; font-weight: 600; }
.pix-campos select, .pix-campos input { width: 100%; }
.campo-pix .linha-opcoes { margin-top: 8px; }
.campo-pix.destaque-verde { border: 2px solid var(--primaria); border-radius: var(--raio-p); padding: 12px 14px; }
.lista-curta { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---- convite: "aqui você se diverte e ainda ganha dinheiro" ---- */
.ganhe { border: 2px solid var(--ouro); border-radius: var(--raio-p); padding: 14px 16px; background: linear-gradient(135deg, var(--ouro-suave), var(--cartao) 75%); }
.ganhe-titulo { font-size: 1.2rem; line-height: 1.3; }
.ganhe-passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: passo; }
.ganhe-passos li { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; counter-increment: passo; }
.ganhe-passos li::before { content: counter(passo); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--ouro); color: #1a1a1a; font-weight: 700; display: grid; place-items: center; }
.ganhe-passos span { color: var(--tinta-2); font-size: .95rem; }

/* ---- painel de captação: envio do flyer em primeiro lugar ---- */
.envio-rapido { border: 2px solid var(--ouro); }
.envio-grade { display: grid; gap: 16px; align-items: start; }
@media (min-width: 720px) { .envio-grade { grid-template-columns: 216px 1fr; } }
.envio-flyer { width: 100%; max-width: 216px; height: auto; border-radius: 10px; border: 1px solid var(--borda); justify-self: center; }
.botao-whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; font-size: 1.05rem; }
.botao-whatsapp:hover { background: #188a45; }

/* ---- painel do dono: uma linha por captador, abre as pessoas embaixo ---- */
.linha-captador { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(150px, 1.4fr) repeat(5, minmax(80px, 1fr)); gap: 8px 14px; align-items: center; }
.linha-captador-cab { padding: 0 18px; font-weight: 700; }
.captador-dono { padding: 12px 18px; }
.captador-dono > summary { cursor: pointer; list-style: none; }
.captador-dono > summary::-webkit-details-marker { display: none; }
.captador-dono[open] > summary { border-bottom: 1px solid var(--borda); padding-bottom: 10px; margin-bottom: 12px; }
.captador-dono:hover { border-color: var(--primaria); }
.captador-dono code { word-break: break-all; }
@media (max-width: 900px) {
  .linha-captador-cab { display: none; }
  .linha-captador { grid-template-columns: 1fr 1fr; }
  .linha-captador > :first-child, .linha-captador > :nth-child(2) { grid-column: 1 / -1; }
  .linha-captador .num { text-align: left; }
  .linha-captador .num::before { content: attr(data-rotulo) ": "; color: var(--tinta-2); font-size: .85rem; }
}

/* ---- Meu jeito ---- */
.passo-num-titulo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); font-size: .95rem; margin-right: 6px; vertical-align: 2px; }
.chip small { font-size: .7rem; font-weight: 600; margin-left: 4px; opacity: .8; }
.cartela-fora input:checked + span { background: var(--tinta-3); color: var(--cartao); text-decoration: line-through; }
.jeito-cartao h2 { font-size: 1.2rem; }
.nav-baixo a { font-size: .68rem; }
.contador-numeros { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 2px solid #d32f2f; border-radius: var(--raio-p); background: #fdecea; }
.contador-numeros .contador-valor { font-size: 2.6rem; line-height: 1; font-weight: 900; color: #d32f2f; min-width: 1.4em; text-align: center; }
.contador-numeros .contador-texto { display: grid; gap: 2px; }
.contador-numeros .contador-texto strong { font-size: 1.15rem; color: #b71c1c; }
.contador-numeros.contador-alerta { animation: contador-pulso .35s ease-out; }
.contador-numeros.contador-menor .contador-valor { font-size: 1.8rem; }
@keyframes contador-pulso { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contador-numeros { background: #3a1414; border-color: #ef5350; }
  :root:not([data-theme="light"]) .contador-numeros .contador-valor, :root:not([data-theme="light"]) .contador-numeros .contador-texto strong { color: #ff8a80; } }
.fixas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fixas-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); }
.bolas-linha { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bola-mini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primaria-suave); color: var(--primaria-forte); font-size: .8rem; font-weight: 800; }
.tabela-jeitos td { vertical-align: top; }

/* ---- identidade colorida (06/10/2026): marinho + verde + azul + amarelo, como no flyer ---- */
:root {
  --marinho: #0f1f3d;
  --marinho-2: #17325c;
  --verde-vivo: #22b391;
  --azul-vivo: #4aa3f0;
  --amarelo-vivo: #f4c03e;
  --gradiente-marca: linear-gradient(90deg, #2fd0a6 0%, #4aa3f0 50%, #f4c03e 100%);
}
.topo { background: var(--marinho); border-bottom: 3px solid var(--verde-vivo); backdrop-filter: none; }
.marca { color: #fff; gap: 10px; }
.marca-simbolo { width: 34px; height: 34px; flex: none; }
.marca-nome { font-size: 1.35rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topo .nav-topo a { color: #c9d6ea; }
.topo .nav-topo a:hover, .topo .nav-topo a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }
.topo .botao-sec { color: #fff; border-color: rgba(255, 255, 255, .35); }
.topo .botao-sec:hover { background: rgba(255, 255, 255, .12); }
.topo .sino { color: #fff; }
.topo .selo-teste { background: var(--amarelo-vivo); color: var(--marinho); }

.nav-baixo { background: var(--marinho); border-top: 0; box-shadow: 0 -4px 18px rgba(15, 31, 61, .25); }
/* Celular (08/10/2026): o topo e a barra de baixo tinham 444 px num celular de 390 e a página inteira deslizava
   para o lado ("Minha conta" ficava fora da tela). Tudo tem de caber na largura; nada pode vazar. */
body { overflow-x: hidden; overflow-x: clip; }
.nav-baixo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-baixo a { min-width: 0; font-size: .66rem; text-align: center; overflow-wrap: anywhere; }
.topo .conteudo { gap: 10px; }
.topo-conta { min-width: 0; gap: 10px; }
.topo-conta .botao { white-space: nowrap; }
@media (max-width: 480px) {
  .marca-nome, .so-largo { display: none; }
}
.nav-baixo a { color: #9fb0cc; }
.nav-baixo a[aria-current="page"] { color: var(--amarelo-vivo); }
.nav-baixo a[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(244, 192, 62, .55)); }

.botao { background: linear-gradient(135deg, #14a07f, #0f6b5a); box-shadow: 0 3px 10px rgba(15, 107, 90, .25); }
.botao:hover { background: linear-gradient(135deg, #0f8c6f, #0a5043); }
.botao.botao-sec, .botao.botao-whatsapp { box-shadow: none; }
.botao-sec { background: transparent; }
.botao-sec:hover { background: var(--primaria-suave); }
.botao-whatsapp { background: #1fa855; }
.botao-ouro { background: var(--amarelo-vivo); color: var(--marinho); box-shadow: 0 4px 14px rgba(244, 192, 62, .4); }
.botao-ouro:hover { background: #ffd35c; }

/* painel de título: a faixa colorida no alto de cada tela */
.painel { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--marinho-2) 0%, var(--marinho) 60%); box-shadow: 0 8px 24px rgba(15, 31, 61, .22); }
.painel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--gradiente-marca); }
.painel h1 { color: #fff; margin: 0 0 .35rem; font-size: clamp(1.45rem, 5.5vw, 2.1rem); font-weight: 850; max-width: 22ch; }
.painel p { color: #d3ddee; margin: 0; max-width: 52ch; }
.painel .painel-texto { position: relative; z-index: 1; display: grid; gap: 8px; }
.painel .painel-texto > * { margin: 0; }
.painel-etiqueta { justify-self: start; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.painel-verde .painel-etiqueta { background: var(--verde-vivo); color: var(--marinho); }
.painel-amarelo .painel-etiqueta { background: var(--amarelo-vivo); color: var(--marinho); }
.painel-azul .painel-etiqueta { background: var(--azul-vivo); color: var(--marinho); }
.painel-bolas { position: absolute; right: -6px; top: -6px; display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; opacity: .9; transform: rotate(8deg); }
.painel-bolas i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem;
  border: 2px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .45); }
.painel-bolas i:nth-child(3n+1) { background: var(--verde-vivo); color: var(--marinho); border-color: transparent; }
.painel-bolas i:nth-child(4n+2) { background: var(--amarelo-vivo); color: var(--marinho); border-color: transparent; }
.painel-bolas i { animation: bola-pulo 3.2s ease-in-out infinite; }
.painel-bolas i:nth-child(2) { animation-delay: .4s; } .painel-bolas i:nth-child(3) { animation-delay: .8s; }
.painel-bolas i:nth-child(4) { animation-delay: 1.2s; } .painel-bolas i:nth-child(5) { animation-delay: 1.6s; }
.painel-bolas i:nth-child(6) { animation-delay: 2s; }
.painel .painel-texto { padding-right: 96px; }
@media (min-width: 720px) { .painel { padding: 28px 28px 30px; } .painel-bolas { right: 24px; top: 18px; grid-template-columns: repeat(3, 44px); gap: 10px; }
  .painel-bolas i { width: 44px; height: 44px; font-size: .95rem; } .painel .painel-texto { padding-right: 180px; } }
@keyframes bola-pulo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.painel .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.painel .botao-sec { color: #fff; border-color: rgba(255, 255, 255, .4); }
.painel .botao-sec:hover { background: rgba(255, 255, 255, .12); }
.painel a:not(.botao) { color: var(--amarelo-vivo); }

/* herói da inicial e do convite: marca + frase em degradê + volante que "sorteia" */
.painel-grande { padding: 22px 18px 26px; }
.painel-grande .painel-texto { padding-right: 0; }
.painel-marca { display: flex; align-items: center; gap: 12px; }
.painel-marca img { width: 48px; height: 48px; }
.painel-marca .marca-nome { font-size: 1.9rem; }
.frase-marca { font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; max-width: 16ch;
  background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.painel-grande h1 { font-size: clamp(1.2rem, 4.5vw, 1.6rem); color: #fff; }
.heroi-grade { display: grid; gap: 18px; align-items: center; }
@media (min-width: 720px) { .heroi-grade { grid-template-columns: 1.4fr 1fr; } }
.grafico-desvios { margin: 0; display: grid; gap: 6px; width: 100%; max-width: 420px; justify-self: center; }
.grafico-desvios svg { width: 100%; height: auto; display: block; }
.gd-base { stroke: rgba(255, 255, 255, .25); stroke-width: .6; }
.gd-linha { stroke: var(--amarelo-vivo); stroke-width: 2.2; stroke-linecap: round; }
.gd-barra { fill: var(--verde-vivo); }
.gd-num { fill: #9fb0cc; font-size: 8px; text-anchor: middle; font-weight: 700; }
.gd-leg-barra, .gd-leg-linha { display: inline-block; width: 12px; vertical-align: middle; border-radius: 2px; }
.gd-leg-barra { height: 10px; background: var(--verde-vivo); }
.gd-leg-linha { height: 3px; background: var(--amarelo-vivo); }
.grafico-desvios figcaption { font-size: .8rem; color: #9fb0cc; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  .painel-bolas i { animation: none; }
}

/* ---- Meu jeito: montagem por etapas ---- */
.etapa { padding: 0; }
.etapa > .etapa-cab { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 14px 16px; }
.etapa > .etapa-cab::-webkit-details-marker { display: none; }
.etapa-titulo strong { display: block; font-size: 1.08rem; }
.etapa-resumo { display: block; font-size: .88rem; color: var(--tinta-2); margin-top: 2px; }
.etapa-alterar { font-size: .88rem; font-weight: 700; color: var(--primaria); border: 2px solid var(--borda); border-radius: 999px; padding: 6px 14px; }
.etapa[open] .etapa-alterar, .etapa[open] .etapa-resumo { display: none; }
.etapa[open] { border-color: var(--primaria); }
.etapa .passo-num-titulo { margin-right: 0; }
.etapa-corpo { padding: 0 16px 16px; }
.etapa-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.etapa-rodape .botao { min-width: 160px; }
@media (max-width: 560px) { .etapa-rodape .botao { flex: 1 1 100%; } }
.opcoes-meus { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opcao-grande { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 2px solid var(--borda); border-radius: var(--raio-p); font-weight: 600; }
.opcao-grande:has(input[type=radio]:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.opcao-grande label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.opcao-grande input[type=radio] { width: 22px; height: 22px; accent-color: var(--primaria); }
.passo-num-campo input { width: 56px; -moz-appearance: textfield; appearance: textfield; }
.passo-num-campo input::-webkit-outer-spin-button, .passo-num-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.params .param { display: inline-flex; align-items: center; gap: 8px; }
.params .passo-num-campo button { width: 38px; height: 38px; }
.params .largura-toda { flex-basis: 100%; }
/* Celular: cada número numa linha (nome à esquerda, − / + à direita), sem recuo, dedo cabe. */
@media (max-width: 720px) {
  .params { padding-left: 0; }
  .params .param { display: flex; flex-basis: 100%; justify-content: space-between; gap: 12px; }
  .params .param select { max-width: 60%; }
}
.params-colunas { display: grid; gap: 8px; padding-left: 0; }
.mais-opcoes > summary { cursor: pointer; padding: 6px 0; }

/* ---- Estratégias: montar (cartela primeiro, "Como funciona", dicas do toque) ---- */
.como-funciona-corpo { display: grid; gap: 16px; align-items: start; }
@media (min-width: 720px) { .como-funciona-corpo { grid-template-columns: 220px 1fr; } }
.cartela-explica { max-width: 220px; }
.cartela-explica .casa { cursor: default; min-height: 34px; font-size: .82rem; }
.cartela-explica.volante-10 .casa { min-height: 22px; font-size: .62rem; }
.passos-explica { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.selo-texto { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-f); color: #fff; font-size: .78rem; font-weight: 800; }
.dica-ferramenta { margin: 0; padding: 8px 12px; border-radius: var(--raio-p); background: var(--primaria-suave); color: var(--tinta); font-weight: 600; }
.dica-ferramenta:empty { display: none; }
.opcao-rodizio { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 2px solid var(--borda); border-radius: var(--raio-p); cursor: pointer; }
.opcao-rodizio:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.opcao-rodizio input { width: 22px; height: 22px; accent-color: var(--primaria); margin: 0; }
.rodizio-ordem { display: block; margin-top: 4px; font-weight: 700; color: var(--primaria); }
.rodizio-ordem:empty { display: none; }
.regra-regiao { margin: 0; }
.faixa.so-livre .param { display: none; }
.faixa .param { display: inline-flex; align-items: center; gap: 6px; }
.faixa .passo-num-campo input { width: 52px; }
.criterios-extras > summary { cursor: pointer; padding: 4px 0; }
.criterios-extras[open] > summary { margin-bottom: 12px; }
.titulo-secao { margin: 20px 0 4px; font-size: 1.15rem; }

/* ---- Gerador: estilo que decide tudo (especialista, Meu jeito): sem jogo misto e sem quantidade/tamanho ---- */
.manda-nota { display: none; }
.estilo-manda .manda-nota { display: block; }
.estilo-manda .chips-quantidade, .estilo-manda .campo-tamanho { display: none; }
.estilo-manda .interruptor { opacity: .45; cursor: not-allowed; }
.estilo-manda .misto-dica, .estilo-manda .misto-limpar { display: none; }
.estilo-manda .cartela-grande input:checked + span { background: none; color: inherit; font-weight: 700; }
/* Especialista: exemplo antigo apagado depois de mexer nas escolhas */
.desatualizada > :not(.previa-velha) { opacity: .4; }
.desatualizada .previa-ajustou { display: none; }

/* ---- Conferência linha a linha (Meus jogos, Resultados, concurso) ---- */
.nb { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 .82rem/1 var(--mono);
  font-style: normal; border: 2px solid transparent; cursor: pointer; transition: opacity .15s; }
.nb.acerto { background: var(--ok); color: var(--cartao); }
.nb.errou { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-suave); }
.nb.faltou { background: transparent; color: var(--tinta-2); border: 2px dashed var(--tinta-3); }
.nb.achado { outline: 3px solid var(--ouro); outline-offset: 1px; }
.conf-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--raio-p);
  background: var(--cartao); border: 1px solid var(--borda); position: sticky; top: 0; z-index: 3; }
.leg-conf { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--borda); background: var(--cartao); color: var(--tinta); font: inherit; font-weight: 600; }
.leg-conf .nb { width: 26px; height: 26px; font-size: .72rem; cursor: inherit; }
.leg-conf[aria-pressed="true"] { border-color: var(--primaria); background: var(--primaria-suave); }
.conf-dica { flex-basis: 100%; }
body.foco-acerto .conf .nb:not(.acerto), body.foco-errou .conf .nb:not(.errou),
body.foco-faltou .conf .nb:not(.faltou) { opacity: .18; }
.conf { display: grid; }
.conf-linha { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.conf-linha:first-child { border-top: 0; }
.conf-resultado { background: var(--primaria-suave); border-radius: var(--raio-p); padding: 10px; }
.conf-rot { display: grid; line-height: 1.2; }
.conf-rot small { font-size: .72rem; }
.nbs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.faltaram { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-left: 6px; padding-left: 8px; border-left: 2px solid var(--borda); }
.faltaram small { color: var(--tinta-3); }
.conf-res { text-align: right; white-space: nowrap; }
.conf-premio { color: var(--ok); font-weight: 800; }
.conf-linha.premiada .conf-rot { color: var(--ok); font-weight: 700; }
@media (max-width: 640px) {
  .conf-linha { grid-template-columns: 1fr auto; }
  .conf-linha .nbs { grid-column: 1 / -1; grid-row: 2; }
}
.conf-concurso > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.conf-concurso > summary::before { content: "▸"; margin-right: 6px; color: var(--tinta-3); }
.conf-concurso[open] > summary::before { content: "▾"; }
.conf-concurso[open] > summary { margin-bottom: 10px; }
.conf-concurso { display: grid; gap: 8px; }
.tabela-jornada td, .tabela-jornada th { white-space: nowrap; }
.saldo-pos { color: var(--ok); font-weight: 700; }
.saldo-neg { color: var(--erro); font-weight: 700; }
.varredura > summary { cursor: pointer; }

/* ---- Fluxo padrão em blocos (08/10/2026): empilhados, uma cor por etapa, número contado pelo CSS ----
   Mesmo esqueleto em Gerar, Meu jeito e Estratégias: verde = quantos · azul = como montar · amarelo = regras ·
   marinho = cartela e jogar. Bloco escondido (display: none) não conta no número. */
.fluxo { counter-reset: bloco; display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.bloco { counter-increment: bloco; border-radius: var(--raio); padding: 16px; border: 2px solid; border-left-width: 8px; }
.bloco > * + * { margin-top: 12px; }
.bloco-cab { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0; }
.bloco-num::before { content: counter(bloco); display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; font-size: 1rem; font-weight: 900; color: #fff; background: var(--tom-bloco); }
/* Início, quadro 1 (03/11/2026, dono): a pergunta em destaque, maiúscula e maior */
.bloco-total .bloco-cab { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.2; color: #0d7a5f; }
.bloco-total .bloco-num::before { width: 38px; height: 38px; font-size: 1.15rem; flex-shrink: 0; }
@media (max-width: 480px) { .bloco-total .bloco-cab { font-size: 1.2rem; } }
@media (prefers-color-scheme: dark) { .bloco-total .bloco-cab { color: #4fe0b8; } }
.bloco-sub { margin-top: 6px; font-size: .9rem; color: var(--tinta-2); }
.bloco-verde { --tom-bloco: #13a37f; border-color: #13a37f; background: color-mix(in srgb, #2fd0a6 9%, var(--cartao)); }
.bloco-azul { --tom-bloco: #2f80d0; border-color: #2f80d0; background: color-mix(in srgb, #4aa3f0 10%, var(--cartao)); }
.bloco-amarelo { --tom-bloco: #c99a1a; border-color: #e0b234; background: color-mix(in srgb, #f4c03e 12%, var(--cartao)); }
.modulo-status { font-size: .88rem; font-weight: 600; color: var(--tinta-2); }
.modulo-feito .modulo-status { color: #0d8a6a; }
.modulo-feito { box-shadow: 0 0 0 2px color-mix(in srgb, #13a37f 35%, transparent); }
.falta-topo { font-weight: 700; padding: 8px 12px; border-radius: var(--raio-p); background: var(--cartao); border: 1px dashed var(--borda); }
.falta-topo.falta { border: 2px solid #e0b234; background: color-mix(in srgb, #f4c03e 18%, var(--cartao)); }
.falta-topo.fechou { border: 2px solid #13a37f; background: color-mix(in srgb, #2fd0a6 18%, var(--cartao)); }
.falta-topo.passou { border: 2px solid #d04a4a; background: color-mix(in srgb, #f06a6a 14%, var(--cartao)); }
.bloco-marinho { --tom-bloco: var(--marinho); border-color: var(--marinho); background: var(--cartao); }
.modos { display: grid; gap: 10px; }
@media (min-width: 720px) { .modos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .modos:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
.modo { display: block; cursor: pointer; }
.modo input { position: absolute; opacity: 0; pointer-events: none; }
.modo-corpo { display: block; height: 100%; border: 2px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--cartao); }
.modo-corpo strong { display: block; font-size: 1.05rem; }
.modo-corpo span { display: block; font-size: .88rem; color: var(--tinta-2); }
.modo input:checked + .modo-corpo { border-color: #2f80d0; background: color-mix(in srgb, #4aa3f0 18%, var(--cartao)); box-shadow: 0 0 0 2px #2f80d0 inset; }
.modo input:disabled + .modo-corpo { opacity: .45; cursor: not-allowed; }
.modo input:focus-visible + .modo-corpo { outline: 3px solid var(--ouro); outline-offset: 2px; }
/* O gerador em blocos é uma coluna só, também no computador (antes: estilo | cartela ao lado). */
.gerador.fluxo { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
.gerador.fluxo > * { grid-area: auto; min-width: 0; }
.gerador.fluxo .gerador-painel { position: static; }
@media (min-width: 900px) { .gerador.fluxo .estilos { grid-template-columns: repeat(2, 1fr); } }
.so-manual { display: none; }
.modo-manual .so-manual { display: inline; }
p.so-manual { margin: 0; }
.modo-manual p.so-manual { display: block; }
.modo-manual .nao-manual, .modo-manual .bloco-regras, .modo-manual .chips-quantidade { display: none; }
/* Modo "Com garantia" (fechamento): a tabela manda na quantidade e no tamanho; não há regra a escolher. */
.bloco-garantia { display: none; }
.modo-garantia .bloco-garantia { display: block; }
.modo-garantia .bloco-quantos, .modo-garantia .bloco-regras { display: none; }
.gerador.fluxo .gerar-barra { bottom: 76px; }
@media (min-width: 900px) { .gerador.fluxo .gerar-barra { bottom: 0; } }

/* ---- Instalar no celular (PWA) ---- */
.instalar-app[hidden] { display: none; }
.faixa-instalar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--raio);
  background: var(--marinho); color: #fff; border-bottom: 3px solid var(--verde-vivo); }
.faixa-instalar img { border-radius: 10px; flex: none; }
.faixa-instalar-texto { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.faixa-instalar .botao-link { color: #c9d6ea; }
.instalar-app .so-android, .instalar-app .so-iphone { display: none; }
.instalar-android .so-android, .instalar-iphone .so-iphone { display: revert; }

/* ---- Tabela que vira cartões no celular (08/10/2026: a de Meu jeito espremia 5 colunas e o texto descia
   palavra por palavra). Cada linha = um cartão; cada célula com data-rotulo mostra o rótulo à esquerda. ---- */
@media (max-width: 720px) {
  .tabela-rolagem:has(.tabela-cartoes) { overflow: visible; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tfoot, .tabela-cartoes tr, .tabela-cartoes td,
  .tabela-cartoes tbody th, .tabela-cartoes tfoot th { display: block; width: 100%; }
  .tabela-cartoes tfoot tr { margin-top: 14px; border-color: var(--tinta-3); }
  .tabela-cartoes .cartao-titulo > :first-child { font-size: 1.05rem; }
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes tr { border: 2px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--cartao); }
  .tabela-cartoes tr + tr { margin-top: 14px; }
  .tabela-cartoes td { border: 0; padding: 6px 0; text-align: left; }
  .tabela-cartoes td.num { text-align: left; }
  .tabela-cartoes td[data-rotulo] { border-top: 1px solid var(--borda); }
  .tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .72rem; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
  .tabela-cartoes .cartao-titulo strong:first-child { font-size: 1.15rem; }
  .tabela-cartoes .cartao-acoes { padding-top: 10px; }
  .tabela-cartoes .cartao-acoes .acoes-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .tabela-cartoes .cartao-acoes .botao { flex: 1 1 100%; justify-content: center; }
}


/* Quantos jogos: campo livre (1 a 300) com atalhos e custo total (18/10/2026) */
.campo-quantidade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.campo-quantidade .passo-num-campo input { width: 64px; }
.atalhos-quantidade { display: flex; flex-wrap: wrap; gap: 6px; }
.atalhos-quantidade .chip-link { cursor: pointer; font: inherit; font-weight: 700; }
.atalhos-quantidade .chip-link[aria-current="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.campo-quantidade .custo-total { flex-basis: 100%; margin: 0; font-weight: 800; }
.campo-quantidade .ajuda { flex-basis: 100%; }

/* ---- Início em uma tela (22/10/2026): quadro do total, módulos que adicionam grupos e "Sua aposta" ----
   No celular, a barra fixa (acima da barra de baixo) mostra a contagem; "Ver aposta" abre a aposta por cima. */
.inicio-topo { display: grid; gap: 6px; max-width: 760px; margin: 0 auto 12px; }
.inicio-topo p { margin: 0; }
.inicio-topo-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.inicio-topo-linha .abas { margin: 0; }
.atalho-cartaz { white-space: nowrap; }
.promessa { max-width: 760px; margin: 0 auto 16px; padding: 12px 16px; }
.promessa summary { cursor: pointer; }
.promessa p { margin: 8px 0 0; }
.inicio-fluxo { padding-bottom: 8px; }
.total-aposta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.passo-num-grande button { width: 48px; height: 48px; }
.passo-num-grande input { width: 96px; min-height: 52px; font-size: 1.8rem; }
.bloco-mania p { margin: 0; }
.gerador-modulo .bloco-cartela { display: none; }
.gerador-modulo.misto-ligado .bloco-cartela { display: grid; }
.gerador-modulo.modo-garantia .bloco-cartela { display: none; }   /* garantia: grupo pela regra, sem cartela (dono) */
.modo-garantia .nao-garantia { display: none; }
.modulo-numeros { display: grid; gap: 12px; }
@media (min-width: 720px) { .modulo-numeros { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }
.aviso-modulo-ok { color: var(--ok); font-weight: 700; }
.aposta { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; padding: 16px; border: 2px solid var(--marinho);
  border-radius: var(--raio); background: var(--cartao); }
.aposta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aposta-cab h2 { margin: 0; }
.aposta-fechar { display: none; }
.aposta-placar, .aposta [data-aposta-falta] { margin: 0; }
.aposta-barra { display: block; height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.aposta-barra span { display: block; height: 100%; width: 0; background: var(--verde-vivo, var(--ok)); transition: width .3s; }
.aposta-barra.passou span { background: var(--erro); }
.aposta-grupos { display: grid; gap: 0; }
.grupo-aposta { border-top: 1px solid var(--borda); padding: 10px 0; display: grid; gap: 4px; }
.grupo-aposta p { margin: 0; }
.grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.grupo-jogos summary { cursor: pointer; font-size: .9rem; color: var(--primaria); font-weight: 600; }
.grupo-jogos .lista-jogos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.barra-aposta { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 9;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--marinho); color: #fff;
  box-shadow: 0 -4px 16px rgba(15, 31, 61, .2); }
.barra-aposta[hidden] { display: none; }
.barra-aposta-texto { flex: 1; min-width: 0; display: grid; gap: 4px; font-size: .9rem; }
.barra-aposta .aposta-barra { background: rgba(255, 255, 255, .25); height: 6px; }
.barra-aposta.pulsa { animation: pulsa-aposta .6s; }
@keyframes pulsa-aposta { 50% { background: var(--primaria); } }
@media (prefers-reduced-motion: reduce) { .barra-aposta.pulsa { animation: none; } }
body:has(.barra-aposta:not([hidden])) .rodape { padding-bottom: 70px; }
@media (min-width: 900px) { .barra-aposta { bottom: 0; } }
/* Aposta aberta por cima (toque em "Ver aposta"): a mesma seção vira uma gaveta de baixo para cima. */
body.aposta-aberta { overflow: hidden; }
body.aposta-aberta .aposta { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 85vh; max-width: none;
  overflow-y: auto; border-radius: 20px 20px 0 0; border-width: 0; box-shadow: 0 -10px 40px rgba(15, 31, 61, .35);
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
body.aposta-aberta::after { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(15, 31, 61, .45); }
body.aposta-aberta .aposta-fechar { display: inline-flex; }
@media (min-width: 900px) { body.aposta-aberta .aposta { left: 50%; transform: translateX(-50%); max-width: 760px; } }
.faixa-convite { max-width: 760px; margin: 16px auto 0; }
.aposta-separado { border: 2px solid var(--amarelo-vivo, var(--ouro)); border-radius: var(--raio-p); padding: 10px 12px; display: grid; gap: 4px; }
.aposta-separado[hidden] { display: none; }
.aposta-separado h3 { margin: 0; font-size: 1rem; }
.aposta-separado > p { margin: 0; }
.aposta-separado .grupo-aposta:first-of-type { border-top: 0; }
/* Cartela pequena no Gerar do Início (22/10/2026, dono): só em "Eu escolho algumas" e "Manual", bolinhas menores. */
.gerador-modulo .cartela-grande.volante-5 { max-width: 270px; gap: 5px; }
.gerador-modulo .cartela-grande.volante-10 { max-width: 440px; gap: 3px; }
.gerador-modulo .cartela-grande .casa { font-size: 1rem; border-radius: 50%; }
.gerador-modulo .cartela-grande.volante-10 .casa { font-size: .8rem; }
.gerador-modulo .cartela-cab { font-size: .9rem; }
.lista-celular { border: 1px dashed var(--borda); border-radius: var(--raio-p); padding: 10px 12px; }
.lista-celular summary { cursor: pointer; }
.lista-celular ol { margin: 8px 0 0; padding-left: 20px; }
.so-celular { display: none; }
@media (max-width: 719px) { .so-celular { display: block; } }
.sessoes-jogar { max-width: 760px; margin: 16px auto 0; }
.sessao-linha { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--borda); cursor: pointer; }
.sessao-linha input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.botao-perigo { color: var(--erro); border-color: var(--erro); }

/* Meu jeito: quadro "O seu jeito" (25/10/2026) */
.resumo-jeito { border: 2px solid #13a37f; border-left-width: 8px; }
.resumo-jeito-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.resumo-jeito-cab h2 { margin: 0; font-size: 1.15rem; }
.situacao { font-size: .85rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.situacao-salvo { background: color-mix(in srgb, #2fd0a6 22%, var(--cartao)); color: #0d7a5e; }
.situacao-pendente { background: color-mix(in srgb, #f4c03e 25%, var(--cartao)); color: #7a5a00; }
.situacao-mudou { background: color-mix(in srgb, #f06a6a 18%, var(--cartao)); color: #a02c2c; }
.parte-cab { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px 8px; font-size: 1.1rem; }
/* barra do Salvar: sempre à vista no fim da tela enquanto o painel está aberto (acima do menu de baixo no celular) */
.barra-salvar { position: sticky; bottom: 76px; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px; border-radius: var(--raio); background: var(--cartao); border: 2px solid #13a37f;
  box-shadow: 0 -4px 16px rgb(0 0 0 / .12); }
@media (min-width: 900px) { .barra-salvar { bottom: 8px; } }
.resumo-jeito-cab .campo { flex: 1 1 240px; margin: 0; }

/* Minha conta → Minhas coisas (25/10/2026) */
.atalhos-conta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cabeca-conta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cabeca-conta h1 { margin: 0; }
.atalhos-conta a { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-p); color: inherit; text-decoration: none; font-size: 1.3rem; }
.atalhos-conta a:hover, .atalhos-conta a:focus-visible { border-color: var(--primaria); }
.atalhos-conta span { display: grid; font-size: 1rem; min-width: 0; }
.atalhos-conta small { color: var(--tinta-2); font-size: .85rem; }

/* ---- Cartaz para comércios (/comercio) ---- */
.cartaz-previa { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 2px 12px rgba(15, 31, 61, .15); }

/* ---- Menu do acesso de gestão (app/gestao.py, _menu_gestao.html): seções em cima, faixa da seção embaixo.
   A faixa da seção atual fica à mostra; passar o mouse (ou o foco do teclado) em outra seção troca a faixa. ---- */
.gestao { background: var(--marinho); color: #fff; }
.gestao .conteudo { padding-top: 0; padding-bottom: 0; }
.gestao-secoes { list-style: none; margin: 0; padding: 0 0 46px; display: flex; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; }
.gestao-secoes::-webkit-scrollbar { display: none; }
.gestao-secao { flex: 0 0 auto; }
.gestao-titulo, .gestao-site a { display: block; padding: 13px 16px; color: #c9d6ea; text-decoration: none; font-weight: 800;
  font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 3px solid transparent; }
.gestao-site { margin-left: auto; flex: 0 0 auto; }
.gestao-site a { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--amarelo-vivo); }
.gestao-secao.atual > .gestao-titulo { color: #fff; border-bottom-color: var(--verde-vivo); }
.gestao-faixa { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #e8f1fa;
  border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  padding: 0 max(16px, calc((100% - 1040px) / 2 + 16px)); align-items: center; gap: 4px; }
.gestao-faixa::-webkit-scrollbar { display: none; }
.gestao-faixa a { flex: 0 0 auto; padding: 8px 14px; border-radius: 8px; color: var(--marinho); text-decoration: none;
  font-weight: 600; font-size: .92rem; }
.gestao-faixa a:hover { background: #fff; }
.gestao-faixa a[aria-current="page"] { background: #fff; font-weight: 800; box-shadow: inset 0 -3px 0 var(--verde-vivo); }
.gestao { position: relative; }
.gestao-secao.atual > .gestao-faixa { display: flex; }
@media (hover: hover) {
  .gestao-secoes:hover .gestao-secao.atual:not(:hover) > .gestao-faixa { display: none; }
  .gestao-secao:hover > .gestao-faixa { display: flex; z-index: 2; }
  .gestao-secao:hover > .gestao-titulo { color: #fff; }
}
.gestao-secao:focus-within > .gestao-faixa { display: flex; z-index: 3; }

/* Cadastro: confirmação na hora do celular/código de quem indicou (04/11/2026). */
.texto-ok { color: var(--ok); font-weight: 600; }
.texto-erro { color: var(--erro); font-weight: 600; }
.campo-indicador.destaque-verde { border: 2px solid var(--primaria); border-radius: var(--raio-p); padding: 12px 14px; }
.campo-indicador.destaque-verde input { font-size: 1.25rem; }
.celular-cartaz { font-size: 1.15rem; }
.celular-cartaz strong { font-size: 1.6rem; letter-spacing: .02em; display: block; }
.divulgacao-previa { width: 100%; height: auto; max-width: 420px; border: 1px solid var(--borda, #d8dee8); border-radius: 8px; }

/* Bolão no Início (04/11/2026): quadro roxo, separado da Sua aposta. */
.bloco-roxo { --tom-bloco: #7a4fc9; border-color: #8a5fd6; background: color-mix(in srgb, #9b6ef0 10%, var(--cartao)); }
.seletor-grande { font-size: 1.2rem; font-weight: 700; padding: 10px 12px; }
.bolao-lista { border-top: 1px dashed var(--borda); padding-top: 12px; margin-top: 4px; }
.bolao-lista textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); color: inherit; }