:root { --bg: #060b14; --surface: #0d1829; --text: #f4f6fa; --muted: #9aa5b8; --gold: #daa520; --gold-light: #f6e7a6; --border: rgba(255,255,255,.1); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Inter", system-ui, sans-serif; color: var(--text); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased;
  background: radial-gradient(90% 60% at 100% 0%, #10213d 0%, rgba(16,33,61,0) 60%), var(--bg); min-height: 100vh;
}
.serif { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-weight: 600; color: var(--gold-light); letter-spacing: -0.05em; }
.barra { position: fixed; inset: 0 0 auto 0; height: 3px; background: rgba(255,255,255,.06); z-index: 10; }
.barra__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .4s ease; }
.topo { max-width: 720px; margin: 0 auto; padding: 22px 24px 0; }
.topo img { height: 46px; width: auto; }
main { max-width: 720px; margin: 0 auto; padding: 8vh 24px 60px; }
.tela { display: flex; flex-direction: column; gap: 18px; animation: entra .45s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.abertura { align-items: flex-start; }
.retrato { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(246,231,166,.5); }
h1 { font-size: clamp(36px, 6vw, 54px); line-height: 1.04; letter-spacing: -0.05em; margin: 0; font-weight: 600; }
h2 { font-size: clamp(26px, 4.4vw, 36px); line-height: 1.12; letter-spacing: -0.04em; margin: 0; font-weight: 600; }
.apoio { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; max-width: 560px; }
.nota { color: var(--muted); font-size: 13px; margin: 0; }
.contador { color: var(--gold-light); font-size: 14px; font-weight: 500; margin: 0; }
.botao {
  display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 "Inter", sans-serif; color: #060b14; text-decoration: none;
  background: linear-gradient(135deg, var(--gold) 0%, #f2d675 55%, var(--gold-light) 100%); transition: transform .2s, box-shadow .2s;
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(218,165,32,.35); }
.botao.contorno { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.linha { display: flex; align-items: center; border-bottom: 2px solid var(--border); transition: border-color .2s; }
.linha:focus-within { border-color: var(--gold); }
input, textarea {
  width: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font: 400 22px/1.4 "Inter", sans-serif; padding: 12px 0; letter-spacing: -0.02em;
}
textarea { border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; font-size: 17px; resize: vertical; background: var(--surface); }
textarea:focus { border-color: var(--gold); }
input::placeholder, textarea::placeholder { color: #4d5a70; }
.opcoes { display: grid; gap: 10px; }
.opcao {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 18px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font: 500 16px/1.35 "Inter", sans-serif; transition: border-color .2s, background .2s;
}
.opcao:hover { border-color: rgba(246,231,166,.45); }
.opcao.marcada { border-color: var(--gold); background: #15233b; }
.tecla { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--gold-light); border: 1px solid rgba(246,231,166,.35); }
.erro { color: #ff8a80; font-size: 14px; margin: 0; min-height: 20px; }
.acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.voltar { background: none; border: 0; color: var(--muted); font: 500 15px "Inter", sans-serif; cursor: pointer; padding: 8px 0; }
.voltar:hover { color: var(--text); }
.pular { background: none; border: 0; color: var(--muted); font: 500 14px "Inter", sans-serif; cursor: pointer; text-decoration: underline; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fim { align-items: flex-start; }
.ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #060b14; background: linear-gradient(135deg, var(--gold), var(--gold-light)); }
.pulso { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(246,231,166,.25); border-top-color: var(--gold-light); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 600px) { main { padding-top: 5vh; } input { font-size: 19px; } .acoes .botao { flex: 1; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tela { animation: none; } }