.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; }

/* Marca sem espaço (PigeonZap junto) e tagline */
.login-brand { gap: .5rem; margin-bottom: .375rem; }
.login-brand .wordmark { letter-spacing: -.02em; }
.login-brand .wordmark b { color: var(--tinta-suave); font-weight: 800; }
.login-tag { margin: 0 0 1.75rem; color: var(--tinta-suave); font-size: .9375rem; line-height: 1.4; }

/* Fundo menos vazio: um leve gradiente radial na cor da marca */
.login { background:
  radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--mencao) 12%, transparent), transparent 60%),
  radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--bolha) 40%, transparent), transparent 55%),
  var(--nevoa); }
.login-card { border-radius: 1.25rem; box-shadow: 0 2rem 4rem -1.5rem color-mix(in srgb, var(--tinta) 45%, transparent); }

/* Botão do login: bloco sólido, verde da marca, com leve realce no hover */
.login .btn.primary { font-weight: 700; letter-spacing: .01em; box-shadow: 0 .5rem 1rem -.5rem color-mix(in srgb, var(--mencao) 60%, transparent); }