/* ═══════════════════════════════════════════════════════════════════════
   ÁREA VIP · A ENVELOPAGEM (16/09/2026)
   ═══════════════════════════════════════════════════════════════════════

   O que esta folha pinta: o cabeçalho, os três botões de entrar, as folhas
   de explicação e o estado TRANCADO dos botões.

   O QUE ELA NÃO PINTA, DE PROPÓSITO: os botões em si. Os 6 grandes e os 5
   atalhos usam `.mn-cartao` e `.mn-atalho`, as MESMAS classes do menu
   principal. Foi pedido do Boss ("botões grandes iguais o do menu") e é
   também a escolha certa: copiar aquele CSS pra cá significaria que todo
   ajuste no menu teria que ser feito duas vezes, e um dia não seria.

   O PREÇO DISSO, pra quem mexer depois: mexer no `.mn-cartao` mexe na ÁREA
   VIP junto. A régua do menu não cobre esta tela, então meça as duas.

   ── SOBRE O "BANNER" ──────────────────────────────────────────────────
   Não tem imagem de banner, e é decisão do Boss (16/09): *"o fundo do app
   já serve como banner, é pra escrever em fonte bonita ÁREA VIP e o
   agradecimento"*. Então o topo é TIPOGRÁFICO: a faixa do estádio que já
   está atrás de tudo é o fundo, e por cima vai só letra.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A TELA ─────────────────────────────────────────────────────────────
   O `#screen-vip` é uma `.screen` do legado, que já vem com padding de
   36x40. Num celular isso come 80 px de largura, e os cartões ficam
   estreitos demais. Aqui a tela respira igual ao menu. */
#screen-vip.screen { padding: 0 var(--e3) var(--e6); }

.mb-wrap { width: 100%; max-width: 520px; margin: 0 auto; }

/* ⚠️ `align-items: stretch` NAO E ENFEITE, e a mesma armadilha que ja tinha
   mordido o menu em 15/09.

   O legado mostra estes dois com `display: flex` (e o `_visualPadrao()` e o
   `_marcarLiberado()`) e o CSS dele manda `align-items: center`. Item de
   flex centrado nasce com a largura do CONTEUDO, nao do pai: os tres botoes
   de entrar ficavam com 47 px CADA em qualquer largura de tela, do 320 ao
   430, em vez de dividirem a tela em tres.

   O `gap: 0` entra junto porque o legado poe 22 px de gap aqui, e o
   espacamento desta tela e por margin. Os dois somados dobravam o respiro.

   E a direcao tem que estar escrita: sem ela o conteudo deitaria em linha e
   a tela viraria uma faixa horizontal. */
#mb-vitrine, #mb-home {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* ── O TOPO: voltar discreto + o nome da área ──────────────────────────
   Pedido do Boss: "[VOLTAR DISCRETO no canto superior esquerdo] - AREA VIP".
   Discreto é sem caixa e sem cor: só a seta e a palavra, do tamanho de um
   rótulo. O alvo de toque continua tendo 44 px de altura, que é o mínimo
   pra dedo, mesmo o desenho sendo pequeno. */
/* O TOPO SOBE (pedido do Boss, 16/09), MAS COM O RESPIRO DO APARELHO.
   `env(safe-area-inset-top)` e a altura que o proprio celular reserva pro
   entalhe da camera e pra barra de status. Somar ela e o que garante que
   subir aqui nao vira texto cortado num iPhone com notch. Sem isso, o
   "VOLTAR" entraria embaixo do relogio em metade dos aparelhos. */
#screen-vip .tier-header {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%;
  padding: calc(var(--e1) + env(safe-area-inset-top, 0px)) 0 var(--e1);
  background: none !important; border: 0 !important; box-shadow: none !important;
}
/* ⚠️ O DESENHO DELE MORA NO `css/cabecalho.css`, na classe `.cb-voltar`, e
   este botão a carrega junto. Aqui fica só o que é desta tela.

   Era uma cópia dos mesmos valores, e cópia diverge: em 16/09 o Boss achou
   TRÊS voltares diferentes no app (este, o das telas de dentro e o do
   componente) porque cada um tinha a sua. Agora é uma regra só. */
.av-voltar { transition: color .15s; }
.av-voltar:active { color: var(--texto-forte); }
.av-voltar svg { width: 16px; height: 16px; }
/* o desenho é o `.cb-nome`; o `em` dourado é o que esta barra tem de seu */
.av-topo-nome em { font-style: normal; color: var(--boss-ouro); }
/* o ✅ e o nome do membro, que o legado mostra quando está liberado */
#screen-vip .mb-vip-check, #screen-vip .mb-vip-nome { margin-left: auto; }

/* ── O CABEÇALHO TIPOGRÁFICO (o "banner" sem imagem) ───────────────── */
/* subiu em 16/09: era e4 em cima e e5 embaixo */
/* ⚠️ O "BOSS FC" VERDE SAIU EM 16/09, junto com o do `css/cabecalho.css`:
   *"quero remover esse texto verde escrito BOSS FC e subir o cabeçalho para
   ficar um pouco mais próximo do < VOLTAR e AREA VIP"*. Por isso o padding
   de cima virou zero: a barra e o título passaram a se encostar. */
.av-cabecalho { text-align: center; padding: 0 0 var(--e4); }
/* ⚠️ O QUE ENCOSTA O TÍTULO NA BARRA. O `.tier-header` do legado nasce com
   `margin-bottom: 22px` (ele é filho de um flex com gap), e era isso que
   deixava um buraco entre o `< VOLTAR  ÁREA VIP` e o `ÁREA VIP` grande. O
   Boss pediu os dois mais perto em 16/09. 22px viram 8. */
#screen-vip .tier-header { margin-bottom: var(--e2); }
.av-titulo {
  margin: 0;
  font-family: var(--fonte-titulo); font-weight: 700;
  /* `clamp` e não tamanho fixo: num 320 o título não pode empurrar a tela,
     e num 430 ele pode crescer. O meio é a largura da tela. */
  font-size: clamp(2.6rem, 14vw, 3.6rem);
  line-height: 0.92; letter-spacing: 0.02em;
  color: var(--texto-forte); text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
}
.av-titulo em {
  font-style: normal;
  /* o dourado do Boss, com o brilho por fora e não por dentro: gradiente no
     texto some em tela pequena, sombra não */
  color: var(--boss-ouro);
  text-shadow: 0 0 22px rgba(232,183,58,0.45), 0 2px 18px rgba(0,0,0,0.8);
}
.av-risco {
  width: 54px; height: 2px; margin: var(--e3) auto var(--e3);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--boss-ouro), transparent);
}
.av-lead {
  margin: 0 auto; max-width: 34ch;
  font-family: var(--fonte-texto); font-size: 0.88rem; line-height: 1.5;
  color: var(--texto);
}
.av-lead b { color: var(--texto-forte); font-weight: 600; }

/* ── OS TRÊS BOTÕES DE ENTRAR ───────────────────────────────────────────
   Três lado a lado num celular de 320 dá 98 px pra cada. Cabe porque o
   texto é de duas linhas curtas e a fonte é condensada. Abaixo disso o
   `min-width: 0` segura: sem ele a palavra mais longa decide a largura da
   coluna e as três ficam desiguais (é a mesma armadilha dos cartões do
   menu, e custou uma entrega em 15/09). */
.av-portas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--e2); margin-bottom: var(--e5);
}
.av-porta {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: var(--e3) 4px;
  background: rgba(1,14,4,0.78);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m, 12px);
  box-shadow: var(--brilho-verde);
  color: var(--texto-forte); cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.av-porta:active { transform: scale(0.96); }
.av-porta svg { width: 19px; height: 19px; color: var(--boss-verde); }
.av-porta b {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.66rem; line-height: 1.1; letter-spacing: 0.02em;
  text-align: center; text-transform: uppercase;
}
/* O do meio é o que paga a conta, então é o dourado. */
.av-porta.ouro { border-color: rgba(232,183,58,0.55); box-shadow: var(--brilho-ouro, 0 0 18px rgba(232,183,58,0.2)); }
.av-porta.ouro svg { color: var(--boss-ouro); }

