* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #faf9f7; color: #1b1917; font-family: Outfit, system-ui, sans-serif; }
.login { width: 100%; max-width: 390px; padding: 36px 0; }
.eyebrow { margin: 18px 0 44px; color: #8c8178; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0 0 10px; font-size: 34px; font-weight: 550; letter-spacing: -.035em; }
.intro { margin: 0 0 32px; color: #746b63; }
label { display: block; margin: 20px 0 8px; font-size: 14px; font-weight: 500; }
input, select { width: 100%; border: 1px solid #ded8d1; border-radius: 12px; background: #fff; padding: 15px 16px; font: inherit; font-size: 16px; color: inherit; }
select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23746b63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
/* PIN: quatro digitos espacados, faceis de conferir de relance. */
#pin { font-size: 22px; letter-spacing: .5em; font-variant-numeric: tabular-nums; }
#pin::placeholder { font-size: 16px; letter-spacing: normal; color: #a39b93; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid #e8590c; outline-offset: 3px; }
button { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 12px; padding: 16px 20px; background: #d84c05; color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #bd4204; }
.error { color: #a12818; font-size: 14px; line-height: 1.5; }
.error:empty { margin: 24px 0 0; }
.footnote { margin: 32px 0 0; color: #746b63; font-size: 13px; line-height: 1.6; }
/* Celular baixo (640 px): tela de login inteira sem rolar. */
@media (max-height: 700px) { .login { padding: 12px 0; } .eyebrow { margin-bottom: 28px; } .intro { margin-bottom: 24px; } }