:root {
  --cor-rosa-neon: #ff2d78;
  --cor-dourado: #ffc93c;
  --cor-branco: #fdfdfd;
  --cor-fundo-escuro: #12081c;
  --cor-erro: #ff3b3b;
  --cor-acerto: #2de37a;
  --margem-topo: clamp(56px, 13vh, 140px);
  --margem-lateral: clamp(20px, 6vw, 60px);
  --margem-base: clamp(48px, 11vh, 120px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--cor-branco);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
}

button, a { font-family: inherit; }

.app-viewport {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

/* --- Telas / navegação --- */
.tela {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  color: var(--cor-branco);
}
.tela-ativa { display: flex; }

.fundo-splash { background-image: linear-gradient(180deg, rgba(18,8,28,.55), rgba(18,8,28,.85)), url("../assets/fundo-splash.jpeg"); }
.fundo-home { background-image: linear-gradient(180deg, rgba(18,8,28,.55), rgba(18,8,28,.9)), url("../assets/fundo-home.jpeg"); }
.fundo-resultado { background-image: linear-gradient(180deg, rgba(18,8,28,.35), rgba(18,8,28,.85)), url("../assets/fundo-resultado-vertical.jpeg"); }
/* Fundo Quiz exclusivo ainda não existe — reaproveitando fundo-home (tem a
   logo) como stand-in até haver uma imagem dedicada. Camadas de background
   são independentes: se esse arquivo for removido, essa camada some e o
   gradiente (última camada) volta a aparecer como placeholder. */
.fundo-quiz {
  background-image:
    linear-gradient(180deg, rgba(18,8,28,.45), rgba(18,8,28,.75)),
    url("../assets/fundo-home.jpeg"),
    radial-gradient(circle at 50% 20%, #3a1550, var(--cor-fundo-escuro) 70%);
}
.fundo-escurecido { background-blend-mode: darken; }

.tela-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--margem-topo) var(--margem-lateral) 12px;
  gap: 8px;
}
.titulo-tela { font-weight: 700; letter-spacing: .5px; }

.tela-centro {
  flex: 1;
  min-height: 0; /* sem isso, flex:1 não limita a altura e o overflow-y do .tela-rolavel nunca ativa (o conteúdo só fica cortado embaixo em vez de rolar) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 var(--margem-lateral);
  text-align: center;
  overflow: hidden;
}
.tela-centro-only { padding-top: var(--margem-topo); padding-bottom: var(--margem-base); justify-content: center; }
.tela-rolavel { justify-content: flex-start; overflow-y: auto; padding-top: 12px; padding-bottom: 36px; }

.tela-rodape {
  padding: 16px var(--margem-lateral) var(--margem-base);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Botões / componentes reutilizáveis --- */
.botao {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.botao-primario {
  background: linear-gradient(135deg, var(--cor-rosa-neon), #c2185b);
  color: var(--cor-branco);
  box-shadow: 0 0 18px rgba(255, 45, 120, .55);
}
.botao-secundario {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--cor-branco);
}
.botao-grande { font-size: 20px; padding: 16px; }
.botao:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.icone-botao {
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: var(--cor-branco);
  font-size: 18px;
  cursor: pointer;
}
.link-botao {
  background: none;
  border: none;
  color: var(--cor-dourado);
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}
.link-rodape { color: var(--cor-branco); opacity: .7; font-size: 13px; text-decoration: underline; }

.linha-botoes { display: flex; gap: 10px; width: 100%; }
.linha-botoes .botao { flex: 1; }

.xp-total { font-weight: 700; color: var(--cor-dourado); }

/* --- Info / Onboarding (só no primeiro acesso) --- */
.logo-topo { width: 96px; height: 96px; object-fit: cover; border-radius: 20px; box-shadow: 0 0 20px rgba(255,201,60,.5); }
.titulo-marca { margin: 12px 0 0; font-size: 28px; }
.subtitulo { opacity: .9; font-weight: 600; }
.card-info {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,201,60,.4);
  border-radius: 16px;
  padding: 14px;
  width: 100%;
}
.card-info p { margin: 6px 0; text-align: left; }
.lista-regras { text-align: left; width: 100%; padding-left: 20px; }
.instrucao { font-weight: 600; opacity: .9; align-self: flex-start; }
.ticker-mini { font-size: 13px; opacity: .7; }

/* Card de benefícios do onboarding: itens em coluna com espaçamento
   consistente (gap) em vez de margem por parágrafo — evita a sensação de
   texto amontoado do card antigo. */
.card-beneficios { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.card-beneficios p { margin: 0; font-size: 14px; font-weight: 600; text-align: left; }

/* Compacta só o Info (logo+título+subtítulo+descrição+card+CTA cabem numa
   tela só, sem precisar rolar em celulares normais — mesma técnica já usada
   na Home: reduz o rodapé, que por padrão usa --margem-base de até 120px). */
#tela-info .tela-centro { gap: 12px; padding-top: 6px; }
#tela-info .tela-rodape { padding-top: 10px; padding-bottom: 20px; }

/* --- Splash --- */
.logo-splash {
  width: 55%;
  max-width: 220px;
  border-radius: 24px;
  animation: crescerBrilhar 1.4s ease-in-out infinite alternate;
}
@keyframes crescerBrilhar {
  from { transform: scale(.92); filter: drop-shadow(0 0 6px var(--cor-dourado)); }
  to   { transform: scale(1.04); filter: drop-shadow(0 0 26px var(--cor-dourado)); }
}

/* --- Home --- */
.card-destaque {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,45,120,.25), rgba(255,201,60,.15));
  border: 1px solid var(--cor-rosa-neon);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.etiqueta { font-size: 12px; letter-spacing: .5px; opacity: .8; }
.ticker { width: 100%; overflow: hidden; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); padding: 8px 0; }
.ticker-texto { margin: 0; font-size: 13px; opacity: .85; }
.banner-anuncio {
  width: 100%;
  min-height: 48px;
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: .6;
}