/* ── OS BLOCOS DE BOTÕES ────────────────────────────────────────────── */
.av-secao {
  display: flex; align-items: center; gap: var(--e2);
  margin: var(--e5) 0 0;
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--texto-fraco); text-transform: uppercase;
}
.av-secao::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--borda-fraca), transparent);
}

/* ── O CADEADO: o estado de quem ainda não é VIP ────────────────────────
   O botão é o MESMO de dentro, e é isso que vende: a pessoa vê exatamente a
   tela que vai ter. O que muda é um véu por cima e o cadeado no canto.

   `pointer-events` fica LIGADO de propósito: tocar num botão trancado não
   pode ser um toque morto. Ele rola a tela de volta pros três botões de
   entrar, que é o que a pessoa precisa fazer. */
.av-trancado { position: relative; }
/* ⚠️ O VEU SAIU EM 16/09, E E PEDIDO DO BOSS:
   *"no BOSS RESPONDE e os demais conteudos nao podem estar desfocados
   assim, o usuario precisa ver a qualidade o brilho, mas com o CADEADO la
   um pouco mais destacado"*.

   Faz sentido de venda: a arte E o argumento. Escurecer ela esconde
   justamente o que deveria dar vontade de entrar. Quem diz "trancado"
   passa a ser SO o cadeado, e por isso ele cresceu e ganhou peso.

   Ficou so um veu de canto, bem de leve, atras do cadeado: sem ele o
   cadeado dourado sumia em cima das artes douradas. */
.av-trancado::after {
  content: ''; position: absolute; z-index: 3;
  top: 0; right: 0; width: 46%; height: 52%;
  border-radius: inherit;
  background: radial-gradient(circle at 78% 26%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 45%, transparent 72%);
  pointer-events: none;
}
/* ⚠️ O SELETOR PRECISA DO `#screen-vip`, E NAO E ENFEITE.
   O menu.css tem esta regra, que vale pra TODO filho direto do cartao:

     .mn-cartao > :not(.mn-cartao-icone):not(.mn-selo):not(.seta)
       { position: relative; }

   Ela pesa (0,4,0) e ganha de `.av-tranca` (0,1,0), entao o cadeado nascia
   `relative` e caia no meio do texto do cartao, em cima do rotulo. Com o
   `#screen-vip` na frente vira (1,2,0) e ganha. A alternativa seria mexer
   no menu.css, que e compartilhado com o menu principal: nao vale o risco
   por um cadeado. */
#screen-vip .av-tranca {
  position: absolute; z-index: 4; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #f3cf63, #c9922a);
  border: 2px solid rgba(12,8,2,0.75);
  color: #1a1205;
  box-shadow: 0 3px 14px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,235,160,0.45);
}
.av-tranca svg { width: 17px; height: 17px; stroke-width: 2.1; }
/* no atalho, que é bem menor, o cadeado encolhe junto */
#screen-vip .mn-atalho .av-tranca { top: 4px; right: 4px; width: 21px; height: 21px; border-width: 1.5px; }
#screen-vip .mn-atalho .av-tranca svg { width: 12px; height: 12px; }

/* ── O TEXTO DOS CARTOES DESTA TELA ─────────────────────────────────────
   No menu a descricao e `white-space: nowrap` com reticencias: la os textos
   sao curtos ("Codigos e eventos", "Cartas lado a lado") e uma linha so
   deixa os sete iguais.

   Aqui os nomes sao mais longos, e "Playstyles e formacoes" chegava cortado
   em "Playstyles e formaç...". Entao nesta tela a descricao QUEBRA, ate duas
   linhas. Cabe porque o cartao e `justify-content: flex-end`: o texto cresce
   pra cima a partir do pe, e sobra altura (a caixa tem 102 px e o texto usa
   uns 60).

   ⚠️ Duas linhas e o teto. Sem o limite, uma descricao longa demais empurra
   o conteudo pra fora da caixa, e a caixa nao pode crescer: ela e a
   proporcao da arte. */
#screen-vip .mn-cartao .desc {
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  padding-right: 26px;
  font-size: 0.72rem; line-height: 1.2;
}
/* O titulo tambem pode usar duas linhas aqui: "TIER LISTS ESPECIAIS" e
   "BUGADOS E BARATOS" nao cabem numa so, e encurtar o nome nao e opcao (foi
   o Boss que escolheu os nomes). */
#screen-vip .mn-cartao .titulo { font-size: 1.16rem; line-height: 1.02; }

/* ═══════════════════════════════════════════════════════════════════════
   AS TELAS DE DENTRO DA ÁREA VIP
   ═══════════════════════════════════════════════════════════════════════
   Eram folhas que subiam de baixo. Viraram TELA em 16/09, pedido do Boss:
   *"talvez ele abrir como se fosse uma nova tela ficaria melhor, com opção
   de voltar"*.

   Ela cobre a tela toda e tem cabeçalho próprio. O FUNDO É SEMI-OPACO DE
   PROPÓSITO: a faixa do estádio continua aparecendo atrás, então ela lê
   como uma tela do app e não como uma caixa flutuando em cima dele.

   z-index 5300: acima da barra de abas (900) e ABAIXO do `.mb-overlay` do
   legado (99998), que é onde nasce o código do SOU MEMBRO. Essa ordem não é
   detalhe: esta tela ABRE aquele overlay, então ele precisa nascer por
   cima. Em 14/09 um caso desse fez um botão parecer que não funcionava.
   ═══════════════════════════════════════════════════════════════════════ */

.av-tela-fundo {
  position: fixed; inset: 0; z-index: 5300;
  display: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(1,10,3,0.94) 0%, rgba(1,7,2,0.985) 34%, #010702 100%);
}
.av-tela-fundo.aberta { display: block; animation: av-entra .2s ease-out; }
@keyframes av-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* enquanto a tela está aberta, a ÁREA VIP atrás não rola junto */
body.av-tela-aberta { overflow: hidden; }

.av-tela {
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 0 var(--e3) calc(var(--e7) + env(safe-area-inset-bottom, 0px));
}

/* ── O CABEÇALHO, COM O VOLTAR ────────────────────────────────────────
   Grudado no topo enquanto a tela rola: numa tela de FAQ longa, ter que
   rolar de volta pra sair é o tipo de coisa que faz a pessoa fechar o app
   em vez de voltar. */
.av-tela-topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 calc(var(--e3) * -1);
  padding: calc(var(--e2) + env(safe-area-inset-top, 0px)) var(--e3) var(--e2);
  background: linear-gradient(180deg, rgba(1,8,3,0.98) 65%, rgba(1,8,3,0));
}
/* idem: o desenho é o `.cb-voltar` do `css/cabecalho.css` */
.av-tela-voltar:active { color: var(--texto-forte); }
.av-tela-voltar svg { width: 16px; height: 16px; transform: rotate(180deg); }
/* ⚠️ ERA 1.15rem BRANCO enquanto as outras barras do app tinham 0.95rem
   cinza, e foi exatamente isso que o Boss viu: *"o VOLTAR com o restante
   que é importante está num formato diferente"*. O desenho agora é o
   `.cb-nome`; aqui fica só o comportamento de quebra. */
.av-tela-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-tela-corpo { padding-top: var(--e2); }

/* ── A CAPA: o topo grande de cada tela ──────────────────────────────── */
.av-capa {
  text-align: center;
  padding: var(--e4) var(--e3) var(--e5);
  background: radial-gradient(ellipse at 50% 0%, rgba(0,200,75,0.14) 0%, transparent 70%);
}
.av-capa-emoji {
  font-size: 3.2rem; line-height: 1;
  margin-bottom: var(--e3);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7));
}
.av-capa-frase {
  font-family: var(--fonte-texto); font-size: 0.95rem; line-height: 1.5;
  color: var(--texto); max-width: 32ch; margin: 0 auto;
}
.av-capa-frase b { color: var(--texto-forte); font-weight: 600; }
.av-capa .av-selo-status { margin-top: var(--e3); }

/* ── O TITULINHO DE SEÇÃO ─────────────────────────────────────────────── */
.av-titulinho {
  display: flex; align-items: center; gap: var(--e2);
  margin: var(--e5) 0 var(--e3);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.2em;
  color: var(--texto-fraco); text-transform: uppercase;
}
.av-titulinho::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--borda-fraca), transparent);
}

