/* Simulador TRT4 - Rei Corp. Celular primeiro (393 px), tokens da marca em variáveis. */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fontes/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fontes/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 500 800;
  src: url("fontes/bricolage-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 500 800;
  src: url("fontes/bricolage-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Aurora da versão 7 (07/11/2026): os NOMES de variável são os de sempre; mudam os valores e entram os tokens novos
     (--bg-deep, --au1..4, --vidro*, --btn-*, --display). Contraste medido no lote 1: texto 4,5:1 e borda de controle 3:1. */
  --marca: #8d54ff; --marca-escura: #6b2fe0; --marca-clara: #a685ff; --marca-bg: rgba(141, 84, 255, .14);
  /* Níveis das conquistas (07/11/2026): cor de texto e de medalha, 4,5:1 sobre o fundo claro. */
  --nivel-coroa: #8a5d00;
  --ouro-claro: #fff1b8; --ouro: #e6bd62; --ouro-escuro: #b98317; --aviso-ouro-a: #fff8e6; --aviso-ouro-b: #fbf9ff;
  --bg: #fbf9ff; --bg-muted: #f1edff; --bg-secondary: #ebe5ff; --bg-deep: #ece6ff;
  --gb1: #a98aff; --gb2: #7f9cff; --ga: .55; /* cores e força do fundo líquido da entrada */
  --au1: #b79bff; --au2: #93a4ff; --au3: #dcbcff; --au4: #8fb4ff; --aurora-forca: 45%; --aurora-mistura: normal;
  --fg: #1a1340; --fg-muted: #4d4577;
  --primaria: #33208a; --primaria-texto: #ffffff;
  --btn-a: #7c40f0; --btn-b: #6b2fe0; --btn-texto: #ffffff; --campo-bg: #ffffff;
  --borda: rgba(110, 70, 220, .20); --borda-forte: #6f64a6; /* 4,28:1 sobre o fundo; 3,14:1 no pico da aurora (WCAG 1.4.11 pede 3:1) */ --ring: #4a14c8;
  --vidro: rgba(255, 255, 255, .62); --vidro-forte: rgba(255, 255, 255, .80); --vidro-linha: rgba(110, 70, 220, .22);
  --vidro-hi: rgba(255, 255, 255, .9); --vidro-sombra: rgba(60, 30, 140, .28); --vidro-desfoque: blur(22px) saturate(1.35);
  --display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --topo-h: 76px;
  --sucesso: #00a34a; --sucesso-bg: #dcfce7; --sucesso-fg: #00692e;
  --aviso: #f99c00; --aviso-bg: #fef3c6; --aviso-fg: #9a4d00;
  --erro: #d10012; --erro-bg: #ffe2e2; --erro-fg: #a3000e;
  --info: #3080ff; --info-bg: #dbeafe; --info-fg: #1d4ed8;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px;
  --sombra-xs: 0 1px 2px rgba(40, 18, 110, .08);
  --sombra-sm: 0 1px 3px rgba(40, 18, 110, .12), 0 1px 2px rgba(40, 18, 110, .07);
  --sombra-md: 0 6px 14px -4px rgba(40, 18, 110, .16), 0 2px 4px rgba(40, 18, 110, .06);
  --sombra-lg: 0 18px 40px -12px rgba(40, 18, 110, .28), 0 4px 8px rgba(40, 18, 110, .06);
  --transicao: 200ms cubic-bezier(.4, 0, .2, 1);
  --leitura: 46rem; --largo: 72rem; --barra: 64px;
  /* Fundos sólidos com texto branco (os mesmos nos dois temas) e as cores que eram fixas no CSS (28/10/2026). */
  --sobre-solida: #fff; --marca-solida: #6b2fe0; --marca-solida-hover: #5a22c7; --primaria-hover: #261770;
  --sucesso-solida: #00692e; --erro-solida: #a3000e;
  --sucesso-borda: #9be3b4; --erro-borda: #ffb3b9; --info-borda: #bcd2ff;
  --topo-bg: rgba(255, 255, 255, .62); --barra-bg: rgba(255, 255, 255, .95); /* barras fixas da prova quase opacas: o texto que rola por baixo vazava (lote 4) */ --gaveta-fundo: rgba(26, 19, 64, .42);
  --folha-bg: #fffdf7; --folha-linha: #e8e1cf;
  --faixa-recorde: linear-gradient(120deg, #f3ecff 0%, #e6f0ff 55%, #fff4dc 100%);
  --faixa-aprovado: linear-gradient(120deg, #e9fbef 0%, #f3ecff 100%);
  --faixa-evoluiu: linear-gradient(120deg, #eef4ff 0%, #f7f2ff 100%);
  --brilho-base: #f6f0ff; --brilho-luz: #fff7e0;
  --grafico-grade: #e4ddf7; --grafico-corte: #6a6290;
  /* Lotes 5 a 7 da versão 7 (07/11/2026): âmbar do portal e da resposta, dourado da nota acima do corte, carta de baralho e dica. */
  --ambar: #f0a53a; --ambar-tinta: #8f5400; --ambar-suave: rgba(240, 165, 58, .20); --dourado-a: #e8b53f; --dourado-b: #8f5d00;
  --dica-bg: #1a1340; --dica-fg: #ffffff; --dica-linha: rgba(255, 255, 255, .12);
  --carta-a: #fbfaff; --carta-b: #e8e5fa; --carta-papel: #fdfcff; --carta-tinta: #171c44; --carta-mudo: #4b537b;
  --carta-moldura: rgba(107, 47, 224, .5); --carta-padrao: rgba(107, 47, 224, .13); --carta-borda: rgba(107, 47, 224, .30); --carta-brilho: rgba(141, 84, 255, .55);
  --foil-op: .13; --foil-hover: .30; --foil-blend: multiply; --raio: rgba(141, 84, 255, .62); --raio-nucleo: rgba(255, 255, 255, .95);
  --mola: cubic-bezier(.34, 1.56, .64, 1); --carta-assunto: #5224bd;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-deep); color: var(--fg);
  font: 400 16px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column;
}
img, svg { max-width: 100%; }
a { color: var(--marca-escura); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5rem; }
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: 1.1rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.mudo { color: var(--fg-muted); }
.pequeno { font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aurora da versão 7: um quadro PARADO atrás de tudo (gradientes, sem animação e sem requestAnimationFrame). Só na tela
   (a impressão não a leva); na tela de entrar o fundo líquido anima por cima dela. É um pseudo-elemento para o fundo efetivo dos
   textos continuar sendo a cor sólida do body (o ux_guard mede o contraste contra ela). */
@media screen {
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--bg-deep);
    background-blend-mode: var(--aurora-mistura);
    background-image:
      radial-gradient(ellipse 70% 42% at 18% 22%, color-mix(in srgb, var(--au1) var(--aurora-forca), transparent), transparent 72%),
      radial-gradient(ellipse 62% 38% at 78% 18%, color-mix(in srgb, var(--au2) var(--aurora-forca), transparent), transparent 72%),
      radial-gradient(ellipse 76% 36% at 50% 66%, color-mix(in srgb, var(--au3) var(--aurora-forca), transparent), transparent 72%),
      radial-gradient(ellipse 56% 36% at 8% 90%, color-mix(in srgb, var(--au4) var(--aurora-forca), transparent), transparent 72%),
      radial-gradient(ellipse 62% 36% at 92% 84%, color-mix(in srgb, var(--au1) var(--aurora-forca), transparent), transparent 72%);
  }
}
/* Vidro da versão 7: fundo translúcido, borda, brilho no topo e sombra. */
.vidro, .cartao, .kpi, .escolha {
  background: var(--vidro); /* sem desfoque: atras so ha a aurora parada (degrade liso), e o desfoque custava ~20% do tempo de cada clique na prova (medido no lote 3) */
  border-color: var(--vidro-linha); box-shadow: inset 0 1px 0 var(--vidro-hi), 0 24px 60px -28px var(--vidro-sombra);
}

/* Topo no padrão da 7: uma pílula de vidro com a marca à esquerda e as ações à direita. */
.topo { position: sticky; top: 0; z-index: 20; padding: 10px clamp(.75rem, 3vw, 2.5rem); }
/* Cabeçalho de ponta a ponta (07/11/2026, pedido do dono): a pílula acompanha a largura da tela, sem faixa vazia dos lados. */
.topo__linha {
  display: flex; align-items: center; gap: .6rem; margin: 0; padding: 6px 8px 6px 18px; min-height: calc(var(--topo-h) - 20px);
  border-radius: 999px; background: var(--topo-bg); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-linha); box-shadow: inset 0 1px 0 var(--vidro-hi), 0 24px 60px -28px var(--vidro-sombra);
}
.topo__marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--fg); font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.1; min-height: 44px; margin-right: .5rem; }
.topo__marca img { width: 30px; height: auto; flex: none; }
/* Coroa sobe 5px (08/11/2026): o ponto do meio fica acima do teto do E de EducaRei e os pontos laterais no teto dele (medido em e2e/coroa.spec.js). */
.topo__marca img { position: relative; top: -5px; }
.topo__marca small { display: block; font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: .72rem; color: var(--fg-muted); letter-spacing: .02em; }
.topo__marca > span { white-space: nowrap; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; justify-content: flex-end; }
/* Ações em pílulas: transparentes, com o fio de vidro; o fantasma (Painel, Sair) é só texto até o ponteiro chegar. */
.topo .botao { border-radius: 999px; background: transparent; border-color: var(--vidro-linha); color: var(--fg); }
.topo .botao--fantasma { border-color: transparent; padding: .6rem 1rem; color: var(--fg-muted); font-weight: 500; }
.topo .botao:hover { background: var(--marca-bg); color: var(--fg); }
.topo .botao-icone { padding: 0; }
/* O nome de quem entrou, numa pílula com a foto ou a inicial; é o botão que abre o menu da conta (Perfil, Sair). */
.topo__quem {
  cursor: pointer; font-family: inherit; background: transparent; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem 0 6px; border-radius: 999px;
  border: 1px solid var(--vidro-linha); font-weight: 600; font-size: .95rem; color: var(--fg); white-space: nowrap;
}
.topo__quem:hover { background: var(--marca-bg); }
.topo__quem[aria-expanded="true"] { background: var(--marca-bg); border-color: var(--marca-clara); }
.topo__seta { flex: none; color: var(--fg-muted); transition: transform .2s; }
.topo__quem[aria-expanded="true"] .topo__seta { transform: rotate(180deg); }
.topo__inicial--foto { background: var(--marca-bg); overflow: hidden; }
.topo__inicial img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topo__inicial {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); font: 700 15px/1 var(--display);
}

/* Conteúdo */
main { flex: 1; width: 100%; }
.pagina { max-width: var(--leitura); margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
.pagina--larga { max-width: var(--largo); }
/* Painel é um BI (07/11/2026): usa mais da tela larga. Prova e redação seguem estreitas, de propósito (leitura). */
.pagina--bi { max-width: 90rem; }
.cabeca { margin-bottom: 1.25rem; }
.cabeca p { color: var(--fg-muted); }
.trilha { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; color: var(--fg-muted); margin-bottom: .6rem; }
.trilha a { color: var(--fg-muted); }

.cartao { border: 1px solid var(--vidro-linha); border-radius: 18px; padding: 1.1rem; }
.cartao + .cartao { margin-top: 1rem; }
.grade { display: grid; gap: .85rem; }
@media (min-width: 640px) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } .grade--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 959px) { .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); } }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.05rem;
  border-radius: 14px; border: 1px solid var(--borda-forte); background: var(--vidro-forte); color: var(--fg);
  font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.botao:hover { background: var(--bg-secondary); }
.botao:active { transform: translateY(1px); }
/* Botão principal da 7: degradê violeta, brilho no topo e sombra colorida; o ponteiro só clareia. */
.botao--primario, .botao--marca {
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: var(--btn-texto); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -12px rgba(107, 47, 224, .8);
}
.botao--primario:hover, .botao--marca:hover { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); filter: brightness(1.08); }
.botao--fantasma { border-color: transparent; background: transparent; }
.botao--fantasma:hover { background: var(--marca-bg); }
.botao--largo { width: 100%; }
.botao[disabled], .botao[aria-busy="true"] { opacity: .6; cursor: progress; }
.botao-icone { min-width: 44px; min-height: 44px; padding: 0; border-radius: 999px; }

/* Escolhas grandes (pessoa, cargo, modo) */
.escolha {
  display: flex; gap: .9rem; align-items: center; width: 100%; text-align: left; text-decoration: none; color: var(--fg);
  border: 1px solid var(--vidro-linha); border-radius: 18px; padding: 1rem 1.05rem; min-height: 72px;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); cursor: pointer; font: inherit;
}
.escolha:hover { border-color: var(--marca-clara); box-shadow: var(--sombra-md); transform: translateY(-1px); }
.escolha__icone { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--marca-bg); color: var(--marca-escura); font-weight: 800; font-size: 1.15rem; }
.escolha__texto { flex: 1; min-width: 0; }
.escolha__titulo { display: block; font-weight: 700; font-size: 1.05rem; }
.escolha__detalhe { display: block; color: var(--fg-muted); font-size: .88rem; }
.escolha__seta { flex: none; color: var(--fg-muted); font-size: 1.3rem; }
.escolha--sua { border-color: var(--marca-clara); }
.etiqueta { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .12rem .55rem; font-size: .76rem; font-weight: 650; background: var(--bg-secondary); color: var(--fg-muted); border: 1px solid var(--borda); }
.etiqueta--marca { background: var(--marca-bg); color: var(--marca-escura); border-color: transparent; }
.etiqueta--sucesso { background: var(--sucesso-bg); color: var(--sucesso-fg); border-color: transparent; }
.etiqueta--erro { background: var(--erro-bg); color: var(--erro-fg); border-color: transparent; }
.etiqueta--aviso { background: var(--aviso-bg); color: var(--aviso-fg); border-color: transparent; }

