:root{
  --paper:#F4F5F1; --card:#FFFFFF; --card2:#E9EAE4; --sunk:#EDEEE8;
  --ink:#1A1C19; --ink2:#474C44; --mut:#787D74; --line:#D8DAD1; --line2:#C6C9BD;
  --acc:#8C2F39; --acc-ink:#8C2F39; --acc-soft:#F3E0E2; --acc-line:#E2C5C8;
  --ok:#2E6B4D; --ok-soft:#DFEBE4; --ok-line:#BBD8C8;
  --warn:#8C6410; --warn-soft:#F3E9CF;
  /* Ouro: identidade nova, só em quatro lugares (marca+filete da entrada,
     nome do nível + barra XP, régua do cartão de destaque do Início, ícone
     de sequência) — nunca botão/link/item ativo/alerta/acerto/erro. Tom mais
     escuro no tema claro de propósito: o dourado claro do tema escuro não
     tem contraste suficiente em papel claro. */
  --ouro:#9A7A33; --ouro-fraco:rgba(154,122,51,.14);
  /* Cartão de papel das telas de estudo (Flashcards/Quiz): exceção pedida
     pelo usuário, registrada no CLAUDE.md, seção 8. Só em :root — os blocos
     do tema escuro não redefinem estes valores de propósito: o cartão é papel
     claro nos dois temas. --leitura-acento é o vinho do tema claro, para a
     barra de posição sobre o papel claro também no tema escuro. */
  --leitura-fundo:#F4F1E8; --leitura-tinta:#1A1C19; --leitura-mut:#474C44;
  --leitura-linha:#D8D4C6; --leitura-acento:#8C2F39;
  /* Borda reforçada do cartão, só no tema claro (no escuro o contraste com o
     fundo já separa o cartão): tom mais escuro de --leitura-linha. */
  --leitura-linha-forte:#B8AF98;
  --btn-ink:#FFFFFF;
  --dsp:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --bod:"Spectral",Georgia,"Times New Roman",serif;
  --mon:"IBM Plex Mono","DejaVu Sans Mono",ui-monospace,monospace;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --paper:#14160F; --card:#1C1F18; --card2:#272B22; --sunk:#191C15;
    --ink:#EDEFE6; --ink2:#C0C4B7; --mut:#8B9083; --line:#333828; --line2:#404634;
    --acc:#DE8590; --acc-ink:#E9A2AB; --acc-soft:#372226; --acc-line:#4D2F34;
    --ok:#6FBE94; --ok-soft:#1A2C22; --ok-line:#2E4A39;
    --warn:#D6A945; --warn-soft:#2C2515;
    --ouro:#C8A45C; --ouro-fraco:rgba(200,164,92,.16);
    --btn-ink:#14160F;
    color-scheme:dark;
  }
}
:root[data-tema="escuro"]{
  --paper:#14160F; --card:#1C1F18; --card2:#272B22; --sunk:#191C15;
  --ink:#EDEFE6; --ink2:#C0C4B7; --mut:#8B9083; --line:#333828; --line2:#404634;
  --acc:#DE8590; --acc-ink:#E9A2AB; --acc-soft:#372226; --acc-line:#4D2F34;
  --ok:#6FBE94; --ok-soft:#1A2C22; --ok-line:#2E4A39;
  --warn:#D6A945; --warn-soft:#2C2515;
  --ouro:#C8A45C; --ouro-fraco:rgba(200,164,92,.16);
  --btn-ink:#14160F;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--bod); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h3{font-family:var(--dsp); font-weight:700; line-height:1.16; margin:0; text-wrap:balance; letter-spacing:-.015em}
/* h2 é sempre o título de tela (nunca um subtítulo de conteúdo — esses são
   h3) — por isso é o único que vira serifado, na mesma escala usada primeiro
   na Apostila: 27px no celular, 34px a partir de 921px. */
h2{font-family:var(--bod); font-weight:600; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; margin:34px 0 10px; font-size:27px}
@media (min-width:921px){ h2{font-size:34px} }
/* 66ch em Spectral rendia ~85 caracteres reais por linha, não 66 — o "0" da
   fonte é bem mais estreito que a média das letras do corpo. Medido de
   verdade (headless, com a fonte carregada, contando quebra de linha real
   em texto de amostra): 52ch é o valor que fica entre 62 e 68 caracteres. */
p{margin:0 0 14px; max-width:52ch}
button{font:inherit; color:inherit}
a{color:var(--acc-ink)}
:focus-visible{outline:2.5px solid var(--acc); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important; scroll-behavior:auto!important}}
.oculto{display:none!important}

/* ---------- foto-slot ----------
   O app não tem fotografia própria (não baixa de banco de imagens nem usa
   placeholder de serviço externo — tem que abrir sem depender de terceiro).
   Isto é o slot que já fica bom vazio: gradientes + um ruído SVG embutido
   (data: URI, sem rede). É a SEGUNDA exceção registrada à regra "sem
   gradiente" do design system (a primeira é o fundo da tela de entrada) —
   de propósito, pedido explícito do usuário. Quem quiser pôr foto depois
   cria assets/img/ e define --foto no elemento (ex.:
   style="--foto:url(assets/img/x.jpg)") mais a classe "com-foto"; não existe
   nenhuma foto no repositório hoje. VERSÃO COMERCIAL: as fotos (bloco
   "Imagens da versão comercial", abaixo) só aparecem nos banners das telas
   iniciais e na coluna da montanha — nunca atrás de texto de estudo nem na
   tela de entrada. */
