:root {
  --ink: #0a1628;
  --ink-soft: #1e2a3d;
  --paper: #f4f1ea;
  --paper-soft: #ebe6db;
  --accent: #b03030;
  --accent-soft: #d4a5a5;
  --success: #2d5f3f;
  --success-soft: #c8e0d0;
  --error: #8b2222;
  --error-soft: #f0d4d4;
  --warning: #9c6f1a;
  --warning-soft: #f5e6c8;
  --gold: #b8893e;
  --lp-nav: 52px;   /* altura da barra do topo da landing */

  /* ---- camada semantica ----
     Os tokens de marca acima nao mudam nunca: o app inteiro depende deles.
     Estes aqui dizem PAPEL (fundo, texto, linha) em vez de cor, e sao os
     unicos que o tema escuro sobrescreve. E o que a landing usa. */
  color-scheme: light;
  --bg: var(--paper);
  --bg-alt: rgba(235,230,219,.42);
  --surface: #fdfaf4;              /* cartoes */
  --campo: #fff;                   /* input e select */
  --texto: var(--ink);
  --texto-soft: var(--ink-soft);
  --linha: var(--paper-soft);
  --realce: var(--accent);
  --realce-fraco: rgba(176,48,48,.05);
  --fita-bg: var(--accent);
  --fita-fg: #fff;
  --tiktok: #0a1628;
  --facebook: #1877f2;
  --ok: var(--success);
  --ok-fraco: var(--success-soft);
  --gold-uso: var(--gold);
  --aviso: #86610f;          /* alerta do cadastro: o --warning dava 4,3:1 */
  --gold-fraco: rgba(184,137,62,.07);

  /* Estados do app. O --error/--warning cru nao pode aparecer no tema
     escuro: sao cores de marca, invariantes por decisao. Estes sao os
     equivalentes que viram. O sufixo -fraco e preenchimento de estado;
     -painel e fundo de bloco de leitura, mais lavado. */
  --erro: var(--error);
  --erro-fraco: var(--error-soft);
  --erro-painel: #faf3f3;
  --ok-painel: #f4f9f5;
  --aviso-fraco: var(--warning-soft);
  --aviso-painel: #faf6ec;
  /* sobre a faixa escura, que e escura nos DOIS temas */
  --faixa-fg: #fdfaf4;
  --faixa-fg-soft: rgba(253,250,244,.62);
  --faixa-linha: rgba(253,250,244,.28);
  --marca-bg: #fdf0c9;
  --selo-bg: linear-gradient(90deg,#f6e8c8,#efdcae);
  --selo-fg: #7a5a1e;
  --selo-linha: #dcc286;
  --veu: rgba(10,22,40,.55);
  --nav-bg: rgba(244,241,234,.93);
  --faixa-bg: var(--ink);          /* a faixa e escura nos DOIS temas */
  --sombra-1: 0 1px 3px rgba(10,22,40,.04);
  --sombra-2: 0 8px 24px rgba(10,22,40,.06);
  --sombra-3: 0 16px 40px rgba(10,22,40,.12);
  --textura-body:
    radial-gradient(circle at 10% 20%, rgba(176,48,48,.04) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(45,95,63,.04) 0%, transparent 50%);
  --textura-auth:
    radial-gradient(circle at 15% 15%, rgba(176,48,48,.07) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(45,95,63,.07) 0%, transparent 55%);
}

/* ---- tema escuro ----
   Tres estados: sem escolha segue o sistema (media query, sem piscada);
   com escolha o atributo data-tema vence nos dois sentidos. Os valores
   sao os MESMOS nos dois blocos -- mexeu num, mexa no outro.
   Nao ha cor nova: e a mesma paleta com luminancia ajustada, porque o
   #b03030 sobre fundo escuro nao passa contraste. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --bg: #0d1420;
    --bg-alt: #111a28;
    --surface: #16202f;
    --campo: #0f1826;
    --texto: #ece7dc;
    --texto-soft: #a4aebd;
    --linha: #243247;
    --realce: #d96a6a;
    --realce-fraco: rgba(217,106,106,.12);
    --fita-bg: #d96a6a;
    --fita-fg: #2b0f0f;
    --tiktok: #25f4ee;
    --facebook: #4d93ff;
    --ok: #5faa80;
    --ok-fraco: rgba(95,170,128,.16);
    --gold-uso: #d4a45e;
    --aviso: #e8c07a;
    --gold-fraco: rgba(212,164,94,.10);

    --erro: #f0846e;
    --erro-fraco: rgba(240,132,110,.16);
    --erro-painel: rgba(240,132,110,.09);
    --ok-painel: rgba(95,170,128,.10);
    --aviso-fraco: rgba(232,192,122,.16);
    --aviso-painel: rgba(232,192,122,.09);
    --faixa-fg: #fdfaf4;
    --faixa-fg-soft: rgba(253,250,244,.62);
    --faixa-linha: rgba(253,250,244,.28);
    --marca-bg: rgba(212,164,94,.30);
    --selo-bg: linear-gradient(90deg,rgba(212,164,94,.22),rgba(212,164,94,.13));
    --selo-fg: #e8c07a;
    --selo-linha: rgba(212,164,94,.45);
    --veu: rgba(3,7,14,.74);
    --nav-bg: rgba(13,20,32,.92);
    --faixa-bg: #1b2740;
    --sombra-1: 0 1px 3px rgba(0,0,0,.30);
    --sombra-2: 0 8px 24px rgba(0,0,0,.38);
    --sombra-3: 0 16px 40px rgba(0,0,0,.50);
    --textura-body:
      radial-gradient(circle at 10% 20%, rgba(217,106,106,.10) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(95,170,128,.08) 0%, transparent 50%);
    --textura-auth:
      radial-gradient(circle at 15% 15%, rgba(217,106,106,.13) 0%, transparent 55%),
      radial-gradient(circle at 85% 85%, rgba(95,170,128,.10) 0%, transparent 55%);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #0d1420;
  --bg-alt: #111a28;
  --surface: #16202f;
  --campo: #0f1826;
  --texto: #ece7dc;
  --texto-soft: #a4aebd;
  --linha: #243247;
  --realce: #d96a6a;
  --realce-fraco: rgba(217,106,106,.12);
  --fita-bg: #d96a6a;
  --fita-fg: #2b0f0f;
  --tiktok: #25f4ee;
  --facebook: #4d93ff;
  --ok: #5faa80;
  --ok-fraco: rgba(95,170,128,.16);
  --gold-uso: #d4a45e;
  --aviso: #e8c07a;
  --gold-fraco: rgba(212,164,94,.10);

  --erro: #f0846e;
  --erro-fraco: rgba(240,132,110,.16);
  --erro-painel: rgba(240,132,110,.09);
  --ok-painel: rgba(95,170,128,.10);
  --aviso-fraco: rgba(232,192,122,.16);
  --aviso-painel: rgba(232,192,122,.09);
  --faixa-fg: #fdfaf4;
  --faixa-fg-soft: rgba(253,250,244,.62);
  --faixa-linha: rgba(253,250,244,.28);
  --marca-bg: rgba(212,164,94,.30);
  --selo-bg: linear-gradient(90deg,rgba(212,164,94,.22),rgba(212,164,94,.13));
  --selo-fg: #e8c07a;
  --selo-linha: rgba(212,164,94,.45);
  --veu: rgba(3,7,14,.74);
  --nav-bg: rgba(13,20,32,.92);
  --faixa-bg: #1b2740;
  --sombra-1: 0 1px 3px rgba(0,0,0,.30);
  --sombra-2: 0 8px 24px rgba(0,0,0,.38);
  --sombra-3: 0 16px 40px rgba(0,0,0,.50);
  --textura-body:
    radial-gradient(circle at 10% 20%, rgba(217,106,106,.10) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(95,170,128,.08) 0%, transparent 50%);
  --textura-auth:
    radial-gradient(circle at 15% 15%, rgba(217,106,106,.13) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(95,170,128,.10) 0%, transparent 55%);
}
::selection { background: var(--realce); color: var(--fita-fg); }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Nada deve alargar o documento. Quando algo alarga, o navegador ancora os
   elementos "fixed" na largura do DOCUMENTO em vez da tela, e o balao de
   WhatsApp vai parar na faixa escondida a direita -- foi o que a fita de
   abas causava no celular. "clip" nao cria area de rolagem (nao mexe com
   sticky); "hidden" fica de reserva para navegador antigo. */
html { overflow-x: hidden; overflow-x: clip; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.6;
  min-height: 100vh;
  background-image: var(--textura-body);
}
.container { max-width: 920px; margin: 0 auto; padding: 32px 20px; }
header {
  border-bottom: 2px solid var(--texto);
  padding-bottom: 24px;
  margin-bottom: 32px;
  position: relative;
}
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--realce);
  font-weight: 600;
  margin-bottom: 8px;
}
h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--texto);
}
h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--realce);
}
.subtitle {
  margin-top: 12px;
  font-size: 14px;
  color: var(--texto-soft);
  font-weight: 500;
}
.stats-bar {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--texto-soft);
}
.stats-bar span strong {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  display: block;
  color: var(--texto);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.stats-bar .lbl { font-weight: 600; display: block; }
/* A posicao saiu da fileira de estatisticas e virou a legenda da barra:
   ela descreve a barra, nao o desempenho. No meio dos numeros de acerto
   e erro, ela se lia como se fosse mais um deles. */
.progress-wrap { margin-top: 22px; }
.progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 600; color: var(--texto-soft); margin-bottom: 7px;
}
#stat-pos { color: var(--texto); }
.progress-track {
  height: 4px;
  background: var(--bg-alt);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--realce), var(--gold-uso));
  width: 0%;
  transition: width 0.4s ease;
}

.question-card {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 30px 32px 32px;
  margin-bottom: 24px;
  box-shadow: var(--sombra-1), var(--sombra-2);
  position: relative; overflow: hidden;
}
.question-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--realce);
}
/* Numero, area e o botao de marcar numa linha so. O botao era
   position:absolute e passava POR CIMA do numero em tela estreita. */
.q-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}
.q-number {
  font-family: 'Fraunces', serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--realce);
  font-weight: 700;
  margin: 0;
}
.q-meta {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2px;
  background: var(--aviso-fraco);
  color: var(--aviso);
  padding: 3px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 0;
}
.q-statement {
  font-family: 'Fraunces', serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texto);
  margin: 0 0 26px;
  font-weight: 400;
  white-space: pre-line;   /* o texto do banco tem quebras de verdade */
}
.alternatives { display: flex; flex-direction: column; gap: 10px; }
.alt-btn {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--campo);
  border: 1.5px solid var(--linha); border-radius: 4px;
  padding: 13px 16px; width: 100%;
  cursor: pointer; text-align: left; font-family: inherit;
  font-size: 14px; line-height: 1.55; color: var(--texto);
  position: relative; isolation: isolate; overflow: hidden;
  transition: border-color .18s, background .18s, transform .12s;
}
/* O mesmo enchimento de baixo para cima do .lp-btn, em voz baixa: o fundo
   e --realce-fraco, nao --realce. O par isolation + z-index:-1 e o que faz
   o ::before pintar acima do fundo do botao e abaixo do texto, que aqui e
   um no solto e nao daria para envolver num <span>. */
.alt-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--realce-fraco); transform: scaleY(0); transform-origin: bottom;
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
.alt-btn:hover:not(:disabled)::before { transform: scaleY(1); }
.alt-btn:hover:not(:disabled) { border-color: var(--texto); transform: translateX(2px); }
.alt-btn:focus-visible { outline: 3px solid var(--gold-uso); outline-offset: 2px; }
.alt-btn:disabled { cursor: default; }

/* a letra vira ficha redonda: e a .lp-alt-marca da landing, em versao solida */
.alt-letter {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; line-height: 1;
  background: var(--linha); color: var(--texto-soft);
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.alt-btn:hover:not(:disabled) .alt-letter { background: var(--realce-fraco); color: var(--realce); }

.alt-btn.selected { border-color: var(--texto); background: var(--bg-alt); }
.alt-btn.selected .alt-letter { background: var(--texto); color: var(--bg); }
.alt-btn.correct { border-color: var(--ok);   background: var(--ok-fraco); }
.alt-btn.wrong   { border-color: var(--erro); background: var(--erro-fraco); }
.alt-btn.correct .alt-letter { background: var(--ok);   color: var(--fita-fg); }
.alt-btn.wrong   .alt-letter { background: var(--erro); color: var(--fita-fg); }

/* A cor nunca decide sozinha: quem nao separa vermelho de verde le o glifo. */
.alt-btn.correct, .alt-btn.wrong { padding-right: 40px; }
.alt-btn.correct::after, .alt-btn.wrong::after {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 700; line-height: 1;
}
.alt-btn.correct::after { content: '\2713'; color: var(--ok); }
.alt-btn.wrong::after   { content: '\2715'; color: var(--erro); }

.alt-btn.faded { opacity: .75; }
.alt-btn.faded .alt-letter { background: transparent; border-color: var(--linha); color: var(--texto-soft); }

.feedback {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: 4px;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--texto);
  background: var(--bg-alt);
  display: none;
  animation: fadeIn 0.3s ease;
}
.feedback.show { display: block; }
.feedback.success-fb { border-left-color: var(--ok);    background: var(--ok-painel); }
.feedback.error-fb   { border-left-color: var(--erro);  background: var(--erro-painel); }
.feedback.warn-fb    { border-left-color: var(--aviso); background: var(--aviso-painel); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fb-headline {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.fb-headline.ok { color: var(--ok); }
.fb-headline.no { color: var(--erro); }
.fb-headline.an { color: var(--aviso); }
.fb-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.fb-section:first-of-type { border-top: none; padding-top: 0; }
.fb-section h4 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-soft);
  margin-bottom: 10px;
  font-weight: 700;
}
.fb-section p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--texto);
}
.fb-alt {
  font-size: 13.5px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 3px;
  border-left: 3px solid var(--linha);
  line-height: 1.6;
}
.fb-alt.ok { border-color: var(--ok);   background: var(--ok-painel); }
.fb-alt.no { border-color: var(--erro); background: var(--erro-painel); }
.fb-alt strong {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px;
  color: var(--texto); margin-right: 4px;
}

