/* Nunito auto-hospedada (fonte variável, subset latin): funciona offline e
   nenhum terceiro recebe o IP de quem abre o app. Gerada de fonts.gstatic.com
   (Nunito v32, licença OFL). */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('fontes/nunito-latin.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;
}

:root {
  color-scheme: light;
  --verde: #58CC02;
  --verde-esc: #46A302;
  --verde-claro: #D7FFB8;
  --azul: #1CB0F6;
  --azul-esc: #1899D6;
  --azul-claro: #DDF4FF;
  --laranja: #FF9600;
  --vermelho: #FF4B4B;
  --vermelho-esc: #CC3B3B;
  --verm-claro: #FFDFE0;
  --amarelo: #FFC800;
  --roxo: #6C5CE7;
  --texto: #3C3C3C;
  --texto-suave: #6B6B6B;
  --laranja-texto: #8F5500;
  --verde-texto: #3B7A00;
  --azul-texto: #1272A8;
  --vermelho-texto: #C0392F;
  --verde-vivo: var(--verde-esc);
  --azul-vivo: var(--azul-esc);
  --vermelho-vivo: var(--vermelho-esc);
  --sobre-verde: #12330A;
  --sobre-azul: #062B3F;
  --sobre-vermelho: #40060A;
  --sobre-amarelo: #3C3C3C;
  --sobre-cor: #241C00;
  --borda: #E5E5E5;
  --borda-suave: color-mix(in srgb, #E5E5E5 60%, transparent);
  --fonte-xs: 11px;
  --fonte-sm: 13px;
  --fonte-md: 15px;
  --fonte-lg: 17px;
  --fonte-xl: 20px;
  --fonte-2xl: clamp(19px, 5.5vw, 24px);
  --fundo: #FCF9F4;
  --superficie: #fff;
  --trilho: #EDEDED;
  --estrela-vazia: #ddd;
  --btn-off-fundo: #E5E5E5;
  --btn-off-texto: #595959;
  --btn-off-sombra: #D8D8D8;
  --pontinhos: rgba(0, 0, 0, 0.03);
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --verde-claro: #1a3a10;
  --azul-claro: #0d3a52;
  --verm-claro: #46161c;
  --texto: #F1F7FB;
  --texto-suave: #B3C4CD;
  --laranja-texto: #FFB144;
  --verde-texto: #8EE05A;
  --azul-texto: #62C5F8;
  --vermelho-texto: #FF9BA0;
  --verde-vivo: #8EE05A;
  --azul-vivo: #62C5F8;
  --vermelho-vivo: #FF9BA0;
  --sobre-cor: #241C00;
  --borda: #37464F;
  --borda-suave: color-mix(in srgb, #37464F 65%, transparent);
  --fundo: #131F24;
  --superficie: #202F36;
  --trilho: #37464F;
  --estrela-vazia: #37464F;
  --btn-off-fundo: #2b3a42;
  --btn-off-texto: #9DB4BF;
  --btn-off-sombra: #24323a;
  --pontinhos: rgba(255, 255, 255, 0.035);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-padding-top: calc(64px + env(safe-area-inset-top));
}

body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  color: var(--texto);
  background-color: var(--fundo);
  background-image: radial-gradient(var(--pontinhos) 1px, transparent 1px);
  background-size: 24px 24px;
}

#app {
  max-width: 680px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.pular {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular:focus {
  position: fixed;
  left: 0;
  right: 0;
  top: env(safe-area-inset-top);
  z-index: 40;
  width: auto;
  height: auto;
  margin: 0;
  padding: 14px 16px;
  min-height: 44px;
  overflow: visible;
  clip: auto;
  border-radius: 0;
  background: var(--verde);
  color: var(--sobre-verde);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: var(--texto);
  touch-action: manipulation;
}

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 14px;
  padding: 13px 26px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s, transform 0.1s;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: none;
}

.btn-verde {
  background: var(--verde);
  color: var(--sobre-verde);
  box-shadow: 0 4px 0 var(--verde-esc);
}

.btn-azul {
  background: var(--azul);
  color: var(--sobre-azul);
  box-shadow: 0 4px 0 var(--azul-esc);
}

.btn-vermelho {
  background: var(--vermelho);
  color: var(--sobre-vermelho);
  box-shadow: 0 4px 0 var(--vermelho-esc);
}

.btn-branco {
  background: var(--superficie);
  color: var(--azul-texto);
  border: 2px solid var(--borda);
  box-shadow: 0 4px 0 var(--borda);
}

.btn:disabled {
  background: var(--btn-off-fundo);
  color: var(--btn-off-texto);
  box-shadow: 0 4px 0 var(--btn-off-sombra);
  cursor: not-allowed;
  transform: none;
}

.topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  position: sticky;
  top: env(safe-area-inset-top);
  background: var(--fundo);
  z-index: 10;
}

.espaco {
  flex: 1;
}

.logo {
  font-size: 22px;
  font-weight: 900;
}