/* Home compacta: reduz espaçamentos só nessa tela pra tudo caber sem rolar.
   A classe .tela-rolavel continua no HTML como rede de segurança (só passa a
   rolar de fato se ainda sobrar conteúdo em telas muito baixas). */
#tela-home .tela-topo { padding-top: 20px; padding-bottom: 8px; }
#tela-home .tela-centro { gap: 10px; padding-top: 4px; padding-bottom: 4px; }
#tela-home .tela-rodape { padding-top: 6px; padding-bottom: 18px; }
#tela-home .botao-grande { padding: 12px; font-size: 18px; }
#tela-home .card-meta-diaria,
#tela-home .card-destaque { padding: 10px 14px; }
.home-header-stats { display: flex; gap: 12px; }

/* --- Navegação principal (bottom nav, arquitetura de interface V1) ---
   position:absolute relativo ao .app-viewport (que já é position:relative,
   ver topo do arquivo) — fica preso à "moldura de celular" mesmo em telas
   largas, igual à técnica já usada nos overlays de feedback. */
.nav-principal {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: rgba(18,8,28,.97);
  border-top: 1px solid rgba(255,201,60,.3);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
}
.nav-principal:not([hidden]) { display: flex; }
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--cor-branco);
  opacity: .6;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 2px;
  min-height: 44px;
}
.nav-item-icone { font-size: 17px; }
.nav-item-label { font-size: 9px; font-weight: 600; letter-spacing: -.1px; }
.nav-item-ativo { opacity: 1; color: var(--cor-dourado); }
/* 6 itens (Início/Treinar/Concursos/Comunidade/Ranking/Perfil) em telas
   bem estreitas — encolhe mais um pouco só nesse ponto de corte, sem
   afetar o restante do layout. */
@media (max-width: 360px) {
  .nav-item { padding: 6px 0; }
  .nav-item-icone { font-size: 15px; }
  .nav-item-label { font-size: 8px; }
}
/* Telas com a bottom nav precisam de espaço extra embaixo pra o último
   card não ficar escondido atrás dela. */
.tem-nav-principal .tela-centro { padding-bottom: 84px; }

/* --- Central de Concursos (V2: dado real, migration 0055) --- */
.lista-concursos { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.card-concurso {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}
.card-concurso-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.card-concurso-nome { font-weight: 700; }
.card-concurso-status { font-size: 12px; opacity: .9; white-space: nowrap; }

/* --- Central de Simulados --- */
.grade-simulados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.card-simulado {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,201,60,.4);
  border-radius: 14px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--cor-branco);
  cursor: pointer;
  text-align: center;
  min-height: 72px;
}
.card-simulado-titulo { font-weight: 700; font-size: 13px; }
.card-simulado-detalhe { font-size: 12px; opacity: .75; }
.card-simulado-bloqueado { opacity: .45; cursor: not-allowed; border-color: rgba(255,255,255,.25); }