.nav-bar {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.nav-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1.5px solid var(--texto);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.nav-btn:hover:not(:disabled) { background: var(--texto); color: var(--bg); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.nav-btn.primary { background: var(--texto); color: var(--bg); }
.nav-btn.primary:hover { background: var(--realce); border-color: var(--realce); }

.q-jumper {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  padding: 14px;
  background: var(--surface);
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--linha);
}
.q-jumper button {
  aspect-ratio: 1;
  border: 1px solid var(--linha);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  color: var(--texto-soft);
  transition: background .12s, color .12s, border-color .12s, transform .12s;
  font-family: inherit;
}
.q-jumper button:hover {
  background: var(--realce-fraco); border-color: var(--realce);
  color: var(--realce); transform: translateY(-1px);
}
.q-jumper button:focus-visible { outline: 3px solid var(--gold-uso); outline-offset: 1px; }
.q-jumper button.current {
  background: var(--texto);
  color: var(--bg);
  border-color: var(--texto);
}

/* Legenda da grade. Sem ela as cores da grade so faziam sentido para quem
   ja sabia o que significavam. Troca sozinha no simulado aberto, onde
   ainda nao existe certo nem errado. */
.q-legenda {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 0 2px;
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: 600; color: var(--texto-soft);
}
.q-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.q-legenda i { flex: none; width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--linha); }
.q-legenda .lg-cu i { background: var(--texto);       border-color: var(--texto); }
.q-legenda .lg-ok i { background: var(--ok-fraco);    border-color: var(--ok); }
.q-legenda .lg-no i { background: var(--erro-fraco);  border-color: var(--erro); }
.q-legenda .lg-an i { background: var(--aviso-fraco); border-color: var(--aviso); }
.q-legenda .lg-mk i { box-shadow: inset 0 -3px 0 var(--gold-uso); }
.q-legenda .t-sim { display: none; }
.q-legenda.sim .t-sim { display: inline; }
.q-legenda.sim .t-estudo, .q-legenda.sim .lg-ok, .q-legenda.sim .lg-no { display: none; }
.q-jumper button.answered-ok { background: var(--ok-fraco); border-color: var(--ok); color: var(--ok); }
.q-jumper button.answered-no { background: var(--erro-fraco); border-color: var(--erro); color: var(--erro); }
.q-jumper button.answered-an { background: var(--aviso-fraco); border-color: var(--aviso); color: var(--aviso); }

footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-soft);
}

/* ---------- Autenticação local ---------- */
#auth-screen {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  background-image: var(--textura-auth);
  scrollbar-color: var(--linha) transparent;
  /* flex-start + margin auto no cartão: centraliza quando cabe e permite
     rolar até o topo quando o formulário é mais alto que a tela */
  /* A landing mora aqui dentro: esta tela ja era o painel de tela cheia
     de quem nao esta logado. Empilhar as secoes em coluna evita criar uma
     segunda tela e deixa boot/login/logout intactos. */
  display: flex; flex-direction: column;
  padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.auth-card {
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 4px;
  box-shadow: var(--sombra-1), var(--sombra-3);
  padding: 40px 36px;
  width: 100%; max-width: 440px;
  position: relative;
}
.auth-card::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 4px; height: 100%; background: var(--realce); border-radius: 4px 0 0 4px;
}
.auth-card h2 {
  font-family: 'Fraunces', serif; font-size: 30px; font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px;
}
.auth-card h2 em { font-style: italic; font-weight: 400; color: var(--realce); }
.auth-sub { font-size: 13px; color: var(--texto-soft); margin-bottom: 24px; }
.auth-tabs {
  display: flex; gap: 6px; margin-bottom: 22px;
  position: sticky; top: var(--lp-nav); z-index: 2;   /* logo abaixo da barra da landing */
  background: var(--surface); padding: 8px 0;
}
.auth-tabs button {
  flex: 1; font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 10px;
  border: 1.5px solid var(--linha); background: transparent;
  color: var(--texto-soft); cursor: pointer; border-radius: 3px; transition: all .15s;
}
.auth-tabs button.on { background: var(--texto); color: var(--bg); border-color: var(--texto); }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--texto-soft); margin-bottom: 5px;
}
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 8px; }
.phone-row select {
  font-family: inherit; font-size: 14px; color: var(--texto);
  padding: 11px 8px; border: 1.5px solid var(--linha);
  background: var(--campo); border-radius: 3px; cursor: pointer;
}
.phone-row select:focus { outline: none; border-color: var(--texto); }
.field .hint { font-size: 11px; color: var(--texto-soft); margin-top: 5px; line-height: 1.45; }
.field input {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--texto);
  padding: 11px 13px; border: 1.5px solid var(--linha);
  background: var(--campo); border-radius: 3px; transition: border-color .15s;
}
.field input:focus { outline: none; border-color: var(--texto); }
.auth-btn {
  width: 100%; margin-top: 8px; font-family: inherit; font-size: 13px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  padding: 13px; border: 1.5px solid var(--texto); background: var(--texto);
  color: var(--bg); cursor: pointer; border-radius: 3px; transition: all .15s;
}
.auth-btn:hover { background: var(--realce); border-color: var(--realce); }
/* Nao existia: durante o login o botao fica desabilitado e, sem isto, seguia
   com cara de clicavel -- o :hover acima ainda pintava de realce. */
.auth-btn:disabled { opacity: .55; cursor: default; }
.auth-btn:disabled:hover { background: var(--texto); border-color: var(--texto); }

/* ---------- Entrar com o Google ----------
   Este é o ÚNICO controle da tela que não usa --surface/--texto, e é de
   propósito: as diretrizes de marca do Google fixam o botão em branco (#fff,
   borda #747775, texto #1f1f1f) no tema claro e em #131314 (borda #8e918f,
   texto #e3e3e3) no escuro, com o "G" de quatro cores intacto. Ligar essas
   cores nas variáveis do tema tiraria o botão da norma no primeiro ajuste de
   paleta. O divisor "ou", esse sim, segue o tema como o resto da caixa. */
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 44px; padding: 11px 14px; margin-top: 2px;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .2px;
  background: #fff; color: #1f1f1f; border: 1.5px solid #747775;
  border-radius: 3px; cursor: pointer;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.btn-google:hover  { background: #f7f8f8; box-shadow: var(--sombra-1); }
.btn-google:active { background: #eef0f1; }
.btn-google:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }
.btn-google:disabled { opacity: .6; cursor: progress; }
.btn-google-logo { display: flex; flex: 0 0 18px; }
.btn-google-logo svg { display: block; }
/* Sem `display` aqui de proposito: e o atributo hidden do switchTab que
   esconde, e uma regra de display venceria o hidden. */
.auth-google-dica {
  margin: 9px 2px 0; font-size: 11px; line-height: 1.45;
  color: var(--texto-soft); text-align: center;
}

.auth-ou {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 4px;
  color: var(--texto-soft); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
.auth-ou::before, .auth-ou::after {
  content: ''; flex: 1; height: 1px; background: var(--linha);
}
.auth-msg {
  margin-top: 14px; font-size: 13px; padding: 10px 13px;
  border-radius: 3px; border-left: 3px solid; display: none; line-height: 1.5;
}
.auth-msg.show { display: block; }
.auth-msg.err { border-color: var(--erro); background: var(--erro-fraco); color: var(--erro); }
.auth-msg.ok { border-color: var(--ok); background: var(--ok-fraco); color: var(--ok); }
.auth-note {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linha);
  font-size: 11.5px; line-height: 1.6; color: var(--texto-soft);
}
.auth-note strong { color: var(--aviso); }

/* ---------- Áreas ---------- */
.filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.chip {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .6px;
  padding: 7px 13px; border: 1.5px solid var(--linha); background: var(--surface);
  color: var(--texto-soft); cursor: pointer; border-radius: 20px; transition: all .15s;
}
.chip:hover { border-color: var(--texto-soft); }
.chip.on { background: var(--texto); color: var(--bg); border-color: var(--texto); }
.chip .cnt { opacity: .78; font-size: 10px; margin-left: 4px; }

.q-area {
  display: inline-block; font-size: 10px; letter-spacing: 1.5px;
  background: var(--bg-alt); color: var(--texto-soft);
  padding: 3px 10px; border-radius: 2px; text-transform: uppercase;
  font-weight: 700; margin-left: 0;
}

/* O assunto fica ao lado da area, mas NAO em caixa alta nem espacado como
   ela: "Rastreamento e lesões do colo uterino" tem cinco palavras, e o
   tratamento da area quebraria a linha do cabecalho. Vira um selo discreto e
   clicavel — o clique filtra o caderno por aquele assunto. */
.q-assunto {
  display: inline-block; font: inherit; font-size: 11px; font-weight: 600;
  background: transparent; color: var(--texto-soft);
  border: 1px solid var(--linha); border-radius: 2px;
  padding: 2px 9px; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.q-assunto:hover { border-color: var(--texto-soft); color: var(--texto); }

/* Ocupa as duas colunas estreitas da .area-row (a da barra e a do
   percentual), senao o botao ficaria espremido em 62px. */
.as-treinar {
  grid-column: 2 / 4; justify-self: end;
  font: inherit; font-size: 11px; font-weight: 600;
  background: transparent; color: var(--texto);
  border: 1px solid var(--linha); border-radius: 2px;
  padding: 3px 12px; cursor: pointer; white-space: nowrap;
}
.as-treinar:hover { border-color: var(--texto); background: var(--bg-alt); }

/* Mesma altura e mesmo peso dos chips, para o seletor de assunto nao parecer
   um corpo estranho no meio da barra de filtros. */
.chip-select {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .6px;
  padding: 7px 13px; border: 1.5px solid var(--linha); background: var(--surface);
  color: var(--texto-soft); cursor: pointer; border-radius: 20px; transition: all .15s;
  max-width: 220px;
}
.chip-select:hover { border-color: var(--texto-soft); }

.area-panel {
  background: var(--surface); border: 1px solid var(--linha); border-radius: 4px;
  padding: 16px 18px; margin-bottom: 16px;
}
.area-panel h4 {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--texto-soft); font-weight: 700; margin-bottom: 12px;
}
.area-row {
  display: grid; grid-template-columns: 1fr 62px 46px; gap: 10px;
  align-items: center; font-size: 12.5px; margin-bottom: 9px;
}
.area-row:last-child { margin-bottom: 0; }
.area-row .nm { color: var(--texto); font-weight: 500; }
.area-bar { height: 6px; background: var(--bg-alt); border-radius: 3px; overflow: hidden; }
.area-bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.area-row .pc {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  text-align: right; color: var(--texto);
}
.area-row .pc.none { color: var(--linha); }

.cfg-box {
  display: none; margin-top: 18px; padding: 16px;
  background: var(--campo); border: 1.5px dashed var(--linha); border-radius: 4px;
}
.cfg-box h4 {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; margin-bottom: 4px;
}
.cfg-box p { font-size: 11.5px; color: var(--texto-soft); line-height: 1.6; margin-bottom: 12px; }
.cfg-link {
  display: block; width: 100%; margin-top: 14px; background: none; border: none;
  font-family: inherit; font-size: 12px; color: var(--texto-soft);
  cursor: pointer; text-decoration: underline;
}
.user-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--linha); border-radius: 4px;
}
.ub-eu { display:flex; align-items:center; gap:11px; min-width:0; }
.ub-foto {
  width:44px; height:44px; border-radius:50%; flex:0 0 44px; cursor:pointer;
  background:var(--texto); color:var(--bg); border:2px solid var(--linha);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:'Fraunces',serif; font-weight:900; font-size:17px; padding:0;
  transition:border-color .15s, transform .12s;
}
.ub-foto:hover { border-color:var(--realce); transform:scale(1.04); }
.ub-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.ub-foto.premium { border-color:var(--gold-uso); box-shadow:0 0 0 2px var(--gold-fraco); }
.selo-premium {
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
  color:var(--selo-fg); background:var(--selo-bg);
  border:1px solid var(--selo-linha); border-radius:20px; padding:2px 9px;
}
.selo-free {
  display:inline-block; margin-top:3px; font-size:9.5px; letter-spacing:1.4px;
  text-transform:uppercase; font-weight:700; color:var(--texto-soft);
  border:1px solid var(--linha); border-radius:20px; padding:2px 9px;
}
.ub-menu-wrap { position:relative; }
.ub-kebab {
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:17px;
  background:transparent; border:1.5px solid var(--texto-soft); color:var(--texto-soft);
  line-height:1; transition:all .15s;
}
.ub-kebab:hover, .ub-kebab.on { background:var(--texto); color:var(--bg); border-color:var(--texto); }
/* Mesmo diametro do kebab: os dois formam um par no canto da barra, e a
   borda redonda os separa dos selos retangulares do .acts. */