/* ── O TÓPICO: emoji + título + texto ─────────────────────────────────── */
.av-topico {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3);
  margin-bottom: var(--e2);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--borda-fraca);
  border-left: 2px solid var(--boss-verde);
  border-radius: var(--canto-p, 8px);
}
.av-topico-emoji { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.av-topico-tx { flex: 1; min-width: 0; }
.av-topico-ttl {
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.9rem;
  color: var(--texto-forte); margin-bottom: 2px;
}
.av-topico-txt {
  font-family: var(--fonte-texto); font-size: 0.84rem; line-height: 1.45;
  color: var(--texto);
}
.av-topico-txt b { color: var(--texto-forte); }

/* ── OS PASSOS NUMERADOS ──────────────────────────────────────────────── */
.av-passos { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.av-passo {
  display: flex; gap: var(--e2); align-items: flex-start;
  padding: var(--e3);
  background: rgba(0,200,75,0.06);
  border: 1px solid rgba(0,200,75,0.2);
  border-radius: var(--canto-p, 8px);
}
.av-passo-n {
  flex: 0 0 24px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--boss-verde); color: #01230c;
  border-radius: 50%;
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.78rem;
}
.av-passo-emoji { font-size: 1.1rem; line-height: 1.3; flex: 0 0 auto; }
.av-passo-tx {
  flex: 1; min-width: 0;
  font-family: var(--fonte-texto); font-size: 0.85rem; line-height: 1.45;
  color: var(--texto);
}
.av-passo-tx b { color: var(--texto-forte); }

/* ── A DICA ───────────────────────────────────────────────────────────── */
.av-dica {
  display: flex; gap: var(--e2); align-items: flex-start;
  padding: var(--e3);
  margin: var(--e3) 0 var(--e4);
  background: rgba(232,183,58,0.09);
  border: 1px solid rgba(232,183,58,0.3);
  border-radius: var(--canto-p, 8px);
  font-family: var(--fonte-texto); font-size: 0.83rem; line-height: 1.45;
  color: #e9dcb6;
}
.av-dica b { color: var(--boss-ouro); }
.av-dica-emoji { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }

/* ── O CAMPO DE CÓDIGO ────────────────────────────────────────────────── */
.av-campo-bloco {
  padding: var(--e4) var(--e3);
  margin-bottom: var(--e3);
  background: rgba(232,183,58,0.07);
  border: 1px solid rgba(232,183,58,0.32);
  border-radius: var(--canto-m, 12px);
}
.av-campo-lbl {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--boss-ouro); text-transform: uppercase;
  margin-bottom: var(--e2); text-align: center;
}
.av-campo { margin-bottom: var(--e3); }
.av-campo input {
  width: 100%; padding: 15px var(--e3);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--borda);
  border-radius: var(--canto-p, 8px);
  color: var(--texto-forte);
  font-family: var(--fonte-rotulo); font-size: 1.05rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
}
.av-campo input::placeholder { color: #55665c; letter-spacing: 0.06em; }
.av-campo input:focus { outline: none; border-color: var(--boss-ouro); }

/* ── OS BOTÕES DE AÇÃO ────────────────────────────────────────────────── */
.av-acao {
  width: 100%; padding: 15px;
  border: 0; border-radius: var(--canto-p, 8px);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s, filter .15s;
}
.av-acao:active { transform: scale(0.98); }
.av-acao[disabled] { opacity: 0.6; }
.av-acao.ouro  { background: linear-gradient(135deg, #f3cf63, #c9922a); color: #1a1205; }
.av-acao.verde { background: linear-gradient(135deg, #22d964, #009933); color: #01230c; }

/* ── O RODAPÉ DE CADA TELA ────────────────────────────────────────────── */
.av-rodape {
  margin-top: var(--e5); padding: var(--e4) var(--e3);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-m, 12px);
  text-align: center;
}
.av-rodape-ttl {
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.92rem;
  color: var(--texto-forte); margin-bottom: 6px;
}
.av-rodape-tx {
  font-family: var(--fonte-texto); font-size: 0.83rem; line-height: 1.45;
  color: var(--texto-fraco); margin-bottom: var(--e3);
}
.av-rodape .av-acao + .av-acao { margin-top: var(--e2); }

/* ── O SELO DE ESTADO ─────────────────────────────────────────────────
   Verde = pode usar hoje; ouro = está vindo. Não usei vermelho de
   propósito: "em breve" não é erro, é promessa. */
/* Refeito em 16/09: o Boss disse que *"o sinal de em breve que tem em
   aplicativos esta horrivel"*, e a pilula arredondada com cadeadinho era
   exatamente aquilo.

   Agora e uma ETIQUETA CHANFRADA, com um ponto que pulsa no PRONTO e fica
   parado no EM BREVE. O chanfro e a fonte condensada amarram ela ao resto
   do app; a pilula nao pertencia a lugar nenhum. */
.av-selo-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px var(--e4) 8px var(--e3);
  /* o canto de baixo-direita cortado: a forma que o app usa nos selos */
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - 11px) 100%, 0 100%);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.av-selo-status svg { display: none; }
.av-selo-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 8px;
}
.av-selo-status.pronto {
  background: linear-gradient(135deg, rgba(0,200,75,0.3), rgba(0,200,75,0.12));
  border-left: 3px solid var(--boss-verde);
  color: #5df59a;
}
.av-selo-status.pronto::before { animation: av-pulsa 1.8s ease-in-out infinite; }
@keyframes av-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93,245,154,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(93,245,154,0); }
}
.av-selo-status.embreve {
  background: linear-gradient(135deg, rgba(232,183,58,0.26), rgba(232,183,58,0.1));
  border-left: 3px solid var(--boss-ouro);
  color: #f0d86c;
}

/* o nome do botão, embaixo da arte, na capa da tela dele */
.av-capa-nome {
  margin-top: var(--e3);
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.5rem; line-height: 1.05; letter-spacing: 0.02em;
  color: var(--boss-ouro); text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}

/* ── O FAQ ─────────────────────────────────────────────────────────────
   `<details>` e `<summary>` do próprio navegador: abre e fecha sozinho,
   funciona com leitor de tela e não precisa de uma linha de JS. */
.av-faq { display: flex; flex-direction: column; gap: var(--e2); }
.av-faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-p, 8px);
  overflow: hidden;
}
.av-faq-item[open] { border-color: var(--borda); background: rgba(0,200,75,0.05); }
.av-faq-item summary {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3); cursor: pointer;
  font-family: var(--fonte-rotulo); font-weight: 600; font-size: 0.86rem;
  color: var(--texto-forte); list-style: none;
}
/* o triângulo padrão do navegador sai: o nosso é a seta que gira */
.av-faq-item summary::-webkit-details-marker { display: none; }
.av-faq-item summary::marker { content: ''; }
.av-faq-emoji { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }
.av-faq-seta {
  width: 14px; height: 14px; flex: 0 0 14px; margin-left: auto;
  color: var(--texto-fraco); transform: rotate(90deg); transition: transform .18s;
}
.av-faq-item[open] .av-faq-seta { transform: rotate(-90deg); color: var(--boss-verde); }
.av-faq-r {
  padding: 0 var(--e3) var(--e3);
  font-family: var(--fonte-texto); font-size: 0.84rem; line-height: 1.5;
  color: var(--texto);
}
.av-faq-r b { color: var(--texto-forte); }

