/* estilo.css — VISUAL PADRONIZADO
 *
 * Tokens comandam tudo: cor, espaço, raio, e TIPOGRAFIA (escala única de
 * tamanho e peso). Nenhum font-size solto no meio das regras.
 * O JOGO usa cabeçalho no topo. O ADMIN usa menu lateral (recolhível).
 */

:root {
  /* O NAVEGADOR PRECISA SABER QUE A TELA É ESCURA.
     Sem isto, o calendário do campo de data, a setinha do campo numérico e a
     barra de rolagem saem no padrão claro — brancos em cima do escuro. */
  color-scheme: dark;
  /* cores */
  --fundo:#0d1117;  --caixa:#161b22;  --caixa-2:#1c232d;  --linha:#232a34;
  --texto:#e6edf3;  --fraco:#8b949e;
  --verde:#26d07c;  --vermelho:#f6465d;  --ambar:#e3b341;  --azul:#3b82f6;  --acao:#3b82f6;
  --verde-suave:#12261a;  --ambar-suave:#241d05;
  /* peças que o admin pinta separado (o /tema.css sobrescreve tudo isto) */
  --topo-fundo:#161b22;   --topo-texto:#e6edf3;
  --rodape-fundo:#0d1117; --rodape-cor:#8b949e;
  --premio:#26d07c;

  /* espaço (escala de 4) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px;  --sp-4:16px;  --sp-5:24px;  --sp-6:32px;

  /* tipografia — 2 famílias, 1 escala */
  --fonte:ui-sans-serif,system-ui,-apple-system,Roboto,"Segoe UI",sans-serif;
  --fonte-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --fs-2xs:10px;   /* micro: badges, tags            */
  --fs-xs:11px;    /* rótulos MAIÚSCULOS, meta       */
  --fs-sm:13px;    /* texto de apoio, botões 2ários  */
  --fs-base:14px;  /* corpo, itens de lista          */
  --fs-md:16px;    /* inputs e botões de destaque    */
  --fs-lg:18px;    /* título de página (admin)       */
  --fs-xl:22px;    /* h1, o botão grande             */
  --fs-2xl:28px;   /* prêmio / valor do leilão       */

  --fw-regular:400;  --fw-medium:600;  --fw-bold:700;  --fw-heavy:800;
  --lh-tight:1.2;  --lh-base:1.5;  --lh-loose:1.7;

  /* forma */
  --raio:10px;        /* controles  */
  --raio-lg:14px;     /* caixas     */
  --borda:1px solid var(--linha);
  --h:44px;           /* altura padrão de input/botão */
  --topo-h:56px;      /* altura do cabeçalho do jogo */
  --lado-w:220px;     /* menu lateral do admin, aberto */
  --lado-mini:60px;   /* menu lateral do admin, recolhido */
  --foco:0 0 0 3px rgba(59,130,246,.30);
  --sombra:0 8px 30px rgba(0,0,0,.35);

  --largura:920px;
}

* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
/* O RODAPÉ FICA COLADO EMBAIXO, tenha a página muito ou pouco conteúdo.
   O DEFEITO QUE ISTO FECHA, e o dono viu na página de Depoimentos: quando a
   página tem pouca coisa, o rodapé subia junto e ficava boiando no meio da
   tela, com um vazio embaixo dele.
   A página vira uma coluna do tamanho da tela, o miolo cresce para ocupar o
   que sobrar, e o rodapé desce até o fim. Com conteúdo comprido nada muda: o
   miolo empurra o rodapé para baixo do jeito de sempre.
   O "dvh" é para o celular: o "vh" conta a barra de endereço que aparece e
   some, e a página nascia alta demais. Quem não conhece "dvh" usa a linha de
   cima, que fica valendo. */
body {
  background:var(--fundo); color:var(--texto);
  font-family:var(--fonte); font-size:var(--fs-base); line-height:var(--lh-base);
  min-height:100vh;
}
body.pg-site {
  min-height:100dvh;
  display:flex; flex-direction:column;
}
button, input, select { font:inherit; color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
input:focus, select:focus { outline:none; border-color:var(--azul); box-shadow:var(--foco) }
a { color:inherit }

.escondido { display:none !important }

/* títulos: um h1 de página, um h2 de rótulo de seção, um h3 de subgrupo */
h1 { font-size:var(--fs-xl); font-weight:var(--fw-bold); line-height:var(--lh-tight) }
h2 {
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--fraco);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--sp-3);
}
h3 {
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--ambar);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp-3);
}

/* rótulo MAIÚSCULO reutilizável (prêmio, crédito, campos...) */
.rot, .su-rot {
  color:var(--fraco); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em;
}

/* =========================================================
   CABEÇALHO + MENU DO JOGO
   ========================================================= */

.site {
  position:sticky; top:0; z-index:50;
  background:var(--topo-fundo); color:var(--topo-texto);
  backdrop-filter:blur(8px); border-bottom:var(--borda);
}
.site-in {
  max-width:var(--largura); margin:0 auto; min-height:var(--topo-h);
  display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-2) var(--sp-4);
}
.marca {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-base); font-weight:var(--fw-medium); text-decoration:none; white-space:nowrap;
}
.marca b { font-weight:var(--fw-heavy) }
.marca-ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  background:var(--acao); color:#fff; font-size:var(--fs-md); font-weight:var(--fw-bold);
}
.nav { display:flex; align-items:center; gap:var(--sp-1) }
.nav a, .nav-link {
  display:inline-block; padding:var(--sp-2) var(--sp-3);
  background:transparent; border:0; border-radius:var(--raio);
  color:var(--fraco); font-size:var(--fs-sm); text-decoration:none;
}
.nav a:hover, .nav-link:hover { color:var(--texto); background:var(--linha) }

/* quem está no site agora: dois bonequinhos com número, sem palavra nenhuma
   (o que é cada um aparece com o mouse em cima) */
.online { display:inline-flex; align-items:center; gap:var(--sp-3); white-space:nowrap; cursor:default }
.online-item { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-family:var(--fonte-num) }
.online-item b { font-weight:var(--fw-medium) }
.online-user { color:var(--verde) }
.online-visit { color:var(--fraco) }
.site-user { margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); white-space:nowrap }
.su-nick { max-width:120px; overflow:hidden; text-overflow:ellipsis; font-weight:var(--fw-medium); font-size:var(--fs-sm) }
.su-cred strong { font-family:var(--fonte-num); font-size:var(--fs-base); color:var(--verde) }

/* ---------- O MENUZINHO DA CONTA ----------
   "Minha conta" e "sair" moravam soltos na fileira do menu, do lado de "Como
   funciona" — coisa do site e coisa da pessoa misturadas na mesma tira de
   links. Agora abrem no nome de quem está logado, que é onde todo mundo já
   procura. O saldo não entra aqui: ele fica à vista, porque é o número que a
   pessoa acompanha enquanto joga. */
.su-menu { position:relative }
.su-botao {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:5px 10px 5px 5px; border-radius:999px; line-height:1;
  background:var(--caixa-2); border:1px solid var(--linha); color:var(--texto);
  font-size:var(--fs-sm);
}
.su-botao:hover, .su-menu.aberto .su-botao { border-color:var(--azul) }
.su-avatar {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--acao); color:#fff;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); text-transform:uppercase;
}
.su-seta-baixo {
  width:0; height:0; flex:none;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--fraco); transition:transform .15s ease;
}
.su-menu.aberto .su-seta-baixo { transform:rotate(180deg) }
.su-lista {
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  min-width:180px; display:none; flex-direction:column; gap:2px;
  background:var(--caixa); border:var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:var(--sp-1);
}
.su-menu.aberto .su-lista { display:flex }
.su-item {
  width:100%; text-align:left; border:0; background:transparent;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--raio);
  color:var(--texto); font-size:var(--fs-sm); white-space:nowrap;
}
.su-item:hover { background:var(--linha) }
.su-sair { color:var(--vermelho) }

/* DESLOGADO: um botão de verdade, não mais um link de texto no meio dos outros */
.su-entrar {
  margin-left:auto; flex:none;
  padding:var(--sp-2) var(--sp-4); border:0; border-radius:var(--raio);
  background:var(--acao); color:#fff;
  font-size:var(--fs-sm); font-weight:var(--fw-medium); white-space:nowrap;
}
.su-entrar:hover { filter:brightness(1.08) }

.nav-toggle {
  margin-left:auto; display:none;
  width:40px; height:40px; padding:9px;
  background:transparent; border:var(--borda); border-radius:var(--raio);
}
.nav-toggle span { display:block; height:2px; margin:3px 0; background:var(--texto); border-radius:2px; transition:.2s }
body.nav-aberto .nav-toggle span:nth-child(1) { transform:translateY(5px) rotate(45deg) }
body.nav-aberto .nav-toggle span:nth-child(2) { opacity:0 }
body.nav-aberto .nav-toggle span:nth-child(3) { transform:translateY(-5px) rotate(-45deg) }

/* =========================================================
   ESTRUTURA DO JOGO
   ========================================================= */

.envelope {
  max-width:var(--largura); margin:0 auto; padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-4);
  /* CRESCE PARA OCUPAR O QUE SOBRAR — é isto que empurra o rodapé para o fim
     da tela nas páginas curtas. O respiro que separava o miolo do rodapé era
     uma margem no próprio rodapé; virou espaço aqui embaixo, senão ele somava
     à altura da tela e nascia uma barra de rolagem em página que não tem nada
     para rolar. */
  flex:1 0 auto;
  padding-bottom:calc(var(--sp-4) + var(--sp-6));
  width:100%;
}
[id] { scroll-margin-top:calc(var(--topo-h) + var(--sp-3)) }

.bloco {
  background:var(--caixa); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4);
}

.gate {
  max-width:380px; width:100%; margin:9vh auto 0;
  background:var(--caixa); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-6) var(--sp-5); text-align:center;
}
.gate h1 { margin-bottom:var(--sp-2) }
.gate .sub { color:var(--fraco); margin-bottom:var(--sp-4) }
.link-suave { margin-top:var(--sp-4); background:0; border:0; color:var(--fraco); font-size:var(--fs-sm); text-decoration:underline }
.link-suave:hover { color:var(--texto) }

/* =========================================================
   A ENTRADA DO ADMIN
   Era três campos numa linha dentro de um modal sobre uma página vazia — e um
   aviso no campo de usuário que contava a quem quisesse invadir que existe uma
   porta sem usuário. Agora é uma tela: a marca, dois campos com nome, um botão,
   e o erro escrito embaixo. Nada sobre COMO se entra.
   ========================================================= */
.login-fundo {
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--azul) 18%, transparent), transparent 70%),
    var(--fundo);
}
.login-caixa {
  width:100%; max-width:380px;
  display:flex; flex-direction:column; gap:var(--sp-4);
  background:var(--caixa); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-6) var(--sp-5);
  box-shadow:var(--sombra);
}
.login-marca { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2) }
.login-ic { width:40px; height:40px; border-radius:12px; font-size:var(--fs-xl) }
.login-nome { font-size:var(--fs-lg); font-weight:var(--fw-heavy); line-height:var(--lh-tight) }
.login-sub { color:var(--fraco); font-size:var(--fs-sm); margin-top:2px }

.login-campo { display:flex; flex-direction:column; gap:var(--sp-1) }
.login-campo span {
  color:var(--fraco); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em;
}
.login-campo input {
  height:var(--h); width:100%;
  background:var(--fundo); border:var(--borda); border-radius:var(--raio);
  padding:0 var(--sp-4); font-size:var(--fs-md);
}
.login-campo input:focus { border-color:var(--azul); box-shadow:var(--foco) }

.login-erro {
  margin:0; padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--vermelho); border-radius:var(--raio);
  color:var(--vermelho); font-size:var(--fs-sm); line-height:var(--lh-base);
  background:color-mix(in srgb, var(--vermelho) 10%, transparent);
}

.login-botao {
  height:var(--h); width:100%; margin-top:var(--sp-1);
  background:var(--acao); color:#fff; border:0; border-radius:var(--raio);
  font-size:var(--fs-md); font-weight:var(--fw-medium);
}
.login-botao:hover { filter:brightness(1.08) }
.login-botao:disabled { opacity:.6; cursor:default }

.login-voltar {
  align-self:center; margin-top:var(--sp-1);
  color:var(--fraco); font-size:var(--fs-sm); text-decoration:none;
}
.login-voltar:hover { color:var(--texto) }

/* portão: entrar / criar conta (dentro do modal) */
/* 380px espremia o formulário: com dois campos lado a lado sobrava meia palavra
   em cada um, e a barra de rolagem ainda comia o que restava */
.modal-caixa.gate-conta { max-width:440px }
.gate-conta h2 { margin-bottom:var(--sp-4) }

.abas {
  display:flex; gap:var(--sp-1); margin-bottom:var(--sp-4);
  background:var(--fundo); border:var(--borda); border-radius:var(--raio); padding:var(--sp-1);
}
.aba {
  flex:1; padding:var(--sp-2); border:0; border-radius:calc(var(--raio) - 2px);
  background:transparent; color:var(--fraco); font-size:var(--fs-sm);
}
.aba.ativa { background:var(--caixa-2); color:var(--texto) }

.conta-form { display:flex; flex-direction:column; gap:var(--sp-2) }
/* CAIXINHA NÃO É CAMPO DE TEXTO.
   Esta regra pegava QUALQUER input do formulário — inclusive o
   <input type="checkbox"> do aceite dos Termos. A caixinha ganhava
   largura 100%, altura de campo e borda: virava um retângulo vazio, e o
   texto "Li e aceito os Termos..." era empurrado para fora da tela.
   Era exatamente o que o dono estava vendo. */
.conta-form input:not([type="checkbox"]):not([type="radio"]),
.conta-form select {
  height:var(--h); width:100%;
  background:var(--fundo); border:var(--borda); border-radius:var(--raio);
  color:var(--texto); padding:0 var(--sp-3); font-size:var(--fs-base);
}
/* e a caixinha com tamanho de caixinha */
.conta-form input[type="checkbox"] {
  width:16px; height:16px; flex:none; margin:0; accent-color:var(--verde);
}
/* SO O BOTAO DE ENVIAR. Antes esta regra pegava qualquer botão do formulário,
   e a margem de cima que separa o "criar conta" do resto também caía no "gerar",
   que fica LADO A LADO com o campo do apelido — empurrado 8px para baixo, ele
   ficava torto em relação ao campo. */
.conta-form button[type=submit] {
  margin-top:var(--sp-2); height:var(--h);
  background:var(--acao); color:#fff; border:0; border-radius:var(--raio);
  font-size:var(--fs-md); font-weight:var(--fw-medium);
}
.conta-form button[type=submit]:hover { filter:brightness(1.08) }

.conta-rot {
  display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-1);
  color:var(--fraco); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
}
.dica-i {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  background:var(--linha); color:var(--fraco);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); font-style:normal;
  cursor:help; text-transform:none;
}
.dica-i:hover { background:var(--acao); color:#fff }

.conta-dupla { display:flex; gap:var(--sp-2) }
.conta-dupla input, .conta-dupla select { flex:1; min-width:0 }

/* O FORMULARIO DE CONTA, arrumado.
   Antes cada campo tinha um rótulo em cima e uma bolinha de ajuda do lado,
   explicando o óbvio ("DDD + número"). Isso fazia a tela parecer um
   questionário. Agora os campos se explicam pelo próprio nome dentro deles, e
   o texto sobra só onde ele diz algo que a pessoa não adivinha — por que o
   nome tem que ser o do documento, e por que a chave PIX tem que ser dela. */
.form-secao {
  margin:var(--sp-4) 0 var(--sp-1); color:var(--fraco);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
}
.conta-form .form-secao:first-child { margin-top:0 }
.form-nota {
  margin:calc(var(--sp-1) * -1) 0 0; color:var(--fraco);
  font-size:var(--fs-xs); line-height:1.5;
}
/* uma fonte só em tudo que se digita: o campo de data e o select vinham com a
   do sistema, e destoavam do resto */
.conta-form input:not([type="checkbox"]), .conta-form select,
.apelido-linha input, .apelido-linha button {
  font-family:var(--fonte);
}
.conta-form input::placeholder { color:var(--fraco); opacity:.75 }
.conta-form select:invalid { color:var(--fraco) }

.apelido-linha { display:flex; align-items:center; gap:var(--sp-2) }
.apelido-linha input {
  flex:1; min-width:0; height:var(--h);
  background:var(--fundo); border:var(--borda); border-radius:var(--raio);
  padding:0 var(--sp-3); font-size:var(--fs-md); font-family:var(--fonte-num);
  letter-spacing:.08em; text-align:center;
}
#btGerarNick {
  flex:0 0 auto; padding:0 var(--sp-4); height:var(--h);
  background:var(--linha); color:var(--texto); border:0; border-radius:var(--raio);
  font-size:var(--fs-sm);
}
#btGerarNick:hover { background:#2c3542 }
.conta-erro { color:var(--vermelho); font-size:var(--fs-sm); min-height:1em; margin-top:var(--sp-1) }
.conta-ok { color:var(--verde); font-size:var(--fs-sm); line-height:var(--lh-loose); margin-top:var(--sp-2) }
.conta-ok a { color:var(--verde); font-weight:var(--fw-medium) }

/* O RECADO DE CONFIRMAR O E-MAIL: uma frase e um botão, nessa ordem, um
   embaixo do outro. Antes eram três textos empilhados dizendo a mesma coisa.

   O BOTÃO É PEQUENO, e não do tamanho do ".botao" do jogo — aquele tem 60px de
   altura e ocupa a largura toda porque é o botão de clicar no leilão, a coisa
   mais importante da tela. Aqui é uma ação de recuperação, e um botão gigante
   dentro de uma caixinha de aviso fica fora de lugar. */