.logo-tela {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.logo-marca {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pilula-unidade {
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  margin-left: -2px;
}

.pilula {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 900;
  font-size: var(--fonte-md);
  transition: border-color 0.12s, transform 0.1s;
}

.pilula-fogo {
  border-color: color-mix(in srgb, var(--laranja) 55%, var(--borda));
  color: var(--laranja-texto);
}

.hub-busca {
  margin: 8px 0 12px;
}

.hub-busca label {
  display: block;
  margin-bottom: 6px;
}

.hub-busca-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hub-busca-linha .entrada {
  flex: 1;
  min-width: 0;
}

.busca-limpar {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 2px solid var(--borda);
  background: var(--superficie);
  color: var(--azul);
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

.busca-limpar.oculta {
  display: none;
}

.hub-item {
  min-height: 44px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
}

.hub-item > .card {
  margin-bottom: 0;
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
}

.estrela-treino {
  flex: 0 0 52px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 18px;
  border: 2px solid var(--borda);
  border-bottom-width: 4px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 22px;
  cursor: pointer;
  font-family: inherit;
}

.estrela-treino[aria-pressed="true"] {
  color: var(--amarelo);
  border-color: var(--amarelo);
  background: color-mix(in srgb, var(--amarelo) 18%, var(--superficie));
}

.estrela-treino:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.trilha-topo {
  margin: 8px 0 12px;
}

.balanco {
  margin: 8px 0 12px;
}

.balanco .btn,
.fila-fala .btn,
.fala-hoje .btn {
  margin-top: 10px;
}

.fila-fala {
  margin: 8px 0 12px;
}

.fala-hoje {
  margin: 8px 0 12px;
}

.sem-pratica {
  margin: 8px 0 12px;
}

.sem-pratica .btn {
  margin-top: 10px;
}

.fala-sequencia {
  margin: 8px 0 12px;
}

.fala-sequencia .btn {
  margin-top: 10px;
}

.fala-comparacao {
  margin: 8px 0 12px;
}

.fala-comparacao .btn {
  margin-top: 10px;
}

.fala-palavra {
  margin: 8px 0 12px;
}

.fala-palavra .btn {
  margin-top: 10px;
}

.fala-grupo {
  margin: 8px 0 12px;
}

.fala-grupo .btn {
  margin-top: 10px;
}

.fala-estrela {
  margin: 8px 0 12px;
}

.fala-estrela .btn {
  margin-top: 10px;
}

.fala-acerto {
  margin: 8px 0 12px;
}

.fala-acerto .btn {
  margin-top: 10px;
}

.fala-pico {
  margin: 8px 0 12px;
}

.fala-pico .btn {
  margin-top: 10px;
}

.fala-apoio {
  margin: 8px 0 12px;
}

.fala-apoio .btn {
  margin-top: 10px;
}

.fala-nota {
  margin: 8px 0 12px;
}

.fala-nota .btn {
  margin-top: 10px;
}

.fala-dias {
  margin: 8px 0 12px;
}

.fala-dias .btn {
  margin-top: 10px;
}

.fala-ritmo {
  margin: 8px 0 12px;
}

.fala-ritmo .btn {
  margin-top: 10px;
}

.fala-lacuna {
  margin: 8px 0 12px;
}

.fala-lacuna .btn {
  margin-top: 10px;
}

.fala-meta {
  margin: 8px 0 12px;
}

.fala-meta .btn {
  margin-top: 10px;
}

.fala-duracao {
  margin: 8px 0 12px;
}

.fala-duracao .btn {
  margin-top: 10px;
}

.fala-ultima {
  margin: 8px 0 12px;
}

.fala-ultima .btn {
  margin-top: 10px;
}

.fala-primeira {
  margin: 8px 0 12px;
}

.fala-primeira .btn {
  margin-top: 10px;
}

.fala-hiato {
  margin: 8px 0 12px;
}

.fala-hiato .btn {
  margin-top: 10px;
}

.fala-costume {
  margin: 8px 0 12px;
}

.fala-costume .btn {
  margin-top: 10px;
}

.fala-marca {
  margin: 8px 0 12px;
}

.fala-marca .btn {
  margin-top: 10px;
}

.fala-auge {
  margin: 8px 0 12px;
}

.fala-auge .btn {
  margin-top: 10px;
}

.fala-sete {
  margin: 8px 0 12px;
}

.fala-sete .btn {
  margin-top: 10px;
}

.fala-soma {
  margin: 8px 0 12px;
}

.fala-soma .btn {
  margin-top: 10px;
}

.fala-pordia {
  margin: 8px 0 12px;
}

.fala-pordia .btn {
  margin-top: 10px;
}

.fala-parte {
  margin: 8px 0 12px;
}

.fala-parte .btn {
  margin-top: 10px;
}

.fala-fora {
  margin: 8px 0 12px;
}

.fala-fora .btn {
  margin-top: 10px;
}

.fala-total {
  margin: 8px 0 12px;
}

.fala-total .btn {
  margin-top: 10px;
}

.fala-lote {
  margin: 8px 0 12px;
}

.fala-lote .btn {
  margin-top: 10px;
}

.fala-saldo {
  margin: 8px 0 12px;
}

.fala-saldo .btn {
  margin-top: 10px;
}

.fala-passo {
  margin: 8px 0 12px;
}

.fala-passo .btn {
  margin-top: 10px;
}

.fala-maior {
  margin: 8px 0 12px;
}

.fala-maior .btn {
  margin-top: 10px;
}

.fala-menor {
  margin: 8px 0 12px;
}

.fala-menor .btn {
  margin-top: 10px;
}

.fala-diferenca {
  margin: 8px 0 12px;
}

.fala-diferenca .btn {
  margin-top: 10px;
}

.fala-meio {
  margin: 8px 0 12px;
}

.fala-meio .btn {
  margin-top: 10px;
}

.fala-variedade {
  margin: 8px 0 12px;
}

.fala-variedade .btn {
  margin-top: 10px;
}

.fala-moda {
  margin: 8px 0 12px;
}

.fala-moda .btn {
  margin-top: 10px;
}

.fala-repeticao {
  margin: 8px 0 12px;
}

.fala-repeticao .btn {
  margin-top: 10px;
}

.fala-extensao {
  margin: 8px 0 12px;
}

.fala-extensao .btn {
  margin-top: 10px;
}

.fala-vao {
  margin: 8px 0 12px;
}

.fala-vao .btn {
  margin-top: 10px;
}

.fala-proporcao {
  margin: 8px 0 12px;
}

.fala-proporcao .btn {
  margin-top: 10px;
}

.fala-cobertura {
  margin: 8px 0 12px;
}

.fala-cobertura .btn {
  margin-top: 10px;
}

.fala-intervalo {
  margin: 8px 0 12px;
}

.fala-intervalo .btn {
  margin-top: 10px;
}

.fala-cadencia {
  margin: 8px 0 12px;
}

.fala-cadencia .btn {
  margin-top: 10px;
}

.fala-densidade {
  margin: 8px 0 12px;
}

.fala-densidade .btn {
  margin-top: 10px;
}

.fala-peso {
  margin: 8px 0 12px;
}

.fala-peso .btn {
  margin-top: 10px;
}

.fala-sobra {
  margin: 8px 0 12px;
}

.fala-sobra .btn {
  margin-top: 10px;
}

.fala-resto {
  margin: 8px 0 12px;
}

.fala-resto .btn {
  margin-top: 10px;
}

.fala-grao {
  margin: 8px 0 12px;
}

.fala-grao .btn {
  margin-top: 10px;
}

.fala-curto {
  margin: 8px 0 12px;
}

.fala-curto .btn {
  margin-top: 10px;
}

.fala-longo {
  margin: 8px 0 12px;
}

.fala-longo .btn {
  margin-top: 10px;
}

.fala-salto {
  margin: 8px 0 12px;
}

.fala-salto .btn {
  margin-top: 10px;
}

.fala-mediana {
  margin: 8px 0 12px;
}

.fala-mediana .btn {
  margin-top: 10px;
}

.fala-mosaico {
  margin: 8px 0 12px;
}

.fala-mosaico .btn {
  margin-top: 10px;
}

.fala-turno {
  margin: 8px 0 12px;
}

.fala-turno .btn {
  margin-top: 10px;
}

.fala-virada {
  margin: 8px 0 12px;
}

.fala-virada .btn {
  margin-top: 10px;
}

.fala-faixa {
  margin: 8px 0 12px;
}

.fala-faixa .btn {
  margin-top: 10px;
}

.fala-abertura {
  margin: 8px 0 12px;
}

.fala-abertura .btn {
  margin-top: 10px;
}

.fala-estacao {
  margin: 8px 0 12px;
}

.fala-estacao .btn {
  margin-top: 10px;
}

.topo > button.pilula {
  min-width: 44px;
  min-height: 44px;
}

body.com-aviso-metricas {
  padding-bottom: 120px;
}

.trilha-topo .btn {
  margin-top: 10px;
}

.pilula[aria-pressed="true"] {
  border-color: var(--azul);
  background: color-mix(in srgb, var(--azul) 16%, var(--superficie));
}

.fila-botoes > .pilula {
  cursor: pointer;
  min-height: 44px;
}

.btn-perfil {
  min-height: 44px;
  cursor: pointer;
}

.btn-perfil:hover {
  border-color: var(--azul);
}

.card {
  min-height: 44px;
  background: var(--superficie);
  border: 2px solid var(--borda-suave);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 16px;
}

.rotulo {
  min-height: 44px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--texto-suave);
  margin: 24px 2px 10px;
}

.nivel-card {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--verde) 12%, transparent), transparent 55%);
  border-color: color-mix(in srgb, var(--verde) 30%, var(--borda-suave));
}