/* ── O E-MAIL DE CONTATO ──────────────────────────────────────────────── */
.av-email {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; padding: 14px var(--e3);
  margin-bottom: var(--e3);
  background: rgba(232,183,58,0.1);
  border: 1px solid rgba(232,183,58,0.4);
  border-radius: var(--canto-p, 8px);
  color: var(--boss-ouro); cursor: pointer;
  transition: transform .12s, background .15s;
}
.av-email:active { transform: scale(0.98); background: rgba(232,183,58,0.18); }
.av-email-emoji { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }
.av-email b {
  flex: 1; min-width: 0; text-align: left;
  font-family: var(--fonte-texto); font-weight: 600; font-size: 0.86rem;
  /* o e-mail é longo e a tela é estreita: reticências antes de vazar */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-email-copiar {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
  background: rgba(232,183,58,0.22);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
}



/* ── A FAIXA DE VALIDADE (só de dentro) ───────────────────────────────
   O legado escreve o conteúdo dela; aqui só o vestido. As três classes
   (normal, perto, venceu) são as que o `_pintarValidade()` já usa. */
#screen-vip .mb-validade {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3);
  margin-bottom: var(--e4);
  background: rgba(0,200,75,0.08);
  border: 1px solid var(--borda);
  border-radius: var(--canto-p, 8px);
  font-family: var(--fonte-texto); font-size: 0.84rem; color: var(--texto);
}
#screen-vip .mb-validade.perto  { background: rgba(232,183,58,0.1); border-color: rgba(232,183,58,0.45); }
#screen-vip .mb-validade.venceu { background: rgba(255,71,87,0.1);  border-color: rgba(255,71,87,0.45); }
/* ⚠️ ESTA REGRA ERA `#screen-vip .mb-validade span { flex: 1 }` E FOI A
   CAUSA DO "VER" IMPRESSO EM CIMA DO "4 DIAS", nas TRES vezes que o Boss
   reclamou. Ela e minha, da primeira versao da faixa de validade, quando o
   conteudo era um `<span>` so que devia ocupar a linha inteira.

   Quando a faixa virou dois pedacos (o texto e o VER), o `flex: 1` passou a
   dividir a largura ao MEIO entre eles: cada um ficou com 60px, o texto tem
   86px e `nowrap`, e os 26px que sobraram foram parar por cima do vizinho.

   E eu escrevi `.av-expira-tx { flex: 0 0 auto }` pra corrigir e nao
   adiantou NADA: `#screen-vip .mb-validade span` tem um ID (1,2,1) e ganha
   de uma classe (0,1,0) sempre. Regra com `#id` num CSS de tela e uma
   armadilha exatamente por isso - ela nao aparece quando voce le a regra
   nova, so quando voce pergunta ao navegador quem ganhou.

   Agora ela so vale pro que NAO e pedaco do expira. */
#screen-vip .mb-validade > span:not(.av-expira-tx):not(.av-expira-ver) { flex: 1; min-width: 0; }
#screen-vip .mb-renovar {
  padding: 9px var(--e3); border: 0; border-radius: 7px;
  background: linear-gradient(135deg, #f3cf63, #c9922a); color: #1a1205;
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.06em; cursor: pointer;
}

/* ── O RODAPÉ DA ÁREA ───────────────────────────────────────────────── */
.av-pe {
  margin-top: var(--e6); padding-top: var(--e4);
  border-top: 1px solid var(--borda-fraca);
  text-align: center;
}
.av-pe-tx {
  font-family: var(--fonte-texto); font-size: 0.8rem; line-height: 1.5;
  color: var(--texto-fraco); margin-bottom: var(--e2);
}
.av-pe-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--e3);
  background: none; border: 0; cursor: pointer;
  color: var(--boss-ouro);
  font-family: var(--fonte-rotulo); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.av-pe-link svg { width: 15px; height: 15px; }

/* ── TELA GRANDE ────────────────────────────────────────────────────────
   Acima de 560 a coluna para de crescer (o texto fica ilegível de tão
   largo) e os atalhos ganham ar. */
@media (min-width: 560px) {
  .mb-wrap { max-width: 560px; }
  .av-titulo { font-size: 3.6rem; }
}

/* ── OS 3 BOTOES DE ENTRAR, COM ARTE (16/09) ────────────────────────────
   Mesma regra do atalho: quando a arte existe, ela E o botao. O nome ja
   esta escrito dentro dela, entao o rotulo do app some (fica 1 px, so pro
   leitor de tela) e a caixa perde fundo, borda e brilho: duas molduras na
   mesma peca e o que o Boss le como "cortado".

   E a proporcao vem da arte, escrita pelo js/telas/area-vip.js, pelo mesmo
   motivo de sempre: esticar achata o canto redondo desenhado nela. */
.av-porta.com-arte {
  background-image: var(--arte);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 14%;
  padding: 0;
  gap: 0;
}
.av-porta.com-arte svg { display: none; }
.av-porta.com-arte b {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  padding: 0; background: none;
}
/* o dourado do do meio tambem sai: a arte ja traz a cor dela */
.av-porta.ouro.com-arte { border-color: transparent; box-shadow: none; }

/* ⚠️ O CADEADO PRECISA SOBREVIVER A ESTA REGRA DO menu.css:
       .mn-atalho.com-arte svg { display: none; }
   Ela existe pra sumir com o icone do atalho quando a arte entra, e e um
   seletor de DESCENDENTE: ela pega o svg de dentro do cadeado tambem. O
   resultado era a bolinha dourada na tela, vazia por dentro, nos cinco
   atalhos. O Boss viu na hora; a minha regua nao, porque ela contava a
   bolinha e nao o desenho dentro dela.

   Peso: a regra do menu e (0,2,1) e esta e (1,3,1). Por isso o `#screen-vip`
   na frente. */
#screen-vip .mn-atalho.com-arte .av-tranca svg,
#screen-vip .av-porta.com-arte .av-tranca svg { display: block; }

/* ── O ÍCONE DAS PEÇAS ─────────────────────────────────────────────────
   Substituiu o emoji em 16/09, regra do Boss: *"os emojis que usamos nao
   sao o padraozao de IA, fazemos um negocio melhor"*.

   O motivo técnico bate com o de gosto: emoji de sistema muda de desenho em
   cada aparelho e nenhum deles combina com o traçado do resto do app. */
.av-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,200,75,0.12);
  border: 1px solid rgba(0,200,75,0.25);
  color: var(--boss-verde);
}
.av-ico svg { width: 18px; height: 18px; }
.av-dica .av-ico { flex: 0 0 30px; width: 30px; height: 30px; background: rgba(232,183,58,0.16); border-color: rgba(232,183,58,0.3); color: var(--boss-ouro); }
.av-dica .av-ico svg { width: 16px; height: 16px; }
.av-titulinho .av-ico { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; background: none; border: 0; }
.av-titulinho .av-ico svg { width: 14px; height: 14px; }
.av-passo .av-ico { flex: 0 0 30px; width: 30px; height: 30px; }
.av-passo .av-ico svg { width: 16px; height: 16px; }
.av-faq-item summary .av-ico { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; }
.av-faq-item summary .av-ico svg { width: 14px; height: 14px; }
.av-email .av-ico { flex: 0 0 28px; width: 28px; height: 28px; background: rgba(232,183,58,0.18); border-color: rgba(232,183,58,0.32); color: var(--boss-ouro); }
.av-email .av-ico svg { width: 15px; height: 15px; }

/* a marca do topo da tela: ícone grande, ou a arte do botão */
/* `column` e nao a linha padrao do flex: com a linha, o NOME do botao
   nasce AO LADO da arte em vez de embaixo dela, e num cartao largo ele
   encavala na imagem. */
