.login { min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem; }
.login-card { width: min(24rem, 100%); background: var(--papel); border: 1px solid var(--linha); border-radius: 1rem; padding: 2rem; }
.login-brand { display: flex; align-items: center; gap: .625rem; font-family: var(--display); font-weight: 800; font-size: 1.375rem; margin-bottom: 1.5rem; }
.login-brand img { width: 2.25rem; height: 2.25rem; }
.login-brand b { color: var(--tinta-suave); font-weight: 800; }
.login label { display: block; font-weight: 600; margin: 1rem 0 .375rem; }
.login input { width: 100%; }
.login .btn { width: 100%; margin-top: 1.5rem; }
.login .hint { margin-top: .75rem; }
.login h2 { font-size: 1.375rem; margin: 0 0 .25rem; }

/* Campos do login: mais altos, borda suave, foco com anel */
.login input { box-sizing: border-box; padding: .75rem .875rem; font-size: 1rem; background: var(--nevoa);
  border: 1px solid var(--linha); border-radius: .625rem; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.login input::placeholder { color: color-mix(in srgb, var(--tinta) 45%, transparent); }
.login input:hover { border-color: var(--tinta-suave); }
.login input:focus { outline: none; background: var(--papel); border-color: var(--mencao);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mencao) 22%, transparent); }
.login label { font-size: .9375rem; }
.login-card { padding: 2.25rem; box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--tinta) 40%, transparent); }
.login .btn.primary { font-size: 1rem; padding: .8125rem; border-radius: .625rem; }