/* ============================================================
   Fake Bet — sistema visual
   Apenas apresentação: nenhuma lógica de negócio vive no CSS/JS
   (regra 4 do CLAUDE.md).

   COMO MEXER AQUI (para não virar guerra de sobrescrita):
   1. Cores, raios e alturas SÓ saem das variáveis do :root abaixo.
      Mudou a identidade? Muda a variável, não a regra.
   2. Cada componente tem UM bloco só, na ordem: ícones → topo →
      estrutura → lateral → painéis → selos → jogos → odds →
      boletim → botões → páginas → utilitários → responsivo.
      Antes de criar uma classe, procure a existente (Ctrl+F).
   3. Proibido `!important` (hoje: zero). Se precisou dele, a regra
      está no lugar errado ou o seletor está competindo com outro.
   4. Todo `@media` vive na ÚLTIMA seção do arquivo, do maior para
      o menor. Não espalhe media query pelo meio do arquivo.
   5. Nada de `style=""` nas views, exceto valor vindo de dado
      calculado no servidor (largura de barra, posição da bola).
      Para espaçamento use os utilitários `.u-*`.
   6. Componente que usa o atributo `hidden` NUNCA pode declarar
      `display` direto na classe — o `display` vence o `hidden` e o
      elemento aparece quando deveria estar oculto. Use sempre
      `.classe:not([hidden]) { display: ... }`.
   ============================================================ */

:root {
    /* Base escura densa, no idioma das casas de aposta */
    --bg: #080b11;
    --surface: #101620;
    --surface-2: #161d29;
    --surface-3: #1d2634;
    --border: #232c3c;
    --border-strong: #2f3a4d;

    --text: #eef2f8;
    --text-dim: #9aa6bb;
    --text-faint: #6b7688;

    --accent: #26e07a;
    --accent-dark: #12b45e;
    --accent-light: #4bf396;
    --accent-ink: #042312;

    --live: #ff4356;
    /* Fundos tingidos dos blocos de destaque: a cor envolve o bloco inteiro,
       em vez de virar um filete na lateral esquerda — que já se repetia em
       meia dúzia de lugares e tinha perdido o efeito de destacar. */
    --accent-tint: rgba(38, 224, 122, 0.06);

    /* Dourado: a cor da MARCA e dos detalhes de prestígio (o "Bet" do logo, o
       troféu do ranking, o controle de som). Não é o verde, que significa
       dinheiro e odd, nem o amarelo de aviso — se o dourado virar alerta, a
       marca perde a assinatura. */
    --gold: #e5b93c;
    --gold-light: #f5d67a;
    --gold-dim: rgba(229, 185, 60, 0.45);
    --gold-tint: rgba(229, 185, 60, 0.08);
    --live-tint: rgba(255, 67, 86, 0.08);
    --warn-bg: rgba(255, 199, 74, 0.09);
    --warn-border: rgba(255, 199, 74, 0.35);
    --warn-text: #ffc74a;

    --radius: 8px;
    --radius-sm: 5px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

    --topbar-h: 54px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Ícones (Lucide inline; cor pelo tema) ---------- */
.icon { display: inline-block; vertical-align: -0.16em; flex: none; }
.i-accent { color: var(--accent); }
.i-live { color: var(--live); }
.i-warn { color: var(--warn-text); }
.i-dim { color: var(--text-dim); }
.i-faint { color: var(--text-faint); }
.i-gold { color: var(--gold); }

/* ---------- Faixa de transparência (identidade do projeto) ---------- */
.disclaimer {
    background: linear-gradient(90deg, #2a2208, #3a2f0b, #2a2208);
    color: var(--warn-text);
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(255, 199, 74, 0.18);
}

/* ---------- Barra superior ---------- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0 7px;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text-dim);
    transition: transform 0.2s, opacity 0.2s;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky;
    top: var(--topbar-h);
    z-index: 39;
}
.mobile-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
}
.mobile-link.is-active { color: var(--accent); }
.disclaimer-short { display: none; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
/* Mesmo max-width do .shell (1360px): em tela larga o cabeçalho não estica
   mais que o miolo do site, só o fundo continua de ponta a ponta. */
.topbar-inner {
    max-width: 1360px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
}

.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
/* O ₣ fica verde porque é a MOEDA; o "Bet" é dourado porque é a marca. Os dois
   juntos dizem exatamente o que o site é: uma casa de aposta de moeda fake.
   Sem `.logo` na frente: qualquer menção da marca no site inteiro (rodapé,
   promos, conteúdo do banco via fakebet_brand()) usa a MESMA cor — só o
   tamanho do ₣ é maior aqui porque é o logo do cabeçalho. */
.logo-coin { color: var(--accent); }
.logo-ake { color: var(--text); }
.logo-bet { color: var(--gold); }
.logo .logo-coin { font-size: 22px; }

.topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.topnav-link {
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.topnav-link:hover { color: var(--text); background: var(--surface-2); }
.topnav-link.is-active { color: var(--accent); background: rgba(38, 224, 122, 0.10); }

/* Saldo — o número mais visível do site, como nas bets reais */
.balance-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 5px 6px 5px 13px;
    white-space: nowrap;
}
.balance-value { font-weight: 800; color: var(--accent); font-size: 14px; }
/* Tinta ESCURA sobre o verde: branco sobre --accent-dark dá ~2,9:1 e não
   passa no mínimo de leitura. O verde claro com --accent-ink passa folgado e
   ainda faz o botão saltar mais no topo. */
.balance-chip .btn-mini {
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
}
.balance-chip .btn-mini:hover { background: var(--accent-light); }

.user-menu { display: flex; align-items: center; gap: 10px; }
/* O nome é um link para "Meus dados" — precisa parecer clicável sem virar
   mais um botão brigando com o saldo ao lado. */
/* O nome é só o rótulo dentro do link de perfil — quem carrega o estado de
   hover e de ativo é o .icon-action em volta. */
.user-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cidade e estado lado a lado, empilhados no celular. Largura igual e não
   uma coluna estreita para a UF: "Rio Grande do Norte" não cabe em 130px e
   o nome sai cortado no meio. */
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; }
@media (max-width: 480px) {
    .field-pair { grid-template-columns: 1fr; }
}
/* Ações em ícone do topo (perfil e sair). O mesmo alvo de clique para as
   duas, com ou sem <form> em volta — antes a saída era um botão "pelado" e o
   nome, texto solto: nenhum dos dois parecia clicável. */
.icon-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}
.icon-action:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.icon-action.is-active { color: var(--text); background: var(--surface-2); border-color: var(--accent-dark); }
.icon-action.is-exit:hover { color: var(--live); border-color: var(--live); }

.linklike {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12.5px;
    padding: 0;
}
.linklike:hover { color: var(--live); }
.inline-form { display: inline-flex; }

/* Deslogado: "entrar" é discreto ao lado de "criar conta", que é a ação
   principal. No celular ele sai — o menu em cascata já oferece o mesmo link. */
.btn-login { padding: 7px 13px; font-size: 13px; }

/* ---------- Estrutura ---------- */
.shell {
    flex: 1;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 14px;
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr) 312px;
    gap: 14px;
    align-items: start;
}
.shell.shell-narrow { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.shell.shell-no-slip { grid-template-columns: 208px minmax(0, 1fr); }


/* ---------- Barra lateral ---------- */
.sidebar { position: sticky; top: calc(var(--topbar-h) + 14px); }
.sidebar .panel { overflow: hidden; }
.sidebar-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-dim);
}
.sidebar-more:hover { color: var(--accent); }
.sidebar-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 12px 13px 7px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    border-left: 2px solid transparent;
}
.sidebar-link:hover { background: var(--surface-2); color: var(--text); }
.sidebar-link.is-active {
    color: var(--text);
    background: var(--surface-2);
    border-left-color: var(--accent);
}
/* Competição dentro de "Futebol": recuada para ler como subitem de
   "Todos os jogos", sem o ícone que já aparece no pai. */
/* O <span> do link precisa ser flex para a marca da competição alinhar com o
   texto — os links com ícone inline já vinham assim por acidente do inline. */
.sidebar-link > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* Bandeira/escudo da competição. Altura fixa e largura livre: bandeira é
   deitada, escudo é quadrado — travar os dois no mesmo quadrado deformaria um
   dos casos. */
.comp-crest {
    height: 14px;
    width: auto;
    max-width: 22px;
    object-fit: contain;
    flex: none;
    border-radius: 2px;
}
.sidebar-link .count {
    font-size: 11px;
    color: var(--text-faint);
    background: var(--surface-3);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 1px 7px;
}
.sidebar-sep { height: 1px; background: var(--border); margin: 6px 0; }

/* ---------- Painéis ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.panel-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-sub { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.panel-body { padding: 14px; }
.panel-body-flush { padding: 0; }

/* ---------- Selos ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 7px;
    white-space: nowrap;
}
.badge-open { background: rgba(38, 224, 122, 0.13); color: var(--accent); }
.badge-live { background: rgba(255, 67, 86, 0.15); color: var(--live); }
.badge-done { background: var(--surface-3); color: var(--text-faint); }
/* Contagem para o próximo apito — ocupa o lugar do "ao vivo" quando não há
   jogo rolando. Neutro de propósito: não é urgência (vermelho) nem dinheiro
   (verde), é só o relógio. */
.badge-next {
    background: var(--surface-3);
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.badge-next .next-kickoff-time { font-variant-numeric: tabular-nums; }
.badge-live .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--live);
    animation: blink 1.3s infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
/* O poller do "Em jogo" (openbets.js) marca isto quando detecta que a
   partida acabou, sem recarregar a página sozinho — só para o pulso de "ao
   vivo" parar de mentir enquanto a aposta não sai da lista. */
.badge-live.is-settling { opacity: 0.6; }
.badge-live.is-settling .dot { animation: none; opacity: 0.4; }

