/* O SITE JEGUEBOT — a cara da tela da chave do app (docs/specs/site-esboco/, aprovado em 03/10).
 * As cores são as do Tema.qml; as fontes, as do app (licença OFL em fontes/).
 * A escala: 4·8·12·16·24·32·48. Nenhum texto quebra linha. */
@font-face { font-family: "Chakra Petch"; font-weight: 500; src: url(fontes/ChakraPetch-Medium.ttf); font-display: swap; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; src: url(fontes/ChakraPetch-SemiBold.ttf); font-display: swap; }
@font-face { font-family: "Chakra Petch"; font-weight: 700 800; src: url(fontes/ChakraPetch-Bold.ttf); font-display: swap; }
@font-face { font-family: "Azeret Mono"; font-weight: 100 900; src: url(fontes/AzeretMono-var.ttf); font-display: swap; }

:root {
  --noite: #08090B; --chumbo-alto: #23262C; --chumbo-baixo: #0E1013;
  --poco: #0A0B0E; --luz: #333841; --linha: #22262C;
  --sangue: #B3141C; --sangue-vivo: #E01A24; --sangue-texto: #FF5A5F;
  --verde: #3DD68C; --branco: #EDF0F4; --prata: #C3CAD4; --cinza: #8D949E; --fraco: #868E99;
}
* { box-sizing: border-box; margin: 0; white-space: nowrap; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  background: var(--noite); color: var(--branco);
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; padding: 0 16px;
  -webkit-font-smoothing: antialiased;
}
body::before {               /* o halo de sangue atrás do mascote */
  content: ""; position: fixed; left: 50%; top: 150px; width: 520px; height: 520px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(224,26,36,.30) 0, rgba(224,26,36,.08) 45%, rgba(224,26,36,0) 70%);
}
button, input { font: inherit; color: inherit; }
.coluna { width: 100%; max-width: 412px; position: relative; padding: 48px 0 32px; }

.cabeca { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 32px; }
.cabeca img { width: 104px; height: 104px; }
.cabeca h1 { font-size: 34px; font-weight: 700; letter-spacing: 5px; line-height: 1; }

.cartao {
  display: block; border: 1px solid var(--linha); border-radius: 16px; padding: 24px; position: relative;
  background: linear-gradient(var(--chumbo-alto), var(--chumbo-baixo));
  box-shadow: 0 5px 0 -1px rgba(0,0,0,.16), 0 3px 0 0 rgba(0,0,0,.12);
}
.cartao::before {            /* o fio de luz na aresta de cima */
  content: ""; position: absolute; left: 11px; right: 11px; top: 0; height: 1px; background: var(--luz); opacity: .75;
}
.rotulo { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.2px; color: var(--cinza); text-transform: uppercase; }
.rotulo.verde { color: var(--verde); }

.poco {
  display: block; width: 100%; height: 48px; margin-top: 16px; padding: 0 16px;
  background: var(--poco); border: 1px solid rgba(0,0,0,.85); border-radius: 10px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.55);
  color: var(--branco); font: 600 13px "Azeret Mono", monospace; letter-spacing: .8px; outline: none;
}
.poco:focus { border-color: var(--verde); }
.poco::placeholder { color: var(--fraco); }

.mensagem { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--sangue-texto); overflow: hidden; text-overflow: ellipsis; }
.mensagem.prata { color: var(--prata); white-space: normal; }

.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; margin-top: 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid #47080B; color: #fff; text-decoration: none;
  background: linear-gradient(var(--sangue-vivo), var(--sangue));
  font: 800 15px "Chakra Petch", system-ui, sans-serif; letter-spacing: 2.5px;
  box-shadow: 0 4px 0 -1px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,140,145,.5);
}
.botao:hover { filter: brightness(1.06); }
.botao:active { background: linear-gradient(var(--sangue), #8f1016); box-shadow: inset 0 2px 2px rgba(0,0,0,.45); transform: translateY(1px); }
.botao:focus-visible, .anterior:focus-visible, .hash:focus-visible, .rodape button:focus-visible { outline: 1.5px solid var(--verde); outline-offset: 3px; }
.botao[aria-disabled="true"], .botao:disabled { opacity: .45; cursor: default; pointer-events: none; }
.botao svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.versao { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; gap: 12px; }
.versao .quando { font: 700 22px "Chakra Petch", system-ui, sans-serif; letter-spacing: .5px; }
.versao .tamanho { font: 600 13px "Azeret Mono", monospace; color: var(--prata); }
.arquivo { margin-top: 8px; font: 500 11px "Azeret Mono", monospace; color: var(--fraco); overflow: hidden; text-overflow: ellipsis; }
.hash { display: block; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 11px "Azeret Mono", monospace; color: var(--fraco); text-align: left; }
.hash:hover { color: var(--prata); }

.anterior {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding: 12px 16px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--linha); color: var(--cinza); font-size: 12px; font-weight: 600;
}
.anterior:hover { color: var(--branco); border-color: var(--luz); }
.anterior span:last-child { font: 500 11px "Azeret Mono", monospace; }

.rodape { margin-top: 24px; display: flex; justify-content: center; }
.rodape button { border: 0; background: none; cursor: pointer; font-size: 11px; color: var(--fraco); }
.rodape button:hover { color: var(--prata); }