.av-capa-marca {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: var(--e3);
}
.av-capa-marca .av-ico {
  flex: 0 0 68px; width: 68px; height: 68px; border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.av-capa-marca .av-ico svg { width: 34px; height: 34px; }
.av-capa-arte {
  width: min(100%, 260px); height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
}
/* A ARTE QUADRADA ENTRA MENOR, e nao e capricho: na mesma largura de 260 px
   um 1:1 tem 260 de altura contra 193 do 4:3, e ele engole a capa inteira.
   O Boss viu na tela: *"os botoes no formato de atalho estao muito grande
   quando abrimos as abas deles"*. Em 150 px ele ocupa quase a mesma altura
   que o retangular, e as telas voltam a parecer irmas. */
.av-capa-arte.quadrada {
  width: min(58%, 150px);
  border-radius: 14%;
}

/* ── O TÓPICO CLICÁVEL (o "Problemas? Fale com o Boss") ───────────────── */
.av-topico-clicavel {
  width: 100%; cursor: pointer; text-align: left;
  align-items: center;
  font: inherit; color: inherit;
}
.av-topico-clicavel:active { transform: scale(0.99); }
.av-topico-seta { flex: 0 0 15px; color: var(--texto-fraco); }
.av-topico-seta svg { width: 15px; height: 15px; }

/* ── A IDENTIDADE DO MEMBRO ───────────────────────────────────────────
   O nome que ele cadastrou na CARTEIRA, o selo de verificado ao lado e a
   validade logo abaixo. Ficou no lugar do rótulo "tudo liberado pra você",
   que o Boss mandou tirar em 16/09: *"Aquilo de tudo liberado não precisa,
   e assim podemos subir um pouco os botões"*. E é uma troca boa - o rótulo
   dizia o óbvio, isto diz de quem é a conta e até quando ela vale. */
.av-id {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 0 var(--e4);
}
/* ⚠️ UMA LINHA SÓ: nome · selo · expira em N dias.
   O Boss pediu em 16/09 *"Expira em e os dias deve ficar ao lado do nome
   verificado, mas sem sobscrever informações, hoje está sobreescrevendo"*.
   O `flex-wrap` é o que cumpre a segunda metade do pedido: num 320, com um
   nome comprido, o expira CAI PRA LINHA DE BAIXO em vez de espremer o nome
   ou passar por cima dele. Ao lado quando cabe, embaixo quando não cabe -
   nunca sobreposto. */
.av-id-linha {
  display: flex; align-items: center; justify-content: center;
  gap: var(--e2) var(--e3); flex-wrap: wrap; max-width: 100%;
  row-gap: 2px;
}
/* o nome é do legado (#mb-vip-nome); aqui ele só ganha o tamanho certo */
#screen-vip .av-id-linha .mb-vip-nome {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.32rem; line-height: 1.1; letter-spacing: 0.03em;
  color: var(--texto-forte); text-transform: uppercase;
  overflow-wrap: anywhere; min-width: 0;
  /* o nome PODE encolher (ele quebra linha sozinho), o expira NAO */
  flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere;
}
/* ⚠️ O SELO SEM A BOLA. O legado desenha `.mb-vip-check` como um círculo de
   36px com fundo; o Boss pediu o verificado *"sem aquela borda redonda"*.
   Precisa do #screen-vip pra ganhar do 03-viewer-mobile.css. */
#screen-vip .av-id-linha .mb-vip-check,
#screen-vip .mb-vip-check.av-verificado {
  margin: 0; width: auto; height: auto; flex: 0 0 auto;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; animation: none !important; padding: 0;
  color: var(--boss-ouro); font-size: 0; line-height: 0;
}
#screen-vip .mb-vip-check.av-verificado svg {
  display: block; width: 21px; height: 21px;
  filter: drop-shadow(0 0 5px rgba(232,183,58,0.35));
}
/* quem ainda não cadastrou nome: o convite pra CARTEIRA, no lugar do vazio */
.av-id-convite {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--texto-fraco); text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── O "EXPIRA EM", DISCRETO ──────────────────────────────────────────
   Era uma faixa de cartão, com coroa e número de 1.15rem. Virou uma linha
   de texto: *"Expira em 4 DIAS quero mais discreto, com uma indicação pra
   ele clicar"* (Boss, 16/09). Quem já pagou não precisa de alarme todo
   dia - precisa saber onde olhar. Perto de vencer ele ACENDE, e aí sim
   volta a ser aviso. */
/* ⚠️ `margin: 0` e `width: auto` PRECISAM estar aqui: o `.mb-validade` do
   legado traz `margin: 2px 0 8px` e nasce como bloco de largura inteira, e
   era isso que empurrava o expira pra debaixo do nome (e, com o nome em
   duas linhas, por cima dele). */
#screen-vip .mb-validade.av-expira {
  padding: 0; margin: 0; background: none; border: 0;
  display: inline-flex; width: auto; flex: 0 0 auto;
}
/* o tracinho que separa o selo do expira, sem virar mais um elemento */
#screen-vip .av-id-linha .mb-validade.av-expira::before {
  content: ''; width: 1px; height: 14px; margin-right: var(--e2);
  background: var(--borda); align-self: center; flex: 0 0 1px;
}
/* ⚠️ `flex: 0 0 auto` NOS TRES: no botao e nos dois pedacos de dentro.
   ERA ISTO, e nao o espaco entre as palavras, que fazia o "VER" ser
   impresso EM CIMA do "4 dias" - e eu disse duas vezes que estava
   resolvido porque media os retangulos do NOME e do EXPIRA, que de fato
   nunca se tocaram. O choque era DENTRO do expira.

   O que acontecia: a linha da identidade e um flex, o espaco sobrando era
   menor que o botao, entao o navegador ENCOLHIA o botao (o padrao e
   `flex-shrink: 1`). O texto tem `nowrap` e nao encolhe junto, entao ele
   transbordava por cima do vizinho. Sem poder encolher, o botao inteiro
   cai pra linha de baixo, que e o comportamento certo e o que o Boss
   pediu: ao lado quando cabe, embaixo quando nao cabe, nunca por cima. */
.av-expira-bt {
  display: inline-flex; align-items: baseline; gap: 10px;
  flex: 0 0 auto; width: auto; max-width: 100%; padding: 4px 2px;
  background: none; border: 0; border-radius: var(--canto-m, 12px);
  color: var(--texto-fraco); cursor: pointer;
  font-family: var(--fonte-rotulo);
  transition: color .12s, transform .12s;
}
.av-expira-bt:active { transform: scale(0.98); }
/* rótulo e número no MESMO texto: o espaço é um espaço, não um `gap` */
.av-expira-tx {
  flex: 0 0 auto;
  font-size: 0.76rem; letter-spacing: 0.04em; color: var(--texto-fraco);
  white-space: nowrap;
}
.av-expira-n {
  font-weight: 700; color: var(--texto); text-transform: none;
}
/* a indicação de que dá pra clicar */
.av-expira-ver {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  flex: 0 0 auto;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--boss-ouro); text-transform: uppercase;
}
.av-expira-seta { width: 11px; height: 11px; flex: 0 0 11px; }
/* perto de vencer e vencido: o discreto vira aviso */
.mb-validade.av-expira.perto  .av-expira-n { color: var(--boss-ouro); }
.mb-validade.av-expira.venceu .av-expira-n,
.mb-validade.av-expira.venceu .av-expira-tx { color: var(--boss-vermelho); }
.mb-validade.av-expira.venceu .av-expira-ver { color: var(--boss-vermelho); }

/* ── O CONVITE DO GRUPO E DO DISCORD ─────────────────────────────────── */
.av-convite {
  border: 1px solid var(--borda); border-radius: var(--canto-m, 12px);
  background: rgba(0,200,75,0.07);
  padding: var(--e4); margin: var(--e3) 0 var(--e4);
  display: flex; flex-direction: column; gap: var(--e2); align-items: stretch;
}
.av-convite-aberto { background: rgba(0,200,75,0.12); border-color: rgba(0,200,75,0.45); }
.av-convite-travado { background: rgba(255,71,87,0.08); border-color: rgba(255,71,87,0.35); }
.av-convite-ttl {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.04em;
  color: var(--texto-forte); text-transform: uppercase;
}
.av-convite-ttl svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--boss-ouro); }
.av-convite-travado .av-convite-ttl svg { color: var(--boss-vermelho); }
.av-convite-tx { font-size: 0.88rem; line-height: 1.5; color: var(--texto); }
.av-convite-conta {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-fraco); text-align: center;
}

.av-expira-grande {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 2.1rem; line-height: 1; letter-spacing: 0.02em;
  color: var(--boss-ouro); text-transform: uppercase;
  margin-bottom: var(--e2);
}

/* o desenho ao lado do nome, no cabeçalho da tela de dentro */
.av-tela-nome { display: flex; align-items: center; gap: var(--e2); }
.av-tela-ico { width: 19px; height: 19px; flex: 0 0 19px; color: var(--boss-ouro); }