/* ---------- Linhas de jogo (grade horizontal, padrão das casas) ---------- */
.market-header,
.match-row {
    display: grid;
    /* Coluna do confronto com teto fixo (não 1fr): o que sobra na linha vai
       todo pro "+" no fim, que estica pra preencher — em vez de virar vão
       morto ao lado do placar, que ficava flutuando sem função. */
    grid-template-columns: 58px 220px 214px 148px 1fr;
    gap: 10px;
    align-items: center;
}
.market-header {
    padding: 7px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: center;
}
.match-row {
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
/* Só os dois mercados (colunas 3 e 4) — a 5ª coluna é o "+", sempre visível
   mesmo com apostas fechadas. */
.match-market-wide { grid-column: 3 / span 2; }

/* Link fixo pra partida, sempre presente (mesmo "+" de .mini-more na lateral,
   só maior — regra 5, mesma ideia, tamanho da linha cheia). */
.match-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    /* Virou <button> (abre o painel de últimos jogos, não navega mais) —
       reseta o que o navegador bota de série em botão sozinho. */
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 16px;
    font-weight: 700;
}
.match-more:hover { color: var(--accent); border-color: var(--accent-dark); }
/* No desktop o botão é só o "+" (coluna estreita); o rótulo por extenso é
   coisa do celular, onde ele vira linha própria — ver o breakpoint. */
.match-more-label { display: none; }
.match-more.is-open { background: var(--surface-3); color: var(--accent); border-color: var(--accent-dark); }

/* Painel de "últimos jogos", aberto pelo .match-more — HTML pronto do
   servidor (partials/match_form_panel.php + team_form.php), o JS só troca
   innerHTML e alterna [hidden]. Um apêndice do tamanho do CONTEÚDO (não uma
   barra esticando a linha toda) — pedido do autor depois de ver a versão
   com botão elástico: `.form-panel-link` é `inline-flex`, então só ocupa a
   largura que as duas linhas de forma pedem. O apêndice inteiro é o link
   pra partida, não tem botão separado dentro.
   `:not([hidden])`, não só `.match-expand` — regra de especificidade do CSS:
   estilo de autor sempre ganha do `[hidden] { display: none }` do
   navegador, MESMO com especificidade igual. Sem o `:not`, o painel ficava
   visível (vazio) em TODA linha da lista o tempo todo — o espaçamento a
   mais entre partidas que o autor notou era exatamente isso. */
.match-expand:not([hidden]) {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.form-panel-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 30px 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.form-panel-link:hover { border-color: var(--accent-dark); background: var(--surface-3); text-decoration: none; }
/* "Rabinho" apontando pro "+" que abriu o painel, vazando por cima da borda
   de cima do cartão — mesma ideia do marcador de livro (.bet-bookmark):
   maior e "passando por cima" deixa mais óbvio que o cartão é um apêndice
   PENDURADO no botão, não uma caixa solta abaixo dele. */
.form-panel-link::before {
    content: "";
    position: absolute;
    top: -9px;
    right: 20px;
    width: 18px;
    height: 18px;
    background: var(--surface-2);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
    z-index: 1;
}
.form-panel-link:hover::before { background: var(--surface-3); border-color: var(--accent-dark); }
/* Seta de "vai pra partida" — centralizada na borda direita do cartão,
   respondendo a "clicando aqui vai pra onde?" sem depender só do hover. */
.form-goto {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    color: var(--text-faint);
    z-index: 1;
}
.form-panel-link:hover .form-goto { color: var(--accent); }
/* Sem nome do time aqui (já está escrito por extenso na linha de cima —
   repetir incomodava): só o escudo, com o nome no alt/title de quem passar
   o mouse ou usar leitor de tela.

   Colunas FIXAS, não flex com largura por conteúdo: "1º" e "29º" têm
   tamanho diferente, e com largura livre a fita de jogos começava num X
   diferente em cada linha — as duas ficavam desalinhadas entre si. Os
   selos de posição/probabilidade viram caixa de largura fixa (com "—"
   quando falta o dado — nunca somem, ver o partial) e uma divisória marca
   onde os "números do time" acabam e a "forma" começa. */
.form-row {
    display: grid;
    grid-template-columns: 22px 32px 40px 1px auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
/* "Tabela e histórico" não mostra o selo de probabilidade (subiu pra barra
   de "Força dos times") — sem a coluna de 40px reservada pra ele, senão
   sobra um vão vazio onde o selo estaria. */
.form-row-noprob { grid-template-columns: 22px 32px 1px auto auto; }
.form-position, .form-prob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.form-position { background: var(--surface-3); color: var(--text-dim); }
.form-prob { background: rgba(38, 224, 122, 0.14); color: var(--accent); }
.form-divider { width: 1px; height: 18px; background: var(--border); justify-self: center; }
.form-strip { display: flex; gap: 4px; }
.form-trend { flex: none; }
.form-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    flex: none;
}
.form-V { background: rgba(38, 224, 122, 0.18); color: var(--accent); }
.form-E { background: var(--surface-3); color: var(--text-dim); }
.form-D { background: rgba(255, 67, 86, 0.18); color: var(--live); }
.form-empty { font-size: 12px; }
.match-expand .form-loading { padding: 4px; color: var(--text-faint); font-size: 12px; }

/* Numa lista que mistura os dois, o jogo rolando precisa saltar aos olhos */
.match-row.is-live { border-left: 2px solid var(--live); }
.match-row.is-live .match-when strong { color: var(--live); }

/* Paginação da lista de partidas */
.board-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12px;
}
.board-pager .btn-ghost { padding: 7px 12px; font-size: 12.5px; }
.board-pager a:first-child { justify-self: start; }
.board-pager a:last-child { justify-self: end; }
.match-row:last-child { border-bottom: none; }
.match-row:hover { background: var(--surface-2); }

.match-when {
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
    line-height: 1.3;
}
.match-when strong { display: block; color: var(--text-dim); font-size: 12.5px; }

.match-teams { min-width: 0; }

/* Competição do confronto: a semana junta Brasileirão e Libertadores na
   mesma lista, então cada linha diz de onde é. Discreto de propósito — é
   contexto, não manchete. */
