:root {
  --fundo: #f4f5f7;               /* surface-page */
  --superficie: #ffffff;
  --superficie-2: #f6f7f9;         /* surface-muted: painel da tradução */
  --campo: #ffffff;
  --texto: #111827;                /* ink */
  --suave: #4b5563;                /* ink-muted: contador, legendas (4.5:1 ou mais) */
  --placeholder: #6b7280;          /* ink-placeholder: 4.6:1 em branco e em surface-muted */
  --linha: #e3e6ea;
  --linha-forte: #8a94a3;          /* border-strong: contorno de controlos (3:1 ou mais) */
  --marinho: #0f2942;              /* header-bg */
  --primario: #0f2942;             /* brand */
  --primario-hover: #1b3d60;
  --primario-texto: #ffffff;
  --acento: #0f2942;
  --ativo: #e4ecf5;                /* brand-soft: língua escolhida */
  --selecao: #d9e7f7;
  --perigo: #c62828;
  --perigo-suave: #fdecec;
  --verde: #1e7a46;                /* success */
  --verde-suave: #e6f4ec;
  --ambar: #946200;
  --ambar-suave: #fff5da;
  --cinza-suave: #eef0f3;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-painel: 0 1px 2px rgba(15, 41, 66, .06), 0 4px 16px rgba(15, 41, 66, .06); /* shadow-card */
  --raio: var(--r-md);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;

  /* letra: uma só escala de oito tamanhos (12, 14, 16, 18, 20, 24, 32, 40 px) */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;
  --t-3xl: 2.5rem;
  /* cantos: pequeno (selos), médio (botões, campos, cartões), grande (painéis e diálogos) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-redondo: 999px;
  /* elevação */
  --sombra-alta: 0 20px 60px rgba(16, 24, 40, .25);
  --sombra-cima: 0 -4px 16px rgba(16, 24, 40, .06);
  --foco: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent);
  --foco-perigo: 0 0 0 3px color-mix(in srgb, var(--perigo) 16%, transparent);
  /* cores que andavam soltas */
  --branco: #ffffff;
  --vermelho-marca: #c8102e;       /* accent-red: traço do logótipo, aba ativa; nunca em blocos */
  --dourado: #f2b705;              /* accent-gold: barra da quota; nunca como cor de texto */
  --foco-cor: #2f6fb3;             /* anel de foco de 2 px */
  --codigo-fundo: #0b1e31;
  --codigo-texto: #e6edf5;
  /* espaços: múltiplos de 4 px (4, 8, 12, 16, 20, 24, 32, 40, 48, 64) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
button, a, label { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column; /* o conteúdo estica e o rodapé fica sempre no fundo */
  font: 16px/1.55 var(--fonte);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- topo */

.topo {
  /* o cabeçalho tem cores próprias: fundo azul-marinho da marca, texto claro. Para mudar o tom, basta mexer aqui. */
  --topo-fundo: var(--marinho);
  --topo-texto: var(--branco);
  --topo-suave: rgba(255, 255, 255, .74);
  --topo-realce: rgba(255, 255, 255, .10);
  --topo-ativo: rgba(255, 255, 255, .16);
  --topo-linha: rgba(255, 255, 255, .22);
  position: sticky; top: 0; z-index: 10;
  background: var(--topo-fundo); color: var(--topo-texto);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  box-shadow: var(--sombra-painel);
}
.topo-conteudo {
  max-width: 1200px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 8px 24px;
}
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; }
.logo {
  position: relative; width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center;
  padding-bottom: 3px; background: var(--marinho); color: var(--branco); font-weight: 800; font-size: var(--t-sm);
  border: 1px solid rgba(255, 255, 255, .08);
}
.logo::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 6px; height: 2px;
  border-radius: var(--r-sm); background: var(--vermelho-marca);
}
.nome-marca { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
.nome-marca b { font-weight: 400; }

.utilizador { font-weight: 600; color: var(--suave); margin-right: 4px; }

.segmentos { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.segmentos button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--t-base); color: var(--suave);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  min-height: var(--altura-controlo); padding: 0 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.segmentos a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 600; font-size: var(--t-base); color: var(--suave);
  border: 1px solid transparent; border-radius: var(--r-md); min-height: var(--altura-controlo); padding: 0 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.segmentos button svg, .segmentos a svg { width: 18px; height: 18px; }
.segmentos button:hover, .segmentos a:hover { background: var(--superficie-2); color: var(--texto); }
.segmentos button[aria-selected="true"], .segmentos button[aria-pressed="true"], .segmentos a[aria-current="page"] {
  background: var(--ativo); color: var(--acento); border-color: color-mix(in srgb, var(--acento) 18%, transparent);
}
/* dentro do cabeçalho escuro: marca, separadores, conta e botões em cores claras */
.topo .marca, .topo .nome-marca { color: var(--topo-texto); }
.topo .logo { background: var(--branco); color: var(--marinho); border-color: transparent; }
.topo .segmentos button, .topo .segmentos a { color: var(--topo-suave); }
.topo .segmentos button:hover, .topo .segmentos a:hover { background: var(--topo-realce); color: var(--topo-texto); }
.topo .segmentos button[aria-selected="true"], .topo .segmentos button[aria-pressed="true"], .topo .segmentos a[aria-current="page"] {
  background: var(--topo-ativo); color: var(--topo-texto); border-color: var(--topo-linha);
}
.topo .etiqueta { background: var(--topo-ativo); color: var(--topo-texto); }
.topo .utilizador, .topo .conta-nome { color: var(--topo-suave); }
.topo .secundario { background: transparent; color: var(--topo-texto); border-color: var(--topo-linha); }
.topo .secundario:hover { background: var(--topo-realce); }
.topo .icone-botao { color: var(--topo-suave); }
.topo .icone-botao:hover { background: var(--topo-realce); color: var(--topo-texto); }
.topo .contagem { background: var(--topo-ativo); color: var(--topo-texto); }
.topo :focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }

main { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 24px 72px; }

/* ---------------------------------------------------------------- comuns */

.discreto { color: var(--suave); font-size: var(--t-sm); }
.erro { color: var(--perigo); margin: 0; }
.vazio { text-align: center; color: var(--suave); padding: 40px 0; }
mark { background: var(--selecao); color: inherit; border-radius: var(--r-sm); padding: 0 2px; }
code { font-size: .875em; background: var(--cinza-suave); padding: 2px 8px; border-radius: var(--r-sm); }

/* botões: três tipos (principal, secundário, discreto) e dois tamanhos (normal 40 px, .pequeno 32 px).
   A altura é a mesma dos campos de texto, para ficarem alinhados na mesma linha. Não se muda noutro sítio. */
