:root {
  --auth-ink: #172b4d;
  --auth-muted: #68778f;
  --auth-blue: #2864dc;
}

body.auth-page {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-ink);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(40, 100, 220, .09), transparent 30rem),
    #f5f7fb;
}

.auth-main { display: flex; width: 100%; justify-content: center; }
.auth-card {
  width: 100%;
  padding: clamp(1.5rem, 5vw, 2.35rem);
  border: 1px solid #e8edf5;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(23, 43, 77, .09);
}
.auth-brand {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: 1.7rem;
  color: var(--auth-blue);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.06em;
  text-decoration: none;
}
.auth-brand span { color: #8491a5; font-size: 1rem; font-weight: 400; letter-spacing: -.02em; }
.auth-heading { margin-bottom: 1.5rem; text-align: center; }
.auth-heading h1 { margin-bottom: .4rem; font-size: 1.55rem; font-weight: 760; letter-spacing: -.04em; }
.auth-heading p { margin: 0; color: var(--auth-muted); font-size: .9rem; }
.auth-card .form-label { color: #33445f; }
.auth-card .input-group-text { color: #72819a; background: #f7f9fc; border-color: #dce3ed; }
.auth-card .form-control { min-height: 44px; border-color: #dce3ed; }
.auth-card .form-control:focus { border-color: #86aaf2; box-shadow: 0 0 0 .2rem rgba(40, 100, 220, .12); }
.auth-card .auth-validation-message, .auth-card .invalid-feedback { display: none; width: 100%; margin-top: .3rem; color: #b42318; font-size: .8rem; }
.auth-card .form-control.is-invalid { border-color: #dc3545; }
.auth-card .form-control.is-valid { border-color: #198754; }
.auth-card .btn-primary { background: var(--auth-blue); border-color: var(--auth-blue); }
.auth-card a:not(.auth-brand) { color: var(--auth-blue); }
.auth-switch { margin: 1.5rem 0 0; color: var(--auth-muted); text-align: center; font-size: .88rem; }
.auth-switch a { margin-left: .2rem; font-weight: 700; text-decoration: none; }
.auth-flashes { margin-bottom: 1rem; }
.auth-flashes .alert { margin-bottom: .5rem; }

@media (max-width: 480px) {
  body.auth-page { align-items: flex-start; padding: 1rem .75rem; }
  .auth-main { margin: auto 0; }
  .auth-card { padding: 1.4rem 1.15rem; }
}