.match-comp {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marcador de livro: partida em que a corrida já tem aposta — mesma fitinha
   em toda lista do site (regra 5, pedido do autor 19/08/2026): destaques do
   topo, tabela central, lateral e dentro da própria partida. A forma
   (cor, recorte em V) é uma fonte só; a POSIÇÃO varia por modificador:
   `.bet-bookmark-float` flutua no canto, vazando por cima da borda
   (position: absolute tira do fluxo — não empurra nenhuma coluna/linha do
   elemento pai, que só precisa de `position: relative`); `.bet-bookmark-
   inline` fica no fluxo normal, sem vazar, um pouco maior — usada no
   cabeçalho de "Nova aposta" pra deixar clara a ligação com as partidas
   marcadas (testado em 19/08/2026: o medo era o marcador parecer
   "destaque" em vez de "já apostei aqui"). */
.bet-bookmark {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
    background: var(--gold);
    color: #2a2208;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
    z-index: 1;
}
.bet-bookmark svg { width: 9px; height: 9px; stroke-width: 3; }
.bet-bookmark-float {
    position: absolute;
    top: -3px;
    left: 14px;
    width: 13px;
    height: 19px;
}
.bet-bookmark-inline {
    position: static;
    width: 17px;
    height: 24px;
    flex-shrink: 0;
}
.bet-bookmark-inline svg { width: 11px; height: 11px; }
/* Dentro da partida o marcador não pode ficar dentro do .panel (overflow:
   hidden corta a ponta que vaza) — este wrapper por fora é o ancestral
   `position: relative` nesse caso específico. */
.bookmark-anchor {
    position: relative;
}
/* Grade, não flex: o placar fica numa coluna PRÓPRIA de largura fixa, centrada
   nela — antes `margin-left: auto` grudava o número na borda direita da
   linha, e a distância até o nome do time variava (e parecia torta) conforme
   o nome era curto ou comprido. */
.match-side {
    display: grid;
    /* Nome com teto (não 1fr): sem ele, o nome esticava até o fim da coluna
       de .match-teams e empurrava o placar pra ponta, longe do time. Com
       teto, placar fica logo depois do nome — a coluna de .match-teams
       agora também tem largura fixa (não 1fr), então não sobra vão nenhum
       aqui dentro: o que sobra na LINHA inteira vai pro "+" no fim, que
       estica pra preencher (regra 5, uma fonte só decide onde o espaço
       livre da tabela vai). */
    grid-template-columns: 18px minmax(0, 140px) 32px;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 1px 0;
}
.match-side .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-side .goals {
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: left;
}
.match-side.is-losing .name, .match-side.is-losing .goals { color: var(--text-dim); }
/* "Casa x Fora" numa linha só — só o celular usa (ver o breakpoint, que
   esconde .match-side e mostra isto). Escondido aqui por padrão pra não
   duplicar visualmente em telas largas. */
.match-teams-compact {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.match-teams-compact .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-teams-compact .crest { flex: none; }
.teams-compact-sep { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-faint); }
.crest { width: 18px; height: 18px; object-fit: contain; flex: none; }
.crest-lg { width: 44px; height: 44px; }
/* Time do coração ao lado do nome, no ranking e na "Sobreviventes" da lateral
   — o destaque É o escudo aparecer; sem cor extra, que já briga com o dourado
   do pódio (regra: dourado só no ranking e no 1º lugar). */
.crest-fav { margin-left: 6px; vertical-align: -3px; }
.crest-mini { width: 15px; height: 15px; }

/* ---------- Odds (o elemento-assinatura) ---------- */
.odds-row { display: flex; gap: 6px; }
.odd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 66px;
    padding: 7px 8px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.odd-btn .odd-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.odd-btn .odd-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
/* Cada mercado tem sua cor: dá para varrer a tabela sem ler os rótulos */
.odds-ou25 .odd-value { color: #6fb2ff; }
.odds-btts .odd-value { color: #c08bff; }
.odds-ou25 .odd-btn:hover { border-color: #3d6ea8; }
.odds-btts .odd-btn:hover { border-color: #6f4fa8; }
.odds-ou25 .odd-btn.is-selected { background: #6fb2ff; border-color: #6fb2ff; }
.odds-btts .odd-btn.is-selected { background: #c08bff; border-color: #c08bff; }
.odds-ou25 .odd-btn.is-selected .odd-value,
.odds-btts .odd-btn.is-selected .odd-value { color: #0b1020; }
.odds-ou25 .odd-btn.is-selected .odd-label,
.odds-btts .odd-btn.is-selected .odd-label { color: rgba(11, 16, 32, 0.7); }
.odd-btn:hover { background: #232f42; border-color: var(--accent-dark); transform: translateY(-1px); }
.odd-btn.is-selected {
    background: var(--accent);
    border-color: var(--accent);
}
.odd-btn.is-selected .odd-label { color: rgba(4, 35, 18, 0.75); }
.odd-btn.is-selected .odd-value { color: var(--accent-ink); }
.odd-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.odd-suspended {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-2);
    border-style: dashed;
}
.odd-suspended .odd-value { color: var(--text-faint); }
.odd-btn.odd-wide { min-width: 0; flex: 1; }

/* Mercados da página da partida: lado a lado em vez de empilhados */
.markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--border);
}
.market-block { padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.market-block:last-of-type { border-bottom: none; }
.market-note { padding: 10px 14px; font-size: 11.5px; color: var(--text-faint); border-top: 1px solid var(--border); }
.market-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 7px;
}

/* ---------- Destaques da home ---------- */
.featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.feature-card {
    position: relative;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
/* As odds (ou o botão que as substitui) ficam SEMPRE coladas no rodapé da
   carta. Sem isto elas sobem na carta que não tem a linha de explicação — o
   "Seu time" não tem — e as três colunas deixam de bater na horizontal, que é
   justamente o que faz o preço ser comparável de relance. */
.feature-card > :last-child { margin-top: auto; }

.feature-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feature-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.highlight-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--surface-3);
    color: var(--text-dim);
    white-space: nowrap;
}
.fc-favorite { border-color: var(--accent-dark); }
.fc-favorite .highlight-tag { background: rgba(38, 224, 122, 0.16); color: var(--accent); }
.fc-live_hot .highlight-tag { background: rgba(255, 67, 86, 0.16); color: var(--live); }
.fc-most_bets .highlight-tag { background: rgba(111, 178, 255, 0.16); color: #6fb2ff; }
.fc-upset .highlight-tag { background: rgba(255, 199, 74, 0.16); color: var(--warn-text); }
.highlight-why { font-size: 11px; color: var(--text-faint); text-align: center; }
.feature-league {
    font-size: 10.5px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feature-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.feature-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
}
.feature-team span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crest-md { width: 32px; height: 32px; object-fit: contain; }
.feature-score {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 5px;
    align-items: baseline;
}

/* Valores que mudam sozinhos (placar, minuto, odds) */
.value-changed { animation: valuepop 0.9s ease-out; }
@keyframes valuepop {
    0% { color: var(--accent); transform: scale(1.35); }
    100% { color: inherit; transform: scale(1); }
}
.odd-up { animation: oddup 1.1s ease-out; }
.odd-down { animation: odddown 1.1s ease-out; }
@keyframes oddup {
    0% { border-color: var(--accent); background: rgba(38, 224, 122, 0.22); }
    100% { border-color: var(--border-strong); background: var(--surface-3); }
}
@keyframes odddown {
    0% { border-color: var(--live); background: rgba(255, 67, 86, 0.18); }
    100% { border-color: var(--border-strong); background: var(--surface-3); }
}

/* ---------- Coluna direita (boletins, contexto e anúncios) ---------- */
.aside-col { position: sticky; top: calc(var(--topbar-h) + 14px); }
.aside-col .betslip { margin-bottom: 14px; }

/* ---------- Anúncios do próprio site ---------- */
.promo-stack { display: grid; gap: 10px; }
.promo {
    background: var(--accent-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    padding: 11px 12px;
}
.promo-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.promo-neutral { background: var(--surface); border-color: var(--border-strong); }

/* Caixa com arte: a imagem entra como fundo e um véu escuro garante que o
   texto continue legível. A arte é atmosfera, não concorrente do texto —
   por isso o véu é forte e o assunto aparece só à direita, onde não há letra. */
.promo-art {
    position: relative;
    background:
        linear-gradient(105deg,
            rgba(16, 22, 32, 0.97) 0%,
            rgba(16, 22, 32, 0.93) 42%,
            rgba(16, 22, 32, 0.62) 100%),
        var(--promo-img) var(--promo-pos, center) / cover no-repeat,
        var(--surface);
}
.promo-art .promo-title,
.promo-art .promo-body { position: relative; }
/* O selo é a assinatura da marca dentro do anúncio — dourado, como o logo. */
.promo-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 5px;
}
.promo-title { display: block; font-size: 13px; margin-bottom: 4px; }
.promo-body { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}
.promo-cta:hover { text-decoration: underline; }

/* ---------- Time do coração (uma coluna da primeira linha do painel) ------- */
.stat-tile-team { min-width: 0; display: flex; flex-direction: column; }
.stat-tile-team .crest-lg { margin-top: 2px; }

/* O seletor cabe na largura da coluna: empilha em vez de estourar.
   O `display` NÃO vai na classe: dentro de <details> ele venceria a ocultação
   nativa e o formulário apareceria com o bloco fechado (regra 6 do topo deste
   arquivo). Só é declarado onde o form deve mesmo estar visível. */
.team-form { gap: 6px; margin-top: 8px; }
.stat-tile-team > .team-form,
.fav-team[open] .team-form { display: flex; flex-wrap: wrap; }
/* Não confiar na ocultação nativa do <details>: medido, ela não se aplica
   aqui e o formulário ficava visível com o bloco fechado. */
.fav-team:not([open]) .team-form { display: none; }
.team-form .team-select { flex: 1 1 120px; min-width: 0; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ---------- Comparativo de custo de vida (painel) ---------- */
.cost-lead { font-size: 13.5px; color: var(--text-dim); margin-bottom: 12px; }
/* Tabela: o item à esquerda, a quantidade à direita — a leitura é
   "cesta básica ....... 1", e a coluna de números fica alinhada. */
.cost-group + .cost-group { margin-top: 16px; }
.cost-group-title {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-strong);
}
.cost-table { width: 100%; border-collapse: collapse; }
.cost-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.cost-table tr:last-child td { border-bottom: none; }
.cost-ico { width: 24px; line-height: 0; color: var(--warn-text); }
.cost-name { font-size: 13px; font-weight: 600; }
.cost-note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-faint);
    line-height: 1.4;
}
/* Marcador da nota de rodapé, na linha e na lista embaixo. */
.cost-ref {
    color: var(--warn-text);
    font-size: 10px;
    font-weight: 700;
    margin-left: 3px;
    vertical-align: super;
    line-height: 0;
}
.cost-qty {
    width: 64px;
    text-align: right;
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cost-sources {
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--text-faint);
}
.cost-sources li { margin-bottom: 3px; }
.cost-sources .cost-ref { margin-left: 0; vertical-align: baseline; }
.cost-sources a { color: var(--text-faint); text-decoration: underline; }
.cost-sources a:hover { color: var(--accent); }

/* ---------- Boletim de aposta ---------- */
.betslip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Cabeçalho das caixas "Nova aposta" e "Em jogo".
   Não existia regra nenhuma para esta classe: o título ficava encostado na
   borda porque herdava zero padding. Mesmas medidas do .panel-head, para as
   caixas do boletim baterem com os painéis do resto do site. */
.betslip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.betslip-head > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.betslip-tabs {
    display: flex;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    /* Em telas estreitas as 4 abas não cabem no espaço igual que `flex: 1`
       dava a cada uma — "Análise" ficava cortada. Em vez de encolher o texto,
       a barra rola na horizontal: nenhuma aba perde letra. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.betslip-tabs::-webkit-scrollbar { display: none; }
.slip-tab {
    flex: 1 0 auto;
    min-width: max-content;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.slip-tab:hover { color: var(--text); }
.slip-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.betslip-count {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 8px;
}
.betslip-body { padding: 14px; }
/* Ícone e texto lado a lado, não empilhados: o ícone com `display: block`
   forçava uma quebra de linha antes do texto, deixando a caixa alta à toa
   quando ela só tem uma frase para mostrar. */
.betslip-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-faint);
    font-size: 12.5px;
    text-align: left;
    padding: 11px 4px;
}
.betslip-empty .icon { flex: none; opacity: 0.5; }

.slip-pick { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-2); }
.slip-match { font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }
.slip-selection { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slip-selection strong { font-size: 13.5px; }
.slip-odd { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.slip-market { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.slip-stake { margin-top: 11px; }
.slip-stake label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 5px;
}
.stake-input {
    width: 100%;
    padding: 10px 11px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}
.stake-input:focus { outline: none; border-color: var(--accent-dark); }
/* Sem as setinhas do input number: quem monta o valor são as fichas. */
.stake-input::-webkit-outer-spin-button,
.stake-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.stake-input { appearance: textfield; -moz-appearance: textfield; }
.quick-clear { flex: 0 0 34px; color: var(--text-faint); }
.quick-stakes { display: flex; gap: 5px; margin-top: 6px; }
.quick-stake {
    flex: 1;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 0;
    cursor: pointer;
}
.quick-stake:hover { border-color: var(--accent-dark); color: var(--text); }

.slip-return {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 11px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border-strong);
    font-size: 12.5px;
    color: var(--text-dim);
}
.slip-return strong { font-size: 15px; color: var(--accent); }

/* Apostas em aberto dentro do boletim */
.open-bet {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    margin-bottom: 8px;
}
.open-bet:hover { border-color: var(--accent-dark); }
.open-bet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    margin-bottom: 5px;
}
.open-bet-match {
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.open-bet-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.open-bet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--border);
}
/* Quando o jogo tem mais de uma aposta, cada bloco (linha + rodapé) leva uma
   divisória mais forte antes dele — sem isto o rodapé de uma encostava direto
   no título da próxima, sem separação nenhuma. A primeira não leva: já tem o
   cabeçalho do jogo em cima. */
.open-bet-item + .open-bet-item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-strong);
}