/* Formulários */
label { font-weight: 600; font-size: .92rem; }
select, input[type="number"], input[type="range"], input[type="text"], input[type="password"], input[type="date"], textarea {
  font: inherit; color: var(--fg); background: var(--campo-bg); border: 1px solid var(--borda-forte); border-radius: 12px;
}
select, input[type="number"], input[type="text"], input[type="password"], input[type="date"] { min-height: 44px; padding: .5rem .7rem; width: 100%; }
.campo { display: grid; gap: .35rem; margin-bottom: .85rem; }
/* Tela de entrar (28/10/2026) */
.entrar { max-width: 28rem; }
/* Olho dentro do campo: aberto = mostrar, riscado = a senha está à mostra */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 3rem; }
.botao-olho { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; border-radius: var(--radius-sm); }
.botao-olho:hover { color: var(--fg); }
.botao-olho:focus-visible { outline: 3px solid var(--marca); outline-offset: -3px; }
.botao-olho .olho--fechado, .botao-olho[aria-pressed="true"] .olho--aberto { display: none; }
.botao-olho[aria-pressed="true"] .olho--fechado { display: block; }
.erro-em-linha { margin: 0 0 .85rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--erro-bg); color: var(--erro-fg); font-weight: 600; }
/* Menu da conta: no computador um painel ancorado no chip; no celular, gaveta de baixo. */
.menu-conta {
  position: fixed; z-index: 42; top: var(--menu-topo, 64px); right: var(--menu-direita, 12px); min-width: 14rem; padding: .4rem;
  display: grid; gap: .15rem; border-radius: 18px; background: var(--bg); border: 1px solid var(--borda); box-shadow: var(--sombra-lg);
  animation: menu-conta-entra .16s ease-out;
}
.menu-conta[hidden], .menu-conta__fundo[hidden] { display: none; }
.menu-conta__form { display: contents; }
.menu-conta__item {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: .5rem .8rem; border: 0; border-radius: 12px;
  background: transparent; color: var(--fg); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-conta__item svg { flex: none; color: var(--marca-escura); }
.menu-conta__item:hover, .menu-conta__item:focus-visible { background: var(--marca-bg); }
.menu-conta__item--sair { border-top: 1px solid var(--borda); border-radius: 0 0 12px 12px; margin-top: .15rem; }
.menu-conta__fundo { position: fixed; inset: 0; z-index: 41; background: var(--gaveta-fundo); }
@keyframes menu-conta-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media screen and (min-width: 768px) { .menu-conta__fundo { display: none; } }
@media screen and (max-width: 767px) {
  .menu-conta {
    top: auto; left: 0; right: 0; bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-width: 1px 0 0;
    padding: .6rem .75rem calc(.75rem + env(safe-area-inset-bottom)); animation: menu-conta-sobe .2s ease-out;
  }
  .menu-conta__item { min-height: 52px; font-size: 1.05rem; }
}
@keyframes menu-conta-sobe { from { transform: translateY(100%); } to { transform: none; } }
.linha-de-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Prova */
.prova-topo { position: sticky; top: var(--topo-h); z-index: 15; background: var(--vidro-forte); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); padding: .6rem 0 .5rem; }
.progresso { height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--marca); width: 0; transition: width var(--transicao); }
.prova-topo__info { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .88rem; color: var(--fg-muted); margin-top: .35rem; }
.questao { display: none; }
.questao.ativa { display: block; }
.questao__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.texto-base { background: var(--bg-muted); border: 1px solid var(--borda); border-radius: var(--radius); padding: .4rem 1rem .85rem; margin-bottom: .9rem; font-size: .98rem; }
.texto-base__corpo { white-space: pre-line; }
.texto-base summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.enunciado { font-size: 1.04rem; white-space: pre-line; margin-bottom: 1rem; }
.alternativas { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.alternativa {
  display: flex; gap: .75rem; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--borda-forte); border-radius: var(--radius); padding: .75rem .85rem; min-height: 52px;
  transition: border-color var(--transicao), background var(--transicao);
}
.alternativa:hover { border-color: var(--marca-clara); }
.alternativa__letra { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-weight: 750; border: 1.5px solid var(--borda-forte); font-size: .9rem; }
.alternativa__texto { padding-top: .15rem; white-space: pre-line; }
.alternativa[aria-pressed="true"] { border-color: var(--marca-escura); background: var(--marca-bg); }
.alternativa[aria-pressed="true"] .alternativa__letra { background: var(--marca-solida); color: var(--sobre-solida); border-color: var(--marca-solida); }
.confianca { margin-top: 1rem; }
.confianca__opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .35rem; }
.confianca__opcoes button { min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--borda-forte); background: var(--bg); font-family: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--fg); }
.confianca__opcoes button[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.barra-inferior {
  position: sticky; bottom: 0; z-index: 15; background: var(--barra-bg); backdrop-filter: blur(6px); border-top: 1px solid var(--borda);
  padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
}
.barra-inferior__linha { max-width: var(--leitura); margin: 0 auto; display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .5rem; }
.barra-inferior__linha .botao { white-space: nowrap; }
.barra-inferior__linha .botao:disabled { opacity: .45; cursor: not-allowed; }
/* Celular: com Pular na barra, "Anterior" vira só a seta (o nome fica no aria-label). */
@media (max-width: 479px) { .so-largo { display: none; } .barra-inferior__linha { gap: .35rem; } }
.barra-inferior__linha .botao:last-child { justify-self: end; }

/* Gaveta (mapa de questões, ajuda) */
.gaveta-fundo { position: fixed; inset: 0; background: var(--gaveta-fundo); z-index: 40; opacity: 0; pointer-events: none; transition: opacity var(--transicao); }
.gaveta-fundo.aberta { opacity: 1; pointer-events: auto; }
.gaveta {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow: auto; background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--sombra-lg); padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(105%); visibility: hidden; overscroll-behavior: contain;
  transition: transform var(--transicao), visibility 0s linear 200ms;
}
.gaveta.aberta { transform: none; visibility: visible; transition: transform var(--transicao), visibility 0s; }
@media (min-width: 768px) { .gaveta { left: auto; top: 0; width: 420px; max-height: none; border-radius: 0; transform: translateX(105%); } }
.gaveta__cabeca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; }
.mapa button {
  min-height: 46px; border-radius: var(--radius-sm); border: 1.5px solid var(--borda-forte); background: var(--bg); font-family: inherit; font-weight: 650; font-size: .9rem;
  cursor: pointer; color: var(--fg); position: relative;
}
.mapa button.respondida { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.mapa button.duvida::after { content: "?"; position: absolute; top: 1px; right: 4px; font-size: .7rem; color: var(--aviso-fg); font-weight: 800; }
.mapa button.atual { outline: 3px solid var(--marca); outline-offset: 1px; }
.legenda { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .82rem; color: var(--fg-muted); margin: .6rem 0 1rem; }

/* Resultado */
.placar { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .placar { grid-template-columns: 1.3fr 1fr 1fr; } }
.kpi { border: 1px solid var(--vidro-linha); border-radius: 18px; padding: 1rem; }
.kpi__rotulo { font-size: .82rem; color: var(--fg-muted); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.kpi__valor { font-family: var(--display); font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: .2rem 0; }
.kpi__valor--grande { font-size: 3rem; }
.barra-materia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.barra-materia:last-child { border-bottom: 0; }
.barra-materia__trilho { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--bg-secondary); overflow: hidden; }
.barra-materia__trilho span { display: block; height: 100%; background: var(--primaria); border-radius: 999px; }
.lista-erros { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-erros a { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: var(--fg); border: 1px solid var(--borda); border-radius: var(--radius); padding: .65rem .8rem; min-height: 52px; background: var(--bg); }
.lista-erros a:hover { border-color: var(--marca-clara); }
.lista-erros__n { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--erro-bg); color: var(--erro-fg); font-weight: 750; }
.lista-erros__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .92rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { padding: .55rem .5rem; border-bottom: 1px solid var(--borda); text-align: left; }
.tabela th { font-size: .8rem; color: var(--fg-muted); font-weight: 650; background: var(--bg-muted); }
.tabela td.num, .tabela th.num { text-align: right; }
.rolagem-x { overflow-x: auto; }

/* Explicação */
.alternativa--certa { border-color: var(--sucesso); background: var(--sucesso-bg); cursor: default; }
.alternativa--certa .alternativa__letra { background: var(--sucesso-solida); color: var(--sobre-solida); border-color: var(--sucesso-solida); }
.alternativa--marcada-errada { border-color: var(--erro); background: var(--erro-bg); cursor: default; }
.alternativa--marcada-errada .alternativa__letra { background: var(--erro-solida); color: var(--sobre-solida); border-color: var(--erro-solida); }
.alternativa--neutra { cursor: default; }
.alternativa--neutra:hover { border-color: var(--borda-forte); }
.bloco-explica { border-left: 4px solid var(--borda-forte); padding: .2rem 0 .2rem .9rem; margin: 1rem 0; }
.bloco-explica--certa { border-color: var(--sucesso); }
.bloco-explica--errada { border-color: var(--erro); }
.bloco-explica--materia { border-color: var(--marca); }
.bloco-explica h3 { margin-bottom: .25rem; }

/* Redação */
.folha {
  width: 100%; min-height: calc(30 * 1.9rem + 1.4rem); resize: vertical; padding: .7rem .9rem; font: 400 1rem/1.9rem "Inter", system-ui, sans-serif;
  background-color: var(--folha-bg); background-image: linear-gradient(to bottom, transparent calc(1.9rem - 1px), var(--folha-linha) calc(1.9rem - 1px));
  background-size: 100% 1.9rem; background-position: 0 .7rem; background-attachment: local; border: 1px solid var(--borda-forte); border-radius: var(--radius);
}
.contadores { position: sticky; top: var(--topo-h); z-index: 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; background: var(--vidro-forte); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); padding: .5rem 0; }
@media (min-width: 640px) { .contadores { grid-template-columns: repeat(6, 1fr); } }
.contador { background: var(--bg); border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: .4rem .55rem; }
.contador b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.contador span { font-size: .74rem; color: var(--fg-muted); font-weight: 600; }
.contador--alerta { border-color: var(--aviso); background: var(--aviso-bg); }
.contador--ok { border-color: var(--sucesso); background: var(--sucesso-bg); }
.niveis { display: grid; gap: .4rem; }
.nivel { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: .55rem .7rem; cursor: pointer; min-height: 44px; }
.nivel input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--marca-escura); }
.nivel:has(input:checked) { border-color: var(--marca-escura); background: var(--marca-bg); }
.criterio + .criterio { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borda); }
.apoio { background: var(--bg-muted); border-left: 4px solid var(--marca-clara); padding: .6rem .85rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: .5rem 0; white-space: pre-line; }