.ub-tema {
  width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer; padding:0;
  background:transparent; border:1.5px solid var(--texto-soft); color:var(--texto-soft);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.ub-tema:hover { background:var(--texto); color:var(--bg); border-color:var(--texto); }
.ub-tema:focus-visible { outline:3px solid var(--gold-uso); outline-offset:2px; }
.ub-tema svg {
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.ub-menu {
  display:none; position:absolute; right:0; top:46px; z-index:60; min-width:216px;
  background:var(--surface); border:1px solid var(--linha); border-radius:6px;
  box-shadow:var(--sombra-3); overflow:hidden; padding:6px 0;
}
.ub-menu.open { display:block; animation:fadeIn .14s ease; }
.ub-menu button {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font-family:inherit; font-size:13.5px; color:var(--texto); background:transparent;
  border:none; padding:11px 16px; cursor:pointer;
}
.ub-menu button:hover { background:var(--bg); }
.ub-menu button.danger { color:var(--erro); }
.ub-menu .sep { height:1px; background:var(--bg-alt); margin:6px 0; }
.ub-menu .ico { width:18px; text-align:center; opacity:.75; }

/* ==================== STREAK E LEMBRETES ==================== */
/* O selo mora dentro do .acts de proposito. A barra do usuario no celular
   foi trabalhosa (secao 5g) e a linha de cima ja carrega identidade, tema e
   kebab; um quarto item ali sobra a 320px. Dentro do .acts ele fica a
   direita do nome no computador e desce com os selos no celular, sem
   mexer em uma linha sequer do layout existente. */
.streak-badge {
  display:inline-flex; align-items:center; gap:5px; flex:none;
  font-family:inherit; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; padding:3px 11px 3px 9px; cursor:pointer;
  background:transparent; color:var(--texto-soft);
  border:1px solid var(--linha); border-radius:20px;
  transition:color .18s, border-color .18s, background .18s;
}
.streak-badge svg { width:13px; height:13px; flex:none; fill:currentColor; }
.streak-badge b { font-family:'Fraunces',serif; font-size:14px; letter-spacing:0; }
/* aceso = ha streak vivo. Apagado = zero, e ai o fogo e so uma promessa.
   A cor do texto e --selo-fg, nao --gold-uso: ouro puro sobre o creme da
   barra da 3,00:1 e reprova. --selo-fg existe exatamente para isto -- e o
   texto do selo Premium, ja auditado nos dois temas -- e da 6,07:1. */
.streak-badge.aceso { color:var(--selo-fg); border-color:var(--selo-linha); background:var(--gold-fraco); }
.streak-badge:hover { border-color:var(--gold-uso); }
.streak-badge:focus-visible { outline:3px solid var(--gold-uso); outline-offset:2px; }
/* Em risco: passou das 18h de Brasilia e o dia ainda nao foi cumprido.
   O bloco global de prefers-reduced-motion desliga esta animacao. */
.streak-badge.risco { animation:streakPulso 2.6s ease-in-out infinite; }
@keyframes streakPulso { 0%,100% { opacity:1; } 50% { opacity:.5; } }

.streak-fanfarra {
  display:none; align-items:center; gap:11px; margin:0 0 18px;
  padding:13px 16px; border-radius:4px; font-size:13.5px; line-height:1.45;
  background:var(--gold-fraco); border:1.5px solid var(--gold-uso); color:var(--texto);
}
.streak-fanfarra.on { display:flex; animation:streakEntra .28s ease both; }
.streak-fanfarra svg { width:20px; height:20px; flex:none; fill:var(--gold-uso); }
.streak-fanfarra b { font-weight:700; }
@keyframes streakEntra { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* O fim das sessoes efemeras reusa o #result-panel do simulado; so estas
   duas pecas nao existiam la. O h4 herda o peso do h3 que ja esta acima. */
.result-panel h4 {
  font-family:'Fraunces',serif; font-size:14px; margin:18px 0 8px;
  color:var(--texto);
}
.fim-acoes {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px;
}
.fim-acoes .dp-cta { margin:0; width:auto; }

/* ==================== BORDAS DA FOTO ====================
   O anel da barra: fora do botao, porque `.ub-foto` tem overflow:hidden.
   Herda o `flex:0 0 44px` que era do botao, senao a barra encolheria a foto. */
.ub-anel { position:relative; display:inline-flex; flex:0 0 44px; }
.ub-anel.on::after {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:2.5px solid var(--borda-cor, transparent); pointer-events:none;
}

/* O retrato grande da aba, onde o desenho da moldura finalmente cabe.
   A 44px ele viraria mancha -- conferido desenhando as seis nesse tamanho. */
.brd-topo { text-align:center; margin:6px 0 18px; }
.brd-foto { position:relative; width:200px; height:200px; margin:0 auto; }
.brd-foto svg {
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
}
.brd-retrato {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:124px; height:124px; border-radius:50%; overflow:hidden;
  background:var(--texto); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:900; font-size:40px;
}
.brd-retrato img { width:100%; height:100%; object-fit:cover; display:block; }
.brd-legenda { margin:8px 0 0; font-size:13px; color:var(--texto-soft); }

.brd-grade {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px;
}
.brd-btn {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; cursor:pointer; font-family:inherit;
  background:transparent; color:var(--texto-soft);
  border:1px solid var(--linha); border-radius:6px;
  transition:border-color .15s, background .15s;
}
.brd-mini { width:44px; height:44px; position:relative; display:block; }
.brd-mini svg {
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:7;
  stroke-linecap:round; stroke-linejoin:round;
}
.brd-nome { font-size:11px; line-height:1.25; text-align:center; }
.brd-btn:hover:not(:disabled) { border-color:var(--texto); background:var(--bg-alt); }
.brd-btn:focus-visible { outline:3px solid var(--realce); outline-offset:2px; }
/* A escolhida usa a mesma marcacao do emblema conquistado -- as duas dizem
   "este e seu", entao tem de ler igual. */
.brd-btn.posta {
  border-color:var(--gold-uso); background:var(--gold-fraco);
  color:var(--texto); font-weight:700;
}
/* Travada aparece apagada, e nao escondida: moldura que voce nao sabe que
   existe nao motiva ninguem -- a mesma razao dos emblemas. */
.brd-btn.travada { opacity:.38; cursor:default; }
.gam-nota-min { font-size:12px; color:var(--texto-soft); margin:10px 0 0; }

/* ==================== FILA DE REVISAO ====================
   Terceiro selo da barra. Herda a forma dos outros dois de proposito -- eles
   sao uma familia e tem de ler como uma -- e se separa pela cor: ouro e o
   streak, a cor do elo e o XP, e o vermelho da marca e "tem coisa vencida
   esperando". Vermelho porque e o unico dos tres que pede acao agora.

   --realce sobre --surface da 5,8:1 no tema claro e 4,9:1 no escuro; os dois
   passam no AA para o texto pequeno do selo. Conferido nos dois temas. */
.rev-badge {
  display:inline-flex; align-items:center; gap:5px; flex:none;
  font-family:inherit; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; padding:3px 11px 3px 9px; cursor:pointer;
  background:var(--realce-fraco); color:var(--realce);
  border:1px solid var(--realce); border-radius:20px;
  transition:color .18s, border-color .18s, background .18s;
}
.rev-badge svg {
  width:13px; height:13px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.rev-badge b { font-family:'Fraunces',serif; font-size:14px; letter-spacing:0; }
.rev-badge:hover { background:var(--realce); color:var(--fita-fg); }
.rev-badge:focus-visible { outline:3px solid var(--realce); outline-offset:2px; }

/* Cumprido: a mesma dupla de cores do streak aceso, e nao um dourado novo.
   --selo-fg existe justamente para ouro sobre o creme da barra (ouro puro ali
   da 3,00:1 e reprova) e ja esta auditado nos dois temas.
   Os dois selos dizem "voce cumpriu", entao tem de ler igual. */
.rev-badge.cumprido {
  color:var(--selo-fg); border-color:var(--selo-linha); background:var(--gold-fraco);
}
.rev-badge.cumprido:hover {
  background:var(--gold-uso); color:var(--fita-fg); border-color:var(--gold-uso);
}
.rev-badge.cumprido:focus-visible { outline-color:var(--gold-uso); }
/* Um icone por estado, trocados pela classe: a seta de "volta" nao serve para
   dizer que acabou. */
.rev-badge .rev-ico-ok { display:none; }
.rev-badge.cumprido .rev-ico { display:none; }
.rev-badge.cumprido .rev-ico-ok { display:block; }

/* O intervalo, logo abaixo do "Acertou"/"Errou". Sem cor propria: ele e
   informacao de servico, e brigar com o verde ou o vermelho do resultado
   ali do lado so tiraria a atencao do que importa, que e o comentario. */
.rev-aviso {
  margin:0 0 12px; padding:7px 11px; border-radius:4px;
  font-size:12.5px; line-height:1.4; color:var(--texto-soft);
  background:var(--bg-alt); border:1px solid var(--linha);
}
.rev-aviso.erro { color:var(--erro); border-color:var(--erro); background:var(--erro-fraco); }

/* ==================== GAMIFICACAO: XP E ELOS ====================
   O selo mora ao lado do de streak, dentro do .acts, pela mesma razao
   documentada la em cima: a barra do usuario no celular ja esta cheia, e
   dentro do .acts o selo desce junto com os outros sem mexer no layout.

   As cores de elo sao as unicas cores literais deste arquivo fora dos tokens
   de marca. Elas identificam o elo -- ouro precisa ser ouro nos dois temas --
   entao ficam como variaveis proprias, com um par claro/escuro cada. */
:root {
  --elo-madeira:#8a6a4a; --elo-ferro:#7d8892; --elo-ouro:#b8893e;
  --elo-esmeralda:#2f8f60; --elo-platina:#3f93a4; --elo-diamante:#5b83d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --elo-madeira:#b08a63; --elo-ferro:#a7b2bd; --elo-ouro:#d4a45e;
    --elo-esmeralda:#5cc48d; --elo-platina:#6fc3d4; --elo-diamante:#8fb0f0;
  }
}
:root[data-tema="escuro"] {
  --elo-madeira:#b08a63; --elo-ferro:#a7b2bd; --elo-ouro:#d4a45e;
  --elo-esmeralda:#5cc48d; --elo-platina:#6fc3d4; --elo-diamante:#8fb0f0;
}

.elo-madeira   { --elo:var(--elo-madeira); }
.elo-ferro     { --elo:var(--elo-ferro); }
.elo-ouro      { --elo:var(--elo-ouro); }
.elo-esmeralda { --elo:var(--elo-esmeralda); }
.elo-platina   { --elo:var(--elo-platina); }
.elo-diamante  { --elo:var(--elo-diamante); }

.gam-badge {
  position:relative; display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:inherit; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; padding:3px 11px 3px 9px; cursor:pointer;
  background:transparent; color:var(--elo,var(--texto-soft));
  border:1px solid var(--linha); border-radius:20px;
  transition:border-color .18s, background .18s;
}
.gam-badge:hover { border-color:var(--elo,var(--linha)); }
.gam-badge:focus-visible { outline:3px solid var(--elo,var(--gold-uso)); outline-offset:2px; }
.gam-badge b { font-weight:700; letter-spacing:1.2px; }
.gam-badge span#gam-xp {
  font-family:'Fraunces',serif; font-size:13px; letter-spacing:0;
  color:var(--texto-soft);
}
/* O anel e a barra fina de progresso ate o proximo elo. Fica na borda de
   baixo do selo: informa sem pedir espaco nenhum. */
.gam-anel {
  position:absolute; left:9px; right:9px; bottom:2px; height:2px;
  background:var(--linha); border-radius:2px; overflow:hidden;
}
.gam-anel i { display:block; height:100%; background:var(--elo,var(--gold-uso)); transition:width .35s ease; }

/* o "+12" que sobe a cada cartao respondido */
.gam-volante {
  position:absolute; left:50%; top:-2px; transform:translateX(-50%);
  font-family:'Fraunces',serif; font-size:13px; letter-spacing:0;
  color:var(--elo,var(--gold-uso)); pointer-events:none;
  animation:gamSobe 1.2s ease-out forwards;
}
@keyframes gamSobe {
  0%   { opacity:0; transform:translate(-50%,4px); }
  22%  { opacity:1; transform:translate(-50%,-6px); }
  100% { opacity:0; transform:translate(-50%,-20px); }
}

/* ---- a aba ---- */
.gam-wrap { max-width:640px; padding-bottom:72px; }   /* o .zap-fab e fixo no canto */
.gam-cabeca {
  padding:22px 24px; border:1px solid var(--linha); border-radius:6px;
  background:var(--surface); margin-bottom:18px;
  border-left:4px solid var(--elo,var(--linha));
}
.gam-elo-nome {
  font-family:'Fraunces',serif; font-size:30px; line-height:1.1;
  color:var(--elo,var(--texto)); margin-bottom:4px;
}
.gam-elo-xp { font-size:13.5px; color:var(--texto-soft); margin-bottom:16px; }
.gam-elo-xp b { font-family:'Fraunces',serif; font-size:17px; color:var(--texto); }
.gam-progresso {
  height:7px; background:var(--bg-alt); border-radius:4px; overflow:hidden;
  border:1px solid var(--linha);
}
.gam-progresso i { display:block; height:100%; background:var(--elo,var(--gold-uso)); transition:width .4s ease; }
.gam-falta { margin-top:9px; font-size:13px; color:var(--texto-soft); }
.gam-falta b { color:var(--texto); }

.gam-hoje {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linha); border:1px solid var(--linha); border-radius:6px;
  overflow:hidden; margin-bottom:26px;
}
.gam-num { background:var(--surface); padding:14px 8px; text-align:center; }
.gam-num b { display:block; font-family:'Fraunces',serif; font-size:24px; color:var(--texto); }
.gam-num span { display:block; margin-top:2px; font-size:11px; color:var(--texto-soft); }
@media (max-width:520px) { .gam-hoje { grid-template-columns:repeat(2,1fr); } }

.gam-titulo {
  font-family:'Fraunces',serif; font-size:18px; font-weight:600;
  margin:0 0 12px; color:var(--texto);
}
.gam-trilha { list-style:none; margin:0 0 26px; padding:0; }
.gam-passo {
  display:flex; align-items:center; gap:12px; padding:9px 4px;
  border-bottom:1px solid var(--linha); opacity:.45;
}
.gam-passo:last-child { border-bottom:none; }
.gam-passo.feito { opacity:1; }
.gam-passo.atual { opacity:1; font-weight:700; }
.gam-bola {
  width:13px; height:13px; flex:none; border-radius:50%;
  background:var(--elo,var(--linha)); box-shadow:0 0 0 3px var(--bg);
}
.gam-passo.atual .gam-bola { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--elo); }
.gam-passo-nome { flex:1; font-size:14px; color:var(--texto); }
.gam-passo-xp { font-family:'Fraunces',serif; font-size:13px; color:var(--texto-soft); }