/* --- Perfil: resumo + conquistas --- */
.card-resumo-perfil { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
.resumo-perfil-item { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; flex: 1; }

/* --- Categorias --- */
.grade-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.categoria-card {
  min-height: 96px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: var(--cor-branco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  padding: 10px 4px;
}
.categoria-card .icone-categoria { font-size: 26px; }
.categoria-card .selo-nivel-categoria { font-size: 10px; opacity: .75; }
.categoria-card .progresso-materia { font-size: 9px; opacity: .6; }
.categoria-card-bloqueada { opacity: .45; cursor: not-allowed; }
.categoria-card:not(.categoria-card-bloqueada):active { border-color: var(--cor-dourado); }

/* 12 matérias (algumas com nome de 2-3 palavras, ex. "Administração
   Pública") deixam 3 colunas apertadas demais em telas bem estreitas —
   .app-viewport já é limitado a max-width:480px (ver topo do arquivo), então
   "desktop" e a maioria dos celulares caem na grade de 3 colunas padrão;
   só o recorte de telas realmente pequenas (<380px) cai pra 2 colunas, pra
   nenhum card ficar cortado ou com texto espremido. */
@media (max-width: 380px) {
  .grade-categorias { grid-template-columns: repeat(2, 1fr); }
}

/* --- Quiz --- */
.barra-status {
  display: flex;
  justify-content: space-between;
  padding: 2px var(--margem-lateral);
  font-size: 14px;
}
/* Cabeçalho bem mais enxuto nas duas telas de questão (Quiz e Prática de
   Aula) — a regra-base .tela-topo usa var(--margem-topo), que sozinha já
   chega a 56-140px de espaço vazio ANTES do título, pensado pra telas
   decorativas (Splash/Info/Resultado). Numa tela funcional e densa como
   pergunta+alternativas, esse espaço custa altura útil de verdade — um
   valor fixo pequeno sobe o bloco inteiro (contador+pergunta+
   alternativas) sem depender de viewport, igual em mobile e desktop. O
   padding inferior (12px, herdado da regra-base) continua de pé — é a
   margem confortável abaixo do título, não faz parte do problema. */
#tela-quiz .tela-topo,
#tela-pratica-licao .tela-topo {
  padding-top: 16px;
}
#tela-quiz .tela-topo { padding-bottom: 8px; }
#tela-quiz .tela-rodape.barra-ajudas { padding-top: 10px; }
/* Tela de Quiz: pergunta ancorada no topo (não centralizada no meio da
   tela), opções em grade 2x2 abaixo — visual de "telão" estilo game show.
   Grade em vez de coluna porque em pé (4 barras empilhadas) a lista não
   cabia inteira acima da barra de ajudas em telas normais de celular; 2x2
   usa metade da altura pro mesmo conteúdo. */
#tela-quiz .tela-centro {
  justify-content: flex-start;
  padding-top: 8px;
  padding-bottom: 16px;
  gap: 8px;
  /* Correção de corte em viewports baixas: a regra-base .tela-centro usa
     overflow:hidden sem rede de segurança de scroll (mesma causa raiz já
     corrigida em #tela-resultado). Aqui o conteúdo já fica ancorado no
     topo (flex-start), então overflow-y:auto só entra em ação quando telão
     + grade de opções + barra de ajudas não couberem de verdade — nunca
     mais escondido, sempre rolável. padding-bottom garante que a última
     alternativa nunca fique colada na barra de ajudas fixa logo abaixo. */
  overflow-y: auto;
}
/* Mesma correção de corte da tela de Quiz, aplicada à Prática de Aula
   (V2) — essa tela nunca tinha nenhuma rede de segurança de scroll
   própria (só herdava a regra-base .tela-centro: overflow:hidden +
   justify-content:center, que corta os dois lados igualmente quando o
   conteúdo não cabe). flex-start (mesmo padrão do Quiz, trocado de "safe
   center") ancora o bloco logo abaixo do contador em vez de centralizar
   com espaço vazio sobrando acima — aproveita o espaço liberado pelo
   cabeçalho mais enxuto; overflow-y:auto garante rolagem de verdade só
   quando o conteúdo realmente não cabe, nunca escondido. */
#tela-pratica-licao .tela-centro {
  justify-content: flex-start;
  overflow-y: auto;
  padding-top: 8px;
  padding-bottom: 16px;
  gap: 8px;
}
/* Causa raiz real do corte reportado: .telao-pergunta é flex e o <p> lá
   dentro (#texto-pergunta/#pratica-licao-texto) não tem classe nem regra
   própria — item flex tem min-width:auto por padrão, ou seja, se recusa
   a encolher abaixo da largura que o texto ocuparia numa linha só. Com
   overflow:hidden herdado em .tela-centro, isso corta a pergunta (e
   arrasta o resto do bloco) em vez de quebrar linha. min-width:0 desliga
   essa trava; width:100% garante que ocupe a coluna inteira disponível
   pra quebrar cedo, igual ao que já foi feito em .opcao-texto. */
.telao-pergunta p {
  min-width: 0;
  width: 100%;
  overflow-wrap: break-word;
}
.telao-pergunta {
  width: 100%;
  min-height: 68px;
  /* Painel quase opaco (era rgba(0,0,0,.6)) — com .6 o cenário de fundo
     atravessava o texto da pergunta e prejudicava a leitura. */
  background: rgba(8,4,14,.96);
  border: 1px solid rgba(255,201,60,.5);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 0 24px rgba(0,0,0,.5);
}
/* Componente compartilhado por TODAS as questões (Quiz legado e Prática
   de Aula V2 — ambos usam exatamente estas classes, nenhuma duplicata).
   2 colunas só quando cabem de verdade: auto-fit + minmax(N, 1fr) deixa
   o próprio CSS Grid decidir por largura real disponível — em vez de
   sempre forçar 2 colunas (repeat(2, ...) fixo, causa raiz do corte com
   alternativas longas em telas estreitas). N=150px (tentativa anterior)
   ainda deixava 2 colunas cabendo de largura em quase todo celular real
   — só que 150px de coluna é estreito demais pro TEXTO de alternativas
   longas, que aí precisa de 8-10 linhas quebradas e estoura a altura
   disponível mesmo com scroll habilitado (é isso que ainda cortava a
   última opção em algumas perguntas). N=200px força a largura mínima de
   coluna alta o suficiente pra que, na prática, a maioria dos celulares
   (~330-380px de largura útil de conteúdo) já não caiba 2 colunas de
   200px+gap e colapse pra 1 coluna (alternativa ocupa a largura inteira,
   menos linhas quebradas, grade bem mais baixa) — 2 colunas volta a
   aparecer só nos frames mais largos (~420-440px, perto do teto de
   480px do .app-viewport) ou pra alternativas curtas o bastante pra não
   precisar de tanta largura. Nunca produz 3+ colunas nesta tela porque
   .app-viewport nunca passa de 480px de largura (moldura de "celular"
   mesmo em desktop). Validado via medição real de layout (Edge
   headless + getBoundingClientRect), não só visual. */