/* Avisos (canto, somem sozinhos) */
.avisos { position: fixed; z-index: 60; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: .5rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
body.tem-barra .avisos { bottom: calc(var(--barra) + 1rem + env(safe-area-inset-bottom)); }
.aviso {
  pointer-events: auto; display: flex; gap: .6rem; align-items: flex-start; background: var(--primaria); color: var(--primaria-texto);
  border-radius: var(--radius); padding: .7rem .5rem .7rem .9rem; box-shadow: var(--sombra-lg); animation: entra 220ms ease-out both;
}
.aviso--erro { background: var(--erro-fg); }
.aviso.saindo { animation: sai 200ms ease-in both; }
.aviso p { margin: 0; flex: 1; font-size: .92rem; }
.aviso button { flex: none; min-width: 44px; min-height: 44px; margin: -.5rem 0; background: transparent; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; border-radius: 8px; }
@keyframes entra { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sai { to { transform: translateX(110%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aviso, .aviso.saindo { animation: none; } * { transition: none !important; } }

/* Ajuda */
.ajuda-conteudo h2 { margin-top: 1rem; }
.ajuda-conteudo ol, .ajuda-conteudo ul { padding-left: 1.2rem; }

.rodape { border-top: 1px solid var(--vidro-linha); background: var(--vidro); }
.rodape__linha { max-width: var(--largo); margin: 0 auto; padding: .9rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; font-size: .82rem; color: var(--fg-muted); }
.vazio { text-align: center; padding: 1.5rem 1rem; color: var(--fg-muted); }
.grafico { position: relative; height: 240px; }
@media (min-width: 768px) { .grafico { height: 300px; } }

/* Conquistas (07/11/2026) ------------------------------------------------------------------------------------------ */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kpi__de { font-size: 1rem; font-weight: 600; color: var(--fg-muted); letter-spacing: 0; }
.niveis { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem .7rem; margin: .45rem 0 0; padding: 0; }
.niveis__item { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.niveis__item--zero .selo { opacity: .5; filter: grayscale(.6); }
.niveis__item--zero .selo__foil, .niveis__item--zero .selo__reflexo { display: none; }
/* Selos foil v2 (08/11/2026). Família de coroas: cada nível tem a SUA silhueta (ver _conquista.html) e as gemas contam o
   nível, então não dependem só da cor. O brilho é uma camada de arco-íris em overlay, recortada na silhueta, que segue o
   ponteiro (selos.js); de tempos em tempos um reflexo atravessa o selo (a classe .selo--passa, posta pelo selos.js, toca a
   animação UMA vez: nada gira sem parar, nada pisca). Quanto mais alto o nível, mais brilho e halo (--b e --halo, postos no
   próprio selo). Bloqueado não brilha. Com "reduzir movimento" fica tudo parado, com um reflexo fixo e discreto. */
.selo { --s: 44px; --glow: var(--b-cor); position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s);
  transform: perspective(260px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out;
  filter: drop-shadow(0 0 calc(var(--halo, 0) * 1px) var(--glow)) drop-shadow(0 1px calc(var(--halo, 0) * .25px) rgba(0, 0, 0, .25)); }
.selo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.selo__gema { fill: var(--gema); stroke: var(--ink); stroke-width: 1.1; }
.selo__foil, .selo__reflexo { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: var(--mascara); mask-image: var(--mascara); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.selo__foil { mix-blend-mode: overlay; opacity: calc(var(--b) * .6 + .1);
  background: radial-gradient(circle at var(--mx, 35%) var(--my, 25%), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 55%),
    conic-gradient(from var(--giro, 0deg) at var(--mx, 35%) var(--my, 25%), #ff6fd0, #ffe066, #6fe8ff, #6fa8ff, #b48cff, #ff6fd0); }
.selo__reflexo { opacity: min(1, calc(.6 * var(--b) + .3)); background-size: 320% 100%; background-position: 160% 0;
  background-image: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .95) 50%, transparent 64%); }
.selo--passa .selo__reflexo { animation: selo-passa 2.4s ease-in-out 1; }
@keyframes selo-passa { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.selo__brilhos i { position: absolute; width: 10px; height: 10px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, 0) 20%), linear-gradient(#fff, #fff) center/1.5px 100% no-repeat, linear-gradient(#fff, #fff) center/100% 1.5px no-repeat; }
.selo__brilhos i:nth-child(1) { left: -2px; top: 8%; } .selo__brilhos i:nth-child(2) { right: -3px; top: 38%; } .selo__brilhos i:nth-child(3) { left: 30%; top: -4px; }
.selo--passa .selo__brilhos i { animation: selo-faisca 1.8s ease-in-out 1; }
.selo--passa .selo__brilhos i:nth-child(2) { animation-delay: .5s; } .selo--passa .selo__brilhos i:nth-child(3) { animation-delay: 1s; }
@keyframes selo-faisca { 0%, 100% { opacity: 0; transform: scale(.4); } 45% { opacity: .95; transform: scale(1); } }
.selo--bronze { --a: #ffd7a8; --b-cor: #e8893a; --c: #8f3f0f; --rim: #7a3608; --ink: #2e1204; --gema: #ff4d2e; --glow: rgba(255, 140, 50, .8); }
.selo--prata { --a: #ffffff; --b-cor: #cfd8e8; --c: #6c7a94; --rim: #4d586e; --ink: #151b2a; --gema: #2b8cff; --glow: rgba(150, 190, 255, .85); }
.selo--ouro { --a: #fff7b0; --b-cor: #ffc619; --c: #b06c00; --rim: #7d4a00; --ink: #2a1a00; --gema: #e0143c; --glow: rgba(255, 190, 20, .9); }
.selo--platina { --a: #eefaff; --b-cor: #86cdf0; --c: #3a7fae; --rim: #24597f; --ink: #06202f; --gema: #12d6b0; --glow: rgba(90, 200, 255, .95); }
.selo--coroa { --a: #fff5a6; --b-cor: #ffd21a; --c: #c47500; --rim: #6e4000; --ink: #2a1600; --glow: rgba(255, 196, 40, 1); }
:root[data-theme="dark"] .selo--bronze { --rim: #f0a864; } :root[data-theme="dark"] .selo--prata { --rim: #d4dcea; }
:root[data-theme="dark"] .selo--ouro { --rim: #ffd34a; } :root[data-theme="dark"] .selo--platina { --rim: #9adcf6; }
:root[data-theme="dark"] .selo--coroa { --rim: #ffd34a; }
@media (prefers-reduced-motion: reduce) {
  .selo { transition: none; }
  .selo__reflexo { background-position: 40% 0; opacity: .3; }
  .selo__brilhos { display: none; }
}
.conquistas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.conquista { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 18px; border: 1px solid var(--vidro-linha); background: var(--vidro); }
.conquista__texto { min-width: 0; flex: 1; }
.conquista__nome { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.conquista__como { margin: .15rem 0 0; color: var(--fg-muted); font-size: .92rem; overflow-wrap: anywhere; }
.conquista__rodape { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; margin: .55rem 0 0; }
.conquista:not(.conquista--ganha) .selo { opacity: .5; filter: grayscale(.6); }
.conquista:not(.conquista--ganha) .selo__foil, .conquista:not(.conquista--ganha) .selo__reflexo, .conquista:not(.conquista--ganha) .selo__brilhos { display: none; }
.conquista--secreta .conquista__nome { font-style: italic; }
.conquista--ganha.conquista--coroa { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(230, 189, 98, .18); }
.etiqueta--nivel { background: var(--c-bg); color: var(--c-fg); border-color: var(--c-rim); }
.etiqueta--bronze { --c-bg: #f6e3d0; --c-fg: #5c2f0a; --c-rim: #8a4b14; } .etiqueta--prata { --c-bg: #e8ebf1; --c-fg: #2f3645; --c-rim: #5f6877; }
.etiqueta--ouro { --c-bg: #fbefc4; --c-fg: #5a4000; --c-rim: #8a6500; } .etiqueta--platina { --c-bg: #dcf0f7; --c-fg: #163a4b; --c-rim: #3f6f86; }
.etiqueta--coroa { --c-bg: #fbe7a8; --c-fg: #4a2a00; --c-rim: #7a4a00; }
:root[data-theme="dark"] .etiqueta--bronze { --c-bg: #3a2614; --c-fg: #f5d9b8; --c-rim: #e0a066; } :root[data-theme="dark"] .etiqueta--prata { --c-bg: #2c313d; --c-fg: #e6eaf2; --c-rim: #c3cad6; }
:root[data-theme="dark"] .etiqueta--ouro { --c-bg: #3d3010; --c-fg: #fbe49a; --c-rim: #f0c040; } :root[data-theme="dark"] .etiqueta--platina { --c-bg: #173341; --c-fg: #cdeefa; --c-rim: #8ccbe6; }
:root[data-theme="dark"] .etiqueta--coroa { --c-bg: #43300a; --c-fg: #ffe9a8; --c-rim: #f0c040; }
.conquista__barra { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.conquista__barra .progresso { flex: 1; }
.conquista__conta { font-weight: 750; font-size: .9rem; min-width: 3.5rem; text-align: right; }
/* Barra de energia: gomos, como medidor de jogo (pedido do dono). */
.progresso--energia { height: 12px; border-radius: 6px; background: var(--bg-secondary); border: 1px solid var(--borda-forte); }
.progresso--energia > span { background: linear-gradient(90deg, var(--marca), var(--marca-escura));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); }
.form-perfil { display: grid; gap: .8rem; max-width: 34rem; }
.form-perfil input[type=date] { max-width: 16rem; }
.som-conquistas { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; max-width: 34rem; }
.som-conquistas p { margin: 0; }
/* Perfil em grade (08/11/2026): a página é de configuração, então usa a largura em vez de uma coluna estreita com rolagem
   longa (SENIOR_DESIGNER_BRAIN_V2 SECTION 33). Celular: uma coluna, na mesma ordem lógica. */
.perfil-grade { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.perfil-grade > .cartao { max-width: none; margin: 0; align-content: start; }
.perfil-id__colunas { display: grid; gap: .8rem 2rem; grid-template-columns: minmax(0, 1fr); }
.perfil-id__campos { display: grid; gap: .5rem; align-content: start; }
.perfil-id .opcoes { margin-bottom: 0; }
.perfil-id .botao, .perfil-niver .botao { justify-self: start; align-self: start; min-width: 12rem; }
@media (min-width: 700px) {
  .perfil-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "id id" "foto niver" "som som"; }
  .perfil-id { grid-area: id; } .perfil-foto { grid-area: foto; } .perfil-niver { grid-area: niver; } .perfil-som { grid-area: som; }
  .perfil-id__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .perfil-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "id niver" "id som" "foto foto"; align-items: stretch; }
  .pagina--perfil .cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.2rem; margin-bottom: .6rem; }
  .pagina--perfil .cabeca > * { margin-top: 0; margin-bottom: 0; }
  .perfil-foto .avatar-edicao { flex-wrap: nowrap; align-items: center; }
  .perfil-foto .form-avatar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.2rem; align-items: end; }
  .perfil-foto .form-avatar > :not(.campo):not(button) { grid-column: 1 / -1; }
  .perfil-foto .form-avatar .botao { align-self: end; margin-bottom: .2rem; }
}
.botao-trofeu { color: var(--fg); }
/* O Rexi (08/11/2026, v2): mora numa telinha clara nos dois temas; o desenho tem contorno escuro. O palco do desenho
   tem 48x40 "pixels do Rexi", e a telinha escala em número inteiro (3x, 2x no celular, 5x e 4x na guia). */
.pet-palco { flex: none; display: grid; justify-items: center; gap: .4rem; width: 144px; }
.telinha { display: block; width: 144px; height: 120px; border-radius: 18px; overflow: hidden; line-height: 0;
  background: radial-gradient(circle at 50% 35%, #fffdf2, #f4ecc8);
  box-shadow: inset 0 0 0 3px #4a3b00, 0 6px 18px -10px rgba(74, 59, 0, .55); }
.telinha--grande { width: 240px; height: 200px; border-radius: 24px; }
.pet, .pet__canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pet__canvas[hidden] { display: none; }
.pet-forma { margin: 0; display: grid; text-align: center; font-size: .92rem; line-height: 1.25; }
.pet-forma__caminho { color: var(--fg); opacity: .8; font-size: .84rem; }
.pet-pausa { font-size: .84rem; min-height: 44px; padding: .4rem .7rem; }
.pet-palco:has(.telinha--grande) { width: 240px; }
.pet-explicativo { margin-top: 1.5rem; max-width: 60rem; }
.pet-explicativo h4 { margin: 1.1rem 0 .2rem; font-size: 1rem; }
.arvore { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 1rem; }
.arvore__ramo { padding: .7rem .85rem; border: 1px solid var(--borda); border-radius: 14px; }
.arvore__ramo--seu { border-width: 2px; }
.arvore__ramo h5 { margin: 0 0 .5rem; font-size: .98rem; }
.arvore__formas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.arvore__forma { display: grid; gap: .25rem; justify-items: start; align-content: start; }
.arvore__desenho { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 12px; background: #f4ecc8; }
.arvore__interrogacao { font: 700 14px sans-serif; fill: #ffffff; }
.arvore__forma:not(.arvore__forma--viva) .arvore__desenho { background: #d9d6e6; }
.pet-cartao { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.pet-cartao__texto { min-width: 0; flex: 1; }
.pet-cartao__nome { margin: 0 0 .45rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: 1.05rem; }
.balao { position: relative; margin: 0 0 .5rem; padding: .65rem .85rem; border-radius: 14px; background: var(--bg-secondary);
  border: 1px solid var(--borda); font-weight: 550; overflow-wrap: anywhere; }
.pet-ficha { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.pet-ficha__texto { flex: 1; min-width: min(100%, 18rem); }
.pet-ficha h3 { margin: 1rem 0 .2rem; font-size: 1.02rem; }
.atributos { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .45rem; max-width: 30rem; }
.atributos li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem; gap: .6rem; align-items: center; }
.atributos__nome { font-weight: 650; }
.atributos__n { text-align: right; font-weight: 700; }
.form-pet { display: grid; gap: .6rem; max-width: 24rem; }
@media (max-width: 479px) {
  .pet-cartao { align-items: flex-start; }
  .pet-palco { width: 96px; }
  .telinha:not(.telinha--grande) { width: 96px; height: 80px; border-radius: 14px; }
  .telinha--grande { width: 192px; height: 160px; }
  .pet-palco:has(.telinha--grande) { width: 192px; }
  .pet-pausa { white-space: normal; }
}

/* Ranking (08/11/2026, opção A: só exercícios feitos) */
.ranking-eu { margin-bottom: 1rem; }
.ranking-grade h3 { margin: 0 0 .6rem; font-size: 1.02rem; }
.ranking-grade > .cartao + .cartao { margin-top: 0; } /* lado a lado na grade, não empilhados */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ranking__linha { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .7rem; border-radius: 12px; border: 1px solid var(--borda); }
.ranking__linha--eu { border-color: var(--marca); background: var(--marca-bg); }
.ranking__pos { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.ranking__nome { font-weight: 650; overflow-wrap: anywhere; }
.ranking__n { color: var(--fg-muted); font-size: .92rem; white-space: nowrap; }
/* O aviso dourado: canto superior direito, entra com a fanfarra e sai quando ela acaba. */
/* Logo abaixo do topo (80px), no canto direito: não cobre o Sair nem o Painel enquanto a fanfarra toca. */
.avisos-conquista { position: fixed; top: calc(5rem + env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); z-index: 80; display: grid; gap: .5rem; pointer-events: none; }
.aviso-conquista { display: flex; align-items: center; gap: .75rem; max-width: min(22rem, calc(100vw - 1.5rem)); min-height: 44px; padding: .7rem 1rem .7rem .8rem; border-radius: 16px;
  background: linear-gradient(135deg, var(--aviso-ouro-a), var(--aviso-ouro-b)); border: 1px solid rgba(230, 189, 98, .75); color: var(--fg); text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(60, 30, 140, .45), 0 0 0 4px rgba(230, 189, 98, .14);
  transform: translateX(120%); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.aviso-conquista.ver { transform: none; opacity: 1; }
.aviso-conquista > svg { width: 34px; height: 30px; flex: none; color: var(--ouro-escuro); filter: drop-shadow(0 0 6px rgba(230, 189, 98, .55)); }
:root[data-theme="dark"] .aviso-conquista > svg { color: var(--ouro); }
.aviso-conquista .selo { --s: 36px; }
.aviso-conquista small { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nivel-coroa); font-weight: 750; }
.aviso-conquista strong { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.aviso-conquista--coroa { border-width: 2px; box-shadow: 0 14px 34px -12px rgba(150, 100, 0, .55), 0 0 0 5px rgba(230, 189, 98, .28); }
@media (prefers-reduced-motion: reduce) { .aviso-conquista { transition: opacity .2s; transform: none; } }
@media print { .avisos-conquista, .botao-trofeu { display: none !important; } }

/* Impressão: o papel é peça de design */
@media print {
  /* Lote 1 da versao 7 (07/11/2026): o papel sai com as cores de ANTES (regra 5 do plano: a impressao nao muda). */
  /* :not(#_) sobe a especificidade acima das regras do tema escuro: o papel e sempre o claro de antes. */
  :root:not(#_), :root:not(#_)[data-theme] {
    --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --marca: #8d54ff;
    --marca-escura: #6b2fe0;
    --marca-clara: #a685ff;
    --marca-bg: rgba(141, 84, 255, .10);
    --bg: #ffffff;
    --bg-muted: #fafafa;
    --bg-secondary: #f5f5f5;
    --fg: #0a0a0a;
    --fg-muted: #5c5c5c;
    --primaria: #171717;
    --primaria-texto: #fafafa;
    --borda: #e5e5e5;
    --borda-forte: #858585;
    --ring: #8d54ff;
    --sucesso: #00a34a;
    --sucesso-bg: #dcfce7;
    --sucesso-fg: #00692e;
    --aviso: #f99c00;
    --aviso-bg: #fef3c6;
    --aviso-fg: #9a4d00;
    --erro: #d10012;
    --erro-bg: #ffe2e2;
    --erro-fg: #a3000e;
    --info: #3080ff;
    --info-bg: #dbeafe;
    --info-fg: #1d4ed8;
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 14px;
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
    --sombra-md: 0 4px 6px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .04);
    --sombra-lg: 0 12px 28px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .04);
    --transicao: 200ms cubic-bezier(.4, 0, .2, 1);
    --leitura: 46rem;
    --largo: 72rem;
    --barra: 64px;
    --sobre-solida: #fff;
    --marca-solida: #6b2fe0;
    --marca-solida-hover: #5a22c7;
    --primaria-hover: #2b2b2b;
    --sucesso-solida: #00692e;
    --erro-solida: #a3000e;
    --sucesso-borda: #9be3b4;
    --erro-borda: #ffb3b9;
    --info-borda: #bcd2ff;
    --topo-bg: rgba(255, 255, 255, .94);
    --barra-bg: rgba(255, 255, 255, .96);
    --gaveta-fundo: rgba(10, 10, 10, .38);
    --folha-bg: #fffdf7;
    --folha-linha: #e8e1cf;
    --faixa-recorde: linear-gradient(120deg, #f3ecff 0%, #e6f0ff 55%, #fff4dc 100%);
    --faixa-aprovado: linear-gradient(120deg, #e9fbef 0%, #f3ecff 100%);
    --faixa-evoluiu: linear-gradient(120deg, #eef4ff 0%, #f7f2ff 100%);
    --brilho-base: #f6f0ff;
    --brilho-luz: #fff7e0;
    --grafico-grade: #eeeeee;
    --grafico-corte: #737373;
  }
  /* Titulos como eram antes da versao 7, so no papel. */
  h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
  h1 { font-size: 1.6rem; font-weight: 750; }
  h2 { font-size: 1.2rem; font-weight: 700; }
  h3 { font-size: 1.02rem; font-weight: 650; }
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  .topo, .rodape, .barra-inferior, .avisos, .nao-imprime, .gaveta, .gaveta-fundo, .menu-conta, .menu-conta__fundo { display: none !important; }
  .pagina { max-width: none; padding: 0; }
  .cartao { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .questao-impressa { break-inside: avoid; border-bottom: 1px solid #ccc; padding: 8pt 0; }
  a { color: inherit; text-decoration: none; }
}

/* Celular estreito: o topo cabe numa linha só */
@media (max-width: 479px) {
  .topo__marca small { display: none; }
  .topo__acoes { gap: .1rem; }
  .topo__acoes .botao--fantasma { padding: .6rem .55rem; }
}
/* Blocos que abrem e fecham dizem que abrem */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; margin-left: auto; padding-left: .75rem; font-size: 1.3rem; font-weight: 500; color: var(--fg-muted); }
details[open] > summary::after { content: "−"; }

/* Lista paginada de erros */
.filtro-erros { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.filtro-erros button { min-height: 44px; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--bg); font-family: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--fg); }
.filtro-erros button[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.lista-erros li[hidden] { display: none; }

.navegacao-erros { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.navegacao-erros__voltar { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 640px) { .navegacao-erros { grid-template-columns: 1fr auto 1fr; } .navegacao-erros__voltar { grid-column: 2; grid-row: 1; } }
.navegacao-erros > :last-child { justify-self: end; }

/* Resultado: faixa de comemoração e contagem */
.faixa-resultado { border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: 1rem; border: 1px solid var(--borda); background: var(--bg); }
.faixa-resultado h2 { margin: 0 0 .25rem; }
.faixa-resultado p { margin: 0; }
.faixa-resultado--recorde { background: var(--faixa-recorde); border-color: var(--marca-clara); }
.faixa-resultado--aprovado { background: var(--faixa-aprovado); border-color: var(--sucesso-borda); }
.faixa-resultado--evoluiu { background: var(--faixa-evoluiu); border-color: var(--info-borda); }
.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
.contagem__item { background: var(--bg); border: 1px solid var(--borda); border-radius: var(--radius); padding: .6rem .5rem; text-align: center; }
.contagem__item b { display: block; font-size: 1.45rem; font-weight: 800; }
.contagem__item span { font-size: .78rem; color: var(--fg-muted); font-weight: 600; }
.contagem__item--certas { border-color: var(--sucesso-borda); background: var(--sucesso-bg); }
.contagem__item--certas b { color: var(--sucesso-fg); }
.contagem__item--erradas { border-color: var(--erro-borda); background: var(--erro-bg); }
.contagem__item--erradas b { color: var(--erro-fg); }
.lista-erros__n--revisar { background: var(--aviso-bg); color: var(--aviso-fg); }

.continuar { margin-bottom: 1.1rem; display: grid; gap: .5rem; }
.continuar h2 { margin-bottom: .2rem; }

.faltam { color: var(--marca-escura); font-weight: 700; }
.relogio--alerta { color: var(--aviso-fg); font-weight: 700; }
.relogio--esgotado { color: var(--erro-fg); font-weight: 700; }

/* Treino: correção na hora */
.correcao-treino { margin-top: 1rem; }
.correcao-treino__veredito { font-weight: 800; font-size: 1.1rem; margin: 0 0 .25rem; }
.correcao-treino__veredito--certo { color: var(--sucesso-fg); }
.correcao-treino__veredito--errado { color: var(--erro-fg); }
.alternativa:disabled { cursor: default; opacity: 1; color: var(--fg); }

/* hidden sempre esconde, mesmo em componente com display próprio */
[hidden] { display: none !important; }

/* "Se fosse um concurso de verdade" (28/10/2026): o brilho passa 3 vezes ao abrir e para (o ux_guard reprova laço
   infinito fora de espera real); parado se pedirem menos movimento */
.concurso-real { border-radius: var(--radius-lg); padding: .9rem 1.1rem; margin: 0 0 1rem; border: 1px solid var(--marca-clara); background: var(--bg); }
.concurso-real h2, .concurso-real h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.concurso-real ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.concurso-real li { margin: .2rem 0; }
.concurso-real__nomeado { font-weight: 700; color: var(--sucesso-fg); }
.concurso-real--brilho { background: linear-gradient(110deg, var(--brilho-base) 0%, var(--brilho-base) 40%, var(--brilho-luz) 50%, var(--brilho-base) 60%, var(--brilho-base) 100%); background-size: 250% 100%; animation: brilho-concurso 2.5s ease-in-out 3; }
@keyframes brilho-concurso { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .concurso-real--brilho { animation: none; } }

/* Copiloto (28/10/2026): bússola como selo, passos numerados e a lista das matérias mais fracas */
.escolha--copiloto { border-color: var(--marca-clara); }
.icone-copiloto { display: block; }
.cabeca--copiloto { display: flex; gap: .9rem; align-items: flex-start; }
.cabeca--copiloto h1 { margin-top: 0; }
.copiloto-selo { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--marca-bg); color: var(--marca-escura); }
.passos { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.passos__item { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--fg-muted); padding: .35rem .7rem .35rem .35rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--bg); }
.passos__n { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-weight: 750; font-size: .8rem; background: var(--bg-secondary); color: var(--fg); }
.passos__item--atual { color: var(--fg); border-color: var(--marca-clara); }
.passos__item--atual .passos__n { background: var(--marca-solida); color: var(--sobre-solida); }
.passos__item--feito .passos__n { background: var(--sucesso-solida); color: var(--sobre-solida); }
.lista-fraquezas { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.lista-fraquezas li { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.lista-fraquezas li:last-child { border-bottom: 0; }

/* Cronograma (28/10/2026): uma linha por semana, a atual em destaque */
.rotina ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.cronograma { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.semana { background: var(--bg); border: 1px solid var(--borda); border-radius: var(--radius-lg); padding: .85rem 1rem; }
.semana--atual { border-color: var(--marca-clara); box-shadow: var(--sombra-sm); }
.semana--reta { background: var(--bg-secondary); }
.semana__cabeca { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.semana__datas { font-size: .85rem; color: var(--fg-muted); font-weight: 650; }
.semana h3 { margin: .25rem 0 .35rem; font-size: 1rem; }
.semana p { margin: 0; }
.semana__assuntos { list-style: none; padding: 0; margin: 0; }
.semana__assuntos li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--borda); }
.semana__assuntos form { flex: none; }

/* Chave de tema: pílula com o sol e a lua; o lado aceso (círculo cheio por trás) é o tema em uso. */
.botao-tema { padding: 0 4px; }
.chave-tema { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--bg-muted); }
.chave-tema__lado { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: var(--fg-muted); }
:root:not([data-theme="dark"]) .chave-tema__lado--claro,
:root[data-theme="dark"] .chave-tema__lado--escuro { background: var(--marca-escura); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .chave-tema__lado--escuro { color: #120d2e; }
@media (prefers-reduced-motion: no-preference) { .chave-tema__lado { transition: background-color .2s, color .2s; } }

/* Tema escuro (28/10/2026), só na tela: o que se imprime continua claro. Fundo quase preto e cartão um passo mais claro,
   texto quase branco (cérebro de UX, "Dark mode"); contraste medido: texto 6,3:1 ou mais, borda de controle 3,7:1. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --marca-escura: #c3a9ff; --marca-clara: #8d6fd6; --marca-bg: rgba(185, 154, 255, .16);
    --aviso-ouro-a: #33264a; --aviso-ouro-b: #1a1338;
    --nivel-coroa: #f1c96b;
    --bg: #1a1338; --bg-muted: #0e0924; --bg-secondary: #261d52; --bg-deep: #080618;
    --gb1: #8d54ff; --gb2: #4a5cf0; --ga: .46;
    --au1: #6b2fe0; --au2: #3a38d2; --au3: #8d54ff; --au4: #2a4fd0; --aurora-forca: 40%; --aurora-mistura: screen;
    --fg: #f3efff; --fg-muted: #bdb6e0;
    --primaria: #c3a9ff; --primaria-texto: #120a2e; --primaria-hover: #e0d2ff;
    --campo-bg: #110c2a;
    --borda: rgba(185, 154, 255, .22); --borda-forte: #8a80bf; --ring: #e0d2ff;
    --vidro: rgba(24, 18, 52, .56); --vidro-forte: rgba(30, 22, 66, .78); --vidro-linha: rgba(185, 154, 255, .24);
    --vidro-hi: rgba(255, 255, 255, .12); --vidro-sombra: rgba(0, 0, 0, .55);
    --sucesso-bg: #11301f; --sucesso-fg: #6fe3a1;
    --aviso-bg: #352708; --aviso-fg: #f7c062;
    --erro-bg: #3b1519; --erro-fg: #ff8f98;
    --info-bg: #14243f; --info-fg: #93b8ff;
    --sucesso-borda: #2c6b47; --erro-borda: #7a2c33; --info-borda: #2f4b7a;
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, .4); --sombra-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --sombra-md: 0 6px 14px -4px rgba(0, 0, 0, .5); --sombra-lg: 0 18px 40px -12px rgba(0, 0, 0, .65);
    --topo-bg: rgba(24, 18, 52, .56); --barra-bg: rgba(26, 19, 56, .95); --gaveta-fundo: rgba(4, 2, 14, .66);
    --folha-bg: #1f1d18; --folha-linha: #3a352a;
    --faixa-recorde: linear-gradient(120deg, #241a3d 0%, #172440 55%, #33270f 100%);
    --faixa-aprovado: linear-gradient(120deg, #12301f 0%, #241a3d 100%);
    --faixa-evoluiu: linear-gradient(120deg, #15233d 0%, #221a36 100%);
    --brilho-base: #221a36; --brilho-luz: #3a2f12;
    --grafico-grade: #2d2459; --grafico-corte: #bdb6e0;
    --ambar: #f4b24a; --ambar-tinta: #f6c36f; --ambar-suave: rgba(244, 178, 74, .18); --dourado-a: #fff3c9; --dourado-b: #e6bd62;
    --dica-bg: #2c2070; --dica-fg: #f6f2ff; --dica-linha: rgba(205, 184, 255, .35);
    --carta-a: #1f2a66; --carta-b: #101741; --carta-papel: #141c4a; --carta-tinta: #eef0ff; --carta-mudo: #aeb6e0;
    --carta-moldura: rgba(244, 178, 74, .55); --carta-padrao: rgba(166, 133, 255, .16); --carta-borda: rgba(185, 154, 255, .45); --carta-brilho: rgba(141, 84, 255, .7);
    --foil-op: .10; --foil-hover: .26; --foil-blend: color-dodge; --raio: rgba(214, 196, 255, .8); --raio-nucleo: rgba(255, 255, 255, 1); --carta-assunto: #f0d28a;
  }
}

/* ===== Topo claro ou escuro conforme o tema (lote 1 da versão 7, 07/11/2026); a escolha do dono de 28/10 de um topo sempre escuro saiu. ===== */
/* No celular estreito o nome não cabe ao lado das quatro ações: fica só a coroa, que continua levando ao início. */
@media screen and (max-width: 430px) {
  /* Escondido só na tela: o leitor de tela continua lendo o nome, e o alvo de toque fica com 44px. */
  .topo__marca { min-width: 44px; justify-content: center; margin-right: 0; }
  .topo__marca img { top: 0; } /* sem o nome ao lado, a coroa volta ao centro do botão */
  .topo__marca > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo__linha { padding-left: 6px; padding-right: 6px; }
  /* O nome também só fica para o leitor de tela; a inicial continua à vista. */
  .topo__quem { padding: 0 6px; }
  .topo__seta { display: none; }
  .topo__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* 07/11/2026: o troféu das conquistas entrou no topo; os botões de texto cedem o respiro lateral (altura segue 44px). */
  .topo__acoes .botao--fantasma { padding-left: .4rem; padding-right: .4rem; }
  .conquistas-kpis .conquistas-niveis { grid-column: 1 / -1; }
}

/* Tela de entrar da versão 7 (lote 2, 07/11/2026): fundo líquido (metaballs) só aqui, o nome com a coroa de um lado e o
   formulário de vidro do outro; no celular os dois empilham. O quadro parado da aurora fica por baixo do canvas. */
body.tela-entrar { background: var(--bg); overflow-x: hidden; }
.entrar-fundo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.entrar-a {
  position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 76rem; margin: 0 auto; padding: 4.5rem clamp(1.25rem, 5vw, 2.5rem) 2rem;
}
.entrar-a__marca { --nome-fs: clamp(2.6rem, 8.4vw, 7rem); --coroa-w: clamp(56px, 8vw, 96px); display: flex; align-items: flex-start; gap: clamp(.9rem, 2vw, 1.4rem); min-width: 0; }
.entrar-a__coroa { flex: none; width: var(--coroa-w); height: auto; aspect-ratio: 208 / 172;
  /* Mesma regra do topo (08/11/2026): os pontos laterais no teto do E (0,139 do corpo da letra abaixo do topo da linha; 32/172 da altura da coroa abaixo do topo dela), o do meio acima. */
  margin-top: calc(var(--nome-fs) * .139 - var(--coroa-w) * 172 / 208 * .186); filter: drop-shadow(0 0 28px rgba(141, 84, 255, .55)); pointer-events: none; }
.entrar-a__nome {
  font-family: var(--display); font-weight: 800; font-size: var(--nome-fs); line-height: .95; letter-spacing: -.04em;
  color: var(--fg); min-width: 0; overflow-wrap: anywhere;
}
.entrar-a__titulo { display: grid; gap: .55rem; min-width: 0; }
.entrar-a__frase { font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 500; color: var(--fg); opacity: .82; letter-spacing: -.01em; }
.entrar-a__lado { display: flex; flex-direction: column; min-width: 0; }
.entrar-a__topo { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 5; }
.entrar-a__form { width: 100%; max-width: 420px; margin-left: auto; padding: 2rem; border-radius: 30px; border: 1px solid var(--vidro-linha); display: grid; gap: 1.1rem; }
.entrar-a__form h1 { margin: 0 0 .3rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.02em; }
.entrar-a__form .campo { margin-bottom: 0; }
.entrar-a__form input { min-height: 48px; }
.botao-olho { height: 48px; }
.entrar-a__botao { min-height: 48px; margin-top: .3rem; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); border-color: transparent; color: var(--btn-texto); font-weight: 700; }
.entrar-a__botao:hover { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); filter: brightness(1.08); }
@media (max-width: 820px) {
  .entrar-a { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.75rem; padding-top: 5rem; }
  .entrar-a__form { margin: 0 auto; max-width: 28rem; padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .entrar-fundo { transition: none; } }

/* Área depois de entrar (versão 7, lote 3): saudação grande na fonte de display, dias para a prova num quadro de vidro e os
   cargos em blocos de vidro. A faixa escura sólida saiu: o fundo é a aurora parada. */
.ola__linha { max-width: var(--largo); margin: 0 auto; padding: 1.4rem 1rem .4rem; display: grid; gap: 1rem; align-items: end; }
.ola h1 { margin: 0; font-size: clamp(2rem, 5.4vw, 3.7rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.ola p { margin: .7rem 0 0; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--fg-muted); max-width: 44ch; }
.dias-prova { justify-self: start; display: grid; gap: .35rem; padding: 1rem 1.3rem 1.05rem; border: 1px solid var(--vidro-linha); border-radius: 26px 26px 26px 8px; cursor: help; }
.dias-prova b { display: block; font-family: var(--display); font-size: clamp(3.6rem, 9vw, 6rem); line-height: .9; letter-spacing: -.04em; font-weight: 800; font-variant-numeric: tabular-nums; }
.dias-prova span { color: var(--fg-muted); font-size: .95rem; }
@media (min-width: 820px) {
  .ola__linha { grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; padding-top: 2.2rem; }
  .dias-prova { justify-self: end; }
}
.area-cargos { margin-top: .4rem; position: relative; }
.area-cargos .escolha--continuar { margin-bottom: 1.6rem; box-shadow: var(--sombra-lg); }
.area-cargos .cabeca h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.area-cargos .cabeca { margin-top: .6rem; }

/* Blocos de escolha no padrão da 7 (cargos e modos): canto de cima redondo, ícone, título em display e linha de apoio. */
.cargos .escolha, .modos .escolha { border-radius: 24px 24px 24px 10px; padding: 1.1rem 1.2rem; min-height: 88px; }
.cargos .escolha__titulo, .modos .escolha__titulo { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.01em; }
.cargos .escolha__icone, .modos .escolha__icone { width: 52px; height: 52px; border-radius: 16px; }
.modos { display: grid; gap: .85rem; margin-bottom: .85rem; }
.modos:not(:has(> *)) { display: none; }
.modos > form:not(.cartao) { display: flex; }
.modos > form:not(.cartao) > .escolha { flex: 1; }
.modos > details { align-self: start; }
.modos--principais { align-items: start; }
.modos > .cartao, .modos > .cartao + .cartao { margin-top: 0; border-radius: 24px 24px 24px 10px; }
.modo-destaque { padding: 1.3rem 1.3rem 1.4rem; border-radius: 30px 30px 30px 10px; }
.modo-destaque h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -.02em; }
.modo-destaque__cabeca { display: flex; align-items: center; gap: .9rem; }
.modo-destaque .campo { max-width: 30rem; }
.modo-destaque > p { max-width: 64ch; }
.modo-resumo { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .9rem; }
.modo-resumo h2 { font-size: 1.15rem; }
@media (min-width: 820px) {
  .modos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modos--atalhos > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .modos--destaques > :only-child { grid-column: 1 / -1; }
  .modos--principais > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Inclinação 3D leve ao passar o mouse (inclinar.js muda --rx e --ry). Só ponteiro fino, nada no toque, nada com
   "reduzir movimento". A mola do retorno é a da 7; sem o recurso novo do navegador, cai numa curva parecida. */
.escolha[data-inclina] { --mola: cubic-bezier(.34, 1.4, .64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  .escolha[data-inclina] { --mola: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077 22.2%, 1.121 25.2%, 1.136 27.5%, 1.131 29.7%, 1.108 32.3%, 1.066 36%, 1.013 40.7%, .987 44.1%, .978 47.3%, .981 51.1%, .998 58.4%, 1.005 63%, 1.001 71%, 1); }
}
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .escolha[data-inclina] {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .7s var(--mola), border-color var(--transicao), box-shadow var(--transicao);
  }
  .escolha[data-inclina]:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px) scale(1.012); }
  .escolha[data-inclina].inclinando { transition: transform 90ms linear, border-color var(--transicao), box-shadow var(--transicao); }
  .escolha[data-inclina]:active { transform: perspective(800px) scale(.985); transition-duration: .1s; }
}

/* Mentor (28/10/2026): diagnóstico em uma linha, depois o pulo do gato, o que guardar e o conselho. */
.mentor { margin: .2rem 0 1rem; padding: .9rem 1rem; border-radius: var(--radius); border-left: 4px solid var(--marca); background: var(--marca-bg); display: grid; gap: .35rem; }
.mentor p { margin: 0; }
.mentor__titulo { font-weight: 800; font-size: 1.02rem; color: var(--marca-escura); }
.mentor__pulo, .mentor__guardar, .mentor__macete { padding: .45rem .65rem; border-radius: var(--radius-sm); background: var(--bg); }
.mentor__macete { border-left: 3px solid var(--marca-escura); font-style: italic; }
.mentor__conselho { color: var(--fg-muted); font-size: .92rem; }
.mentor--duvidoso { border-left-color: var(--aviso); background: var(--aviso-bg); }
.mentor--duvidoso .mentor__titulo { color: var(--aviso-fg); }
.etiqueta--mentor { background: var(--marca-bg); color: var(--marca-escura); border-color: transparent; font-weight: 600; }
.bloco-explica--simples { border-left-color: var(--marca); }
.mentor-rodada { margin-bottom: 1rem; border-left: 4px solid var(--marca); }
.mentor-rodada h2 { margin-bottom: .5rem; }
.mentor-rodada__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.mentor-rodada__lista li { display: grid; gap: .1rem; }
.mentor-rodada__lista span { color: var(--fg-muted); font-size: .92rem; }

/* Treinador (01/11/2026): cartão de abertura e de resultado, e a etiqueta de armadilha na correção */
.treinador { margin-bottom: 1rem; border-left: 4px solid var(--marca); display: grid; gap: .6rem; }
.treinador p { margin: 0; }
.treinador > .botao { justify-self: start; } /* 08/11/2026: o convite esticava 1.208 px com a frase em 205 */
.treinador__frase { font-size: 1.02rem; line-height: 1.45; }
.treinador h2, .treinador h3 { margin: 0; }
.regras { display: grid; gap: .5rem; margin-top: .6rem; }
.regras .botao { justify-content: flex-start; text-align: left; }
.regras .botao[aria-current="true"] { border-color: var(--marca); }
.lista-medicao { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.treinador__armadilha { color: var(--fg-muted); font-size: .94rem; }
.armadilha { margin: .5rem 0 0; }

/* Painel (28/10/2026): assuntos de menor acerto firme */
.lista-assuntos { list-style: none; margin: .4rem 0 0; padding: 0; }
.lista-assuntos li { padding: .45rem 0; border-top: 1px solid var(--borda); }

/* Painel (06/11/2026): seu jeito de estudar e a evolução da redação */
.lista-jeito { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lista-jeito li { padding: .6rem 0; border-top: 1px solid var(--borda); display: grid; gap: .2rem; overflow-wrap: anywhere; }
.lista-jeito li:first-child { border-top: 0; }
.lista-redacao { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lista-redacao li { padding-top: .6rem; border-top: 1px solid var(--borda); display: grid; gap: .3rem; }
.lista-redacao li:first-child { border-top: 0; padding-top: 0; }
.lista-redacao__data { font-weight: 600; }
.nota-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: center; font-size: .94rem; }
.nota-barra__trilho { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 999px; background: var(--bg-secondary); }
.nota-barra__trilho span { display: block; height: 100%; max-width: 100%; background: var(--primaria); border-radius: 999px; }
.nota-barra__trilho::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 60%; border-left: 2px dashed var(--fg-muted); }

/* Guias do painel (07/11/2026): faixa que rola de lado no celular; sem JavaScript tudo aparece em sequência. */
.guias { display: flex; gap: .4rem; overflow-x: auto; margin: 0 0 1rem; padding: 0 0 .35rem; border-bottom: 1px solid var(--borda); scrollbar-width: thin; }
.guias[hidden] { display: none; }
.guias__aba { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.guias__aba:hover { border-color: var(--marca-clara); }
.guias__aba[aria-selected="true"] { background: var(--marca-solida); border-color: var(--marca-solida); color: var(--sobre-solida); }
.guias__aba:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.guias__conta { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--marca-bg); color: var(--marca-escura); font-size: .8rem; font-weight: 800; text-align: center; line-height: 1.4rem; }
.guias__aba[aria-selected="true"] .guias__conta { background: var(--bg); }
.guia[hidden] { display: none; }
.guia:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.guia > .cartao, .guia > .continuar { margin-bottom: 1rem; }
.grade--kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .grade--kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grade--kpis .kpi__valor { font-size: 2.4rem; }

/* ===== Lote 4 da versão 7 (07/11/2026): tela da questão. Só na tela; o papel (imprimir.html) segue com o desenho de antes. =====
   O risco da escolha fica NA LETRA: o círculo guarda a letra e, ao marcar, um traço de caneta se desenha por cima dela e ela some
   (a 7: `.bub .hatch`). Sem desfoque nas alternativas nem nos cartões (custava ~20% de cada clique, lote 3); o vidro desfocado
   fica só nas barras fixas. */
.alternativa__letra .risco, .bolinha .risco { display: none; }
@media screen {
  /* Barras fixas coladas na pílula do topo: antes ficavam 10px abaixo dela (o padding do .topo), e o texto rolava naquela faixa. */
  .prova-topo, .contadores { top: calc(var(--topo-h) - 10px); }
  .prova-topo { background: var(--barra-bg); border-radius: 18px; padding: .75rem 1rem .6rem; border: 1px solid var(--vidro-linha); box-shadow: 0 18px 40px -28px var(--vidro-sombra); }
  .progresso { height: 5px; background: var(--marca-bg); }
  .progresso > span { background: linear-gradient(90deg, var(--marca-escura), var(--marca)); }
  .prova-topo__info { color: var(--fg-muted); font-variant-numeric: tabular-nums; }

  /* Cartão da questão: o arranjo da 7 (canto de baixo à esquerda mais fechado). Vidro sem desfoque, como todo cartão. */
  #prova .questao.cartao { border-radius: 30px 30px 30px 10px; padding: clamp(1.1rem, 3.2vw, 1.9rem); margin-top: 1rem; }
  #prova .questao__meta { gap: .5rem; margin-bottom: 1rem; }
  #prova .questao__meta .etiqueta { background: var(--vidro-forte); border-color: var(--vidro-linha); color: var(--fg-muted); padding: .2rem .7rem; }
  #prova .questao__meta .etiqueta--marca { background: var(--marca-bg); color: var(--marca-escura); border-color: transparent; }
  .enunciado { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem); line-height: 1.55; max-width: 68ch; margin-bottom: 1.4rem; }

  /* Alternativas: blocos de vidro, a letra num círculo. */
  .alternativas { gap: .65rem; }
  .alternativa {
    align-items: center; gap: .9rem; min-height: 56px; padding: .7rem 1rem; border-radius: 16px; position: relative;
    background: var(--vidro-forte); border: 1.5px solid var(--borda-forte);
  }
  .alternativa:hover { border-color: var(--marca-escura); }
  .alternativa__texto { padding-top: 0; }
  .alternativa__letra {
    position: relative; width: 34px; height: 34px; background: var(--vidro-forte); color: var(--fg); border: 1.5px solid var(--borda-forte);
    font-family: var(--display); font-weight: 700; font-size: .8rem;
  }
  .alternativa__rotulo { transition: opacity .2s; }
  .alternativa__letra .risco, .bolinha .risco { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .risco path {
    fill: none; stroke: var(--marca-escura); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.5, 0, .3, 1);
  }
  .alternativa[aria-pressed="true"], .alternativa--sua { border-color: var(--marca-escura); background: var(--marca-bg); }
  .alternativa[aria-pressed="true"] .alternativa__letra, .alternativa--sua .alternativa__letra {
    background: var(--vidro-forte); color: var(--fg); border-color: var(--borda-forte);
  }
  .alternativa[aria-pressed="true"] .risco path, .alternativa--sua .risco path, .alternativa--marcada-errada .risco path { stroke-dashoffset: 0; }
  .alternativa[aria-pressed="true"] .alternativa__rotulo, .alternativa--sua .alternativa__rotulo, .alternativa--marcada-errada .alternativa__rotulo { opacity: 0; }

  /* Correção: a certa em verde; a marcada que errou em vermelho, com o texto riscado e o traço vermelho na letra. */
  .alternativa--certa { border-color: var(--sucesso); background: var(--sucesso-bg); }
  .alternativa--certa .alternativa__letra { background: var(--vidro-forte); color: var(--sucesso-fg); border-color: var(--sucesso); }
  .alternativa--certa .risco path { stroke: var(--sucesso-solida); }
  .alternativa--marcada-errada { border-color: var(--erro); background: var(--erro-bg); }
  .alternativa--marcada-errada .alternativa__letra { background: var(--vidro-forte); color: var(--erro-fg); border-color: var(--erro); }
  .alternativa--marcada-errada .risco path { stroke: var(--erro-solida); }
  .alternativa--marcada-errada .alternativa__texto { text-decoration: line-through; text-decoration-color: var(--erro); text-decoration-thickness: 2px; }
  .alternativa--marcada-errada .alternativa__texto .visualmente-oculto { text-decoration: none; }
  :root[data-theme="dark"] .alternativa--certa .risco path { stroke: var(--sucesso-fg); }
  :root[data-theme="dark"] .alternativa--marcada-errada .risco path { stroke: var(--erro-fg); }

  /* Certeza, dúvida, chute: um segmento de vidro, a bolinha com o mesmo traço. */
  .confianca { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.3rem; }
  .confianca > span { font-weight: 600; color: var(--fg); }
  .confianca__opcoes { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 0; padding: 4px; border-radius: 14px; background: var(--vidro-forte); border: 1px solid var(--vidro-linha); }
  .confianca__opcoes button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 1rem 0 .75rem; border: 1px solid transparent; border-radius: 11px;
    background: transparent; color: var(--fg-muted); font-weight: 500; min-width: 44px;
  }
  .confianca__opcoes button[aria-pressed="true"] { background: var(--marca-bg); color: var(--fg); border-color: var(--marca-escura); font-weight: 650; }
  .bolinha { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--borda-forte); }
  .confianca__opcoes button[aria-pressed="true"] .risco path { stroke-dashoffset: 0; }

  /* Barra de baixo: vidro desfocado (uma das três barras fixas) e botões em pílula. */
  .barra-inferior { background: var(--barra-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--vidro-linha); box-shadow: 0 -18px 40px -28px var(--vidro-sombra); }
  .barra-inferior__linha .botao { border-radius: 999px; }

  /* Explicações da correção: faixa de vidro com a cor do veredito na borda. */
  .bloco-explica { background: var(--vidro); border-radius: 0 14px 14px 0; padding: .6rem .9rem; }
  .correcao-treino__veredito { font-family: var(--display); }
}
@media screen and (prefers-reduced-motion: reduce) {
  .risco path, .alternativa__rotulo { transition: none; }
}

/* ===== Lotes 5 e 6 da versão 7 (07/11/2026): o fim da prova, a trilha do painel, as dicas e as guias em pílula. Só na tela. ===== */
@media screen {
  /* Dica (dicas.js): um balão para a página inteira. */
  #dica {
    position: fixed; z-index: 90; left: 0; top: 0; max-width: min(300px, calc(100vw - 16px)); padding: 10px 14px; border-radius: 12px;
    background: var(--dica-bg); color: var(--dica-fg); border: 1px solid var(--dica-linha); font-size: .875rem; line-height: 1.4; font-weight: 500;
    pointer-events: none; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); animation: dica-entra .16s ease-out both;
  }
  @keyframes dica-entra { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  [data-tip] { cursor: help; }
  a[data-tip], button[data-tip] { cursor: pointer; }
  [data-tip]:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 12px; }

  /* Trilha (fim e painel): a linha do tempo e o portal. */
  .tscroll { overflow-x: auto; padding: 0 8px 10px; scrollbar-width: thin; }
  .fim-trilha, .trilha-ate-prova { padding: 14px 8px 8px; border-radius: 26px; }
  .fim-trilha { margin-bottom: 1rem; }
  .trilha-ate-prova { padding-top: 18px; }
  .trilha-ate-prova__topo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 0 16px; }
  .trilha-ate-prova__topo h2 { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
  .trilha-ate-prova__topo p { margin: 0; }
  .trilha-ate-prova__topo p b { color: var(--fg); }
  .fim-trilha svg, .trilha-ate-prova svg { display: block; width: 100%; min-width: 1000px; height: auto; overflow: visible; }
  .fim-trilha text, .trilha-ate-prova text { font-family: "Inter", system-ui, sans-serif; fill: var(--fg-muted); font-size: 12px; }
  .fim-trilha .rotulo-da-trilha, .trilha-ate-prova .rotulo-da-trilha { fill: var(--fg); font-weight: 600; }
  .ponto-da-trilha { outline: none; cursor: help; }
  .ponto-da-trilha:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* Fim da prova: tudo o que revelaria a nota espera escondido; a transição solta (fim.js). A segurança é o prazo de 6 s: sem o
     script, a página não fica escondida para sempre. */
  .nova-oculta { visibility: hidden; animation: nova-seguranca 0s 6s forwards; }
  @keyframes nova-seguranca { to { visibility: visible; } }
  .nova-entra { animation: nova-entra .6s ease both; }
  @keyframes nova-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .fim-entregue {
    position: fixed; inset: 0; z-index: 70; pointer-events: none; display: grid; align-content: center; color: #fff;
    padding: 0 max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(160deg, #6b2fe0, #2f2370);
  }
  .fim-entregue__texto { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 6vw, 56px); line-height: 1.05; letter-spacing: -.02em; opacity: 0; }
  .fim-entregue__luz { display: block; height: 3px; margin-top: 18px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: scaleX(0); box-shadow: 0 0 22px 4px rgba(255, 255, 255, .7); }
  .placar .kpi[data-testid="nota-final"] { padding: 1.3rem 1.5rem; border-radius: 30px 30px 10px 30px; }
  .placar .kpi__valor--grande { font-size: clamp(4.2rem, 15vw, 7rem); font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--marca-escura); }
  .placar .kpi__valor--grande.nota--acima { color: var(--ambar-tinta); }
  .placar .kpi { border-radius: 26px; }
  .placar { margin-bottom: 1rem; }
  @media (min-width: 640px) { .placar { grid-template-columns: 1.5fr 1fr; } .placar .kpi:first-child { grid-row: span 2; } }
  .barra-materia__trilho { height: 10px; background: var(--marca-bg); }
  .barra-materia__trilho span { background: linear-gradient(90deg, var(--marca), var(--marca-clara)); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
  [data-revelar]:not(.nova-revelada) .barra-materia__trilho span { transform: scaleX(0); }
  /* Durante o mistério do fim, a contagem de acertos do cabeçalho espera a nota (ela já entrega o veredito). */
  [data-revelar]:not(.nova-revelada) .cabeca__acertos { visibility: hidden; }
  .contagem__item, .lista-erros a { background: var(--vidro-forte); }
  .contagem__item { border-color: var(--vidro-linha); border-radius: 18px; }
  .contagem__item b { font-family: var(--display); }
  .faixa-resultado { background: var(--vidro); border-color: var(--vidro-linha); border-radius: 26px 26px 26px 10px; }
  .faixa-resultado h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
  .filtro-erros button { background: var(--vidro-forte); }
  .filtro-erros button[aria-pressed="true"] { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: var(--btn-texto); border-color: transparent; }
  .tabela th { background: var(--marca-bg); }

  /* Painel: a faixa de KPIs de uma peça só (limpeza da Folha, na pele da Aurora). */
  .grade--kpis { gap: 0; border: 1px solid var(--vidro-linha); border-radius: 26px; background: var(--vidro); box-shadow: inset 0 1px 0 var(--vidro-hi), 0 24px 60px -28px var(--vidro-sombra); overflow: hidden; }
  .grade--kpis .kpi { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 1.1rem 1.5rem; }
  .grade--kpis .kpi + .kpi { border-left: 1px solid var(--vidro-linha); }
  .grade--kpis .kpi__valor { font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
  .grade--kpis .kpi__rotulo { margin-top: .4rem; order: 2; display: block; font-weight: 500; font-size: .88rem; }
  .grade--kpis .kpi { display: flex; flex-direction: column; }
  @media (max-width: 959px) {
    .grade--kpis .kpi:nth-child(3) { border-left: 0; }
    .grade--kpis .kpi:nth-child(n+3) { border-top: 1px solid var(--vidro-linha); }
    .grade--kpis .kpi { padding: 1rem 1.1rem; }
  }

  /* Guias do painel em pílula (a 7): vidro, indicador que escorre. Rolam dentro da própria faixa; a página nunca. */
  .guias { position: relative; gap: 4px; padding: 5px; border-radius: 18px; max-width: 100%; border: 1px solid var(--vidro-linha); background: var(--vidro); box-shadow: inset 0 1px 0 var(--vidro-hi), 0 24px 60px -28px var(--vidro-sombra); scrollbar-width: none; margin-bottom: 1rem; overscroll-behavior-x: contain; }
  .guias::-webkit-scrollbar { display: none; }
  .guias__ind { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 13px; pointer-events: none; z-index: 0; background: var(--marca-bg); box-shadow: inset 0 0 0 1px var(--marca-clara); }
  .guias__aba { position: relative; z-index: 1; min-height: 46px; padding: 0 1.1rem; border: 0; border-radius: 13px; background: transparent; color: var(--fg-muted); font-weight: 500; }
  .guias__aba:hover { border-color: transparent; color: var(--fg); }
  .guias__aba[aria-selected="true"] { background: transparent; color: var(--fg); font-weight: 650; }
  .guias:not(.guias--com-indicador) .guias__aba[aria-selected="true"] { background: var(--marca-bg); }
  .guias__aba[aria-selected="true"] .guias__conta { background: var(--marca-solida); color: var(--sobre-solida); }
  .guias__aba:focus-visible { outline-offset: -3px; }
  .guia { animation: nova-entra .45s ease both; }
}
@media screen and (prefers-reduced-motion: reduce) {
  #dica, .nova-entra, .guia { animation: none; }
  .barra-materia__trilho span, .guias__aba { transition: none; }
  .guias__ind { transition: none !important; }
}
@media print {
  .fim-trilha, .trilha-ate-prova, #dica, .fim-entregue, .guias__ind { display: none !important; }
}

/* ===== Lote 8 da versão 7 (07/11/2026): redação, cronograma, copiloto e explicação no mesmo padrão (vidro, pílulas, display). Só na
   tela: o papel (imprimir.html e as regras de @media print) não muda. A folha de redação continua uma folha. ===== */
@media screen {
  /* Cronograma */
  .rotina { border-radius: 26px 26px 26px 10px; }
  .cronograma { gap: .7rem; }
  .semana { background: var(--vidro); border-color: var(--vidro-linha); border-radius: 22px; padding: 1rem 1.2rem; box-shadow: inset 0 1px 0 var(--vidro-hi), 0 24px 60px -34px var(--vidro-sombra); }
  .semana--atual { background: var(--vidro-forte); border-color: var(--marca-clara); box-shadow: inset 0 0 0 1px var(--marca-clara), 0 24px 60px -28px var(--vidro-sombra); }
  .semana--reta { background: var(--marca-bg); }
  .semana__datas { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--vidro-linha); background: var(--vidro-forte); }
  .semana h3 { font-size: 1.15rem; }
  .semana__assuntos li { border-top-color: var(--vidro-linha); }
  .semana__assuntos .botao { border-radius: 999px; }

  /* Redação: contadores, níveis da autoavaliação, apoio. A folha (textarea) fica como está. */
  .contador { background: var(--vidro-forte); border-color: var(--vidro-linha); border-radius: 16px; }
  .contador b { font-family: var(--display); }
  .contador--alerta { border-color: var(--aviso); background: var(--aviso-bg); }
  .contador--ok { border-color: var(--sucesso); background: var(--sucesso-bg); }
  .nivel { background: var(--vidro-forte); border-color: var(--vidro-linha); border-radius: 14px; }
  .nivel:hover { border-color: var(--marca-clara); }
  .nivel input { flex: none; }
  .nivel:has(input:checked) { border-color: var(--marca-escura); background: var(--marca-bg); }
  .criterio h3 { font-size: 1.15rem; }
  .apoio { background: var(--marca-bg); border-left-color: var(--marca-clara); }
  .folha { border-radius: 18px; border-color: var(--borda-forte); }

  /* Copiloto e explicação */
  .passos__item { background: var(--vidro-forte); border-color: var(--vidro-linha); }
  .passos__item--atual { border-color: var(--marca-clara); }
  .lista-fraquezas li, .lista-assuntos li { border-bottom-color: var(--vidro-linha); }
  .copiloto-selo { border-radius: 18px; }
  .bloco-explica h3 { font-family: var(--display); }
  .navegacao-erros .botao { border-radius: 999px; }
}

/* Perfil público e avatar (08/11/2026, ADR-009) */
.avatar { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--marca-bg); color: var(--marca-escura); font-family: var(--display); font-weight: 800; border: 1px solid var(--borda); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--grande { width: 96px; height: 96px; font-size: 2.4rem; }
.avatar-edicao { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-start; }
.form-avatar { flex: 1; min-width: min(100%, 16rem); }
.cabeca--perfil { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.cabeca--perfil h1 { margin: 0; overflow-wrap: anywhere; }
.faixa-admin { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--aviso-bg); color: var(--aviso-fg); font-size: .92rem; }
.ficha { display: grid; gap: .5rem; margin: 1rem 0; max-width: 34rem; }
.ficha > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem; padding: .5rem .8rem; border: 1px solid var(--borda); border-radius: 12px; }
.ficha dt { color: var(--fg-muted); font-weight: 600; }
.ficha dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.trofeus { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.trofeu { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.opcoes { border: 0; padding: 0; margin: 0 0 .85rem; display: grid; gap: .2rem; }
.opcoes legend { font-weight: 650; padding: 0; margin-bottom: .2rem; }
.opcao { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .2rem 0; cursor: pointer; }
.opcao input { width: 1.4rem; height: 1.4rem; flex: none; accent-color: var(--marca); }
.apelido-status { min-height: 1.3em; margin: 0; font-weight: 600; }
.apelido-status--livre { color: var(--sucesso-fg); }
.apelido-status--ocupado { color: var(--erro-fg); }
.ranking__ver { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; }
.ranking__ver:hover { text-decoration-color: currentColor; }
input[type="email"] { min-height: 44px; padding: .5rem .7rem; width: 100%; }
input[type="file"] { width: 100%; min-height: 44px; padding: .5rem 0; }

/* Cartões de memorização (07/11/2026): uma carta de baralho que vira em 3D ao toque (nunca no hover). Face clara na
   frente, violeta da marca no verso; só tokens já declarados, então os dois temas funcionam. Contraste do texto:
   --fg sobre --bg e --sobre-solida sobre --marca-solida (7,6:1 ou mais) nas duas faces. */
.cartoes [hidden] { display: none !important; }
.cartoes__assuntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.cartoes__assuntos .botao { justify-content: flex-start; text-align: left; white-space: normal; }
.cartoes__assuntos .cartoes__assunto { flex-direction: column; align-items: flex-start; gap: .1rem; }
.cartoes__assuntos .botao[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-bg); }
.cartoes__topo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.cartoes__topo [aria-pressed="true"] { border-color: var(--marca); background: var(--marca-bg); }
.cartoes__por-assunto { flex: 1 1 14rem; }
.cartoes__por-assunto > summary { list-style: none; cursor: pointer; }
.cartoes__por-assunto > summary::-webkit-details-marker { display: none; }
.cartoes__por-assunto[open] > summary { margin-bottom: .5rem; }
/* Nome do edital em no máximo duas linhas (o inteiro fica no title e na leitura de tela) */
.cartoes__assunto > span:first-child, .carta__face--frente .carta__rotulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartoes__palco { display: grid; gap: .75rem; }
.cartoes__contador { text-align: center; color: var(--fg-muted); font-weight: 600; }
.cartoes__avaliar, .cartoes__navega { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; max-width: 30rem; margin: 0 auto; }
.cartoes__fim { display: grid; gap: .6rem; justify-items: start; }
.carta {
  position: relative; display: block; width: 100%; max-width: 30rem; margin: 0 auto; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-lg);
  perspective: 1000px; -webkit-tap-highlight-color: transparent;
}
.carta__sombra { position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: var(--sombra-lg); opacity: 0; pointer-events: none; }
.carta__levanta { display: block; transform-style: preserve-3d; }
.carta__giro {
  display: grid; min-height: var(--altura-da-carta, auto); transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.45, .05, .25, 1);
}
.carta[data-virada="true"] .carta__giro { transform: rotateY(180deg); }
.carta__face {
  grid-area: 1 / 1; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .7rem;
  padding: 1.25rem 1.15rem; border-radius: var(--radius-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: visibility 600ms linear;
}
/* A face de trás fica invisível de fato (e fora da árvore de leitura): só uma face existe por vez; durante o giro as duas
   ficam visíveis e quem esconde a que está de costas é o backface-visibility. */
.carta__face--verso, .carta[data-virada="true"] .carta__face--frente { visibility: hidden; }
.carta[data-virada="true"] .carta__face--verso { visibility: visible; }
.carta__face--frente {
  background: var(--bg); color: var(--fg); border: 2px solid var(--marca);
  box-shadow: var(--sombra-md), inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--marca-bg);
}
.carta__face--verso {
  transform: rotateY(180deg); background: linear-gradient(150deg, var(--marca-solida), var(--marca-solida-hover));
  color: var(--sobre-solida); border: 2px solid var(--marca-clara); box-shadow: var(--sombra-md), inset 0 0 0 6px var(--marca-solida-hover);
}
.carta__rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.carta__face--frente .carta__rotulo { color: var(--marca-escura); }
.carta__texto { display: block; margin: auto 0; font-size: 1.2rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.carta__dica { font-size: .85rem; color: var(--fg-muted); }
.carta__macete { display: block; padding-left: .7rem; border-left: 3px solid var(--sobre-solida); font-size: .98rem; line-height: 1.45; overflow-wrap: anywhere; }
.carta__fundamento { display: block; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
/* O brilho: uma faixa de luz que atravessa a face uma vez ao virar. Sem laço. */
.carta__face::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 55%; opacity: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
}
@keyframes carta-levanta { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes carta-sombra { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes carta-brilho { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(380%); opacity: 0; } }
@keyframes carta-aparece { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }
@keyframes carta-some { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: visible; } }
.carta--girando .carta__levanta { animation: carta-levanta 600ms ease-in-out; }
.carta--girando .carta__sombra { animation: carta-sombra 600ms ease-in-out; }
.carta--girando .carta__face::after { animation: carta-brilho 450ms ease-in-out 200ms both; }
/* Sem movimento: nada de giro, escala nem brilho; só um esmaecimento de 150 ms entre as faces (por animação, porque a
   regra global de reduce desliga as transições). */
@media (prefers-reduced-motion: reduce) {
  .carta__giro, .carta[data-virada="true"] .carta__giro, .carta__face--verso { transform: none; }
  .carta--girando .carta__levanta, .carta--girando .carta__sombra, .carta--girando .carta__face::after { animation: none; }
  .carta[data-virada="false"] .carta__face--verso, .carta[data-virada="true"] .carta__face--frente { opacity: 0; visibility: hidden; }
  .carta--girando[data-virada="true"] .carta__face--verso, .carta--girando[data-virada="false"] .carta__face--frente { animation: carta-aparece 150ms ease-out; }
  .carta--girando[data-virada="true"] .carta__face--frente, .carta--girando[data-virada="false"] .carta__face--verso { animation: carta-some 150ms ease-out; }
}

.medicao-efeito > summary { cursor: pointer; margin-bottom: .5rem; }

/* Lote 3 da versao 7 (07/11/2026): em 393 o seletor "60 (30 de Gerais e 30 de Especificos)" saia cortado dentro do
   cartao de destaque, que tem mais folga interna; no celular a folga diminui e o seletor usa um corpo um pouco menor. */
@media (max-width: 430px) {
  .modo-destaque { padding: 1.1rem .95rem 1.2rem; }
  .modo-destaque select { font-size: .94rem; padding-left: .6rem; padding-right: 1.7rem; }
}


/* Lote 4 da versao 7 (07/11/2026): com a pagina rolada, o texto passava nitido nas bordas da pilula do topo (medido
   no treino corrigido). Uma faixa desfocada atras da pilula, que some para baixo, borra so o que rola por baixo;
   sobre a aurora parada (degrade liso) ela nao aparece. */
@media screen {
  .topo::before {
    content: ""; position: absolute; inset: 0 0 -14px 0; z-index: -1; pointer-events: none;
    background: linear-gradient(color-mix(in srgb, var(--bg-deep) 82%, transparent), color-mix(in srgb, var(--bg-deep) 55%, transparent));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
  }
}

/* ===== Lote 7 da versão 7 (07/11/2026): a carta de baralho em pé (63x88) sobre a estrutura que os testes já conhecem
   (.carta > .carta__levanta > .carta__giro > .carta__face). Tudo em cqw: o tamanho da carta é o da largura dela. ===== */
@media screen {
  .cartoes { overflow-x: clip; }
  .cartoes__palco { position: relative; }
  .carta { max-width: 21rem; container-type: inline-size; border-radius: 6cqw; }
  .carta:focus-visible { outline: 3px solid var(--ring); outline-offset: 6px; border-radius: 20px; }
  .carta__levanta { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .carta--movendo .carta__levanta { transition: transform .06s linear; }
  .carta__giro { aspect-ratio: 63 / 88; border-radius: 5cqw; }
  .carta__face, .carta__face--frente, .carta__face--verso {
    align-items: center; text-align: center; gap: 2.4cqw; padding: 8cqw 9cqw; border: 0; border-radius: 5cqw; color: var(--carta-tinta);
    background: linear-gradient(150deg, var(--carta-a), var(--carta-b));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 0 1px var(--carta-borda), 0 34px 50px -30px var(--vidro-sombra), 0 0 46px -14px var(--carta-brilho);
  }
  .carta__trelica { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, var(--carta-padrao) 0 1px, transparent 1px 2.4cqw), repeating-linear-gradient(-45deg, var(--carta-padrao) 0 1px, transparent 1px 2.4cqw); }
  .carta__papel { position: absolute; inset: 4.6cqw; border-radius: 3cqw; pointer-events: none; background: var(--carta-papel); border: 1px solid var(--carta-moldura); box-shadow: 0 0 0 .8cqw var(--carta-papel), 0 0 0 calc(.8cqw + 1px) var(--carta-moldura); }
  .carta__face > :not(.carta__trelica):not(.carta__papel):not(.carta__foil):not(.carta__indice) { position: relative; z-index: 2; }
  .carta__indice { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6cqw; min-width: 12cqw; line-height: 1; }
  .carta__indice--no { left: 7.4cqw; top: 7.6cqw; }
  .carta__indice--so { right: 7.4cqw; bottom: 7.6cqw; transform: rotate(180deg); }
  .carta__codigo { font-family: var(--display); font-weight: 800; font-size: 5.4cqw; letter-spacing: 0; color: var(--carta-tinta); }
  .carta__numero { font-size: 4.2cqw; font-weight: 600; color: var(--carta-mudo); font-variant-numeric: tabular-nums; }
  .carta__indice img { width: 7cqw; height: auto; margin-top: .8cqw; }
  .carta__rotulo, .carta__face--frente .carta__rotulo, .carta__face--verso .carta__rotulo {
    align-self: stretch; margin: 0 12cqw; min-height: 11.4cqw; display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 4.4cqw; line-height: 1.12; color: var(--carta-assunto);
  }
  .carta__face--frente .carta__rotulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; max-height: 2.24em; }
  .carta__face--verso .carta__rotulo { color: var(--carta-mudo); }
  .carta__medalha {
    width: 26cqw; height: 26cqw; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--carta-moldura);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--btn-a) 22%, transparent), transparent 70%);
  }
  .carta__medalha svg { width: 68%; height: 68%; overflow: visible; }
  .carta__medalha .s { fill: none; stroke: var(--marca-escura); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .carta__medalha .a { fill: none; stroke: var(--ambar); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .carta__medalha .af { fill: var(--ambar); stroke: none; }
  .carta__texto { font-family: var(--display); font-weight: 600; font-size: 5.4cqw; line-height: 1.36; letter-spacing: -.005em; text-wrap: pretty; margin: auto 0; }
  .carta__face--verso .carta__texto { font-size: 6cqw; }
  .carta__lacuna { color: var(--marca-escura); font-weight: 800; letter-spacing: .06em; text-decoration: underline; text-decoration-thickness: .6cqw; text-underline-offset: .5em; }
  .carta__resposta { font-weight: 800; color: var(--ambar-tinta); background: linear-gradient(transparent 62%, var(--ambar-suave) 62%); padding: 0 .6cqw; border-radius: .6cqw; }
  .carta__dica { align-self: flex-start; margin-right: 13cqw; font-size: 3.8cqw; font-weight: 500; color: var(--carta-mudo); display: flex; align-items: center; gap: 1.6cqw; text-align: left; }
  .carta__dica::before { content: ""; width: 2cqw; height: 2cqw; flex: none; border-radius: 50%; background: var(--marca-escura); box-shadow: 0 0 0 .8cqw var(--marca-bg); }
  .carta__macete { align-self: stretch; padding: 2.6cqw 0 0; border-left: 0; border-top: 1px solid var(--carta-moldura); font-family: "Inter", system-ui, sans-serif; font-size: 5cqw; line-height: 1.38; color: var(--carta-mudo); text-align: left; }
  .carta__fundamento { align-self: stretch; margin-right: 13cqw; font-size: 3.9cqw; line-height: 1.3; color: var(--carta-mudo); text-align: left; }
  .carta__foil {
    position: absolute; inset: 0; border-radius: 5cqw; pointer-events: none; z-index: 4; mix-blend-mode: var(--foil-blend); opacity: var(--foil-op); transition: opacity .3s;
    background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .9), transparent 34%),
      conic-gradient(from calc(var(--ang, 0) * 1deg) at var(--mx, 30%) var(--my, 20%), #8d54ff, #43c6f2, #f4b24a, #ff6fb1, #8d54ff);
  }
  .carta--movendo .carta__foil, .carta:focus-visible .carta__foil { opacity: var(--foil-hover); }
  /* Raios em 360 graus: irmão do que gira (dentro do .carta), animado por JS ao virar. */
  .carta__raios { position: absolute; inset: -34% -52%; pointer-events: none; z-index: 6; opacity: 0; border-radius: 50%; }
  .carta__raios::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--raio) 0 2.4deg, transparent 2.4deg 11deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .62) 22%, transparent 58%); mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .62) 22%, transparent 58%);
  }
  .carta__raios::after { content: ""; position: absolute; left: 40%; right: 40%; top: 37%; bottom: 37%; border-radius: 50%; opacity: .7; background: radial-gradient(ellipse, var(--raio-nucleo) 0, var(--raio) 38%, transparent 72%); filter: blur(6px); }
  /* Embaralhar: as cartas fantasma são a frente da própria carta. */
  .carta__fantasma { position: absolute; pointer-events: none; will-change: transform; container-type: inline-size; }
  .carta__fantasma .carta__face { position: absolute; inset: 0; }
  /* Costas da carta (o monte do embaralhar): treliça clara sobre o violeta da marca, moldura fina e a coroa. */
  .carta__costas {
    --carta-padrao: rgba(255, 255, 255, .16); position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; border-radius: 5cqw;
    background: linear-gradient(150deg, var(--marca-solida), var(--marca-solida-hover));
    box-shadow: 0 0 0 1px var(--carta-borda), 0 14px 26px -18px var(--vidro-sombra);
  }
  .carta__costas::before { content: ""; position: absolute; inset: 4.6cqw; border-radius: 3cqw; border: 1px solid rgba(255, 255, 255, .5); pointer-events: none; }
  .carta__costas img { position: relative; width: 22cqw; height: auto; filter: brightness(0) invert(1); opacity: .92; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .carta__levanta { transform: none !important; transition: none; }
  .carta__foil, .carta__raios { display: none; }
}


/* ===== Três cartas por vez e carta em destaque (08/11/2026) =====
   Mesa: três cartas lado a lado no computador; no celular, carrossel horizontal com encaixe (uma carta grande, a seguinte
   espiando), como no protótipo aprovado. Destaque: diálogo modal com a carta ampliada, fundo escurecido e desfocado.
   Padrões de referência (pesquisados antes de escrever): WAI-ARIA APG, "Dialog (Modal) Pattern" (role=dialog, aria-modal, foco
   preso e devolvido a quem abriu, Esc fecha), e o "card focus / lightbox" das galerias (clicar fora fecha; o fundo atrás
   fica inerte). Movimento: entrada com fade e escala sem pressa; com prefers-reduced-motion só esmaece. */
@media screen {
  .cartoes__mesa { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.75rem, 2vw, 1.5rem); padding: .5rem 0 .25rem; }
  .cartoes__lugar { flex: 1 1 0; min-width: 0; max-width: 21rem; display: grid; gap: .6rem; align-content: start; }
  .cartoes__lugar .carta { cursor: zoom-in; }
  .cartoes__marcas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
  .cartoes__marcas .botao { padding-inline: .5rem; white-space: normal; text-align: center; justify-content: center; }
  .cartoes__marcas .botao[aria-disabled="true"] { cursor: default; }
  .cartoes__marcas .botao[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-bg); font-weight: 700; box-shadow: 0 0 0 3px var(--marca-bg); }
  .cartoes__marcas .botao--marca[aria-pressed="true"] { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); }
  .cartoes__marcas .botao[aria-pressed="true"]::before { content: "\2713\00a0"; }
  .carta--sem-giro .carta__giro, .carta--sem-giro .carta__face, .carta--embaralhando .carta__giro, .carta--embaralhando .carta__face { transition: none; }
}
/* Até 960 px as três cartas ficariam estreitas demais (o texto da carta é em cqw): carrossel, como no celular. */
@media screen and (max-width: 960px) {
  .cartoes__mesa {
    justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 1rem; scrollbar-width: none;
    padding: 2rem calc((100% - min(76vw, 20rem)) / 2) 3.5rem; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); /* o brilho da carta não termina em corte seco na borda da mesa */
  }
  .cartoes__mesa::-webkit-scrollbar { display: none; }
  .cartoes__lugar { flex: 0 0 min(76vw, 20rem); scroll-snap-align: center; }
}

html.destaque-aberto { overflow: hidden; }
.destaque[hidden], .destaque [hidden] { display: none !important; }
.destaque {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; overflow: hidden; cursor: zoom-out;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}
/* O fundo escurecido e desfocado é irmão da carta: esmaece sozinho, e a carta voa (FLIP, pelo cartoes.js) por cima dele. */
.destaque__fundo {
  position: absolute; inset: 0; background: rgba(12, 9, 34, .68); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.destaque__corpo {
  --larg: min(92vw, calc((100vh - 9.5rem) * 63 / 88), 34rem);
  --larg: min(92vw, calc((100dvh - 9.5rem) * 63 / 88), 34rem);
  position: relative; display: grid; justify-items: center; gap: .9rem; cursor: default;
}
.destaque__lugar { width: var(--larg); }
.destaque__lugar .carta { max-width: none; width: 100%; cursor: zoom-out; }
.destaque__comandos {
  display: grid; gap: .5rem; width: min(100%, max(var(--larg), 20rem)); padding: .6rem; border-radius: 18px;
  background: var(--bg); border: 1px solid var(--vidro-linha); box-shadow: var(--sombra-md);
}
@media (min-width: 761px) and (min-aspect-ratio: 5/4) {
  .destaque__corpo {
    --larg: calc((100vh - 3rem) * 63 / 88);
    --larg: calc((100dvh - 3rem) * 63 / 88);
    grid-auto-flow: column; align-items: center; justify-items: start; gap: 1.5rem;
  }
  .destaque__comandos { width: 14rem; }
}
/* Em janela muito baixa (celular deitado) a carta não cabe inteira: aí o diálogo rola. */
@media (max-height: 560px) { .destaque { overflow-y: auto; } }
@keyframes destaque-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes destaque-fundo-sai { from { opacity: 1; } to { opacity: 0; } }
.destaque:not([hidden]) .destaque__fundo { animation: destaque-fundo 400ms ease-out both; }
.destaque:not([hidden]) .destaque__comandos { animation: destaque-fundo 420ms ease-out 260ms both; }
.destaque.destaque--saindo .destaque__fundo { animation: destaque-fundo-sai 480ms ease-in both; }
.destaque.destaque--saindo .destaque__comandos { animation: destaque-fundo-sai 160ms ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .destaque:not([hidden]) .destaque__corpo { animation: destaque-fundo 220ms ease-out both; }
  .destaque.destaque--saindo .destaque__corpo { animation: destaque-fundo-sai 160ms ease-in both; }
  .destaque:not([hidden]) .destaque__comandos, .destaque.destaque--saindo .destaque__comandos { animation: none; }
  .destaque.destaque--saindo .destaque__fundo { animation-duration: 160ms; }
}

/* Aviso de sessão (ADR-015): "Você ainda está aí?" cinco minutos antes de acabar, e "Sua sessão acabou". */
.aviso-sessao { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: var(--gaveta-fundo); }
.aviso-sessao[hidden] { display: none; }
.aviso-sessao__cartao { width: min(100%, 26rem); padding: 1.4rem; border: 1px solid var(--vidro-linha); border-radius: 24px; background: var(--bg); box-shadow: var(--sombra-lg); display: grid; gap: .7rem; }
.aviso-sessao__cartao h2 { margin: 0; font-size: 1.3rem; }
.aviso-sessao__cartao p { margin: 0; }
.aviso-sessao__tempo { font: 800 2rem/1 var(--display); letter-spacing: -.02em; }
.aviso-sessao__tempo:empty { display: none; }
.aviso-sessao .linha-de-acoes { margin-top: .4rem; }

/* Avaliação em coroas ao fim da rodada (ADR-017). A coroa é a do selo de nível: acesa, ela ganha o brilho e o reflexo do selo
   (.selo__foil, .selo__reflexo, .selo--passa, definidos acima), apagada é só o contorno. Todas as coroas até a nota pegam a
   cor da nota: 1 vermelho, 2 vermelho mais claro, 3 laranja, 4 azul, 5 ouro. A nota continua legível sem cor: o rótulo
   "3 de 5 coroas" e a forma (cheia contra contorno). Contraste do contorno contra o fundo medido em
   tests/test_avaliacao_css.py (3:1 ou mais, nos dois temas). */
:root { --coroa-1: #9c1c14; --coroa-2: #b4382f; --coroa-3: #8f4a00; --coroa-4: #1649a8; --coroa-5: #6e4000; --coroa-vazia: #6b6390; }
:root[data-theme="dark"] { --coroa-1: #ff8a80; --coroa-2: #ffa59c; --coroa-3: #ffb561; --coroa-4: #7db4ff; --coroa-5: #ffd34a; --coroa-vazia: #a79fd6; }
.selo--nota-1 { --a: #ff9d94; --b-cor: #e0362c; --c: #a3190f; --rim: var(--coroa-1); --ink: #2a0805; --glow: rgba(224, 54, 44, .85); }
.selo--nota-2 { --a: #ffc2bb; --b-cor: #f06a5e; --c: #c4443a; --rim: var(--coroa-2); --ink: #2a0805; --glow: rgba(240, 106, 94, .85); }
.selo--nota-3 { --a: #ffd199; --b-cor: #ff9a1f; --c: #c25f00; --rim: var(--coroa-3); --ink: #2a1600; --glow: rgba(255, 154, 31, .9); }
.selo--nota-4 { --a: #bcd6ff; --b-cor: #3b82f6; --c: #1d4ed8; --rim: var(--coroa-4); --ink: #06122f; --glow: rgba(59, 130, 246, .9); }
.selo--nota-5 { --a: #fff5a6; --b-cor: #ffd21a; --c: #c47500; --rim: var(--coroa-5); --ink: #2a1600; --glow: rgba(255, 196, 40, 1); }
.avaliacao { margin: 1.25rem 0; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--vidro-linha); background: var(--vidro); }
.avaliacao[hidden] { display: none; }
.avaliacao__titulo { margin: 0 0 .35rem; font-size: 1.05rem; }
.avaliacao__coroas { display: flex; flex-wrap: wrap; gap: .1rem; }
.coroa { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.coroa .selo { filter: none; }
.coroa .coroa__cheia, .coroa .selo__foil, .coroa .selo__reflexo, .coroa .selo__brilhos { display: none; }
.coroa[data-acesa] .coroa__cheia { display: inline; }
.coroa[data-acesa] .coroa__vazia { display: none; }
.coroa[data-acesa] .selo__foil, .coroa[data-acesa] .selo__reflexo, .coroa[data-acesa] .selo__brilhos { display: block; }
.coroa[data-acesa] .selo { filter: drop-shadow(0 0 calc(var(--halo, 0) * 1px) var(--glow)) drop-shadow(0 1px calc(var(--halo, 0) * .25px) rgba(0, 0, 0, .25)); }
.avaliacao__nota, .avaliacao__contador, .avaliacao__feita { margin: .3rem 0 0; color: var(--fg-muted); font-size: .92rem; overflow-wrap: anywhere; }
.avaliacao__porque { display: grid; gap: .45rem; margin-top: .8rem; }
.avaliacao__porque[hidden], .avaliacao__erro[hidden] { display: none; }
.avaliacao__rotulo { font-weight: 650; }
.avaliacao__texto { width: 100%; min-height: 5.5rem; padding: .6rem .75rem; font: inherit; color: var(--fg); background: var(--campo-bg); border: 1px solid var(--borda-forte); border-radius: 12px; resize: vertical; }
.avaliacao__contador { margin: 0; }
.avaliacao__contador--excesso, .avaliacao__erro { margin: 0; color: var(--erro-fg, #a3000e); font-weight: 650; }
.avaliacao__enviar { justify-self: start; min-height: 44px; }
.avaliacao__enviar:disabled { opacity: .55; cursor: not-allowed; }
/* Movimento: o brilho da coroa é o do selo. Com "reduzir movimento" o CSS do selo (acima) deixa o reflexo parado e esconde as
   faíscas, e o avaliacao.js nem dispara o reflexo; as coroas em si não se mexem. */

/* Notificações da conta (ADR-018): o número no avatar do topo e a lista. O número fica acima da letra e do nome, para nunca
   cobrir texto (gate visual); "lida" aparece apagada pela cor e pelo selo "Lida", nunca por opacidade (contraste). */
.topo__quem { position: relative; }
.topo__contador {
  position: absolute; top: -7px; left: 24px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; box-sizing: border-box;
  display: grid; place-items: center; background: var(--erro-solida); color: var(--sobre-solida); font: 700 .75rem/1 var(--display);
}
.topo__contador[hidden] { display: none; }
.notificacoes__cabeca { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 1rem; }
.notificacoes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.notificacao { display: grid; gap: .45rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--vidro-forte); border: 1px solid var(--marca-clara); }
.notificacao--lida { background: transparent; border-color: var(--borda); color: var(--fg-muted); }
.notificacao__cabeca { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0; font-size: .85rem; }
.notificacao__estado { font-weight: 700; color: var(--marca-escura); }
.notificacao--lida .notificacao__estado { color: var(--fg-muted); font-weight: 600; }
.notificacao__titulo { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.notificacao__citado { margin: 0; padding: .5rem .8rem; border-left: 3px solid var(--marca-clara); display: grid; gap: .3rem; font-size: .92rem; overflow-wrap: anywhere; }
.notificacao__citado p { margin: 0; }
.notificacao__coroas { display: inline-flex; gap: 2px; align-items: center; }
.notificacao__resposta { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notificacao__nivel { margin: 0; }
.notificacao .botao { justify-self: start; min-height: 44px; }
.notificacoes__vazio { margin: 0; padding: 1.2rem; border-radius: 18px; border: 1px dashed var(--borda-forte); }

/* Comentários das avaliações, na administração (ADR-018). */
.coment-admin__filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.coment-admin__filtros .botao[aria-pressed="true"] { background: var(--marca-bg); border-color: var(--marca-escura); color: var(--fg); }
.coment-admin__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.coment-admin__item { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--borda); background: var(--vidro-forte); }
.coment-admin__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; font-size: .88rem; color: var(--fg-muted); }
.coment-admin__quem { font-weight: 700; color: var(--fg); }
.coment-admin__texto, .coment-admin__resposta { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.coment-admin__resposta { padding: .5rem .8rem; border-left: 3px solid var(--marca-clara); }
.coment-admin__campo textarea { width: 100%; min-height: 5.5rem; padding: .6rem .75rem; font: inherit; color: var(--fg); background: var(--campo-bg); border: 1px solid var(--borda-forte); border-radius: 12px; resize: vertical; box-sizing: border-box; }
.coment-admin__contador { margin: .2rem 0 0; font-size: .85rem; }
.coment-admin__contador--excesso, .coment-admin__erro { margin: 0; color: var(--erro-fg); font-weight: 650; }
.coment-admin__enviar { justify-self: start; min-height: 44px; }
.coment-admin__enviar:disabled { opacity: .55; cursor: not-allowed; }