:root { --azul: #061A3D; --vermelho: #C81517; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--azul); color: #fff;
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px); }
img { width: 180px; height: auto; }
h1 { font-size: 15px; letter-spacing: .32em; font-weight: 600; margin: 8px 0 32px; opacity: .8; padding-left: .32em; }
form { width: 100%; max-width: 320px; display: grid; gap: 10px; }
label { font-size: 13px; opacity: .75; }
input { font-size: 17px; padding: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; outline: none; }
input:focus { border-color: #fff; }
button { margin-top: 8px; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; padding: 15px; border: 0; border-radius: 10px;
  background: var(--vermelho); color: #fff; cursor: pointer; }
.erro { margin: 0; color: #ffb3b4; font-size: 14px; }
.botao { display: block; text-align: center; text-decoration: none; color: #fff; font-weight: 600;
  padding: 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); }
.botao:hover { background: rgba(255,255,255,.08); }


.faceid { width: 100%; max-width: 320px; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; padding: 15px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--azul); border: 0; }
.faceid:disabled { opacity: .6; }
.ou { margin: 14px 0; font-size: 13px; opacity: .7; }