.gam-nota {
  padding:16px 18px; border:1px solid var(--linha); border-radius:6px;
  background:var(--bg-alt); font-size:13px; line-height:1.55; color:var(--texto-soft);
}
.gam-nota p { margin:0 0 9px; }
.gam-nota p:last-child { margin-bottom:0; }
.gam-nota b { color:var(--texto); }

.gam-vazio { padding:28px 4px; }
.gam-vazio h2 { font-family:'Fraunces',serif; font-size:20px; margin:0 0 8px; color:var(--texto); }
.gam-vazio p { margin:0; font-size:13.5px; line-height:1.55; color:var(--texto-soft); }

/* ---- campeonato semanal (etapa 2) ---- */
.camp-topo {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; font-size:13px; color:var(--texto-soft);
}
.camp-prazo {
  flex:none; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; padding:3px 10px; border-radius:20px;
  border:1px solid var(--linha); color:var(--texto-soft);
}
.camp-recado { flex:1; min-width:200px; }
.camp-recado b { color:var(--texto); }

.camp-tabela {
  list-style:none; margin:0 0 12px; padding:0;
  border:1px solid var(--linha); border-radius:6px; overflow:hidden;
}
.camp-linha {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--surface); border-bottom:1px solid var(--linha); font-size:14px;
}
.camp-linha:last-child { border-bottom:none; }
/* A sua linha. O realce e a borda esquerda, nao fundo colorido: a tabela
   inteira ja e uma lista de nomes e um bloco pintado no meio dela vira ruido. */
.camp-linha.eu { background:var(--bg-alt); box-shadow:inset 3px 0 0 var(--elo,var(--gold-uso)); }
.camp-pos {
  flex:none; width:22px; font-family:'Fraunces',serif; font-size:15px;
  color:var(--texto-soft); text-align:right;
}
.camp-linha:first-child .camp-pos { color:var(--gold-uso); font-weight:600; }
.camp-bola { flex:none; width:9px; height:9px; border-radius:50%; background:var(--elo,var(--linha)); }
.camp-nome { flex:1; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camp-nome i {
  font-style:normal; font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--texto-soft);
}
.camp-xp { flex:none; font-family:'Fraunces',serif; font-size:14px; color:var(--texto); }
.camp-vazio {
  padding:18px 14px; background:var(--surface); font-size:13px;
  line-height:1.5; color:var(--texto-soft);
}

.camp-passada {
  margin:0 0 12px; font-size:13px; color:var(--texto-soft);
}
.camp-passada b { color:var(--texto); }
.camp-regra {
  margin:0 0 26px; padding:12px 14px; border-radius:6px;
  background:var(--bg-alt); border:1px solid var(--linha);
  font-size:12.5px; line-height:1.55; color:var(--texto-soft);
}
.camp-regra b { color:var(--texto); }

/* ---- metas do dia (etapa 3) ---- */
.meta-lista { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px; }
.meta-linha {
  padding:13px 15px; border:1px solid var(--linha); border-radius:6px;
  background:var(--surface);
}
/* Meta cumprida ganha a borda de acento, nao fundo verde: as tres ficam lado a
   lado e um bloco pintado no meio das outras vira ruido. */
.meta-linha.completa { border-color:var(--ok); box-shadow:inset 3px 0 0 var(--ok); }
.meta-cima { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.meta-nome { flex:1; font-size:14px; color:var(--texto); }
.meta-conta { flex:none; font-family:'Fraunces',serif; font-size:14px; color:var(--texto-soft); }
.meta-linha.completa .meta-conta { color:var(--ok); }
.meta-barra {
  height:6px; background:var(--bg-alt); border:1px solid var(--linha);
  border-radius:4px; overflow:hidden;
}
.meta-barra i {
  display:block; height:100%; background:var(--gold-uso); transition:width .4s ease;
}
.meta-linha.completa .meta-barra i { background:var(--ok); }
.meta-baixo { margin-top:9px; min-height:26px; display:flex; align-items:center; }
.meta-premio, .meta-feita {
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
  color:var(--texto-soft);
}
.meta-feita { color:var(--ok); }
.meta-btn {
  font-family:inherit; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; padding:6px 14px; cursor:pointer; border-radius:20px;
  background:var(--texto); color:var(--bg); border:1px solid var(--texto);
  transition:opacity .18s;
}
.meta-btn:hover { opacity:.85; }
.meta-btn:disabled { opacity:.45; cursor:default; }
.meta-btn:focus-visible { outline:3px solid var(--gold-uso); outline-offset:2px; }

.meta-escudos {
  margin:0 0 26px; padding:11px 14px; border-radius:6px;
  background:var(--bg-alt); border:1px solid var(--linha);
  font-size:12.5px; line-height:1.5; color:var(--texto-soft);
}
.meta-escudos b { color:var(--texto); }

/* O selo de fogo quando um protetor esta prestes a ser gasto: nem aceso
   normal, nem em risco -- a sequencia esta viva, mas por um fio. */
.streak-badge.salvando { border-style:dashed; }

/* ---- emblemas (etapa 4) ---- */
.gam-conta {
  font-family:inherit; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; color:var(--texto-soft); margin-left:8px;
}
.emb-grade {
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px;
}
.emb {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 8px; border:1px solid var(--linha); border-radius:6px;
  background:var(--surface); text-align:center; cursor:default;
}
/* Nao conquistado fica visivel, e nao escondido: emblema que voce nao sabe que
   existe nao motiva ninguem. Fica so apagado, sem cor. */
.emb .emb-ico svg { width:26px; height:26px; fill:var(--texto-soft); opacity:.32; }
.emb .emb-nome { font-size:11px; line-height:1.3; color:var(--texto-soft); opacity:.6; }
.emb.tem { border-color:var(--gold-uso); background:var(--gold-fraco); }
.emb.tem .emb-ico svg { fill:var(--gold-uso); opacity:1; }
.emb.tem .emb-nome { color:var(--texto); opacity:1; font-weight:600; }
.emb-ico { position:relative; display:block; line-height:0; }
.emb-vezes {
  position:absolute; right:-8px; top:-5px; font-style:normal;
  font-family:'Fraunces',serif; font-size:11px; line-height:1;
  padding:2px 5px; border-radius:10px;
  background:var(--gold-uso); color:var(--bg);
}

/* a coroa do campeao, na tabela da semana */
.camp-coroa {
  display:inline-flex; align-items:center; gap:1px; margin-left:5px;
  font-size:11px; font-weight:700; color:var(--gold-uso);
}

/* modal generico */
/* z-index acima do #auth-screen (999) e do #mode-screen (998) de proposito:
   o modal de senha da recuperacao por e-mail abre logo depois do login, e
   com 200 ele ficava ATRAS da tela de escolher o modo de estudo -- invisivel
   justamente para quem acabou de pedir a senha nova. Nos outros modais nao
   muda nada: eles so abrem com o app ja na tela. */
.modal-bg {
  display:none; position:fixed; inset:0; z-index:1000; background:var(--veu);
  align-items:center; justify-content:center; padding:18px;
}
.modal-bg.open { display:flex; }
.modal-cx {
  background:var(--surface); border-radius:8px; width:100%; max-width:520px;
  max-height:88vh; overflow:auto; padding:26px 24px 22px;
  box-shadow:var(--sombra-3);
}
.modal-cx h3 { font-family:'Fraunces',serif; font-size:23px; font-weight:900; margin-bottom:4px; }
.modal-cx .sub { font-size:12.5px; color:var(--texto-soft); margin-bottom:18px; line-height:1.5; }
.modal-cx label {
  display:block; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; color:var(--texto-soft); margin:14px 0 6px;
}
.modal-cx textarea, .modal-cx input[type=text] {
  width:100%; font-family:inherit; font-size:14px; color:var(--texto);
  border:1.5px solid var(--linha); border-radius:4px; padding:11px 12px;
  background:var(--campo); resize:vertical;
}
.modal-cx textarea:focus, .modal-cx input[type=text]:focus {
  outline:none; border-color:var(--texto);
}
.modal-acts { display:flex; gap:10px; margin-top:20px; }
.modal-acts button { flex:1; font-family:inherit; font-size:13px; font-weight:700;
  padding:13px; border-radius:4px; cursor:pointer; }
.btn-ok { background:var(--realce); color:var(--fita-fg); border:none; }
.btn-ok:disabled { opacity:.5; cursor:default; }
.btn-no { background:transparent; color:var(--texto); border:1.5px solid var(--linha); }
.fc-criar {
  margin-top:16px; font-family:inherit; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:11px 18px;
  background:transparent; color:var(--texto); border:1.5px solid var(--texto);
  border-radius:3px; cursor:pointer;
}
.fc-criar:hover { background:var(--texto); color:var(--bg); }
.fc-criar.feito { border-color:var(--ok); color:var(--ok); }
/* min-width:0 deixa o bloco encolher: sem isso um nome comprido cresce ate
   empurrar o kebab para fora da linha. */
.user-bar .who { font-size: 12px; color: var(--texto-soft); min-width: 0; }
.user-bar .who strong {
  font-family: 'Fraunces', serif; font-size: 15px; color: var(--texto);
  display: block; font-weight: 700;
}
/* align-items:center porque, esticados, os selos herdam a altura do kebab
   (38px) e o texto do ESTUDO fica encostado no topo de uma caixa grande.
   margin-left:auto mantem o grupo colado a direita agora que o kebab virou
   filho direto da barra em vez de morar aqui dentro. */
.user-bar .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.mini-btn {
  font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 8px 14px; border: 1.5px solid var(--texto-soft);
  background: transparent; color: var(--texto-soft); cursor: pointer;
  border-radius: 3px; transition: all .15s;
}
.mini-btn:hover { background: var(--texto); color: var(--bg); border-color: var(--texto); }
.mini-btn.danger { border-color: var(--erro); color: var(--erro); }
.mini-btn.danger:hover { background: var(--erro); color: var(--fita-fg); border-color: var(--erro); }
.saved-flag {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ok); opacity: 0; transition: opacity .3s; font-weight: 700;
}
.saved-flag.show { opacity: 1; }

/* ---------- Modo estudo / simulado ---------- */
#mode-screen {
  position: fixed; inset: 0; z-index: 998; background: var(--bg);
  display: none; align-items: flex-start; justify-content: center;
  padding: 20px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#mode-screen.on { display: flex; }
.mode-wrap { width: 100%; max-width: 760px; margin: auto; }
/* O #mode-screen cobre a tela toda, entao esconde a barra do usuario e,
   com ela, o botao de tema. Aqui vai o mesmo botao, no canto -- e o
   padding no h2 e o que impede os dois de se cruzarem no celular. */
.ms-tema { position: absolute; top: 18px; right: 18px; z-index: 2; }
.mode-wrap > h2 {
  font-family: 'Fraunces', serif; font-size: 32px; font-weight: 900;
  letter-spacing: -.02em; margin-bottom: 6px; padding-right: 52px;
}
.mode-wrap > h2 em { font-style: italic; font-weight: 400; color: var(--realce); }
.mode-wrap > p { font-size: 13.5px; color: var(--texto-soft); margin-bottom: 24px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode-card {
  background: var(--surface); border: 1.5px solid var(--linha); border-radius: 4px;
  padding: 26px 24px; cursor: pointer; text-align: left; font-family: inherit;
  transition: all .15s; position: relative;
}
.mode-card:hover { border-color: var(--texto); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.mode-card h3 {
  font-family: 'Fraunces', serif; font-size: 21px; font-weight: 700;
  margin-bottom: 8px; color: var(--texto);
}
.mode-card p { font-size: 13px; line-height: 1.6; color: var(--texto-soft); }
.mode-card ul { margin: 12px 0 0 16px; font-size: 12.5px; color: var(--texto-soft); line-height: 1.8; }
.mode-card .tagline {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--realce); margin-bottom: 8px;
}
.mode-back {
  margin-top: 18px; background: none; border: none; font-family: inherit;
  font-size: 12px; color: var(--texto-soft); cursor: pointer; text-decoration: underline;
}

.timer-chip {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px;
  padding: 6px 14px; border-radius: 3px; background: var(--texto); color: var(--bg);
  letter-spacing: .5px;
}
.timer-chip.warn { background: var(--aviso); }
.timer-chip.crit { background: var(--erro); animation: pulse 1.2s infinite; }
.timer-chip.over { background: var(--erro); animation: none; }
.timer-chip.over::before { content: '−'; }

.bookmark-btn {
  position: static; margin-left: auto;
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .8px;
  padding: 7px 13px; border: 1.5px solid var(--linha); background: var(--surface);
  color: var(--texto-soft); cursor: pointer; border-radius: 20px;
  transition: border-color .15s, color .15s, background .15s;
}
.bookmark-btn:hover { border-color: var(--gold-uso); color: var(--gold-uso); background: var(--gold-fraco); }
.bookmark-btn:focus-visible { outline: 3px solid var(--gold-uso); outline-offset: 2px; }
.bookmark-btn.on { background: var(--gold-uso); border-color: var(--gold-uso); color: var(--fita-fg); }
.q-jumper button.marked { box-shadow: inset 0 -3px 0 var(--gold-uso); }
.chip.special { border-style: dashed; }
.chip.special.on { border-style: solid; background: var(--realce); border-color: var(--realce); }
.caderno-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--faixa-bg); border-radius: 4px;
}
.caderno-bar .lbl {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--faixa-fg-soft); font-weight: 700;
}
.cad-chip {
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px;
  padding: 8px 15px; border: 1.5px solid var(--faixa-linha);
  background: transparent; color: var(--faixa-fg);
  cursor: pointer; border-radius: 3px; transition: all .15s;
}
.cad-chip:hover { border-color: var(--faixa-fg); color: var(--faixa-fg); }
.cad-chip.on { background: var(--faixa-fg); color: var(--faixa-bg); border-color: var(--faixa-fg); }
.cad-chip .prog {
  display: block; font-size: 9.5px; letter-spacing: 1px;
  opacity: .65; font-weight: 500; margin-top: 2px;
}
.search-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.search-row input {
  flex: 1; min-width: 200px; font-family: inherit; font-size: 13.5px; color: var(--texto);
  padding: 10px 14px; border: 1.5px solid var(--linha); background: var(--campo); border-radius: 3px;
}
.search-row input:focus { outline: none; border-color: var(--texto); }
.search-hits {
  font-size: 11px; color: var(--texto-soft); align-self: center;
  letter-spacing: .5px; white-space: nowrap;
}
mark { background: var(--marca-bg); color: var(--texto); padding: 0 2px; border-radius: 2px; }