/* Placar EMBUTIDO no nome dos times — "Casa 1 × 0 Fora" — em vez de um bloco
   à parte. Sem jogo ao vivo é só o separador "×"; ao vivo os dois números são
   [data-field="home"/"away"] normais, escritos por FakebetLive (live-sync.js)
   como qualquer outro placar do site — nenhuma lógica própria aqui. */
.open-bet-score-sep {
    color: var(--text-dim);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Minuto encostado no próprio selo "ao vivo", não num bloco separado. */
.badge-live [data-field="minute"] { font-variant-numeric: tabular-nums; }

/* Lista com teto de ~4 cartões — passado isso, rola dentro do próprio
   cartão em vez de esticar a coluna lateral inteira. */
.open-bet-list-capped { max-height: 350px; overflow-y: auto; }
/* Some do fluxo, mas o :checked continua alcançável pelo seletor de irmão
   adjacente — é o truque de "sem JavaScript" (regra 4). */
.open-bet-expand-input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}
.open-bet-expand-input:checked + .open-bet-list-capped { max-height: none; overflow-y: visible; }
.open-bet-expand-label {
    display: block;
    text-align: center;
    padding: 8px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    border-top: 1px solid var(--border);
}
.open-bet-expand-label:hover { color: var(--accent-light); }
/* Expandido, não sobra nada para "ver todas" fazer. */
.open-bet-expand-input:checked ~ .open-bet-expand-label { display: none; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.btn-primary { background: var(--accent-dark); color: #fff; }
.btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-primary:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent-dark); color: var(--accent); }
.btn-block { width: 100%; }

/* Partida que não aceita mais aposta: o aviso vem em cima, o convite embaixo. */
.btn-closed {
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
    padding-top: 6px;
    padding-bottom: 6px;
}
.btn-closed-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--warn-text);
}
.btn-closed-sub {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.btn-closed:hover { border-color: var(--border-strong); color: var(--text); }
.btn-closed:hover .btn-closed-sub { color: var(--text-dim); }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* ---------- Vitrine (visitante) ---------- */
/* ---------- Carrossel de destaque ----------
   Os slides ficam empilhados no mesmo lugar e só a opacidade muda: assim a
   altura não pula entre um destaque e outro. A arte vem em --hero-img,
   escrita pelo servidor no style do slide (dado calculado, permitido). */
.hero-carousel { position: relative; margin-bottom: 14px; }
.hero-track { display: grid; }
.hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 11, 17, 0.55);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hero-arrow:hover { background: var(--surface-3); color: var(--accent); border-color: var(--accent-dark); }
.hero-prev { left: 10px; }
.hero-next { right: 10px; }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.hero-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: var(--border-strong);
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
}
.hero-dot.is-active { background: var(--accent); width: 18px; }

.hero {
    /* Arte de fundo + véu escuro por cima: a arte tem miolo claro e o texto
       do hero é branco. O véu é mais denso embaixo, onde o texto se acumula. */
    background:
        linear-gradient(to bottom,
            rgba(8, 11, 17, 0.55) 0%,
            rgba(8, 11, 17, 0.78) 45%,
            rgba(8, 11, 17, 0.92) 100%),
        var(--hero-img, none) var(--hero-pos, center) / cover no-repeat,
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px 22px 34px;
    text-align: center;
    margin-bottom: 14px;
}
.hero-tag {
    display: inline-block;
    background: rgba(38, 224, 122, 0.12);
    border: 1px solid rgba(38, 224, 122, 0.35);
    color: var(--accent);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    margin-bottom: 14px;
}
.hero h1 { font-size: 30px; line-height: 1.18; letter-spacing: -0.025em; margin-bottom: 10px; }
.hero h1 span { color: var(--accent); }
.hero-sub { max-width: 560px; margin: 0 auto 18px; color: var(--text-dim); font-size: 14.5px; }
.hero-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hero-note { font-size: 11.5px; color: var(--text-faint); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: #fff;
    font-weight: 800;
    font-size: 11.5px;
    margin-bottom: 7px;
}
.step h3 { font-size: 13.5px; margin-bottom: 3px; }
.step p { font-size: 12.5px; color: var(--text-dim); }

