:root {
  --bg:#060d06; --s1:#0f1e0f; --s2:#142814; --line:rgba(236,230,207,.14); --line2:rgba(236,230,207,.28);
  --tx:#ece6cf; --tx2:#c1bda4; --tx3:#9d9b84; --bone:#ede6be; --moss:#a6c97a; --leaf:#498025; --clay:#e08f6e;
  --display:'Roboto Slab',Georgia,serif; --body:'Archivo',system-ui,-apple-system,sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.5 var(--body); }
body { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
main { width: 100%; max-width: 420px; }
.marca { font-family: var(--display); font-weight: 300; font-size: 28px; color: var(--bone); margin: 24px 0 4px; letter-spacing: .01em; }
.marca b { font-weight: 500; color: var(--moss); }
.sub { color: var(--tx3); margin: 0 0 28px; font-size: 14px; }
h1 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0 0 8px; }
p { margin: 0 0 16px; color: var(--tx2); }
.cartao { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; }
label { display: block; font-size: 14px; color: var(--tx2); margin: 14px 0 6px; }
input { width: 100%; font: inherit; font-size: 16px; color: var(--tx); background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; }
input:focus { outline: 2px solid var(--moss); outline-offset: 1px; border-color: transparent; }
.dica { font-size: 13px; color: var(--tx3); margin: 6px 0 0; }
button { font: inherit; cursor: pointer; border-radius: 10px; }
.botao { display: block; width: 100%; margin-top: 20px; padding: 13px 16px; border: 0; background: var(--moss); color: #0c2b07; font-weight: 600; }
.botao:disabled { opacity: .6; cursor: wait; }
.botao.sec { background: transparent; color: var(--tx); border: 1px solid var(--line2); font-weight: 500; }
.link { background: none; border: 0; color: var(--moss); padding: 8px 0; margin-top: 12px; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.erro { color: var(--clay); font-size: 14px; margin: 14px 0 0; min-height: 0; }
.ok { color: var(--moss); }
.selo { display: inline-block; font-size: 12px; color: var(--moss); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; }
.carregando, .aviso { color: var(--tx3); text-align: center; margin-top: 40vh; }