.kbd-help {
  margin-top: 10px; font-size: 11px; color: var(--texto-soft); line-height: 1.9;
}
.kbd-help kbd {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  background: var(--surface); border: 1px solid var(--linha); border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 6px; color: var(--texto); margin: 0 1px;
}
.q-figs { margin: 18px 0 6px; display: grid; gap: 14px; }
.q-fig {
  border: 1px solid var(--linha); border-radius: 4px;
  background: var(--surface); padding: 10px; text-align: center;
}
.q-fig img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  cursor: zoom-in; border-radius: 2px;
}
.q-fig figcaption {
  font-size: 11.5px; color: var(--texto-soft); line-height: 1.5;
  margin-top: 9px; text-align: left; padding: 0 4px;
}
.fig-hint {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-soft); font-weight: 700; margin-bottom: 8px; text-align: left;
}

#lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10,22,40,.93);
  display: none; align-items: center; justify-content: center; padding: 20px;
  overflow: auto; cursor: zoom-out;
}
#lightbox.on { display: flex; }
/* Fundo branco fixo, nos dois temas: e sobre branco que se julga uma
   radiografia. Trocar por --surface mudaria a leitura clinica. */
#lightbox img {
  max-width: none; transform-origin: center center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #fff; border-radius: 3px;
}
.lb-tools {
  position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 1001;
}
.lb-tools button {
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .8px;
  padding: 9px 14px; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1);
  color: #fff; cursor: pointer; border-radius: 3px; backdrop-filter: blur(4px);
}
.lb-tools button:hover { background: rgba(255,255,255,.24); }
.lb-cap {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 12.5px; max-width: 720px;
  text-align: center; line-height: 1.5; padding: 0 16px;
}
.empty-view {
  background: var(--surface); border: 1px dashed var(--linha); border-radius: 4px;
  padding: 40px 28px; text-align: center; color: var(--texto-soft); font-size: 14px;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.mode-tag {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 2px; background: var(--bg-alt); color: var(--texto-soft);
}
.mode-tag.sim { background: var(--realce); color: var(--fita-fg); }

.result-panel {
  display: none; background: var(--surface); border: 1px solid var(--linha);
  border-left: 4px solid var(--realce); border-radius: 4px;
  padding: 30px 28px; margin-bottom: 20px;
}
.result-panel.show { display: block; animation: fadeIn .35s ease; }
.result-panel h3 {
  font-family: 'Fraunces', serif; font-size: 26px; font-weight: 900; margin-bottom: 4px;
}
.result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px; margin: 22px 0;
}
.result-box {
  background: var(--surface); border: 1px solid var(--linha);
  border-radius: 3px; padding: 14px; text-align: center;
}
.result-box b {
  display: block; font-family: 'Fraunces', serif; font-size: 27px;
  font-weight: 900; color: var(--texto); line-height: 1.1;
}
.result-box span {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-soft); font-weight: 600;
}
.result-box.good b { color: var(--ok); }
.result-box.bad b { color: var(--erro); }

@media (max-width: 640px) {
  .mode-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 18px 28px; }
  .auth-card h2 { font-size: 26px; }
  .auth-sub { margin-bottom: 16px; }
  .field { margin-bottom: 12px; }
  .phone-row { grid-template-columns: 116px 1fr; }
  #mode-screen { padding: 14px 12px 28px; }
  .question-card { padding: 24px 20px; }
  .q-statement { font-size: 15.5px; }
  .alt-btn { font-size: 13.5px; padding: 12px 14px; }
  .q-jumper { grid-template-columns: repeat(8, 1fr); }
  /* Celular: a identidade e o kebab dividem a primeira linha e os selos ficam
     com a segunda inteira. A base 0 na identidade e o que segura tudo: com
     flex-wrap o navegador QUEBRA A LINHA antes de encolher, entao ela precisa
     nascer pequena e crescer no que sobra -- senao um nome comprido joga o
     kebab para uma linha so dele, no meio do cartao. */
  .user-bar .ub-eu { flex: 1 1 0; }
  .user-bar .ub-menu-wrap { order: 1; }
  .user-bar .acts { order: 2; flex: 1 0 100%; margin-left: 0; }
}
.cad-chip.cad-bloq { opacity: .55; cursor: pointer; }
.cad-chip.cad-bloq:hover { opacity: .8; }
.cad-chip .cad-x {
  display: inline-block; margin-left: 8px; padding: 0 5px;
  border-radius: 4px; font-weight: 700; opacity: .55;
}
.cad-chip .cad-x:hover { opacity: 1; background: var(--faixa-linha); }
.gb-wrap { margin: -6px 0 18px; }
.gb-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:8px;
}
.gb-head .tit {
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:700; color:var(--texto-soft);
}
.gb-lista {
  max-height:60vh; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--linha); border-radius:5px; background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.gb-cad {
  position:sticky; top:0; z-index:2; background:var(--faixa-bg); color:var(--faixa-fg);
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
  padding:8px 14px;
}
.gb-item {
  display:block; width:100%; text-align:left; background:transparent;
  border:none; border-bottom:1px solid var(--linha);
  padding:13px 14px; cursor:pointer; font-family:inherit;
}
.gb-item:hover { background:var(--bg); }
.gb-item .lin1 {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px;
}
.gb-item .qn {
  font-family:'Fraunces',serif; font-weight:900; font-size:14px; color:var(--texto);
}
.gb-item .tag {
  font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  color:var(--texto-soft); border:1px solid var(--linha);
  border-radius:20px; padding:1px 8px;
}
.gb-item .tag.ok  { color:var(--ok); border-color:var(--ok); }
.gb-item .tag.err { color:var(--erro);   border-color:var(--erro); }
.gb-item .trecho {
  font-size:13px; line-height:1.6; color:var(--texto-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.gb-item mark { background:var(--marca-bg); color:var(--texto); padding:0 2px; border-radius:2px; }
.gb-vazio { padding:22px 16px; font-size:13px; color:var(--texto-soft); text-align:center; }
.pl-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin:20px 0 6px;
}
.pl-card {
  position:relative; background:var(--surface); border:1.5px solid var(--linha);
  border-radius:8px; padding:22px 18px 20px; text-align:center;
}
.pl-card.destaque { border-color:var(--selo-linha); box-shadow:0 6px 22px var(--gold-fraco); }
.pl-fita {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--selo-bg); color:var(--selo-fg);
  border:1px solid var(--selo-linha); border-radius:20px; padding:2px 12px;
  font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase; font-weight:700;
  white-space:nowrap;
}
.pl-nome {
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:700; color:var(--texto-soft); margin-bottom:8px;
}
.pl-preco { font-family:'Fraunces',serif; font-size:34px; font-weight:900; line-height:1; }
.pl-preco small { font-size:14px; font-weight:700; }
.pl-mes { font-size:12px; color:var(--texto-soft); margin-top:6px; }
.pl-eco {
  display:inline-block; margin-top:8px; font-size:11px; font-weight:700;
  color:var(--ok);
}
.pl-btn {
  width:100%; margin-top:16px; font-family:inherit; font-size:13px; font-weight:700;
  padding:13px; border-radius:4px; cursor:pointer;
  background:var(--texto); color:var(--bg); border:none;
}
.pl-btn:hover { background:var(--realce); }
.pl-btn:disabled { opacity:.5; cursor:default; }
/* Pix e o caminho de quem nao tem conta no Mercado Pago -- boa parte
   do publico. Botao proprio, contornado, para nao parecer uma versao
   menor do de assinatura. */
.pl-btn.pix {
  margin-top:8px; background:var(--bg); color:var(--texto);
  border:1.5px solid var(--texto);
}
.pl-btn.pix:hover { background:var(--texto); color:var(--bg); }
.pl-obs {
  font-size:10.5px; color:var(--texto-soft); text-align:center;
  margin-top:7px; line-height:1.5;
}
.pl-vant { list-style:none; margin:18px 0 0; padding:0; }
.pl-vant li {
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.6; padding:9px 0;
  border-bottom:1px solid var(--linha);
}
.pl-vant li:last-child { border-bottom:none; }
.pl-vant .ck { color:var(--ok); font-weight:900; flex:0 0 auto; }
.pl-status {
  border-left:4px solid var(--ok); background:var(--ok-painel);
  border-radius:4px; padding:14px 16px; margin-bottom:18px; font-size:13.5px;
}
.pl-status.trial { border-left-color:var(--gold-uso); background:var(--gold-fraco); }
.pl-trial {
  background:var(--gold-fraco); border:1px dashed var(--selo-linha); border-radius:8px;
  padding:20px 18px; text-align:center; margin-top:20px;
}
.dp-sec { margin-top: 26px; }
.dp-sec h4 {
  font-family:'Fraunces',serif; font-size:19px; font-weight:700; margin-bottom:12px;
}
.dp-nota { font-size:12px; color:var(--texto-soft); margin-top:10px; line-height:1.5; }
.dp-cta {
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.03em;
  padding:14px 22px; margin-top:18px; width:100%; cursor:pointer;
  background:var(--realce); color:var(--fita-fg); border:none; border-radius:3px;
}
.dp-cta:disabled { opacity:.45; cursor:default; }

/* Sub-abas do Desempenho. Estudar com o gabarito a vista e fazer prova
   cronometrada sao duas contas diferentes; somar as duas esconde o que
   interessa medir. O desenho e discreto de proposito, para nao competir
   com as abas principais que ficam logo acima. */
.dp-subtabs {
  display:flex; gap:24px; margin:16px 0 2px;
  border-bottom:1.5px solid var(--linha);
  overflow-x:auto; scrollbar-width:none;
}
.dp-subtabs::-webkit-scrollbar { display:none; }
.dp-subtab {
  flex:0 0 auto; white-space:nowrap;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.03em;
  background:none; border:none; cursor:pointer; padding:0 0 10px;
  color:var(--texto-soft); opacity:.82; margin-bottom:-1.5px;
  border-bottom:2.5px solid transparent; transition:opacity .15s;
}
.dp-subtab:hover { opacity:.94; }
.dp-subtab.ativa { opacity:1; border-bottom-color:var(--realce); }

.mode-card.bloq { opacity: .5; }
.mode-card.bloq:hover { opacity: .65; }

/* ---------- barra principal de navegacao ---------- */
/* A barra antiga eram seis caixas contornadas iguais: sem hierarquia nenhuma
   (o anuncio do Premium pesava o mesmo que Questoes), com um hover de
   var(--bg-alt) que quase nao aparecia, e um ativo de preenchimento cheio que
   lia como "botao apertado" em vez de "secao atual". Aqui a fita virou UMA
   superficie so, com um marcador que desliza ate a aba clicada, e o Premium
   saiu de dentro dela: ele e uma oferta, nao uma secao de estudo. */
.fc-nav { display:flex; align-items:center; gap:12px; margin:0 0 18px; }

/* A fita rola dentro de si mesma em vez de empurrar a pagina. O flex:0 0 auto
   dos filhos e obrigatorio: sem ele os botoes encolhem ate espremer o texto e
   nada rola. A barra de rolagem fica escondida porque no computador as cinco
   abas cabem -- ela so apareceria como um risco cinza inutil embaixo.
   O position:relative e a ancora do #fc-marca: o JS mede os botoes com
   offsetLeft/offsetTop, que sao relativos a ESTE elemento e, ao contrario do
   getBoundingClientRect, nao se deslocam quando a fita esta rolada. */