.conta-recado { margin:0 0 var(--sp-3); color:var(--texto); line-height:var(--lh-loose) }
.conta-ok .botao {
  width:auto; min-height:38px; padding:var(--sp-2) var(--sp-4);
  display:inline-flex; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  border-radius:var(--raio); text-decoration:none;
  background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha);
}
.conta-ok .botao:hover { border-color:var(--azul); color:var(--azul) }
.conta-ok .botao:disabled { opacity:.5; cursor:default }
.conta-nota { color:var(--fraco); font-size:var(--fs-sm) }

.rodape {
  margin-top:auto;
  background:var(--rodape-fundo); color:var(--rodape-cor);
  border-top:var(--borda); font-size:var(--fs-sm); line-height:var(--lh-base);
}
.rodape-in {
  max-width:var(--largura); margin:0 auto; padding:var(--sp-5) var(--sp-4);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-5);
}
.rodape h3 {
  font-size:var(--fs-xs); font-weight:var(--fw-medium); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:var(--sp-2); opacity:.7;
}
.rodape-marca { display:inline-flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2) }
.rodape-marca .marca-ic { width:26px; height:26px }
.rodape-nome { font-weight:var(--fw-bold); color:var(--texto) }
.rodape-frase { margin-bottom:var(--sp-3) }
.rodape-links { list-style:none; display:flex; flex-direction:column; gap:var(--sp-2) }
.rodape-links button, .rodape-links a {
  background:none; border:0; padding:0; color:inherit; text-align:left;
  font-size:var(--fs-sm); text-decoration:none; cursor:pointer;
}
.rodape-links button:hover, .rodape-links a:hover { color:var(--azul) }
.rodape-idade {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  border:1px solid var(--ambar); color:var(--ambar); background:var(--ambar-suave);
  border-radius:var(--raio); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs);
}
.rodape-pe {
  border-top:var(--borda); padding:var(--sp-3) var(--sp-4);
  text-align:center; font-size:var(--fs-xs); opacity:.7;
}
@media (max-width:760px) {
  .rodape-in { grid-template-columns:1fr; gap:var(--sp-4) }
}

#salao, #jogo, #fimPagina, #contaPagina { display:flex; flex-direction:column; gap:var(--sp-4) }

.salao-aviso {
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--verde-suave); border:1px solid var(--verde); border-radius:var(--raio);
  padding:var(--sp-3) var(--sp-4); color:var(--verde); font-size:var(--fs-sm);
}
.salao-aviso button {
  background:var(--verde); color:#08130c; border:0; border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); font-weight:var(--fw-medium);
}

.topo-leilao { display:flex; gap:var(--sp-2); align-items:center }
.voltar {
  background:transparent; border:var(--borda); border-radius:var(--raio);
  color:var(--fraco); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3);
}
.voltar:hover { color:var(--texto); border-color:var(--fraco) }

/* SALÃO: cards tipo "produto de loja", com o valor no lugar da foto */
.salas { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4) }
.salas .vazio { color:var(--fraco); font-size:var(--fs-sm); padding:var(--sp-2) 0 }

.leilao-card {
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4); text-align:left; color:var(--texto);
  transition:border-color .15s, transform .1s;
}
button.leilao-card { cursor:pointer }
button.leilao-card:hover { border-color:var(--azul) }
button.leilao-card:active { transform:scale(.99) }
.leilao-card.aqui { border-color:var(--verde) }

/* O TÍTULO E O SELO DIVIDEM A MESMA LINHA.
   Depois que o nome passou a trazer a faixa ("Leilão R$ 0,05"), ele ficou mais
   comprido e o selo de estado ("aguardando jogadores") passava por cima dele
   no computador — no celular o card é mais estreito e o nome já cortava antes
   de encostar. O "min-width:0" é o que deixa o nome ENCOLHER: sem ele, um item
   de flex se recusa a ficar menor que o próprio conteúdo, e empurra o vizinho.
   Os dois lados também cedem um pouco de tamanho de letra. */
.lc-top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2) }
.lc-nome {
  font-weight:var(--fw-bold); font-size:var(--fs-sm);
  min-width:0; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lc-badge {
  white-space:nowrap;
  flex:0 0 auto;
  font-size:9px; text-transform:uppercase; letter-spacing:.02em;
  color:var(--fraco); background:var(--linha); padding:2px 7px; border-radius:999px; white-space:nowrap;
  max-width:52%; overflow:hidden; text-overflow:ellipsis;
}
.lc-badge.b-vez { color:var(--verde) }
.lc-badge.b-esperando { color:var(--ambar) }
.lc-badge.b-sorteando { color:var(--azul) }
.lc-badge.b-votando { color:var(--vermelho) }

/* O PRÊMIO É O PROTAGONISTA DO CARD: grande, no centro, entre o rótulo e os
   ícones. overflow:hidden é a trava: valor nenhum invade o resto do card. */
.lc-valor {
  color:var(--premio); padding:var(--sp-2) 0 var(--sp-3);
  display:flex; justify-content:center; align-items:center;
  overflow:hidden;
}
/* acompanha a largura do card: grande, mas sem estourar em valores altos */
.lc-valor .odo { font-size:clamp(26px, 9vw, 40px); color:var(--premio) }
.lc-rot { text-align:center }
.lc-bottom { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--fraco) }
.lc-bottom .lc-div { color:var(--ambar); font-weight:var(--fw-bold); margin-left:auto }

.leilao-card.fim { opacity:.65 }
.leilao-card.fim .lc-valor {
  color:var(--fraco); font-size:var(--fs-xl); font-weight:var(--fw-heavy);
  justify-content:flex-start; padding:var(--sp-2) 0;
}

/* ODÔMETRO: cada dígito é uma fita 0..9 que desliza (efeito roleta) */
.odo {
  display:inline-flex; align-items:baseline; max-width:100%;
  font-weight:var(--fw-heavy); line-height:1; font-variant-numeric:tabular-nums;
}
.odo-cifra { font-size:.42em; font-weight:var(--fw-bold); opacity:.7; margin-right:.18em; line-height:1 }
/* flex-start é o que impede a janelinha de esticar e mostrar mais de um dígito */
.odo-int, .odo-cent { display:inline-flex; align-items:flex-start; line-height:1 }
.odo-virg { font-size:.55em; align-self:flex-end; margin:0 .04em .06em; line-height:1 }
.odo-cent { font-size:.5em; align-self:flex-start }
.odo-dig {
  flex:0 0 auto;
  height:1em; width:.62em; line-height:1;
  overflow:hidden; display:block;
}
.odo-cent .odo-dig { width:.6em }
.odo-fita {
  display:block; line-height:1;
  transform:translateY(calc(var(--d,0) * -1em));
  transition:transform .55s cubic-bezier(.2,.8,.15,1);
}
.odo-fita > span {
  display:block; height:1em; line-height:1; text-align:center;
}
.odo.pop { animation:odo-pop .38s ease }
@keyframes odo-pop {
  0% { transform:scale(1) }
  35% { transform:scale(1.14); filter:brightness(1.3) }
  100% { transform:scale(1) }
}

.placar {
  display:flex; flex-direction:column; align-items:center;
  background:var(--caixa); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4);
}
/* na página do leilão o prêmio é maior que no card do salão */
.placar-valor { padding:var(--sp-2) 0 }
.placar-valor .odo { font-size:clamp(34px, 12vw, 56px) }
.placar .lc-recursos { margin-bottom:var(--sp-4) }
.placar .rec { width:38px; height:38px }
.placar .rec i { font-size:var(--fs-xl) }

/* prêmio e "colocar saldo" lado a lado, cada um na sua caixa */
.placar-dupla { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); align-items:stretch }
.placar-dupla > .placar { margin:0 }
@media (max-width:640px) { .placar-dupla { grid-template-columns:1fr } }

/* o botão mora dentro da caixa do prêmio, encostado no rodapé dela */
.placar { justify-content:flex-start }
.placar > .botao { width:100%; margin-top:auto }
.placar > .subBotao { margin-top:var(--sp-2) }
.subBotao:empty { display:none }

/* pacotes de lance: um embaixo do outro */
.caixa-saldo { justify-content:flex-start; gap:var(--sp-3) }
.saldo-botoes { display:flex; flex-direction:column; gap:var(--sp-2); width:100%; align-self:stretch }
.bt-saldo {
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--caixa-2); color:var(--texto); border:var(--borda);
  border-radius:var(--raio); padding:var(--sp-3) var(--sp-4);
  font-family:var(--fonte-num); font-size:var(--fs-base); cursor:pointer; width:100%;
  text-align:left;
}
/* o valor empurra o botão para a ponta */
.bt-saldo span { margin-left:auto }
.bt-saldo .compra-bt { flex:none; padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs) }
/* "Saldo 100" à esquerda, "R$ 100,00" à direita.
   O nome é só a etiqueta; quem manda no olho é o preço — então o peso fica nele. */
.bt-saldo b { font-size:var(--fs-base); font-weight:var(--fw-regular); color:var(--fraco) }
.bt-saldo span {
  color:var(--verde); font-size:var(--fs-lg); font-weight:var(--fw-bold);
  white-space:nowrap;
}
.bt-saldo-todos {
  justify-content:center; color:var(--fraco); font-size:var(--fs-sm);
  font-family:inherit; background:transparent;
}
.bt-saldo-todos:hover { color:var(--azul) }
.bt-saldo:hover:not(:disabled) { border-color:var(--azul); color:var(--azul) }
.bt-saldo:disabled { opacity:.4; cursor:default }
/* página de comprar lances */
.compra-lista { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3) }
.compra-item {
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio);
  padding:var(--sp-3) var(--sp-4);
}
.compra-nome { font-size:var(--fs-base); color:var(--fraco); margin-right:auto }
.compra-valor {
  font-family:var(--fonte-num); font-size:var(--fs-lg); font-weight:var(--fw-bold);
  color:var(--verde); margin-right:var(--sp-4);
}
.compra-bt {
  background:var(--acao); color:#fff; border:0; border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); cursor:pointer;
}
.compra-bt:disabled { opacity:.4; cursor:default }
.saldo-nota { font-size:var(--fs-xs); color:var(--fraco); text-align:center }

/* popup de configuração (automático) */
.modal {
  position:fixed; inset:0; z-index:50; display:flex;
  align-items:center; justify-content:center; padding:var(--sp-4);
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
}
.modal-caixa {
  background:var(--caixa); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4); width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.modal-caixa h2 { margin:0 }
.modal-nota { margin:0; font-size:var(--fs-sm); color:var(--fraco); line-height:var(--lh-base) }
.modal-caixa .check { padding-top:0 }
.modal-linha { font-size:var(--fs-sm); color:var(--fraco); font-family:var(--fonte-num) }

/* no painel: nome EM CIMA, campo embaixo, tudo na largura toda — é o único
   arranjo que não quebra em tela de celular */
.modal-caixa .campo label {
  text-transform:none; letter-spacing:0;
  font-size:var(--fs-sm); color:var(--texto);
}
.modal-caixa .campo input[type=number] { width:100% }
.modal-caixa .check { padding-top:0; gap:var(--sp-3) }
.modal-aviso {
  background:var(--ambar-suave); border:1px solid var(--ambar); border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3); color:var(--ambar);
  font-size:var(--fs-sm); line-height:var(--lh-base);
  opacity:1; transition:opacity .5s ease;
}
/* o aviso avisa e vai embora — ficar na tela vira paisagem */
.modal-aviso.sumindo { opacity:0 }

/* o botão do painel não recebe classe de estado pelo JS: a cor vem daqui,
   senão ele sai branco com letra clara e some */
.modal-botoes { display:flex; gap:var(--sp-3) }
.modal-botoes .botao { min-height:44px; font-size:var(--fs-base); border-radius:var(--raio) }
#btAutoFechar { background:var(--acao); color:#fff; flex:2 }
#btAutoParar  { background:var(--vermelho); color:#fff; flex:1 }
#btAutoFechar:hover, #btAutoParar:hover { filter:brightness(1.08) }
.premio-odo { display:inline-flex }
.premio-odo .odo { font-size:var(--fs-2xl); color:var(--premio) }
.icone {
  align-self:center; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; cursor:help;
  background:var(--caixa-2); border:1px solid var(--azul); color:var(--azul);
  font-size:var(--fs-lg); line-height:1;
}
.icone:hover { background:var(--acao); color:var(--fundo) }

.barraFora {
  position:relative; height:24px; overflow:hidden;
  background:var(--caixa); border:var(--borda); border-radius:var(--raio);
}
.barraDentro { height:100%; width:0; background:linear-gradient(90deg,var(--acao),var(--acao)); transition:width .3s ease }
#barraTexto {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); color:var(--fraco); padding:0 var(--sp-3); text-align:center;
}

.botao {
  width:100%; padding:14px var(--sp-4); min-height:60px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:var(--fs-base); line-height:1.25;
  font-weight:var(--fw-bold); letter-spacing:.01em;
  border:0; border-radius:var(--raio-lg);
  transition:transform .12s ease, background .15s, color .15s;
}
.botao.travado   { background:var(--caixa); color:var(--fraco); border:var(--borda) }
.botao.sorteando { background:var(--ambar); color:#1a1400 }
.botao.minhaVez  { background:var(--verde); color:#08130c }
.botao.minhaVez:active { transform:scale(.985) }
.botao.cta       { background:var(--acao); color:#fff }
.botao.cta:hover { filter:brightness(1.08) }
.botao.inscrito  { background:var(--verde-suave); color:var(--verde); border:1px solid var(--verde) }
.subBotao { text-align:center; color:var(--fraco); font-size:var(--fs-sm); margin-top:calc(-1 * var(--sp-1)) }

.botao-reentrar {
  width:100%; padding:16px var(--sp-4); margin-top:var(--sp-2);
  background:var(--ambar-suave); color:var(--ambar); border:1px solid var(--ambar);
  border-radius:var(--raio-lg); font-size:var(--fs-base); font-weight:var(--fw-bold);
}
.botao-reentrar:hover { background:var(--ambar); color:#1a1400 }
/* o botão único quando ele vira a reentrada */
.botao.reentrar { background:var(--ambar-suave); color:var(--ambar); border:1px solid var(--ambar) }
.botao.reentrar:hover { background:var(--ambar); color:#1a1400 }
.secundario.ligado { border-color:var(--verde); color:var(--verde) }

.acoes { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); align-items:start }
.acao-col { min-height:38px }

/* NO CELULAR OS BOTÕES FINOS SOBEM.
   
   Empilhado, cada caixa ocupa a largura toda: o prêmio, depois os pacotes,
   e só então as ações — que acabavam fora da tela, lá no fim da rolagem.
   Pior: para chegar nelas a pessoa passava batido pela caixa de recarregar
   saldo, ou o contrário, e no meio de um leilão isso custa a vez dela.
   
   A ordem no celular passa a ser: leilão, ações, pacotes. Os dois botões são
   finos, então empurram pouco — a caixa de saldo continua ao alcance do dedo.
   
   O "display:contents" é o que permite isso sem mexer no HTML: a caixa que
   emparelha prêmio e pacotes no computador deixa de existir como caixa, e os
   dois viram vizinhos diretos das ações — aí a ordem se resolve entre eles. */
@media (max-width:640px) {
  .acoes { grid-template-columns:1fr; order:2 }
  /* coluna vazia não guarda lugar aqui: empilhado ela é só um buraco */
  .acao-col { min-height:0 }
  .placar-dupla { display:contents }
  .placar-dupla > .placar:not(.caixa-saldo) { order:1 }
  .placar-dupla > .caixa-saldo { order:3 }
  /* o resto da página do leilão continua vindo depois */
  /* a faixa de doações continua no alto; o resto vem depois das ações */
  #jogo > *:not(.topo-leilao):not(.placar-dupla):not(.acoes):not(.doadores) { order:4 }
  #jogo > .doadores { order:0 }
}
/* O OLHINHO DA SENHA: o campo fica dentro da caixa, o olho no canto direito */
.senha-caixa { position:relative; display:block; width:100%; flex:1 1 auto; min-width:0 }
.senha-caixa > input { width:100%; padding-right:42px; box-sizing:border-box }
.olho {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:50%; color:var(--fraco); cursor:pointer;
}
.olho:hover, .olho.aberto { color:var(--texto) }

/* O SOM DA SUA VEZ, no canto do card do leilão: o sino e a setinha. O sino
   colorido é ligado; cinza e cortado, desligado. A setinha abre a caixinha
   de escolher; fechada, só os dois ficam. */
.jogo-titulo { position:relative }
.som-mini { position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:2px }
.som-ico, .som-seta {
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:28px; padding:0; background:transparent; border:0; border-radius:999px; cursor:pointer;
  color:var(--fraco);
}
.som-ico:hover, .som-seta:hover { background:var(--caixa-2) }
.som-ico.ligado { color:var(--verde) }
.som-ico .som-corte, .som-ico .som-corte-fundo { display:none }
.som-ico:not(.ligado) .som-corte { display:block }
.som-ico:not(.ligado) .som-corte-fundo { display:block; stroke:var(--caixa) }
.som-seta { font-size:14px; width:22px; min-width:22px; transition:transform .15s }
.som-seta[aria-expanded="true"] { transform:rotate(180deg) }
.som-painel {
  position:absolute; right:0; top:calc(100% + 6px); z-index:5;
  display:flex; flex-direction:column; gap:var(--sp-2); min-width:200px;
  background:var(--caixa); border:var(--borda); border-radius:var(--raio); padding:var(--sp-3);
  box-shadow:0 8px 24px rgba(0,0,0,.45); text-align:left;
}
.som-painel label { font-size:var(--fs-xs); color:var(--fraco); text-transform:uppercase; letter-spacing:.04em }
.som-painel select {
  height:34px; padding:0 var(--sp-2);
  background:var(--fundo); color:var(--texto); border:var(--borda); border-radius:var(--raio); font-size:var(--fs-sm);
}
.som-bt {
  height:32px; padding:0 var(--sp-3);
  background:var(--caixa-2); color:var(--texto); border:var(--borda); border-radius:999px; font-size:var(--fs-sm); cursor:pointer;
}
.som-bt:hover { border-color:var(--fraco) }
.som-bt:disabled, .som-painel select:disabled { opacity:.45; cursor:default }
.som-chamada { border-color:var(--acao); z-index:61 }
.som-chamada button { background:var(--acao); color:#fff }
.acao-col > .secundario { width:100% }
.secundario {
  height:38px; padding:0 var(--sp-4);
  background:var(--caixa); color:var(--texto); border:var(--borda); border-radius:var(--raio); font-size:var(--fs-sm);
}
.secundario:hover { border-color:var(--fraco) }
.robo { display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--fraco); font-size:var(--fs-sm); user-select:none }
.robo input { accent-color:var(--azul) }
#autoResta { color:var(--fraco); font-family:var(--fonte-num); font-size:var(--fs-sm) }

.votacao {
  background:var(--ambar-suave); border:1px solid var(--ambar); border-radius:var(--raio-lg);
  padding:var(--sp-4); text-align:center;
}
.votacao p { margin-bottom:var(--sp-2) }
.votacao button {
  height:38px; padding:0 var(--sp-5); margin:var(--sp-2) var(--sp-1) 0;
  border:0; border-radius:var(--raio); font-weight:var(--fw-medium); background:var(--ambar); color:#1a1400;
}
.votacao button:disabled { opacity:.45 }
#btNao { background:var(--linha); color:var(--texto) }

/* a mesa decidindo quem entra: caixa neutra para os botões aparecerem */
#aprovacao { background:var(--caixa); border:var(--borda) }
#aprovacao p { color:var(--texto) }
#btAprovaSim, #btAprovaNao {
  height:52px; min-width:130px; padding:0 var(--sp-5);
  font-size:var(--fs-base); font-weight:var(--fw-bold);
}
#btAprovaSim b, #btAprovaNao b { font-family:var(--fonte-num); margin-left:var(--sp-2) }
#btAprovaSim { background:var(--verde); color:#08130c }
#btAprovaNao { background:var(--vermelho); color:#fff }

.votos { margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--fraco) }

.colunas { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) }
.lateral { display:flex; flex-direction:column; gap:var(--sp-4) }

/* MESA e CHAT: mesma "cara" — mesma altura, rolagem e fonte */
.jogadores ul, #mensagens {
  height:180px; overflow-y:auto; padding-right:var(--sp-1);
  font-size:var(--fs-sm); line-height:var(--lh-loose);
}
.jogadores ul { list-style:none }
.jogadores li {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:3px 0; border-bottom:var(--borda);
}
.jogadores li:last-child { border-bottom:0 }
.jogadores li.fora { opacity:.4; text-decoration:line-through }
.jogadores li.vez .jog-nome { color:var(--verde); font-weight:var(--fw-bold) }

