/* Tela de login. */

.login {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
}

.login-card {
  display: grid;
  gap: 10px;
  width: min(400px, 100%);
  padding: 28px;
}

.login-card h1 {
  margin: 0 0 2px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.login-card .hint { margin: 0 0 6px; font-size: 14px; }
.login-card label { font-size: 13px; color: var(--muted); }
.login-card input { padding: 10px 12px; font-size: 16px; }
.login-card .msg { margin: 0; }
.login-card .btn { margin-top: 6px; padding: 10px 14px; }

/* O "chip" dourado dos cartões, como marca da tela. */
.login-chip {
  width: 44px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 7px;
  background: linear-gradient(135deg, #F6D98B, #C9A24A);
}