:root { --fundo: #050b1a; --cartao: #0b1730; --linha: #1b2a4a; --texto: #e2e8f0; --suave: #8aa0c0; --azul: #3b82f6; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; display: grid; place-items: center; padding: 16px; }
.caixa { width: min(400px, 100%); background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 28px 24px; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; }
.sub { color: var(--suave); margin: 0 0 22px; font-size: 14px; }
label { display: block; font-size: 13px; color: var(--suave); margin: 14px 0 6px; }
input { width: 100%; font: inherit; color: var(--texto); background: #08122a; border: 1px solid var(--linha); border-radius: 10px; padding: 11px 12px; }
input:focus-visible, button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
button { width: 100%; margin-top: 22px; font: inherit; font-weight: 600; color: #fff; background: var(--azul); border: 0; border-radius: 10px; padding: 12px; cursor: pointer; min-height: 44px; }
button:hover { background: #2563eb; }
.erro { background: #2a0e12; border: 1px solid #7f1d1d; color: #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 8px; }
.nota { color: var(--suave); font-size: 12px; margin-top: 18px; text-align: center; }