.nivel-emoji {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  font-size: 32px;
  background: color-mix(in srgb, var(--verde) 16%, var(--superficie));
  border-radius: 50%;
}

.nivel-info {
  flex: 1;
}

.nivel-titulo {
  font-weight: 900;
  font-size: var(--fonte-lg);
  margin-bottom: 8px;
}

.nivel-xp {
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
  margin-top: 6px;
}

.progresso {
  height: 14px;
  background: var(--trilho);
  border-radius: 999px;
  overflow: hidden;
}

.progresso > div {
  height: 100%;
  background: var(--verde);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
  border-radius: 999px;
  transition: width 0.4s;
}

.nivel-prog {
  max-width: 340px;
}

.revisao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  border-bottom-width: 4px;
  font-family: inherit;
  color: var(--texto);
}

.revisao:hover {
  border-color: var(--azul);
}

button.revisao,
button.conta-entrar {
  min-height: 44px;
}

.revisao-vencida {
  border-color: var(--laranja);
}

.revisao-emoji {
  font-size: 36px;
  width: 44px;
  flex: 0 0 44px;
  text-align: center;
  line-height: 1;
}

.revisao-textos {
  flex: 1;
  min-width: 0;
}

.revisao-titulo {
  font-size: 18px;
  font-weight: 900;
}

.revisao-sub {
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
  line-height: 1.45;
}

.revisao-seta {
  font-size: 24px;
  flex: 0 0 auto;
}

.passeio-status {
  font-size: var(--fonte-xl);
  font-weight: 900;
  text-align: center;
  margin: 8px 0 12px;
}

.revisao > .pilula {
  flex-shrink: 0;
}

.unidade {
  margin-bottom: 26px;
}

.unidade-cab {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
}

.unidade-emoji {
  font-size: 34px;
}

.unidade-titulo {
  font-size: var(--fonte-xl);
  font-weight: 900;
}

.unidade-sub {
  font-size: var(--fonte-sm);
  opacity: 0.9;
}

.cadeado {
  margin-left: auto;
  font-size: 22px;
}

.licoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr));
  gap: 12px;
}

.licao {
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-bottom-width: 4px;
  border-radius: 16px;
  padding: 14px 10px;
  min-height: 44px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  color: var(--texto);
}

.licao:hover {
  transform: translateY(-2px);
}

.licao.feita {
  border-color: color-mix(in srgb, var(--cor-unidade) 45%, var(--borda));
}

.licao.bloqueada {
  border-color: var(--borda-suave);
  cursor: not-allowed;
}

.licao.bloqueada .licao-emoji {
  filter: grayscale(1);
  opacity: 0.55;
}

.licao.bloqueada .licao-titulo {
  color: var(--texto-suave);
}

.licao.bloqueada:hover {
  transform: none;
}

.licao-emoji {
  font-size: 34px;
}

.licao-titulo {
  font-size: 14px;
  font-weight: 800;
  margin: 6px 0 4px;
}

.estrelas {
  color: var(--estrela-vazia);
  font-size: var(--fonte-md);
  letter-spacing: 2px;
}

.estrelas .ganha {
  color: var(--amarelo);
}

.licao-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  position: sticky;
  top: env(safe-area-inset-top);
  background: var(--fundo);
  z-index: 10;
}

.fechar {
  background: none;
  border: none;
  font-size: var(--fonte-xl);
  color: var(--texto-suave);
  cursor: pointer;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fechar:hover {
  color: var(--texto);
}

.barra-licao {
  flex: 1;
  height: 12px;
}

.combo {
  font-weight: 900;
  color: var(--laranja-texto);
  font-size: 18px;
  min-width: 56px;
  text-align: right;
}

.pop {
  animation: pop 0.3s;
}

@keyframes pop {
  50% {
    transform: scale(1.4);
  }
}

#app:has(.area-exercicio) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 112px;
}

.area-exercicio {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 16px;
}

.enunciado {
  font-size: var(--fonte-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 14px;
}

.prompt-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 28px;
}

.btn-som {
  min-height: 44px;
  background: var(--azul);
  border: none;
  color: #fff;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  font-size: var(--fonte-xl);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--azul-esc);
  flex: none;
}

.btn-som:active {
  transform: translateY(3px);
  box-shadow: none;
}

.btn-som.grande {
  width: 100px;
  height: 100px;
  font-size: 46px;
  border-radius: 26px;
  display: block;
  margin: 6px auto 24px;
}

.opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px;
}

.opcao {
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-bottom-width: 4px;
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 44px;
  font-size: var(--fonte-lg);
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  color: var(--texto);
  transition: transform 0.1s, border-color 0.12s;
}

.opcao:hover:not(.sel):not(.certa):not(.errada):not(.ok) {
  border-color: color-mix(in srgb, var(--azul) 40%, var(--borda));
  transform: translateY(-1px);
}

.opcao:active:not(.certa):not(.errada):not(.ok) {
  transform: translateY(1px);
}

.opcao.sel {
  border-color: var(--azul);
  background: var(--azul-claro);
  color: var(--azul-vivo);
}

.opcao.certa {
  border-color: var(--verde);
  background: var(--verde-claro);
  color: var(--verde-vivo);
}

.opcao.errada {
  border-color: var(--vermelho);
  background: var(--verm-claro);
  color: var(--vermelho-vivo);
}

