/* Telas de entrada da Central hsti.dev: marinho + dourado, cartão de vidro com cantos do OTP NEON. */
:root { color-scheme: dark; --a-gold: #c9a24b; --a-gold-2: #e3c47c; --a-ink: #eef2f7; --a-muted: #9fb0c6; --a-bad: #f87171; --a-ok: #34d399; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--a-ink); background: #06101f;
  background-image:
    radial-gradient(60% 40% at 15% 15%, rgba(201, 162, 75, .16), transparent 70%),
    radial-gradient(55% 45% at 90% 90%, rgba(47, 108, 179, .28), transparent 70%),
    repeating-linear-gradient(115deg, rgba(201, 162, 75, .04) 0 2px, transparent 2px 60px);
}
.cartao {
  width: min(440px, 100%); padding: 38px 32px 30px; text-align: center; border-radius: 26px;
  background: linear-gradient(160deg, rgba(20, 44, 80, .62), rgba(6, 14, 28, .78));
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 90px -30px #000, inset 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.cartao.is-wide { width: min(520px, 100%); }
.on-moldura { --on-canto: 30px; --on-canto-recuo: 8px; padding-block: calc(var(--on-canto) + var(--on-canto-recuo) + 8px); }
.otp-neon { --on-neon: #c9a24b; --on-neon-2: #5b9be0; }
.marca { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--a-muted); }
.marca b { color: var(--a-gold); font-weight: 600; }
.ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 14px; border-radius: 13px; border: 1px solid rgba(201, 162, 75, .45); color: var(--a-gold); background: rgba(201, 162, 75, .08); transition: .4s; }
.ic.ok { color: var(--a-ok); border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .1); box-shadow: 0 0 24px -6px var(--a-ok); }
h1 { margin: 14px 0 6px; font-size: 1.55rem; letter-spacing: -.02em; font-weight: 650; }
h1 em { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; color: var(--a-gold-2); }
p.sub { margin: 0 0 22px; color: var(--a-muted); font-size: .9rem; }
.campo { display: block; text-align: left; margin: 0 0 14px; }
.campo span { display: block; margin: 0 0 6px; font-size: .8rem; color: var(--a-muted); }
.campo input {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; color: var(--a-ink);
  background: rgba(4, 10, 20, .55); border: 1px solid rgba(255, 255, 255, .14); outline: none; transition: border-color .2s, box-shadow .2s;
}
.campo input:focus { border-color: var(--a-gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
.btn {
  width: 100%; margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer;
  font: 600 .95rem/1 Inter, system-ui, sans-serif; color: #0b1f3a; background: linear-gradient(180deg, #e3c47c, #c9a24b);
  box-shadow: 0 10px 24px -12px rgba(201, 162, 75, .8);
}
.btn:hover { filter: brightness(1.06); }
.btn.is-ghost { background: none; color: var(--a-gold); box-shadow: none; font-weight: 500; }
.alerta { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; font-size: .86rem; text-align: left; color: #fecaca; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35); }
.alerta.is-ok { color: #bbf7d0; background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .35); }
.alerta:empty { display: none; }
.pe { margin: 18px 0 0; font-size: .8rem; color: #6f8296; }
.qr { display: inline-block; padding: 12px; margin: 4px 0 10px; border-radius: 16px; background: #fff; line-height: 0; }
.qr svg { width: 200px; height: 200px; }
.segredo { display: block; margin: 0 0 18px; font: 500 .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--a-gold-2); word-break: break-all; }
.passo { margin: 18px 0 10px; text-align: left; font-size: .82rem; color: var(--a-muted); }
.passo b { color: var(--a-gold); }
@media (max-width: 420px) { .cartao { padding-inline: 20px; } }