.fc-tabs {
  position:relative; display:flex; gap:2px; flex:0 1 auto; min-width:0;
  padding:4px; background:var(--bg-alt);
  border:1.5px solid var(--linha); border-radius:3px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.fc-tabs::-webkit-scrollbar { display:none; }

/* O marcador. Posicao, largura E altura vem todas do JS (posicionarMarca) em
   vez de um top/bottom fixo aqui: assim ele continua certo mesmo com o padding
   diferente que a media query do celular aplica. Nasce transparente e so
   acende depois da primeira medida -- senao apareceria voando da esquerda. */
.fc-marca {
  position:absolute; left:0; top:0; width:0; height:0; opacity:0;
  background:var(--texto); border-radius:2px; pointer-events:none; z-index:0;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             width .3s cubic-bezier(.22,.61,.36,1),
             height .3s, top .3s, opacity .2s;
}

.fc-tab {
  position:relative; z-index:1; flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; scroll-snap-align:start;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:10px 16px; cursor:pointer;
  background:transparent; color:var(--texto-soft); border:none; border-radius:2px;
  transition:color .18s, background .18s, transform .12s;
}
.fc-ico, .fc-cadeado {
  width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
/* Tres sinais ao mesmo tempo no hover -- cor, fundo e o icone subindo. A barra
   antiga mexia so no fundo, com um valor tao lavado que nao dava retorno nenhum. */
.fc-tab:hover:not(.ativa) { background:var(--surface); color:var(--realce); }
.fc-tab:hover .fc-ico { transform:translateY(-1.5px) scale(1.08); }
.fc-tab:active { transform:scale(.97); }
.fc-tab.ativa { color:var(--bg); }
.fc-tab:focus-visible, .fc-oferta:focus-visible { outline:3px solid var(--gold-uso); outline-offset:2px; }

/* Cadeado do Premium: mora no HTML e so aparece com .bloq. Antes era o emoji
   U+1F512 injetado por JS, que renderiza colorido e fura a paleta de duas cores. */
.fc-cadeado { display:none; width:15px; height:15px; }
.fc-tab.bloq .fc-cadeado { display:block; }
.fc-tab.bloq { opacity:.55; }
.fc-tab.bloq:hover { opacity:.8; }

.fc-badge {
  display:inline-block; background:var(--realce); color:var(--fita-fg);
  border-radius:10px; padding:1px 7px; font-size:11px; line-height:1.5;
}

/* A oferta, fora da fita. Dourada, mas o texto e --selo-fg e nao --gold-uso:
   ouro puro sobre o creme da 3,00:1 e reprova em contraste. A sombra dura
   deslocada do hover e o mesmo vocabulario que o .fc-card usa mais abaixo. */
.fc-oferta {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:11px 16px;
  color:var(--selo-fg); background:var(--gold-fraco);
  border:1.5px solid var(--selo-linha); border-radius:3px;
  transition:background .18s, color .18s, box-shadow .18s, transform .18s;
}
.fc-oferta:hover { background:var(--selo-bg); box-shadow:2px 2px 0 var(--selo-linha); transform:translate(-1px,-1px); }
.fc-oferta:active { transform:none; box-shadow:none; }
.fc-oferta.ativa { background:var(--gold-uso); color:var(--fita-fg); border-color:var(--gold-uso); }
.fc-oferta.ativa:hover { background:var(--gold-uso); }
/* Quem ja assina ve "Meu plano", sem dourado: para o assinante isto e
   navegacao, nao anuncio -- o app pedia que ele assinasse de novo. */
.fc-oferta.assinante { color:var(--texto-soft); background:transparent; border-color:var(--linha); }
.fc-oferta.assinante:hover { color:var(--realce); background:var(--surface); box-shadow:none; transform:none; }
.fc-oferta.assinante.ativa { background:var(--texto); color:var(--bg); border-color:var(--texto); }

/* Sangria ate a borda da tela: a proxima aba fica espiando no canto, que e o
   que avisa a pessoa de que da para arrastar. Os 20px de padding repoem o
   respiro que a margem negativa tirou -- sao o padding lateral do .container.
   Fica aqui embaixo, e nao na media query la de cima, porque aquela vem antes
   das regras .fc-nav/.fc-tabs e perderia para as margens delas na ordem de leitura. */
@media (max-width: 640px) {
  .fc-nav { flex-direction:column; align-items:stretch; gap:10px; }
  /* scroll-padding junto: sem ele o encaixe do scroll-snap come os 20px e a
     primeira aba nasce colada na borda da tela, fora do alinhamento da pagina */
  .fc-tabs {
    margin-left:-20px; margin-right:-20px; padding:4px 20px; scroll-padding:0 20px;
    border-left:none; border-right:none; border-radius:0;
  }
  .fc-oferta { justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-marca, .fc-ico, .fc-cadeado, .fc-tab, .fc-oferta { transition:none; }
  .fc-tab:hover .fc-ico, .fc-oferta:hover { transform:none; }
}

.fc-head {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  border-bottom:2px solid var(--texto); padding-bottom:12px; margin-bottom:22px; flex-wrap:wrap;
}
.fc-restam { font-size:19px; font-weight:700; }
.fc-restam strong { font-size:26px; margin-right:6px; }
.fc-sub { font-size:12.5px; opacity:.65; margin-top:3px; }
.fc-card {
  background:var(--surface); border:1.5px solid var(--texto); border-radius:3px;
  padding:30px 26px 30px 30px; box-shadow:4px 4px 0 var(--linha);
  position:relative; overflow:hidden;
}
/* A mesma regua vermelha do .question-card: as duas superficies de estudo
   sao irmas, e o olho tem de reconhecer isso sem ler nada. */
.fc-card::before {
  content:''; position:absolute; left:0; top:0;
  width:4px; height:100%; background:var(--realce);
}
/* color em vez de opacity: com opacity no pai, o vermelho do hover da
   origem sairia lavado. */
.fc-meta {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  align-items:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-soft);
  border-bottom:1px solid var(--linha); padding-bottom:10px; margin-bottom:20px;
}
.fc-origem-btn {
  font-family:inherit; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-soft); background:none; border:none; padding:0 0 1px; cursor:pointer;
  border-bottom:1px solid var(--linha); transition:color .15s, border-color .15s;
}
.fc-origem-btn:hover { color:var(--realce); border-bottom-color:var(--realce); }
.fc-origem-btn:focus-visible { outline:3px solid var(--gold-uso); outline-offset:3px; }
.fc-origem-btn:disabled { cursor:default; border-bottom-color:transparent; }
/* pre-line dos dois lados: a frente tambem tem quebra de linha de verdade
   no banco -- ver conserto-flashcards-quebra-de-linha.sql na raiz. */
.fc-frente { font-size:19px; font-weight:600; line-height:1.5; white-space:pre-line; }
.fc-verso {
  display:none; margin-top:20px; padding-top:20px; border-top:2px dashed var(--linha);
  font-size:16px; line-height:1.65; white-space:pre-line;
  animation:fcVirar .22s ease both;
}
@keyframes fcVirar { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.fc-revelar {
  display:block; width:100%; margin-top:24px; padding:14px;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; cursor:pointer;
  background:var(--texto); color:var(--bg); border:none; border-radius:2px;
}
.fc-revelar:hover { background:var(--texto-soft); }
.fc-acoes { display:none; gap:10px; margin-top:24px; }
.fc-a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:13px 8px; font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; border-radius:2px; border:1.5px solid;
}
/* Antes era decoracao ("intervalo curto") e podia viver com opacity:.7.
   Agora diz a data em que o cartao volta, entao tem de ser legivel: cor
   propria em vez da cor do botao lavada, que reprovava em 3,01:1 no escuro. */
.fc-a small {
  font-size:10.5px; font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--texto-soft);
}
.fc-a.erro    { background:var(--erro-fraco);   border-color:var(--erro);   color:var(--erro); }
.fc-a.dificil { background:var(--aviso-fraco); border-color:var(--aviso); color:var(--aviso); }
.fc-a.acerto  { background:var(--ok-fraco); border-color:var(--ok); color:var(--ok); }
.fc-a:hover { filter:brightness(.95); }
.fc-vazio {
  display:none; text-align:center; padding:44px 24px; border:1.5px dashed var(--texto);
  border-radius:3px; font-size:16px; line-height:1.6;
}
/* ---------- resumo de fim de sessao ---------- */
.fc-fim-num {
  font-family:'Fraunces',serif; font-size:44px; font-weight:900; line-height:1;
  margin-bottom:2px;
}
.fc-fim-cap {
  font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
  color:var(--texto-soft); margin-bottom:22px;
}
.fc-fim-notas {
  display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
  margin-bottom:24px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.fc-fim-notas b { display:block; font-size:22px; letter-spacing:0; margin-bottom:2px; }
.fc-fim-notas .n-ok  b { color:var(--ok); }
.fc-fim-notas .n-dif b { color:var(--aviso); }
.fc-fim-notas .n-err b { color:var(--erro); }
.fc-fim-areas { text-align:left; max-width:420px; margin:0 auto 4px; }
.fc-fim-areas h4 {
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
  color:var(--texto-soft); margin-bottom:9px; text-align:center;
}
.fc-fim-areas .lin {
  display:flex; justify-content:space-between; gap:14px; font-size:13px;
  padding:7px 0; border-bottom:1px solid var(--linha);
}
.fc-fim-areas .lin:last-child { border-bottom:none; }
.fc-fim-areas .qt { color:var(--texto-soft); font-size:12px; white-space:nowrap; }
/* A resposta do cartao sobe por RPC depois que ele ja saiu da tela. Se a
   rede falhar, o silencio seria a pior saida: a pessoa acreditaria que o
   agendamento foi gravado. Esta faixa fica ate a nova tentativa dar certo. */
.fc-falha {
  display:none; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 18px; padding:12px 16px; border-radius:3px;
  background:var(--erro-painel); border:1.5px solid var(--erro);
  color:var(--texto); font-size:13px; line-height:1.5;
}
.fc-falha.on { display:flex; }
.fc-falha strong { color:var(--erro); }
.fc-falha button {
  margin-left:auto; font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; padding:8px 14px; cursor:pointer;
  background:var(--erro); color:var(--fita-fg); border:none; border-radius:3px;
}
.fc-falha button:disabled { opacity:.6; cursor:default; }

/* ---------- barra herói de desempenho da sessão ---------- */
.fc-hero { margin:0 0 22px; }
.fc-hero-bar {
  display:flex; height:14px; width:100%; border:1.5px solid var(--texto);
  border-radius:2px; overflow:hidden; background:var(--bg-alt);
}
.fc-hero-bar .seg { height:100%; width:0; transition:width .3s ease; }
.fc-hero-bar .seg.ok  { background:var(--ok); }
.fc-hero-bar .seg.dif { background:var(--aviso); }
.fc-hero-bar .seg.err { background:var(--erro); }
.fc-hero-legenda {
  display:flex; gap:18px; flex-wrap:wrap; margin-top:9px;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
.fc-hero-legenda b { font-size:16px; margin-right:5px; letter-spacing:0; }
.fc-hero-legenda .lg-ok  b { color:var(--ok); }
.fc-hero-legenda .lg-dif b { color:var(--aviso); }
.fc-hero-legenda .lg-err b { color:var(--erro); }
.fc-hero-legenda .lg-tot { margin-left:auto; opacity:.82; }

/* ---------- meta do dia ----------
   Mesmo desenho do .mini-btn ao lado: a caixa e o <label>, e o <select>
   entra sem borda propria para os dois lerem como um controle so. */
.fc-meta-sel {
  display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 12px;
  border:1.5px solid var(--texto-soft); border-radius:3px; cursor:pointer;
}
.fc-meta-sel:hover { border-color:var(--texto); }
.fc-meta-sel > span {
  font-size:10.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--texto-soft); white-space:nowrap;
}
.fc-meta-sel select {
  font-family:inherit; font-size:12.5px; color:var(--texto); cursor:pointer;
  background:transparent; border:none; padding:3px 2px; border-radius:2px;
}
.fc-meta-sel select:focus-visible { outline:2px solid var(--realce); outline-offset:1px; }
/* o menu nativo herda o fundo do sistema, nao o do tema: sem isto as
   opcoes saem texto claro sobre branco no tema escuro */
.fc-meta-sel select option { background:var(--surface); color:var(--texto); }

/* ---------- seletor de área ---------- */
.fc-areas { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; }
.fc-chip {
  padding:7px 13px; font-family:inherit; font-size:12.5px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--texto); border-radius:2px; color:var(--texto);
}
.fc-chip:hover { background:var(--bg-alt); }
.fc-chip.ativa { background:var(--texto); color:var(--bg); }
.fc-chip span { opacity:.75; margin-left:6px; font-size:11px; }
.fc-chip.ativa span { opacity:.75; }
.fc-chip:disabled { opacity:.35; cursor:default; }

/* ---------- praticar mais ---------- */
.fc-mais {
  margin-top:22px; padding:13px 26px; font-family:inherit; font-size:13px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
  background:var(--realce); color:var(--fita-fg); border:none; border-radius:2px;
}
.fc-mais:hover { filter:brightness(1.08); }
.fc-mais:disabled { background:var(--bg-alt); color:var(--texto); opacity:.5; cursor:default; }

@media (max-width:600px) {
  .fc-acoes { flex-direction:column; }
  .fc-hero-legenda .lg-tot { margin-left:0; width:100%; }
}

/* ---------- Contato por WhatsApp (botão flutuante) ----------
   z-index 999 e posição no fim do <body>: com o mesmo z-index da
   #auth-screen, quem vem depois no DOM pinta por cima — então o botão
   aparece também no login. Fica abaixo do #lightbox (1000), que é maior,
   e portanto nunca cobre uma figura ampliada. */
.zap-wrap {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.zap-wrap[hidden] { display: none; }

/* Os modais são z-index 200, abaixo daqui. Some o balão enquanto um
   deles estiver aberto, sem precisar mexer no z-index de ninguém. */
body:has(.modal-bg.open) .zap-wrap { display: none; }

.zap-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: #25D366; color: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(10,22,40,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* display:flex acima vence o [hidden] do navegador — precisa ser explícito */
.zap-fab[hidden] { display: none; }
.zap-fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(10,22,40,.34); }
.zap-fab:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.zap-fab svg { width: 30px; height: 30px; fill: currentColor; }

.zap-painel {
  /* max-width em vez de media query: em tela estreita ele encolhe, mas
     nunca fica MAIOR que no desktop */
  width: 260px; max-width: calc(100vw - 40px);
  background: var(--surface); border-radius: 8px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(10,22,40,.3);
  font-family: inherit;
}
.zap-painel[hidden] { display: none; }

