.auth-page {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  padding: 72px 0;
}

.auth-shell {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.8fr);
  gap: 72px;
  align-items: center;
}

.auth-intro h1 {
  max-width: 560px;
  margin: 14px 0 18px;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.auth-intro > p:not(.eyebrow) {
  max-width: 540px;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--muted, #607080);
}

.auth-benefits {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.auth-benefits span {
  position: relative;
  padding-left: 28px;
  font-weight: 600;
}

.auth-benefits span::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent, #5c9ca4);
  font-weight: 800;
}

.auth-card {
  padding: 38px;
  border: 1px solid rgba(35, 54, 72, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 64px rgba(40, 54, 76, 0.12);
}

.auth-card h2 {
  margin: 0;
  font-size: 1.7rem;
}

.auth-card-lead {
  margin: 10px 0 28px;
  color: var(--muted, #607080);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

.auth-form input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(35, 54, 72, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font: inherit;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent, #5c9ca4);
  box-shadow: 0 0 0 4px rgba(92, 156, 164, 0.12);
}

.auth-help {
  margin: -6px 0 0;
  font-size: 0.88rem;
  color: var(--muted, #607080);
}

.auth-card .flash {
  margin-bottom: 18px;
}

.auth-card .btn-full {
  min-height: 54px;
}

.form-foot {
  margin: 24px 0 0;
  text-align: center;
  color: var(--muted, #607080);
}

.form-foot a {
  color: inherit;
  font-weight: 700;
}

@media (max-width: 900px) {
  .auth-page {
    padding: 52px 0;
  }

  .auth-shell {
    width: min(680px, calc(100% - 40px));
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .auth-intro {
    text-align: center;
  }

  .auth-intro h1,
  .auth-intro > p:not(.eyebrow) {
    margin-left: auto;
    margin-right: auto;
  }

  .auth-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .auth-benefits span {
    padding-left: 0;
    padding-top: 24px;
    font-size: 0.9rem;
  }

  .auth-benefits span::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 560px) {
  .auth-page {
    min-height: auto;
    padding: 36px 0 52px;
  }

  .auth-shell {
    width: min(100% - 28px, 680px);
    gap: 28px;
  }

  .auth-intro h1 {
    font-size: 2.65rem;
  }

  .auth-benefits {
    grid-template-columns: 1fr;
  }

  .auth-benefits span {
    padding: 0 0 0 26px;
    text-align: left;
  }

  .auth-benefits span::before {
    left: 0;
    transform: none;
  }

  .auth-card {
    padding: 26px 20px;
    border-radius: 22px;
  }
}

.auth-shell-single{grid-template-columns:minmax(0,560px);justify-content:center}
.auth-shell-single .auth-card{width:100%}

/* Password-recovery pages: keep the single card inside the viewport. */
.auth-page:has(.auth-shell-single){min-height:calc(100svh - 160px);padding:28px 0;align-items:center}
.auth-shell-single .auth-card{box-sizing:border-box}
@media(max-width:900px){
  .auth-page:has(.auth-shell-single){min-height:calc(100svh - 150px);padding:22px 0}
}
@media(max-width:560px){
  .auth-page:has(.auth-shell-single){min-height:calc(100svh - 74px);padding:14px 0}
  .auth-shell-single .auth-card{padding:20px 18px;border-radius:20px}
  .auth-shell-single h1{font-size:2.1rem;line-height:1.05;margin-top:6px}
  .auth-shell-single .auth-card-lead{font-size:14px;line-height:1.5}
}

/* Standalone password-recovery pages are deliberately viewport-locked. */
body.recovery-page{height:100svh;min-height:100svh;overflow:hidden}
body.recovery-page main{min-height:0;height:calc(100svh - 74px - 112px);overflow:hidden}
body.recovery-page .auth-page{height:100%;min-height:0;padding:16px 0;box-sizing:border-box;align-items:center}
body.recovery-page .auth-shell-single{max-height:100%;min-height:0}
body.recovery-page .auth-shell-single .auth-card{max-height:100%;box-sizing:border-box}
body.recovery-page .site-footer{box-sizing:border-box}
@media(min-width:900px){
  body.recovery-page main{height:calc(100svh - 82px - 92px)}
  body.recovery-page .auth-page{padding:14px 0}
}
@media(max-width:560px){
  body.recovery-page main{height:calc(100svh - 74px - 118px)}
  body.recovery-page .auth-page{padding:10px 0}
  body.recovery-page .auth-shell-single{width:calc(100% - 20px)}
  body.recovery-page .auth-shell-single .auth-card{padding:18px 16px}
}
@media(max-width:380px){
  body.recovery-page main{height:calc(100svh - 74px - 124px)}
  body.recovery-page .auth-shell-single .auth-card{padding-top:16px;padding-bottom:16px}
}

/* Installer uses the same compact responsive auth layout as recovery/login. */
.auth-page .auth-shell-single .auth-card{box-sizing:border-box}
@media(max-width:560px){
  .auth-page .auth-shell-single .auth-card{padding:20px 18px}
}