/* ═══════════════════════════════════════════════════════════════════════
   O OVERLAY DO CÓDIGO, REPINTADO (16/09)
   ═══════════════════════════════════════════════════════════════════════
   Ele é do legado e nasceu ROXO, de uma versão anterior do app. Pedido do
   Boss: *"a tela de lá deve ser personalizada no estilo do aplicativo, lá é
   roxo, nada a ver com a estética atual, continue funcionando"*.

   ⚠️ AQUI SÓ ENTRA COR E FORMA. Nenhuma regra abaixo esconde, move ou
   desliga botão: o ritual do YouTube, o VERIFICAR e a auto-checagem
   continuam exatamente os mesmos. Mexer no comportamento daqui seria mexer
   no que está no ar pela porta dos fundos.
   ═══════════════════════════════════════════════════════════════════════ */

#mb-code-overlay { background: rgba(1,8,3,0.9) !important; }
#mb-code-overlay .mb-code-box {
  background: linear-gradient(160deg, #06180c, #010702) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--canto-g, 18px) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 40px rgba(0,200,75,0.12) !important;
}
#mb-code-overlay .mb-code-title {
  font-family: var(--fonte-titulo) !important; font-weight: 700 !important;
  letter-spacing: 0.04em !important; color: var(--texto-forte) !important;
}
#mb-code-overlay .mb-code-sub {
  font-family: var(--fonte-rotulo) !important;
  letter-spacing: 0.2em !important; color: var(--texto-fraco) !important;
}
#mb-code-overlay .mb-code-value {
  font-family: var(--fonte-titulo) !important;
  color: var(--boss-ouro) !important;
  background: rgba(0,0,0,0.5) !important;
  border: 2px dashed rgba(232,183,58,0.5) !important;
  border-radius: var(--canto-m, 12px) !important;
  text-shadow: 0 0 22px rgba(232,183,58,0.35) !important;
}
#mb-code-overlay .mb-passo {
  font-family: var(--fonte-texto) !important;
  border-color: var(--borda-fraca) !important;
  background: rgba(255,255,255,0.03) !important;
  border-radius: var(--canto-p, 8px) !important;
}
#mb-code-overlay .mb-passo.ok {
  color: #8fe3c4 !important;
  border-color: rgba(0,200,75,0.35) !important;
  background: rgba(0,200,75,0.07) !important;
}
#mb-code-overlay .mb-btn-gold {
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  border-radius: var(--canto-p, 8px) !important;
  background: linear-gradient(135deg, #f3cf63, #c9922a) !important;
  color: #1a1205 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#mb-code-overlay .mb-btn-gold.mb-btn-outline {
  background: rgba(255,255,255,0.05) !important;
  color: var(--boss-ouro) !important;
  border: 1px solid rgba(232,183,58,0.45) !important;
}
#mb-code-overlay .mb-btn-verify {
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  border-radius: var(--canto-p, 8px) !important;
  background: linear-gradient(135deg, #22d964, #009933) !important;
  color: #01230c !important;
  border: 0 !important;
  box-shadow: none !important;
}
#mb-code-overlay .mb-close {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--borda-fraca) !important;
  color: var(--texto) !important;
}
/* o campo escondido da válvula velha continua no DOM, mas invisível */
#mb-code-overlay .mb-vip-row { display: none !important; }

/* o rodapé novo: os dois atalhos no lugar do "ganhei um código" */
.av-ov-pe {
  margin-top: var(--e3); padding-top: var(--e4);
  border-top: 1px solid var(--borda-fraca);
  text-align: center;
}
.av-ov-pe-ttl {
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.9rem;
  color: var(--texto-forte); margin-bottom: 4px;
}
.av-ov-pe-tx {
  font-family: var(--fonte-texto); font-size: 0.82rem;
  color: var(--texto-fraco); margin-bottom: var(--e3);
}
.av-ov-atalhos { display: flex; flex-direction: column; gap: var(--e2); }

/* O roxo também mora no RESULTADO da verificação e nas sub-telas do legado
   (carteira, palpite, liga), que continuam sendo do legado. Aqui só a cor:
   o `#screen-vip` e o `#mb-code-overlay` na frente é o que garante que nada
   disso vaze pra outra tela do app. */
#mb-code-overlay .mb-vr-bar::before {
  background: linear-gradient(90deg, transparent, var(--boss-verde), #7df5ab, transparent) !important;
}
#mb-code-overlay .mb-vr-retry {
  color: var(--texto) !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--borda) !important;
}
#mb-code-overlay .mb-vr-codigo {
  color: var(--boss-ouro) !important;
  background: rgba(232,183,58,0.08) !important;
  border-color: rgba(232,183,58,0.4) !important;
}

/* as sub-telas do legado que continuam vivas dentro da ÁREA VIP:
   a CARTEIRA, o PALPITE e a VAGA NA LIGA */
#screen-vip .mb-sub-card {
  background: rgba(255,255,255,0.035) !important;
  border-color: var(--borda-fraca) !important;
  border-radius: var(--canto-m, 12px) !important;
}
#screen-vip .mb-sub-lbl { font-family: var(--fonte-rotulo) !important; color: var(--boss-ouro) !important; }
#screen-vip .mb-sub-input,
#screen-vip .mb-sub-area {
  border-color: var(--borda) !important;
  border-radius: var(--canto-p, 8px) !important;
  font-family: var(--fonte-texto) !important;
}
#screen-vip .mb-sub-input:focus,
#screen-vip .mb-sub-area:focus { border-color: var(--boss-ouro) !important; outline: none !important; }
#screen-vip .mb-top-btn {
  font-family: var(--fonte-rotulo) !important;
  border-color: var(--borda) !important;
  background: rgba(1,14,4,0.7) !important;
  color: var(--texto) !important;
}
#screen-vip .mb-ajuda-link:hover,
#screen-vip .mb-perks b,
#screen-vip .mb-home-kick,
#screen-vip .mb-sub-lbl { color: var(--boss-ouro) !important; }


/* ── AS SUB-TELAS DO LEGADO NO FORMATO DA ÁREA VIP ─────────────────────
   PALPITES e VAGA NA LIGA são markup do legado que mora dentro da
   `screen-vip`. Em vez de reescrever as duas (elas carregam o
   `enviarPalpite`, o `abrirZapLiga` e o preview da mensagem), o cabeçalho
   delas é REPINTADO no formato da ÁREA VIP: o título vira o título grande,
   a linha de apoio vira o lead, e o risco dourado entra no meio.

   ⚠️ A CARTEIRA VIP fica de fora a pedido do Boss (*"carteira vip mantem
   como esta"*), e por isso nada aqui usa `.mb-sub` genérico: são os dois
   ids, escritos na mão. */
#mb-palpite .mb-sub-back,
#mb-liga .mb-sub-back { display: none; }

#mb-palpite .mb-sub-head,
#mb-liga .mb-sub-head {
  display: block; text-align: center;
  padding: 0; margin: 0 0 var(--e3); border: 0;
}
#mb-palpite .mb-sub-title,
#mb-liga .mb-sub-title {
  display: block; margin: 0;
  font-family: var(--fonte-titulo); font-weight: 700;
  /* o MESMO clamp do `.av-titulo` e do `.cb-titulo` */
  font-size: clamp(2.6rem, 14vw, 3.6rem);
  line-height: 0.92; letter-spacing: 0.02em;
  color: var(--texto-forte); text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
  overflow-wrap: anywhere;
}
/* o risco dourado, sem precisar de elemento novo no HTML do legado */
#mb-palpite .mb-sub-head::after,
#mb-liga .mb-sub-head::after {
  content: ''; display: block;
  width: 54px; height: 2px; margin: var(--e3) auto;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--boss-ouro), transparent);
}
#mb-palpite .mb-sub-lead,
#mb-liga .mb-sub-lead {
  margin: 0 auto var(--e4); max-width: 34ch; text-align: center;
  font-family: var(--fonte-texto); font-size: 0.88rem; line-height: 1.5;
  color: var(--texto);
}


/* ── A CAPA DAS TELAS DE DENTRO ───────────────────────────────────────
   O título grande que faz as telas de dentro (GRUPO VIP, BRINDES, JOGOS
   VIP e as dos 11 botões) terem o MESMO cabeçalho da ÁREA VIP. Os números
   são os mesmos do `.av-titulo` e do `.cb-titulo`: mexeu em um, mexe nos
   três. */