:root { --altura-controlo: 40px; --altura-pequena: 32px; }
.primario, .secundario, .icone-botao {
  font: inherit; font-weight: 600; font-size: var(--t-sm); line-height: 1; cursor: pointer;
  border-radius: var(--r-md); min-height: var(--altura-controlo); padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.primario { border: 1px solid var(--primario); background: var(--primario); color: var(--primario-texto); }
.primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-forte); }
.secundario:hover { background: var(--superficie-2); }
.icone-botao { padding: 0 12px; background: transparent; color: var(--suave); border: 1px solid transparent; }
.icone-botao:hover { background: var(--cinza-suave); color: var(--texto); }

.primario svg, .secundario svg, .icone-botao svg { width: 16px; height: 16px; }
button:disabled { opacity: .45; cursor: default; }

.selo {
  font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--cinza-suave); color: var(--suave);
}
.selo.conf-alta, .selo.ok, .selo.estado-validada { background: var(--verde-suave); color: var(--verde); }
.selo.conf-média, .selo.conf-media, .selo.estado-pendente { background: var(--ambar-suave); color: var(--ambar); }
.selo.conf-baixa { background: var(--perigo-suave); color: var(--perigo); }
.selo.variante { background: var(--ativo); color: var(--acento); }
.notas.grafias b { font-weight: 600; color: var(--texto); }

/* ---------------------------------------------------------------- idiomas */

.idiomas { display: flex; align-items: center; justify-content: center; gap: 8px; }
.idioma {
  min-width: 140px; text-align: center; font-weight: 600; padding: 8px 16px;
  border-radius: var(--r-md); color: var(--texto);
}
.seletor-lingua {
  font: inherit; font-weight: 600; color: var(--texto); cursor: pointer;
  appearance: none; -webkit-appearance: none; border-radius: var(--r-md); padding: 0 32px 0 12px;
  min-height: var(--altura-controlo);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s;
}
.seletor-lingua:hover, .seletor-lingua:focus-visible { background-color: var(--cinza-suave); }

.campo select#q-lingua { max-width: 280px; }
.z-linguas { margin-bottom: 16px; }
.trocar {
  width: var(--altura-controlo); height: var(--altura-controlo); flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--suave);
  transition: background .15s, color .15s;
}
.trocar:hover { background: var(--cinza-suave); color: var(--texto); }
.trocar svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- dicionário */

.pesquisa-caixa { position: relative; }
.pesquisa-caixa { margin-top: 12px; }
.pesquisa-caixa .icone, .procura-caixa .icone {
  position: absolute; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none;
}
.pesquisa-caixa .icone { left: 18px; width: 20px; height: 20px; }
.pesquisa {
  width: 100%; padding: 16px 16px 16px 52px; font: inherit; font-size: var(--t-lg);
  border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-painel); transition: border-color .15s, box-shadow .15s;
}
.pesquisa:focus {
  outline: none; border-color: var(--acento);
  box-shadow: var(--foco);
}

.resultados { margin-top: 20px; display: grid; gap: 12px; }

.palavra-dia {
  display: grid; justify-items: start; gap: 8px; margin-top: 20px; padding: 24px 24px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--ativo), var(--superficie) 70%);
  border: 1px solid color-mix(in srgb, var(--acento) 15%, var(--linha)); box-shadow: var(--sombra);
}
.palavra-dia .rotulo { margin: 0; color: var(--acento); }
.palavra-dia-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.palavra-dia h2 { margin: 0; font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; }
.palavra-dia .traducao { margin: 0; }
.palavra-dia-exemplo {
  display: grid; gap: 2px; width: 100%; margin: 4px 0; padding: 8px 16px;
  background: var(--superficie); border-left: 3px solid var(--acento); border-radius: var(--r-md);
}
.palavra-dia .secundario { margin-top: 4px; }

.entrada {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-md);
  padding: 20px 24px; box-shadow: var(--sombra);
}
.entrada header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 8px; }
.entrada h2 { margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.formas { color: var(--suave); font-style: italic; }
.classe {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--suave); background: var(--cinza-suave); padding: 2px 8px; border-radius: var(--r-sm);
}
.selos { margin-left: auto; display: flex; gap: 8px; }
.traducao { margin: 8px 0 0; font-size: var(--t-md); font-weight: 600; color: var(--acento); }
.seta { color: var(--suave); margin-right: 2px; }
.notas { color: var(--suave); margin: 8px 0 0; font-size: var(--t-sm); }
.exemplos { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.exemplos li {
  display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--superficie-2); border-left: 2px solid var(--linha-forte);
}
.trad { color: var(--suave); }

/* ---------------------------------------------------------------- tradutor */

.tradutor {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg);
  box-shadow: var(--sombra-painel); overflow: hidden;
}
.tradutor-topo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 8px; border-bottom: 1px solid var(--linha);
}
.idioma-rotulo { justify-self: start; padding: 8px 16px; font-weight: 600; color: var(--texto); }
.tradutor-topo .idioma-rotulo:last-child { padding-left: 24px; }
.tradutor-corpo { display: grid; grid-template-columns: 1fr 1fr; }
.lado { display: flex; flex-direction: column; min-height: 380px; }
.lado + .lado { border-left: 1px solid var(--linha); }
.lado.saida { background: var(--superficie-2); }
textarea, .texto-saida {
  flex: 1; border: 0; resize: none; outline: none; background: transparent; color: var(--texto);
  font: inherit; font-size: var(--t-xl); line-height: 1.45; padding: 20px 24px; white-space: pre-wrap;
}
textarea::placeholder, .texto-saida .discreto { color: var(--suave); font-size: var(--t-xl); opacity: .75; }
.rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 24px; min-height: 56px; }
.saida .rodape { justify-content: flex-end; }
.saida .rodape .estado-trad { margin-right: auto; }
.a-atualizar { opacity: .5; transition: opacity .2s; }
.rodape-acoes { display: flex; align-items: center; gap: 4px; }