.jog-esq { display:flex; align-items:center; gap:var(--sp-2); min-width:0 }
.jog-nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* a hora do ultimo clique de cada um, na frente do nome. Era a contagem de
   cliques, que nao ajudava ninguem a decidir nada. Fonte de numero e largura
   fixa para a coluna nao dancar a cada segundo que passa. */
.jog-hora {
  flex:0 0 auto; text-align:center;
  background:var(--linha); border-radius:6px; padding:1px 6px;
  font-family:var(--fonte-num); font-size:var(--fs-2xs); color:var(--fraco);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.jog-ultimo {
  flex:0 0 auto;
  background:var(--verde-suave); color:var(--verde);
  border-radius:999px; padding:1px 7px; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em;
}
.jog-dir { display:flex; align-items:center; gap:var(--sp-1); flex:0 0 auto }

.gasto { color:var(--fraco); font-family:var(--fonte-num); font-size:var(--fs-sm) }
.btEspiar {
  margin-left:var(--sp-1); padding:2px var(--sp-2);
  background:transparent; border:var(--borda); border-radius:6px; color:var(--fraco); font-size:var(--fs-xs);
}
.btEspiar:disabled { opacity:.4; cursor:default }
.btEspiar:hover { border-color:var(--fraco); color:var(--texto) }

#mensagens > div { padding:2px 0 }
#mensagens .quem { color:var(--azul); font-weight:var(--fw-medium) }
.chat-vazio { color:var(--fraco); font-size:var(--fs-sm); font-style:italic }
/* recado do próprio jogo (eliminação, reentrada, espiada) — não é fala de gente */
.chat-sis { color:var(--ambar); font-size:var(--fs-sm); font-style:italic; opacity:.9; padding:2px 0 }

.frases { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-3) 0 var(--sp-2) }
.frases button {
  padding:var(--sp-1) var(--sp-2);
  background:var(--linha); border:0; border-radius:999px; color:var(--texto); font-size:var(--fs-sm);
}
.frases button:hover { background:#2c3542 }

.digitar { display:flex; gap:var(--sp-2) }
.digitar input {
  flex:1; min-width:0; height:38px; padding:0 var(--sp-3);
  background:var(--fundo); border:var(--borda); border-radius:var(--raio); font-size:var(--fs-sm);
}
.digitar button { height:38px; padding:0 var(--sp-4); background:var(--linha); border:0; border-radius:var(--raio); color:var(--texto) }
.digitar button:hover { background:#2c3542 }

.ranking ol { padding-left:var(--sp-5); font-size:var(--fs-sm); line-height:var(--lh-loose) }
.ranking li::marker { color:var(--fraco) }

/* =========================================================
   MODAL (como funciona / login do admin)
   ========================================================= */

.modal {
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); padding:var(--sp-4);
}
.modal-caixa {
  position:relative; width:100%; max-width:460px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--caixa); border:var(--borda); border-radius:var(--raio-lg);
  box-shadow:var(--sombra);
}
/* o título e o X ficam parados; só o conteúdo rola por baixo — assim o
   botão de fechar está sempre a um clique de distância */
.modal-cabeca {
  flex:0 0 auto; padding:var(--sp-4) var(--sp-5);
  padding-right:calc(var(--sp-5) + 34px);
  border-bottom:var(--borda); background:var(--caixa);
}
.modal-cabeca h2 { margin:0 }
.modal-cabeca > p { margin-top:var(--sp-1) }
.modal-corpo { flex:1 1 auto; overflow-y:auto; padding:var(--sp-5) }
.modal-corpo > .grupo:first-child { margin-top:0 }
.modal-x {
  position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:3;
  width:30px; height:30px; line-height:1;
  background:var(--linha); border:0; border-radius:8px; color:var(--texto); font-size:var(--fs-lg);
}
.regras { margin-top:var(--sp-3); padding-left:var(--sp-5); font-size:var(--fs-sm); line-height:var(--lh-loose) }

/* ---------- O IZINHO (ⓘ) ----------
   O dono viu a tela cheia de texto explicativo e mandou encolher: a frase
   curta fica à vista, e a explicação inteira mora atrás de um "i". Mouse em
   cima mostra; no celular, o dedo toca e abre, toca fora e fecha. Ocupa o
   espaço de uma letra. */
.info {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:6px; padding:0; vertical-align:middle;
  border-radius:50%; border:1px solid var(--fraco); background:transparent; color:var(--fraco);
  font-size:11px; font-weight:var(--fw-bold); font-style:italic; line-height:1; cursor:pointer;
  font-family:Georgia, "Times New Roman", serif;
}
.info:hover, .info.aberto { border-color:var(--azul); color:var(--azul) }
.info-balao {
  display:none; position:absolute; z-index:70; left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  width:max-content; max-width:min(300px, 86vw);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--raio);
  background:var(--caixa); color:var(--texto); border:1px solid var(--linha); box-shadow:var(--sombra);
  font-family:var(--fonte); font-size:var(--fs-sm); font-style:normal; font-weight:var(--fw-regular);
  line-height:var(--lh-base); text-align:left; white-space:normal; cursor:default;
}
.info-balao::before {
  content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--caixa); border-left:1px solid var(--linha); border-top:1px solid var(--linha);
}
.info:hover .info-balao, .info.aberto .info-balao { display:block }
/* perto da borda da tela o balão encosta na esquerda ou na direita, em vez de sair */
.info.na-direita .info-balao { left:auto; right:-4px; transform:none }
.info.na-direita .info-balao::before { left:auto; right:8px; transform:rotate(45deg) }
.info.na-esquerda .info-balao { left:-4px; transform:none }
.info.na-esquerda .info-balao::before { left:8px; transform:rotate(45deg) }

/* ---------- A CONFIRMAÇÃO DO SITE (pergunta.js) ----------
   No lugar do confirm() do navegador. Mesmo desenho dos outros modais; o
   botão principal verde para seguir, vermelho para apagar. */
#perguntaModal { z-index:120 }
.pergunta-campos { display:grid; gap:var(--sp-3); margin-bottom:var(--sp-4) }
.pergunta-campos label { display:grid; gap:4px; font-size:var(--fs-sm); color:var(--fraco) }
.pergunta-campos input, .pergunta-campos select {
  height:38px; padding:0 var(--sp-3); background:var(--fundo); color:var(--texto);
  border:var(--borda); border-radius:var(--raio); font-size:var(--fs-base);
}
.pergunta-campos .falta { border-color:var(--vermelho) }
.pergunta-caixa { max-width:420px }
.pergunta-caixa .modal-cabeca { padding-right:var(--sp-5) }
.pergunta-texto { padding:var(--sp-4) var(--sp-5) 0 }
.pergunta-texto p { margin:0 0 var(--sp-2); line-height:var(--lh-base) }
.pergunta-texto p:last-child { margin-bottom:0 }
.pergunta-caixa .modal-botoes { padding:var(--sp-4) var(--sp-5) var(--sp-5); margin:0 }
/* a escolha dentro da confirmação: uma chave grande, não uma caixinha apagada */
.pergunta-escolha {
  display:flex; align-items:center; gap:var(--sp-3); cursor:pointer;
  margin:var(--sp-4) var(--sp-5) 0; padding:var(--sp-3) var(--sp-4);
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
}
.pergunta-escolha input { position:absolute; opacity:0; width:0; height:0 }
.pergunta-chave {
  flex:none; width:44px; height:24px; border-radius:999px; background:var(--linha); position:relative;
  transition:background .15s ease;
}
.pergunta-chave::after {
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:left .15s ease;
}
.pergunta-escolha input:checked + .pergunta-chave { background:var(--verde) }
.pergunta-escolha input:checked + .pergunta-chave::after { left:23px }
.pergunta-escolha input:focus-visible + .pergunta-chave { box-shadow:var(--foco) }
.pergunta-escolha-txt { display:flex; flex-direction:column; line-height:var(--lh-tight) }
.pergunta-escolha-txt b { font-size:var(--fs-base) }
.pergunta-escolha-txt small { color:var(--fraco); font-size:var(--fs-xs); margin-top:2px }
#perguntaSim { background:var(--verde); color:var(--fundo); flex:2 }
#perguntaSim.perigo { background:var(--vermelho); color:#fff }
#perguntaSim:hover { filter:brightness(1.08) }
#perguntaNao { background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); flex:1 }
.regras li { margin-bottom:var(--sp-2) }
.regras b { color:var(--texto) }

/* =========================================================
   FLUTUANTES
   ========================================================= */

.balao {
  position:fixed; z-index:90; max-width:250px;
  background:#000; color:#fff; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--raio); font-size:var(--fs-sm); line-height:var(--lh-base); box-shadow:var(--sombra);
}
.aviso {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:95;
  background:var(--vermelho); color:#fff;
  padding:var(--sp-3) var(--sp-5); border-radius:var(--raio);
  font-size:var(--fs-sm); box-shadow:var(--sombra); max-width:90vw; text-align:center;
}
#mensagens::-webkit-scrollbar, .modal-caixa::-webkit-scrollbar, .conteudo-corpo::-webkit-scrollbar { width:8px }
#mensagens::-webkit-scrollbar-thumb, .modal-caixa::-webkit-scrollbar-thumb, .conteudo-corpo::-webkit-scrollbar-thumb {
  background:var(--linha); border-radius:8px;
}

/* =========================================================
   ADMIN — SHELL COM MENU LATERAL
   ========================================================= */

.pg-admin { height:100vh; overflow:hidden }

.admin-shell {
  display:grid;
  grid-template-columns:var(--lado-w) 1fr;
  height:100vh;
  transition:grid-template-columns .18s ease;
}
body.lado-mini .admin-shell { grid-template-columns:var(--lado-mini) 1fr }

/* ----- menu lateral ----- */
.lado {
  position:relative;
  display:flex; flex-direction:column;
  background:var(--caixa); border-right:var(--borda);
  padding:var(--sp-3) var(--sp-2);
}
.lado-nav, .lado-pe { overflow:hidden }
.lado-cabeca {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-2) var(--sp-4);
  font-weight:var(--fw-bold); white-space:nowrap;
}
.lado-cabeca .marca-ic { flex:0 0 auto }
.marca-txt { font-size:var(--fs-base) }

.lado-nav { display:flex; flex-direction:column; gap:2px }
.lado-pe  { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:var(--sp-3); border-top:var(--borda) }

/* ---------- QUEM ESTÁ ENTRANDO, no alto do menu do admin ----------
   O dono não achava onde sair nem onde mexer na própria conta. Agora o nome de
   quem entrou fica sempre à vista, e clicar nele abre "Minha conta". */
.lado-quem {
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3);
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  color:var(--texto); text-align:left; cursor:pointer; white-space:nowrap;
}
.lado-quem:hover { border-color:var(--azul) }
.lq-avatar {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:50%;
  background:var(--acao); color:#fff; font-size:var(--fs-xs); font-weight:var(--fw-bold);
  text-transform:uppercase;
}
.lq-avatar.grande { width:44px; height:44px; font-size:var(--fs-md) }
.lq-txt { display:flex; flex-direction:column; min-width:0; line-height:var(--lh-tight) }
.lq-txt b { font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis }
.lq-txt small { color:var(--fraco); font-size:var(--fs-2xs) }
body.lado-mini .lado-quem { justify-content:center; padding:var(--sp-2) 0 }
body.lado-mini .lq-txt { display:none }

/* o sair fica com a cor de sair, e não igual aos outros itens */
.lado-sair { color:var(--vermelho) }
.lado-sair:hover { background:var(--vermelho); color:#fff }

/* a página Minha conta */
.mc-quem {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4); margin-bottom:var(--sp-4);
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio-lg);
}
.mc-quem > div { flex:1; min-width:0 }
.mc-usuario { font-size:var(--fs-md) }
.mc-quem .bt { flex:none }
@media (max-width:600px) {
  .mc-quem { flex-wrap:wrap }
  .mc-quem .bt { width:100% }
}

.lado-item {
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; padding:var(--sp-3);
  background:transparent; border:0; border-radius:var(--raio);
  color:var(--fraco); font-size:var(--fs-sm); text-align:left; text-decoration:none;
  white-space:nowrap;
}
.lado-item:hover { background:var(--linha); color:var(--texto) }
.lado-item.ativo { background:var(--acao); color:#fff }
.li-ic { flex:0 0 auto; width:22px; text-align:center; font-size:var(--fs-base) }
.li-tx { overflow:hidden; text-overflow:ellipsis }

body.lado-mini .marca-txt,
body.lado-mini .li-tx { display:none }
body.lado-mini .lado-item { justify-content:center; gap:0; padding:var(--sp-3) 0 }
body.lado-mini .lado-cabeca { justify-content:center; padding-left:0; padding-right:0 }

/* a abinha de abrir/fechar, na borda direita do menu */
.lado-aba {
  position:absolute; top:64px; right:-11px; z-index:2;
  width:22px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--caixa-2); border:var(--borda); border-radius:8px;
  color:var(--fraco); font-size:var(--fs-sm); line-height:1;
}
.lado-aba:hover { color:var(--texto); border-color:var(--fraco) }
body.lado-mini .lado-aba { transform:scaleX(-1) }

.lado-backdrop {
  display:none;
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5);
}

/* ----- área de conteúdo ----- */
.conteudo { display:flex; flex-direction:column; min-width:0; height:100vh }
.conteudo-topo {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);
  border-bottom:var(--borda); background:var(--caixa);
}
.conteudo-topo h1 { font-size:var(--fs-lg) }
.menu-mob {
  display:none;
  width:38px; height:38px;
  background:transparent; border:var(--borda); border-radius:var(--raio);
  color:var(--texto); font-size:var(--fs-md);
}
.topo-link { margin-left:auto; color:var(--fraco); font-size:var(--fs-sm); text-decoration:none }
.topo-link:hover { color:var(--texto) }

.conteudo-corpo {
  flex:1; overflow-y:auto;
  padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
  max-width:1100px; width:100%;
}