.entrada {
  width: 100%;
  border: 2px solid var(--borda);
  border-radius: 14px;
  padding: 16px;
  min-height: 44px;
  font-size: 18px;
  font-family: inherit;
  font-weight: 800;
  outline: none;
  background: var(--superficie);
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea.entrada {
  min-height: 7.5rem;
  resize: vertical;
}

.preenchimento {
  background: color-mix(in srgb, var(--amarelo) 35%, var(--superficie));
  border-radius: 6px;
  padding: 0 0.15em;
}

.entrada::placeholder {
  color: var(--texto-suave);
  font-weight: 700;
}

.entrada-certa {
  border-color: var(--verde);
  background: var(--verde-claro);
}

.entrada-errada {
  border-color: var(--vermelho);
  background: var(--verm-claro);
}

.entrada-quase {
  border-color: var(--laranja);
  background: color-mix(in srgb, var(--laranja) 16%, var(--superficie));
}

.resposta-area {
  min-height: 66px;
  border: 2px dashed var(--borda);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 16px;
  background: var(--superficie);
}

.area-certa {
  border-color: var(--verde);
  background: var(--verde-claro);
}

.area-errada {
  border-color: var(--vermelho);
  background: var(--verm-claro);
}

.banco {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tile {
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-bottom-width: 4px;
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  color: var(--texto);
  transition: transform 0.1s, border-color 0.12s, opacity 0.15s;
}

.tile:hover:not(.usada) {
  border-color: color-mix(in srgb, var(--azul) 40%, var(--borda));
  transform: translateY(-1px);
}

.tile.usada {
  opacity: 0.3;
  pointer-events: none;
}

.pares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.par-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.par-btn.ok {
  opacity: 0.35;
  pointer-events: none;
  border-color: var(--verde);
}

.tremendo {
  animation: tremer 0.3s;
  border-color: var(--vermelho);
}

@keyframes tremer {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

.rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--superficie);
  border-top: 2px solid var(--borda);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  z-index: 15;
}

.rodape-conteudo {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-nao-sei {
  min-height: 44px;
  margin-right: auto;
}

.feedback {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(110%);
  transition: transform 0.25s;
  z-index: 20;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 22px 22px 0 0;
}

.feedback.aberta {
  transform: none;
}

.feedback.certo {
  background: var(--verde-claro);
}

.feedback.errado {
  background: var(--verm-claro);
}

.feedback.quase {
  background: color-mix(in srgb, var(--laranja) 22%, var(--superficie));
}

.feedback-conteudo {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.feedback-textos {
  flex: 1;
  max-height: 42vh;
  overflow: auto;
}

.feedback-titulo {
  font-size: 22px;
  font-weight: 900;
}

.feedback.certo .feedback-titulo {
  color: var(--verde-vivo);
}

.feedback.errado .feedback-titulo {
  color: var(--vermelho-vivo);
}

.feedback.quase .feedback-titulo {
  color: var(--laranja-texto);
}

.feedback-frase {
  font-size: var(--fonte-md);
  margin-top: 2px;
}

.feedback-frase.suave {
  color: var(--texto-suave);
}

.feedback-diff {
  margin-top: 2px;
}

.diff-rotulo {
  font-size: var(--fonte-sm);
  opacity: 0.75;
}

.diff-falta {
  background: var(--amarelo);
  color: var(--sobre-amarelo);
  border-radius: 6px;
  padding: 1px 4px;
  margin-right: 2px;
}

.diff-sobra {
  text-decoration: line-through;
  opacity: 0.65;
}

.diff-fora {
  background: color-mix(in srgb, var(--laranja) 35%, transparent);
  border-radius: 6px;
  padding: 1px 4px;
  margin-right: 2px;
}

.diff-letras {
  white-space: pre-wrap;
  font-weight: 800;
}

.dica-tela {
  max-width: 460px;
  margin: 40px auto 0;
  text-align: center;
}

.dica-emoji {
  font-size: 56px;
}

.dica-tela h1 {
  font-size: 22px;
  font-weight: 900;
  margin: 6px 0 16px;
}

.dica-corpo {
  text-align: left;
  font-size: var(--fonte-md);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.btn-dica {
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-bottom-width: 4px;
  border-radius: 14px;
  font-size: 20px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.btn-dica:active {
  transform: translateY(4px);
  border-bottom-width: 2px;
}

.btn-dica[aria-expanded="true"] {
  border-color: var(--laranja);
}

.dica-dia-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dica-dia-titulo {
  font-weight: 900;
  margin-top: 8px;
}

.dica-dia-corpo,
.dica-bloco p,
.tropeco-dica {
  font-weight: 700;
  line-height: 1.45;
  margin: 6px 0 0;
}

.dica-bloco + .dica-bloco {
  margin-top: 12px;
}

.dica-painel-titulo,
.tropeco-nome {
  font-weight: 900;
  font-size: var(--fonte-md);
}

.pontos-fracos {
  border-color: var(--laranja);
}

.tropeco {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--borda-suave);
}

.tropeco-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tropeco-palavra {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--borda);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
}

.tropeco-saldo {
  color: var(--laranja-texto);
  font-variant-numeric: tabular-nums;
}

.tropeco-btn {
  min-height: 44px;
  margin-top: 14px;
}

.resultado-dica {
  text-align: left;
  margin: 16px auto;
  max-width: 460px;
}

.relampago-dica {
  margin-top: 14px;
}

.banner-streak {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--laranja) 18%, var(--superficie));
  border: 2px solid var(--laranja);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 14px;
}

.meta-card {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.meta-pronta {
  border-color: color-mix(in srgb, var(--verde) 35%, var(--borda-suave));
}

.meta-emoji {
  font-size: 32px;
}

.meta-info {
  flex: 1;
  min-width: 0;
}

.meta-fala {
  align-items: flex-start;
}

.meta-fala-acao {
  min-height: 44px;
  margin-top: 8px;
  max-width: 100%;
}

.cronometro-rapido,
.cronometro-demo {
  font-weight: 900;
  font-size: var(--fonte-lg);
  color: var(--laranja-texto);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  min-height: 44px;
}

.plano-item {
  margin-top: 12px;
}

.plano-item .btn {
  width: 100%;
  margin-top: 8px;
}

.meta-titulo {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}

.meta-prog {
  max-width: 320px;
}

.meta-prog > div {
  background: var(--laranja);
}

.meta-pronta .meta-prog > div {
  background: var(--verde);
}

.meta-xp {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 6px;
}

.metas {
  display: inline-flex;
  gap: 2px;
  flex: none;
  background: var(--trilho);
  border-radius: 999px;
  padding: 3px;
}

.meta-opcao {
  position: relative;
  border: none;
  background: none;
  color: var(--texto-suave);
  font-family: inherit;
  font-weight: 900;
  font-size: var(--fonte-sm);
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  min-width: 44px;
  min-height: 44px;
}

.meta-opcao::after {
  content: '';
  position: absolute;
  inset: 0;
}

.meta-opcao:hover:not(.ativa) {
  color: var(--texto);
}

.meta-opcao.ativa {
  background: var(--laranja);
  color: var(--sobre-cor);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.meta-pronta .meta-opcao.ativa {
  background: var(--verde);
  color: var(--sobre-verde);
}

.semana {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.semana-dia {
  flex: 1 1 44px;
  min-width: 44px;
  background: var(--superficie);
  border: 2px solid var(--borda-suave);
  border-radius: 12px;
  padding: 8px 2px;
  min-height: 44px;
  text-align: center;
}

.semana-dia.feito {
  background: color-mix(in srgb, var(--laranja) 10%, var(--superficie));
  border-color: color-mix(in srgb, var(--laranja) 35%, var(--borda-suave));
}

.semana-dia.hoje {
  border-color: var(--azul);
}

.semana-dia.futuro {
  color: var(--texto-suave);
}

.semana-letra {
  display: block;
  font-size: var(--fonte-xs);
  color: var(--texto-suave);
  font-weight: 900;
}

.semana-bolinha {
  display: block;
  font-size: 16px;
  margin-top: 2px;
}

.semana-dia:not(.feito) .semana-bolinha {
  color: var(--texto-suave);
  opacity: 0.5;
}

.missoes-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.missoes-titulo {
  font-weight: 900;
  font-size: 16px;
}

.missao {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.missao.concluida .missao-nome {
  text-decoration: line-through;
  color: var(--texto-suave);
}

.missao-emoji {
  font-size: var(--fonte-xl);
}

.missao-corpo {
  flex: 1;
}

.missao-nome {
  font-size: var(--fonte-sm);
  font-weight: 800;
  margin-bottom: 4px;
}

.missao-prog {
  height: 8px;
}

.missao-xp {
  font-size: 12px;
  font-weight: 900;
  color: var(--laranja-texto);
}

.boas-vindas {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-color: var(--verde);
}

.boas-emoji {
  flex: none;
}

.boas-texto {
  flex: 1;
  min-width: 180px;
}

.boas-titulo {
  font-weight: 900;
  font-size: 18px;
}

.boas-sub {
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
}

.boas-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.boas-acoes .btn {
  width: 100%;
}

.pilula.destaque {
  border-color: var(--laranja);
  color: var(--laranja-texto);
}

.missoes-cumpridas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.overlay-nivel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 20px;
}

.overlay-caixa {
  background: var(--superficie);
  border: 2px solid var(--amarelo);
  border-radius: 22px;
  padding: 28px 24px;
  text-align: center;
  max-width: 340px;
  animation: quicar 0.5s;
}

.overlay-emoji {
  font-size: 60px;
}

.overlay-titulo {
  font-size: 14px;
  font-weight: 900;
  color: var(--texto-suave);
  letter-spacing: 1px;
}

.overlay-nome {
  font-size: 22px;
  font-weight: 900;
  margin: 4px 0 18px;
}

.sons-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-lento {
  min-height: 44px;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--borda);
  box-shadow: 0 3px 0 var(--borda);
}

.btn-som.btn-lento {
  min-width: 44px;
  min-height: 44px;
}

.prompt-apoio {
  font-size: 14px;
  color: var(--texto-suave);
  margin: -10px 0 18px;
  font-weight: 800;
}

.btn-mic {
  min-height: 44px;
  display: block;
  margin: 8px auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: var(--vermelho);
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--vermelho-esc);
}

.btn-mic.gravando {
  animation: pulsar 1s infinite;
}

@keyframes pulsar {
  50% {
    transform: scale(1.08);
  }
}

.fala-status {
  text-align: center;
  font-size: 14px;
  color: var(--texto-suave);
  font-weight: 800;
}

.fala-eco {
  text-align: center;
  font-size: var(--fonte-xl);
  font-weight: 900;
  margin-top: 10px;
  min-height: 26px;
}

.fala-certa {
  color: var(--verde-esc);
}

.fala-errada {
  color: var(--vermelho-esc);
}

.fala-pular {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.dicionario-atalho {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  border-bottom-width: 4px;
  font-family: inherit;
  color: var(--texto);
  margin-bottom: 12px;
}

.dicionario-atalho:hover {
  border-color: var(--azul);
}

.campo-busca {
  position: relative;
  margin-bottom: 12px;
}

.campo-busca-icone {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.55;
  pointer-events: none;
}

.busca-dic {
  padding: 14px 16px 14px 46px;
  font-size: 16px;
  border-radius: 999px;
}

#busca-hub::-webkit-search-cancel-button {
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--trilho);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

input.busca-dic::-webkit-search-cancel-button {
  min-height: 44px;
  opacity: 1;
  pointer-events: auto;
  display: none;
}

.dic-limpar {
  min-height: 44px;
  min-width: 44px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid var(--borda);
  background: var(--superficie);
  color: var(--azul);
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
}

.dic-limpar.oculta {
  display: none;
}

.campo-busca.com-limpar .busca-dic {
  padding-right: 96px;
}

.busca-dic::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--trilho);
  cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dic-filtros {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin-bottom: 10px;
}

.dic-contador {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--texto-suave);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.dic-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dic-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--superficie);
  border: 2px solid var(--borda-suave);
  border-radius: 14px;
  padding: 12px 14px;
  animation: surgir 0.28s backwards;
}