/* conta do utilizador */
.conta-topo { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.conta-nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--suave); }
.uso-traducoes { margin: 8px 4px 0; font-size: var(--t-sm); color: var(--suave); }
.ligacao {
  font: inherit; font-weight: 600; color: var(--acento); cursor: pointer;
  background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.botao-limite { margin-top: 16px; font-size: var(--t-base); }
.dialogo {
  width: min(420px, calc(100% - 32px)); padding: 0; border: 1px solid var(--linha); border-radius: var(--r-lg);
  color: var(--texto); background: var(--superficie); box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgba(15, 23, 42, .45); }
.dialogo form { display: grid; gap: 16px; padding: 24px; }
.dialogo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialogo-topo h2 { margin: 0; font-size: var(--t-lg); }
.dialogo p { margin: 0; }
.conta-modos { display: flex; width: 100%; }
.conta-modos button { flex: 1; justify-content: center; }
.conta-corpo { display: grid; gap: 16px; }
.conta-corpo .campo { gap: 4px; }
.rotulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ligacao.pequena { font-size: var(--t-sm); text-decoration: none; }
.ligacao.pequena:hover { text-decoration: underline; }
.senha-caixa { position: relative; }
#conta-form .senha-caixa input { padding-right: 48px; }
.mostrar-senha {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--suave);
}
.mostrar-senha:hover { background: var(--cinza-suave); color: var(--texto); }
.mostrar-senha svg { width: 18px; height: 18px; }
.mostrar-senha .olho-fechado, .mostrar-senha[aria-pressed="true"] .olho-aberto { display: none; }
.mostrar-senha[aria-pressed="true"] .olho-fechado { display: block; }
.campo-erro { font-size: var(--t-sm); color: var(--perigo); }
.campo-erro:empty { display: none; }
#conta-form input[aria-invalid="true"] { border-color: var(--perigo); }
#conta-form input[aria-invalid="true"]:focus { box-shadow: var(--foco-perigo); }
.forca { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); }
.forca-barra { flex: 1; height: 4px; border-radius: var(--r-sm); background: var(--cinza-suave); overflow: hidden; }
.forca-barra i { display: block; height: 100%; width: 0; background: var(--perigo); transition: width .2s, background-color .2s; }
.forca-texto { color: var(--suave); white-space: nowrap; min-width: 7.5em; text-align: right; }
.forca[data-nivel="1"] i { width: 15%; }
.forca[data-nivel="2"] i { width: 35%; }
.forca[data-nivel="3"] i { width: 60%; background: var(--ambar); }
.forca[data-nivel="4"] i { width: 82%; background: var(--verde); }
.forca[data-nivel="5"] i { width: 100%; background: var(--verde); }
.forca[data-nivel="1"] .forca-texto, .forca[data-nivel="2"] .forca-texto { color: var(--perigo); }
.forca[data-nivel="3"] .forca-texto { color: var(--ambar); }
.forca[data-nivel="4"] .forca-texto, .forca[data-nivel="5"] .forca-texto { color: var(--verde); }
.aviso-maiusculas { font-size: var(--t-xs); color: var(--ambar); }
.nota-conta { font-size: var(--t-xs); line-height: 1.45; }
.nota-conta a, #conta-explicacao a { color: var(--acento); font-weight: 600; }
.conta-voltar { justify-self: center; font-size: var(--t-sm); }
.conta-sucesso { display: grid; justify-items: center; gap: 16px; padding: 8px 0 2px; text-align: center; }
.conta-sucesso p { color: var(--suave); line-height: 1.5; }
.conta-sucesso .primario { width: 100%; }
.conta-sucesso-icone {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-xl); font-weight: 700; background: var(--verde-suave); color: var(--verde);
}

/* admin: utilizadores */

.limites-form .campo input { max-width: 220px; }

.conta-limite .campo { width: min(280px, 100%); }
.registo.inativa { opacity: .72; }

.estado-trad { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); font-size: var(--t-sm); }
.girador {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--linha-forte); border-top-color: var(--acento); animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

#t-notas { margin-top: 16px; display: grid; gap: 8px; }
#t-notas .notas { margin: 0 4px; }
.incertezas {
  padding: 12px 16px; border-radius: var(--r-md); font-size: var(--t-base);
  background: var(--ambar-suave); border: 1px solid color-mix(in srgb, var(--ambar) 25%, transparent);
}
.incertezas strong { display: block; margin-bottom: 4px; color: var(--ambar); }
.incertezas ul { margin: 0; padding-left: 16px; }

/* ---------------------------------------------------------------- admin */

.campo { display: grid; gap: 8px; }
.rotulo { font-size: var(--t-xs); font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.campo input:not([type="radio"]):not([type="checkbox"]), .campo textarea, .campo select {
  min-height: var(--altura-controlo);
  font: inherit; font-size: var(--t-base); color: var(--texto); background: var(--campo);
  border: 1px solid var(--linha-forte); border-radius: var(--r-md); padding: 8px 12px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; min-height: 64px; }
.campo textarea::placeholder { font-size: inherit; }  /* o tamanho grande é só para o tradutor */
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--acento);
  box-shadow: var(--foco);
}

.a-cabecalho { margin-bottom: 16px; }
.a-cabecalho p { margin: 4px 0 0; }

.procura-caixa .icone { left: 12px; width: 18px; height: 18px; }

.registo {
  display: grid; gap: 16px; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--sombra);
}
.registo header { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes .perigo { margin-left: auto; }

/* quizzes */

.opcoes { display: grid; gap: 8px; }
.opcao { display: flex; align-items: center; gap: 8px; }
.opcao input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primario); cursor: pointer; }
.opcao .q-opcao { flex: 1; }

.q-rodape .erro { margin-right: auto; }

/* ---------------------------------------------------------------- quiz público */

.quiz-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.quiz-item {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-md); box-shadow: var(--sombra);
}
.quiz-capa { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--superficie-2); }
.quiz-item-corpo { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 16px 20px 20px; }
.quiz-item h2 { margin: 0 0 4px; font-size: var(--t-md); font-weight: 700; }
.quiz-item p { margin: 0; }
.quiz-item-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quiz-imagem {
  display: block; width: 100%; max-height: 320px; object-fit: contain; margin: 8px 0 4px;
  border-radius: var(--r-md); background: var(--superficie-2); border: 1px solid var(--linha);
}

.quiz-jogo { max-width: 720px; margin: 0 auto; }
.quiz-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.quiz-topo .icone-botao { padding-left: 0; }
.progresso { height: 6px; margin-bottom: 16px; border-radius: var(--r-redondo); overflow: hidden; background: var(--cinza-suave); }
.progresso > div { height: 100%; width: 0; border-radius: inherit; background: var(--primario); transition: width .3s; }
.quiz-cartao {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--sombra-painel);
}
.quiz-cartao .rotulo { margin: 0; }
.quiz-pergunta { margin: 8px 0 20px; font-size: var(--t-xl); font-weight: 700; line-height: 1.35; }
.quiz-opcoes { display: grid; gap: 8px; }
.quiz-opcao {
  font: inherit; font-size: var(--t-base); text-align: left; cursor: pointer; padding: 16px 16px;
  color: var(--texto); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-md);
  transition: border-color .15s, background .15s;
}
.quiz-opcao:hover:not(:disabled) { border-color: var(--acento); background: var(--ativo); }
.quiz-opcao:disabled { opacity: 1; cursor: default; }
.quiz-opcao.certa { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); font-weight: 600; }
.quiz-opcao.errada { border-color: var(--perigo); background: var(--perigo-suave); color: var(--perigo); }
.quiz-rodape { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 42px; }
.quiz-rodape .primario { margin-left: auto; }
.quiz-feedback { margin: 0; font-weight: 600; }
.quiz-feedback.certo { color: var(--verde); }
.quiz-feedback.errado { color: var(--perigo); }
.quiz-resultado { text-align: center; }
.quiz-pontuacao { margin: 4px 0; font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.02em; color: var(--acento); }
.quiz-resultado .acoes { justify-content: center; margin-top: 16px; }
#z-revisao { margin-top: 20px; }
.revisao p { margin: 2px 0; }
.revisao .rotulo { margin-bottom: 4px; }
.revisao-pergunta { font-weight: 600; }
.revisao.certa { border-left: 3px solid var(--verde); }
.revisao.errada { border-left: 3px solid var(--perigo); }

