.auth-page {
  --auth-radius: 16px;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #15295a;
}

.auth-shell {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(400px, 1fr);
  margin: auto;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 34px 90px rgba(2, 9, 25, .42);
}

.auth-intro {
  min-height: 570px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: var(--blue);
  color: var(--white);
}

.auth-brand {
  width: 158px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.auth-brand picture { display: block; width: 100%; }
.auth-brand img { width: 100%; height: auto; }
.auth-intro-copy > span { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--yellow); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.auth-intro-copy > span::before { content: ""; width: 24px; height: 3px; border-radius: 99px; background: var(--yellow); }
.auth-intro-copy h2 { max-width: 360px; margin: 0; color: var(--white); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -.04em; }
.auth-intro-copy p { max-width: 390px; margin: 18px 0 24px; color: #dde5f6; line-height: 1.6; }
.auth-intro-copy ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.auth-intro-copy li { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #f3f6fc; font-size: .72rem; font-weight: 750; }
.auth-intro-copy li::before { content: "✓"; margin-right: 6px; color: var(--yellow); font-weight: 950; }

.auth-card.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 50px;
  border-radius: 0;
  background: var(--white);
  box-shadow: none;
}
.auth-card .eyebrow { margin-bottom: 10px; }
.auth-card h1 { margin: 0; color: var(--blue); font-size: clamp(2rem, 4vw, 2.55rem); line-height: 1.1; letter-spacing: -.035em; }
.auth-card > p:not(.eyebrow) { margin: 10px 0 30px; color: var(--gray); font-size: .94rem; }
.auth-card form { display: grid; gap: 19px; }
.auth-card label { color: var(--blue); font-size: .84rem; font-weight: 800; letter-spacing: .005em; }
.auth-card input { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 11px 12px; border: 1px solid #c9cfdb; border-radius: 9px; background: var(--white); color: var(--ink); box-shadow: none; }
.auth-card input:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 .22rem rgba(250, 186, 22, .32); }
.auth-submit { width: 100%; min-height: 51px; margin-top: 8px; border-radius: 9px; box-shadow: 0 10px 22px rgba(230, 27, 30, .2); }
.auth-submit::after { content: "→"; margin-left: 9px; font-size: 1.08rem; }
.auth-alert { margin: 0 0 20px; padding: 11px 13px; border: 0; border-left: 4px solid var(--red); border-radius: 8px; background: #fce8e8; color: #7a1113; font-size: .9rem; font-weight: 700; }
.auth-back { width: max-content; margin: 25px auto 0; padding-bottom: 2px; border-bottom: 1px solid transparent; color: var(--blue); font-size: .82rem; font-weight: 800; }
.auth-back:hover, .auth-back:focus-visible { border-color: currentColor; color: var(--red); }

@media (max-width: 820px) {
  .auth-page { padding: 20px; }
  .auth-shell { max-width: 560px; grid-template-columns: 1fr; }
  .auth-intro { min-height: auto; padding: 28px; }
  .auth-intro-copy { margin-top: 70px; }
  .auth-intro-copy ul { display: none; }
  .auth-card.card { padding: 40px 32px; }
}

@media (max-width: 560px) {
  .auth-page { padding: 0; }
  .auth-shell { min-height: 100vh; border-radius: 0; }
  .auth-intro { padding: 22px 20px; }
  .auth-brand { width: 130px; }
  .auth-intro-copy { margin-top: 44px; }
  .auth-intro-copy h2 { font-size: 1.7rem; }
  .auth-intro-copy p { margin-bottom: 0; font-size: .86rem; }
  .auth-card.card { padding: 35px 20px; }
}

@media (prefers-color-scheme: dark) {
  .auth-brand { padding: 0; background: transparent; box-shadow: none; }
  .auth-card.card { background: var(--dark-surface); }
  .auth-card h1, .auth-card label { color: var(--dark-text); }
  .auth-card > p:not(.eyebrow) { color: var(--dark-muted); }
  .auth-card input { border-color: #52617b; background: var(--dark-surface-soft); color: var(--dark-text); }
  .auth-alert { background: #3b1d25; color: #ffc2c5; }
  .auth-back { color: #dce6ff; }
}