/* Login page: outer layer centers, the card owns the form. */

.login-stage {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + var(--space-4)) calc(var(--safe-right) + var(--space-3))
    calc(var(--safe-bottom) + var(--space-4)) calc(var(--safe-left) + var(--space-3));
}

.login-card {
  display: grid;
  gap: var(--space-3);
  width: min(100%, 26rem);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--r-card);
}

.login-title {
  font-size: var(--step-2);
  text-align: center;
}

.login-form {
  display: grid;
  gap: var(--space-3);
}

.login-field {
  display: grid;
  gap: var(--space-1);
  color: var(--muted);
  font-size: var(--step--1);
}

.login-form .btn {
  width: 100%;
}