/* Italiano B1 — estilo mobile-first pensado para o iPhone */
:root {
  --bg: #f7f4ee;
  --card: #ffffff;
  --ink: #1d1c1a;
  --mudo: #6e6a62;
  --linha: #e6e0d5;
  --verde: #1f6b4f;
  --verde-escuro: #17523c;
  --verde-claro: #e2f0e8;
  --terra: #c0503a;
  --terra-claro: #fbe8e3;
  --ouro: #c98f2a;
  --ouro-claro: #fbf1dc;
  --azul: #2c5a85;
  --raio: 16px;
  --sombra: 0 1px 2px rgba(40, 30, 10, .06), 0 4px 14px rgba(40, 30, 10, .05);
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --topo-seguro: env(safe-area-inset-top, 0px);
  --base-segura: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans);
  padding-bottom: calc(76px + var(--base-segura));
}
body.sem-abas { padding-bottom: calc(24px + var(--base-segura)); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--verde); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; }
h1 { font: 700 1.6rem/1.2 var(--serif); letter-spacing: -.01em; }
h2 { font: 700 1.3rem/1.25 var(--serif); }
h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.1em; }
h4 { font-size: .95rem; margin-top: .9em; }
p { margin: 0 0 .5em; }
ul, ol { margin: .2em 0 .7em; padding-left: 1.25em; }
li { margin: .2em 0; }

.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.mudo { color: var(--mudo); }
.pequeno { font-size: .85rem; }
.centro { text-align: center; }
.oculto { display: none !important; }
.riscado { text-decoration: line-through; color: var(--terra); }
.erro-txt { color: var(--terra); font-weight: 600; }

/* ---------------------------------------------------------------- telas */
.tela { max-width: 680px; margin: 0 auto; padding: calc(14px + var(--topo-seguro)) 16px 24px; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.topo-sessao { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; position: sticky; top: 0; background: var(--bg); padding: calc(6px + var(--topo-seguro)) 0 8px; z-index: 5; margin-top: calc(-14px - var(--topo-seguro)); }
.topo-sessao h1 { font-size: 1.2rem; margin: 0; }
.topo-sessao p { margin: 0; }
.icone-btn { border: 0; background: var(--card); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sombra); flex: none; }
.secao-titulo { font-size: 1.1rem; margin: 20px 0 10px; font-family: var(--sans); }

.avatar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--verde); color: #fff; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.pequeno { width: 38px; height: 38px; font-size: 1rem; }