.foto-slot{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(200,164,92,.13), transparent 60%),
    linear-gradient(160deg, #1C1F17 0%, #14160F 55%, #24151A 100%);
}
.foto-slot::after{
  content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.foto-slot.com-foto{ background-image:var(--foto); background-size:cover;
  background-position:center }

/* Imagens da versão comercial (geradas por IA — origem no CLAUDE.md, seção 8).
   Nunca os .png originais: WebP de 1916px (largura nativa) no desktop e de
   1000px no celular para os banners; 600px para a coluna. As fotos já são
   quentes — sem tratamento de cor; só o véu escuro à esquerda, onde fica o
   texto. Onde a foto pode aparecer: banner do Início e das telas iniciais de
   Apostila, Questões e Simulado, e a coluna da montanha (≥1440px). Nunca
   atrás de texto de estudo (capítulo, questão, simulado em andamento,
   cartão de papel) e nunca na tela de entrada. */

/* Banner (hero): escuro nos dois temas, como o cartão de papel é claro nos
   dois — por isso as cores do texto são hex fixos, iguais aos do tema escuro. */
.hero{position:relative; display:flex; align-items:center; min-height:320px; margin:10px 0 22px;
  padding:40px 44px; border-radius:var(--r); overflow:hidden; background-color:#14160F;
  background-image:linear-gradient(90deg, #14160F 0%, rgba(20,22,15,.92) 34%, rgba(20,22,15,.55) 56%, rgba(20,22,15,0) 80%), var(--foto);
  background-size:cover; background-position:right center; background-repeat:no-repeat}
.hero-cume{--foto:url("img/hero-cume-1916.webp")}
.hero-caneta{--foto:url("img/hero-caneta-1916.webp")}
.hero-xadrez{--foto:url("img/hero-xadrez-1916.webp")}
.hero-corpo{position:relative; max-width:min(480px, 48%)}
.hero-rot{font-family:var(--mon); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#C0C4B7; margin:0 0 10px}
.hero .hero-titulo{font-family:var(--bod); font-weight:600; font-size:40px; line-height:1.12;
  letter-spacing:-.01em; color:#EDEFE6; margin:0 0 14px}
.hero-apoio{font-size:17px; line-height:1.5; color:#C0C4B7; max-width:42ch; margin:0 0 22px}
/* Botão vinho fixo (#8C2F39, o mesmo da entrada): o banner é sempre escuro,
   então usa o vinho do tema claro com texto branco nos dois temas. */
.hero-btn{display:inline-flex; align-items:center; gap:8px; background:#8C2F39; color:#FFFFFF;
  border-radius:8px; padding:11px 18px; font-family:var(--dsp); font-weight:700; font-size:15px;
  text-decoration:none}
.hero-btn:hover{filter:brightness(1.1)}
@media (max-width:760px){
  .hero{min-height:240px; padding:26px 20px;
    background-image:linear-gradient(90deg, #14160F 0%, rgba(20,22,15,.92) 55%, rgba(20,22,15,.74) 100%), var(--foto)}
  .hero-corpo{max-width:none}
  .hero-cume{--foto:url("img/hero-cume-1000.webp")}
  .hero-caneta{--foto:url("img/hero-caneta-1000.webp")}
  .hero-xadrez{--foto:url("img/hero-xadrez-1000.webp")}
  .hero .hero-titulo{font-size:28px}
  .hero-apoio{font-size:15.5px}
}

/* Coluna da montanha: fixa à direita de toda a área logada, só a partir de
   1440px. Abaixo disso não aparece e a foto não é baixada (--foto só ganha
   valor dentro da media query). Frase clara no céu escuro, em cima; marca
   "Ofício" em ouro fixo #C8A45C com o descritor em mono, embaixo. */
.col-montanha{display:none; --foto:none}
@media (min-width:1440px){
  #app{padding-right:280px}
  .col-montanha{display:flex; flex-direction:column; justify-content:space-between;
    position:fixed; top:0; right:0; bottom:0; width:280px; z-index:5; border-radius:0;
    padding:52px 28px 36px; --foto:url("img/coluna-montanha-600.webp")}
  .col-montanha.foto-slot.com-foto{background-color:#14160F;
    background-image:linear-gradient(to bottom, rgba(20,22,15,.70) 0%, rgba(20,22,15,.30) 22%, rgba(20,22,15,0) 40%, rgba(20,22,15,0) 70%, rgba(20,22,15,.85) 100%), var(--foto);
    background-size:cover; background-position:center bottom}
  .col-montanha::after{display:none}
}
.colm-frase{position:relative; font-family:var(--bod); font-size:22px; line-height:1.35; color:#EDEFE6;
  max-width:none; margin:0; text-wrap:balance}
.colm-marca{position:relative}
.colm-nome{font-family:var(--bod); font-weight:600; font-size:30px; line-height:1.1; color:#C8A45C}
.colm-sub{font-family:var(--mon); font-size:10.5px; line-height:1.5; color:#C0C4B7; text-transform:uppercase;
  letter-spacing:.12em; margin-top:6px}

/* ---------- login (identidade nova) ----------
   Continua a única tela do app com cor fora do sistema de tokens — hex
   fixos, iguais aos do tema escuro em :root, não acompanham o tema que a
   pessoa escolheu pro resto do app. A marca/filete/título usam o ouro
   ESCURO fixo (#C8A45C, o valor do tema escuro), nunca var(--ouro): mesma
   razão de sempre ser hex fixo aqui — se o app estiver no tema claro,
   var(--ouro) resolveria pro tom escuro-pouco-contraste pensado pra papel
   claro, ilegível sobre este fundo sempre-escuro.

   REDESENHO (substitui as duas colunas de uma etapa anterior): o fundo
   animado volta a ocupar a tela inteira, sempre — o canvas é filho direto
   de .entrada e NUNCA MAIS SE MOVE no DOM (diferente da versão de duas
   colunas, que precisava mover o canvas entre .foto-slot e .entrada
   conforme o breakpoint, porque login-glitch.js mede o PRÓPRIO PAI do
   canvas — canvas.parentElement.getBoundingClientRect() — pra decidir o
   tamanho dele, não a viewport). Como agora só existe UM pai possível,
   posicionarCanvasEntrada() (assets/app.js) ficou só um idempotente
   "garanta que está lá dentro" — sem ramo desktop/celular. O formulário
   vira um cartão (.ent-cartao) centralizado nos dois eixos por cima do
   canvas, com fundo semitransparente + blur pra continuar legível com o
   ruído passando atrás. .foto-slot NÃO é mais usado aqui (continua
   existindo só pro cartão de retomada do Início).
   NUNCA volte a min-height:100dvh + overflow:hidden em .entrada — só
   overflow-x, pra rolagem vertical continuar livre em telas baixas
   (lição da etapa anterior); com o cartão centralizado por flex, isso
   também garante espaço nos quatro lados pro fundo aparecer. */
.entrada{position:relative; min-height:100dvh; background:#14160F; overflow-x:hidden;
  display:flex; align-items:center; justify-content:center; padding:32px 16px}
.entrada>.entrada-fundo{position:fixed; inset:0; z-index:0; display:block; width:100%; height:100%; opacity:1}

/* Cartão: menor no celular, não maior — largura em min(), padding e
   tipografia reduzidos. O contraste (opacidade do fundo do cartão) foi
   ajustado até o texto ficar legível mesmo com uma palavra clara do fundo
   passando atrás; a correção certa é aumentar a opacidade do cartão,
   nunca diminuir o texto. */
.ent-cartao{position:relative; z-index:1; width:min(86vw,330px); background:rgba(20,22,15,.78);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:24px 20px}
@media (min-width:921px){
  .ent-cartao{width:100%; max-width:380px; padding:32px 28px}
}

.ent-marca-nova{font-family:var(--bod); font-weight:600; font-size:30px; line-height:1.1;
  letter-spacing:-.01em; color:#C8A45C; margin-bottom:6px}
@media (min-width:921px){ .ent-marca-nova{font-size:38px} }
.ent-marca-sub-nova{font-family:var(--mon); font-size:11px; color:#8B9083; text-transform:uppercase;
  letter-spacing:.14em; margin-bottom:22px}
.ent-titulo-novo{position:relative; padding-left:14px; border-left:2px solid #C8A45C;
  font-family:var(--bod); font-weight:600; font-size:22px; line-height:1.3; color:#EDEFE6;
  margin:0 0 16px}
@media (min-width:921px){ .ent-titulo-novo{font-size:26px; padding-left:16px; margin-bottom:20px} }
.ent-taglines{margin-bottom:20px}
.ent-taglines p{font-family:var(--bod); font-size:13px; color:#C0C4B7; margin:0 0 4px; max-width:none}
@media (min-width:921px){
  .ent-taglines{margin-bottom:26px}
  .ent-taglines p{font-size:16px}
}

.ent-cartao .erro{background:none; border:0; border-radius:0; padding:0; margin-bottom:14px;
  color:#DE8590; font-size:13.5px}
.ent-sem-cadastro{font-family:var(--mon); font-size:11px; color:#8B9083; margin:0 0 16px}

/* Campos com altura reduzida no celular (cartão compacto) — volta ao
   tamanho de sempre a partir de 921px. */
.ent-campo{margin-bottom:13px}
.ent-campo label{display:block; font-family:var(--mon); font-size:10px; color:#8B9083;
  text-transform:uppercase; letter-spacing:.09em; margin-bottom:6px}
.ent-campo-in{display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(237,239,230,.18);
  padding-bottom:6px; transition:border-color .15s}
.ent-campo-in:focus-within{border-bottom-color:#DE8590}
.ent-icone-campo{flex:0 0 auto; color:#8B9083; display:flex}
.ent-campo-in input{flex:1 1 auto; min-width:0; background:none; border:0; padding:0;
  font-family:var(--bod); font-size:15px; color:#EDEFE6}
.ent-campo-in input::placeholder{color:#8B9083}
@media (min-width:921px){
  .ent-cartao .erro{margin-bottom:16px; font-size:14.5px}
  .ent-sem-cadastro{font-size:11.5px; margin-bottom:20px}
  .ent-campo{margin-bottom:16px}
  .ent-campo label{margin-bottom:7px}
  .ent-campo-in{padding-bottom:8px}
  .ent-campo-in input{font-size:16px}
}
.ent-olho{flex:0 0 auto; background:none; border:0; padding:2px; margin:0; color:#8B9083;
  cursor:pointer; display:flex; border-radius:4px}
.ent-olho:hover{color:#EDEFE6}

.ent-linha2{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; margin:18px 0 4px}
.ent-lembrar{display:flex; align-items:center; gap:8px; font-family:var(--mon); font-size:12px;
  color:#C0C4B7; cursor:pointer}
.ent-lembrar input{width:15px; height:15px; accent-color:#DE8590; cursor:pointer}
.ent-esqueci{background:none; border:0; padding:0; text-decoration:underline; color:#8B9083;
  font-family:var(--mon); font-size:12px; cursor:pointer}
.ent-esqueci:hover{color:#EDEFE6}
.ent-msg-esqueci{font-size:14px; color:#C0C4B7; background:rgba(237,239,230,.05);
  border-left:2px solid #DE8590; border-radius:0 8px 8px 0; padding:10px 13px; margin:0 0 18px}

.ent-entrar{width:100%; height:48px; border:0; border-radius:12px; background:#8C2F39;
  color:#FFFFFF; font-family:var(--dsp); font-weight:600; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px}
.ent-entrar:hover{filter:brightness(1.08)}
.ent-entrar:disabled{opacity:.6; cursor:default}
@media (min-width:921px){ .ent-entrar{height:56px; font-size:16px} }

/* Celular pequeno (≤480px): o cartão estava tomando quase a tela inteira e
   sobrava pouco fundo animado visível. Encolhe mais — some o reforço de
   mensagem (taglines), que é o que mais come
   altura e não é função, só reforço de texto. Não mexe no desktop
   (regras >=921px ficam intactas, acima). */
@media (max-width:480px){
  .ent-cartao{width:min(82vw,300px); padding:20px 18px}
  .ent-marca-nova{font-size:26px}
  .ent-marca-sub-nova{font-size:10px}
  .ent-titulo-novo{font-size:18px}
  .ent-taglines{display:none}
  .ent-campo{margin-bottom:10px}
  .ent-campo-in{padding-bottom:4px}
}

.entrada :focus-visible{outline-color:#DE8590}

.campo{margin-bottom:14px}
.campo label{display:block; font-family:var(--mon); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--mut); margin-bottom:5px}
.campo input,.campo select{width:100%; background:var(--sunk); color:var(--ink); border:1px solid var(--line2); border-radius:8px; padding:11px 12px; font-family:var(--mon); font-size:14.5px}
.erro{background:var(--acc-soft); border-left:3px solid var(--acc); border-radius:0 8px 8px 0; padding:10px 13px; font-size:15px; margin-bottom:14px}

/* ---------- casca ----------
   Desktop: barra lateral inteira (marca, navegação, conta) — sem barra de
   topo, ela existe só no celular. Celular: barra de topo com a marca e um
   único ponto de acesso à conta, que abre um painel embutido (mesma lógica
   de acordeão de .lateral .sub, sem popup flutuante) — e barra inferior só
   com os destinos de navegação. Reaproveita o corte de 920px já usado em
   .tela.duas e .lateral, em vez de inventar um breakpoint novo. Simulado
   tem link próprio (data-v="simulado") embora a URL continue
   #/progresso/simulado — promovido só na navegação, sem mudar o contrato
   de endereço do resultado (CLAUDE.md, seção 7.3); navegar() em app.js
   trata essa rota como "simulado" para destacar o item certo, em vez de
   "progresso". ---------- */
.topo{border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:20}
.topo-in{max-width:1220px; margin:0 auto; padding:10px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.topo b{font-family:var(--dsp); font-size:15.5px; letter-spacing:-.02em}
.topo .dir{margin-left:auto; display:flex; align-items:center; gap:14px}
.topo .lnk{background:none; border:0; text-decoration:underline; color:var(--mut); font-family:var(--mon); font-size:11.5px; cursor:pointer; padding:0}
.salvando{font-family:var(--mon); font-size:10.5px; color:var(--mut); opacity:0; transition:opacity .2s}
.salvando.on{opacity:1}

.painelConta{background:var(--sunk); border-bottom:1px solid var(--line); padding:14px 20px 18px}
.painelConta-nome{font-family:var(--dsp); font-weight:700; font-size:15px}
.painelConta-email{font-family:var(--mon); font-size:11.5px; color:var(--mut); margin-bottom:12px; word-break:break-all}
.painelConta .lnk{display:block; margin-top:9px; background:none; border:0; text-decoration:underline; color:var(--mut); font-family:var(--mon); font-size:11.5px; cursor:pointer; padding:0; text-align:left}

.corpo{max-width:1220px; margin:0 auto}

.menu{background:var(--sunk); border-bottom:1px solid var(--line); position:sticky; top:43px; z-index:19}
.menu-marca{display:none}
.menu-conta{display:none}
.menu-in{max-width:1220px; margin:0 auto; padding:0 12px; display:flex; gap:2px; overflow-x:auto}
.menu a{display:block; padding:10px 14px; font-family:var(--dsp); font-weight:600; font-size:14px; color:var(--ink2); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a.aqui{color:var(--acc-ink); border-bottom-color:var(--acc)}
/* Grupos de navegação (Navegação / Biblioteca): no celular os wrappers não
   participam do layout (display:contents) e o rótulo some — a barra
   inferior continua uma fila só, com os sete destinos, sem separação
   visual. A separação em grupo só existe no desktop, onde vira seção. */
.menu-grupo{display:contents}
.menu-rotulo{display:none}

.tela{max-width:1220px; margin:0 auto; padding:26px 20px 110px}
.tela.duas{display:grid; grid-template-columns:268px minmax(0,1fr); gap:32px; align-items:start}
@media (max-width:920px){ .tela.duas{grid-template-columns:1fr; gap:14px} }

@media (min-width:921px){
  .topo{display:none}
  .painelConta{display:none}
  .corpo{display:grid; grid-template-columns:220px minmax(0,1fr); align-items:start}
  .menu{position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
    border-bottom:0; border-right:1px solid var(--line)}
  .menu-marca{display:flex; align-items:center; gap:10px; padding:18px 16px 16px; flex:0 0 auto}
  .menu-monograma{flex:0 0 auto; width:28px; height:28px; border-radius:50%;
    border:1px solid var(--line2); display:grid; place-items:center;
    font-family:var(--bod); font-size:13px; color:var(--ink)}
  .menu-marca-nome{font-family:var(--dsp); font-weight:700; font-size:16px;
    letter-spacing:-.02em; line-height:1.15}
  .menu-marca-sub{font-family:var(--mon); font-size:9px; color:var(--mut);
    text-transform:uppercase; letter-spacing:.08em}
  .menu-in{max-width:none; margin:0; flex:1 1 auto; flex-direction:column; padding:6px 10px;
    gap:2px; overflow-x:visible; overflow-y:auto}
  .menu-grupo{display:block; margin-bottom:18px}
  .menu-grupo:last-child{margin-bottom:0}
  .menu-rotulo{display:block; font-family:var(--mon); font-size:10px; color:var(--mut);
    text-transform:uppercase; letter-spacing:.09em; padding:4px 14px 8px}
  .menu a{border-bottom:0; border-left:2px solid transparent; padding:10px 14px}
  .menu a.aqui{border-left-color:var(--acc); color:var(--ink); font-weight:700}
  .menu-conta{display:block; flex:0 0 auto; border-top:1px solid var(--line); padding:14px 16px 16px}
  .menu-conta-nome{font-family:var(--dsp); font-weight:700; font-size:14px}
  .menu-conta-email{font-family:var(--mon); font-size:11px; color:var(--mut); margin-bottom:10px; word-break:break-all}
  .menu-conta .lnk{display:block; margin-top:8px; background:none; border:0; text-decoration:underline;
    color:var(--mut); font-family:var(--mon); font-size:11.5px; cursor:pointer; padding:0; text-align:left}
  .tela{max-width:none; margin:0; padding:26px 24px 40px}
  .lateral{top:20px; max-height:calc(100vh - 40px)}
}

/* Aviso de "sair falhou" — cabe tanto na coluna estreita do desktop
   (.menu-conta) quanto no painel do celular (.painelConta): reaproveita
   .erro (mesma linguagem visual das outras telas de falha de salvamento),
   só encolhido pro espaço apertado dessas duas colunas. */
.menu-conta .aviso-sair,
.painelConta .aviso-sair{font-size:12px; padding:9px 11px; margin:10px 0 0; line-height:1.5}
.menu-conta .aviso-sair button,
.painelConta .aviso-sair button{display:block; margin-top:7px; text-align:left}
@media (max-width:920px){
  .menu{position:fixed; left:0; right:0; top:auto; bottom:0; border-bottom:0; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px)}
  .menu-in{padding:0 6px}
  .menu a{padding:10px 12px 9px; font-size:12.5px}
}

/* Troca de senha obrigatória (Minha conta): esconde só a navegação até a
   troca acontecer — marca e conta (que tem "sair") continuam acessíveis,
   porque a pessoa precisa poder sair mesmo travada aqui. Clicar em
   qualquer destino de navegação só voltaria para #/conta mesmo, via o
   guard em renderizarTela (assets/app.js). */
#app.conta-obrigatoria .menu-in{display:none}

/* Barra de conteúdo: fica presa acima de <main id="tela">, não acima da
   barra lateral inteira — por isso .conteudo existe só como wrapper de
   layout (grid) em volta dela e de #tela, nunca estilizado por conta
   própria. Estática à esquerda ("sessão em foco" é uma marca de propósito,
   não muda por tela); a data e as iniciais são as únicas partes dinâmicas
   (atualizarBarraConteudo, assets/app.js — chamada no login e sempre que a
   data da prova é salva). */
.conteudo{min-width:0}
.barra-conteudo{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 24px; border-bottom:1px solid var(--line)}
.bc-esq{display:flex; align-items:center; gap:8px; font-family:var(--mon); font-size:10.5px;
  color:var(--mut); text-transform:uppercase; letter-spacing:.09em; white-space:nowrap}
.bc-ponto{width:6px; height:6px; border-radius:50%; background:var(--acc); flex:0 0 auto}
.bc-dir{display:flex; align-items:center; gap:14px; min-width:0}
.bc-dias{font-family:var(--mon); font-size:10.5px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.09em; white-space:nowrap}
.bc-iniciais{width:26px; height:26px; border-radius:50%; border:1px solid var(--line2);
  display:grid; place-items:center; font-family:var(--mon); font-size:10.5px; font-weight:600;
  color:var(--ink2); flex:0 0 auto}
@media (max-width:920px){
  .barra-conteudo{padding:11px 16px}
  .bc-esq{font-size:10px}
  .bc-dias{font-size:10px}
}

.eyebrow{font-family:var(--mon); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:10px}
h1{font-size:clamp(27px,4.4vw,38px); font-weight:800; margin-bottom:12px}
h3{font-size:18px; margin:26px 0 8px}
.lead{font-size:19px; color:var(--ink2); max-width:47ch}

/* ---------- blocos ---------- */
/* Cartões de listagem (módulos da Apostila, aulas de Vendas): lista editorial,
   não grade de caixas — linha fina separando cada item, sem borda em volta. */
.cartoes{display:flex; flex-direction:column; margin:18px 0}
.cartao{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:20px 0; text-align:left; cursor:pointer; display:block; width:100%; text-decoration:none; color:inherit}
.cartao:first-child{border-top:0}
.cartao:hover .ct{color:var(--acc-ink)}
.cartao .cn{font-family:var(--mon); font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.cartao .ct{font-family:var(--bod); font-weight:600; font-size:22px; margin:5px 0 9px; line-height:1.2}
.cartao .cm{font-family:var(--mon); font-size:11.5px; color:var(--mut)}
.cartao .barra{max-width:260px}
.barra{height:7px; background:var(--card2); border-radius:99px; overflow:hidden; margin-top:9px}
.barra i{display:block; height:100%; background:var(--ok); border-radius:99px; transition:width .35s ease}
.barra.acc i{background:var(--acc)}
.barra.fina{height:4px; max-width:220px; margin-top:6px}

.indic{display:flex; gap:20px; flex-wrap:wrap; margin:18px 0}
.indic div b{display:block; font-family:var(--dsp); font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.indic div span{font-family:var(--mon); font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.07em}
.indic div small{display:block; font-family:var(--mon); font-size:9.5px; color:var(--mut); margin-top:3px}

/* ---------- início (redesenho) ----------
   Cartões com fundo levemente destacado e borda de 1px — diferente do
   .guardar do resto do app (sem caixa, regra fina no topo); exceção de
   propósito só nesta tela, seguindo a referência visual aprovada pelo
   usuário. Regra que vale pra tudo aqui: todo número vem de
   assets/app.js (renderizarInicio e as funções que ele chama) calculado
   em cima de Estado.questoes/Estado.apostila reais — nunca um valor de
   exemplo. Sem tentativa nenhuma registrada, a tela vira só o convite ao
   diagnóstico (ver comentário em renderizarInicio). */
.ini-saudacao{font-family:var(--mon); font-size:11px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 8px}

.ini-cartao{background:var(--sunk); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; margin:20px 0}
.ini-cartao b.t{display:block; font-family:var(--dsp); font-weight:700; font-size:15px; margin-bottom:14px}
.ini-cartao .rot{font-family:var(--mon); font-size:10px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.09em; margin-bottom:8px}

/* Três números, não um (CLAUDE.md, seção 7.3, "Prontidão") — substitui o
   antigo cartão de nota única (.ini-panorama/.ini-nota, removidas: uma
   investigação achou que uma usuária lia só o número baixo da prontidão e
   concluía que o app estava errado). .ini-metrica é o bloco individual
   (Desempenho / Cobertura / Prontidão); .ini-tres-metricas é a fileira. */
.ini-tres-metricas{display:flex; flex-wrap:wrap; gap:24px; margin-bottom:18px}
.ini-metrica{flex:1 1 140px; min-width:120px}
.ini-metrica b{display:block; font-family:var(--bod); font-weight:600; font-size:38px; line-height:1;
  color:var(--ink)}
.ini-metrica span{display:block; font-family:var(--mon); font-size:10px; color:var(--mut);
  text-transform:uppercase; letter-spacing:.09em; margin:8px 0 4px}
.ini-metrica p{font-size:13.5px; color:var(--ink2); max-width:none; margin:0}
@media (max-width:520px){ .ini-metrica b{font-size:30px} }

.ini-corte-barra{position:relative; height:9px; background:var(--card2); border-radius:99px; margin-bottom:8px}
.ini-corte-barra i{display:block; height:100%; background:var(--acc); border-radius:99px; transition:width .35s ease}
.ini-corte-marca{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink)}
.ini-corte-legenda{font-family:var(--mon); font-size:10px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:14px}
.botoes{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- início (identidade nova: ouro + foto-slot) ----------
   Substitui panorama/hoje/três-números/trilha/recomendação da etapa
   anterior — as classes daquela versão que não sobreviveram (.ini-dias,
   .ini-selo, .ini-tarefas/.ini-tarefa, .ini-trilha, .ini-rec) foram
   removidas daqui porque não têm mais nenhum uso em app.js. */
.ini-saudacao-linha{font-family:var(--dsp); font-size:15px; color:var(--ink2); margin:14px 0 0; max-width:none}
.ini-saudacao-linha .mini{margin-left:8px}

.ini-duas{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:32px; align-items:start}
@media (max-width:920px){ .ini-duas{grid-template-columns:1fr; gap:8px} }
.ini-principal{min-width:0}

/* Ícone de interface: traço em ouro sobre quadrado de 36px em --ouro-fraco,
   cantos de 8px (CLAUDE.md, seção 8). Alerta é a exceção: vinho/vermelho. */
.icone-caixa{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:8px; background:var(--ouro-fraco); color:var(--ouro)}
.icone-caixa.apagado{background:var(--card2); color:var(--line2)}
.icone-caixa.alerta{background:var(--acc-soft); color:var(--acc-ink)}

.anel{display:block; flex:0 0 auto}
.anel-txt{font-family:var(--mon); font-size:15px; font-weight:600; fill:var(--ink)}

/* Três cartões (Variação 1 da referência). */
.ini-tres{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 16px}
@media (max-width:760px){ .ini-tres{grid-template-columns:1fr} }
.ini-tres .ini-cartao, .ini-modulos-passos .ini-cartao{margin:0}
/* A coluna principal do Início fica estreita no desktop (ao lado de "Sua
   jornada") — dentro dos três cartões, ícone/anel em cima e texto embaixo,
   para o texto não quebrar palavra a palavra. */
.ini-tres .ini-cartao{padding:20px}
.ini-tres .ini-prog, .ini-tres .ini-cartao-linha{flex-direction:column; align-items:flex-start; gap:12px}
.ini-tres .ini-prog-txt{width:100%}
.ini-prog{display:flex; align-items:center; gap:16px}
.ini-prog-txt{flex:1 1 auto; min-width:0}
.ini-prog-txt b{display:block; font-family:var(--dsp); font-size:17px; margin:2px 0 0}
.ini-prog-txt .barra{margin:8px 0 6px}
.ini-prog-rot{display:block; font-family:var(--dsp); font-size:13px; color:var(--ink2)}
.ini-prontidao{font-family:var(--mon); font-size:11.5px; line-height:1.5; color:var(--ink2); margin:14px 0 0; max-width:none}
.ini-cartao-linha{display:flex; align-items:center; gap:14px}
.ini-cartao-num{display:block; font-family:var(--bod); font-weight:600; font-size:26px; line-height:1.1; color:var(--ink)}
.ini-cartao-tit{display:block; font-family:var(--dsp); font-weight:700; font-size:15px}
.ini-cartao .barra.ouro{margin-top:14px}
.ini-cartao-rodape{font-family:var(--mon); font-size:12px; color:var(--ink2); margin:8px 0 0; max-width:none}
.ini-cartao-nota{font-size:13.5px; color:var(--ink2); margin:-2px 0 16px; max-width:none}

/* Duas faixas: retomada e atenção. */
.ini-faixas{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; margin:0 0 16px}
@media (max-width:760px){ .ini-faixas{grid-template-columns:1fr} }
.ini-faixa{display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--r);
  background:var(--sunk); border:1px solid var(--line); color:var(--ink); text-decoration:none; min-width:0}
a.ini-faixa:hover{border-color:var(--line2)}
.ini-faixa-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.ini-faixa-txt b{font-family:var(--dsp); font-size:15px}
.ini-faixa-txt span{font-size:14px; line-height:1.45; color:var(--ink2)}
.ini-faixa-seta{flex:0 0 auto; color:var(--ouro); display:flex}
.ini-faixa.alerta{background:var(--acc-soft); border-color:var(--acc-line)}
.ini-faixa.alerta b{color:var(--acc-ink)}
.ini-faixa-link{flex:0 0 auto; font-family:var(--dsp); font-weight:600; font-size:13.5px; color:var(--acc-ink)}
@media (max-width:520px){ .ini-faixa.alerta{flex-wrap:wrap} .ini-faixa-link{margin-left:50px} }

/* Atalhos com ícone. */
.ini-atalhos{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 16px}
@media (max-width:1100px){ .ini-atalhos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .ini-atalhos{grid-template-columns:1fr} }
/* Celular (até 600px): atalhos em grade 2x2 — ícone e título sempre; a linha
   de descrição some abaixo de 360px, onde não cabe sem quebrar o cartão. */
@media (max-width:600px){
  .ini-atalhos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
  .ini-atalho{padding:14px}
  .ini-atalho span{font-size:12.5px}
}
@media (max-width:359px){ .ini-atalho span{display:none} }
.ini-atalho{display:flex; flex-direction:column; gap:4px; padding:18px; border-radius:var(--r); background:var(--sunk);
  border:1px solid var(--line); color:var(--ink); text-decoration:none}
.ini-atalho:hover{border-color:var(--line2)}
.ini-atalho .icone-caixa{margin-bottom:8px}
.ini-atalho b{font-family:var(--dsp); font-size:15px}
.ini-atalho span{font-size:13.5px; line-height:1.4; color:var(--ink2)}

/* Progresso por módulo + próximos passos. */
.ini-modulos-passos{display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 16px}
.ini-aneis{display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:18px 10px}
.ini-anel{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.ini-anel .anel-txt{font-size:13px}
.ini-anel span{font-family:var(--dsp); font-size:12.5px; line-height:1.3; color:var(--ink2)}
.ini-passo{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0;
  border-top:1px solid var(--line); color:var(--ink); text-decoration:none}
.ini-passo:first-of-type{border-top:0; padding-top:4px}
.ini-passo b{display:block; font-family:var(--dsp); font-size:14.5px}
.ini-passo small{display:block; font-family:var(--mon); font-size:11.5px; color:var(--ink2); margin-top:2px}
.ini-passo svg{flex:0 0 auto; color:var(--ouro)}
.ini-passo:hover b{color:var(--acc-ink)}

/* Coluna lateral: jornada, nível e a frase. */
.ini-lateral .ini-cartao{margin:0}
.ini-frase{margin:0; padding:4px 4px 0}
.ini-frase blockquote{margin:0; font-family:var(--bod); font-style:italic; font-size:18px; line-height:1.5; color:var(--ink2)}
.ini-frase::after{content:""; display:block; width:36px; height:2px; background:var(--ouro); margin-top:14px}

.ini-seq-linha{display:flex; align-items:center; gap:10px; margin:4px 0 8px}
.ini-seq-icone{color:var(--line2); display:flex}
.ini-seq-icone.ativo{color:var(--ouro)}
/* Reduzido de 32px — desequilibrava o cartão ao lado dos outros dois (o
   donut de Prontidão e o "t" de Missão de hoje, nenhum dos dois com peso
   tipográfico tão grande) — e a explicação virou uma linha só ("dias
   seguidos estudando"), então não precisa mais do número carregando
   sozinho o peso visual do cartão. */
.ini-seq-num{font-family:var(--bod); font-weight:600; font-size:26px; color:var(--ink)}

/* Sticky no desktop: a coluna lateral (jornada + nível) é naturalmente
   mais curta que a principal (retomada + três cartões + alerta) — numa
   grid comum (align-items:start) ela só "acaba no meio da tela" e deixa
   um vão vazio embaixo dela enquanto a principal continua. Sticky evita
   esse corte abrupto sem inventar cartão nem número novo pra preencher:
   ela acompanha a rolagem em vez de ficar parada, então nunca "termina"
   visualmente antes da hora. Só no desktop — no celular ela empilha
   depois da principal, sem sentido pra grudar no topo. */
.ini-lateral{display:flex; flex-direction:column; gap:16px}
@media (max-width:920px){ .ini-lateral{margin-top:8px} }
@media (min-width:921px){ .ini-lateral{position:sticky; top:20px} }
.ini-jornada-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.ini-jornada-item:first-of-type{border-top:0; padding-top:4px}
.ini-jornada-item > span:not(.icone-caixa){flex:1 1 auto; font-family:var(--dsp); font-size:14.5px; color:var(--ink)}
.ini-jornada-item small{display:block; font-family:var(--mon); font-size:11px; color:var(--ink2)}
.ini-jornada-item b{font-family:var(--dsp); font-size:18px; font-variant-numeric:tabular-nums}
/* 19px + negrito conta como "texto grande" no WCAG (limiar 3:1, não 4,5:1) —
   medido: var(--ouro) claro (#9A7A33) só chega a ~3,5-4:1 contra os fundos
   claros do app, abaixo do limiar de texto normal. Aumentar o tamanho é a
   correção (não mudar o hex, que veio especificado); confirmado com a
   fórmula de contraste do WCAG antes de publicar. */
.ini-nivel-nome{display:block; font-family:var(--dsp); font-weight:700; font-size:19px; margin:6px 0 10px;
  color:var(--ouro)}
.barra.ouro i{background:var(--ouro)}
.ini-nivel-legenda{font-family:var(--mon); font-size:10.5px; color:var(--mut); margin-top:8px; max-width:none}

/* ---------- progresso (redesenho) ----------
   Reaproveita as classes .ini-* acima (cartão de nota, barra de corte) —
   nasceram na tela de Início, mas o padrão visual (número grande + barra
   com marca de corte) é o mesmo aqui; o prefixo "ini-" ficou por herança,
   não é exclusivo daquela tela. */
.ini-corte-rotulos{position:relative; height:15px; margin-bottom:14px}
.ini-corte-rotulos span{position:absolute; top:0; font-family:var(--mon); font-size:9.5px;
  color:var(--mut); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.ini-corte-rotulos .rot-inicio{left:0}
.ini-corte-rotulos .rot-corte{left:70%; transform:translateX(-50%)}

/* Mapa Pareto como lista, não mais tabela de seis colunas — nome do
   assunto em tamanho de leitura, módulo em mono abaixo, domínio numa barra
   fina, em_jogo% à direita. Linha "crítica" (acima do corte de 80%
   acumulado) ganha fundo de atenção — mesma cor que a versão em tabela já
   usava (var(--warn-soft)), não o acento (reservado a link/ativo/botão). */
.pareto-lista{margin:18px 0}
.pareto-item{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border-top:1px solid var(--line)}
.pareto-item:first-child{border-top:0}
.pareto-item.critico{background:var(--warn-soft); border-top-color:transparent; border-radius:8px}
.pareto-item.corte{border-bottom:2px dashed var(--line2); margin-bottom:2px}
.pi-txt{flex:1 1 auto; min-width:0}
.pi-assunto{font-size:16.5px; color:var(--ink2)}
.pareto-item.critico .pi-assunto{color:var(--ink); font-weight:600}
.pi-modulo{font-family:var(--mon); font-size:10.5px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.07em; margin:2px 0 0}
.pi-pct{flex:0 0 auto; font-family:var(--mon); font-size:15px; font-variant-numeric:tabular-nums;
  color:var(--ink2)}
.pareto-item.critico .pi-pct{color:var(--warn); font-weight:600}

/* ---------- apostila: lista de módulos (redesenho) ----------
   Não é <table> de verdade — é um grid com grid-template-areas, pra poder
   reordenar em cartão no celular (nome+número em cima, barra+estado no
   meio, ação em largura total embaixo) sem duplicar HTML. .apo-cab é só o
   cabeçalho da versão desktop; some no celular. */
.apo-busca{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin:18px 0}
.apo-busca .campo{flex:1 1 260px; margin-bottom:0}
.apo-contador{font-family:var(--mon); font-size:11px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.07em; white-space:nowrap; padding-bottom:11px}

.apo-tabela{margin:8px 0}
.apo-cab{display:grid; grid-template-columns:100px minmax(0,1fr) 230px 130px; gap:16px;
  padding:0 0 10px; border-bottom:1px solid var(--line); font-family:var(--mon); font-size:10px;
  color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.apo-linha{display:grid; grid-template-areas:"num conteudo progresso acao";
  grid-template-columns:100px minmax(0,1fr) 230px 130px; gap:16px; align-items:center;
  padding:16px 0; border-top:1px solid var(--line)}
.apo-linha:first-child{border-top:0}
.apo-num{grid-area:num; font-family:var(--mon); font-size:11px; color:var(--mut)}
.apo-conteudo{grid-area:conteudo; min-width:0}
.apo-nome{font-size:16.5px; color:var(--ink)}
.apo-meta{font-family:var(--mon); font-size:10.5px; color:var(--mut); margin-top:3px}
.apo-progresso{grid-area:progresso; display:flex; align-items:center; gap:10px; min-width:0}
.apo-pct{font-family:var(--mon); font-size:13px; color:var(--ink2); flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.apo-progresso .barra{flex:1 1 auto; margin-top:0; min-width:40px; max-width:90px}
.apo-estado{font-family:var(--mon); font-size:10.5px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.06em; flex:0 0 auto; white-space:nowrap}
.apo-acao{grid-area:acao; justify-self:end}

@media (max-width:760px){
  .apo-cab{display:none}
  .apo-linha{grid-template-areas:"num conteudo" "progresso progresso" "acao acao";
    grid-template-columns:auto 1fr; row-gap:10px}
  .apo-num{align-self:start}
  .apo-acao{justify-self:stretch}
  .apo-acao a{display:block; text-align:center}
}

/* ---------- questões: módulos (redesenho) ----------
   Reaproveita o mesmo mecanismo de acordeão de antes (clique no módulo
   abre a lista de assuntos embutida, sem trocar de rota) — só a casca
   visual mudou, de .lateral/.grupo/.gtit/.sub (compartilhado com a lateral
   do capítulo) pra estas classes próprias, porque .lateral tem
   position:sticky/max-height pensados pra coluna estreita ao lado de
   conteúdo, não pra lista de página inteira. */
.qmod-lista{margin:18px 0}
.qmod-linha{border-top:1px solid var(--line)}
.qmod-linha:first-child{border-top:0}
.qmod-gtit{display:flex; align-items:center; gap:12px; width:100%; background:none; border:0;
  padding:16px 0; cursor:pointer; text-align:left; font:inherit; color:inherit}
.qmod-ponto{flex:0 0 auto; width:8px; height:8px; border-radius:50%}
.qmod-ponto.apagado{background:var(--line2)}
.qmod-ponto.atencao{background:var(--warn)}
.qmod-ponto.acento{background:var(--acc)}
.qmod-ponto.acerto{background:var(--ok)}
.qmod-nome{flex:1 1 auto; min-width:0; font-size:16.5px; color:var(--ink)}
.qmod-dir{flex:0 0 auto; display:flex; align-items:center; gap:14px}
.qmod-cnt{font-family:var(--mon); font-size:11px; color:var(--mut); white-space:nowrap}
.qmod-barra{width:60px; margin-top:0}
.qmod-praticar{font-family:var(--mon); font-size:11px; color:var(--acc-ink); text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap}
@media (max-width:560px){
  .qmod-gtit{flex-wrap:wrap; row-gap:10px}
  .qmod-dir{width:100%; justify-content:space-between; padding-left:20px}
}

.qmod-sub{display:none; padding:0 0 12px 20px}
.qmod-sub.aberto{display:block}
.qmod-sub button{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:0; border-top:1px solid var(--line); padding:10px 0;
  font-family:var(--bod); font-size:15px; color:var(--ink2); cursor:pointer}
.qmod-sub button:first-child{border-top:0}
.qmod-sub button:hover{color:var(--acc-ink)}
.qmod-sub button .cnt{margin-left:auto; font-family:var(--mon); font-size:10.5px; color:var(--mut);
  white-space:nowrap}

.nota{border-left:3px solid var(--acc); background:var(--acc-soft); padding:13px 16px; border-radius:0 8px 8px 0; margin:18px 0; font-size:16px}
.nota b{font-family:var(--dsp)}
.nota.ok{border-left-color:var(--ok); background:var(--ok-soft)}
small.fonte{display:block; font-family:var(--mon); font-size:11.5px; color:var(--mut); margin-top:12px; line-height:1.55}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--acc); color:var(--btn-ink); border:0; border-radius:8px; padding:11px 18px; cursor:pointer; font-family:var(--dsp); font-weight:700; font-size:15px; text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.larga{width:100%}
.btn.fantasma{background:none; color:var(--ink); border:1px solid var(--line2)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0}

/* ---------- barra lateral de navegação de conteúdo ----------
   Item ativo é barra fina à esquerda + peso maior no texto, nunca caixa —
   mesmo tratamento em todo canto que usa .lateral (capítulo, menu de
   Questões, aula de Vendas). Lidos ficam na cor apagada, com o ✓. */
.lateral{position:sticky; top:92px; align-self:start; max-height:calc(100vh - 112px); overflow-y:auto; padding-bottom:12px}
.lateral h5{font-family:var(--mon); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--mut); margin:0 0 10px; font-weight:500}
.lateral ol{list-style:none; margin:0; padding:0; counter-reset:c}
.lateral li{counter-increment:c}
.lateral a{display:flex; gap:9px; padding:5px 8px 5px 11px; border-left:2px solid transparent; border-radius:0; font-family:var(--dsp); font-size:13.5px; font-weight:500; color:var(--ink2); text-decoration:none; line-height:1.35}
.lateral a::before{content:counter(c); font-family:var(--mon); font-size:10.5px; color:var(--mut); flex:0 0 14px; padding-top:2px}
.lateral a:hover{background:none; color:var(--ink)}
.lateral a.lido{color:var(--mut)}
.lateral a.aqui{background:none; border-left-color:var(--acc); color:var(--ink); font-weight:700}
.lateral a.lido::after{content:'✓'; margin-left:auto; color:var(--ok); font-size:12px}
.lateral .grupo{margin-bottom:6px}
.lateral .gtit{display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; padding:7px 9px; border-radius:8px; cursor:pointer; font-family:var(--dsp); font-weight:700; font-size:14px; text-align:left}
.lateral .gtit:hover{background:var(--card2)}
.lateral .gtit .cnt{margin-left:auto; font-family:var(--mon); font-size:10.5px; color:var(--mut); font-weight:400}
.lateral .sub{display:none; padding-left:6px}
.lateral .sub.aberto{display:block}
.lateral .sub button{display:flex; gap:8px; width:100%; text-align:left; background:none; border:0; border-left:2px solid var(--line); padding:5px 9px; cursor:pointer; font-family:var(--dsp); font-size:13px; font-weight:500; color:var(--ink2); line-height:1.35}
.lateral .sub button:hover{background:var(--card2); color:var(--ink)}
.lateral .sub button.aqui{background:none; color:var(--ink); font-weight:700; border-left-color:var(--acc)}
.lateral .sub .cnt{margin-left:auto; font-family:var(--mon); font-size:10px; color:var(--mut); white-space:nowrap}
@media (max-width:920px){ .lateral{position:static; max-height:none} }

/* ---------- capítulo / cabeçalho de leitura ----------
   Direção editorial (jornal/revista, o texto manda), levada da Apostila para
   o app inteiro: blocos perdem caixa — linha fina no topo, rótulo pequeno em
   Plex Mono apagado, conteúdo solto, respiro generoso acima (40px). .exemplo
   (fundo afundado) e .arma (fundo de atenção + barra lateral) são as duas
   exceções que continuam com fundo, de propósito. O vinho só aparece em
   link, item ativo e botão de ação — por isso saiu dos rótulos de bloco. */
.cap{padding-top:30px; margin-top:38px; border-top:1px solid var(--line)}
.cap:first-child{border-top:0; margin-top:0; padding-top:0}
.cap-n{font-family:var(--mon); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--mut); margin-bottom:8px}
.cap-cabecalho{margin-bottom:4px}
.cap-titulo{margin:4px 0 0}
.cap-corpo{margin-top:10px}
.cap-corpo h3{font-size:21px; margin:36px 0 10px}
.cap-corpo p{margin-bottom:20px}

.porque,
.guardar,
.voz,
.fixa{
  background:none; border:0; border-top:1px solid var(--line); border-radius:0;
  padding:16px 0 0; margin:40px 0 0;
}
.porque > b:first-child,
.guardar > b:first-child,
.voz > b:first-child,
.fixa > b:first-child{
  display:block; font-family:var(--mon); font-weight:500; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); margin-bottom:10px;
}
.guardar ul{margin:0; padding-left:19px}
.guardar li{margin-bottom:6px}
.fixa ol{margin:0; padding-left:20px}
.fixa > ol > li{margin-bottom:14px}
.fixa .ex{font-size:16.5px; line-height:1.55; margin-bottom:7px}
.fixa details{border-top:1px dashed var(--line2); padding-top:8px}
.fixa summary{cursor:pointer; font-family:var(--mon); font-size:11.5px; color:var(--mut); list-style:none}
.fixa summary::-webkit-details-marker{display:none}
.fixa summary::before{content:'▸ '; color:var(--mut)}
.fixa details[open] summary::before{content:'▾ '}
.fixa .rp{margin-top:8px; font-size:16px; line-height:1.58; color:var(--ink2); background:var(--ok-soft); border-left:3px solid var(--ok); padding:11px 14px; border-radius:0 8px 8px 0}
.fixa .rp b{color:var(--ink)}
.voz ol{margin:0; padding-left:19px; font-size:16.5px; color:var(--ink2)}

.exemplo{background:var(--sunk); border:0; border-radius:var(--r); padding:18px 20px; margin:40px 0 0}
.exemplo > b:first-child{display:block; font-family:var(--mon); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:8px}
.exemplo .passo{display:flex; gap:11px; margin:9px 0}
.exemplo .passo i{flex:0 0 21px; height:21px; border-radius:50%; background:var(--card2); color:var(--ink2); font-family:var(--mon); font-size:11px; font-style:normal; display:grid; place-items:center; margin-top:4px}

.arma{background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:0 9px 9px 0; padding:14px 17px; margin:40px 0 0}
.arma > b:first-child{display:block; font-family:var(--dsp); font-size:14px; margin-bottom:5px; color:var(--warn)}

.fimcap{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:44px; padding-top:15px; border-top:1px solid var(--line)}
.fimcap label{display:flex; align-items:center; gap:8px; font-family:var(--mon); font-size:12px; color:var(--mut); cursor:pointer}
.fimcap input{width:16px; height:16px; accent-color:var(--ok); cursor:pointer}

/* ---------- questões ---------- */
.modo{display:inline-flex; border:1px solid var(--line2); border-radius:99px; overflow:hidden; background:var(--sunk)}
.modo button{background:none; border:0; padding:5px 14px; font-family:var(--dsp); font-weight:600; font-size:13px; cursor:pointer; color:var(--ink2)}
.modo button[aria-pressed="true"]{background:var(--acc); color:var(--btn-ink)}
.q{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin:16px 0}
.q.feita{border-color:var(--ok-line)}
.qtop{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:11px}
.qnum{font-family:var(--mon); font-size:12px; font-weight:600; color:var(--acc-ink)}
.etq{font-family:var(--mon); font-size:10px; padding:2px 8px; border-radius:99px; border:1px solid var(--line2); color:var(--mut); text-transform:uppercase; letter-spacing:.06em}
.etq.d1{background:var(--ok-soft); border-color:transparent; color:var(--ok)}
.etq.d2{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.etq.d3{background:var(--acc-soft); border-color:transparent; color:var(--acc-ink)}
.qok{margin-left:auto; font-family:var(--mon); font-size:11px; color:var(--ok)}
.qtxt{font-size:17.5px; line-height:1.58; margin:0 0 15px; max-width:50ch}
.conf{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 13px}
.conf span{font-family:var(--mon); font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.conf button{background:var(--sunk); border:1px solid var(--line); border-radius:99px; padding:5px 13px; cursor:pointer; font-family:var(--dsp); font-weight:600; font-size:13px}
.conf button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
/* Espaço do aviso reservado desde o início (visibility, não display) —
   clicar sem declarar confiança não pode empurrar as alternativas pra baixo
   depois que a tela já renderizou; isso é o que causa toque errado. */
.avisoConf{visibility:hidden}
.avisoConf.mostrar{visibility:visible}
.alts{display:flex; flex-direction:column; gap:7px}
.alt{display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%; background:var(--sunk); border:1px solid var(--line); border-radius:9px; padding:10px 13px; cursor:pointer; font-family:var(--bod); font-size:16.5px; line-height:1.5}
.alt:hover:not(:disabled){border-color:var(--acc); background:var(--acc-soft)}
.alt:disabled{cursor:default}
.alt .l{flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line2); display:grid; place-items:center; font-family:var(--mon); font-size:11px; font-weight:600; margin-top:1px}
.alt.certa{border-color:var(--ok); background:var(--ok-soft)}
.alt.certa .l{background:var(--ok); border-color:var(--ok); color:var(--card)}
.alt.errada{border-color:var(--acc); background:var(--acc-soft)}
.alt.errada .l{background:var(--acc); border-color:var(--acc); color:var(--card)}
.gab{margin-top:14px; border-radius:9px; padding:13px 16px; font-size:16px; line-height:1.58; background:var(--ok-soft); border-left:3px solid var(--ok)}
.gab.no{background:var(--acc-soft); border-left-color:var(--acc)}
.gab b.t{display:block; font-family:var(--dsp); font-size:14.5px; margin-bottom:5px}
.gab .resp{font-family:var(--mon); font-size:12.5px; color:var(--mut); display:block; margin-bottom:6px}
.qfoot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.qfoot label{display:flex; align-items:center; gap:7px; font-family:var(--mon); font-size:11.5px; color:var(--mut); cursor:pointer}
.qfoot input{width:15px; height:15px; accent-color:var(--ok); cursor:pointer}
.mini{background:none; border:0; text-decoration:underline; color:var(--mut); font-family:var(--mon); font-size:11.5px; cursor:pointer; padding:0}

/* Ações da tabela de administração — uma linha só, botões pequenos, pra não
   forçar rolagem horizontal na tabela inteira (CLAUDE.md, seção 7.7). O
   campo de nova senha e o painel de exclusão vivem em sub-linhas à parte,
   abertas sob demanda (idRedefinindo/idConfirmando em app.js), nunca dentro
   desta célula. */
.acoesLinha{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.acaoMini{background:none; border:1px solid var(--line2); border-radius:6px; padding:4px 10px;
  font-family:var(--mon); font-size:12px; line-height:1.3; color:var(--ink); cursor:pointer;
  white-space:nowrap}
.acaoMini:hover{border-color:var(--acc); color:var(--acc-ink)}
.acaoMini.perigo{color:var(--acc-ink); border-color:var(--acc-soft)}
.acaoMini.perigo:hover{border-color:var(--acc)}
.acaoMini:disabled{opacity:.6; cursor:default}
/* Larguras fixas por coluna, só nesta tabela (.tabelaAdmin) — sem isso,
   table-layout:auto distribui o espaço de forma imprevisível quando o
   conteúdo não cabe (chegou a espremer a coluna de e-mail pra 55px, texto
   quase ilegível, numa tentativa anterior). Soma das larguras ≈935px, cabe
   dentro do .tw disponível (~950px) sem forçar rolagem horizontal. E-mail
   quebra em vez de alargar a coluna (endereço completo, sem espaço pra
   quebrar em palavra); Papel/Status não quebram — são pílulas .etq, uma
   linha só. Não mexe em nenhuma outra tabela do app (Produtos, histórico de
   simulado, nenhuma delas tem esta classe). */
.tabelaAdmin table{table-layout:fixed}
.tabelaAdmin td:nth-child(2){word-break:break-word}
.tabelaAdmin col.cNome{width:100px}
.tabelaAdmin col.cEmail{width:170px}
.tabelaAdmin col.cPapel{width:110px}
.tabelaAdmin col.cStatus{width:85px}
.tabelaAdmin col.cAcesso{width:100px}
.tabelaAdmin col.cCap{width:60px}
.tabelaAdmin col.cQuest{width:80px}
.tabelaAdmin col.cSim{width:60px}
.tabelaAdmin col.cAcoes{width:170px}

/* ---------- tela de estudo (Flashcards/Quiz de Produtos, Quiz de Vendas) ----------
   Cartão de papel + painel lateral. A partir de 1100px, duas colunas
   (cartão flexível, painel de 300px); abaixo disso, uma coluna, cartão
   primeiro e painel depois (a ordem no HTML já é essa). Sem foto, sem
   cartões inclinados atrás, sem setas: a fila não tem navegação livre. */
.estudo-duas{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; margin-top:22px}
@media (min-width:1100px){ .estudo-duas{grid-template-columns:minmax(0,1fr) 300px; gap:36px} }
.estudo-principal{min-width:0}
.estado-vazio{margin-top:22px}
.estudo-painel .ini-cartao{margin:0 0 16px}
.estudo-painel .ini-cartao p{margin:0 0 4px; max-width:none}
.estudo-painel .ini-nivel .rot{margin-bottom:0}
.painel-detalhe{font-family:var(--mon); font-size:12px; color:var(--mut); margin-top:8px !important}

.cartao-papel{background:var(--leitura-fundo); color:var(--leitura-tinta); border:1px solid var(--leitura-linha-forte);
  border-radius:var(--r); padding:28px; box-shadow:0 1px 3px rgba(26,28,25,.08), 0 6px 16px rgba(26,28,25,.06)}
/* Tema escuro: papel claro sobre fundo escuro já se separa sozinho — volta à
   borda fina original, sem sombra. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .cartao-papel{border-color:var(--leitura-linha); box-shadow:none}
}
:root[data-tema="escuro"] .cartao-papel{border-color:var(--leitura-linha); box-shadow:none}
.papel-topo{display:flex; align-items:center; justify-content:space-between; gap:16px}
.papel-pos{font-family:var(--mon); font-size:13px; color:var(--leitura-mut); font-variant-numeric:tabular-nums; white-space:nowrap}
.papel-barra{flex:0 1 160px; height:3px; background:var(--leitura-linha); border-radius:99px; overflow:hidden}
.papel-barra i{display:block; height:100%; background:var(--leitura-acento); border-radius:99px}
.papel-centro{text-align:center; padding:36px 0 12px}
/* .etq de sempre, com a cor apagada trocada pela do papel: --mut (#787D74)
   dá ~3,7:1 contra --leitura-fundo, abaixo de 4,5:1; --leitura-mut dá ~7,8:1. */
.cartao-papel .etq{color:var(--leitura-mut); border-color:var(--leitura-linha); font-size:12px}
.papel-frente{font-family:var(--bod); font-size:22px; line-height:1.45; max-width:34ch; margin:18px auto 0; color:var(--leitura-tinta)}
.papel-verso{border-top:1px solid var(--leitura-linha); margin-top:26px; padding-top:22px}
.papel-verso:focus{outline:none}
.papel-verso p{font-family:var(--bod); font-size:18px; line-height:1.55; max-width:40ch; margin:0 auto; color:var(--leitura-tinta)}
.papel-botoes{display:flex; gap:12px; margin-top:16px}
@media (max-width:760px){
  .cartao-papel{padding:20px}
  .papel-centro{padding:28px 0 8px}
  .papel-frente{font-size:19px}
  .papel-botoes .btn{flex:1 1 0}
}

/* ---------- simulado ---------- */
.alt.escolhida{border-color:var(--ink2); background:var(--card2)}
.alt.escolhida .l{background:var(--ink2); border-color:var(--ink2); color:var(--card)}
/* Cronômetro do simulado — achado registrado em CLAUDE.md: antes vivia
   fora de .qtop, sticky por conta própria, e flutuava por cima do início
   do enunciado e da tarja de dificuldade em vez de reservar espaço.
   Agora mora DENTRO de .qtop (mesma linha de "Questão N de M" e da
   dificuldade), e quem é sticky é a BARRA inteira (.sim-barra, abaixo) —
   o relógio em si volta a ser um elemento normal no fluxo, só com
   aparência de selo. Único uso (renderizarExameSimulado), por isso pode
   mudar aqui sem afetar mais nada. */
.relogio{display:inline-flex; align-items:center; margin-left:auto; font-family:var(--mon);
  font-size:18px; font-weight:600; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:6px 14px; font-variant-numeric:tabular-nums}
.relogio.urgente{color:var(--acc-ink); border-color:var(--acc-line); background:var(--acc-soft)}
.relogio .editar{margin-left:10px; background:none; border:0; text-decoration:underline; color:var(--mut); font-family:var(--mon); font-size:11px; font-weight:500; cursor:pointer; vertical-align:middle}

/* Barra do simulado (Questão N de M + dificuldade + cronômetro): sticky de
   verdade, o grupo INTEIRO — reserva a própria altura no fluxo normal do
   documento (diferente de position:fixed, que precisaria de um
   padding-top calculado à parte pra compensar), então o enunciado nunca
   fica escondido atrás dela em nenhuma posição de rolagem, inclusive no
   topo da página: não há nada pra "destravar", o espaço dela sempre
   existe. top:53px no celular pra ficar abaixo de .topo + .menu (as duas
   barras já sticky no alto, ~53px juntas); no desktop (.topo escondido,
   .menu vira barra lateral, não topo) não tem nada acima pra desviar. */
.sim-barra{position:sticky; top:53px; z-index:15; background:var(--card); border-bottom:1px solid var(--line);
  margin:0 0 16px; padding:10px 0}
@media (min-width:921px){ .sim-barra{top:0} }
.sim-barra .qtop{margin-bottom:0}

/* ---------- início: linha do tempo ----------
   Marcos semanais até a prova, recalculados a cada abertura da tela (nunca
   uma agenda fixa — ver Estado.prefs.dataProva e construirLinhaDoTempo em
   app.js). Estilo editorial: linha fina, marcadores pequenos, sem cartão,
   sem sombra, cor só no acento. Semana futura é o estado sem classe extra
   (marcador vazado, texto apagado); .atual e .prova é que ganham acento. */
.linhaTempo{position:relative; margin:18px 0 24px; padding-left:20px; border-left:1px solid var(--line); max-width:52ch}
.linhaTempo-item{position:relative; padding-bottom:20px}
.linhaTempo-item:last-child{padding-bottom:0}
.linhaTempo-marca{position:absolute; left:-25px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--paper); border:1.5px solid var(--line2)}
.linhaTempo-item.atual .linhaTempo-marca,
.linhaTempo-item.prova .linhaTempo-marca{background:var(--acc); border-color:var(--acc)}
.linhaTempo-item.prova .linhaTempo-marca{width:10px; height:10px; left:-26px}
.linhaTempo-data{font-family:var(--mon); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); margin-bottom:3px}
.linhaTempo-item.atual .linhaTempo-data,
.linhaTempo-item.prova .linhaTempo-data{color:var(--acc-ink); font-weight:600}
.linhaTempo-assuntos{font-size:15.5px; color:var(--ink2)}
.linhaTempo-item.atual .linhaTempo-assuntos{color:var(--ink); font-weight:600}
.linhaTempo-item.prova .linhaTempo-assuntos{color:var(--ink); font-weight:700; font-size:16px}

.folha{display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:6px; margin:16px 0}
.folha button{aspect-ratio:1; border-radius:8px; border:1px solid var(--line2); background:var(--sunk); font-family:var(--mon); font-size:12px; cursor:pointer; color:var(--ink2)}
.folha button.respondida{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.folha button.marcada{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.folha button.atual{outline:2px solid var(--acc); outline-offset:1px}

/* ---------- tabelas ---------- */
.tw{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:var(--r)}
table{width:100%; border-collapse:collapse; font-size:15px; background:var(--card)}
th,td{padding:9px 13px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--mon); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); font-weight:500; background:var(--sunk)}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--mon); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
th.n{text-align:right}
.pareto tr.critico td{background:var(--warn-soft)}
.pareto tr.corte td{border-bottom:2px dashed var(--line2)}
.tw tr.zerada td{background:var(--acc-soft)}
ul.pl,ol.pl{padding-left:20px; max-width:52ch}
ul.pl li,ol.pl li{margin-bottom:8px}
.kv{font-family:var(--mon); font-size:14px}
.lei{font-family:var(--mon); font-size:13.5px; color:var(--acc-ink); background:var(--acc-soft); padding:1px 6px; border-radius:4px; white-space:nowrap}

/* ---------- conteúdo das aulas de vendas ---------- */
.aula-corpo h3{font-size:19px; margin:30px 0 10px}

.block{margin:40px 0 20px; padding:4px 0 0; border-top:2px solid var(--line)}
.block-tag{display:inline-block; font-family:var(--mon); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:3px;
  margin:-2px 0 18px; font-weight:500; background:var(--sunk); color:var(--ink2)}
.block.teoria .block-tag{background:var(--acc-soft); color:var(--acc-ink)}
.block.pratica .block-tag{background:var(--ok-soft);  color:var(--ok)}
.block.resumo  .block-tag{background:var(--warn-soft);color:var(--warn)}
.block-tag small{opacity:.75; margin-left:8px; letter-spacing:.06em}

.tbl{overflow-x:auto; margin:0 0 18px}
.tbl table{border-collapse:collapse; width:100%; font-size:15px}
.tbl th,.tbl td{border:1px solid var(--line); padding:8px 10px; text-align:left;
  vertical-align:top}
.tbl th{background:var(--sunk); font-family:var(--dsp); font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink2)}
/* td.n já existe (seção tabelas), com text-align:right — não duplicado aqui. */

.ficha{background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--acc); padding:18px 22px; margin:20px 0 26px;
  border-radius:0 var(--r) var(--r) 0}
.ficha .t{font-family:var(--mon); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc-ink); margin:0 0 10px}
.ficha dl{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px;
  margin:0; font-size:15.5px}
.ficha dt{color:var(--ink2); font-weight:600}
.ficha dd{margin:0}

.dialog{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 22px; margin:18px 0 26px; font-size:16px}
.dialog .t{font-family:var(--mon); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); margin:0 0 12px}
.dialog p{margin:0 0 10px; max-width:none}
.dialog .who{font-weight:700; color:var(--acc-ink); font-family:var(--dsp)}
.dialog .note{font-size:14px; color:var(--mut); font-style:italic;
  border-top:1px dashed var(--line); padding-top:10px; margin-top:12px}

.callout{background:var(--acc-soft); border-radius:var(--r); padding:16px 20px;
  margin:18px 0 24px; font-size:16px}
.callout p:last-child{margin-bottom:0}
.callout .t{font-family:var(--mon); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc-ink); margin:0 0 8px}

.warn{background:var(--warn-soft); border-left:4px solid var(--warn);
  padding:14px 18px; margin:18px 0 24px; font-size:15.5px;
  border-radius:0 var(--r) var(--r) 0}
.warn p:last-child{margin-bottom:0}

.frases{list-style:none; padding:0; margin:0 0 20px}
.frases li{font-family:var(--dsp); font-weight:600; font-size:19px; line-height:1.35;
  color:var(--ink); padding:10px 0 10px 22px; border-left:3px solid var(--acc);
  margin-bottom:10px}

.math{font-family:var(--mon); font-size:14.5px; background:var(--sunk);
  padding:14px 18px; border-radius:var(--r); margin:12px 0 22px; line-height:1.7;
  overflow-x:auto; white-space:pre}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px; margin:16px 0 24px}
/* .card colide com o token de cor --card e é nome comum demais pra deixar solto —
   escopado em vez de renomeado, pra não precisar tocar no html das aulas. */
.aula-corpo .card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; font-size:15.5px}

.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 22px}
.steps li{counter-increment:s; position:relative; padding-left:44px; margin-bottom:12px}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:28px;
  height:28px; border-radius:50%; background:var(--acc); color:var(--btn-ink);
  font-family:var(--mon); font-size:13px; display:grid; place-items:center}

.tag{display:inline-block; font-family:var(--mon); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; background:var(--sunk); color:var(--ink2);
  padding:2px 7px; border-radius:3px; margin-right:6px}

/* Grade de conquistas: duas colunas no celular, quatro a partir de 921px
   (mesmo corte do resto da casca). Cartão pequeno — número em mono, nome,
   e embaixo a data (medalhasData, assets/app.js) ou "Ainda não". Conquistada
   em destaque (tinta cheia); as demais apagadas (opacidade, não cor — acento
   é só link/ativo/botão). */
.metodo{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0 26px}
@media (min-width:921px){ .metodo{grid-template-columns:repeat(4,1fr)} }
.metodo div{background:var(--sunk); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 14px}
.metodo .num{display:block; font-family:var(--mon); font-size:10px; color:var(--mut); margin-bottom:8px}
.metodo b{display:block; color:var(--ink); font-family:var(--dsp); font-weight:600; font-size:14px;
  line-height:1.25; margin-bottom:7px}
.metodo .status{display:block; font-family:var(--mon); font-size:10px; color:var(--mut);
  text-transform:uppercase; letter-spacing:.06em}
.metodo div.bloqueada{opacity:.45}

@media (max-width:620px){
  .ficha dl{grid-template-columns:1fr}
  .ficha dt{margin-top:6px}
}