/* ---------------------------------------------------------------- páginas institucionais */

.pagina { max-width: 760px; margin: 0 auto; }
.pagina-cabecalho { margin: 8px 0 28px; }
.pagina-cabecalho .rotulo { margin: 0; }
.pagina-cabecalho h1 { margin: 8px 0 8px; font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -.02em; }
.lead { margin: 0; font-size: var(--t-md); color: var(--suave); }
.pagina h2 { margin: 32px 0 8px; font-size: var(--t-lg); letter-spacing: -.01em; }
.pagina ul { padding-left: 20px; }
.pagina li { margin-bottom: 8px; }
.pagina a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.pagina .primario, .pagina .secundario { text-decoration: none; }

.pagina ul.valores {
  list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
}
.valores li {
  display: grid; gap: 2px; margin: 0; padding: 16px 16px; border-radius: var(--r-md);
  background: var(--superficie); border: 1px solid var(--linha); border-top: 3px solid var(--acento);
}
.valores span { color: var(--suave); font-size: var(--t-base); }
.aviso-info {
  margin: 28px 0 0; padding: 16px 16px; border-radius: var(--r-md);
  background: var(--ativo); border: 1px solid color-mix(in srgb, var(--acento) 15%, transparent);
}

.passos { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 12px; counter-reset: passo; }
.passos li {
  position: relative; margin: 0; padding: 16px 20px 16px 64px; counter-increment: passo;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-md); box-shadow: var(--sombra);
}
.passos li::before {
  content: counter(passo); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%; font-size: var(--t-sm); font-weight: 700;
  background: var(--primario); color: var(--primario-texto);
}
.passos h3 { margin: 0 0 4px; font-size: var(--t-base); }
.passos p { margin: 0; color: var(--suave); }

.faq { display: grid; gap: 8px; }
.faq details { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 0 16px; }
.faq summary { position: relative; padding: 16px 28px 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--t-xl); font-weight: 400; color: var(--suave);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: var(--suave); }

.cartao-form {
  display: grid; gap: 16px; padding: 24px; border-radius: var(--r-lg);
  background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-painel);
}
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dica { margin: -6px 0 0; }
.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.form-rodape p { margin: 0; }
.form-rodape .primario { margin-left: auto; }
.sucesso { justify-items: center; text-align: center; padding: 36px 24px; }
.sucesso h2 { margin: 0; }
.sucesso p { margin: 0; }
.icone-sucesso {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  font-size: var(--t-xl); background: var(--verde-suave); color: var(--verde);
}

.registo.nao-lida { border-left: 3px solid var(--ambar); }

.rodape-site { margin-top: 32px; background: var(--superficie); border-top: 1px solid var(--linha); }
.rodape-conteudo {
  max-width: 1200px; margin: 0 auto; padding: 24px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
}
.rodape-conteudo .logo { width: 28px; height: 28px; font-size: var(--t-xs); }
.rodape-conteudo .logo::after { left: 8px; right: 8px; bottom: 5px; }
.rodape-conteudo .nome-marca { font-size: var(--t-base); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rodape-links a { font-size: var(--t-sm); font-weight: 500; color: var(--suave); text-decoration: none; }
.rodape-links a:hover { color: var(--texto); }

/* ---------------------------------------------------------------- telemóvel */

@media (max-width: 720px) {
  :root { --altura-controlo: 44px; }
  :root { --barra-inferior: calc(64px + env(safe-area-inset-bottom)); }
  body:not(.painel-admin) { padding-bottom: var(--barra-inferior); }
  h1 { font-size: var(--t-lg); }
  main { padding: 16px 12px 28px; }

  /* topo: marca em cima, abas numa barra fixa em baixo (como numa app) */
  .topo-conteudo { flex-wrap: wrap; gap: 8px 8px; padding: 8px 16px; }
  .nome-marca { font-size: var(--t-md); }
  .logo { width: 30px; height: 30px; font-size: var(--t-xs); }
  .logo::after { left: 8px; right: 8px; bottom: 5px; }
  .topo .segmentos {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--linha);
    box-shadow: var(--sombra-cima);
  }
  .topo .segmentos button, .topo .segmentos a {
    flex-direction: column; justify-content: center; gap: 3px; min-height: 50px;
    padding: 4px; font-size: var(--t-xs); border: 0; border-radius: var(--r-md);
  }
  /* no telemóvel os separadores saem do cabeçalho azul para uma barra branca em baixo: voltam às cores claras,
     senão o texto claro do cabeçalho ficava branco sobre branco */
  .topo .segmentos button, .topo .segmentos a { color: var(--suave); }
  .topo .segmentos button:hover, .topo .segmentos a:hover { background: var(--superficie-2); color: var(--texto); }
  .topo .segmentos :focus-visible { outline-color: var(--acento); }
  .topo .segmentos button svg, .topo .segmentos a svg { width: 22px; height: 22px; }
  .topo .segmentos button[aria-selected="true"], .topo .segmentos a[aria-current="page"] {
    background: var(--ativo); color: var(--acento); border: 0;
  }
  
  .conta-topo { margin-left: auto; }
  .conta-nome { max-width: 110px; font-size: var(--t-sm); }
    .utilizador { display: none; }

  /* tradutor */
  .tradutor-corpo { grid-template-columns: 1fr; }
  .tradutor-topo { padding: 4px 8px; }
  .idioma-rotulo { padding: 8px 8px; font-size: var(--t-base); }
  .tradutor-topo .idioma-rotulo:last-child { padding-left: 8px; justify-self: end; }
  .lado { min-height: 150px; }
  .lado + .lado { border-left: 0; border-top: 1px solid var(--linha); }
  textarea, .texto-saida { padding: 16px 16px; }
  textarea, .texto-saida, textarea::placeholder, .texto-saida .discreto { font-size: var(--t-md); }
  .rodape { min-height: 50px; padding: 8px 8px 8px 16px; }

  /* dicionário */
  .idioma { min-width: 0; flex: 1; padding: 8px 4px; }
  .pesquisa { padding: 16px 16px 16px 48px; font-size: var(--t-base); }
  .pesquisa-caixa .icone { left: 15px; }
  .entrada { padding: 16px; }
  .entrada h2 { font-size: var(--t-lg); }
  .palavra-dia { padding: 16px 16px; }
  .palavra-dia h2 { font-size: var(--t-xl); }
  .palavra-dia .secundario { width: 100%; }
  .selos { margin-left: 0; width: 100%; }
  .traducao { font-size: var(--t-base); }

  /* quiz */
  .quiz-grelha { grid-template-columns: 1fr; }
  .quiz-cartao { padding: 16px 16px; }
  .quiz-imagem { max-height: 240px; }
  .quiz-pergunta { margin-bottom: 16px; font-size: var(--t-lg); }
  .quiz-opcao { min-height: 52px; padding: 16px; }
  .quiz-rodape { flex-direction: column; align-items: stretch; }
  .quiz-rodape .primario { width: 100%; margin-left: 0; }
  .quiz-pontuacao { font-size: var(--t-3xl); }
  .quiz-resultado .acoes { flex-direction: column; }
  .quiz-resultado .acoes button { width: 100%; }

  /* admin */
  
  .registo { padding: 16px; }
  
  .a-barra .filtros { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .a-barra .filtros button { flex: none; }
  .acoes .primario, .acoes .secundario { flex: 1; }
  .a-cabecalho-acoes .primario { width: 100%; }
  

  /* páginas institucionais e rodapé */
  .pagina-cabecalho { margin: 8px 0 24px; }
  .pagina-cabecalho h1 { font-size: var(--t-xl); }
  .lead { font-size: var(--t-base); }
  .pagina h2 { margin-top: 28px; font-size: var(--t-md); }
  
  .passos li { padding: 16px 16px 16px 56px; }
  .passos li::before { left: 16px; top: 16px; }
  .cartao-form { padding: 16px 16px; }
  .campos-2 { grid-template-columns: 1fr; }
  .form-rodape .primario { width: 100%; }
  .rodape-site { margin-top: 20px; }
  .rodape-conteudo { flex-direction: column; align-items: flex-start; padding: 16px 16px; }
  .rodape-links { gap: 8px 16px; }
}

/* ---------------------------------------------------------------- avaliar traduções */
.avaliar { margin-top: 12px; display: grid; gap: 8px; }
.avaliar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; }
.avaliar-pergunta { color: var(--suave); font-size: var(--t-sm); }
.avaliar-botao {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-redondo);
}
.avaliar-botao:hover { background: var(--superficie-2); }
.avaliar-botao svg { width: 16px; height: 16px; }
.avaliar-botao[data-util="1"][aria-pressed="true"] { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
.avaliar-botao[data-util="-1"][aria-pressed="true"] { background: var(--perigo-suave); border-color: var(--perigo); color: var(--perigo); }
.avaliar-msg { color: var(--suave); font-size: var(--t-sm); }
.sugestao { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--superficie); }