/* ----- blocos do admin ----- */
.adm.bloco { padding:var(--sp-5) }
.adm h2 { margin-bottom:var(--sp-4) }
.bloco-topo {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.bloco-topo h2 { margin:0 }
.dica { color:var(--fraco); font-size:var(--fs-sm); margin-bottom:var(--sp-4); line-height:var(--lh-loose) }
.tag {
  margin-left:var(--sp-2); padding:1px 8px;
  background:var(--linha); border-radius:999px;
  color:var(--fraco); font-size:var(--fs-2xs); letter-spacing:.04em; text-transform:none;
}

.tabela-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch }
/* as mensagens do fale com a gente: a não lida salta aos olhos, o texto guarda as quebras */
.msg-nova td { background:color-mix(in srgb, var(--azul) 8%, transparent) }
.msg-nova td:first-child { border-left:3px solid var(--azul) }
.msg-texto { white-space:pre-line; max-width:520px; line-height:var(--lh-loose) }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:620px }
th {
  text-align:left; padding:var(--sp-2);
  color:var(--fraco); font-weight:var(--fw-medium); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
}
td { padding:var(--sp-3) var(--sp-2); border-top:var(--borda); vertical-align:middle }
tr.desligado { opacity:.5 }
td.vazio { text-align:center; color:var(--fraco); padding:var(--sp-5) }

.pill { display:inline-block; background:var(--linha); padding:2px 9px; border-radius:999px; font-size:var(--fs-xs) }
.pill.on { background:var(--verde-suave); color:var(--verde) }

.grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-3) }
.campo label {
  display:block; margin-bottom:var(--sp-1);
  color:var(--fraco); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
}
/* TODOS OS TIPOS DE CAMPO, e não só três.
   A lista tinha texto, número e senha. Um campo de data caía fora dela e
   voltava ao padrão do navegador: fundo branco, letra clara em cima, no meio
   de uma tela escura. O mesmo valeria para e-mail ou telefone no dia que
   aparecessem. */
.campo input[type=text],
.campo input[type=number],
.campo input[type=password],
.campo input[type=datetime-local],
.campo input[type=date],
.campo input[type=time],
.campo input[type=email],
.campo input[type=tel],
.campo input[type=url],
.campo input:not([type]) {
  width:100%; height:var(--h);
  background:var(--fundo); border:var(--borda); border-radius:var(--raio);
  color:var(--texto); padding:0 var(--sp-3); font-size:var(--fs-base);
}
/* CHECKBOX FICA SOZINHO NA LINHA, SEMPRE.
   Este padding-top de 18px existia para alinhar o checkbox com os campos
   quando ele estava DENTRO de uma grade. So que ele nao devia estar dentro de
   grade nenhuma — misturado com campo numerico, ele quebra o alinhamento de
   tudo. Agora o padding so aparece se alguem insistir em pos um la dentro. */
.check { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm) }
.grade > .check { padding-top:18px }
/* dentro de fieldset o checkbox está na própria linha: sem o empurrão */
fieldset.grupo .check { padding-top:0 }
.check input { accent-color:var(--azul) }
.check label { margin:0; text-transform:none; font-size:var(--fs-sm); color:var(--texto); letter-spacing:0 }

.grupo { border-top:var(--borda); margin-top:var(--sp-5); padding-top:var(--sp-4) }

.acao { margin-top:var(--sp-5); display:flex; gap:var(--sp-2); flex-wrap:wrap }

.bt {
  height:var(--h); padding:0 var(--sp-5);
  background:var(--acao); color:#fff; border:0; border-radius:var(--raio); font-size:var(--fs-base);
}
.bt:hover { filter:brightness(1.08) }
.bt.cinza { background:var(--linha); color:var(--texto) }
.bt.vermelho { background:var(--vermelho); color:#fff }
.bt.peq { height:32px; padding:0 var(--sp-3); font-size:var(--fs-sm) }

.aoVivo { font-family:var(--fonte-num); font-size:var(--fs-sm); line-height:var(--lh-loose); color:var(--texto) }
.aoVivo .on  { color:var(--verde) }
.aoVivo .off { color:var(--fraco) }

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:760px) {
  .colunas { grid-template-columns:1fr }
}

/* --- menu do jogo vira hambúrguer --- */
@media (max-width:720px) {
  .nav-toggle { display:block }
  /* O TOPO NO CELULAR CABE NUMA LINHA SÓ.
     
     Ali em cima só há duas coisas que a pessoa usa jogando: o menu e o saldo.
     O nome escrito da casa e o próprio apelido dela não ajudam em nada — só
     empurravam o saldo para uma segunda linha e comiam a altura da tela, que
     no celular é o que falta. Da marca fica só o símbolo (ou a logo), do
     tamanho de um botão: quem chega de um link sabe onde está sem ler nada,
     e o toque nele leva para o início.

     Símbolo e menu de um lado, saldo do outro, com a setinha de trazer o
     dinheiro colada nele. */
  .marca #marcaNome { display:none }
  .su-nick { display:none }
  /* A ORDEM NO CELULAR (21/09, pedido do dono olhando no aparelho):
     [☰] [quem está no site]  …  [saldo] [inicial]  [logo]
     o menu sozinho na esquerda, a logo na direita. */
  .site-in { gap:var(--sp-2); flex-wrap:nowrap }
  .nav-toggle { order:0; margin-left:0; flex:none }
  .online { order:1 }
  .site-user { order:2; margin-left:auto; gap:var(--sp-2) }
  .su-entrar { order:3; margin-left:auto }
  .marca { order:4; flex:none; margin-left:var(--sp-1) }
  /* o saldo sem o rótulo "saldo": o número já diz */
  .su-rot { display:none }
  /* a inicial do usuário: um botão redondo do tamanho de um dedo, não uma
     pílula espremida */
  .su-botao { padding:3px; gap:0; border-radius:50%; width:38px; height:38px; justify-content:center }
  .su-avatar { width:30px; height:30px; font-size:var(--fs-sm) }
  .su-seta-baixo { display:none }
  /* O MENU ABERTO FICA POR CIMA DA PÁGINA, não empurra o leilão para baixo */
  .nav {
    position:absolute; left:0; right:0; top:100%; z-index:55;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:var(--sp-2) var(--sp-3) var(--sp-3);
    background:var(--topo-fundo); border-bottom:var(--borda);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
  }
  body:not(.nav-aberto) .nav { display:none }
  .nav a, .nav-link { text-align:left; padding:var(--sp-3) }
}

@media (max-width:600px) {
  .envelope { padding:var(--sp-3) }
  .site-in { padding:var(--sp-2) var(--sp-3) }
  .botao { padding:22px var(--sp-3); font-size:var(--fs-lg) }
  .gate { margin-top:6vh; padding:var(--sp-5) var(--sp-4) }
  h1 { font-size:var(--fs-lg) }
}

/* --- admin: menu lateral vira gaveta --- */
@media (max-width:820px) {
  .admin-shell, body.lado-mini .admin-shell { grid-template-columns:1fr }
  .lado {
    position:fixed; top:0; left:0; bottom:0; z-index:70;
    width:var(--lado-w);
    transform:translateX(-100%); transition:transform .2s ease;
  }
  body.lado-aberto .lado { transform:none }
  body.lado-aberto .lado-backdrop { display:block }
  .lado-aba { display:none }
  .menu-mob { display:block }
  /* no mobile o menu nunca fica "mini", sempre com texto */
  body.lado-mini .marca-txt, body.lado-mini .li-tx { display:inline }
  body.lado-mini .lado-item { justify-content:flex-start; gap:var(--sp-3); padding:var(--sp-3) }
  .conteudo-corpo { padding:var(--sp-4) }
  .conteudo-topo { padding:var(--sp-3) var(--sp-4) }
}

/* ---------- hora nas mensagens ---------- */
/* toda fala (de gente ou do jogo) carrega hh:mm:ss de quando foi enviada */
.chat-hora {
  color:var(--fraco); font-family:var(--fonte-num); font-size:var(--fs-2xs);
  margin-right:var(--sp-2); opacity:.75;
}

/* ---------- página de um leilão encerrado ---------- */
.fim-capa { text-align:center }
.fim-cab { display:flex; align-items:baseline; justify-content:center; gap:var(--sp-2); flex-wrap:wrap }
.fim-id { color:var(--fraco); font-family:var(--fonte-num); font-size:var(--fs-sm) }

.fim-selo {
  display:inline-block; margin:var(--sp-3) 0; padding:var(--sp-2) var(--sp-4);
  border:var(--borda); border-radius:999px;
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
}
.fim-selo.s-vencedor    { color:var(--verde);    border-color:var(--verde);    background:var(--verde-suave) }
.fim-selo.s-dividido    { color:var(--azul);     border-color:var(--azul) }
.fim-selo.s-cancelado   { color:var(--ambar);    border-color:var(--ambar);    background:var(--ambar-suave) }
.fim-selo.s-semvencedor { color:var(--fraco) }

.fim-valor {
  font-family:var(--fonte-num); font-size:var(--fs-2xl); font-weight:var(--fw-heavy);
  line-height:var(--lh-tight); color:var(--texto);
}
.fim-quando { color:var(--fraco); font-size:var(--fs-sm); margin-top:var(--sp-2) }

.fim-numeros { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3) }
.fim-num {
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio);
  padding:var(--sp-4) var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2);
}
.fn-rot { color:var(--fraco); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em }
.fn-val {
  font-family:var(--fonte-num); font-size:var(--fs-md); font-weight:var(--fw-bold);
  overflow-wrap:anywhere; line-height:var(--lh-tight);
}

.fim-tabela { width:100%; border-collapse:collapse; font-size:var(--fs-sm) }
.fim-tabela th {
  text-align:left; color:var(--fraco); font-size:var(--fs-xs); font-weight:var(--fw-medium);
  text-transform:uppercase; letter-spacing:.04em; padding:var(--sp-2); border-bottom:var(--borda);
}
.fim-tabela td { padding:var(--sp-2); border-bottom:1px solid var(--linha) }
.fim-tabela td:not(:first-child) { font-family:var(--fonte-num) }
.fim-uf { color:var(--fraco); font-size:var(--fs-2xs) }
.fim-ficou { color:var(--verde) }

.fim-linha { list-style:none; max-height:320px; overflow-y:auto; font-size:var(--fs-sm) }
.fim-linha li { padding:var(--sp-1) 0; border-bottom:1px solid var(--linha) }
.fim-chat { max-height:320px; overflow-y:auto; font-size:var(--fs-sm) }
.fim-chat > div { padding:2px 0 }

.lc-lances { color:var(--fraco); font-family:var(--fonte-num) }
button.leilao-card.fim { cursor:pointer; text-align:left }
button.leilao-card.fim:hover { border-color:var(--azul) }

/* =========================================================
   ADMIN — CONFIGURADOR DE CORES
   Esta tela NÃO usa os tokens do site: se usasse, escolher um
   fundo ruim deixaria o próprio configurador ilegível.
   ========================================================= */

.temas { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4) }
.tema-bt {
  display:flex; align-items:center; gap:var(--sp-2);
  background:#1c232d; border:1px solid #232a34; border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3); color:#e6edf3; font-size:var(--fs-sm);
}
.tema-bt:hover { border-color:#3b82f6 }
.tema-bolas { display:inline-flex }
.tema-bolas i {
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); margin-right:-5px;
}

.cores-grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4) }
.cor {
  display:grid; grid-template-columns:34px 1fr 78px; align-items:center; gap:var(--sp-2);
  margin-bottom:var(--sp-2); font-size:var(--fs-sm);
}
.cor input[type=color] {
  width:34px; height:30px; padding:0; border:1px solid #232a34;
  border-radius:6px; background:none; cursor:pointer;
}
.cor-hex {
  height:30px; padding:0 var(--sp-2); border:1px solid #232a34; border-radius:6px;
  background:#0d1117; color:#e6edf3; font-family:var(--fonte-num); font-size:var(--fs-xs);
}
.campo-largo { grid-column:1/-1 }

/* ---------- o site em miniatura ---------- */
.preview {
  border:1px solid #232a34; border-radius:var(--raio-lg); overflow:hidden;
  background:var(--pv-fundo); color:var(--pv-texto);
}
.pv-topo {
  background:var(--pv-topo); color:var(--pv-topo-tx);
  padding:var(--sp-3) var(--sp-4); display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--pv-linha); font-size:var(--fs-sm);
}
.pv-cred { font-family:var(--fonte-num); font-size:var(--fs-xs); opacity:.85 }
.pv-corpo { padding:var(--sp-4); display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) }
.pv-card {
  background:var(--pv-caixa); border:1px solid var(--pv-linha);
  border-radius:var(--raio-lg); padding:var(--sp-3);
}
.pv-linha { display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm) }
.pv-nome { font-weight:var(--fw-medium) }
.pv-badge { color:var(--pv-ok); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em }
.pv-premio {
  font-family:var(--fonte-num); font-size:var(--fs-2xl); font-weight:var(--fw-heavy);
  color:var(--pv-premio); margin:var(--sp-2) 0; line-height:var(--lh-tight);
}
.pv-fraco { color:var(--pv-fraco); font-size:var(--fs-xs) }
.pv-botao {
  /* o botão de verdade usa a cor de ação (branco em cima); o preview tem que mostrar o mesmo */
  background:var(--pv-acao); color:#fff; border-radius:var(--raio);
  padding:var(--sp-3); text-align:center; font-weight:var(--fw-bold); font-size:var(--fs-sm);
}
.pv-sub { text-align:center; margin-top:var(--sp-2) }
.pv-tags { display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap }
.pv-tag { border-radius:999px; padding:2px var(--sp-2); font-size:var(--fs-2xs); border:1px solid }
.pv-tag.pv-ok   { color:var(--pv-ok);   border-color:var(--pv-ok);   background:var(--pv-ok-suave) }
.pv-tag.pv-erro { color:var(--pv-erro); border-color:var(--pv-erro); background:var(--pv-erro-suave) }
.pv-tag.pv-aten { color:var(--pv-aten); border-color:var(--pv-aten); background:var(--pv-aten-suave) }
.pv-rodape {
  background:var(--pv-rod); color:var(--pv-rod-tx);
  border-top:1px solid var(--pv-linha); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs);
}
@media (max-width:700px) { .pv-corpo { grid-template-columns:1fr } }

/* ---------- admin: usuários e registros ---------- */
.busca {
  height:34px; min-width:240px; padding:0 var(--sp-3);
  background:#0d1117; color:#e6edf3; border:1px solid #232a34; border-radius:var(--raio);
  font-size:var(--fs-sm);
}
.filtros { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3) }
.filtros select {
  height:34px; padding:0 var(--sp-2);
  background:#0d1117; color:#e6edf3; border:1px solid #232a34; border-radius:var(--raio);
  font-size:var(--fs-sm);
}
.ok-mini   { color:var(--verde);  font-size:var(--fs-xs) }
.pend-mini { color:var(--ambar);  font-size:var(--fs-2xs) }
.nowrap    { white-space:nowrap }
td.pos { color:var(--verde) }
td.neg { color:var(--vermelho) }
td.detalhe {
  font-family:var(--fonte-num); font-size:var(--fs-2xs);
  color:var(--fraco); max-width:420px; overflow-wrap:anywhere;
}
.nivel {
  display:inline-block; border-radius:999px; padding:1px var(--sp-2);
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em; border:1px solid;
}
.nivel.n-info   { color:var(--fraco);    border-color:var(--linha) }
.nivel.n-aviso  { color:var(--ambar);    border-color:var(--ambar) }
.nivel.n-alerta { color:var(--vermelho); border-color:var(--vermelho) }
tr.n-alerta { background:rgba(246,70,93,.07) }

/* ---------- detalhe da participação num leilão ---------- */
.modal-largo { max-width:760px; width:100% }
.link-leilao {
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--azul); font-family:var(--fonte-num); font-size:inherit;
}
.link-leilao:hover { text-decoration:underline }

/* o "por quê" do valor, embaixo do nome do lançamento */
.lanc-detalhe { display:block; color:var(--fraco); font-size:var(--fs-2xs) }

/* dentro da cabeça parada, as abas não precisam de margem embaixo */
.modal-cabeca .abas { margin-bottom:0 }
.modal-cabeca h2 { margin-bottom:var(--sp-3) }
.modal-cabeca h2:only-child { margin-bottom:0 }


/* o motivo do dividir agora vai dentro do próprio botão */
.secundario:disabled { opacity:.45 }

/* explicação embaixo de cada campo do admin */
.ajuda {
  display:block; margin-top:4px;
  color:var(--fraco); font-size:var(--fs-2xs); line-height:1.35;
}
.ajuda b { color:var(--texto); font-weight:var(--fw-medium) }
.check .ajuda { grid-column:1/-1; margin-top:var(--sp-1) }
.grupo h3 {
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  padding-bottom:var(--sp-2); margin-bottom:var(--sp-3); border-bottom:var(--borda);
}

/* ---------- seções do cadastro de leilão ---------- */
fieldset.grupo {
  border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4); margin:0 0 var(--sp-4);
  background:var(--caixa-2);
}
fieldset.grupo legend {
  padding:0 var(--sp-2); margin-left:calc(var(--sp-2) * -1);
  color:var(--texto); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.06em;
}
/* o que a seção inteira faz, uma frase só, antes dos campos */
.grupo-nota {
  color:var(--fraco); font-size:var(--fs-xs); line-height:var(--lh-base);
  margin-bottom:var(--sp-3);
}

/* O CHECKBOX FICA SOZINHO NA LINHA, acima dos campos.
   Valia so para "fieldset.grupo" — e os blocos de Configuracoes Gerais usam
   "div.grupo", entao ficavam de fora e o dono tinha que reclamar de novo a
   cada bloco novo. Agora vale para qualquer grupo, e para checkbox solto
   dentro de um bloco do admin. */
.grupo .check, .adm > .check {
  display:flex; align-items:flex-start; gap:var(--sp-2);
  margin-bottom:var(--sp-3); cursor:pointer;
  font-size:var(--fs-sm); flex-wrap:wrap;
}
.grupo .check input, .adm > .check input {
  width:16px; height:16px; margin:0; flex:0 0 auto; margin-top:2px;
}
.grupo .check span, .adm > .check span { line-height:1.3 }
.grupo .grade { align-items:start }