.dic-som {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font-size: 16px;
  border-radius: 10px;
  flex: none;
}

.dic-corpo {
  flex: 1;
  min-width: 0;
}

.dic-en {
  font-size: var(--fonte-lg);
  font-weight: 900;
}

.dic-pt {
  font-size: 14px;
  color: var(--texto-suave);
  font-weight: 800;
  margin-top: 2px;
}

.dic-nota {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 6px;
  line-height: 1.4;
}

.dic-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  max-width: 44%;
}

.dic-tag {
  font-size: var(--fonte-xs);
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--trilho);
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dic-unidade {
  background: color-mix(in srgb, var(--cor-unidade) 18%, transparent);
  color: var(--texto);
}

.dic-status.memoria {
  background: color-mix(in srgb, var(--verde) 20%, transparent);
  color: var(--verde-texto);
}

.dic-status.vencida {
  background: color-mix(in srgb, var(--laranja) 20%, transparent);
  color: var(--laranja-texto);
}

.voz-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.voz-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.voz-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 2px solid var(--borda-suave);
  padding-top: 12px;
}

.voz-rotulo {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--texto-suave);
  min-width: 78px;
}

.voz-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.voz-chip {
  position: relative;
  border: 2px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-weight: 800;
  font-size: var(--fonte-sm);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  min-width: 44px;
  min-height: 44px;
}

.voz-chip::after {
  content: '';
  position: absolute;
  inset: 0;
}

.voz-chip:hover:not(.ativa) {
  border-color: color-mix(in srgb, var(--azul) 45%, var(--borda));
}

.voz-chip.ativa {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.lembrete-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.lembrete-textos {
  flex: 1;
  min-width: 170px;
}

.hora-input {
  width: auto;
  padding: 8px 10px;
  font-size: var(--fonte-md);
  min-width: 44px;
  min-height: 44px;
}

.debug-item {
  font-size: 12px;
  word-break: break-word;
}

.debug-quando {
  color: var(--texto-suave);
  font-size: var(--fonte-xs);
}

.debug-msg {
  font-weight: 900;
  margin: 4px 0;
}

.debug-pilha {
  color: var(--texto-suave);
  font-family: monospace;
  font-size: var(--fonte-xs);
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--azul) 70%, transparent);
  outline-offset: 3px;
}

.entrada:focus,
.entrada:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent);
}

@media (max-width: 430px) {
  .meta-card {
    flex-wrap: wrap;
  }

  .meta-card .metas {
    width: 100%;
    justify-content: flex-end;
  }

  .topo {
    gap: 8px;
  }

  .logo {
    font-size: var(--fonte-lg);
  }

  .logo-marca .logo-nome {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pilula {
    padding: 5px 9px;
    font-size: var(--fonte-sm);
  }

  .fechar {
    min-width: 44px;
    min-height: 44px;
  }

  .pilula-conta {
    max-width: 96px;
  }

  .semana-dia {
    padding: 6px 0;
  }

  .badge-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.mascote {
  display: block;
}

.historia-no {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--azul) 45%, var(--borda));
  background: color-mix(in srgb, var(--azul) 6%, var(--superficie));
}

.historia-no.bloqueada {
  border-color: var(--borda-suave);
  background: var(--superficie);
}

.chat-cenario {
  flex: 1;
  text-align: center;
  font-weight: 900;
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.bolha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 86%;
  animation: surgir 0.3s;
}

.bolha.do-louro {
  align-self: flex-start;
}