@media (max-width: 720px) {
  .avaliar-linha .ligacao { flex-basis: 100%; text-align: left; }
}

/* ---------------------------------------------------------------- admin: revisão do dicionário */

/* ---------------------------------------------------------------- admin: topo e filtros */

.topo-admin .marca { flex: none; }

.topo-admin .utilizador { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* todos os controlos da barra de filtros com a mesma altura */

.a-barra .segmentos { gap: 4px; }
.a-barra .segmentos button, .a-barra .secundario {
  min-height: var(--altura-controlo); font-size: var(--t-sm);
}
.a-barra .secundario .contagem { margin-left: 2px; }

@media (max-width: 900px) {
  
    
  .topo-admin .utilizador { max-width: 120px; font-size: var(--t-sm); }
}

/* ---------------------------------------------------------------- admin: barra lateral */

@media (max-width: 900px) {  /* os filtros do admin deslizam em vez de serem cortados */
  
  .a-barra .filtros { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .a-barra .filtros::-webkit-scrollbar { display: none; }
  .a-barra .filtros button { flex: none; }
  
}

/* ---------------------------------------------------------------- páginas de palavra */
.entrada-ligacao { color: var(--acento); font-weight: 600; font-size: var(--t-sm); text-decoration: none; }
.entrada-ligacao:hover { text-decoration: underline; }

.palavra .lead { font-size: var(--t-lg); color: var(--texto); }
.palavra .selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.palavra .rotulo a { color: inherit; text-decoration: none; }
.formas-palavra { margin: 16px 0 0; }
.formas-palavra .rotulo { margin-right: 8px; }
.lista-palavra { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 8px; }
.lista-palavra a { color: var(--acento); font-weight: 600; text-decoration: none; }
.lista-palavra a:hover { text-decoration: underline; }
.acoes-palavra { margin-top: 24px; }

/* dentro das páginas de conteúdo, os botões mantêm as suas cores (a regra das ligações não se aplica) */
.pagina a.primario { color: var(--primario-texto); }
.pagina a.secundario { color: var(--texto); }

/* ================================================================ admin: sistema visual
   Uma só regra de espaçamento para todas as páginas do painel: cada página é uma pilha de blocos com o mesmo
   intervalo, e cada cartão arruma o seu conteúdo com o mesmo intervalo interno. Nada de margens soltas. */

.painel { display: grid; gap: 20px; align-content: start; max-width: 1060px; }
.painel > * { margin: 0; }
.painel .painel { max-width: none; }

.admin-corpo .a-cabecalho { margin: 0 0 4px; }
.admin-corpo .a-cabecalho h1 { font-size: var(--t-xl); letter-spacing: -.02em; }
.admin-corpo .a-cabecalho p { margin: 8px 0 0; max-width: 72ch; font-size: var(--t-base); }

.admin-corpo .registo {
  gap: 16px; padding: 24px 24px; border-radius: var(--r-lg); box-shadow: var(--sombra-painel);
}
.admin-corpo .registo > * { margin: 0; }
.admin-corpo .resultados { margin: 0; gap: 16px; }

/* cabeçalho de cartão: título à esquerda, estado ou ação à direita */

.cartao-topo > .primario, .cartao-topo > .secundario, .cartao-topo > .selo { flex: none; }

/* pares nome/valor: configuração, resultados, dados de uma chave */
.dados {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; margin: 0;
  border-top: 1px solid var(--linha);
}
.dados dt, .dados dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.dados dt { color: var(--suave); font-size: var(--t-sm); font-weight: 600; padding-right: 16px; }
.dados dd { font-size: var(--t-base); min-width: 0; overflow-wrap: anywhere; }
.dados dd .lista-simples { margin: 0; }
.dados code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em;
  background: var(--cinza-suave); padding: 1px 8px; border-radius: var(--r-sm);
}

/* formulários numa linha: campos e o botão alinhados em baixo */

.nota { font-size: var(--t-sm); }

/* rodapé de cartão: controlos à esquerda, ações à direita */

/* resultado de uma tradução de teste */

/* a chave acabada de criar */
.admin-corpo .aviso-info p { margin: 0 0 8px; }

/* documentação da API */

.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th {
  text-align: left; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); padding: 8px 12px; border-bottom: 1px solid var(--linha-forte); background: var(--superficie-2);
}
.tabela td { padding: 8px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela td:first-child { white-space: nowrap; font-weight: 600; }

/* conjugações dadas por falantes: pessoas nas linhas, tempos nas colunas */
.tabela.conjugacao tbody th { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); background: transparent; color: var(--suave); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela.conjugacao { margin: 0; }
.conjugacao-caixa { margin: 8px 0 0; }
.conjugacao-caixa summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); display: flex; align-items: center; gap: 8px; }
.conjugacao-caixa[open] summary { margin-bottom: 8px; }
.pagina.palavra .tabela.conjugacao { margin-bottom: 8px; }

