.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.auth-main { width: 100%; display: grid; place-items: center; padding: clamp(34px, 7vw, 78px) 0; }
.auth-layout { width: min(calc(100% - 28px), 980px); display: grid; grid-template-columns: 0.85fr 1.15fr; overflow: hidden; }
.auth-info { padding: clamp(26px, 5vw, 46px); background: linear-gradient(145deg, rgba(34, 211, 238, 0.15), transparent 75%); border-right: 1px solid var(--border); display: grid; align-content: space-between; gap: 34px; }
.auth-info h1 { margin: 16px 0 12px; font-size: clamp(2rem, 4vw, 3.1rem); }
.auth-info p { color: var(--muted); }
.auth-points { display: grid; gap: 12px; }
.auth-point { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 0.87rem; }
.auth-point::before { content: "✓"; color: var(--success); font-weight: 1000; }
.auth-form-panel { padding: clamp(24px, 5vw, 48px); background: var(--surface); }
.form-title { margin-bottom: 25px; }
.form-title h2 { margin-bottom: 7px; font-size: 1.65rem; }
.form-title p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.auth-form { display: grid; gap: 16px; }
.auth-switch { margin-top: 22px; text-align: center; color: var(--muted); font-size: 0.88rem; }
.auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.otp-panel { display: grid; gap: 18px; }
.otp-input { text-align: center; font-size: 1.45rem; letter-spacing: 0.42em; font-weight: 900; padding-left: calc(14px + 0.42em); }
.countdown { color: var(--cyan-dark); font-weight: 900; }
.form-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.78rem; }
.form-divider::before, .form-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }

@media (max-width: 800px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-info { border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-info .auth-points { display: none; }
}
@media (max-width: 520px) {
  .auth-main { padding: 18px 0 36px; align-items: start; }
  .auth-layout { width: min(calc(100% - 18px), 980px); }
  .auth-info { padding: 23px; }
  .auth-info h1 { font-size: 1.8rem; }
  .auth-form-panel { padding: 23px; }
  .auth-meta { align-items: flex-start; flex-direction: column; }
}