/* ---------- o card do leilão, com o que a pessoa precisa saber ---------- */
.lc-rot {
  color:var(--fraco); font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:.06em; margin-top:var(--sp-2);
}
.lc-recursos {
  display:flex; flex-wrap:nowrap; justify-content:center;
  gap:var(--sp-2); margin:var(--sp-2) 0 var(--sp-3);
}
.rec {
  display:inline-flex; align-items:center; justify-content:center; cursor:help;
  flex:0 0 auto; width:32px; height:32px;
  background:var(--caixa-2); border:var(--borda); border-radius:50%;
  color:var(--fraco); line-height:1;
}
.rec i {
  font-style:normal; line-height:1;
  font-size:var(--fs-lg); font-weight:var(--fw-heavy);
  /* pede a versão em texto do símbolo, não a colorida do sistema */
  font-variant-emoji:text;
}
/* letra tem muito mais tinta que um símbolo de traço: alivia o peso e o corpo */
.rec i.ic-letra { font-size:var(--fs-base); font-weight:var(--fw-bold); letter-spacing:.02em }
.placar .rec i.ic-letra { font-size:var(--fs-md) }
.rec:hover { border-color:var(--azul); color:var(--texto); background:var(--caixa) }

.lc-linhas { display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-3) }
.lc-linha {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--fs-xs); color:var(--fraco);
}
.lc-linha b { color:var(--texto); font-family:var(--fonte-num); font-size:var(--fs-sm) }
.lc-linha b.lotado { color:var(--ambar) }

.lc-acao {
  margin-top:auto; text-align:center; border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  letter-spacing:.03em; background:var(--verde); color:var(--fundo);
}
.lc-acao.meu   { background:var(--acao); color:#fff }
.lc-acao.fraco { background:var(--caixa-2); color:var(--fraco); border:var(--borda) }

/* ---------- paginação ---------- */
.paginacao { display:flex; flex-wrap:wrap; gap:var(--sp-1); justify-content:center; margin-top:var(--sp-4) }
.pag {
  min-width:36px; padding:var(--sp-2) var(--sp-3);
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio);
  color:var(--texto); font-size:var(--fs-sm);
}
.pag:hover:not(:disabled) { border-color:var(--azul) }
.pag.atual { background:var(--acao); color:#fff; border-color:var(--azul) }
.pag:disabled { opacity:.4; cursor:default }
.pag-vazio { color:var(--fraco); padding:var(--sp-2) }
.ver-todos { background:none; border:0; color:var(--azul); font-size:var(--fs-sm); padding:0 }
.ver-todos:hover { text-decoration:underline }
#listaFim { display:flex; flex-direction:column; gap:var(--sp-4) }

/* textarea do admin, com a mesma cara dos inputs */
.campo textarea {
  width:100%; padding:var(--sp-2) var(--sp-3); resize:vertical;
  background:#0d1117; color:#e6edf3; border:1px solid #232a34; border-radius:var(--raio);
  font-family:var(--fonte); font-size:var(--fs-sm); line-height:var(--lh-base);
}
.campo textarea:focus { outline:none; border-color:#3b82f6; box-shadow:var(--foco) }
.dica code {
  background:#0d1117; border:1px solid #232a34; border-radius:4px;
  padding:1px 4px; font-family:var(--fonte-num); font-size:var(--fs-2xs);
}

/* como cada um terminou o leilão */
.fim-dividiu   { color:var(--azul) }
.fim-devolvido { color:var(--ambar) }
.fim-fora      { color:var(--fraco) }
.fim-tabela td.pos { color:var(--verde) }

/* botão de ver todos os encerrados: precisa parecer botão */
.bt-ver-todos {
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio);
  color:var(--azul); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3);
  white-space:nowrap;
}
.bt-ver-todos:hover { border-color:var(--azul); background:var(--caixa) }

/* quanta gente falta para o leilão começar */
.lc-falta {
  color:var(--ambar); font-size:var(--fs-2xs); text-align:right;
  margin-top:var(--sp-1);
}
/* o card virou div: precisa continuar clicável */
.leilao-card { cursor:pointer }
.leilao-card:hover { border-color:var(--azul) }
.lc-acao { width:100%; border:0; cursor:pointer }

/* quando o leilão já rola, a linha deixa de ser aviso e vira informação */
.lc-falta.rolando { color:var(--fraco) }

/* enquanto o intervalo entre mensagens não passa */
.frases.esperando button { opacity:.4; cursor:not-allowed }

/* clique automático ligado, ao lado do nome na mesa */
.jog-auto { color:var(--ambar); font-size:var(--fs-xs) }

/* paleta de símbolos seguros na tela de Recursos */
.iconeteca { display:flex; flex-wrap:wrap; gap:4px; margin-top:var(--sp-2) }
.ic-op {
  width:30px; height:30px; line-height:1;
  background:#0d1117; border:1px solid #232a34; border-radius:6px;
  color:#e6edf3; font-size:var(--fs-md); font-weight:var(--fw-bold);
}
.ic-op:hover { border-color:#3b82f6; background:#161b22 }

/* quem fala do lado de fora do leilão */
.chat-fora {
  margin-left:4px; padding:0 5px; border-radius:999px;
  border:1px solid var(--linha); color:var(--fraco);
  font-size:var(--fs-2xs); font-weight:var(--fw-regular);
}

/* punições, na lista e na ficha do usuário */
/* ADMIN → USUÁRIOS: um card por conta, botões à vista, abre no clique */
.u-abas { margin-bottom:var(--sp-3) }
.u-lista { display:grid; gap:var(--sp-2) }
.u-card { background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio); transition:border-color .15s }
.u-card:hover, .u-card.aberto { border-color:var(--fraco) }
.u-card.u-bloq { border-color:color-mix(in srgb, var(--vermelho) 45%, var(--linha)) }
.u-linha { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); cursor:pointer; flex-wrap:wrap }
.u-quem { display:grid; gap:2px; min-width:0; flex:1 1 260px }
.u-quem strong { font-size:var(--fs-base) }
.u-quem small { color:var(--fraco); font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.u-meta { display:grid; gap:2px; text-align:right; font-size:var(--fs-xs); color:var(--fraco) }
.u-cred { font-family:var(--fonte-num); font-size:var(--fs-base); color:var(--texto) }
.u-acoes { display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; flex-wrap:wrap }
.u-seta { width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--fraco); font-size:14px; cursor:pointer; transition:transform .15s }
.u-seta:hover { background:var(--caixa) }
.u-card.aberto .u-seta { transform:rotate(180deg) }
.u-aberto { padding:0 var(--sp-3) var(--sp-3); border-top:1px solid var(--linha); display:grid; gap:var(--sp-3) }
.u-dados { margin-top:var(--sp-3) }
.u-ferramentas { display:flex; gap:var(--sp-2); flex-wrap:wrap }
.u-sub { margin:var(--sp-2) 0 0; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--fraco) }
.u-leiloes { display:grid; gap:var(--sp-2) }
.u-leilao { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-2) var(--sp-3); background:var(--caixa); border:1px solid var(--linha); border-radius:var(--raio); font-size:var(--fs-sm) }
.u-leilao.ganhou { border-color:color-mix(in srgb, var(--verde) 40%, var(--linha)) }
.ul-nome small { color:var(--fraco) }
.ul-quando, .ul-num { color:var(--fraco); font-size:var(--fs-xs) }
.ul-selo { margin-left:auto; padding:2px 8px; border-radius:999px; border:1px solid; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em }
.ul-selo.ganhou { color:var(--verde); border-color:var(--verde) }
.ul-selo.perdeu { color:var(--fraco); border-color:var(--linha) }
.ul-selo.cancelado { color:#f0883e; border-color:#f0883e }
.ul-selo.andamento { color:var(--ambar); border-color:var(--ambar) }
.u-excluir:hover { color:var(--vermelho); border-color:var(--vermelho) }
.pill-bloq {
  background:var(--vermelho); color:#fff; border-radius:999px;
  padding:1px var(--sp-2); font-size:var(--fs-2xs); margin-left:var(--sp-1);
}
.pill-mudo {
  border:1px solid var(--ambar); color:var(--ambar); border-radius:999px;
  padding:0 var(--sp-2); font-size:var(--fs-2xs); margin-left:var(--sp-1);
}
.alerta-txt { color:var(--ambar) }

/* ================= COMO FUNCIONA (página) =================
   Era um popup. Virou página com endereço próprio, então precisa de ar:
   coluna única, texto largo o bastante para ler e cair bem no celular. */

.ajuda-capa h2 { margin-bottom: var(--sp-2) }
.ajuda-frase {
  color: var(--fraco); font-size: var(--fs-base); line-height: 1.6; max-width: 60ch; margin: 0;
}
.ajuda-nota { color: var(--fraco); font-size: var(--fs-sm); margin: 0 0 var(--sp-4) }

/* vídeo: moldura 16:9 que segura o espaço mesmo vazia */
.ajuda-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--caixa-2); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.ajuda-video iframe, .ajuda-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  background: #000;
}
/* A ASSISTENTE dentro da caixa do vídeo (avatar.js) */
.av-caixa { background:#03110a }
.av-tela { position:absolute; inset:0; width:100%; height:100%; display:block }
.av-legenda {
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  max-width:86%; padding:.5em .9em; border-radius:var(--raio);
  background:rgba(2,20,10,.72); color:#d6ffb8; font-size:clamp(13px, 1.9vw, 22px);
  line-height:1.35; text-align:center; pointer-events:none;
}
.av-legenda:empty { display:none }
.av-controles { position:absolute; top:var(--sp-2); right:var(--sp-2); display:flex; gap:var(--sp-2); z-index:3 }
/* enquanto ela lê, os botões somem (clicar nela para); e quando ela sai
   para acompanhar um card, a caixa fica escura no lugar */
.av-caixa.av-ocupada .av-controles { display:none }
.av-caixa.av-fora { background:#020c07 }
/* a carinha solta: sem quadro, sem fundo — só ela, balançando devagar */
.av-flutuante {
  position:fixed; z-index:60; overflow:visible; background:transparent; cursor:pointer;
  animation:av-flutua 3.6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(120,255,140,.35));
}
@keyframes av-flutua { 0%,100% { transform:translateY(0) rotate(-1.5deg) } 50% { transform:translateY(-12px) rotate(1.5deg) } }
.av-flutuante .av-tela { position:absolute; inset:0; width:100%; height:100% }
.av-bt {
  background:rgba(2,20,10,.7); color:#bfffa0; border:1px solid rgba(160,255,150,.45);
  border-radius:999px; padding:4px 10px; font-size:var(--fs-xs); cursor:pointer; font-family:inherit;
}
.av-bt:hover { background:rgba(2,40,18,.9); color:#fff }
.av-bt:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(160,255,150,.35) }
.av-toque {
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); background:rgba(2,12,6,.55); color:#e6ffd0; border:0; cursor:pointer;
  font-family:inherit; font-size:clamp(14px, 2vw, 20px);
}
.av-toque-ic {
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(160,255,150,.18); border:2px solid rgba(160,255,150,.7); font-size:26px;
  animation:av-pulsa 1.6s ease-in-out infinite;
}
@keyframes av-pulsa { 0%,100% { transform:scale(1) } 50% { transform:scale(1.08) } }
.av-caixa:fullscreen { border-radius:0; border:0; aspect-ratio:auto; width:100vw; height:100vh }
.av-caixa:fullscreen .av-legenda { font-size:clamp(18px, 2.4vw, 34px); bottom:10% }
.av-caixa:fullscreen .av-bt { font-size:var(--fs-sm); padding:8px 16px }

.ajuda-video-vazio {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3);
  color: var(--fraco); font-size: var(--fs-sm); text-align: center; padding: var(--sp-4);
}
.avv-ic {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--caixa);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--verde);
}

/* os quatro passos, numerados pelo próprio CSS */
.ajuda-passos {
  list-style: none; counter-reset: passo; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ajuda-passos li {
  counter-increment: passo; position: relative;
  background: var(--caixa-2); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--sp-4); padding-top: calc(var(--sp-4) + 18px);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.ajuda-passos li::before {
  content: counter(passo);
  position: absolute; top: var(--sp-3); left: var(--sp-4);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde); color: var(--fundo);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700;
}
.ajuda-passos li b { color: var(--texto); font-size: var(--fs-base) }
/* a voz: o botão "ouvir" e o pedaço aceso enquanto fala */
.bt-ouvir {
  align-self: flex-start; margin-top: auto;
  background: transparent; border: 1px solid var(--linha); color: var(--fraco);
  border-radius: 999px; padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer;
  font-family: inherit; line-height: 1.4; white-space: nowrap;
}
.bt-ouvir:hover { color: var(--texto); border-color: var(--acao) }
.bt-ouvir:focus-visible { outline: none; box-shadow: var(--foco) }
.ajuda-regra h3 .bt-ouvir { margin-left: auto; margin-top: 0 }
.ajuda-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap }
.bt-ouvir-tudo { font-size: var(--fs-sm); padding: 6px 14px; color: var(--texto); border-color: var(--acao) }
.ajuda-passos li.falando, .ajuda-regra.falando { border-color: var(--acao); box-shadow: var(--foco) }
.bt-ouvir-tudo.falando { background: var(--acao); color: #fff }
.ajuda-passos li span { color: var(--fraco); font-size: var(--fs-sm); line-height: 1.5 }

/* as regras: cada uma na sua caixa, com o ícone que a pessoa já viu no card */
.ajuda-regras {
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ajuda-regra {
  background: var(--caixa-2); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--sp-4);
}
.ajuda-regra h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-3); font-size: var(--fs-base); color: var(--texto);
}
.ar-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--caixa); border: 1px solid var(--linha); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); line-height: 1;
}
.ajuda-regra p {
  margin: 0 0 var(--sp-2); color: var(--fraco);
  font-size: var(--fs-sm); line-height: 1.6;
}
.ajuda-regra p:last-child { margin-bottom: 0 }
.ajuda-regra b { color: var(--texto) }

/* perguntas: abre e fecha sem JavaScript nenhum */
.ajuda-faq { display: flex; flex-direction: column; gap: var(--sp-2) }
.ajuda-faq details {
  background: var(--caixa-2); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.ajuda-faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base); color: var(--texto);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 44px;
}
.ajuda-faq summary::-webkit-details-marker { display: none }
.ajuda-faq summary::after {
  content: "+"; flex: none; color: var(--fraco); font-size: var(--fs-lg); line-height: 1;
}
.ajuda-faq details[open] summary::after { content: "−" }
.ajuda-faq details[open] summary { color: var(--verde) }
.ajuda-faq summary:hover { background: var(--caixa) }
.ajuda-faq p {
  margin: 0; padding: 0 var(--sp-4) var(--sp-4);
  color: var(--fraco); font-size: var(--fs-sm); line-height: 1.6;
}
.ajuda-faq b { color: var(--texto) }

.ajuda-fim { text-align: center }
.ajuda-fim p { color: var(--fraco); font-size: var(--fs-sm); margin: 0 0 var(--sp-4) }
.ajuda-fim .botao { max-width: 320px; margin: 0 auto }

@media (max-width: 600px) {
  .ajuda-regras, .ajuda-passos { grid-template-columns: 1fr }
}

/* ===== admin: editor da página "como funciona" ===== */
.grupo-topo { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) }
.grupo-topo h3 { margin:0 }

.ajuda-itens { display:flex; flex-direction:column; gap:var(--sp-3) }
.aj-item {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3);
}
.aj-item-topo {
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2);
}
.aj-num {
  flex:none; min-width:24px; height:24px; padding:0 6px; border-radius:12px;
  background:var(--linha); color:var(--fraco);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700;
}
.aj-item-topo .aj-espaco { flex:1 }
.aj-bt {
  flex:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
  background:var(--caixa); border:1px solid var(--linha); color:var(--fraco);
  font-size:var(--fs-sm); line-height:1;
}
.aj-bt:hover { color:var(--texto); border-color:var(--fraco) }
.aj-bt.tirar:hover { color:var(--vermelho); border-color:var(--vermelho) }
.aj-bt:disabled { opacity:.3; cursor:default }
.aj-item .campo + .campo { margin-top:var(--sp-2) }
.aj-icone { width:80px }

.video-caixa { display:flex; flex-direction:column; gap:var(--sp-3) }
.video-envio { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) }
.video-envio input[type=file] { flex:1; min-width:200px; color:var(--fraco); font-size:var(--fs-sm) }
.barra-envio {
  margin-top:var(--sp-2); height:8px; border-radius:4px;
  background:var(--linha); overflow:hidden;
}
.barra-envio span { display:block; height:100%; width:0; background:var(--verde); transition:width .2s }
.ajuda-previa { margin-top:var(--sp-3) }
.ajuda-previa video, .ajuda-previa iframe {
  width:100%; max-width:420px; aspect-ratio:16/9; border:1px solid var(--linha);
  border-radius:var(--raio); background:#000; display:block;
}
.ajuda-previa .sem { color:var(--fraco); font-size:var(--fs-sm) }

/* ===== admin: painel do dinheiro ===== */
.mt-cartoes {
  display:grid; gap:var(--sp-3); margin-top:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.mt-cartao {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1);
  min-width:0;
}
.mt-cartao.forte { border-color:var(--verde) }
.mt-rot { color:var(--fraco); font-size:var(--fs-xs); text-transform:lowercase }
.mt-val {
  font-family:var(--fonte-num); font-size:var(--fs-xl); color:var(--texto);
  line-height:1.15; word-break:break-word;
}
.mt-cartao.forte .mt-val { color:var(--verde) }
.mt-nota { color:var(--fraco); font-size:var(--fs-xs); line-height:1.4 }