/* cabeçalho do painel: a conta e as ações vão para a direita, discretas */

.topo-admin .utilizador { font-size: var(--t-sm); font-weight: 500; margin-right: 4px; }

@media (max-width: 900px) {
  
  
  .painel { gap: 16px; }
  .admin-corpo .registo { padding: 16px; }
  
  .campo-botao .primario { width: 100%; }
  
  .dados { grid-template-columns: 1fr; }
  .dados dt { padding-bottom: 0; border-bottom: 0; }
  .dados dd { padding-top: 2px; }
  
  .tabela { display: block; overflow-x: auto; }
}
.topo a.conta-nome { text-decoration: none; }
.topo a.conta-nome:hover { color: var(--topo-texto); }

/* campos de uma linha com a altura exata dos botões (as caixas de texto de várias linhas ficam livres) */
.campo input:not([type="radio"]):not([type="checkbox"]), .campo select {
  height: var(--altura-controlo); padding-top: 0; padding-bottom: 0;
}

/* texto só para leitores de ecrã e motores de busca: existe, mas não se vê */
.so-leitores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- admin: cartões de tradução e de revisão */

.selo.estado-rejeitada { background: var(--perigo-suave); color: var(--perigo); }

/* original à esquerda, tradução editável à direita: o mesmo par que o tradutor mostra */

/* o rodapé tem a ação perigosa à esquerda, a mensagem ao meio e as ações a seguir, a principal no fim */
.cartao-rodape.acoes { flex-wrap: wrap; justify-content: flex-end; }  /* ações à direita, mesmo sem ação perigosa */
.cartao-rodape.acoes .perigo { margin-left: 0; margin-right: auto; }
.cartao-rodape.acoes .a-msg:not(:empty) { margin-right: auto; }
.cartao-rodape.acoes > .a-msg:only-child { margin: 0; }

/* avaliações dos utilizadores dentro do cartão */

.a-sugestao .acoes { margin-top: 4px; }

/* revisão do dicionário */
.revisao-cartao .cartao-topo .rotulo { margin: 0 0 4px; }


/* ---------------------------------------------------------------- área de utilizador (/conta) */
.conta-separadores { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--linha); }
.conta-separadores button {
  font: inherit; font-weight: 600; font-size: var(--t-sm); color: var(--suave); cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 12px;
}
.conta-separadores button:hover { color: var(--texto); }
.conta-separadores button[aria-pressed="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.conta-lista { display: grid; gap: 12px; margin-top: 16px; }
.conta-item { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 16px 20px; }
.conta-item p { margin: 0; }
.conta-item-meta { font-size: var(--t-sm); color: var(--suave); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.conta-item-meta .selo { margin-left: auto; }
.conta-item-texto { margin-top: 8px !important; color: var(--suave); }
.conta-item-traducao { margin-top: 4px !important; font-size: var(--t-md); }
.conta-item .acoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.conta-paginas { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; }
.conta .cartao-form + .cartao-form { margin-top: 20px; }
.conta .cartao-form h2 { margin: 0 0 4px; }
.conta .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.conta-perigo { border-color: var(--perigo-suave); }
.conta-perigo .perigo { color: var(--perigo); border-color: var(--perigo-suave); }
.entrada-favorito { margin-left: 16px; }

/* ---------------------------------------------------------------- logotipo e parceiros (definidos no painel) */
.logo-img { width: 34px; height: 34px; object-fit: contain; border-radius: var(--r-md); background: var(--branco); flex: none; }
.rodape-conteudo .logo-img { width: 28px; height: 28px; }
.faixa-parceiros { width: 100%; box-sizing: border-box; max-width: 1200px; margin: 32px auto 0; padding-top: 0; }
.cartao-parceiros {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--sombra-painel);
  padding: 20px 24px; display: grid; gap: 16px;
}
.cartao-parceiros-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cartao-parceiros h2 { margin: 0; font-size: var(--t-lg); color: var(--primario); }
.cartao-parceiros-topo a { font-size: var(--t-sm); color: var(--primario); font-weight: 600; text-decoration: none; }
.cartao-parceiros-topo a:hover { text-decoration: underline; }
.cartao-parceiros ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cartao-parceiros li > a, .cartao-parceiros li > span, .cartao-parceiros li > img {
  display: flex; align-items: center; justify-content: center; min-height: 64px; min-width: 140px; padding: 8px 16px; box-sizing: border-box;
  border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--superficie-2); color: var(--texto); text-decoration: none;
}
.cartao-parceiros li > a:hover { border-color: var(--primario); }
.cartao-parceiros li span { font-weight: 600; color: var(--texto); }
.cartao-parceiros li a > span { border: 0; padding: 0; min-height: 0; min-width: 0; background: none; }
.cartao-parceiros img { display: block; max-height: 40px; max-width: 140px; object-fit: contain; }
.cartao-parceiros li a > img { border: 0; padding: 0; min-height: 0; min-width: 0; background: none; }
@media (max-width: 720px) {
  .cartao-parceiros { padding: 16px; }
  .cartao-parceiros li > a, .cartao-parceiros li > span, .cartao-parceiros li > img { min-width: 120px; min-height: 56px; }
}
.faixa-parceiros + .rodape-site { margin-top: 20px; }
.lista-parceiros { display: grid; gap: 16px; margin: 24px 0; padding: 0; list-style: none; }
.lista-parceiros .parceiro {
  display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-md);
}
.lista-parceiros img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.lista-parceiros h3 { margin: 0; font-size: var(--t-md); }
.lista-parceiros p { margin: 4px 0 0; }


/* ================================================================ sistema de design */

/* foco visível e igual em todos os controlos */
:focus-visible { outline: 2px solid var(--foco-cor); outline-offset: 2px; }
.topo :focus-visible { outline-color: var(--branco); }

/* cabeçalho: aba ativa sem caixa, com um traço vermelho por baixo */
@media (min-width: 721px) {
  .topo .segmentos button[aria-selected="true"], .topo .segmentos a[aria-current="page"] {
    position: relative; background: transparent; border-color: transparent; color: var(--topo-texto);
  }
  .topo .segmentos button[aria-selected="true"]::after, .topo .segmentos a[aria-current="page"]::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--vermelho-marca);
  }
}

/* conta: avatar com iniciais e menu */
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-redondo); display: grid; place-items: center; flex: none;
  background: var(--ativo); color: var(--primario); font: 700 var(--t-xs)/1 var(--fonte); letter-spacing: .02em;
  border: 0; cursor: pointer; text-decoration: none;
}
.conta-menu-caixa { position: relative; }
.conta-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--r-md);
  box-shadow: var(--sombra-alta); display: grid;
}
.conta-menu p { margin: 0; padding: 8px 10px 6px; font-size: var(--t-xs); color: var(--suave); overflow: hidden; text-overflow: ellipsis; }
.conta-menu a, .conta-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; cursor: pointer;
  font: 500 var(--t-sm)/1.4 var(--fonte); color: var(--texto); text-decoration: none; border-radius: var(--r-sm);
}
.conta-menu a:hover, .conta-menu button:hover { background: var(--ativo); }
.conta-menu .conta-menu-nome { font-size: var(--t-sm); font-weight: 600; color: var(--texto); white-space: nowrap; }
.conta-menu :focus-visible { outline-color: var(--foco-cor); }