.bolha.do-voce {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.bolha-avatar {
  flex: none;
}

.bolha-corpo {
  background: var(--superficie);
  border: 2px solid var(--borda-suave);
  border-radius: 18px 18px 18px 4px;
  padding: 10px 14px;
}

.do-voce .bolha-corpo {
  background: color-mix(in srgb, var(--verde) 16%, var(--superficie));
  border-color: color-mix(in srgb, var(--verde) 35%, var(--borda-suave));
  border-radius: 18px 18px 4px 18px;
}

.bolha-en {
  font-weight: 900;
  font-size: var(--fonte-md);
}

.bolha-pt {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.bolha-som {
  width: 44px;
  height: 44px;
  font-size: 18px;
  border-radius: 12px;
  flex: none;
}

.chat-resposta {
  border-top: 2px solid var(--borda-suave);
  padding-top: 14px;
}

.chat-feedback {
  font-size: var(--fonte-sm);
  font-weight: 800;
  margin-top: 12px;
  min-height: 20px;
}

.chat-feedback.certo {
  color: var(--verde-texto);
}

.chat-feedback.errado {
  color: var(--vermelho);
}

.chat-acao {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.m-sombra {
  fill: rgba(0, 0, 0, 0.12);
}

.m-corpo {
  fill: var(--verde);
}

.m-barriga {
  fill: color-mix(in srgb, var(--amarelo) 65%, #fff);
}

.m-cabeca {
  fill: var(--verde);
}

.m-face {
  fill: color-mix(in srgb, var(--amarelo) 40%, #fff);
}

.m-asa {
  fill: var(--verde-esc);
}

.m-cauda {
  fill: var(--azul);
}

.m-topete {
  fill: var(--vermelho);
}

.m-bico {
  fill: var(--laranja);
}

.m-bico-baixo {
  fill: color-mix(in srgb, var(--laranja) 70%, #000);
}

.m-olho-fundo {
  fill: #fff;
}

.m-olho {
  fill: #2b2b2b;
}

.m-brilho {
  fill: #fff;
}

.m-olho-fechado {
  fill: none;
  stroke: #2b2b2b;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.m-pes {
  fill: none;
  stroke: var(--laranja);
  stroke-width: 4;
  stroke-linecap: round;
}

.m-coroa {
  fill: var(--amarelo);
}

.m-z {
  fill: var(--texto-suave);
  font-size: 20px;
  font-weight: 900;
  animation: flutuar 2s infinite;
}

@keyframes flutuar {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.mascote-feliz {
  animation: quicar 0.6s;
}

.relampago-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--laranja) 40%, var(--borda));
}

.escuta-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--azul) 45%, var(--borda));
}

.escuta-off {
  cursor: default;
  opacity: 0.85;
}

.faixa-offline {
  min-height: 44px;
  background: var(--laranja);
  color: var(--sobre-cor);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  margin-bottom: 16px;
}

.instalar-card .dica-dia-corpo {
  margin-bottom: 12px;
}

.instalar-botoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.instalar-botoes > .btn,
.instalar-card > .btn {
  min-height: 44px;
  min-width: 44px;
}

.aviso-fala {
  font-weight: 800;
  color: var(--texto-suave);
  font-size: var(--fonte-sm);
  margin: 0 0 8px;
}

.entrada-fala {
  margin-top: 12px;
}

.verbos-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--roxo) 40%, var(--borda));
}

.barra-tempo > div {
  background: var(--laranja);
  transition: width 0.1s linear;
}

.verbo-frase {
  gap: 10px;
  font-size: var(--fonte-xl);
}

.verbo-sujeito {
  font-weight: 900;
}

.verbo-lacuna {
  color: var(--azul);
  letter-spacing: 2px;
}

.banner-desafio {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-color: color-mix(in srgb, var(--azul) 45%, var(--borda-suave));
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--azul) 12%, transparent), transparent 60%);
}

.sobre-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.sobre-textos {
  flex: 1;
  min-width: 190px;
}

.sobre-botoes {
  display: flex;
  gap: 8px;
}

.sobre-botoes > .pilula {
  min-width: 44px;
  min-height: 44px;
}

.sobre-link {
  text-decoration: none;
  color: var(--texto);
}

.metricas-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.metricas-textos {
  flex: 1;
  min-width: 200px;
}

.privacidade-linha {
  font-size: var(--fonte-sm);
  line-height: 1.55;
  color: var(--texto-suave);
  margin-top: 8px;
}

.privacidade-linha:first-of-type {
  margin-top: 10px;
}

.novidade-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.novidade-lista {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
}

.licao.chefao {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--amarelo) 50%, var(--borda));
  background: color-mix(in srgb, var(--amarelo) 7%, var(--superficie));
}

.licao.chefao.bloqueada {
  border-color: var(--borda-suave);
  background: var(--superficie);
}

.combo.vidas {
  font-size: 14px;
  letter-spacing: 1px;
  min-width: 68px;
}

.dic-fav {
  position: relative;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  align-self: center;
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter 0.15s, opacity 0.15s, transform 0.12s;
  min-width: 44px;
  min-height: 44px;
}

.dic-fav::after {
  content: '';
  position: absolute;
  inset: 0;
}

.dic-fav:hover {
  opacity: 0.8;
  transform: scale(1.15);
}

.dic-fav.ativa {
  filter: none;
  opacity: 1;
}

.minha-lista {
  border-color: color-mix(in srgb, var(--amarelo) 45%, var(--borda));
}

.jornada-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.jornada-grafico {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 90px;
  padding: 8px 0 0;
}

.jornada-barra {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.jornada-barra > div {
  width: 100%;
  background: color-mix(in srgb, var(--azul) 55%, var(--trilho));
  border-radius: 4px 4px 2px 2px;
  min-height: 2px;
}

.jornada-barra.bateu > div {
  background: var(--verde);
}

.jornada-resumo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--texto-suave);
  border-top: 2px solid var(--borda-suave);
  padding-top: 10px;
}

.caixas {
  border-top: 2px solid var(--borda-suave);
  padding-top: 12px;
}

.caixas-titulo {
  font-size: var(--fonte-sm);
  font-weight: 900;
  margin-bottom: 8px;
}

.caixa-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

button.caixa-treinavel {
  width: 100%;
  margin: 0 0 5px;
  padding: 6px 8px;
  min-height: 44px;
  background: none;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

button.caixa-treinavel:hover {
  border-color: var(--azul);
  background: color-mix(in srgb, var(--azul) 10%, transparent);
}

.caixa-rotulo {
  font-size: var(--fonte-xs);
  font-weight: 800;
  color: var(--texto-suave);
  min-width: 56px;
}

.caixa-prog {
  flex: 1;
  height: 8px;
}

.caixa-num {
  font-size: var(--fonte-xs);
  font-weight: 900;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.backup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.backup-textos {
  flex: 1;
  min-width: 190px;
}

.backup-botoes {
  display: flex;
  gap: 8px;
}

.backup-botoes > .btn,
.vocab-botoes > .btn {
  min-height: 44px;
}

.arquivo-escondido {
  display: none;
}

.perigo {
  color: var(--vermelho);
  font-size: var(--fonte-sm);
  padding: 9px 16px;
}

.esqueleto {
  pointer-events: none;
}

.esq-bloco {
  background: var(--trilho);
  border-radius: 8px;
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--superficie) 70%, transparent), transparent);
  background-size: 200% 100%;
  animation: brilho 1.2s infinite;
}

.esq-som {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
}

.esq-linha1 {
  height: 15px;
  width: 42%;
  margin-bottom: 7px;
}

.esq-linha2 {
  height: 12px;
  width: 62%;
}

.esq-tag {
  width: 74px;
  height: 18px;
  border-radius: 999px;
  flex: none;
}

@keyframes brilho {
  to {
    background-position: -200% 0;
  }
}

.estado-vazio {
  text-align: center;
  padding: 34px 16px;
}

.vazio-emoji {
  display: flex;
  justify-content: center;
}

.vazio-emoji-pequeno {
  font-size: 26px;
  margin-top: 6px;
}

.vazio-titulo {
  font-weight: 900;
  font-size: var(--fonte-lg);
  margin: 8px 0 4px;
}