.mt-grafico { margin:var(--sp-3) 0 }
.mt-svg { width:100%; height:220px; display:block }
.mt-svg-barra { width:100%; height:26px; display:block; border-radius:6px; overflow:hidden }
.mt-linha { stroke:var(--linha); stroke-width:1 }
.mt-dia { fill:var(--fraco); font-size:11px }
.mt-vazio { color:var(--fraco); font-size:var(--fs-sm); margin:var(--sp-3) 0 }

.mt-legenda {
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  margin-top:var(--sp-2); color:var(--fraco); font-size:var(--fs-xs);
}
.mt-leg { display:inline-flex; align-items:center; gap:6px }
.mt-leg i { width:10px; height:10px; border-radius:3px; display:inline-block }
.mt-leg b { color:var(--texto) }
.mt-leg-max { margin-left:auto }
.mt-ponto {
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px;
  vertical-align:middle;
}
.mt-sub { margin:var(--sp-5) 0 0; font-size:var(--fs-base); color:var(--fraco) }

.mt-barrinha-cel { width:120px }
.mt-barrinha {
  display:block; height:8px; border-radius:4px; background:var(--linha); overflow:hidden;
}
.mt-barrinha i { display:block; height:100%; background:var(--verde) }

@media (max-width:600px) {
  .mt-svg { height:180px }
  .mt-cartoes { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }
}

/* a bolinha que pisca no bloco "acontecendo agora" */
.mt-pisca {
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--verde); margin-right:8px; vertical-align:middle;
  animation:mtPisca 1.6s ease-in-out infinite;
}
@keyframes mtPisca { 0%,100% { opacity:1 } 50% { opacity:.25 } }
.mt-check { padding:0; margin:0; font-size:var(--fs-sm) }
@media (prefers-reduced-motion:reduce) { .mt-pisca { animation:none } }

/* O conteúdo que o servidor escreve para quem não roda JavaScript.
   O app apaga assim que assume a tela; quem vê isto é buscador, prévia de
   link, e a pessoa que está com o JavaScript desligado. */
.sem-js:not(:empty) {
  background:var(--caixa); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-5); margin-bottom:var(--sp-5); line-height:1.6;
}
.sem-js h1 { font-size:var(--fs-xl); margin:0 0 var(--sp-3) }
.sem-js h2 { font-size:var(--fs-base); margin:var(--sp-5) 0 var(--sp-2) }
.sem-js h3 { font-size:var(--fs-sm); margin:var(--sp-4) 0 var(--sp-1); color:var(--fraco) }
.sem-js p, .sem-js li { color:var(--fraco); font-size:var(--fs-sm) }
.sem-js a { color:var(--azul) }

/* ===== admin: busca / SEO ===== */
.seo-lista { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3) }
.seo-item {
  display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3);
}
.seo-item > div { display:flex; flex-direction:column; gap:2px; min-width:0 }
.seo-item strong { font-size:var(--fs-sm); color:var(--texto) }
.seo-item span { font-size:var(--fs-xs); color:var(--fraco); line-height:1.5; word-break:break-word }
.seo-ic {
  flex:none; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700;
}
.seo-item.ok      .seo-ic { background:var(--verde); color:var(--fundo) }
.seo-item.falta   .seo-ic { background:var(--vermelho); color:#fff }
.seo-item.falta   { border-color:var(--vermelho) }
.seo-item.atencao .seo-ic { background:var(--ambar); color:var(--fundo) }
.seo-longo { color:var(--vermelho) }

.seo-previa { margin-top:var(--sp-3) }
.seo-previa img {
  width:100%; max-width:380px; aspect-ratio:1200/630; object-fit:cover;
  border:1px solid var(--linha); border-radius:var(--raio); display:block; background:var(--caixa-2);
}
.seo-previa .sem { color:var(--fraco); font-size:var(--fs-sm) }
.seo-arquivos { display:flex; gap:var(--sp-3); margin-top:var(--sp-2) }
.seo-arquivos a { color:var(--azul); font-size:var(--fs-sm) }

/* ===== minha conta: de onde veio o crédito ===== */
.conta-credito {
  display:grid; gap:var(--sp-2); margin-top:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.cc-item {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3);
}
.cc-rot { color:var(--fraco); font-size:var(--fs-sm) }
.cc-val { font-family:var(--fonte-num); font-size:var(--fs-base); white-space:nowrap }
.cc-val.pos { color:var(--verde) }
.cc-val.neg { color:var(--vermelho) }
.cc-val.cortesia { color:var(--ambar) }

/* ===== minha conta: a lista de leilões ===== */
.conta-leiloes { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3) }
.conta-leilao {
  display:flex; align-items:center; gap:var(--sp-3); width:100%; cursor:pointer;
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3); text-align:left; color:var(--texto); min-height:52px;
}
.conta-leilao:hover { border-color:var(--fraco) }
.cl-num {
  flex:none; font-family:var(--fonte-num); font-size:var(--fs-base); color:var(--texto);
  min-width:56px;
}
.cl-meio { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0 }
.cl-quando { color:var(--fraco); font-size:var(--fs-xs) }
.cl-marca { font-size:var(--fs-xs); color:var(--fraco) }
.cl-marca.s-venceu    { color:var(--verde) }
.cl-marca.s-dividido  { color:var(--azul) }
.cl-marca.s-cancelado { color:var(--ambar) }
.cl-marca.s-agora     { color:var(--verde) }
.cl-dir { flex:none; display:flex; align-items:center; gap:var(--sp-2) }
.cl-res { font-family:var(--fonte-num); font-size:var(--fs-sm); white-space:nowrap }
.cl-res.pos { color:var(--verde) }
.cl-res.neg { color:var(--vermelho) }
.cl-seta { color:var(--fraco); font-size:var(--fs-lg); line-height:1 }
.conta-vazio { color:var(--fraco); font-size:var(--fs-sm); margin:var(--sp-3) 0 0 }
.conta-mais { margin-top:var(--sp-3); text-align:center }

/* ===== minha conta: os dois saldos ===== */
.saldos {
  display:grid; gap:var(--sp-3); margin-top:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.saldo-caixa {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
}
.saldo-caixa.s-jogo    { border-color:var(--azul) }
.saldo-caixa.s-sacavel { border-color:var(--verde) }
.sc-rot { color:var(--fraco); font-size:var(--fs-sm) }
.sc-val { font-family:var(--fonte-num); font-size:var(--fs-2xl); line-height:1.1 }
.s-jogo    .sc-val { color:var(--azul) }
.s-sacavel .sc-val { color:var(--verde) }
.sc-nota { color:var(--fraco); font-size:var(--fs-xs); line-height:1.5; flex:1 }
.sc-acoes { display:flex; gap:var(--sp-2); flex-wrap:wrap }
.sc-acoes .botao, .saldo-caixa .botao {
  min-height:40px; font-size:var(--fs-sm); border-radius:var(--raio);
  background:var(--caixa); color:var(--texto); border:1px solid var(--linha); flex:1;
}
.sc-acoes .botao:hover:not(:disabled) { border-color:var(--verde); color:var(--verde) }
.saldo-caixa .botao.cta { background:var(--acao); color:#fff; border-color:var(--azul) }
.saldo-caixa .botao:disabled { opacity:.45; cursor:default }

.conta-sub { font-size:var(--fs-sm); color:var(--fraco); margin:var(--sp-4) 0 var(--sp-2) }
.conta-saques { display:flex; flex-direction:column; gap:var(--sp-2) }
.saque-linha {
  display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm);
}
.saque-linha strong { font-family:var(--fonte-num) }
.sq-quando { color:var(--fraco); font-size:var(--fs-xs) }
.sq-estado { margin-left:auto; font-size:var(--fs-xs); color:var(--fraco) }
.saque-linha.s-pedido   { border-color:var(--ambar) }
.saque-linha.s-pedido   .sq-estado { color:var(--ambar) }
.saque-linha.s-pago     .sq-estado { color:var(--verde) }
.saque-linha.s-recusado .sq-estado { color:var(--vermelho) }
/* SEUS PIX: cards com selo colorido; abrem no clique */
.pix-item {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3); cursor:pointer; transition:border-color .15s;
}
.pix-item:hover, .pix-item:focus-visible { border-color:var(--fraco); outline:none }
.pix-item.aberto { border-color:var(--fraco) }
.pix-linha { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap }
.pix-linha strong { font-family:var(--fonte-num); font-size:var(--fs-base) }
.pix-selo {
  margin-left:auto; padding:3px 10px; border-radius:999px; border:1px solid;
  font-size:var(--fs-2xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.pix-selo-verde    { color:var(--verde);    border-color:var(--verde);    background:color-mix(in srgb, var(--verde) 14%, transparent) }
.pix-selo-amarelo  { color:var(--ambar);    border-color:var(--ambar);    background:color-mix(in srgb, var(--ambar) 14%, transparent) }
.pix-selo-vermelho { color:var(--vermelho); border-color:var(--vermelho); background:color-mix(in srgb, var(--vermelho) 14%, transparent) }
.pix-selo-laranja  { color:#f0883e;         border-color:#f0883e;         background:color-mix(in srgb, #f0883e 14%, transparent) }
.pix-selo-azul     { color:var(--azul);     border-color:var(--azul);     background:color-mix(in srgb, var(--azul) 14%, transparent) }
.pix-selo-cinza    { color:var(--fraco);    border-color:var(--linha);    background:transparent }
.pix-seta { color:var(--fraco); font-size:12px; transition:transform .15s }
.pix-item.aberto .pix-seta { transform:rotate(180deg) }
.pix-detalhe { margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--linha); display:grid; gap:var(--sp-2) }
.pd-linha { display:grid; grid-template-columns:110px 1fr; gap:var(--sp-3); font-size:var(--fs-sm); align-items:baseline }
.pd-rotulo { color:var(--fraco); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em }
.pd-valor { overflow-wrap:anywhere }
.pd-verde { color:var(--verde) }
.pd-amarelo { color:var(--ambar) }
@media (max-width:480px) { .pd-linha { grid-template-columns:1fr } }
.pix-devolucao.dv-ok { color:var(--verde) }
.pix-devolucao.dv-espera { color:var(--ambar) }
.saque-linha.s-pendente .sq-estado { color:var(--ambar) }

.mv-atalhos { display:flex; gap:var(--sp-2); margin:var(--sp-2) 0 }
.mv-atalho {
  flex:1; min-height:36px; cursor:pointer; font-size:var(--fs-sm);
  background:var(--caixa-2); color:var(--fraco);
  border:1px solid var(--linha); border-radius:var(--raio);
}
.mv-atalho:hover { border-color:var(--verde); color:var(--verde) }
#mvConfirmar { background:var(--verde); color:var(--fundo); flex:2 }
#mvCancelar  { background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); flex:1 }
#mvConfirmar:disabled { opacity:.45; cursor:default }

/* ===== admin: fila de saques ===== */
.lado-selo {
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; margin-left:6px; border-radius:9px;
  background:var(--vermelho); color:#fff; font-size:11px; font-weight:700;
}
/* OS FILTROS ROLAM DE LADO em vez de sair da tela.
   São sete botões; num celular eles não cabem em linha nenhuma, e quebrando
   em duas ou três linhas comem a altura que falta. Rolando na horizontal, eles
   ficam todos alcançáveis sem empurrar nada para baixo. */
.filtro-saque {
  display:flex; gap:var(--sp-2); overflow-x:auto; flex-wrap:nowrap;
  max-width:100%; padding-bottom:2px; scrollbar-width:thin;
}
.filtro-saque .bt { flex:0 0 auto; white-space:nowrap }
.filtro-saque .bt.ativo { background:var(--acao); color:#fff }
.saques-lista { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3) }
.saque-caixa {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-4);
}
.saque-caixa.sq-esperando { border-color:var(--ambar) }
.saque-caixa.sq-pago      { opacity:.7 }
.saque-caixa.sq-recusado  { opacity:.7 }
.sqa-topo { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap }
.sqa-valor { font-family:var(--fonte-num); font-size:var(--fs-lg); color:var(--texto) }
.sqa-quem { color:var(--fraco); font-size:var(--fs-sm) }
.sqa-estado { margin-left:auto; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em }
.sq-esperando .sqa-estado { color:var(--ambar) }
.sq-pago      .sqa-estado { color:var(--verde) }
.sq-recusado  .sqa-estado { color:var(--vermelho) }
.sqa-dados {
  display:grid; gap:var(--sp-1) var(--sp-4); margin-top:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  font-size:var(--fs-sm); color:var(--fraco);
}
.sqa-dados b { color:var(--texto); font-weight:400; margin-right:4px }
.sqa-acoes { display:flex; gap:var(--sp-2); margin-top:var(--sp-4); flex-wrap:wrap }

/* "tudo" é um botão que resolve sozinho; embaixo dele fica a opção de parte */
.mv-tudo {
  width:100%; min-height:48px; cursor:pointer; font-size:var(--fs-base);
  background:var(--verde); color:var(--fundo); border:0; border-radius:var(--raio);
  font-weight:var(--fw-bold);
}
.mv-tudo:hover:not(:disabled) { filter:brightness(1.08) }
.mv-tudo:disabled { opacity:.4; cursor:default }
.mv-ou {
  display:flex; align-items:center; gap:var(--sp-3);
  color:var(--fraco); font-size:var(--fs-xs); margin:var(--sp-4) 0;
}
.mv-ou::before, .mv-ou::after {
  content:""; flex:1; height:1px; background:var(--linha);
}

/* o servidor no ar é mais velho que os arquivos: isso não pode passar batido */
.alerta-velho {
  border:1px solid var(--vermelho) !important;
  background:var(--ambar-suave) !important;
}
.alerta-velho strong { color:var(--vermelho); font-size:var(--fs-base) }
.msg-abas, .cfg-abas { margin-bottom:var(--sp-3) }
.msg-abas .lado-selo { margin-left:6px }
.alerta-velho p { color:var(--texto); font-size:var(--fs-sm); margin:var(--sp-2) 0 0; line-height:1.6 }

/* a caixa de mover: cada pedaço com o seu ar, e a ajuda longe dos botões */
#modalMover .campo { margin-bottom:var(--sp-3) }
#modalMover .campo .ajuda { display:block; margin-top:var(--sp-2) }
#modalMover .modal-botoes { margin-top:var(--sp-5) }
#modalMover .modal-aviso { margin-top:var(--sp-3) }

/* "tem certeza?" toma o lugar do resto enquanto está na tela */
.mv-certeza {
  background:var(--caixa); border:1px solid var(--ambar); border-radius:var(--raio);
  padding:var(--sp-4); margin-top:var(--sp-2);
}
.mv-certeza p {
  margin:0; color:var(--texto); font-size:var(--fs-sm); line-height:1.6;
}
.mv-certeza .modal-botoes { margin-top:var(--sp-4) }
#mvSim { background:var(--verde); color:var(--fundo); flex:2 }
#mvNao { background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); flex:1 }

/* a coluna "parcial ou total" da lista de conversões */
.conv-marca {
  display:inline-block; padding:1px 8px; border-radius:10px;
  font-size:var(--fs-xs); border:1px solid var(--linha);
}
.conv-marca.total   { color:var(--ambar); border-color:var(--ambar) }
.conv-marca.parcial { color:var(--fraco) }
.conv-nome { display:block; color:var(--fraco); font-size:var(--fs-xs) }

/* AS CAIXAS DE DENTRO DE UMA SEÇÃO TAMBÉM PRECISAM DE AR.
   O espaçamento estava só no container das seções, então uma seção com uma
   caixa só ficava certa e o Painel, com dez, saía tudo grudado — uma borda
   encostada na outra, sem nada separando. */
.secao {
  display:flex; flex-direction:column; gap:var(--sp-4);
}
/* o mesmo do lado do jogador: /conta tem várias caixas seguidas */
#contaPagina, #ajudaPagina, #comprarPagina, #fimPagina, #listaFim, #salao {
  display:flex; flex-direction:column; gap:var(--sp-4);
}

/* ===== admin: pacotes de recarga ===== */
.pacotes-lista { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3) }
.pacote-linha {
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3);
}
.pct-nome { min-width:120px; color:var(--fraco); font-size:var(--fs-sm) }
.pct-valor {
  flex:1; min-width:0; height:var(--h);
  background:var(--fundo); border:var(--borda); border-radius:var(--raio);
  color:var(--texto); padding:0 var(--sp-3); font-size:var(--fs-base);
  font-family:var(--fonte-num);
}

/* saque que ainda espera a janela de pagamento abrir */
.saque-caixa.sq-pendente { border-color:var(--linha); opacity:.85 }
.sq-pendente .sqa-estado { color:var(--fraco) }
.saque-linha.s-pendente { border-color:var(--linha) }
.saque-linha.s-pendente .sq-estado { color:var(--fraco) }

/* ---------- CONFIRMAR O CPF ----------
   Os botões seguem o mesmo desenho do modal de mover saldo, que é o padrão da
   casa: o principal em verde, o secundário na cor da caixa com borda fina.
   Sem isso eles saíam com o cinza cru do navegador — sem cor declarada, o
   ".botao" só define forma, não cor. */
#cpfModal .modal-botoes { margin-top:var(--sp-5) }
#cpf_confirmar { background:var(--verde); color:var(--fundo); flex:2 }
#cpf_cancelar  { background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); flex:1 }
#cpf_confirmar:hover { filter:brightness(1.08) }
#cpf_confirmar:disabled { opacity:.45; cursor:default }
#cpfModal .campo { margin-bottom:var(--sp-3) }
#cpfModal .cpf-estado { margin-top:var(--sp-3) }