/* página: o tradutor ao centro */
main { max-width: 1120px; }
#tradutor.painel, #dicionario.painel, #quiz.painel { max-width: 1120px; margin: 0 auto; width: 100%; }

/* tradutor */
.tradutor-topo { grid-template-columns: 1fr 48px 1fr; padding: 12px 16px; gap: 8px; }
.tradutor-topo .idioma-rotulo, .tradutor-topo .idioma-rotulo:last-child { padding: 0; justify-self: stretch; min-width: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  font: 600 var(--t-sm)/20px var(--fonte); color: var(--suave); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-redondo); padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--texto); border-color: var(--linha-forte); }
.chip[aria-pressed="true"] { background: var(--ativo); border-color: transparent; color: var(--primario); }
select.chip.mais {
  appearance: none; -webkit-appearance: none; border-color: var(--linha-forte); padding-right: 30px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
}
select.chip.mais.ativo { background-color: var(--ativo); border-color: transparent; color: var(--primario); }
.seletor-movel { display: none; }
.tradutor-topo .trocar {
  justify-self: center; border-radius: var(--r-redondo); border-color: var(--linha-forte); color: var(--texto);
  background: var(--superficie);
}
textarea, .texto-saida { font-size: 22px; line-height: 32px; padding: 24px; }
textarea::placeholder, .texto-saida .discreto { color: var(--placeholder); font-size: 22px; opacity: 1; }
.lado { min-height: 320px; }
.rodape { padding: 8px 16px 16px 24px; }
.rodape .discreto, #t-contador { font-size: 13px; line-height: 18px; color: var(--suave); }
.rodape-entrada { gap: 16px; }
.quota { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--suave); min-width: 0; }
.quota .ligacao { font-size: 13px; }
.quota-barra { width: 64px; height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; flex: none; }
.quota-barra span { display: block; height: 100%; background: var(--dourado); }
#t-traduzir { margin-left: auto; border-radius: var(--r-md); gap: 8px; padding: 0 18px; }
kbd.atalho {
  font: 500 11px/16px var(--fonte); opacity: .75; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px;
}
@media (pointer: coarse) { kbd.atalho { display: none; } }
.saida .rodape .icone-botao { color: var(--suave); }

/* abaixo de 768 px: painéis empilhados e dois seletores com ⇄ entre eles */
@media (max-width: 767px) {
  .tradutor-corpo { grid-template-columns: 1fr; }
  .lado + .lado { border-left: 0; border-top: 1px solid var(--linha); }
  .lado { min-height: 200px; }
  .tradutor-topo .chips { display: none; }
  .seletor-movel {
    display: block; width: 100%; font: 600 var(--t-sm)/20px var(--fonte); color: var(--texto); cursor: pointer;
    appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 30px 0 14px;
    border: 1px solid var(--linha-forte); border-radius: var(--r-redondo);
    background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  }
  textarea, .texto-saida, textarea::placeholder, .texto-saida .discreto { font-size: 20px; line-height: 28px; }
  textarea, .texto-saida { padding: 16px; }
  .rodape { padding: 8px 12px 12px 16px; flex-wrap: wrap; }
}

/* alinhamento: o conteúdo segue o cabeçalho (1200 px, as mesmas margens), para o cartão do tradutor ir do
   logótipo até ao avatar */
.topo-conteudo, .rodape-conteudo, main, .faixa-parceiros { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
/* o tradutor, o dicionário e o quiz ocupam a largura toda do conteúdo, como o cabeçalho */
#tradutor.painel, #dicionario.painel, #quiz.painel { max-width: none; }
@media (max-width: 720px) {
  .topo-conteudo, .rodape-conteudo, main, .faixa-parceiros { padding-left: 16px; padding-right: 16px; }
}


/* ---------------------------------------------------------------- a minha conta */
.pagina.conta { max-width: none; }
.pagina.conta .pagina-cabecalho, .pagina.conta .conta-separadores { max-width: none; }
.pagina.conta .cartao-form { max-width: 640px; }
.conta-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; }
.conta-item {
  display: grid; gap: 8px; padding: 16px 20px; border-radius: var(--r-lg); box-shadow: var(--sombra-painel);
}
.conta-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conta-item-meta { font-size: 13px; line-height: 18px; color: var(--suave); }
.conta-item-texto { color: var(--suave); font-size: var(--t-base); }
.conta-item-traducao { color: var(--texto); font-size: var(--t-md); font-weight: 500; line-height: 1.45; }
.conta-item-aviso { color: var(--suave); font-size: var(--t-sm); background: var(--superficie-2); border-radius: var(--r-md); padding: 10px 12px; }
.conta-item.rejeitada { box-shadow: none; background: var(--superficie-2); }
.conta-item .selo { flex: none; }
.selo.mau { background: var(--perigo-suave); color: var(--perigo); }
.conta-antes summary { cursor: pointer; font-size: 13px; color: var(--suave); }
.conta-antes p { margin: 6px 0 0; font-size: var(--t-sm); color: var(--suave); }
.conta-item-acoes { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; border-top: 1px solid var(--linha); padding-top: 8px; }
.conta-item-acoes .icone-botao { min-height: 32px; font-size: 13px; }
.conta-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }


.conta-destaque {
  display: flex; align-items: center; gap: 20px; padding: 24px; margin-bottom: 24px;
  background: var(--ativo); border-radius: var(--r-lg);
}
.conta-destaque .rotulo { color: var(--primario); }
.conta-destaque h1 { color: var(--primario); }
.conta-avatar-grande {
  width: 64px; height: 64px; border-radius: var(--r-redondo); display: grid; place-items: center; flex: none;
  background: var(--primario); color: var(--branco); font: 700 var(--t-lg)/1 var(--fonte); letter-spacing: .02em;
  position: relative;
}
.conta-avatar-grande::after {  /* o traço vermelho do logótipo */
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 13px; height: 2px; border-radius: 2px; background: var(--vermelho-marca);
}
.conta-avatar-grande:empty { display: none; }
.conta-quota { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.conta-quota .lead { margin: 0; font-size: var(--t-sm); color: var(--primario); }
.conta-quota-barra { width: 160px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--primario) 14%, transparent); overflow: hidden; flex: none; }
.conta-quota-barra span { display: block; height: 100%; border-radius: 6px; background: var(--primario); }
.conta-quota-barra span.alerta { background: var(--dourado); }
.conta-separadores button[aria-pressed="true"] { color: var(--primario); border-bottom-color: var(--vermelho-marca); }
.conta-direcao {
  display: inline-block; background: var(--ativo); color: var(--primario); font-weight: 600;
  border-radius: var(--r-redondo); padding: 2px 10px; margin-right: 6px;
}
.conta-item { border-left: 4px solid var(--linha); }
.conta-item.estado-ok { border-left-color: var(--verde); }
.conta-item.estado-espera { border-left-color: var(--dourado); }
.conta-item.estado-mau { border-left-color: var(--perigo); }
.conta-item.estado-favorito { border-left-color: var(--primario); }
.selo.espera { background: var(--ambar-suave); color: var(--ambar); }
.conta-item-acoes .icone-botao { color: var(--primario); }
.conta-item-acoes .icone-botao:hover { background: var(--ativo); }
@media (max-width: 720px) {
  .conta-destaque { padding: 16px; gap: 14px; }
  .conta-avatar-grande { width: 48px; height: 48px; font-size: var(--t-base); }
  .conta-avatar-grande::after { left: 16px; right: 16px; bottom: 9px; }
  .conta-quota-barra { width: 96px; }
  .conta-item-topo { flex-wrap: wrap; }
}