.vazio-sub {
  font-size: 14px;
  color: var(--texto-suave);
  max-width: 320px;
  margin: 0 auto 16px;
  line-height: 1.45;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

[data-transicao="avancar"]::view-transition-old(root) {
  animation: sair-esquerda 0.2s ease-in both;
}

[data-transicao="avancar"]::view-transition-new(root) {
  animation: entrar-direita 0.22s ease-out both;
}

[data-transicao="tema"]::view-transition-old(root) {
  animation: none;
}

[data-transicao="tema"]::view-transition-new(root) {
  animation: revelar 0.45s ease-out both;
}

@keyframes sair-esquerda {
  to {
    opacity: 0;
    transform: translateX(-18px);
  }
}

@keyframes entrar-direita {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes revelar {
  from {
    clip-path: circle(0% at 88% 42px);
  }
  to {
    clip-path: circle(150% at 88% 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

.pilula,
.stat-valor,
.combo,
.nivel-xp,
.meta-xp {
  font-variant-numeric: tabular-nums;
}

.feedback-frase,
.dic-nota {
  line-height: 1.45;
}

[data-tema="escuro"] .card,
[data-tema="escuro"] .licao,
[data-tema="escuro"] .opcao,
[data-tema="escuro"] .dic-item {
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.045);
}

.aviso-versao {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  max-width: calc(100% - 32px);
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--azul-esc), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.aviso-versao:active {
  transform: translateX(-50%) translateY(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.feedback-nota {
  font-size: 14px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 200, 0, 0.18);
  border: 1px solid rgba(255, 200, 0, 0.45);
}

.resultado {
  text-align: center;
  padding-top: 40px;
}

.emojao {
  font-size: 80px;
  animation: quicar 0.8s;
}

@keyframes quicar {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.resultado h1 {
  margin: 8px 0 4px;
  font-size: 26px;
  font-weight: 900;
}

.resultado-frase {
  color: var(--texto-suave);
  font-size: var(--fonte-md);
}

.estrelas-grandes {
  font-size: 56px;
  margin: 14px 0 6px;
  color: var(--estrela-vazia);
  display: flex;
  gap: 10px;
  justify-content: center;
}

.estrelas-grandes span {
  opacity: 0;
  transform: scale(0);
}

.estrelas-grandes .ganha {
  color: var(--amarelo);
}

.estrelas-grandes .anima {
  animation: estrela 0.5s forwards;
}

@keyframes estrela {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pilulas-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.pilulas-stats .pilula {
  animation: surgir 0.4s backwards;
}

.pilulas-stats .pilula:nth-child(1) { animation-delay: 0.1s; }
.pilulas-stats .pilula:nth-child(2) { animation-delay: 0.22s; }
.pilulas-stats .pilula:nth-child(3) { animation-delay: 0.34s; }
.pilulas-stats .pilula:nth-child(4) { animation-delay: 0.46s; }
.pilulas-stats .pilula:nth-child(5) { animation-delay: 0.58s; }
.pilulas-stats .pilula:nth-child(6) { animation-delay: 0.7s; }

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.resultado-botoes {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.resultado-botoes > .btn {
  min-height: 44px;
  min-width: 44px;
}

.novas-badges {
  margin-top: 10px;
}

.secao-titulo {
  font-size: 18px;
  font-weight: 900;
  margin: 22px 0 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 10px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--superficie);
  border: 2px solid var(--borda-suave);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
}

.stat-emoji {
  font-size: 26px;
}

.stat-valor {
  font-size: 18px;
  font-weight: 900;
}

.stat-rotulo {
  font-size: 12px;
  color: var(--texto-suave);
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 10px;
}

.badges-grid.centrada {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.badge-card {
  text-align: center;
  padding: 14px 10px;
  border: 2px solid var(--borda-suave);
  border-radius: 14px;
  background: var(--superficie);
}

.badge-card.trancada .badge-emoji {
  filter: grayscale(1);
  opacity: 0.45;
}

.badge-card.trancada .badge-nome {
  color: var(--texto-suave);
}

.badge-card.nova {
  border-color: var(--amarelo);
  background: #FFF8E0;
  min-width: 170px;
  animation: quicar 0.6s;
}

.badge-emoji {
  font-size: 32px;
}

.badge-nome {
  font-weight: 900;
  font-size: 14px;
  margin-top: 4px;
}

.badge-desc {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.login {
  max-width: 420px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.login-logo {
  display: flex;
  justify-content: center;
}

.login h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.login-sub {
  color: var(--texto-suave);
  font-size: 14px;
  margin-bottom: 8px;
}

.login-botoes {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.login-msg {
  font-size: 14px;
  font-weight: 800;
  min-height: 18px;
}

.login-msg.erro {
  color: var(--vermelho-vivo);
}

.login-msg.ok {
  color: var(--verde-vivo);
}

.conta-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  width: 100%;
}

.conta-card.conta-entrar {
  cursor: pointer;
  font-weight: 800;
  font-size: var(--fonte-md);
  color: var(--texto);
  border-bottom-width: 4px;
  text-align: left;
}

.conta-card.conta-entrar:hover {
  border-color: var(--azul);
}

.conta-email {
  font-weight: 800;
  font-size: var(--fonte-md);
  overflow-wrap: anywhere;
}

.conta-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.conta-aviso {
  font-size: 12px;
  color: var(--texto-suave);
}

.conta-pendente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pilula-conta {
  gap: 6px;
  max-width: 190px;
}

.pilula-conta .pilula-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilula-conta.pendente {
  border-color: var(--laranja);
}

.conta-google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 2px solid var(--borda);
  padding-top: 12px;
}

.conta-google-titulo {
  font-weight: 900;
  font-size: var(--fonte-md);
}

.conta-google-sub {
  font-size: 12px;
  color: var(--texto-suave);
}

.btn-google {
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--borda);
  box-shadow: 0 4px 0 var(--borda);
}

.btn-google:hover {
  border-color: #4285F4;
}

.icone-google {
  display: inline-flex;
  align-items: center;
}

.login-ou {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-suave);
  font-size: var(--fonte-sm);
  font-weight: 800;
}

.login-ou::before,
.login-ou::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--borda);
}

[data-tema="escuro"] .badge-card.nova {
  background: #3a3110;
}

[data-tema="escuro"] .entrada-certa {
  color: var(--verde-vivo);
}

[data-tema="escuro"] .entrada-errada {
  color: var(--vermelho-vivo);
}

[data-tema="escuro"] .entrada-quase {
  color: var(--laranja-texto);
}

/* === Navegação e avisos (roteador, confirmação de saída, métrica) === */
.login-form,
.login-slot-google {
  display: contents;
}

.fechar-confirmando {
  color: var(--vermelho-texto);
  font-size: var(--fonte-sm);
  font-weight: 900;
  white-space: nowrap;
}

/* A cor no container não alcançava os filhos, que têm cor própria. */
.semana-dia.futuro .semana-letra,
.semana-dia.futuro .semana-bolinha {
  color: var(--texto-suave);
}

/* Texto escuro sobre o azul da faixa de aviso: 6,0:1 (o branco dava 2,4:1). */
.aviso-versao {
  color: var(--sobre-azul);
}

.banner-desafio {
  position: relative;
  padding-right: 44px;
}

.banner-fechar {
  min-height: 44px;
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: var(--fonte-md);
}

.aviso-metricas {
  bottom: calc(68px + env(safe-area-inset-bottom));
}

/* As metas de 3 dígitos (50-350) não cabem ao lado do texto em telas
   estreitas: o cartão quebra linha em vez de estourar a largura da página. */
.meta-card {
  flex-wrap: wrap;
}

/* Foco programático das trocas de tela (focarTela): anunciado pelo leitor de
   tela, sem desenhar anel em quem navega por toque/mouse. */
[tabindex="-1"]:focus {
  outline: none;
}

/* === Louro comemorando na tela de resultado === */
/* O contêiner mantém o "quicar" de entrada; o Louro dá três pulinhos com
   squash na aterrissagem e depois fica num gingado leve, batendo a asa. */
.mascote-festa .mascote {
  display: inline-block;
  /* Os pulos só começam depois do "quicar" de entrada do contêiner (0,8s). */
  animation: festa-pulo 2.4s ease-out 0.8s both, festa-gingado 1.8s ease-in-out 3.2s infinite alternate;
}

@keyframes festa-pulo {
  0%, 30%, 60%, 92%, 100% {
    transform: translateY(0) rotate(0deg) scale(1, 1);
  }
  12% {
    transform: translateY(-16px) rotate(-5deg);
  }
  24% {
    transform: translateY(0) scale(1.07, 0.9);
  }
  42% {
    transform: translateY(-16px) rotate(5deg);
  }
  54% {
    transform: translateY(0) scale(1.07, 0.9);
  }
  74% {
    transform: translateY(-22px) rotate(-4deg);
  }
  88% {
    transform: translateY(0) scale(1.09, 0.88);
  }
}

@keyframes festa-gingado {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}

.mascote-festa .m-asa {
  transform-box: fill-box;
  transform-origin: 85% 15%;
  animation: festa-asa 0.42s ease-in-out infinite alternate;
}

@keyframes festa-asa {
  from {
    transform: rotate(8deg);
  }
  to {
    transform: rotate(-20deg);
  }
}

/* A sombra encolhe quando o Louro está no ar, no compasso dos pulos. */
.mascote-festa .m-sombra {
  transform-box: fill-box;
  transform-origin: center;
  animation: festa-sombra 2.4s ease-out 0.8s both;
}

@keyframes festa-sombra {
  0%, 24%, 54%, 88%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  12%, 42%, 74% {
    transform: scale(0.72);
    opacity: 0.55;
  }
}

/* === Expansão de Vocabulário e cartão de palavra nova === */
.apresentacao-card {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px;
  text-align: center;
  border-top: 4px solid var(--amarelo);
}

.apresentacao-topo {
  display: flex;
  gap: 10px;
}

.apresentacao-en {
  font-size: var(--fonte-2xl);
  font-weight: 900;
}

.apresentacao-pt {
  font-size: var(--fonte-lg);
  color: var(--texto-suave);
}

.apresentacao-classe {
  align-self: center;
}

.apresentacao-acao {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.vocab-trilha {
  border-left: 6px solid var(--cor-unidade);
}

.vocab-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.vocab-prog > div {
  background: var(--cor-unidade);
}

.vocab-resumo {
  display: flex;
  justify-content: space-between;
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
  margin: 8px 2px 14px;
}

.vocab-botoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vocab-proxima {
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
  font-style: italic;
}

/* === Cartão da conta como lista de configurações === */
/* Três linhas na mesma grade. Texto à esquerda, ação compacta à direita.
   Com o vermelho reservado ao que é destrutivo de verdade. */
.conta-card {
  gap: 0;
}

.conta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.conta-item:first-child {
  padding-top: 0;
}

.conta-item:last-child {
  padding-bottom: 0;
}

.conta-item + .conta-item {
  border-top: 2px solid var(--borda-suave);
}

.conta-texto {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.conta-titulo {
  font-weight: 900;
  font-size: var(--fonte-md);
}

.conta-sub {
  font-size: var(--fonte-sm);
  color: var(--texto-suave);
  line-height: 1.4;
}

.conta-alerta {
  color: var(--laranja-texto);
}

.conta-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-compacto {
  padding: 9px 18px;
  font-size: 14px;
  min-height: 44px;
}

.conta-apagar .conta-titulo {
  color: var(--vermelho-texto);
}

/* === Topo sem estouro lateral === */
/* O cabeçalho (logo + pílulas) era flex sem quebra nem encolhimento: com
   conta logada ele passava de 550px e criava rolagem horizontal na página
   inteira. Em tela estreita as pílulas compactam; se ainda assim não couber,
   a linha quebra em vez de estourar. */
.topo {
  flex-wrap: wrap;
}

.conversa-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--roxo) 45%, var(--borda));
}

.pronuncia-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--verde) 45%, var(--borda));
}

.nivel-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--amarelo) 55%, var(--borda));
}

