.auth-page {
  min-height:100vh;
  padding:24px;
  display:grid;
  place-items:center;
  background:var(--bg);
}

.auth-card {
  width:min(100%, 460px);
  padding:
    clamp(
      22px,
      5vw,
      32px
    );
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:
    0 18px 50px
    rgba(
      31,
      57,
      72,
      .10
    );
}

.auth-brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.auth-brand-copy {
  display:grid;
  gap:1px;
}

.auth-brand-copy small {
  color:var(--blue);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.08em;
}

.auth-brand-copy strong {
  font-size:1rem;
}

.auth-heading {
  margin-top:28px;
}

.auth-heading small {
  color:var(--blue);
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.08em;
}

.auth-heading h1 {
  margin:4px 0 0;
  font-size:
    clamp(
      1.65rem,
      7vw,
      2rem
    );
  letter-spacing:-.04em;
}

.auth-heading p {
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.5;
}

.auth-form {
  margin-top:24px;
  display:grid;
  gap:17px;
}

.auth-field {
  display:grid;
  gap:7px;
}

.auth-field label {
  font-size:.88rem;
  font-weight:750;
}

.auth-field input {
  width:100%;
  min-height:49px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:#fff;
  color:var(--ink);
  font:inherit;
}

.auth-field input:focus {
  border-color:var(--blue);
  box-shadow:
    0 0 0 4px
    rgba(
      8,
      125,
      204,
      .12
    );
}

.auth-hint {
  color:var(--muted);
  font-size:.78rem;
  line-height:1.4;
}

.auth-button {
  width:100%;
  min-height:52px;
  margin-top:3px;
  padding:12px 16px;
  border:0;
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      var(--dark),
      var(--blue)
    );
  color:#fff;
  font:inherit;
  font-weight:850;
  cursor:pointer;
}

.auth-button:disabled {
  opacity:.6;
  cursor:wait;
}

.auth-alert {
  margin-top:18px;
  padding:12px 14px;
  border-radius:12px;
  font-size:.86rem;
  line-height:1.45;
}

.auth-alert.error {
  color:#a32222;
  background:#fff0f0;
  border:1px solid #f0c1c1;
}

.auth-security {
  margin-top:22px;
  padding:12px 13px;
  border-radius:12px;
  background:#f5f8fa;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}

@media(max-width:580px) {

  .auth-page {
    padding:14px;
    align-items:start;
  }

  .auth-card {
    margin-top:24px;
    padding:22px 18px;
    border-radius:20px;
  }

}