/* formulário de contacto: erro por campo (email, WhatsApp) e sugestão de domínio («Quis dizer …@gmail.com?») */
#c-form input[aria-invalid="true"] { border-color: var(--perigo); }
#c-form input[aria-invalid="true"]:focus { box-shadow: var(--foco-perigo); }
#c-form .campo-erro.campo-sugestao { color: var(--suave); }
#c-form .campo-erro .ligacao { display: inline; width: auto; font-size: inherit; padding: 0; }


/* diálogo de conta: marca no topo, título com a razão, alternar entre entrar e criar no fundo */
.dialogo-conta { width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.dialogo-conta form { gap: 20px; padding: 24px 28px 28px; }
.conta-marca {
  width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; position: relative;
  background: var(--primario); color: var(--branco); font: 700 var(--t-sm)/1 var(--fonte);
}
.conta-marca::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--vermelho-marca); }
.conta-cabeca { display: grid; gap: 6px; }
.conta-cabeca h2 { margin: 0; font-size: var(--t-xl); line-height: 1.2; color: var(--primario); }
.conta-cabeca .discreto { font-size: var(--t-sm); line-height: 1.5; }
.conta-cabeca .discreto:empty { display: none; }
.conta-vantagens { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--texto); }
.conta-vantagens li { display: flex; gap: 8px; align-items: baseline; }
.conta-vantagens li::before { content: "✓"; color: var(--verde); font-weight: 700; }
.conta-alerta { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--perigo-suave); color: var(--perigo); font-size: var(--t-sm); line-height: 1.45; }
.conta-alerta[hidden] { display: none; }
#conta-enviar { width: 100%; min-height: 44px; }
.conta-trocar { margin: 0; text-align: center; font-size: var(--t-sm); color: var(--suave); }
.campo-ok { font-size: var(--t-xs); color: var(--verde); }
.campo-erro.campo-sugestao { color: var(--suave); }
.campo-erro .ligacao { display: inline; width: auto; font-size: inherit; }
/* com o erro da palavra-passe à vista, o medidor não repete a mesma coisa */
.campo:has([data-erro="senha"]:not(:empty)) .forca-texto { display: none; }
@media (max-width: 720px) {
  .dialogo-conta form { padding: 20px; }
}

/* a minha conta: sem sessão, resumo em números, filtros e definições */
.conta-sem-sessao {
  display: grid; justify-items: center; gap: 12px; max-width: 480px; margin: 48px auto; padding: 32px 24px; text-align: center;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--sombra-painel);
}
.conta-sem-sessao h1 { margin: 0; font-size: var(--t-2xl); color: var(--primario); }
.conta-sem-sessao p { margin: 0; line-height: 1.5; }
.conta-sem-sessao .acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.conta-avatar-vazio { background: var(--superficie-2); color: var(--suave); }
.conta-avatar-vazio::after { display: none; }
.conta-desde { margin: 2px 0 0; font-size: var(--t-sm); color: var(--suave); }
.conta-sair { margin-left: auto; align-self: flex-start; }
.conta-estatisticas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.conta-estat {
  display: grid; gap: 2px; justify-items: start; text-align: left; padding: 14px 16px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--linha); border-radius: var(--r-md);
  font: inherit; color: var(--suave);
}
.conta-estat:hover { border-color: var(--linha-forte); }
.conta-estat b { font-size: var(--t-2xl); line-height: 1.1; color: var(--texto); }
.conta-estat span { font-size: var(--t-sm); }
.conta-estat.estat-ok { border-left-color: var(--verde); }
.conta-estat.estat-espera { border-left-color: var(--dourado); }
.conta-estat.estat-favorito { border-left-color: var(--primario); }
.conta-barra { display: grid; gap: 12px; margin-bottom: 16px; }
.conta-barra p { margin: 0; }
.chip .contagem:empty { display: none; }
.chip .contagem { margin-left: 4px; color: var(--suave); font-weight: 500; }
.conta-definicoes { display: grid; gap: 20px; max-width: 640px; }
.conta-definicoes .cartao-form h2 { margin: 0; font-size: var(--t-lg); }
.cartao-form-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.conta-definicoes input[readonly] { background: var(--superficie-2); color: var(--suave); }
.pequeno { font-size: var(--t-xs); line-height: 1.45; margin: 0; }
details.conta-perigo { gap: 0; }
details.conta-perigo summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.conta-perigo summary::-webkit-details-marker { display: none; }
details.conta-perigo summary::after { content: "Mostrar"; font-size: var(--t-sm); font-weight: 600; color: var(--perigo); }
details.conta-perigo[open] summary::after { content: "Esconder"; }
details.conta-perigo .conta-perigo-titulo { font-size: var(--t-lg); font-weight: 700; color: var(--perigo); }
details.conta-perigo form { display: grid; gap: 16px; margin-top: 16px; }
.conta-item-acoes a.icone-botao { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 720px) {
  .conta-estatisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conta-estat b { font-size: var(--t-xl); }
  .conta-destaque { flex-wrap: wrap; }
  .conta-sair { order: 3; }
}

/* rodapé no telemóvel: ligações com altura de toque confortável (24 px ou mais) */
@media (max-width: 720px) {
  .rodape-links a { display: inline-block; padding: 6px 2px; }
}

/* janela de confirmação da página da conta */
#c-modal form { display: grid; gap: 14px; padding: 24px; }
#c-modal h2 { margin: 0; font-size: var(--t-lg); }
#c-modal .acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.primario.perigo-cheio { background: var(--perigo); border-color: var(--perigo); }

/* prévia palavra a palavra enquanto a IA responde: cinzenta e meio transparente, para não parecer a tradução */
.previa { color: var(--suave); opacity: .55; }
.previa-falta { font-style: italic; opacity: .7; }