:root {
  --tinta: #172234;
  --papel: #F2ECE0;
  --folha: #FBF8F1;
  --dourado: #C9A227;
  --dourado-texto: #7E6410;
  --suave: #545C6B;
  --linha: #D8CFBD;
  --erro: #9A2B22;
  --erro-fundo: #F4D9D4;
  --ok: #2F6B3F;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.55;
  padding: max(16px, env(safe-area-inset-left)) ;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: 24px;
  padding-bottom: 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.caixa {
  width: 100%;
  max-width: 560px;
  background: var(--folha);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--dourado);
  padding: 28px 24px 22px;
}
.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  letter-spacing: .22em;
  font-size: .9rem;
  line-height: 1;
  margin-bottom: 22px;
}
.marca i { display: block; width: 100%; height: 1.5px; background: var(--dourado); }
h1 { font-size: 1.7rem; margin: 0 0 8px; line-height: 1.2; }
.lead { margin: 0 0 22px; color: var(--suave); }
.lead strong { color: var(--tinta); }
form { display: grid; gap: 18px; }
.campo { display: grid; gap: 6px; }
.rotulo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}
.rotulo small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--suave); }
.ajuda { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .82rem; color: var(--suave); }
input[type="text"], input[type="file"] {
  font: inherit;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 3px;
  padding: 10px 12px;
  width: 100%;
  max-width: 100%;
}
input:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.botao {
  font: inherit;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: 3px;
  padding: 12px 22px;
  cursor: pointer;
  justify-self: start;
}
.botao:disabled { opacity: .55; cursor: default; }
.botao.leve { background: transparent; color: var(--tinta); }
.progresso { margin-top: 22px; display: grid; gap: 10px; }
.barra { height: 10px; background: var(--linha); border-radius: 999px; overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--dourado); transition: width .2s ease; }
.status { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .9rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.pronto { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 2.2rem; letter-spacing: .08em; margin: 0; color: var(--ok); user-select: all; }
.sel { user-select: all; white-space: nowrap; }
.erro { margin: 18px 0 0; padding: 12px 14px; background: var(--erro-fundo); color: var(--erro); border-left: 3px solid var(--erro); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .95rem; }
.como { margin-top: 24px; border-top: 1px solid var(--linha); padding-top: 12px; font-size: .92rem; color: var(--suave); }
.como summary { cursor: pointer; color: var(--tinta); font-weight: 600; }
.como ul { padding-left: 1.2em; margin: 10px 0 0; display: grid; gap: 6px; }
.rodape { margin-top: 18px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .78rem; color: var(--suave); text-align: center; }
[hidden] { display: none !important; }
@media (max-width: 480px) {
  body { padding-top: 12px; }
  .caixa { padding: 22px 16px 18px; }
  h1 { font-size: 1.45rem; }
  .botao { width: 100%; justify-self: stretch; }
}