/* ---------- ESCREVER O DEPOIMENTO ----------
   mesmo desenho, mesma razão */
.dep-form .acao { display:flex; gap:var(--sp-3); margin-top:var(--sp-4) }
#cDepEnviar    { background:var(--verde); color:var(--fundo); flex:2 }
#cDepCancelar  { background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); flex:1 }
#cDepEnviar:hover { filter:brightness(1.08) }
#cDepEnviar:disabled { opacity:.45; cursor:default }
.dep-convite .acao { display:flex; align-items:center; gap:var(--sp-3) }
#cDepEscrever {
  width:auto; min-height:38px; padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm); border-radius:var(--raio);
  background:var(--verde); color:var(--fundo);
}
#cDepEscrever:hover { filter:brightness(1.08) }

/* A ISCA CONTRA ROBÔ.
   Fora da tela em vez de display:none, e sem type="hidden": robô bom pula
   campo declarado escondido, mas não tem como saber que este saiu do quadro —
   ele não desenha a página, só lê o HTML. O height:0 é o que impede a caixa
   do formulário de crescer com um campo que ninguém vê. */
/* "input.isca" e não só ".isca": a regra ".conta-form input", lá em cima, tem
   a mesma força e ganharia por vir antes — e a isca aparecia no formulário de
   cadastro como uma caixa vazia, empurrando o aceite dos Termos para fora da
   tela. Foi assim que ela apareceu na tela do dono. */
input.isca, .isca {
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  opacity:0 !important; background:transparent !important;
  pointer-events:none;
}

/* o resultado da conferência do CPF, embaixo do campo */
.cpf-estado {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); line-height:1.5; margin-top:calc(var(--sp-2) * -1);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--raio);
  border:1px solid var(--linha); background:var(--caixa-2); color:var(--fraco);
}
.cpf-estado.conferindo { color:var(--fraco) }
.cpf-estado.certo   { border-color:var(--verde);    color:var(--verde) }
.cpf-estado.errado  { border-color:var(--vermelho); color:var(--vermelho) }
.cpf-estado.aviso   { border-color:var(--ambar);    color:var(--ambar) }

/* o aviso de que a conferência de CPF não está conferindo nada */
.verif-alerta {
  margin:var(--sp-3) 0; padding:var(--sp-3);
  border:1px solid var(--ambar); border-left-width:4px; border-radius:var(--raio);
  background:var(--caixa-2); color:var(--texto); font-size:var(--fs-sm); line-height:1.6;
}

/* de qual fornecedor veio cada consulta, e quanto ele custou */
.verif-fornecedores { margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2) }
.verif-forn {
  padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--verde);
  background:var(--caixa-2); border-radius:var(--raio); font-size:var(--fs-sm); color:var(--texto);
}
.verif-forn.inventado { border-left-color:var(--fraco); color:var(--fraco) }

/* =========================================================
   BARRA DE ROLAGEM
   A do sistema entra com 17px de largura e cor de janela do Windows: num modal
   escuro de 440px ela come 4% da largura e aparece mais que o conteúdo. Fina e
   discreta, ela continua servindo para arrastar e para mostrar onde a pessoa
   está — que é tudo o que ela precisa fazer.
   ========================================================= */
.modal-corpo, .conteudo-corpo, .rolagem {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: var(--linha) transparent;
}
.modal-corpo::-webkit-scrollbar,
.conteudo-corpo::-webkit-scrollbar,
.rolagem::-webkit-scrollbar { width:8px; height:8px }

.modal-corpo::-webkit-scrollbar-track,
.conteudo-corpo::-webkit-scrollbar-track,
.rolagem::-webkit-scrollbar-track { background:transparent }

.modal-corpo::-webkit-scrollbar-thumb,
.conteudo-corpo::-webkit-scrollbar-thumb,
.rolagem::-webkit-scrollbar-thumb {
  background:var(--linha); border-radius:99px;
}
.modal-corpo::-webkit-scrollbar-thumb:hover,
.conteudo-corpo::-webkit-scrollbar-thumb:hover,
.rolagem::-webkit-scrollbar-thumb:hover { background:var(--fraco) }

/* linha de extrato que não moveu dinheiro (a confirmação do saque pago) */
td.nada { color:var(--fraco) }

/* botão que é só um link (esqueci a senha, voltar) — dentro do formulário */
/* A COR DO TEXTO, NAO A DO LINK. O azul do tema e escuro, e em fundo escuro
   sumia: "esqueci a senha" ficava um borrao apagado no meio do formulario.
   Quem diz que da para clicar e a setinha, nao um sublinhado. */
.link-magro {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  background:none !important; border:0; margin:0 !important; padding:var(--sp-2) 0;
  height:auto !important; color:var(--texto); font-size:var(--fs-sm); cursor:pointer;
  font-weight:var(--fw-regular); filter:none !important;
}
.seta { color:var(--fraco); transition:transform .15s ease, color .15s ease }
.link-magro:hover { color:var(--azul) }
/* o mesmo botão-link, mas dentro de uma frase */
.link-magro.link-linha { display:inline; padding:0; color:var(--azul); text-decoration:underline }
.link-magro:hover .seta { color:var(--azul) }
/* a seta anda para o lado que ela aponta */
#btEsqueci:hover .seta      { transform:translateX(3px) }
#btVoltarLogin:hover .seta  { transform:translateX(-3px) }

/* ajuda que virou aviso: a combinação escolhida não vai funcionar */
.ajuda-ruim { color:var(--vermelho) !important }

/* cancelar o próprio pedido de saque, na linha dele */
.sq-cancelar {
  margin-left:auto; padding:2px var(--sp-2);
  background:transparent; border:1px solid var(--linha); border-radius:var(--raio);
  color:var(--fraco); font-size:var(--fs-xs); cursor:pointer;
}
.sq-cancelar:hover:not(:disabled) { border-color:var(--vermelho); color:var(--vermelho) }
.sq-cancelar:disabled { opacity:.4; cursor:default }
.saque-linha.sq-cancelado { opacity:.6 }

/* a fila de depoimentos no admin */
.adm-dep { background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
           padding:var(--sp-3); margin-bottom:var(--sp-3) }
.adm-dep-topo { display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:baseline;
                font-size:var(--fs-xs); color:var(--fraco); margin-bottom:var(--sp-2) }
.adm-dep-estado { margin-left:auto; font-weight:var(--fw-medium) }
.adm-dep-texto { margin:0 0 var(--sp-3); line-height:var(--lh-loose) }
.adm-dep-motivo { background:var(--fundo); color:var(--texto); border:var(--borda);
                  border-radius:var(--raio); padding:2px var(--sp-2) }
.adm-dep.e-pendente { border-color:var(--ambar) }
.adm-dep.e-recusado { opacity:.65 }

/* =========================================================
   DEPOIMENTOS
   A palavra de quem ganhou. O texto é o protagonista; os números
   ao lado do apelido são discretos de propósito — eles conferem
   o que foi dito, não competem com ele.
   ========================================================= */
.dep-lista { display:grid; gap:var(--sp-3) }
.dep-item {
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4);
}
.dep-texto { margin:0; line-height:var(--lh-loose) }
.dep-pe {
  display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--linha);
}
.dep-quem  { font-weight:var(--fw-medium) }
.dep-fatos { color:var(--fraco); font-size:var(--fs-xs) }
.dep-link {
  margin-top:var(--sp-2); padding:0; background:transparent; border:0;
  color:var(--azul); font-size:var(--fs-sm); cursor:pointer;
}
.dep-link:hover { text-decoration:underline }

/* na página do leilão: o aviso de que o depoimento ainda pode vir.
   Ele tem PRAZO (ver depoimentos.js) — sem isso a palavra "aguardando"
   viraria mentira depois de alguns meses. */
.dep-aguardando { margin:0; color:var(--fraco); font-size:var(--fs-sm) }

/* o convite e o formulário, na conta */
.dep-convite {
  background:var(--verde-suave); border-left:3px solid var(--verde);
  border-radius:var(--raio); padding:var(--sp-3); margin-bottom:var(--sp-3);
}
.dep-convite p { margin:0 0 var(--sp-2) }
.dep-form textarea {
  width:100%; resize:vertical; font-family:inherit; font-size:var(--fs-base);
  background:var(--fundo); color:var(--texto);
  border:var(--borda); border-radius:var(--raio); padding:var(--sp-2) var(--sp-3);
}
.dep-meus { display:grid; gap:var(--sp-3); margin-top:var(--sp-3) }
.dep-meu {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3); font-size:var(--fs-sm);
}
.dep-meu-topo {
  display:flex; justify-content:space-between; gap:var(--sp-2);
  font-size:var(--fs-xs); color:var(--fraco); margin-bottom:var(--sp-2);
}
.dep-estado { font-weight:var(--fw-medium) }
.dep-meu.d-pendente  { border-color:var(--ambar) }
.dep-meu.d-pendente  .dep-estado { color:var(--ambar) }
.dep-meu.d-publicado .dep-estado { color:var(--verde) }
.dep-meu.d-recusado  { border-color:var(--vermelho) }
.dep-meu.d-recusado  .dep-estado { color:var(--vermelho) }
.dep-motivo { margin:var(--sp-2) 0 0; color:var(--vermelho); font-size:var(--fs-xs) }
.dep-acoes { display:flex; gap:var(--sp-3); margin-top:var(--sp-2) }
.dep-acoes .link-magro { font-size:var(--fs-xs) }
.dep-acoes .perigo { color:var(--vermelho) }

/* =========================================================
   AS FAIXAS DE VALOR
   Uma aba por valor de clique que existe no ar. Rola de lado no celular em
   vez de quebrar em duas linhas — com quatro ou cinco faixas isso empurraria
   os leilões para baixo da dobra, que é o lugar onde ninguém olha.
   ========================================================= */
.faixas {
  display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4);
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.faixas::-webkit-scrollbar { display:none }
.faixa {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--caixa); border:var(--borda); border-radius:999px;
  color:var(--fraco); font-size:var(--fs-sm); cursor:pointer; white-space:nowrap;
}
.faixa:hover { color:var(--texto); border-color:var(--fraco) }
.faixa.ativa {
  background:var(--caixa-2); border-color:var(--verde); color:var(--texto);
  font-weight:var(--fw-medium);
}
.faixa-n {
  min-width:18px; padding:0 5px; border-radius:999px;
  background:var(--linha); color:var(--fraco);
  font-size:var(--fs-2xs); font-family:var(--fonte-num); text-align:center;
}
.faixa.ativa .faixa-n { background:var(--verde-suave); color:var(--verde) }

/* O DIVIDIR, QUANDO LIBERA.
   Travado ele é um aviso do que falta; liberado ele é uma janela de poucos
   segundos. Com a mesma cara nos dois estados, a pessoa não percebe a hora. */
.secundario.liberado {
  background:var(--verde); border-color:var(--verde); color:#04140c;
  font-weight:var(--fw-medium); letter-spacing:.02em;
  animation:dividir-pulsa 1.4s ease-in-out infinite;
}
.secundario.liberado:hover { filter:brightness(1.08) }
@keyframes dividir-pulsa {
  0%,100% { box-shadow:0 0 0 0 rgba(38,208,124,.45) }
  50%     { box-shadow:0 0 0 6px rgba(38,208,124,0) }
}
@media (prefers-reduced-motion: reduce) {
  .secundario.liberado { animation:none }
}

/* ---------- PAGAR COM PIX ----------
   O QR precisa de fundo BRANCO e de folga em volta, sempre — leitor de QR não
   lê código escuro sobre fundo escuro, e o site é escuro. Por isso a moldura
   branca aqui não segue o tema: ela é parte do código, não da decoração. */
.pix-caixa { max-width: 420px }
.pix-qr {
  background: #fff; padding: var(--sp-3); border-radius: 12px;
  width: 260px; max-width: 100%; margin: 0 auto var(--sp-3);
}
.pix-qr svg { display: block; width: 100%; height: auto }
.pix-passo { color: var(--fraco); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 var(--sp-3) }
/* o código inteiro à vista, quebrando onde precisar: quem não conseguir usar o
   botão de copiar ainda consegue selecionar com o dedo */
.pix-codigo {
  background: var(--caixa-2); border: 1px solid var(--linha); border-radius: 8px;
  padding: var(--sp-2); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: var(--fraco);
  word-break: break-all; max-height: 84px; overflow-y: auto;
  margin-bottom: var(--sp-3); user-select: all;
}
.pix-estado { color: var(--fraco); font-size: var(--fs-sm); text-align: center; margin: var(--sp-3) 0 0 }
.pix-ok {
  width: 64px; height: 64px; margin: var(--sp-3) auto; border-radius: 50%;
  background: var(--verde); color: var(--fundo); font-size: 34px; font-weight: 700;
  display: grid; place-items: center;
}
.pix-pronto-titulo { text-align: center; font-size: 18px; font-weight: 600; margin: 0 0 var(--sp-2) }
#pixPronto .pix-passo, #pixRecusado .pix-passo { text-align: center }
.pix-ok.pix-nao { background: var(--vermelho); color: #fff }
.pix-ok.pix-espera { background: var(--ambar); color: var(--fundo) }

/* a lista de recargas no admin */
.recarga-linha {
  display: grid; grid-template-columns: 1.6fr .7fr 1fr .9fr auto;
  gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--linha); font-size: var(--fs-sm);
}
.recarga-quem { display: flex; flex-direction: column; min-width: 0 }
.recarga-quem small, .recarga-estado small { color: var(--fraco); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.recarga-valor { font-weight: 600 }
.recarga-quando, .recarga-estado { color: var(--fraco) }
.recarga-estado.boa { color: var(--verde) }
.recarga-estado.atencao { color: var(--ambar) }
/* o aviso "pague da sua conta" na tela do Pix */
.pix-so-cpf {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--raio);
  background: var(--ambar-suave); color: var(--texto); font-size: var(--fs-sm); line-height: 1.45;
  border: 1px solid var(--ambar);
}
.recarga-estado.fraca { opacity: .6 }
.recarga-acao { display: flex; gap: var(--sp-2) }
@media (max-width: 700px) {
  .recarga-linha { grid-template-columns: 1fr auto; grid-auto-rows: auto }
  .recarga-quando { grid-column: 1 / -1 }
}
/* o QR do teste do admin: fundo branco sempre, senão o leitor não lê */
.pag-qr { background: #fff; padding: var(--sp-3); border-radius: 12px;
  width: 220px; margin-top: var(--sp-3) }
.pag-qr svg { display: block; width: 100%; height: auto }

/* TRAZER O SALDO DE SAQUE PARA O JOGO, do alto da tela.
   Ganhou um leilão, o prêmio caiu no bolso de saque, e agora ele está sem
   saldo numa mesa que está acabando. Sair do leilão para converter é perder a
   vez — então o caminho fica aqui, do lado do saldo, o tempo todo. */
.su-trazer {
  display:inline-flex; align-items:center; gap:4px; margin-left:var(--sp-2);
  padding:2px var(--sp-2); height:auto; line-height:1.4;
  background:transparent; border:1px solid var(--verde); color:var(--verde);
  border-radius:999px; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.su-trazer:hover { background:var(--verde); color:var(--fundo) }
/* a seta e so o sinal do caminho: quem tem que ser lido e o valor */
.su-seta { font-size:11px; line-height:1 }


/* AVISO DE VERSÃO NOVA. Discreto e no rodapé: no meio de um leilão nada pode
   roubar a tela, e recarregar é decisão de quem está jogando — não do site. */
.barra-versao {
  position:fixed; left:50%; bottom:var(--sp-3); transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--sp-3); z-index:60;
  background:var(--caixa-2); border:1px solid var(--verde); border-radius:999px;
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm);
  box-shadow:0 6px 24px rgba(0,0,0,.45); max-width:calc(100% - var(--sp-4));
}
.barra-versao button {
  background:var(--verde); color:var(--fundo); border:0; border-radius:999px;
  padding:4px var(--sp-3); height:auto; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}

/* a chave Pix na lista de saques: para copiar, não para digitar */
.sqa-chave { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; user-select:all }
.sqa-copiar {
  background:transparent; border:1px solid var(--linha); border-radius:var(--raio);
  color:var(--fraco); font-size:11px; padding:1px 6px; height:auto; margin-left:4px; cursor:pointer;
}
.sqa-copiar:hover { color:var(--texto); border-color:var(--verde) }

/* o resumo dentro da tela de decidir um saque */
.sqm-resumo {
  display:grid; gap:6px; background:var(--caixa-2); border:1px solid var(--linha);
  border-radius:var(--raio); padding:var(--sp-3); margin-bottom:var(--sp-3);
  font-size:var(--fs-sm);
}
.sqm-resumo b { color:var(--fraco); font-weight:var(--fw-regular); margin-right:6px }

/* o comprovante do saque, na conta de quem recebeu */
.sq-comprovante {
  grid-column:1/-1; font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:11px; color:var(--fraco); word-break:break-all; user-select:all;
}

/* a tela de decidir saque: cada campo com ar entre eles, e os botões no fim */
#sqModal .campo { margin-bottom: var(--sp-4) }
#sqModal .campo:last-child { margin-bottom: 0 }
.sqm-botoes { display:flex; gap:var(--sp-3); justify-content:flex-end; margin-top:var(--sp-4) }

/* os motivos do cancelamento: um por linha, para o dedo acertar no celular */
.canc-motivos { display:grid; gap:var(--sp-2); margin-bottom:var(--sp-3) }
.canc-motivo {
  text-align:left; background:var(--caixa-2); border:1px solid var(--linha);
  border-radius:var(--raio); color:var(--texto); padding:var(--sp-3);
  font-size:var(--fs-sm); cursor:pointer; height:auto;
}
.canc-motivo:hover { border-color:var(--verde) }
.canc-motivo.ativo { border-color:var(--verde); color:var(--verde); background:var(--verde-suave) }