.av-tela-capa { text-align: center; padding: 0 0 var(--e2); }
.av-tela-titulo {
  margin: 0;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(2.6rem, 14vw, 3.6rem);
  line-height: 0.92; letter-spacing: 0.02em;
  color: var(--texto-forte); text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
  overflow-wrap: anywhere;
}
/* a capa já traz o risco; o que vem logo depois não precisa de respiro extra */
.av-tela-capa + .av-capa { padding-top: 0; }

/* ── A LISTA DOS WALLPAPERS ───────────────────────────────────────────
   Duas colunas: um papel de parede é retrato, e em uma coluna só caberia
   um por tela inteira. */
.av-walls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin: var(--e3) 0 var(--e4); }
.av-wall {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e2); border: 1px solid var(--borda);
  border-radius: var(--canto-m, 12px); background: rgba(0,0,0,0.28);
}
.av-wall-mini {
  width: 100%; display: block; border-radius: var(--canto-p, 8px);
  background: rgba(255,255,255,0.04);
  /* sem altura fixa: a proporção é a do arquivo, e wallpaper de celular e de
     PC têm proporções bem diferentes */
}
.av-wall-nome {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.03em; color: var(--texto-forte); text-transform: uppercase;
  overflow-wrap: anywhere;
}
.av-wall-tam {
  font-family: var(--fonte-rotulo); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--texto-fraco); text-transform: uppercase;
}
.av-wall-bt { margin-top: auto; text-align: center; text-decoration: none; display: block; }


/* ── A BARRA DA PROPRIA AREA VIP ──────────────────────────────────────
   Ela e o `.tier-header` do legado, que nasce com
   `justify-content: space-between` e espalhava o VOLTAR, o nome e o resto
   pelos cantos. Mesma correcao das outras 23 barras: tudo gruda na
   esquerda. */
#screen-vip .tier-header { justify-content: flex-start; }
#screen-vip .av-topo-nome { flex: 0 1 auto; }
/* o ✅ e o nome do legado, que o vestirIdentidade leva pro meio da tela,
   nao podem empurrar nada enquanto estao aqui */
#screen-vip .tier-header > .boss-info-btn { margin-left: 0; }

/* a barra das telas de dentro ja e flex-start por nascenca; o nome nao
   cresce, pra o ⓘ ficar colado nele */
.av-tela-topo { justify-content: flex-start; }
.av-tela-nome { flex: 0 1 auto; }

/* o ⓘ das telas de dentro, colado no nome, como nas outras 23 */
.av-tela-info { flex: 0 0 auto; width: 30px; height: 30px; font-size: 0.95rem; }

/* ── A CARTEIRA VIP NO MESMO FORMATO DO PALPITES ──────────────────────
   Tinha dois voltar (o da ÁREA VIP e o `.cart-back` dela) e o título com
   emoji. Agora o voltar é só o de cima, que fecha a carteira e volta pra
   ÁREA VIP, e o título vira o título grande, igual às outras subs. */
#mb-carteira .cart-back { display: none; }
#mb-carteira .cart-head { display: block; text-align: center; padding: 0; margin: 0 0 var(--e3); }
#mb-carteira .cart-title {
  display: block; margin: 0;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(2.6rem, 14vw, 3.6rem); line-height: 0.92; letter-spacing: 0.02em;
  color: var(--texto-forte); text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
}
#mb-carteira .cart-head .boss-info-btn { margin: var(--e2) auto 0; }
#mb-carteira .cart-head::after {
  content: ''; display: block; width: 54px; height: 2px; margin: var(--e3) auto 0;
  border-radius: 2px; background: linear-gradient(90deg, transparent, var(--boss-ouro), transparent);
}
/* sem o desenho ao lado do nome nas telas de dentro (GRUPO VIP, BRINDES...) */
.av-tela-ico { display: none; }

/* ── "JÁ ESTOU NO GRUPO" e "NÃO ESTOU MAIS" ─────────────────────────── */
.av-convite-link {
  background: none; border: 0; padding: 4px 0; cursor: pointer; align-self: center;
  font-family: var(--fonte-rotulo); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-fraco); text-decoration: underline; text-underline-offset: 3px;
}

.av-walls-vazio { grid-column: 1 / -1; text-align: center; padding: var(--e5) 0; color: var(--texto-fraco); font-size: 0.88rem; }

/* ── A FESTA DO ACESSO LIBERADO ─────────────────────────────────────────
   Véu, anel dourado que abre, selo que cresce, duas linhas. Contida de
   propósito. Some sozinha; o `.aberta` só controla o fade. */
#av-festa {
  position: fixed; inset: 0; z-index: 100010;
  display: flex; align-items: center; justify-content: center;
  background: rgba(1,8,3,0.82); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
#av-festa.aberta { opacity: 1; }
.av-festa-caixa { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e2); padding: var(--e5); }
.av-festa-selo {
  width: 96px; height: 96px; color: var(--boss-ouro);
  filter: drop-shadow(0 0 22px rgba(232,183,58,0.55));
  transform: scale(0.4); opacity: 0;
  transition: transform .55s cubic-bezier(.2,1.4,.4,1), opacity .3s ease;
}
.av-festa-selo svg { width: 100%; height: 100%; }
#av-festa.aberta .av-festa-selo { transform: scale(1); opacity: 1; }
.av-festa-anel {
  position: absolute; top: calc(var(--e5) + 48px); left: 50%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border: 2px solid var(--boss-ouro); border-radius: 50%;
  opacity: 0; transform: scale(0.6);
}
#av-festa.aberta .av-festa-anel { animation: avAnel 1.1s ease-out .15s 1; }
@keyframes avAnel {
  0%   { opacity: .9; transform: scale(0.6); }
  100% { opacity: 0;  transform: scale(2.6); }
}
.av-festa-ttl {
  margin-top: var(--e3);
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.8rem, 9vw, 2.6rem); line-height: 1; letter-spacing: 0.04em;
  color: var(--texto-forte); text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
  transform: translateY(10px); opacity: 0; transition: transform .45s ease .2s, opacity .45s ease .2s;
}
#av-festa.aberta .av-festa-ttl { transform: none; opacity: 1; }
.av-festa-tx { font-size: 0.95rem; color: var(--texto); opacity: 0; transition: opacity .4s ease .5s; }
#av-festa.aberta .av-festa-tx { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .av-festa-selo, .av-festa-ttl, .av-festa-tx { transition: none; transform: none; opacity: 1; }
  #av-festa.aberta .av-festa-anel { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   O MENU DO COMEÇO DO BOSS RESPONDE  ·  17/09/2026
   ═══════════════════════════════════════════════════════════════════════

   POR QUE ESTE PEDAÇO MORA AQUI, E NÃO NO LEGADO

   O resto do estilo do BOSS RESPONDE é injetado por JS lá dentro do
   `04-app-principal.js`. Este bloco é CÓDIGO NOVO, e código novo nasce na
   camada nova: o legado só encolhe. O overlay é filho do `<body>`, então
   o seletor é o id dele e nada aqui vaza pra outra tela.

   O que mudou: as duas pílulas com emoji do sistema ao lado do nome
   viraram quatro linhas com o desenho do app, título, subtítulo e, nas
   duas que ainda não existem, o selo EM BREVE. Pedido do Boss em 17/09.
   ═══════════════════════════════════════════════════════════════════════ */

/* a barra de baixo vira COLUNA quando é o menu: quatro linhas inteiras,
   não quatro pílulas embrulhando em duas fileiras tortas */
#boss-responde-overlay #br-input.br-input-menu {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  gap: var(--e2);
  /* num aparelho baixo (ou com o teclado aberto) as quatro linhas não
     podem empurrar a conversa pra fora: daqui pra cima ele rola */
  max-height: 58vh; overflow-y: auto; overscroll-behavior: contain;
}
#boss-responde-overlay .br-menu {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; min-height: 58px; padding: 10px var(--e3);
  border: 1px solid var(--borda); border-radius: var(--canto-m);
  background: #17231c;
  color: var(--texto); text-align: left; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#boss-responde-overlay .br-menu:active { transform: scale(0.99); }
#boss-responde-overlay .br-menu:hover { border-color: rgba(0,200,75,0.55); }