/* ---------- Página da partida ---------- */
.scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    background:
        radial-gradient(600px 200px at 50% 0, rgba(38, 224, 122, 0.09), transparent 70%),
        var(--surface-2);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.scoreboard-team { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.scoreboard-team .name { font-size: 14px; font-weight: 700; }
.scoreboard-center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.score-big { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kickoff-time { font-size: 12.5px; color: var(--text-dim); }

/* Mercados e abas do jogo lado a lado (o campo fica grande, acima) */
.match-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 14px;
    align-items: start;
}
.match-grid > .panel { margin-bottom: 14px; }
/* Sem o painel de mercados, o que sobrou ocupa a largura inteira. */
.match-grid-solo { grid-template-columns: minmax(0, 1fr); }

/* Escalações */
.lineups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
}
.lineup-col { background: var(--surface); padding: 10px 11px; }
.lineup-team {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.lineup-group {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 8px 0 4px;
}
.lineup-player {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
}
.lineup-player .pos {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    border-radius: 3px;
    padding: 2px 0;
    background: var(--surface-3);
    color: var(--text-faint);
}
.pos-GK { background: rgba(255, 199, 74, 0.16); color: #ffc74a; }
.pos-DF { background: rgba(90, 150, 255, 0.16); color: #7fb0ff; }
.pos-MF { background: rgba(38, 224, 122, 0.14); color: var(--accent); }
.pos-FW { background: rgba(255, 138, 61, 0.16); color: #ff8a3d; }
.lineup-player .shirt { color: var(--text-faint); font-variant-numeric: tabular-nums; margin-right: 2px; }
.lineup-player .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-player .marks { display: flex; align-items: center; gap: 3px; }

.mark {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 9.5px;
    font-weight: 700;
}
.mark-goal { color: var(--accent); }
.mark-yellow, .mark-red { width: 7px; height: 10px; border-radius: 1.5px; }
.mark-yellow { background: #ffc74a; }
.mark-red { background: var(--live); }
.mark-in { color: var(--accent); }
.mark-out { color: var(--live); }

/* Pré-jogo */
.prematch-block { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.prematch-block:last-child { border-bottom: none; }
.prematch-block .stat-bar + .stat-bar { margin-top: 10px; }
.table-flush th, .table-flush td { padding-left: 0; padding-right: 0; }
.table-flush th { background: none; }
.row-total td { border-top: 1px solid var(--border-strong); border-bottom: none; }
.prematch .reality-check { margin-top: 10px; }
/* "Forma recente": mesma linha do apêndice da tabela central
   (`.form-row`, veio pronta de `team_form.php` — regra 5, zero CSS
   novo pra ela), só com o nome do time na frente (aqui não tem a linha
   da partida por perto pra dar esse contexto de graça). */
.form-recent-row { display: flex; align-items: center; gap: 10px; }
.form-recent-row + .form-recent-row { margin-top: 10px; }
.form-recent-name {
    flex: 0 0 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-dim);
}
/* NÃO `flex: 1`: esticar o grid até a borda do painel dava sobra de espaço
   nas duas colunas `auto` do fim (fita de jogos e seta de tendência — sem
   nenhuma `fr` reivindicando esse espaço, o Grid distribui a sobra ENTRE
   elas), afastando a seta da fita em vez de grudar logo depois dela, como
   pedido. Encolhe pro próprio conteúdo, igual ao apêndice. */
.form-recent-row .form-row { flex: 0 1 auto; min-width: 0; }

/* Números da partida */
.stat-bars { padding: 12px 14px; }
.stat-bar + .stat-bar { margin-top: 11px; }
.stat-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.stat-bar-head strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-bar-track { display: flex; gap: 2px; height: 6px; }
.stat-bar-home, .stat-bar-away { height: 100%; border-radius: 3px; }
.stat-bar-home { background: var(--accent-dark); }
.stat-bar-away { background: #4a5a75; }

/* Campo 2D */
.pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background:
        repeating-linear-gradient(90deg, #14562b 0, #14562b 10%, #176331 10%, #176331 20%);
    overflow: hidden;
}
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.5); }
.pitch-team {
    position: absolute;
    top: 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.pitch-team-home { left: 9px; }
.pitch-team-away { right: 9px; }
.ball {
    position: absolute;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
    transition: left 0.8s ease-in-out, top 0.8s ease-in-out;
}
.ball svg { width: 100%; height: 100%; display: block; }
/* Gira SÓ enquanto a bola se desloca; parada, fica parada. */
.ball.rolling svg { animation: ballroll 0.55s linear infinite; }
.ball.rolling-left svg { animation-direction: reverse; }
@keyframes ballroll { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ball svg { animation: none; }
}

/* Destaque de lance importante: gol, cartão, pênalti */
/* O atributo hidden PRECISA vencer o display do componente — ver regra 6 no
   topo do arquivo. Por isso o :not([hidden]). */
.pitch-flare[hidden] { display: none; }
.pitch-flare:not([hidden]) {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
    /* Sem blur e sem cobrir o campo: a partida continua visível por trás. */
    background: radial-gradient(closest-side, rgba(6, 10, 16, 0.55), rgba(6, 10, 16, 0) 78%);
}
.pitch-flare.is-on { animation: flarein 0.45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes flarein {
    0%   { opacity: 0; transform: scale(0.82); }
    100% { opacity: 1; transform: scale(1); }
}
.flare-crest {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.8));
}
.flare-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    line-height: 1;
}
.flare-sub {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.flare-goal .flare-title    { color: #2bff8a; }
.flare-own .flare-title     { color: #ffb14a; }
.flare-penalty .flare-title { color: #ffd24a; }
.flare-miss .flare-title    { color: #cfd8e6; }
.flare-post .flare-title    { color: #ff8a3d; }
.flare-yellow .flare-title  { color: #ffd24a; }
.flare-red .flare-title     { color: #ff5566; }

/* Cartão desenhado atrás do texto, para leitura instantânea */
.flare-yellow::before,
.flare-red::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 48px;
    border-radius: 4px;
    transform: rotate(-12deg) translateY(-52px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}
.flare-yellow::before { background: #ffd24a; }
.flare-red::before { background: #ff4356; }

/* Placar de fim de jogo — mesmo palco do destaque de gol (posição, gradiente,
   animação de entrada), mas PERMANENTE: nasce sem [hidden] e não tem JS para
   escondê-lo depois, porque o match.js já nem carrega quando a partida acaba. */
.pitch-fulltime {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(6, 10, 16, 0.62), rgba(6, 10, 16, 0) 78%);
    animation: flarein 0.5s cubic-bezier(.2,.9,.3,1.4);
}
.fulltime-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.fulltime-score { display: flex; align-items: center; gap: 16px; }
.fulltime-crest {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.8));
}
.fulltime-number {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pitch-caption {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    max-width: 92%;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 11.5px;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.3s;
}
.pitch-caption.visible { opacity: 1; }
/* Setas de ataque — direção e intensidade decididas no servidor.
   A cor é a escala de perigo da jogada; a seta aponta para o gol atacado. */
.attack-arrow {
    position: absolute;
    width: 62px;
    height: 30px;
    margin: -15px 0 0 -31px;
    pointer-events: none;
    animation: arrowpush 1.5s ease-out forwards;
}
.attack-arrow svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}
.attack-arrow.ar-left { transform: scaleX(-1); }
.ar-low  { color: #dfe7f2; }
.ar-mid  { color: #ffd24a; }
.ar-high { color: #ff8a3d; }
.ar-max  { color: #2bff8a; width: 84px; margin-left: -42px; }
.ar-stop { color: #ff4356; }
@keyframes arrowpush {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

.pitch-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 11px;
}
.leg { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); }
.leg::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
}
.leg-low::before  { background: #dfe7f2; }
.leg-mid::before  { background: #ffd24a; }
.leg-high::before { background: #ff8a3d; }
.leg-max::before  { background: #2bff8a; }
.leg-stop::before { background: #ff4356; }

.pitch-flash { animation: pitchflash 1.2s ease-out; }
@keyframes pitchflash {
    0% { box-shadow: inset 0 0 0 200px rgba(38, 224, 122, 0.32); }
    100% { box-shadow: inset 0 0 0 200px rgba(38, 224, 122, 0); }
}

/* Feed */
.feed { list-style: none; max-height: 380px; overflow-y: auto; }
.feed-item {
    display: flex;
    gap: 9px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-dim);
}
.feed-clock {
    flex: none;
    min-width: 34px;
    font-weight: 800;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.feed-goal, .feed-penalty_goal, .feed-own_goal {
    background: rgba(38, 224, 122, 0.09);
    color: var(--text);
    font-weight: 700;
}
.feed-goal .feed-clock, .feed-penalty_goal .feed-clock, .feed-own_goal .feed-clock { color: var(--accent); }
.feed-red_card, .feed-second_yellow { background: rgba(255, 67, 86, 0.09); color: var(--text); }
.feed-yellow_card { background: rgba(255, 199, 74, 0.06); }

/* ---------- Tabelas ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th, .table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.table th {
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--surface-2);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.right { text-align: right; }
.table th.right, .table td.right { text-align: right; }
.positive { color: var(--accent); }
.negative { color: var(--live); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Estatísticas ---------- */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 1px;
    background: var(--border);
}
.stat-tile { background: var(--surface); padding: 13px 14px; }
.stat-tile .label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
}
/* Todo número da linha do saldo no mesmo tamanho do saldo — só a cor (no
   balance-hero, abaixo) segue distinguindo o principal dos demais. `.sm` fica
   só para valor que é TEXTO longo, não número (a Duração do fim de corrida,
   "18/08 21:40 → 22:15"), que estouraria a largura do quadro neste tamanho. */
.stat-tile .value { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-tile .value.sm { font-size: 15px; letter-spacing: -0.02em; }
.stat-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }

/* Primeira linha do painel (saldo, semanas, pico, apostas, time do coração)
   — número e rótulo centralizados no próprio quadro, não alinhados à
   esquerda como o resto das grades de número do site. */
.stat-tiles-center .stat-tile { text-align: center; }
.stat-tiles-center .stat-tile-team { align-items: center; }

.balance-hero { padding: 16px; }
.balance-hero .label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint);
}
.balance-hero .value { color: var(--accent); }
.balance-hero .note { font-size: 11.5px; color: var(--text-faint); }

/* Gráfico */
.chart-wrap { padding: 4px 0 0; }
.balance-chart { width: 100%; height: auto; display: block; }
.chart-now { color: var(--text); }
.chart-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-faint);
    padding: 6px 2px 0;
}

/* ---------- Avisos educativos ---------- */
.reality-check {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.55;
}
.reality-check + .reality-check { margin-top: 8px; }
.reality-big { font-size: 14px; }
.reality-check .muted { color: rgba(255, 199, 74, 0.72); font-size: 12.5px; }

.flash {
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}
.flash-success { background: rgba(38, 224, 122, 0.11); border: 1px solid var(--accent-dark); color: var(--accent); }
.flash-error { background: rgba(255, 67, 86, 0.11); border: 1px solid var(--live); color: var(--live); }

.errors {
    list-style: none;
    background: rgba(255, 67, 86, 0.09);
    border: 1px solid var(--live);
    color: var(--live);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    margin-bottom: 12px;
    font-size: 12.5px;
}

/* ---------- Formulários ---------- */
/* Só o que é LAYOUT: cor, borda, seta e foco vêm da regra geral de `select`.
   Este bloco repetia tudo aquilo desde antes de ela existir — e o `background`
   em atalho apagava a seta, que é imagem de fundo. */
.team-select { flex: 1; min-width: 180px; font-family: inherit; }
.auth-card {
    max-width: 400px;
    margin: 28px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.auth-card h1 { font-size: 21px; margin-bottom: 6px; }
.auth-lead { color: var(--text-dim); font-size: 13px; margin-bottom: 4px; }

form label { display: block; margin: 13px 0; font-size: 12px; color: var(--text-dim); font-weight: 600; }
/* O `select` entra na MESMA regra dos inputs: eram dois visuais diferentes
   lado a lado no mesmo formulário, e o seletor de time já sofria disso. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], textarea, select {
    width: 100%;
    margin-top: 5px;
    padding: 10px 11px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
/* Só a altura muda: o resto vem da regra geral acima, para não haver dois
   visuais de campo de texto no mesmo formulário. */
textarea { resize: vertical; font-family: inherit; min-height: 90px; }
/* Sem isto o ícone do calendário nativo sai escuro sobre o fundo escuro —
   o site não tem tema claro, então é seguro fixar para sempre. */
input[type="date"] { color-scheme: dark; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-dark); }

/* Seta própria: com `appearance: none` a nativa some, e o SVG vai embutido
   como data URI — o site não faz requisição externa para nada. */
select {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
/* A lista aberta é desenhada pelo sistema: sem isto ela sai branca sobre o
   tema escuro em boa parte dos navegadores. */
select option { background: var(--surface); color: var(--text); }

/* ---------- Módulo educativo ---------- */
.learn-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
}
.learn-item:last-child { border-bottom: none; }
.learn-item:hover { background: var(--surface-2); }
.learn-reward { color: var(--accent); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.learn-done { color: var(--text-faint); font-weight: 600; font-size: 12px; }
/* Degrau ainda fechado da escada: continua visível, para o jogador saber que
   existe, mas sem parecer clicável. */
.learn-locked { color: var(--text-faint); cursor: default; }
.learn-locked:hover { background: none; }
.learn-lock-note { color: var(--text-faint); font-weight: 600; font-size: 12px; white-space: nowrap; }

/* Folga maior no topo: a pergunta encostava no cabeçalho do painel, e ela é
   um texto para ler, não um item de lista. */
.poll { padding: 20px 14px 16px; border-bottom: 1px solid var(--border); }
.poll:last-child { border-bottom: none; }
.poll h3 { font-size: 13.5px; margin-bottom: 13px; line-height: 1.45; }
.poll-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    font-size: 13px;
    cursor: pointer;
}
.opt:hover { border-color: var(--accent-dark); }
.opt:has(input:checked) { border-color: var(--accent); background: rgba(38, 224, 122, 0.08); }
/* Opção sem bolinha, em enquete e quiz: o próprio botão mostra a escolha pela
   borda verde (.opt:has(input:checked)). O radio NÃO pode sumir com
   display:none — precisa continuar invisível mas focável, senão o `required`
   trava a submissão num campo que o navegador não consegue apontar na tela. */
.opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.opt-static { cursor: default; }
.opt-correct { border-color: var(--accent); background: rgba(38, 224, 122, 0.09); }
.opt-wrong { border-color: var(--live); background: rgba(255, 67, 86, 0.09); }

.poll-result { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12.5px; }
.poll-label { flex: 0 0 42%; color: var(--text-dim); }
.poll-bar-track { flex: 1; background: var(--bg); border-radius: 999px; height: 8px; overflow: hidden; }
.poll-bar { background: var(--accent-dark); height: 100%; border-radius: 999px; }
.poll-pct { flex: 0 0 46px; text-align: right; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Mesma folga da enquete: a primeira pergunta encostava no cabeçalho do
   painel. `legend` dentro de `fieldset` não respeita o padding do pai da
   mesma forma que um texto normal, então a folga vem do padding-top do
   próprio bloco. */
.quiz-question { border: none; padding: 20px 14px 16px; border-bottom: 1px solid var(--border); }
.quiz-question legend, .quiz-question > p {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 13px;
    line-height: 1.45;
}
.quiz-question .opt { margin-bottom: 6px; }
.quiz-explanation {
    margin-top: 8px;
    padding: 8px 11px;
    background: var(--accent-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-dim);
}
.content-body { line-height: 1.75; font-size: 14px; color: #dce3ee; padding: 14px; }
.content-body p { margin-bottom: 13px; }

/* ---------- Ranking ---------- */
.rank-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface-3);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-dim);
}
/* O primeiro lugar usa o dourado da MARCA, não o amarelo de aviso — eram cores
   diferentes escritas na mão, e o pódio acabava avisando em vez de premiar. */
.rank-1 { background: var(--gold-tint); color: var(--gold); border: 1px solid var(--gold-dim); }
.rank-2 { background: rgba(190, 200, 215, 0.18); color: #c3cbd8; }
.rank-3 { background: rgba(205, 127, 50, 0.2); color: #d08a44; }

.mini-ranking { list-style: none; }
.mini-ranking li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.mini-ranking li:last-child { border-bottom: none; }
.mini-ranking .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ranking .rounds { color: var(--text-dim); font-weight: 700; }

/* ---------- Utilidades ---------- */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.page-title { font-size: 20px; letter-spacing: -0.02em; }
.page-lead { color: var(--text-dim); font-size: 13px; }
.muted { color: var(--text-dim); font-size: 12.5px; }
.faint { color: var(--text-faint); font-size: 12px; }
.center { text-align: center; }
.back-link { display: inline-block; color: var(--text-dim); font-size: 12.5px; margin-bottom: 10px; }
.back-link:hover { color: var(--accent); }
.stack > * + * { margin-top: 10px; }
.empty-state { padding: 26px 14px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ---------- Utilitários de espaçamento/cor ----------
   Substituem style="" inline nas views: um só lugar decide o visual.
   (Posições e larguras vindas de DADOS — barra de enquete, bola no campo —
   continuam inline, pois são valores calculados no servidor.) */
.u-mt-sm { margin-top: 8px; }
.u-mt { margin-top: 14px; }
.u-mb-sm { margin-bottom: 10px; }
.u-mb { margin-bottom: 14px; }
.link-accent { color: var(--accent); }
.text-live { color: var(--live); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.col-w-sm { width: 52px; }
.error-code { font-size: 42px; }
.sidebar-foot { padding: 4px 13px 14px; }

/* ---------- Rodapé ---------- */
.footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 16px;
    text-align: center;
    color: var(--text-faint);
    font-size: 11.5px;
}
.footer p { max-width: 720px; margin: 0 auto; }
.footer .help { margin-top: 6px; color: var(--text-dim); }

/* ============================================================
   RESPONSIVO — todas as regras de tela pequena vivem AQUI.
   Nada de @media espalhado pelo arquivo: um único lugar decide
   o comportamento por largura, na ordem do maior para o menor.
   ============================================================ */

/* Sem espaço para o boletim: ele passa a ficar abaixo do conteúdo */
@media (max-width: 1180px) {
    .shell,
    .shell.shell-no-slip { grid-template-columns: 190px minmax(0, 1fr); }
    .aside-col {
        grid-column: 1 / -1;
        position: static;
    }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .featured { grid-template-columns: repeat(2, 1fr); }
}

/* Sem espaço para a lateral */
@media (max-width: 860px) {
    .shell,
    .shell.shell-no-slip { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; }
    .scoreboard { padding: 16px 10px; gap: 8px; }
    .score-big { font-size: 28px; }
}

/* Sem espaço para as duas colunas de mercado na listagem */
@media (max-width: 1080px) {
    .market-header,
    .match-row { grid-template-columns: 54px 200px 200px 1fr; }
    /* Some a coluna de total de gols — o 4º span do cabeçalho, não o 3º. O
       "+" continua (5º span/coluna), só desliza pro lugar do que sumiu. */
    .market-header span:nth-child(4),
    .match-row .market-col-ou25 { display: none; }
    .match-market-wide { grid-column: 3 / span 1; }
}

/* Campo e abas empilham */
@media (max-width: 900px) {
    .match-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet/celular: navegação vira menu em cascata */
@media (max-width: 860px) {
    .menu-toggle { display: flex; }
    .mobile-menu:not([hidden]) { display: flex; }
    .topnav-wide { display: none; }
    .topnav { margin-left: 0; }
    .logo { margin-right: auto; }
    .panel-hide-mobile { display: none; }
    .aside-col .betslip-open { order: -1; }
}

/* Celular */
@media (max-width: 560px) {
    .topbar-inner { gap: 8px; padding: 0 10px; }
    .topnav { display: none; }
    .user-name { display: none; }
    .disclaimer-full { display: none; }
    .disclaimer-short { display: inline; }
    .balance-chip { padding: 4px 4px 4px 10px; }
    /* "Entrar" tinha sido escondido de vez pra caber — quem chegava
       deslogado só via "Criar conta" e não tinha como entrar numa conta já
       existente sem passar pelo menu hambúrguer. Os dois cabem encolhidos. */
    .btn-signup, .btn-login { padding: 7px 10px; font-size: 12px; }
    .featured { display: none; }
    .steps { display: none; }
    .pitch-legend { display: none; }

    /* Linha do jogo em duas alturas: confronto em cima, odds+"+" embaixo,
       dividindo a mesma linha (o "+" ganha uma coluna própria e pequena; as
       odds encolhem pra caber ao lado — .odd-btn já é flex:1, então isso é
       de graça). Tentativa anterior (rótulo "Últimos jogos" por extenso,
       linha cheia só pra ele) recuada a pedido do autor. */
    .market-header { display: none; }
    .match-row {
        grid-template-columns: 46px minmax(0, 1fr) 34px;
        row-gap: 9px;
        padding: 11px 12px;
    }
    .match-row .match-market { grid-column: 2; }
    .odd-btn { flex: 1; min-width: 0; }
    .match-row .btn-ghost { width: 100%; }
    .match-row .match-more { grid-column: 3; align-self: stretch; height: auto; }
    /* "Casa x Fora" numa linha (times empilhados, de duas linhas, ficavam
       mais altos que hora+dia — sobrava vão vazio ao lado de "Quinta").
       Com uma linha só, .match-teams fica do tamanho de .match-when, e o
       `align-items: center` da base já resolve o alinhamento sozinho. */
    .match-teams .match-side { display: none; }
    .match-teams-compact { display: flex; }
    /* Nome com `flex:1` (base, tela larga não usa) espalhava o bloco pela
       largura toda da coluna — aqui o pedido é encolher pro conteúdo e
       ficar grudado à esquerda, como o resto da lista. */
    .match-teams-compact .name { flex: 0 1 auto; min-width: 0; }
    /* Hora/dia ocupava só a altura da 1ª linha (confronto), centralizado
       nela — sobrava/faltava espaço porque a 2ª linha (odds) tem altura
       diferente. Esticando por cima das duas linhas da grade, o
       `align-items: center` da base passa a centralizar em relação à
       altura da linha inteira, odds incluídas. */
    .match-when { grid-row: span 2; }
    .lineups { grid-template-columns: 1fr; }
    /* Nome fixo (96px) + .form-row lado a lado não cabia — a fita de 5 jogos
       ficava espremida e cortava por baixo do box. Empilhado (nome em cima),
       .form-row fica com a largura toda pra si. */
    .form-recent-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .form-recent-name { flex: none; }

    .steps { grid-template-columns: 1fr; }
    .featured { grid-template-columns: 1fr; }
    .attack-arrow { width: 46px; margin-left: -23px; }
    .flare-title { font-size: 20px; }
    .flare-crest { width: 36px; height: 36px; }
    .fulltime-number { font-size: 26px; }
    .fulltime-crest { width: 36px; height: 36px; }
    .fulltime-score { gap: 12px; }
    .ar-max { width: 60px; margin-left: -30px; }
    .hero { padding: 26px 14px 22px; }
    .hero h1 { font-size: 24px; }
    .panel-head { flex-wrap: wrap; }
    .table th, .table td { padding: 8px 10px; }
}

/* ---------- Fim de corrida ---------- */
/* Cobre a página inteira: é o clímax da lição, não um aviso de canto. Sem JS —
   o fechar é um formulário, então não há estado de abertura no cliente. */
.bust-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .78);
    overflow-y: auto;
}
.bust-card {
    width: 100%;
    max-width: 460px;
    /* `--surface-1` não existe: o token é `--surface`. Com a variável inválida
       o navegador descarta a declaração e o cartão ficava transparente,
       deixando a página aparecer por baixo do aviso. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--live);
    border-radius: 12px;
    padding: 26px 24px 22px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.bust-icon { margin-bottom: 6px; }
.bust-title {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 6px;
}
.bust-lead { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }

.bust-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.bust-stat {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 10px 6px;
}
.bust-stat .label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-faint);
    margin-bottom: 3px;
}
.bust-stat .value {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* O número que dói fica destacado do resto do texto. */
.bust-real {
    background: var(--live-tint);
    border: 1px solid var(--live);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--text-dim);
    text-align: left;
    margin-bottom: 14px;
}
.bust-real strong { color: var(--live); font-weight: 800; }

.bust-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-dim);
    text-align: left;
    margin-bottom: 12px;
}

.bust-actions { display: grid; gap: 8px; margin-top: 18px; }

@media (max-width: 520px) {
    .bust-stats { grid-template-columns: 1fr; }
    .bust-card { padding: 20px 16px 18px; }
}

/* "opcional", "mínimo 8 caracteres" — a dica ao lado do rótulo do campo, num
   tom que não compete com ele. */
.label-hint {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
}

/* Campo em destaque no formulário de cadastro — hoje só o time do coração.
   É a única pergunta que o torcedor QUER responder, então ela abre o
   formulário com cara de convite, não de obrigação. Discreto de propósito: um
   fundo e uma borda de acento, sem virar banner. */
.field-featured {
    display: block;
    background: var(--accent-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius-sm);
    padding: 12px 13px;
    margin-bottom: 4px;
}
.field-featured-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--text);
}
.field-featured-hint {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-faint);
    margin-top: 2px;
}

/* Anúncio que é só a arte: a peça já traz a mensagem inteira, então a caixa
   some e sobra a imagem. Sem padding, sem fundo e sem borda — qualquer moldura
   aqui competiria com a arte. */
.promo-full {
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}
.promo-full img { width: 100%; height: auto; display: block; }
.promo-full:hover { opacity: .92; }

/* ---------- Botão de som (tela da partida) ---------- */
.match-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.match-topline-right { display: flex; align-items: center; gap: 10px; }
/* Desligado é o estado padrão e parece apagado; ligado acende em dourado —
   é um controle da interface, não um valor de dinheiro nem um alerta, então
   não disputa com o verde das odds nem com o vermelho do ao vivo. */
.sfx-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    flex: none;
}
.sfx-toggle:hover { color: var(--text-dim); border-color: var(--border-strong); }
.sfx-toggle.is-on {
    color: var(--gold);
    border-color: var(--gold-dim);
    background: var(--gold-tint);
}
@media (max-width: 520px) {
    .sfx-toggle .sfx-label { display: none; }
    .sfx-toggle { padding: 7px 9px; }
}

/* Fontes do comparativo de custo de vida: recolhidas por padrão.
   ATENÇÃO: não dar `display: flex/grid` ao conteúdo de um <details> fechado —
   isso anula o recolhimento nativo e a lista fica sempre visível. */
.cost-sources-box { margin-top: 14px; }
.cost-sources-box > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cost-sources-box > summary::-webkit-details-marker { display: none; }
.cost-sources-box > summary::after {
    content: "▾";
    font-size: 10px;
    transition: transform .15s;
}
.cost-sources-box[open] > summary::after { transform: rotate(180deg); }
.cost-sources-box > summary:hover { color: var(--text-dim); }
.cost-sources-box:not([open]) .cost-sources { display: none; }

/* ---------- Painel: acumulado, resgate e histórico ---------- */

/* Rótulo que separa "esta corrida" do somatório de todas. */
.run-line-label {
    padding: 9px 14px 0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.run-line-total { color: var(--warn-text); }
.stat-tiles-total { border-top: 1px solid var(--border); }

/* Aviso de ₣ a resgatar: a corrida não acaba enquanto ele estiver aqui, então
   ele é um convite, não um alerta.

   Dourado e não verde: o verde é dinheiro em jogo (saldo, odds) e o dourado é
   o que o jogador CONQUISTA — que é exatamente o caso do ₣ da escada. */
.claim-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.claim-alert-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text);
}
.claim-alert-main strong { color: var(--gold); }
.claim-alert-sub { font-size: 12px; color: var(--text-dim); flex: 1 1 100%; }
.claim-alert .btn { margin-left: auto; }

/* Histórico de corridas, recolhido.
   ATENÇÃO: não dar `display: flex/grid` ao conteúdo de um <details> fechado —
   isso anula o recolhimento nativo. */
.past-runs > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--surface-2);
    cursor: pointer;
    list-style: none;
}
.past-runs > summary::-webkit-details-marker { display: none; }
.past-runs[open] > summary { border-bottom: 1px solid var(--border); }
.past-runs > summary::after { content: "▾"; color: var(--text-faint); font-size: 11px; }
.past-runs[open] > summary::after { content: "▴"; }
.past-runs:not([open]) .table { display: none; }
.past-runs .is-current { background: var(--surface-2); }

/* A contagem dentro do card em destaque acompanha o texto da explicação, só
   com o número em relevo — é informação, não alarme. */
.highlight-why [data-countdown] {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* Listas do custo de vida em duas colunas: são muitos itens curtos, e uma
   coluna só deixava o painel comprido à toa. `auto-fit` com largura mínima
   faz elas voltarem a uma coluna sozinhas no celular, sem media query. */
.cost-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px 22px;
    align-items: start;
}
/* A margem que separava os grupos empilhados agora atrapalha: quem separa é
   a grade. Fica só entre grupos da MESMA coluna. */
.cost-columns .cost-group + .cost-group { margin-top: 0; }
.cost-columns .cost-group { margin-bottom: 10px; }

/* O valor total em destaque — é o número que a frase existe para dizer. */
.cost-total { color: var(--warn-text); font-size: 15px; }

/* Véu esverdeado sobre as artes de propaganda.
   Elas vêm de fontes visuais diferentes (fundos claros, azuis, vermelhos) e
   destoavam do site. O véu costura todas ao verde da casa sem esconder a arte.

   `--promo-veil` é a força: 0.10 = 90% transparente. Está em variável porque é
   exatamente o tipo de número que se ajusta olhando. */
.promo-full {
    position: relative;
    --promo-veil: 0.10;
}
.promo-full::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    opacity: var(--promo-veil);
    pointer-events: none;
}

/* "Quebrou" no ranking. Classe própria e não `badge-done`: aquele também
   marca leitura concluída e partida encerrada, que são estados neutros — pintar
   os três de vermelho diria "deu errado" onde não deu. */
.badge-bust { background: rgba(255, 67, 86, 0.15); color: var(--live); }

/* Pergunta que confirma a leitura. Aparece quando o cronômetro zera. */
.read-check {
    border: 1px solid var(--accent-dark);
    background: var(--accent-tint);
    border-radius: var(--radius-sm);
    padding: 14px 15px;
    margin-bottom: 14px;
}
.read-check > legend {
    padding: 0 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
}
.read-check-q { font-size: 14px; color: var(--text); margin-bottom: 11px; line-height: 1.5; }
.read-check-opt {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    margin-bottom: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--text-dim);
    cursor: pointer;
}
.read-check-opt:hover { border-color: var(--border-strong); color: var(--text); }
.read-check-opt input { margin-top: 2px; flex: none; accent-color: var(--accent); }
.read-check-opt:has(input:checked) {
    border-color: var(--accent-dark);
    color: var(--text);
}

/* Pico da banca em dourado: é o recorde pessoal, a única conquista que o
   jogador leva de uma corrida — e a única linha do painel que não é perda.

   Dose deliberada: dourado só aqui e no primeiro lugar do ranking. Ele funciona
   por escassez; espalhado por cinco lugares na mesma tela vira só mais uma cor.
   Antes de levar para semanas sobrevividas, degraus concluídos ou o topo,
   olhar na tela se ainda destaca. */
.peak { color: var(--gold); }

/* ---------- Tabela reduzida na página de uma partida ---------- */
.mini-list { display: flex; flex-direction: column; }
.mini-row {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    border-left: 2px solid transparent;
}
.mini-row:last-child { border-bottom: none; }
.mini-row:hover { background: var(--surface-2); }
.mini-row.is-live { border-left-color: var(--live); }

.mini-when { font-size: 9.5px; color: var(--text-faint); text-align: center; line-height: 1.35; }
.mini-when strong { display: block; font-size: 12px; color: var(--text-dim); }
/* Minuto em vermelho com a bola rolando, como na tabela central. Precisa vir
   DEPOIS e com a mesma especificidade: `.mini-when strong` sozinho ganharia da
   classe `.text-live` e o vermelho nunca apareceria. */
.mini-when strong.text-live { color: var(--live); }

/* O "+" da tabela central, no tamanho da linha compacta. */
.mini-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 13px;
    font-weight: 700;
}
.mini-more:hover { color: var(--accent); border-color: var(--accent-dark); text-decoration: none; }

.mini-teams { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Competição da linha, como na tabela central — discreta, é contexto. */
.mini-comp {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-side {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    min-width: 0;
}
.mini-side .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-side .goals {
    margin-left: auto;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    padding-left: 8px;
}
.mini-side .crest { width: 15px; height: 15px; }

/* ---------- Painel de operação (admin) ---------- */
/* Sem @media: a linha é um flex que quebra sozinha quando a coluna aperta —
   o controle desce para baixo do rótulo e continua legível no celular. */
.cfg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.cfg-row:last-of-type { border-bottom: none; }
/* Valor fora do padrão de fábrica: o contorno inteiro com fundo tingido, que é
   o acabamento de destaque da casa (PLANO 10.1) — e não o filete lateral. */
.cfg-row.is-changed {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    padding: 13px;
    margin: 6px 0;
}
.cfg-info { flex: 1 1 250px; min-width: 0; }
.cfg-label { font-size: 13.5px; font-weight: 700; margin-right: 7px; }
.cfg-name { font-size: 11px; color: var(--text-faint); font-family: ui-monospace, monospace; }
.cfg-desc { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.cfg-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 5px 6px 0 0;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}
.cfg-mark-cal { background: var(--warn-bg); color: var(--warn-text); }
.cfg-mark-live { background: var(--live-tint); color: var(--live); }

.cfg-edit { flex: 0 1 210px; display: flex; flex-direction: column; gap: 5px; }
/* O input já vem estilizado da regra geral de formulário: aqui só o espaço,
   que lá é pensado para campo empilhado em coluna única. */
.cfg-edit input[type="number"], .cfg-edit input[type="text"] { margin-top: 0; }
.cfg-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--text);
}
.cfg-switch input { width: auto; margin: 0; accent-color: var(--accent-dark); }
.cfg-default { font-size: 11.5px; color: var(--text-faint); }
.cfg-default strong { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.btn-reset {
    align-self: flex-start;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11.5px;
    padding: 4px 9px;
    cursor: pointer;
}
.btn-reset:hover { color: var(--text); border-color: var(--accent-dark); }
.btn-reset-danger { color: var(--live); border-color: rgba(255, 67, 86, 0.35); }
.btn-reset-danger:hover { color: #fff; background: var(--live); border-color: var(--live); }

/* ---------- Visão geral: time do coração e ações por linha ---------- */
/* Linha de cadastro clicável (leva para a tela de detalhe) — nenhum botão
   de ação mora mais na tabela (regra do autor, 19/08/2026). */
.admin-row-link { cursor: pointer; }
.admin-row-link:hover { background: var(--surface-2); }
.admin-row-name { color: var(--text); font-weight: 600; }
.admin-row-name:hover { color: var(--accent); text-decoration: underline; }

/* Os três botões de moderação, na tela de detalhe do cadastro. */
.admin-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-detail-actions .admin-danger-form { display: flex; align-items: center; }

/* Confirmação na própria linha, não confirm() do navegador (fácil de
   cancelar sem querer, e algumas automações nem chegam a mostrar o
   diálogo) — troca o botão único por um par "sim/não" (admin-actions.js). */
.admin-confirm-box { display: none; align-items: center; gap: 8px; }
.admin-danger-form.is-confirming .js-ask { display: none; }
.admin-danger-form.is-confirming .admin-confirm-box { display: inline-flex; }
.admin-confirm-text { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

/* Dados do cadastro em lista, não em grade — textos como e-mail e local
   variam muito de tamanho, e a grade de .stat-tiles (pensada pra números
   curtos) quebrava linha de um jeito difícil de ler. */
.detail-list { display: flex; flex-direction: column; }
.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-row dt {
    flex: none;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.detail-row dd {
    margin: 0;
    text-align: right;
    font-size: 13.5px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cfg-log { list-style: none; font-size: 12px; }
.cfg-log li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
}
.cfg-log li:last-child { border-bottom: none; }
.cfg-log-when { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cfg-log-what { color: var(--text); font-weight: 600; flex: 1 1 180px; }
.cfg-log-move { font-variant-numeric: tabular-nums; }
.cfg-log-who { color: var(--text-faint); }

/* ---------- Conta: segurança, aceite e documentos legais ---------- */
.sec-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.sec-item .muted { font-size: 12.5px; margin-top: 2px; word-break: break-all; }
/* Aceite pendente: contorno inteiro com fundo tingido, o acabamento de
   destaque da casa — não o filete lateral, que virou o padrão de tudo. */
.sec-accept {
    margin-top: 16px;
    padding: 13px;
    background: var(--accent-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius-sm);
}
.sec-accept .muted { font-size: 12.5px; margin-bottom: 10px; }
/* Caixa de seleção com texto ao lado: a regra geral de `form label` empilha o
   controle sob o rótulo, que é o oposto do que uma caixa precisa. */
.check-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
    font-weight: 400;
}
.check-line input { width: auto; margin: 2px 0 0; accent-color: var(--accent-dark); flex: none; }

.legal { max-width: 720px; margin: 24px auto; }
.legal h1 { font-size: 22px; margin-bottom: 4px; }
.legal h2 { font-size: 15px; margin: 22px 0 8px; color: var(--accent); }
.legal p { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 10px; }
.legal-meta { font-size: 12px; color: var(--text-faint); margin-bottom: 18px; }
.legal-list { list-style: none; margin: 0 0 12px; }
.legal-list li {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim);
    padding-left: 15px;
    position: relative;
}
.legal-list li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); }

/* Boas-vindas do primeiro acesso: mesma tipografia de .legal, com o contorno +
   fundo tingido que o site usa pra bloco que não pode passar despercebido
   (regra 5, mesmo padrão de .reality-check). */
.legal.onboarding-card {
    max-width: 640px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: 26px 28px;
}
.onboarding-card h1 { display: flex; align-items: center; gap: 10px; }

.footer-links { margin-bottom: 8px; }
.footer-links a { color: var(--text-dim); text-decoration: underline; }
.footer-links a:hover { color: var(--text); }

/* ---------- Ação destrutiva (excluir conta) ---------- */
/* Vermelho sólido, e não o --live translúcido do resto do site: um botão
   irreversível precisa parecer mais pesado que um alerta comum. */
.btn-danger { background: var(--live); color: #fff; }
.btn-danger:hover { background: #d93548; }
.danger-box {
    background: var(--live-tint);
    border: 1px solid var(--live);
    border-radius: var(--radius-sm);
    padding: 13px;
    margin-bottom: 14px;
}
.danger-box p { margin-bottom: 6px; }
.danger-box p:last-child { margin-bottom: 0; }
.danger-box .legal-list { margin-top: 8px; }
.danger-box .legal-list li::before { color: var(--live); }

/* ---------- Visão geral do painel admin ---------- */
/* "Novos cadastros" e "Novas apostas" lado a lado — quebra pra uma coluna só
   quando não cabe (a mesma regra do `.steps`/`.featured` da home). */
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
@media (max-width: 900px) {
    .admin-cols { grid-template-columns: 1fr; }
}

/* Resultado das enquetes na visão geral: reaproveita .stat-bar/.stat-bar-track
   (mesmo componente de "Força dos times"), só que uma barra por OPÇÃO em vez
   do par casa/fora. */
.poll-question { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.poll-result-block + .poll-result-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ---------- Sub-navegação do painel admin ---------- */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
}
.admin-tab:hover { color: var(--text); border-color: var(--border-strong); }
.admin-tab.is-active { color: var(--accent); border-color: var(--accent-dark); background: var(--accent-tint); }

/* Contador vermelho ao lado de um link — hoje só "Operação", quando há
   mensagem de contato não lida. */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--live);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
}

/* ---------- Mensagens de contato (admin) ---------- */
.msg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.msg-row:last-child { border-bottom: none; }
.msg-row.is-unread { background: var(--accent-tint); border: 1px solid var(--accent-dark); border-radius: var(--radius-sm); padding: 13px; margin-bottom: 6px; }
.msg-info { flex: 1 1 320px; min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 13px; }
.msg-body { font-size: 13px; color: var(--text-dim); margin: 6px 0; white-space: pre-line; }
.msg-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Responder: <details> nativo, sem JS pra abrir/fechar — o bloco INTEIRO
   quebra para a própria linha dentro do `.msg-row` flex (`flex-basis: 100%`),
   senão ele tentaria dividir espaço com o texto da mensagem ao lado. */
.msg-reply { flex-basis: 100%; margin-top: 8px; }
.msg-reply > summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-light);
    list-style: none;
}
.msg-reply > summary::-webkit-details-marker { display: none; }
.msg-reply > summary:hover { color: var(--accent); }
.msg-reply-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.reply-template-picker,
.msg-reply-form textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    padding: 8px 10px;
}
.msg-reply-form textarea { resize: vertical; line-height: 1.5; }
.msg-reply-form .btn { align-self: flex-start; }
.msg-reply-sent {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    white-space: pre-line;
}

