html body main.auth-page {
  box-sizing: border-box;
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding: 70px 22px 90px;
  background: var(--kon-gradient);
}

html body .auth-card {
  box-sizing: border-box;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 42px 42px 38px;
  border: 1px solid rgba(87,67,84,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 24px 65px rgba(77,57,74,.13), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.auth-card .eyebrow {
  margin: 0 0 10px;
  color: #8a6c87;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.auth-card h1 {
  margin: 0 0 30px;
  color: var(--kon-ink);
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.08;
}

.auth-card form { display: grid; gap: 20px; margin: 0; }
.auth-card label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #403543;
  font-size: 14px;
  font-weight: 650;
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #d9cdd8;
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.92);
  color: var(--kon-ink);
  font: inherit;
  font-size: 16px;
}

.auth-card input:focus {
  border-color: #856681;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(133,102,129,.13);
}

.auth-card button[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  margin: 6px 0 0;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #443546, #6e536b);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(68,53,70,.22);
}

.auth-card .auth-error {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(157,65,65,.20);
  border-radius: 10px;
  background: #fff1f1;
  color: #873d3d;
}

.auth-card .auth-help {
  margin: 24px 0 0;
  color: var(--kon-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.auth-card .auth-home {
  display: inline-block;
  margin-top: 14px;
  color: #634c61;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Client first-login password setup */
.auth-card .auth-intro {
    margin: -14px 0 26px;
    color: #746a76;
    font-size: 14px;
    line-height: 1.65;
}

.auth-card label small {
    color: #857a87;
    font-size: 12px;
    font-weight: 500;
}

.password-setup-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 auto 28px;
    padding: 18px 22px;
    border: 1px solid rgba(112, 82, 106, .18);
    border-radius: 16px;
    background: #fffaf3;
    color: #403543;
}

.password-setup-notice div {
    display: grid;
    gap: 4px;
}

.password-setup-notice span {
    color: #746a76;
    font-size: 14px;
}

.password-setup-notice a {
    flex: 0 0 auto;
    padding: 11px 17px;
    border-radius: 999px;
    background: #4b3b4d;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 650px) {
    .password-setup-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .password-setup-notice a {
        text-align: center;
    }
}