/* a lista de saques: cartão fechado por padrão, aberto no clique */
.busca-linha { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3) }
.busca-linha input {
  flex:1; height:var(--h); background:var(--fundo); border:var(--borda);
  border-radius:var(--raio); color:var(--texto); padding:0 var(--sp-3); font-size:var(--fs-base);
}
.sqa-topo-clicavel { cursor:pointer; position:relative; padding-right:22px }
.sqa-topo-clicavel::after {
  content:"▸"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--fraco); font-size:11px; transition:transform .15s ease;
}
.saque-caixa.aberto .sqa-topo-clicavel::after { transform:translateY(-50%) rotate(90deg) }


/* ---------- SUBMENU DO MENU LATERAL ----------
   "Dinheiro" abre em Saques e Conversões. As duas listas competiam pela mesma
   tela e nenhuma cabia; separadas, cada uma tem a sua busca e o seu espaço. */
.lado-grupo { display:flex; flex-direction:column; gap:2px }
.lado-sub { display:none; flex-direction:column; gap:2px; padding-left:var(--sp-5) }
/* aparece ao passar o mouse no grupo, e fica aberto quando se está dentro dele */
.lado-grupo:hover .lado-sub,
.lado-grupo.aberto .lado-sub { display:flex }
.lado-filho { font-size:var(--fs-sm); padding-top:var(--sp-2); padding-bottom:var(--sp-2) }
/* com o menu recolhido não há espaço para submenu: ele volta a ser um item só */
body.lado-mini .lado-sub { display:none !important }

/* o "i" de informação: o texto longo vira uma bolinha que se lê ao passar o mouse */
.dica-i {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; margin-left:4px;
  border:1px solid var(--linha); color:var(--fraco);
  font-size:10px; font-style:italic; cursor:help; vertical-align:middle;
}
.dica-i:hover { color:var(--texto); border-color:var(--verde) }

/* CHAMAR ALGUÉM / COMPARTILHAR.
   Fica ao lado do "voltar", discreto: quem quer usar acha, e quem não quer não
   é atrapalhado por um botão gritando no meio do jogo. */
.compartilhar {
  margin-left:auto; background:transparent; border:1px solid var(--linha);
  border-radius:999px; color:var(--fraco); font-size:var(--fs-sm);
  padding:var(--sp-2) var(--sp-3); height:auto; cursor:pointer;
}
.compartilhar::before { content:"↗ " }
.compartilhar:hover { color:var(--verde); border-color:var(--verde) }
.topo-leilao { display:flex; align-items:center; gap:var(--sp-3) }

/* a logo enviada pelo admin entra no lugar do símbolo ÷ */
.marca-ic.com-logo { background:transparent; padding:0; overflow:hidden }
.marca-ic.com-logo img { width:100%; height:100%; object-fit:contain; display:block }
/* a prévia dela no admin */
.sons-lista { display:grid; gap:var(--sp-2); margin-top:var(--sp-3) }
.sons-lista .som-item { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm) }
.sons-lista .som-nome { width:180px; height:32px; padding:0 var(--sp-2); background:var(--fundo); border:var(--borda); border-radius:var(--raio); color:var(--texto); font-size:var(--fs-sm) }
.sons-lista .som-item small { color:var(--fraco) }
.logo-previa { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3) }
.logo-previa img {
  width:64px; height:64px; object-fit:contain;
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio); padding:6px;
}

/* A MESA DE DEMONSTRAÇÃO.
   Ela precisa parecer viva — é para isso que existe — e ao mesmo tempo dizer
   com todas as letras que ali não há dinheiro de ninguém em jogo. */
.leilao-card.vitrine { border-style:dashed }
.lc-badge.selo-vitrine { background:var(--ambar-suave); color:var(--ambar) }

/* O AVISO DE DEMONSTRAÇÃO na página do leilão encerrado. Fica ACIMA do selo e
   do valor de propósito: é a frase que muda o sentido de tudo que vem depois,
   e um rodapé chega tarde demais para quem já leu o prêmio em letra grande. */
.fim-demo {
  margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-3);
  border-left:3px solid var(--ambar); border-radius:var(--raio);
  background:var(--ambar-suave); color:var(--ambar);
  font-size:var(--fs-sm); line-height:var(--lh-base);
}

/* o nome do leilão dentro da própria mesa: discreto, acima do prêmio */
.jogo-titulo { width:100%; justify-content:center; margin-bottom:var(--sp-2) }
.jogo-titulo .lc-nome { flex:0 1 auto; color:var(--fraco); font-weight:var(--fw-medium) }

/* O ACEITE NO CADASTRO. Fica com a letra menor e alinhado pelo topo porque o
   texto tem duas linhas — com o alinhamento do meio, a caixinha desce e some
   do canto do olho de quem está lendo. */
.check.aceite { align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-loose);
                color: var(--fraco); margin: 2px 0 4px; }
.check.aceite input { margin-top: 3px; flex: none; }
.check.aceite a { color: var(--verde); text-decoration: underline; }

/* TERMOS E PRIVACIDADE. Texto longo para ler, não para varrer com o olho: a
   coluna é estreita de propósito — linha larga demais faz o olho perder o
   começo da linha seguinte. */
.legal { max-width: 760px; margin: 0 auto }
.legal h3 { font-size: var(--fs-base); margin: var(--sp-5) 0 var(--sp-2) }
.legal p { line-height: var(--lh-loose); margin: 0 0 var(--sp-3); color: var(--texto) }
.legal-aviso { background: var(--ambar-suave); border-left: 3px solid var(--ambar);
               padding: var(--sp-3); border-radius: 6px }
.legal-troca { margin-top: var(--sp-6); padding-top: var(--sp-4);
               border-top: 1px solid var(--linha); color: var(--fraco);
               font-size: var(--fs-sm) }
.legal-troca a { color: var(--verde) }

/* A TARJA DE MINUTA, no admin. Cor de aviso e não de erro: o texto existe e
   funciona, só ainda não passou por advogado. */
.legal-tarja { background: var(--ambar-suave); border-left: 3px solid var(--ambar);
               padding: var(--sp-3); border-radius: 6px; margin-bottom: var(--sp-4);
               font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--texto) }
.legal-tarja b { color: var(--ambar) }

/* AS ABAS DOS DOIS DOCUMENTOS, no admin. Não ocupam a largura inteira como as
   do login: ali são duas escolhas de peso igual; aqui são duas gavetas de um
   mesmo armário, e esticá-las até a borda daria a elas importância de menu. */
.lg-abas { display: inline-flex; margin-bottom: var(--sp-4) }
.lg-abas .aba { flex: none; padding: var(--sp-2) var(--sp-4) }

/* =========================================================
   OS PEDIDOS DE DOAÇÃO
   A página é um campo de busca e a lista. Cada pedido é um card: quem pediu,
   o título, a história, quanto já recebeu, e o botão de ajudar. Os campos e
   os botões seguem o desenho dos Depoimentos, que é o vizinho mais próximo.
   ========================================================= */
/* A BUSCA POR VALOR: "todos os pedidos" e um botão por valor.
   NO CELULAR A FILEIRA ROLA DE LADO, não quebra em duas linhas — o dono viu
   quebrando e achou feio, com razão. A barra de rolagem fica escondida; o
   dedo arrasta. A fonte é a do site, não a de número: o dono estranhou as
   letras, e eram as de máquina de escrever destoando do tema. */
.doa-filtros-rotulo { margin:var(--sp-3) 0 var(--sp-2); color:var(--fraco); font-size:var(--fs-sm) }
.doa-filtros {
  display:flex; gap:var(--sp-2); flex-wrap:nowrap; margin:0 0 var(--sp-3);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-bottom:2px;
}
.doa-filtros::-webkit-scrollbar { display:none }
.doa-filtro {
  flex:none; min-height:40px; padding:0 var(--sp-4); white-space:nowrap;
  background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); border-radius:999px;
  font-family:var(--fonte); font-size:var(--fs-sm); font-weight:var(--fw-medium);
}
.doa-filtro:hover { border-color:var(--azul) }
.doa-filtro.ativo { background:var(--acao); color:#fff; border-color:var(--azul) }
.doa-taxa { margin:0 0 var(--sp-3) }
.doa-lista { display:grid; gap:var(--sp-3) }
.doa-card {
  background:var(--caixa-2); border:var(--borda); border-radius:var(--raio-lg);
  padding:var(--sp-4);
}
.doa-topo { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2) }
.doa-avatar {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%;
  background:var(--acao); color:#fff; font-weight:var(--fw-bold); text-transform:uppercase;
}
.doa-quem { display:flex; flex-direction:column; line-height:var(--lh-tight) }
.doa-quem small { color:var(--fraco); font-size:var(--fs-xs); margin-top:2px }
.doa-uf { color:var(--fraco); font-weight:var(--fw-regular) }
.doa-titulo { margin:0 0 var(--sp-1); font-size:var(--fs-md) }
.doa-historia { margin:0; line-height:var(--lh-loose); white-space:pre-line }
.doa-pe {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--linha);
}
.doa-recebido { display:flex; flex-direction:column; gap:var(--sp-1); color:var(--fraco); font-size:var(--fs-sm); flex:1; min-width:180px }
.doa-recebido b { color:var(--verde); font-size:var(--fs-base) }
.doa-barra { display:block; height:6px; border-radius:999px; background:var(--linha); overflow:hidden; margin-top:2px }
.doa-barra i { display:block; height:100%; background:var(--verde) }
/* AJUDA E CONTATO: cada problema é uma linha que abre */
.sup-lista { display:grid; gap:var(--sp-2); margin-top:var(--sp-3) }
.sup-item {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:0 var(--sp-4);
}
.sup-item summary {
  cursor:pointer; padding:var(--sp-3) 0; font-weight:var(--fw-medium); list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.sup-item summary::-webkit-details-marker { display:none }
.sup-item summary::after { content:"▾"; color:var(--fraco); transition:transform .15s ease; flex:none }
.sup-item[open] summary::after { transform:rotate(180deg) }
.sup-item[open] { border-color:var(--azul) }
.sup-item p { margin:0 0 var(--sp-3); line-height:var(--lh-loose); color:var(--texto) }
.sup-form { display:grid; gap:var(--sp-3); margin-top:var(--sp-3) }
.sup-form .campo label { display:block; margin-bottom:var(--sp-1); color:var(--fraco); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em }
.sup-form .campo label .info-balao { text-transform:none; letter-spacing:0 }
.sup-form input, .sup-form textarea {
  width:100%; background:var(--fundo); color:var(--texto); border:var(--borda); border-radius:var(--raio);
  padding:var(--sp-2) var(--sp-3); font-family:inherit; font-size:var(--fs-base);
}
.sup-form input { height:var(--h) }
.sup-form textarea { resize:vertical; min-height:110px }
.sup-form input:focus, .sup-form textarea:focus { border-color:var(--azul); box-shadow:var(--foco) }
.sup-desafio { background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio); padding:var(--sp-3) }
.sup-desafio label { text-transform:none; letter-spacing:0; font-size:var(--fs-base); color:var(--texto); font-weight:var(--fw-medium) }
.sup-desafio input { max-width:160px }
.sup-form .acao .botao { min-height:44px; font-size:var(--fs-base); border-radius:var(--raio) }
.sup-pronto { margin-top:var(--sp-3) }
/* a lista de backups no admin */
.bk-lista { list-style:none; padding:0; margin:var(--sp-3) 0 0; display:grid; gap:var(--sp-1); font-size:var(--fs-sm) }
.bk-lista .fraco { color:var(--fraco); margin-left:var(--sp-2) }
/* trocar a senha, na conta: a mesma caixa que abre das perguntas da Ajuda */
.senha-troca { margin-top:var(--sp-4) }
.senha-troca .sup-form { margin-bottom:var(--sp-3) }
.senha-troca .acao .botao { width:auto; padding:0 var(--sp-5) }

/* A FAIXA DE DOADORES: uma linha, rola de lado no celular, a mais nova primeiro */
.doadores {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3);
  background:var(--verde-suave); border:1px solid var(--verde); border-radius:var(--raio);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  font-size:var(--fs-sm); white-space:nowrap;
}
.doadores::-webkit-scrollbar { display:none }
.doadores-rot { flex:none; color:var(--verde); font-weight:var(--fw-medium); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; margin-right:var(--sp-1) }
.doador { flex:none; padding:2px var(--sp-3); border-radius:999px; background:var(--caixa); border:1px solid var(--linha); color:var(--fraco) }
.doador b { color:var(--texto); font-weight:var(--fw-medium) }
.doadores-rot + .doador { border-color:var(--verde) }
/* quem ajudou: letra diferente (a dos números), verde, um pouco maior */
.doador .dr-quem { font-family:var(--fonte-num); font-weight:var(--fw-bold); color:var(--verde); font-size:1.05em; letter-spacing:.02em }
.doador .dr-valor { color:var(--texto); font-family:var(--fonte-num); font-weight:var(--fw-medium) }
.doa-rot-curto { display:none }
@media (max-width:720px) {
  /* no celular: rótulo curto, só a última doação, e ela quebra linha — o
     valor aparece sempre (antes a faixa rolava de lado e cortava o valor) */
  .doa-rot-longo { display:none }
  .doa-rot-curto { display:inline }
  .doadores { white-space:normal; overflow:visible; flex-wrap:nowrap }
  .doador { flex:1 1 auto; min-width:0; white-space:normal; line-height:1.35 }
  .doador ~ .doador { display:none }
}

/* os dois botões do card: Pix sempre; saldo só quando o saldo cobre */
.doa-botoes { display:flex; gap:var(--sp-2); flex-wrap:wrap; flex:none }
.doa-botoes .botao { width:auto; min-height:40px; padding:0 var(--sp-4); font-size:var(--fs-sm); flex:none }
.doa-saldo { background:var(--caixa-2); color:var(--texto); border:1px solid var(--verde) }
.doa-saldo:hover:not(:disabled) { background:var(--verde); color:var(--fundo) }
@media (max-width:600px) {
  .doa-pe { flex-direction:column; align-items:stretch }
  .doa-botoes .botao { flex:1 }
}
.doa-mais { justify-content:center; margin-top:var(--sp-3) }
.doa-mais .botao { width:auto; min-height:40px; padding:0 var(--sp-5); font-size:var(--fs-sm);
  background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha) }

/* a caixinha de escolher quanto */
.doa-valores { display:flex; gap:var(--sp-2); flex-wrap:wrap }
.doa-valor {
  flex:1 1 calc(33% - var(--sp-2)); min-height:40px;
  background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); border-radius:var(--raio);
  font-family:var(--fonte); font-size:var(--fs-base); font-weight:var(--fw-medium);
}
.doa-valor:hover { border-color:var(--azul) }
.doa-valor.ativo { background:var(--acao); color:#fff; border-color:var(--azul) }

#cDoaValores { margin-bottom:var(--sp-2) }
.doa-nao-saca { margin:var(--sp-3) 0 }

/* na conta: o convite, o formulário e o meu pedido */
#cDoaEnviar   { background:var(--verde); color:var(--fundo); flex:2 }
#cDoaCancelar { background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha); flex:1 }
#cDoaEnviar:hover { filter:brightness(1.08) }
#cDoaEnviar:disabled { opacity:.45; cursor:default }
.doa-meu { margin-top:var(--sp-3) }
.doa-meu-pedido {
  background:var(--caixa-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--sp-3); font-size:var(--fs-sm);
}
.doa-meu-pedido.aberto { border-color:var(--verde) }
.doa-meu-pedido.atendido { border-color:var(--verde); background:var(--verde-suave) }
.doa-festa {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3);
  background:var(--caixa); border:1px solid var(--verde); border-radius:var(--raio);
  font-size:var(--fs-base); line-height:var(--lh-base);
}
.doa-festa-ic { font-size:28px; line-height:1 }
/* a peça dobrada: clica nela toda; a setinha no canto vira quando abre */
.doa-meu-pedido.dobravel { position:relative; cursor:pointer; padding-right:calc(var(--sp-3) + 18px) }
.doa-meu-pedido.dobravel:hover { border-color:var(--azul) }
.doa-meu-pedido.dobravel .doa-festa { margin-bottom:0; cursor:pointer }
.doa-seta {
  position:absolute; right:var(--sp-3); top:var(--sp-3);
  color:var(--fraco); font-size:var(--fs-base); line-height:1; transition:transform .15s ease;
}
.doa-meu-pedido.aberta .doa-seta { transform:rotate(180deg) }
.doa-detalhes { margin-top:var(--sp-3); cursor:default }
.doa-meu-pedido.dobravel .doa-detalhes { padding-top:var(--sp-3); border-top:1px solid var(--linha) }
.doa-festa b { color:var(--verde) }
.doa-meu-topo { display:flex; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-2) }
.doa-meu-pedido .doa-estado { color:var(--fraco); font-size:var(--fs-xs) }
.doa-meu-pedido.aberto .doa-estado { color:var(--verde) }
.doa-ajudas { margin:var(--sp-2) 0 0; padding-left:var(--sp-4); color:var(--fraco); font-size:var(--fs-xs); line-height:var(--lh-loose) }
.doa-meu-pedido .acao { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3) }
.doa-meu-pedido .acao .botao { width:auto; min-height:38px; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm);
  background:var(--caixa-2); color:var(--texto); border:1px solid var(--linha) }
.link-magro.perigo { color:var(--vermelho) }