/* ---------- Filtro de mensagens de contato ---------- */
.msg-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.msg-filter-field { display: flex; flex-direction: column; min-width: 150px; }
.msg-filter-wide { flex: 1 1 220px; }
.msg-filter-field label { margin: 0 0 5px; font-size: 11.5px; }
.msg-filter-field select,
.msg-filter-field input { margin-top: 0; }
.msg-filter .btn { flex: none; }

/* ---------- Honeypot do formulário de contato ---------- */
/* Fora da tela, não `display:none`: alguns robôs pulam campos escondidos por
   display/visibility, mas ainda preenchem o que só está posicionado fora do
   viewport. Gente com CSS carregado nunca vê isto. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mensagem final ao excluir a conta ---------- */
.farewell-card h2 { font-size: 17px; margin-bottom: 10px; }
.farewell-card p { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 10px; }
.farewell-card p:last-child { margin-bottom: 0; }

/* ---------- Recursos oficiais fixados (rodapé + pop-up de quebra) ---------- */
.official-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    align-items: baseline;
    font-size: 11.5px;
    margin-top: 6px;
}
.official-resources-label { color: var(--text-faint); }
.official-resources a { color: var(--text-dim); text-decoration: underline; }
.official-resources a:hover { color: var(--text); }
/* Dentro do pop-up de quebra o fundo é outro cartão — o texto precisa de mais
   contraste que o rodapé, que já é escuro sobre escuro por natureza. */
.bust-card .official-resources { justify-content: center; margin: 4px 0 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.bust-card .official-resources-label { width: 100%; text-align: center; color: var(--text-dim); font-size: 12px; margin-bottom: 2px; }
.bust-card .official-resources a { color: var(--accent); }
.bust-card .official-resources a:hover { color: var(--accent-light); }

/* ---------- Recursos oficiais (página /aprender) ---------- */
.resource-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.resource-item:last-child { border-bottom: none; }
.resource-item:hover { background: var(--surface-2); }
.resource-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resource-item-main strong { font-size: 13.5px; }
.resource-item-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.resource-item-pub {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    color: var(--text-faint);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}