.zap-topo {
  display: flex; align-items: center; gap: 6px;
  background: #25D366; color: #fff; padding: 10px 8px 10px 14px;
}
.zap-topo .zap-tit {
  flex: 1; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.zap-topo button {
  width: 26px; height: 26px; flex: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; border: none; border-radius: 4px;
  font-family: inherit; font-size: 14px; line-height: 1;
}
.zap-topo button:hover { background: rgba(255,255,255,.34); }
.zap-topo button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.zap-corpo { padding: 14px; }
.zap-corpo p {
  font-size: 12.5px; color: var(--texto-soft); line-height: 1.5; margin: 0 0 10px;
}
.zap-num {
  display: block; font-size: 18px; font-weight: 700; color: var(--texto);
  letter-spacing: .02em; margin-bottom: 14px;
}
.zap-acoes { display: flex; flex-direction: column; gap: 8px; }
.zap-acoes > * {
  font-family: inherit; font-size: 13px; font-weight: 700; text-align: center;
  padding: 12px; border-radius: 4px; cursor: pointer; text-decoration: none;
}
.zap-ir { background: #25D366; color: #fff; border: none; }
.zap-ir:hover { filter: brightness(1.06); }
.zap-copiar {
  background: transparent; color: var(--texto); border: 1.5px solid var(--linha);
}
.zap-copiar:hover { border-color: var(--texto); }
.zap-copiar.ok { border-color: var(--ok); color: var(--ok); }
.zap-acoes > *:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* ==================== LANDING PAGE ====================
   Mora dentro da #auth-screen, que ja era o painel de tela cheia de quem
   nao esta logado. Assim boot/login/logout continuam ligando e desligando
   uma coisa so. Tudo com prefixo lp- para nao encostar no app. */

/* Coluna flex com rolagem: sem isto as secoes altas encolhem sozinhas */
#auth-screen > * { flex: 0 0 auto; }
/* A barra do topo e fixa: sem esta margem, rolar ate uma secao a esconderia atras dela */
#auth-screen > section { scroll-margin-top: var(--lp-nav); }

.lp-nav {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  height: var(--lp-nav); padding: 0 20px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.lp-marca {
  font-family: 'Fraunces', serif; font-size: 19px; font-weight: 900;
  letter-spacing: -.02em; margin-right: auto; cursor: pointer;
  background: none; border: none; color: var(--texto); padding: 0;
}
.lp-marca em { font-style: italic; font-weight: 400; color: var(--realce); transition: opacity .18s; }
.lp-marca:hover em { opacity: .72; }
.lp-links { display: flex; gap: 2px; }
.lp-links button {
  position: relative;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--texto-soft);
  background: none; border: none; cursor: pointer; padding: 8px 11px; border-radius: 3px;
  transition: color .2s;
}
.lp-links button::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; width: 0; height: 1.5px;
  background: var(--realce); transform: translateX(-50%);
  transition: width .26s cubic-bezier(.22,.61,.36,1);
}
.lp-links button:hover { color: var(--texto); }
.lp-links button:hover::after { width: calc(100% - 22px); }

.lp-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; padding: 14px 26px; border: 1.5px solid var(--texto);
  background: var(--texto); color: var(--bg); cursor: pointer; border-radius: 3px;
  transition: all .15s; text-decoration: none; display: inline-block; text-align: center;
}
.lp-btn {
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .2s, border-color .2s, transform .12s;
}
.lp-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--realce); transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.lp-btn:hover::before, .lp-btn:focus-visible::before { transform: scaleY(1); }
.lp-btn:hover, .lp-btn:focus-visible { border-color: var(--realce); color: var(--bg); }
.lp-btn:active { transform: translateY(1px); }

.lp-btn.ghost { background: transparent; color: var(--texto); }
.lp-btn.ghost::before { background: var(--texto); }
.lp-btn.ghost:hover, .lp-btn.ghost:focus-visible { border-color: var(--texto); color: var(--bg); }
.lp-btn.mini { padding: 9px 16px; font-size: 11px; letter-spacing: .8px; }
.lp-btn:focus-visible, .lp-links button:focus-visible, .lp-marca:focus-visible {
  outline: 3px solid var(--gold-uso); outline-offset: 2px;
}

.lp-sec { padding: 64px 20px; }
.lp-sec.alt { background: var(--bg-alt); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.lp-in { max-width: 920px; margin: 0 auto; }
.lp-eyebrow {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--realce); font-weight: 600; margin-bottom: 8px;
}
.lp-h2 {
  font-family: 'Fraunces', serif; font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
  color: var(--texto); text-wrap: balance;
}
.lp-h2 em { font-style: italic; font-weight: 400; color: var(--realce); }
.lp-sub { font-size: 14.5px; color: var(--texto-soft); margin-top: 10px; max-width: 640px; }

/* ---- hero ---- */
.lp-hero { padding: 62px 20px 54px; text-align: center; }
.lp-hero .lp-sub { margin-left: auto; margin-right: auto; font-size: 16px; }
.lp-h1 {
  font-family: 'Fraunces', serif; font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.02;
  color: var(--texto);      /* vence o h1{} global do app */
  text-wrap: balance;
}
.lp-h1 em { font-style: italic; font-weight: 400; color: var(--realce); }
.lp-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.lp-selo { margin-top: 16px; font-size: 12px; color: var(--texto-soft); }
.lp-nums {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linha); border: 1px solid var(--linha);
  border-radius: 4px; overflow: hidden; margin-top: 46px;
}
.lp-num {
  background: var(--surface); padding: 18px 10px;
  font-family: inherit; color: inherit; border: none; width: 100%;
  text-align: center; cursor: pointer;
  transition: background .2s;
}
.lp-num:hover { background: var(--realce-fraco); }
.lp-num b { transition: color .2s; }
.lp-num:hover b { color: var(--realce); }
.lp-num:focus-visible { outline: 3px solid var(--gold-uso); outline-offset: -3px; }
.lp-num b {
  font-family: 'Fraunces', serif; font-size: 27px; font-weight: 900;
  display: block; line-height: 1.1;
}
.lp-num span {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--texto-soft); font-weight: 600;
}

/* ---- cartoes ---- */
.lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.lp-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
.lp-card {
  background: var(--surface); border: 1px solid var(--linha); border-radius: 4px;
  padding: 26px 24px; position: relative; overflow: hidden;
  box-shadow: var(--sombra-1), var(--sombra-2);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
/* a regua editorial que se desenha da esquerda: e o gesto-assinatura */
.lp-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--realce); transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-3); }
.lp-card:hover::before { transform: scaleX(1); }
.lp-card .lp-tag {
  display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--realce); margin-bottom: 8px;
}
.lp-card h3 {
  font-family: 'Fraunces', serif; font-size: 19px; font-weight: 700;
  margin-bottom: 8px; line-height: 1.25;
}
.lp-card p { font-size: 13.5px; color: var(--texto-soft); line-height: 1.65; }

/* ---- faixa da prova gratuita ---- */
.lp-faixa {
  background: var(--faixa-bg); border-radius: 4px; padding: 36px 32px;
  display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.lp-faixa h3 {
  font-family: 'Fraunces', serif; font-size: clamp(24px, 3vw, 30px);
  font-weight: 900; color: #fff; line-height: 1.15;
}
.lp-faixa h3 em { font-style: italic; font-weight: 400; color: var(--accent-soft); }
.lp-faixa p { font-size: 14px; color: rgba(244,241,234,.78); margin-top: 10px; max-width: 520px; line-height: 1.65; }
.lp-faixa .lp-btn { background: #f4f1ea; border-color: #f4f1ea; color: #0a1628; }
.lp-faixa .lp-btn::before { background: var(--accent); }
.lp-faixa .lp-btn:hover, .lp-faixa .lp-btn:focus-visible { border-color: var(--accent); color: #fff; }

/* ---- planos ---- */
.lp-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; align-items: start; }
.lp-plano {
  background: var(--surface); border: 1.5px solid var(--linha); border-radius: 4px;
  padding: 28px 22px; text-align: center; position: relative;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1), border-color .2s;
}
.lp-plano:hover { transform: translateY(-4px); border-color: var(--texto); box-shadow: var(--sombra-3); }
.lp-preco { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.lp-plano:hover .lp-preco { transform: scale(1.03); }
/* o destacado ja esta elevado: sobe menos, para a fileira nao pular */
.lp-plano.destaque:hover { transform: translateY(-2px); }
.lp-plano.destaque { border-color: var(--texto); box-shadow: var(--sombra-3); }
.lp-fita {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--fita-bg); color: var(--fita-fg); font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700; padding: 4px 12px; border-radius: 20px;
  white-space: nowrap;
}
.lp-plano-nome { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--texto-soft); }
.lp-preco { font-family: 'Fraunces', serif; font-size: 46px; font-weight: 900; line-height: 1; margin: 12px 0 2px; }
.lp-preco small { font-size: 17px; font-weight: 700; margin-right: 2px; }
.lp-mes { font-size: 12.5px; color: var(--texto-soft); }
.lp-eco {
  display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
  color: var(--ok); background: var(--ok-fraco); padding: 3px 11px; border-radius: 20px;
}
.lp-plano .lp-btn { width: 100%; margin-top: 18px; }
.lp-trial {
  margin-top: 22px; border: 1.5px dashed var(--gold-uso); border-radius: 4px;
  padding: 28px 24px; text-align: center; background: var(--gold-fraco);
}
.lp-trial h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.lp-trial p { font-size: 13.5px; color: var(--texto-soft); line-height: 1.65; }
.lp-trial .lp-btn { margin-top: 16px; }
.lp-pag { font-size: 12px; color: var(--texto-soft); text-align: center; margin-top: 16px; line-height: 1.7; }

/* ---- quem somos ---- */
.lp-bio {
  background: var(--surface); border: 1px solid var(--linha); border-left: 4px solid var(--realce);
  border-radius: 4px; padding: 32px 34px; margin-top: 28px;
  box-shadow: var(--sombra-1), var(--sombra-2);
  transition: border-left-width .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s cubic-bezier(.22,.61,.36,1);
}
.lp-bio:hover { border-left-width: 7px; box-shadow: var(--sombra-3); }
.lp-bio p { font-size: 15px; line-height: 1.75; color: var(--texto-soft); margin-bottom: 15px; }
.lp-bio p:last-of-type { margin-bottom: 0; }
.lp-bio strong { color: var(--texto); }
.lp-assina {
  margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--linha);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--texto-soft);
}

/* ---- perguntas frequentes (details/summary, sem JS) ---- */
.lp-faq { margin-top: 28px; border-top: 1px solid var(--linha); }
.lp-faq details { border-bottom: 1px solid var(--linha); }
.lp-faq summary {
  cursor: pointer; padding: 17px 36px 17px 2px; font-size: 15px; font-weight: 600;
  list-style: none; position: relative;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 14px;
  font-size: 21px; line-height: 1; color: var(--realce); font-weight: 400;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
/* girar 45 graus transforma o + em x: melhor que trocar o caractere */
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq summary:hover::after { transform: scale(1.2); }
.lp-faq details[open] summary:hover::after { transform: rotate(45deg) scale(1.2); }
.lp-faq summary { transition: color .18s; }
.lp-faq summary:hover { color: var(--realce); }
.lp-faq summary:focus-visible { outline: 2px solid var(--gold-uso); outline-offset: 2px; }
.lp-faq .lp-resp { padding: 0 36px 20px 2px; font-size: 14px; color: var(--texto-soft); line-height: 1.7; }

/* ---- secao final: a caixa de login que ja existia ---- */
#lp-entrar { padding: 62px 20px 48px; text-align: center; }
#lp-entrar .lp-sub { margin-left: auto; margin-right: auto; margin-bottom: 32px; }
#lp-entrar .auth-card { text-align: left; }

/* ---- rodape ---- */
.lp-rodape {
  border-top: 2px solid var(--texto); padding: 32px 20px 44px;
  /* anula o footer{} global do app, que impunha caixa alta e 11px */
  margin-top: 0; text-align: left; text-transform: none;
  letter-spacing: normal; font-size: 12px; color: var(--texto-soft);
}
.lp-rodape-in {
  max-width: 920px; margin: 0 auto;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 30px;
  font-size: 12px; color: var(--texto-soft); line-height: 1.75;
}
.lp-rod-logo {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 900;
  letter-spacing: -.02em; color: var(--texto); margin-bottom: 6px;
}
.lp-rod-logo em { font-style: italic; font-weight: 400; color: var(--realce); }
.lp-rod-marca p { font-size: 12.5px; line-height: 1.6; max-width: 260px; }
.lp-rod-col h3 {
  font-family: inherit; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--texto); margin-bottom: 10px;
}
.lp-rod-col button, .lp-rod-col a {
  display: block; width: 100%; text-align: left; padding: 4px 0;
  font-family: inherit; font-size: 12.5px; line-height: 1.5;
  background: none; border: none; color: var(--texto-soft);
  cursor: pointer; text-decoration: none;
  transition: color .18s, transform .18s;
}
.lp-rod-col button:hover, .lp-rod-col a:hover { color: var(--realce); transform: translateX(3px); }
.lp-rod-col button:focus-visible, .lp-rod-col a:focus-visible {
  outline: 2px solid var(--gold-uso); outline-offset: 2px;
}

/* ---- redes sociais ---- */
.lp-redes { display: flex; gap: 8px; margin-top: 15px; }
.lp-rede {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); border-radius: 4px; color: var(--texto-soft);
  transition: color .2s, border-color .2s, transform .2s;
}
.lp-rede svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.lp-rede:hover { color: var(--rede); border-color: var(--rede); transform: translateY(-2px); }
.lp-rede:focus-visible { outline: 3px solid var(--gold-uso); outline-offset: 2px; }
.lp-rede.ig { --rede: #e1306c; }
.lp-rede.yt { --rede: #f00; }
.lp-rede.tt { --rede: var(--tiktok); }
.lp-rede.fb { --rede: var(--facebook); }

/* ---- faixa de baixo: o aviso legal, que e importante mas nao e manchete ---- */
.lp-rodape-base {
  max-width: 920px; margin: 28px auto 0; padding-top: 18px;
  border-top: 1px solid var(--linha);
  display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap;
  font-size: 11.5px; color: var(--texto-soft); line-height: 1.7;
}
.lp-rodape-base .lp-aviso { max-width: 640px; }
.lp-rodape strong { color: var(--texto); }
@media (max-width: 720px) { .lp-rodape-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .lp-rodape-in { grid-template-columns: 1fr; gap: 26px; } }

/* Quem pediu menos movimento no sistema recebe a pagina inteira, estatica.
   Entra junto com as transicoes de proposito: nao se acrescenta movimento
   sem a saida para desliga-lo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* ==== previa do produto: uma questao real, comentada ====
   Tudo em HTML/CSS, sem imagem: o diferencial do produto e o comentario
   das QUATRO alternativas, e aqui ele e mostrado em vez de afirmado. */
.lp-previa {
  margin-top: 30px; border: 1px solid var(--linha); border-radius: 6px;
  overflow: hidden; background: var(--surface);
  box-shadow: var(--sombra-1), var(--sombra-2);
}
.lp-previa-topo {
  display: flex; align-items: center; gap: 10px;
  background: var(--faixa-bg); padding: 10px 14px;
}
.lp-pontos { display: flex; gap: 5px; flex: none; }
.lp-pontos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.lp-previa-aba {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 600; color: rgba(244,241,234,.74);
}
.lp-previa-corpo { padding: 22px 24px 24px; }
.lp-previa-enun { font-size: 14px; line-height: 1.7; color: var(--texto); }
.lp-previa-enun b { font-weight: 600; }
.lp-alt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; margin-top: 10px;
  border: 1px solid var(--linha); border-radius: 4px; background: var(--bg);
}
.lp-alt-marca {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.lp-alt.certa { border-left: 3px solid var(--ok); }
.lp-alt.certa .lp-alt-marca { background: var(--ok-fraco); color: var(--ok); }
.lp-alt.errada .lp-alt-marca { background: var(--realce-fraco); color: var(--realce); }
.lp-alt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--texto); margin-bottom: 4px; }
.lp-alt p { font-size: 12.5px; line-height: 1.6; color: var(--texto-soft); }
.lp-conceito {
  margin-top: 16px; border: 1.5px dashed var(--gold-uso); background: var(--gold-fraco);
  border-radius: 4px; padding: 16px 18px;
}
.lp-conceito h4 {
  font-family: inherit; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--aviso); font-weight: 700; margin-bottom: 6px;
}
.lp-conceito p { font-size: 12.5px; line-height: 1.65; color: var(--texto-soft); }

