:root {
  --azul: #1f5fae;
  --azul-escuro: #17497f;
  --fundo: #f3f6fb;
  --cartao: #ffffff;
  --texto: #1d2b3a;
  --suave: #5a6b7d;
  --borda: #d6dee8;
  --erro: #b42318;
  --ok: #1e7a3c;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
.centro { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cartao { width: 100%; max-width: 380px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 28px 24px; }
.marca { margin: 0 0 4px; font-size: 26px; color: var(--azul); text-align: center; }
.sub { margin: 0 0 20px; color: var(--suave); text-align: center; font-size: 14px; }
label { display: block; font-size: 13px; color: var(--suave); margin: 12px 0 4px; }
input { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid var(--borda); border-radius: 8px; }
input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
button { width: 100%; margin-top: 18px; padding: 11px; font-size: 15px; border: 0; border-radius: 8px; background: var(--azul); color: #fff; cursor: pointer; }
button:hover { background: var(--azul-escuro); }
button:disabled { opacity: .6; cursor: default; }
.link { display: block; margin-top: 14px; text-align: center; font-size: 14px; color: var(--azul); }
.msg { margin-top: 14px; font-size: 14px; min-height: 1em; }
.msg.erro { color: var(--erro); }
.msg.ok { color: var(--ok); }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--azul); color: #fff; }
.topo strong { font-size: 18px; }
.topo button { width: auto; margin: 0; padding: 7px 12px; background: rgba(255,255,255,.15); }
.conteudo { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.oculto { display: none !important; }