.dia-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--azul) 45%, var(--borda));
}

:root[data-fonte="grande"] {
  --fonte-xs: 13px;
  --fonte-sm: 16px;
  --fonte-md: 18px;
  --fonte-lg: 20px;
  --fonte-xl: 24px;
  --fonte-2xl: clamp(22px, 6vw, 28px);
}

:root[data-fonte="grande"] .entrada,
:root[data-fonte="grande"] .btn,
:root[data-fonte="grande"] .opcao,
:root[data-fonte="grande"] .revisao-titulo {
  font-size: 20px;
}

.semana-grupos {
  margin: 8px 0 0;
  padding-left: 18px;
}

.semana-fala {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  margin-top: 12px;
}

.semana-fala-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.semana-fala .col {
  width: 100%;
  background: var(--verde);
  border-radius: 8px 8px 0 0;
  min-height: 4px;
}

.semana-fala .col-vazia {
  background: var(--trilho);
}

.semana-fala-dia {
  margin-top: 4px;
  font-size: var(--fonte-xs);
  font-weight: 800;
  color: var(--texto-suave);
}

.historico-fala {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 132px;
  margin-top: 12px;
}

.historico-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.historico-acerto,
.historico-treino {
  width: 100%;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
}

.historico-acerto {
  background: var(--azul);
}

.historico-treino {
  background: var(--verde);
}

.historico-vazio {
  background: var(--trilho);
}

.historico-dia {
  font-size: var(--fonte-xs);
  font-weight: 800;
  color: var(--texto-suave);
}

.historico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  color: var(--texto-suave);
  font-size: var(--fonte-sm);
}

.painel-erro {
  margin-top: 12px;
}

.fala-atalho {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--laranja) 55%, var(--borda));
}

.fala-timer {
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
  text-align: center;
}

.fala {
  display: block;
  border-radius: 16px;
  padding: 12px 14px;
  margin: 12px 0;
  max-width: 100%;
}

.fala-npc {
  background: var(--azul-claro);
  border: 2px solid color-mix(in srgb, var(--azul) 35%, var(--borda));
}

.fala-voce {
  background: var(--verde-claro);
  border: 2px solid color-mix(in srgb, var(--verde) 40%, var(--borda));
}

.fala-en {
  display: block;
  font-weight: 900;
  font-size: var(--fonte-lg);
}

.fala-pt {
  display: block;
  color: var(--texto-suave);
  font-weight: 800;
  margin-top: 4px;
}

.sombra-frase {
  font-size: var(--fonte-xl);
  font-weight: 900;
  line-height: 1.6;
}

.sombra-ok {
  color: var(--verde-texto);
}

.sombra-falta {
  background: var(--verm-claro);
  color: var(--vermelho-texto);
  border-radius: 6px;
  padding: 0 4px;
}

.nota-grande {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.ia-aviso {
  font-weight: 800;
  color: var(--texto-suave);
}

.fila-botoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .logo {
    font-size: 19px;
  }

  .topo .pilula {
    padding: 5px 10px;
    font-size: var(--fonte-sm);
    gap: 4px;
  }
}