/* o desenho, na mesma caixa dos ícones da ÁREA VIP */
#boss-responde-overlay .br-menu .brm-ico {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--borda);
  background: rgba(0,200,75,0.10);
  color: var(--boss-verde);
}
#boss-responde-overlay .br-menu .brm-ico svg { width: 21px; height: 21px; }

#boss-responde-overlay .br-menu .brm-tx { flex: 1; min-width: 0; }
#boss-responde-overlay .br-menu .brm-ttl {
  display: block;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.04rem; line-height: 1.08; letter-spacing: 0.02em;
  color: var(--texto-forte); text-transform: uppercase;
}
#boss-responde-overlay .br-menu .brm-sub {
  display: block; margin-top: 1px;
  font-family: var(--fonte-texto); font-size: 0.76rem; line-height: 1.25;
  color: var(--texto-fraco);
}

/* EM BREVE: a linha continua acesa e clicável de propósito (ela é o
   anúncio do que vem), só o selo avisa que a resposta ainda não existe */
#boss-responde-overlay .br-menu-breve { border-color: var(--borda-fraca); }
#boss-responde-overlay .br-menu-breve .brm-ico {
  border-color: var(--borda-fraca); background: rgba(255,255,255,0.04);
  color: var(--texto-fraco);
}
#boss-responde-overlay .br-menu-breve .brm-ttl { color: var(--texto); }
#boss-responde-overlay .br-menu .brm-selo {
  flex: 0 0 auto; align-self: center;
  padding: 3px 8px; border-radius: var(--canto-redondo);
  border: 1px solid rgba(232,183,58,0.45);
  background: rgba(232,183,58,0.10);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--boss-ouro); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  #boss-responde-overlay .br-menu { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   AS PRATELEIRAS DE DENTRO  ·  17/09/2026
   ═══════════════════════════════════════════════════════════════════════

   BRINDES, TIER LISTS ESPECIAIS e JOGOS VIP passaram a usar O MESMO botão
   dos 6 grandes da ÁREA VIP (`.mn-cartao`), com arte própria. Pedido do
   Boss: *"vamos fazer igual fizemos para os demais botões do aplicativo"*.

   Não existe cartão novo aqui: existe o mesmo cartão em duas proporções.
   A proporção é escrita no HTML pelo `area-vip.js` (FAIXA e QUADRO), e não
   copiada da arte — numa fileira de 4 onde só um tem desenho, copiar a arte
   deixaria um quadro alto ao lado de três baixos.
   ═══════════════════════════════════════════════════════════════════════ */

/* uma embaixo da outra, largura inteira */
.av-faixas { display: grid; grid-template-columns: 1fr; gap: var(--e3); margin: var(--e3) 0 var(--e4); }
/* a vitrine dos jogos é a MESMA grade de 2 colunas do menu; só a margem é
   daqui, porque ela nasce dentro de uma tela e não do lobby */
.av-vitrine { margin: var(--e3) 0 var(--e4); }

/* ⚠️ OS TRÊS SELETORES, E NÃO SÓ O `#screen-vip`.
   Os ajustes de texto do cartão desta área nasceram com `#screen-vip` na
   frente (o motivo está lá em cima: vencer o `.mn-cartao > :not(...)` do
   menu.css, que pesa 0,4,0). Só que as prateleiras novas NÃO moram dentro
   do `#screen-vip`: a `#av-tela` é filha do <body> e o `#vip-tier-content`
   é tela do legado. Sem os três, a descrição voltava a ser uma linha só com
   reticências e o título encolhia. */
#av-tela .mn-cartao .desc,
#vip-tier-content .mn-cartao .desc {
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  padding-right: 26px;
  font-size: 0.72rem; line-height: 1.2;
}
#av-tela .mn-cartao .titulo,
#vip-tier-content .mn-cartao .titulo { font-size: 1.16rem; line-height: 1.02; }

/* Na FAIXA o texto tem largura de sobra e altura curta: uma linha em cada,
   sem estrangular o título. */
.av-faixas .mn-cartao .titulo { font-size: 1.3rem; }
.av-faixas .mn-cartao .desc { -webkit-line-clamp: 1; padding-right: 34px; }

/* o selo do que ainda não existe. Canto de cima, longe do texto do pé.

   ⚠️ OS DOIS SELETORES COM ID NA FRENTE, PELA MESMA RAZAO DO CADEADO.
   O menu.css tem `.mn-cartao > :not(.mn-cartao-icone):not(.mn-selo):not(.seta)
   { position: relative }`, que pesa (0,4,0) e ganha de `.av-selo-breve`
   (0,1,0). Sem o id, o selo nascia `relative` e caia EM CIMA do titulo do
   quadro - foi exatamente o que aconteceu na primeira medicao de 17/09,
   com "EM BREVE" riscando o "JOGO NOVO". E a terceira vez que esta regra
   do menu.css morde alguma coisa desta tela. */
#av-tela .av-selo-breve,
#vip-tier-content .av-selo-breve {
  position: absolute; z-index: 4; top: 8px; right: 8px;
  padding: 3px 8px; border-radius: var(--canto-redondo);
  border: 1px solid rgba(232,183,58,0.45);
  background: rgba(10,14,10,0.78);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--boss-ouro); white-space: nowrap;
}
/* quadro sem porta: continua legível, só não finge que abre */
.av-sem-porta { cursor: default; border-style: dashed; border-color: var(--borda-fraca); }
.av-sem-porta .titulo { color: var(--texto); }
.av-sem-porta .mn-cartao-icone { opacity: 0.18; }
.av-sem-porta:active { transform: none; }

/* ── O RECADO DE UMA LINHA (BUGADOS E BARATOS) ──────────────────────────
   Pequeno de propósito: ele avisa, não toma a tela. Sai sozinho quando o
   `AVISO_BUGADOS` do area-vip.js ficar vazio. */
.av-recado {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e3);
  padding: 8px var(--e3);
  border: 1px solid rgba(232,183,58,0.32); border-radius: var(--canto-m);
  background: rgba(232,183,58,0.08);
  font-family: var(--fonte-texto); font-size: 0.8rem; line-height: 1.3;
  color: var(--boss-ouro);
}
.av-recado svg { flex: 0 0 15px; width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════════
   O SELETOR CELULAR | PC DOS WALLPAPERS  ·  refeito em 17/09/2026
   ═══════════════════════════════════════════════════════════════════════
   O Boss: *"o botão CELULAR | PC é muito cara de IA, deixe ele caprichado"*.
   Eram dois retângulos iguais com o nome e um número. Virou um seletor de
   duas metades exatas, dentro de uma calha, com o desenho da FORMA do
   arquivo em cada uma (em pé = celular, deitado = PC) e a metade escolhida
   acesa em ouro cheio.
   ═══════════════════════════════════════════════════════════════════════ */
.av-abas {
  display: flex; gap: 4px;
  margin: var(--e3) 0 var(--e3);
  padding: 4px;
  border: 1px solid var(--borda); border-radius: var(--canto-m);
  background: rgba(0,0,0,0.42);
}
.av-aba {
  /* `1 1 0` com `min-width: 0`: sem o zero a metade do "CELULAR" nasce
     maior que a do "PC", porque item de flex se recusa a ficar menor que a
     palavra que tem dentro. Mesma armadilha dos cartões do menu (15/09). */
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 var(--e2);
  border: 1px solid transparent; border-radius: var(--canto-p);
  background: transparent; color: var(--texto-fraco); cursor: pointer;
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.06em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.av-aba-ico { display: flex; }
.av-aba-ico svg { width: 17px; height: 17px; }
.av-aba-nm { white-space: nowrap; }
.av-aba-n {
  min-width: 20px; padding: 1px 5px; border-radius: var(--canto-redondo);
  background: rgba(255,255,255,0.08); color: var(--texto-fraco);
  font-size: 0.7rem; line-height: 1.5;
}
.av-aba.ativa {
  background: linear-gradient(145deg, #f3cf63, #c9922a);
  border-color: rgba(255,235,160,0.45);
  color: #1a1205;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.av-aba.ativa .av-aba-n { background: rgba(12,8,2,0.28); color: #1a1205; }
@media (prefers-reduced-motion: reduce) { .av-aba { transition: none; } }