/* ==== comparativo: prepara o terreno para o preco ==== */
.lp-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; align-items: start; }
.lp-comp-col { border: 1px solid var(--linha); border-radius: 4px; padding: 24px 22px; }
.lp-comp-col.antes { background: var(--bg-alt); }
.lp-comp-col.depois {
  background: var(--surface); border: 1.5px solid var(--texto);
  box-shadow: var(--sombra-1), var(--sombra-2);
}
.lp-comp-col h3 {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700;
  color: var(--texto); margin-bottom: 4px;
}
.lp-comp-col .lp-comp-sub { font-size: 12px; color: var(--texto-soft); margin-bottom: 12px; }
.lp-comp-col ul { list-style: none; }
.lp-comp-col li {
  display: flex; gap: 10px; padding: 9px 0; font-size: 13px; line-height: 1.55;
  color: var(--texto-soft); border-top: 1px solid var(--linha);
}
.lp-comp-col li:first-child { border-top: none; }
.lp-comp-col li i { flex: none; font-style: normal; font-weight: 700; }
.lp-comp-col.antes li i { color: var(--realce); }
.lp-comp-col.depois li i { color: var(--ok); }
@media (max-width: 720px) {
  .lp-comp { grid-template-columns: 1fr; }
  .lp-previa-corpo { padding: 18px 16px 20px; }
}

/* ---- revelacao ao rolar ----
   O atributo entra na marcacao (e nao pelo JS) para o elemento ja nascer
   escondido no primeiro quadro: se fosse o JS a esconder, haveria um lampejo
   do conteudo antes de sumir. O <noscript> no <head> devolve tudo a quem
   estiver sem JavaScript. */
[data-rv] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1) calc(var(--d, 0) * 70ms),
              transform .55s cubic-bezier(.22,.61,.36,1) calc(var(--d, 0) * 70ms);
}
[data-rv].rv-on { opacity: 1; transform: none; }

/* ---- barra de progresso de leitura, na base da barra do topo ---- */
.lp-prog {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--realce); transition: width .1s linear;
}
.lp-nav { transition: box-shadow .25s, border-color .25s; }
.lp-nav.rolou {
  box-shadow: 0 2px 18px rgba(0,0,0,.13);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* o link da secao que esta na tela mantem o sublinhado aceso */
.lp-links button.ativo { color: var(--texto); }
.lp-links button.ativo::after { width: calc(100% - 22px); }

/* ---- botao de tema ---- */
.lp-tema, .lp-menu {
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linha); border-radius: 4px;
  color: var(--texto-soft);
  transition: color .15s, border-color .15s, background .15s;
}
.lp-menu { display: none; }   /* so aparece na largura de celular */
.lp-tema:hover, .lp-menu:hover { color: var(--realce); border-color: var(--realce); background: var(--realce-fraco); }
.lp-tema:focus-visible, .lp-menu:focus-visible { outline: 3px solid var(--gold-uso); outline-offset: 2px; }
.lp-tema svg, .lp-menu svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* O icone mostra para onde o clique LEVA: lua no tema claro, sol no escuro.
   Seletor solto de proposito: .lp-sol e .lp-lua so vivem dentro de botao de
   tema, e agora sao dois -- o da landing e o .ub-tema do app. */
.lp-sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .lp-sol { display: block; }
  :root:not([data-tema="claro"]) .lp-lua { display: none; }
}
:root[data-tema="escuro"] .lp-sol { display: block; }
:root[data-tema="escuro"] .lp-lua { display: none; }

/* O botao do Google no tema escuro -- as cores sao as da norma da marca, nao
   as do site. Os dois blocos, como manda a regra la de cima: um para quem
   segue o sistema, outro para quem escolheu escuro na mao. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-google {
    background: #131314; color: #e3e3e3; border-color: #8e918f;
  }
  :root:not([data-tema="claro"]) .btn-google:hover  { background: #1e1f20; box-shadow: none; }
  :root:not([data-tema="claro"]) .btn-google:active { background: #282a2c; }
}
:root[data-tema="escuro"] .btn-google {
  background: #131314; color: #e3e3e3; border-color: #8e918f;
}
:root[data-tema="escuro"] .btn-google:hover  { background: #1e1f20; box-shadow: none; }
:root[data-tema="escuro"] .btn-google:active { background: #282a2c; }

@media (max-width: 860px) {
  .lp-grid3, .lp-planos { grid-template-columns: 1fr 1fr; }
  .lp-links button { padding: 8px 8px; font-size: 12px; }
}
@media (max-width: 720px) {
  .lp-grid3, .lp-grid2, .lp-planos { grid-template-columns: 1fr; }
  .lp-sec { padding: 48px 16px; }
  .lp-hero { padding: 42px 16px 40px; }
  .lp-nums { grid-template-columns: 1fr 1fr; }
  .lp-faixa { padding: 28px 22px; }
  .lp-bio { padding: 26px 22px; }
  #lp-entrar { padding: 46px 12px 36px; }
  .lp-ctas .lp-btn { width: 100%; }
}
@media (max-width: 560px) {
  .lp-nav { padding: 0 14px; }
  .lp-menu { display: flex; }
  /* Antes os links simplesmente sumiam e nao havia substituto. Agora eles
     viram um painel que desce da barra, ancorado nela (a .lp-nav e sticky,
     entao ja serve de bloco de contencao para o position:absolute). */
  .lp-links { display: none; }
  .lp-links.aberto {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg);   /* opaco de proposito: ver nota abaixo */
    border-bottom: 1px solid var(--linha);
    padding: 6px 10px 12px;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
  }
  .lp-links.aberto button { text-align: left; padding: 13px 10px; font-size: 14.5px; }
  .lp-links.aberto button::after { display: none; }
}

/* === ONBOARDING TOUR ===
   Overlay de 3 passos que roda uma unica vez, no primeiro login. O veu NAO
   fica no #tour-overlay: fica no spread nao-inset do #tour-furo, que assim
   pinta tudo MENOS o retangulo do alvo (com inset seria o contrario -- o
   veu tamparia justamente o que se quer destacar). O overlay em si e
   transparente e so serve para engolir os cliques, inclusive os de dentro
   do furo: o tour e modal.
   A animacao de entrada nao precisa de guarda propria: o kill-switch geral
   de prefers-reduced-motion la em cima ja zera qualquer animation. */
#tour-overlay {
  position: fixed; inset: 0;
  z-index: 1100;              /* acima do #lightbox (1000) e da .lb-tools (1001) */
  background: transparent;
}
#tour-overlay[hidden] { display: none; }   /* qualquer display derruba o padrao do UA */

#tour-furo {
  position: absolute; border-radius: 4px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--veu);
  outline: 2px solid var(--realce); outline-offset: 2px;
  transition: top .25s, left .25s, width .25s, height .25s;
}

#tour-card {
  position: absolute; max-width: 280px; width: calc(100vw - 32px);
  padding: 18px 16px 14px;
  background: var(--surface); color: var(--texto);
  border: 1px solid var(--linha); border-radius: 8px;
  box-shadow: var(--sombra-3);
}
#tour-card.entra { animation: tourEntra .25s ease both; }
@keyframes tourEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
#tour-titulo {
  font-family: 'Fraunces', serif; font-size: 16.5px; font-weight: 900;
  line-height: 1.25; margin: 0 0 8px;
  padding-right: 72px;        /* nao encosta no "Pular tour" */
}
#tour-texto {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--texto-soft);
}
#tour-pular {
  position: absolute; top: 13px; right: 14px; padding: 0; border: 0;
  background: none; font-family: inherit; font-size: 11px;
  color: var(--texto-soft); text-decoration: underline; cursor: pointer;
}
#tour-pular:hover { color: var(--texto); }
#tour-rodape { display: flex; align-items: center; gap: 12px; }
#tour-rodape .lp-btn { margin-left: auto; }   /* contador e Voltar ficam a esquerda */
#tour-voltar {
  padding: 0; border: 0; background: none; font-family: inherit; font-size: 11px;
  color: var(--texto-soft); text-decoration: underline; cursor: pointer;
}
#tour-voltar:hover { color: var(--texto); }
#tour-voltar[hidden] { display: none; }
#tour-contador { font-size: 11px; letter-spacing: 1px; color: var(--texto-soft); }
/* o .lp-btn cru e escuro (fundo --texto); aqui ele vira o botao de realce.
   O --fita-fg e o par certo do --realce -- branco no claro, escuro no
   escuro -- e e o mesmo par que o ::selection usa. */
#tour-btn { background: var(--realce); border-color: var(--realce); color: var(--fita-fg); }
#tour-btn::before { background: var(--texto); }
/* o tour poe o foco no botao a cada passo (assim o Enter avanca). Sem
   isto o :focus-visible herdado do .lp-btn pintaria o botao inteiro e o
   --realce nunca apareceria em repouso: o anel de foco ja basta. */
#tour-btn:focus-visible:not(:hover)::before { transform: scaleY(0); }
#tour-btn:focus-visible:not(:hover) { color: var(--fita-fg); }
#tour-btn:hover, #tour-btn:focus-visible { border-color: var(--texto); color: var(--bg); }

/* faixa de boas-vindas do fim do tour: mesma forma da .streak-fanfarra */
.tour-bemvindo {
  display: none; align-items: center; gap: 11px; margin: 0 0 18px;
  padding: 13px 16px; border-radius: 4px; font-size: 13.5px; line-height: 1.45;
  background: var(--ok-painel); border: 1.5px solid var(--ok); color: var(--texto);
}
.tour-bemvindo.on { display: flex; animation: tourEntra .28s ease both; }

/* ==================== VÉU DE ENTRADA ====================
   Cobre a landing entre "clicou em Entrar" (ou voltou do Google / do link de
   recuperacao) e o app na tela. Quem acende e o <script> inline do <head>,
   antes da primeira pintura; quem apaga e o esconderEntrando() do app.js.
   z-index 1200: acima do #tour-overlay (1100), da .modal-bg e do #lightbox
   (1000), da #auth-screen e da .zap-wrap (999) e do #mode-screen (998).
   Precisa passar da .zap-wrap, senao o balao do WhatsApp fura o veu.
   NENHUMA variavel nova: so tokens que ja existem nos dois blocos do tema
   escuro, entao nada precisa ser duplicado la em cima. */
#entrando { display: none; }
:root[data-entrando] #entrando {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 1200;
  padding: 24px; text-align: center;
  background: var(--bg); background-image: var(--textura-auth);
}
:root[data-entrando] body { overflow: hidden; }   /* nao rola a landing por baixo */

/* Rede de seguranca, no espirito do body:has(.modal-bg.open) .zap-wrap la de
   cima: se algum caminho novo deixar o veu vivo quando um modal abrir, ele se
   apaga em vez de prender a pessoa atras dele. */
body:has(.modal-bg.open) #entrando { display: none; }

.entrando-cx { max-width: 340px; }
.entrando-anel {
  width: 44px; height: 44px; margin: 0 auto 22px; border-radius: 50%;
  border: 3px solid var(--linha); border-top-color: var(--realce);
  animation: entrandoGira .9s linear infinite;
}
@keyframes entrandoGira { to { transform: rotate(360deg); } }

/* mesma receita da .lp-marca (Fraunces 900 + em italico no realce), sem
   herdar dela: aquela e um botao da barra, com regras que nao servem aqui */
.entrando-marca {
  font-family: 'Fraunces', serif; font-size: 25px; font-weight: 900;
  letter-spacing: -.02em; color: var(--texto); margin-bottom: 10px;
}
.entrando-marca em { font-style: italic; font-weight: 400; color: var(--realce); }

#entrando-passo {
  font-size: 13.5px; line-height: 1.5; color: var(--texto-soft);
  margin: 0; min-height: 2.6em;      /* nao pula quando o texto muda de tamanho */
}
.entrando-barra {
  width: 210px; max-width: 100%; height: 3px; margin: 4px auto 0;
  background: var(--linha); border-radius: 2px; overflow: hidden;
}
.entrando-barra i {
  display: block; height: 100%; width: 0;
  background: var(--realce); transition: width .25s ease;
}

.entrando-escape { display: none; margin-top: 26px; }
:root[data-entrando="demorou"] .entrando-escape { display: block; animation: tourEntra .25s ease both; }
.entrando-escape p {
  font-size: 12.5px; line-height: 1.5; color: var(--texto-soft); margin: 0 0 14px;
}
.entrando-escape-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Quem pediu menos movimento: o kill-switch geral (bem acima) congela a
   rotacao, e um anel com a fatia de realce PARADA parece um circulo
   quebrado. Aqui ele vira anel inteiro, estatico de proposito -- quem informa
   o andamento e o texto, que continua mudando, e a barra, que anda por
   escrita direta de style.width, nao por animacao. */
@media (prefers-reduced-motion: reduce) {
  .entrando-anel { border-color: var(--linha); }
}