.grade-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px;
  width: 100%;
}
/* min-height (não height fixo) — cada botão já cresce sozinho conforme o
   texto quebra em mais linhas; sem overflow/white-space/ellipsis em
   nenhum lugar, então o texto nunca é cortado, só ocupa mais altura. */
.opcao-botao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-radius: 16px;
  border: 2px solid var(--cor-dourado);
  /* Levemente mais opaco que antes (.92/.85 → .97/.95) — mesmo motivo do
     .telao-pergunta, só o suficiente pra não deixar o cenário atravessar
     o texto das alternativas. */
  background: linear-gradient(135deg, rgba(30,15,55,.97), rgba(50,20,80,.95));
  color: var(--cor-branco);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(255,201,60,.08);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.opcao-botao:active { transform: scale(.98); border-color: var(--cor-rosa-neon); }
.opcao-botao:disabled { cursor: default; }
.opcao-botao:disabled:not(.opcao-correta):not(.opcao-errada) { opacity: .45; }
.opcao-letra {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(135deg, var(--cor-dourado), #ff9d1f);
  color: var(--cor-fundo-escuro);
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* min-width:0 é o que permite um filho flex quebrar linha de verdade em
   vez de forçar o botão a crescer na largura (min-width:auto é o padrão
   do flexbox); overflow-wrap cobre o caso raro de uma palavra única mais
   larga que a coluna — nunca corta, só quebra. */
.opcao-texto { flex: 1; min-width: 0; overflow-wrap: break-word; }
.opcao-eliminada { visibility: hidden; }

/* Revelação estilo "Jogo do Milhão": a certa acende em verde, a errada
   escolhida acende em vermelho — as outras duas só escurecem (regra acima). */
.opcao-correta {
  border-color: var(--cor-acerto);
  background: linear-gradient(90deg, rgba(45,227,122,.35), rgba(45,227,122,.15));
  box-shadow: 0 0 18px rgba(45,227,122,.65);
}
.opcao-correta .opcao-letra { background: var(--cor-acerto); color: #06210f; }
.opcao-errada {
  border-color: var(--cor-erro);
  background: linear-gradient(90deg, rgba(255,59,59,.35), rgba(255,59,59,.15));
  box-shadow: 0 0 18px rgba(255,59,59,.65);
  animation: opcaoTremor .3s ease-in-out;
}
.opcao-errada .opcao-letra { background: var(--cor-erro); color: #2a0000; }
@keyframes opcaoTremor {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.barra-ajudas { flex-direction: row; justify-content: space-between; }
.botao-ajuda {
  flex: 1;
  min-height: 48px;
  margin: 0 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,201,60,.5);
  background: rgba(255,201,60,.12);
  color: var(--cor-branco);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.botao-ajuda:disabled { opacity: .35; cursor: not-allowed; }
.contador-ajuda { font-size: 10px; opacity: .8; }

/* --- Overlays de feedback (Acerto / Erro / Anúncio / Subida de nível) --- */
.overlay-feedback {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  /* "safe center": centraliza o card quando cabe; se for mais alto que o
     espaço disponível, ancora no topo em vez de cortar topo/rodapé pela
     metade (mesma técnica já usada em #tela-resultado). overflow-y:auto
     é o fallback caso o navegador não reconheça "safe". */
  justify-content: safe center;
  overflow-y: auto;
  gap: 14px;
  text-align: center;
  padding: 24px var(--margem-lateral);
  z-index: 5;
}
/* Precisa ser [hidden] com especificidade maior que ".overlay-feedback"
   sozinha — senão o "display: flex" da classe vence o "display: none" do
   atributo hidden na cascata (mesma especificidade, classe vem depois do
   UA stylesheet) e o overlay nunca some de verdade, só o atributo muda. */
.overlay-feedback:not([hidden]) {
  display: flex;
}
/* Tingimento leve só pra dar o "flash" de cor — o cenário do Quiz (telão +
   alternativas) continua visível FORA do card, por trás do overlay. Dentro
   do card (.overlay-caixa, abaixo) é que o fundo precisa ser praticamente
   opaco pra não prejudicar a leitura — os dois níveis de transparência são
   intencionais e diferentes um do outro. */
.overlay-acerto { background: rgba(45, 227, 122, .22); }
.overlay-erro { background: rgba(255, 59, 59, .25); }
.overlay-subida-nivel { background: rgba(18, 8, 28, .92); }
.overlay-sem-novas { background: rgba(18, 8, 28, .92); }
.overlay-sem-novas .overlay-caixa { gap: 12px; }
.overlay-sem-novas .overlay-titulo { font-size: 19px; line-height: 1.4; }
/* Card de feedback (ACERTOU!/ERROU!, pontos, sua resposta, resposta
   correta, explicação curta, Saiba mais, Continuar) — praticamente opaco
   (era rgba(0,0,0,.6), deixava o cenário/alternativas coloridas
   atravessarem o texto e parecerem "sobrepostas"). Borda dourada discreta
   pra manter a identidade visual (mesmo tom usado no telão da pergunta e
   no painel do Saiba Mais). */
.overlay-caixa {
  background: linear-gradient(165deg, rgba(28,14,44,.97), rgba(9,4,15,.98));
  border: 1px solid rgba(255,201,60,.4);
  border-radius: 20px;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
/* O "Saiba mais" completo pode deixar a caixa mais alta que a tela — sem
   isso o conteúdo de baixo (inclusive o botão Continuar) cortava, mesmo
   problema já corrigido antes na Home (ver .tela-rolavel). */
.overlay-caixa-rolavel { max-height: 88vh; overflow-y: auto; }
.overlay-titulo { font-size: 24px; font-weight: 800; margin: 0; }
.overlay-detalhe { font-size: 16px; margin: 0; }
.overlay-explicacao-curta { font-size: 14px; opacity: .9; line-height: 1.4; }
.selo-nivel { font-size: 64px; margin: 0; }

/* Compactação por ALTURA (não largura) do Quiz e do overlay de feedback,
   pra continuar cabendo em notebooks com pouca altura útil sem cortar
   nada — mesma estratégia já aplicada em #tela-resultado. Só espaço
   (min-height/padding/gap) — a fonte da pergunta/alternativas NUNCA
   reduz aqui: quem resolve o conteúdo não caber é o scroll (overflow-y:
   auto em #tela-quiz/#tela-pratica-licao .tela-centro), não um texto
   menor forçado a caber. */
@media (max-height: 700px) {
  .telao-pergunta { min-height: 52px; padding: 10px; }
  .opcao-botao { min-height: 44px; padding: 8px 10px; }
  .overlay-caixa { padding: 16px 20px; gap: 6px; }
  .overlay-titulo { font-size: 20px; }
  .overlay-detalhe { font-size: 14px; }
  .botao-ajuda { min-height: 42px; }
}
@media (max-height: 600px) {
  .grade-opcoes { gap: 4px; }
  .telao-pergunta { min-height: 44px; padding: 8px; }
  .overlay-caixa { padding: 12px 16px; }
  .overlay-titulo { font-size: 18px; margin-bottom: 2px; }
}

/* --- "Saiba mais" (Matéria/Assunto/Subassunto, explicação, por que a
   correta acerta, por que as erradas erram, dica) ---
   Painel de estudo próprio: cobre a tela inteira com um fundo bem escuro
   (a pergunta/alternativas/CORRETO!/XP de trás não podem "atravessar" o
   texto) e um cartão sólido e opaco por cima — sem transparência, ao
   contrário do resto dos overlays de feedback (que só dão um "flash" de
   cor e deixam o Quiz visível atrás de propósito). z-index acima do resto
   do overlay-feedback (5) pra garantir que fica por cima mesmo se algum
   dia a ordem no DOM mudar. */
.saiba-mais-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px var(--margem-lateral);
  background: rgba(8, 4, 14, .92);
}
.saiba-mais-overlay[hidden] { display: none; }
.saiba-mais-painel {
  width: 100%;
  max-height: 86vh;
  background: linear-gradient(165deg, #201033, #140a20 60%);
  border: 1px solid rgba(255, 201, 60, .3);
  border-radius: 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* cabeçalho e rodapé fixos — só o conteúdo do meio rola */
}
.saiba-mais-cabecalho {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.saiba-mais-titulo { font-size: 16px; font-weight: 800; color: var(--cor-dourado); }
.saiba-mais-fechar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--cor-branco);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.saiba-mais-conteudo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  text-align: left;
  padding: 16px 18px;
  /* Scroll discreto (Firefox); o WebKit/Chromium abaixo cobre o resto. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 201, 60, .4) transparent;
}
.saiba-mais-conteudo::-webkit-scrollbar { width: 6px; }
.saiba-mais-conteudo::-webkit-scrollbar-track { background: transparent; }
.saiba-mais-conteudo::-webkit-scrollbar-thumb { background: rgba(255, 201, 60, .35); border-radius: 3px; }
.saiba-mais-conteudo::-webkit-scrollbar-thumb:hover { background: rgba(255, 201, 60, .55); }
.saiba-mais-rodape {
  flex: 0 0 auto;
  padding: 12px 18px 18px;
}
/* Regras-base (compactas) — usadas hoje pelo detalhe expandido em "Minhas
   Questões Erradas" (renderErros, ui.js), que reaproveita construirBlocoSaibaMais
   sem esse painel novo. Não mexi nessa tela — só no overlay do Quiz. */
.saiba-mais-taxonomia { font-size: 11px; letter-spacing: .5px; opacity: .7; text-transform: uppercase; margin: 0 0 6px; }
.saiba-mais-secao-titulo { font-size: 13px; font-weight: 700; color: var(--cor-dourado); margin: 8px 0 0; }
.saiba-mais-texto { font-size: 14px; line-height: 1.4; margin: 2px 0 0; opacity: .95; }
/* Dentro do painel novo do Quiz: mais espaçamento e line-height pra leitura
   confortável (pedido explícito) — escopado só aqui, não afeta a tela de Erros. */
.saiba-mais-conteudo .saiba-mais-taxonomia {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.saiba-mais-conteudo .saiba-mais-secao-titulo { font-size: 14px; margin: 20px 0 6px; }
.saiba-mais-conteudo .saiba-mais-secao-titulo:first-of-type { margin-top: 0; }
.saiba-mais-conteudo .saiba-mais-texto { font-size: 15px; line-height: 1.7; opacity: 1; color: rgba(255, 255, 255, .92); }

/* --- Resultado --- */
.card-resultado {
  width: 100%;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--cor-dourado);
  border-radius: 18px;
  padding: 20px;
}
.icone-trofeu { font-size: 44px; margin: 0; }
.pontuacao-final { font-size: 22px; font-weight: 800; }
.barra-progresso-nivel {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
  margin: 10px 0 4px;
}
.barra-progresso-preenchimento { height: 100%; background: linear-gradient(90deg, var(--cor-rosa-neon), var(--cor-dourado)); width: 0%; }

/* Correção de corte em viewports de pouca altura (notebooks/desktop com
   pouca altura útil de navegador) — só #tela-resultado, não mexe em
   nenhuma outra tela (inclusive #tela-resultado-simulado, que reaproveita
   .card-resultado mas já tinha sua própria rede de segurança via
   .tela-rolavel desde a Etapa 2).
   Causa raiz: .tela-centro (regra base, no topo deste arquivo) usa
   overflow:hidden + justify-content:center sem nenhuma rede de segurança
   de scroll — diferente de Home/Perfil/Categorias, que já usam a classe
   .tela-rolavel pra isso. #tela-resultado nunca tinha essa classe, então
   em telas baixas o conteúdo simplesmente era cortado (escondido) em vez
   de rolar. */
#tela-resultado .tela-centro {
  overflow-y: auto;
  /* "safe center": centraliza verticalmente quando cabe; se o conteúdo
     for mais alto que o espaço disponível, ancora no topo em vez de
     cortar o topo/rodapé (é o que "justify-content: center" sozinho não
     faz — ele deixaria metade do conteúdo inacessível pra cima e pra
     baixo). overflow-y:auto acima já garante o scroll de qualquer forma,
     mesmo em navegadores que não reconheçam a palavra-chave "safe" (nesse
     caso cai só no "center" normal, sem perder o scroll). */
  justify-content: safe center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Compactação progressiva por ALTURA (não por largura) — mesmo texto,
   mesmas cores/bordas/logo, só menos espaço em branco quando a altura
   útil é curta. Dois degraus: notebooks comuns (ex. 1366x768 com barra
   de endereço/favoritos, sobra bem menos que 768px de altura útil) e
   casos bem apertados (janela pequena, zoom alto, celular em paisagem). */
@media (max-height: 760px) {
  #tela-resultado .tela-topo { padding-top: 18px; padding-bottom: 6px; }
  #tela-resultado .logo-topo { width: 64px; height: 64px; }
  #tela-resultado .card-resultado { padding: 14px; }
  #tela-resultado .card-resultado p { margin: 6px 0; }
  #tela-resultado .icone-trofeu { font-size: 34px; }
  #tela-resultado .tela-centro { gap: 10px; }
  #tela-resultado .tela-rodape { padding-top: 8px; padding-bottom: 16px; }
}

@media (max-height: 620px) {
  #tela-resultado .tela-topo { padding-top: 10px; padding-bottom: 4px; }
  #tela-resultado .logo-topo { width: 44px; height: 44px; }
  #tela-resultado .card-resultado { padding: 10px; }
  #tela-resultado .card-resultado p { margin: 3px 0; font-size: 13px; }
  #tela-resultado .pontuacao-final { font-size: 18px; }
  #tela-resultado .icone-trofeu { font-size: 26px; }
  #tela-resultado .barra-progresso-nivel { margin: 6px 0 2px; }
  #tela-resultado .tela-centro { gap: 8px; }
  #tela-resultado .botao { min-height: 42px; padding: 8px 16px; }
  #tela-resultado .tela-rodape { padding-top: 4px; padding-bottom: 10px; }
}

/* Overlay de "Subida de nível" (dispara em cima do Resultado) — mesma
   proteção defensiva, já que também é position:absolute + inset:0 com
   justify-content:center e conteúdo que poderia, em tese, cortar numa
   viewport extrema. Escopado só no ID (não mexe em .overlay-feedback
   base, que os overlays de Acerto/Erro do Quiz também usam). */
#overlay-subida-nivel {
  overflow-y: auto;
  justify-content: safe center;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* --- Perfil --- */
.linha-perfil { display: flex; align-items: center; gap: 12px; width: 100%; }
.avatar { font-size: 40px; }
.avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.frase-motivacional { text-align: center; width: 100%; font-style: italic; }
.card-resumo-perfil { flex-wrap: wrap; }
.lista-progresso { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.item-progresso { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 13px; }
.item-progresso .barra-progresso-nivel { margin: 0; }
.lista-ranking { width: 100%; text-align: left; padding-left: 20px; }

/* --- Configurações --- */
.linha-config {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.botao-toggle {
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--cor-dourado);
  background: rgba(255,201,60,.15);
  color: var(--cor-branco);
  cursor: pointer;
}

/* --- Motor de preparação (Meta diária, Desempenho, Erros, Evolução,
   Resultado do Simulado) — reaproveita ao máximo .card-info/.item-progresso/
   .barra-progresso-nivel já existentes; só o mínimo de CSS novo pros
   elementos que não têm equivalente. */
.card-meta-diaria { gap: 4px; }
.meta-diaria-titulo { font-weight: 700; }
.meta-diaria-contador { font-size: 18px; font-weight: 800; color: var(--cor-dourado); }
.meta-diaria-texto { opacity: .8; font-size: 12px; }

.linha-config-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
.linha-meta-opcoes { width: 100%; }
.linha-meta-opcoes .botao-toggle { flex: 1; min-height: 40px; padding: 6px 4px; }
.botao-toggle-ativo { background: var(--cor-dourado); color: #2a1400; font-weight: 800; }

.item-desempenho { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; }
.desempenho-linha { margin: 0; opacity: .9; }
.desempenho-evolucao { margin: 2px 0 0; font-weight: 700; }
.desempenho-evolucao-positiva { color: var(--cor-acerto); }
.desempenho-evolucao-negativa { color: var(--cor-erro); }

.lista-erros { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.filtro-materias { flex-wrap: wrap; row-gap: 6px; }
.filtro-materias .botao-toggle { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.item-erro { background: rgba(255,255,255,.06); border-radius: 12px; padding: 12px; text-align: left; font-size: 13px; cursor: pointer; }
.erro-card-cabecalho { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .85; margin: 0 0 6px; }
.erro-status { font-weight: 700; }
.erro-materia-assunto { font-size: 11px; opacity: .7; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .3px; }
.erro-trecho { font-weight: 700; margin: 0 0 6px; }
.erro-linha { margin: 2px 0; }
.erro-detalhe { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); }
.erro-pergunta-completa { font-weight: 700; margin: 0 0 8px; }

.item-evolucao { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.evolucao-qtd { opacity: .6; font-size: 11px; }

/* --- Autenticação (Etapa 2): login/cadastro/recuperação de senha ---
   Reaproveita a paleta e os componentes já existentes (.botao,
   .link-botao, .tela-centro-only) — só os campos de formulário são
   novos, estilizados no mesmo padrão visual escuro/dourado/neon. */
.form-auth { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.campo-texto {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: var(--cor-branco);
  font-size: 15px;
}
.campo-texto::placeholder { color: rgba(255, 255, 255, .55); }
.campo-texto:focus { outline: none; border-color: var(--cor-dourado); box-shadow: 0 0 0 2px rgba(255, 201, 60, .25); }
.mensagem-erro {
  width: 100%;
  background: rgba(255, 59, 59, .15);
  border: 1px solid var(--cor-erro);
  color: var(--cor-branco);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
}
.mensagem-sucesso {
  width: 100%;
  background: rgba(45, 227, 122, .15);
  border: 1px solid var(--cor-acerto);
  color: var(--cor-branco);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
}
.botao[data-carregando="1"] { opacity: .7; pointer-events: none; }

/* Aviso não-bloqueante de falha de sincronização com o servidor
   (Etapa 2) — some sozinho quando a próxima tentativa der certo, ou
   fica ali com um "tentar novamente" sem travar o jogo (seção
   "Estados de rede" do prompt: nunca deixar a aplicação quebrar). */
.mensagem-erro-flutuante {
  margin: 4px var(--margem-lateral) 0;
  width: auto;
  font-size: 12px;
  align-items: center;
  gap: 8px;
}
/* [hidden] precisa vencer o "display" abaixo, senão o elemento nunca
   some de verdade — mesma pegadinha de cascata já documentada em
   ".overlay-feedback:not([hidden])" mais acima neste arquivo. */
.mensagem-erro-flutuante:not([hidden]) { display: flex; justify-content: space-between; }
.mensagem-erro-flutuante .link-botao { min-height: auto; padding: 0; font-size: 12px; }

/* Ranking real (Perfil): estado de carregamento/vazio/erro — texto
   discreto acima da lista, mesma classe .ticker-mini já usada no
   onboarding. Cada linha real do ranking usa esta classe. */
.item-ranking { display: flex; justify-content: space-between; gap: 8px; }
.item-ranking-voce { color: var(--cor-dourado); font-weight: 800; }

/* --- Comunidade da Liga + Central de Notificações (Premium/Fundador,
   migration 0065) --- reaproveita ao máximo .card-info/.card-concurso/
   .botao-toggle/.mensagem-erro/.mensagem-sucesso já existentes; só o
   mínimo de CSS novo pro que não tem equivalente (avatar circular,
   badge do sino, balão de comentário). */
.notif-sino { position: relative; }
.notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--cor-rosa-neon);
  color: var(--cor-branco);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 0 6px rgba(255,45,120,.6);
}

.card-motivacional {
  background: rgba(255,201,60,.12);
  border: 1px solid rgba(255,201,60,.35);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

.comunidade-compor { width: 100%; }
.comunidade-compor textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--cor-branco);
  font-family: inherit;
  font-size: 14px;
}
.comunidade-compor-categorias { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

.lista-comunidade { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.card-post-comunidade {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.card-post-oficial { border-color: var(--cor-dourado); background: rgba(255,201,60,.08); }
.post-comunidade-cabecalho { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.post-comunidade-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cor-rosa-neon), var(--cor-dourado));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--cor-fundo-escuro);
  flex-shrink: 0;
}
.post-comunidade-autor-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.post-comunidade-nome { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-comunidade-meta { font-size: 11px; opacity: .65; }
.selo-oficial, .selo-tier {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.selo-oficial { background: var(--cor-dourado); color: #2a1400; }
.selo-tier { background: rgba(255,255,255,.15); color: var(--cor-branco); }
.post-comunidade-categoria { font-size: 11px; opacity: .75; }
.post-comunidade-texto { font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: break-word; }
.post-comunidade-acoes { display: flex; gap: 16px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.post-comunidade-acao {
  background: none; border: none; color: var(--cor-branco); opacity: .75;
  font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px;
  font-family: inherit;
}
.post-comunidade-acao-ativa { opacity: 1; color: var(--cor-rosa-neon); font-weight: 700; }

.lista-comentarios { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
.card-comentario { background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 12px; text-align: left; }
.card-comentario-resposta { margin-left: 24px; border-left: 2px solid rgba(255,201,60,.4); }
.comentario-cabecalho { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; flex-wrap: wrap; }
.comentario-texto { font-size: 13px; margin-top: 4px; overflow-wrap: break-word; }
.comentario-acoes { display: flex; gap: 12px; margin-top: 6px; }
.comentario-acao { background: none; border: none; color: var(--cor-branco); opacity: .6; font-size: 11px; cursor: pointer; padding: 2px; font-family: inherit; }

.lista-notificacoes { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.card-notificacao {
  width: 100%; text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  color: var(--cor-branco);
  font-family: inherit;
}
.notificacao-nao-lida { border-color: var(--cor-rosa-neon); background: rgba(255,45,120,.08); }
.notificacao-titulo { font-weight: 700; font-size: 13px; }
.notificacao-corpo { font-size: 12px; opacity: .8; margin-top: 2px; }
.notificacao-quando { font-size: 11px; opacity: .55; margin-top: 4px; }

/* --- Biblioteca da Liga (Premium/Fundador, migration 0067) --- */
.card-clicavel { cursor: pointer; }
.card-material {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.material-titulo { font-weight: 700; font-size: 15px; }
.material-meta { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .3px; }
.material-descricao { font-size: 13px; opacity: .9; }
.material-atualizado { font-size: 11px; opacity: .55; }
.selo-bloqueado {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: var(--cor-branco);
}

/* --- Leitor da Liga (PDF.js interno, migration 0068) --- */
.leitor-corpo {
  justify-content: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: hidden;
}
.leitor-canvas-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,.35);
  border-radius: 12px;
}
#leitor-canvas {
  display: block;
  margin: 8px auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  user-select: none;
  -webkit-user-select: none;
}
.leitor-barra-controles {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px var(--margem-lateral) calc(10px + env(safe-area-inset-bottom, 0px));
}
.leitor-barra-controles .icone-botao { flex-shrink: 0; }
#leitor-pagina-indicador { flex: 1; text-align: center; }

@media (min-width: 480px) {
  .app-viewport { border-radius: 24px; margin-top: 12px; height: calc(100vh - 24px); }
}