/* --------------------------------------------------------------- cartões */
.cartao { background: var(--card); border-radius: var(--raio); padding: 16px; margin: 0 0 12px; box-shadow: var(--sombra); }
.cartao.suave { background: #fbf9f4; box-shadow: none; border: 1px solid var(--linha); }
.cartao.vazio { text-align: center; padding: 28px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cartao.atencao { background: var(--ouro-claro); box-shadow: none; }
.cartao.atencao h3 { margin-top: 0; color: #8a5d12; }
.cartao.texto { font-size: 1.05rem; }
.cartao.escolha { width: 100%; text-align: left; border: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.cartao.escolha .chip { grid-column: 1 / -1; justify-self: start; }
.cartao.veredito.ok { background: var(--verde-claro); }
.cartao.veredito.baixa { background: var(--terra-claro); }
.destaque { background: var(--verde-claro); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }

.destaque-prova { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: center; background: linear-gradient(135deg, #fff 0%, #f3f8f4 100%); }
.grande-num { font: 700 1.9rem/1.1 var(--serif); margin: 2px 0; color: var(--verde-escuro); }
.plano p { margin: 2px 0; }
.em-dia { color: var(--verde); font-weight: 600; }
.atrasada { color: var(--terra); font-weight: 600; }

/* --------------------------------------------------------------- botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 14px; padding: 12px 18px; background: var(--verde); color: #fff; font-weight: 650; text-decoration: none; min-height: 46px; transition: transform .08s, opacity .2s; }
.botao:active { transform: scale(.98); }
.botao:disabled { opacity: .5; }
.botao.grande { width: 100%; min-height: 54px; font-size: 1.05rem; margin: 10px 0; }
.botao.secundario { background: var(--verde-claro); color: var(--verde-escuro); }
.botao.fantasma { background: transparent; color: var(--verde); width: 100%; }
.botao.pequeno { min-height: 36px; padding: 6px 12px; font-size: .9rem; border-radius: 10px; }
.link { background: none; border: 0; color: var(--verde); padding: 4px 0; font-weight: 600; }
.linha-botoes { display: flex; gap: 10px; margin-top: 12px; }
.linha-botoes .botao { flex: 1; }
.linha { display: flex; align-items: center; gap: 10px; }
.linha p { margin: 0; }

.chip { display: inline-flex; align-items: center; border: 1px solid var(--linha); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: .85rem; margin: 0 6px 6px 0; }
.chip.ativo { background: var(--verde); color: #fff; border-color: var(--verde); }
.chip.estatico { background: var(--ouro-claro); border-color: transparent; color: #7a5310; font-weight: 600; }
.chips { margin: 10px 0; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-escuro); margin-left: 6px; vertical-align: middle; }
.badge.baixa { background: var(--terra-claro); color: var(--terra); }
.badge.ok { background: var(--verde-claro); color: var(--verde-escuro); }
.badge.novo { background: var(--ouro-claro); color: #7a5310; position: absolute; top: 12px; right: 12px; margin: 0; }

.barra { height: 8px; border-radius: 99px; background: #ece6da; overflow: hidden; margin: 6px 0; }
.barra span { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .4s ease; }
.barra.fina { height: 6px; margin: 0; }
.barra.alerta span { background: var(--terra); }

/* ---------------------------------------------------------------- listas */
.lista { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.item { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 0; border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); color: var(--ink); min-height: 60px; }
.item.estatico { cursor: default; }
.item-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--verde-claro); color: var(--verde-escuro); display: flex; align-items: center; justify-content: center; flex: none; }
.item-num { width: 36px; height: 36px; border-radius: 10px; background: #f0ebe1; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.item-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.item-txt strong { font-weight: 650; }
.item > .ic:last-child { color: #b9b2a5; }
.item.feito { opacity: .75; }
.item.feito .item-ic { background: var(--verde); color: #fff; }
.item.bloqueada { opacity: .55; }
.item.bloqueada .item-ic { background: #eee9df; color: var(--mudo); }
.item.atual { outline: 2px solid var(--verde); }
.item.atual .item-num { background: var(--verde); color: #fff; }
.item.inativo { opacity: .6; }
.pontos { display: flex; gap: 4px; margin-top: 4px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: #e3ddd1; }
.ponto.feito { background: var(--verde); }

.fase { background: var(--card); border-radius: var(--raio); margin-bottom: 12px; box-shadow: var(--sombra); overflow: hidden; }
.fase > summary { list-style: none; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.fase > summary::-webkit-details-marker { display: none; }
.fase .lista { padding: 0 10px 10px; }
.fase .item { box-shadow: none; border: 1px solid var(--linha); }

.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.atalho { background: var(--card); border: 0; border-radius: 14px; padding: 14px 10px; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--verde-escuro); }

/* ---------------------------------------------------------------- abas */
.abas { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + var(--base-segura)); z-index: 20; }
.abas.oculta { display: none; }
.aba { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: #8d877b; font-size: .7rem; font-weight: 600; padding: 4px 0; }
.aba.ativa { color: var(--verde); }

/* ------------------------------------------------------------- carregando */
.carregando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; text-align: center; min-height: 40vh; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--verde-claro); border-top-color: var(--verde); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.toast { position: fixed; left: 50%; top: calc(12px + var(--topo-seguro)); transform: translate(-50%, -140%); background: #2a2925; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: .92rem; max-width: 92vw; z-index: 99; transition: transform .25s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.toast.visivel { transform: translate(-50%, 0); }
.toast.erro { background: var(--terra); }

.modal-fundo { position: fixed; inset: 0; background: rgba(20, 18, 14, .35); display: flex; align-items: flex-end; justify-content: center; z-index: 50; opacity: 0; transition: opacity .2s; }
.modal-fundo.visivel { opacity: 1; }
.modal { background: var(--bg); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + var(--base-segura)); transform: translateY(20px); transition: transform .2s; }
.modal-fundo.visivel .modal { transform: none; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-topo h3 { margin: 0; }
.form { display: flex; flex-direction: column; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--mudo); flex: 1; }
.campo input, .campo select { font-weight: 400; color: var(--ink); }
.linha-campos { display: flex; gap: 10px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid var(--linha); background: #fff; border-radius: 12px; padding: 12px; font-size: 16px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.login-marca { text-align: center; }
.logo { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 22px; background: linear-gradient(135deg, var(--verde) 0%, var(--verde) 33%, #fff 33%, #fff 66%, var(--terra) 66%); display: flex; align-items: center; justify-content: center; font: 800 1.6rem var(--serif); color: var(--ink); box-shadow: var(--sombra); }
.login-form { display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------- conteúdo */
.md p { margin: 0 0 .55em; }
.md ul { margin: .2em 0 .6em; }
.titulo-licao { margin: 4px 0 10px; }
.texto-it { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; }
.texto-it p { margin: 0 0 .7em; }
.frase-it { font-family: var(--serif); font-size: 1.15rem; line-height: 1.7; margin: 8px 0 12px; }
.exemplos { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.exemplo { display: flex; gap: 10px; align-items: flex-start; }
.exemplo .it { font-family: var(--serif); font-size: 1.05rem; margin: 0; }
.exemplo .pt { color: var(--mudo); font-size: .9rem; margin: 0; }
.tabela-rolagem { overflow-x: auto; margin: 8px 0; }
.tabela { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabela th, .tabela td { padding: 7px 8px; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela th { background: #f5f1e8; font-weight: 700; }
.tabela td.ok { color: var(--verde); font-weight: 700; }
.tabela td.baixa { color: var(--terra); font-weight: 700; }
.recolhivel { background: var(--card); border-radius: 14px; margin: 0 0 12px; box-shadow: var(--sombra); }
.recolhivel > summary { padding: 12px 14px; font-weight: 650; cursor: pointer; }
.recolhivel-corpo { padding: 0 14px 12px; }
.glossario { list-style: none; padding: 0; margin: 0; }
.glossario li { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.glossario li:last-child { border: 0; }
.dicas, .perguntas-guia { margin-top: 6px; }

.audio-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--verde-claro); color: var(--verde-escuro); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.audio-btn.mini { width: 26px; height: 26px; vertical-align: middle; }
.audio-btn.tocando { background: var(--verde); color: #fff; animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 6px var(--verde-claro); } }

/* -------------------------------------------------------------- exercícios */
.ex-topo { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 2px; }
.cartao.ex { margin-top: 12px; }
.enunciado { font-weight: 600; }
.opcoes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.opcoes.lado { flex-direction: row; flex-wrap: wrap; }
.opcoes.lado .opcao { flex: 1 1 auto; text-align: center; }
.opcoes.compactas .opcao { padding: 10px 12px; }
.opcao { text-align: left; border: 1.5px solid var(--linha); background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 1rem; min-height: 46px; transition: background .15s, border-color .15s; }
.opcao.marcada { border-color: var(--azul); background: #eaf1f8; }
.opcao.correta { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); font-weight: 650; }
.opcao.errada { border-color: var(--terra); background: var(--terra-claro); color: var(--terra); }
.opcao:disabled { opacity: 1; }
.lacuna { display: inline-block; border: 0; border-bottom: 2px solid var(--verde); border-radius: 0; padding: 2px 4px; margin: 0 4px; font-family: var(--serif); font-size: 1.1rem; background: var(--verde-claro); min-width: 5ch; }
.lacuna.correta { border-color: var(--verde); }
.lacuna.errada { border-color: var(--terra); background: var(--terra-claro); }
.ordenar-resposta { min-height: 54px; border: 2px dashed var(--linha); border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ordenar-resposta.correta { border-color: var(--verde); background: var(--verde-claro); }
.ordenar-resposta.errada { border-color: var(--terra); background: var(--terra-claro); }
.ordenar-banco { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip-palavra { border: 1px solid var(--linha); background: #fff; border-radius: 10px; padding: 8px 12px; font-family: var(--serif); font-size: 1.05rem; box-shadow: 0 1px 0 var(--linha); }
.feedback { border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: .95rem; }
.feedback.certo { background: var(--verde-claro); }
.feedback.errado { background: var(--terra-claro); }
.feedback p { margin: .25em 0 0; }
.perguntas { display: flex; flex-direction: column; gap: 4px; }
.pergunta { background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); margin-bottom: 8px; }
.cloze-texto { line-height: 2; }
.lacuna-cloze { display: inline-block; background: #efe9dd; border-radius: 8px; padding: 0 6px; font-weight: 600; font-family: var(--sans); font-size: .95rem; }
.lacuna-cloze.preenchida { background: #eaf1f8; color: var(--azul); }
.lacuna-cloze.certa { background: var(--verde-claro); color: var(--verde-escuro); }
.lacuna-cloze.errada { background: var(--terra-claro); color: var(--terra); }

.resumo { text-align: center; }
.resumo-num { font: 700 2.2rem var(--serif); margin: 0; color: var(--verde-escuro); }

/* -------------------------------------------------------------- correções */
.nota-grande { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 4px; background: var(--card); border-radius: var(--raio); padding: 16px; margin: 6px 0 12px; box-shadow: var(--sombra); }
.nota-num { font: 800 3rem/1 var(--serif); }
.nota-max { font-size: 1.2rem; color: var(--mudo); }
.nota-legenda { width: 100%; text-align: center; font-size: .85rem; font-weight: 600; }
.nota-grande.ok .nota-num, .nota-grande.ok .nota-legenda { color: var(--verde); }
.nota-grande.baixa .nota-num, .nota-grande.baixa .nota-legenda { color: var(--terra); }
.criterios { background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); margin-bottom: 12px; }
.criterio { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: .92rem; }
.lista-erros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.erro-item p { margin: 2px 0; }
.certo-txt { color: var(--verde-escuro); font-size: 1.1rem; }
.errado-txt { color: var(--terra); }
.resultado .md { margin: 8px 0; }

/* -------------------------------------------------------------- gravação */
.gravador { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 4px; }
.rec-btn { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--terra); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(192, 80, 58, .35); }
.gravador.gravando .rec-btn { animation: gravando 1.3s ease-in-out infinite; background: #a83f2b; }
.gravador.feito .rec-btn { background: var(--verde); box-shadow: 0 6px 18px rgba(31, 107, 79, .3); }
@keyframes gravando { 50% { box-shadow: 0 0 0 12px rgba(192, 80, 58, .18); } }
.rec-info { display: flex; align-items: center; gap: 10px; }
.rec-tempo { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-nivel { width: 90px; height: 6px; border-radius: 9px; background: #ece6da; overflow: hidden; }
.rec-nivel span { display: block; height: 100%; width: 0; background: var(--terra); transition: width .1s; }
.rec-acoes { display: flex; gap: 8px; }

/* ------------------------------------------------------------- player/escuta */
.player { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player .barra { width: 100%; }
.play-grande { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(31, 107, 79, .3); }
.play-grande:disabled { background: #b8c9c0; box-shadow: none; }
.transcricao { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fala { display: flex; gap: 10px; align-items: flex-start; background: var(--card); padding: 10px 12px; border-radius: 14px; box-shadow: var(--sombra); }
.fala p { margin: 0; font-family: var(--serif); font-size: 1.02rem; }
.fala-B { background: #f9f6ef; }

.editor { min-height: 220px; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; resize: vertical; }
.contador { font-size: .85rem; font-weight: 600; margin: 6px 2px; }
.contador.ok { color: var(--verde); }
.contador.abaixo, .contador.acima { color: var(--ouro); }

.cab-parte { position: sticky; top: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: calc(8px + var(--topo-seguro)) 0 8px; margin-top: calc(-14px - var(--topo-seguro)); }
.cronometro { font-variant-numeric: tabular-nums; font-weight: 800; background: var(--card); padding: 4px 10px; border-radius: 10px; box-shadow: var(--sombra); }
.cronometro.alerta { color: var(--terra); }

.parabens { text-align: center; padding-top: 18vh; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.selo { width: 96px; height: 96px; border-radius: 50%; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: 0 10px 26px rgba(31, 107, 79, .3); }
.parabens .botao { width: 100%; max-width: 420px; }

/* ------------------------------------------------------------------- SRS */
.cartao.srs { position: relative; text-align: center; padding: 26px 16px; margin-top: 12px; }
.srs-frente { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 16px; }
.srs-it { font: 700 1.9rem/1.2 var(--serif); margin: 0; }
.srs-pt { font-size: 1.3rem; font-weight: 650; color: var(--verde-escuro); }
.srs-verso .exemplo { text-align: left; background: #faf8f3; padding: 10px; border-radius: 12px; margin: 10px 0 14px; }
.srs-notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.srs-nota { border: 0; border-radius: 12px; padding: 12px 4px; font-weight: 700; font-size: .9rem; color: #fff; }
.srs-nota.n1 { background: var(--terra); }
.srs-nota.n2 { background: var(--ouro); }
.srs-nota.n3 { background: var(--verde); }
.srs-nota.n4 { background: var(--azul); }

.cartao.sombra { margin-top: 8px; }
.sombra-frase { font: 600 1.3rem/1.4 var(--serif); margin: 0; }
.sombra-palavras { font: 1.15rem/1.6 var(--serif); }
.sombra-palavras .ok { color: var(--verde-escuro); }
.sombra-palavras .falta { color: var(--terra); text-decoration: underline wavy; }

/* ------------------------------------------------------------------ chat */
.chat-tela { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0; }
.chat { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 260px; }
.bolha { max-width: 86%; padding: 10px 12px; border-radius: 18px; box-shadow: var(--sombra); }
.bolha p { margin: 0; }
.bolha.ia { background: var(--card); align-self: flex-start; border-bottom-left-radius: 6px; font-family: var(--serif); font-size: 1.05rem; }
.bolha.eu { background: var(--verde); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.bolha.pensando { opacity: .6; }
.traducao { color: var(--mudo); font-family: var(--sans); font-size: .9rem; margin-top: 4px !important; }
.correcao { background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 10px; padding: 6px 8px; margin-top: 6px; font-size: .9rem; }
.chat-rodape { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(247, 244, 238, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linha); padding: 4px 16px calc(10px + var(--base-segura)); max-width: 680px; margin: 0 auto; }
.chat-rodape.ocupado { opacity: .5; pointer-events: none; }
.chat-rodape .gravador { padding-top: 8px; }
.chat-rodape .rec-btn { width: 64px; height: 64px; }

/* -------------------------------------------------------------- progresso */
.grade-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.grade-stats.duas { margin: 8px 0; }
.stat { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: var(--sombra); color: var(--verde-escuro); }
.cartao .stat { background: #faf8f3; box-shadow: none; }
.stat p { margin: 0; color: var(--ink); }
.stat-num { font: 800 1.6rem/1.1 var(--serif); margin-top: 4px !important; }
.grafico-barras { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.gb-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.gb-barra { width: 100%; background: #d9d2c4; border-radius: 3px 3px 0 0; min-height: 2px; }
.gb-barra.meta { background: var(--verde); }

.vocab .vocab-item { display: flex; gap: 12px; align-items: flex-start; background: var(--card); padding: 12px; border-radius: 14px; box-shadow: var(--sombra); }
.vocab-item p { margin: 0 0 2px; }
.vocab-item .it { font-family: var(--serif); }
.vocab-item .nota { color: #7a5310; background: var(--ouro-claro); border-radius: 8px; padding: 4px 8px; margin-top: 4px; }

.corpo-sessao > .botao.grande:last-child { margin-bottom: 30px; }

@media (min-width: 700px) {
  .tela { padding-top: 28px; }
  .modal-fundo { align-items: center; }
  .modal { border-radius: 20px; }
}