/* Shared auth presentation only; LoginForm and RegisterForm keep their fields and handlers. */
.auth-page { background:#fbfcf7; }
.auth-page .k-sweep-btn { display:none !important; }
.auth-page .auth { grid-template-columns:minmax(500px, 47%) minmax(0, 53%); min-height:100vh; }
.auth-page .auth-main { order:1; position:relative; display:block; min-height:100vh; padding:124px clamp(36px,7vw,140px) 70px; background:#fbfcf7; overflow:visible; }
.auth-page .auth-register-logo { position:absolute; top:30px; left:clamp(36px,7vw,140px); display:inline-flex; gap:10px; color:#082d1d; font-size:24px; text-decoration:none; }
.auth-page .auth-register-logo img { width:42px; height:42px; object-fit:contain; }
.auth-page .auth-card { max-width:520px; margin:42px auto 0; }
.auth-page .auth-card-header { margin-bottom:28px; }
.auth-page .auth-card-header h1 { font-size:clamp(34px,3.2vw,50px); line-height:1.06; margin-top:16px; }
.auth-page .auth-switch { color:#65746d; }
.auth-page .auth-switch a { color:#0c7047; }
.auth-page .auth-brand { order:2; position:sticky; top:0; height:100vh; padding:0; overflow:hidden; background:#dbeee0; color:#082d1d; }
.auth-page .auth-preview-grid { position:absolute; inset:-25% -5%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; transform:rotate(-5deg) scale(1.08); overflow:hidden; }
.auth-page .auth-preview-column { display:flex; flex-direction:column; gap:14px; min-width:0; animation:auth-preview-rise 35s linear infinite; }
.auth-page .auth-preview-column-2 { animation-direction:reverse; animation-duration:40s; transform:translateY(-12%); }
.auth-page .auth-preview-column-3 { animation-duration:32s; }
.auth-page .auth-preview-column img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; object-position:top; flex:none; border-radius:18px; box-shadow:0 8px 24px rgba(3,45,25,.16); }
.auth-page .auth-preview-column img.auth-preview-web { aspect-ratio:1/1; }
@keyframes auth-preview-rise { to { translate:0 -50%; } }
.auth-page .auth-brand::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,31,20,.12),transparent 40%),linear-gradient(0deg,rgba(4,34,23,.70),transparent 48%); pointer-events:none; }
.auth-page .auth-preview-note { position:absolute; z-index:2; left:clamp(26px,3vw,62px); right:clamp(26px,3vw,62px); bottom:clamp(28px,4vw,72px); color:#fff; }
.auth-page .auth-preview-kicker { font-size:11px; font-weight:850; letter-spacing:.16em; }
.auth-page .auth-preview-note h2 { max-width:600px; margin:14px 0 10px; font:800 clamp(42px,4.2vw,74px)/.96 var(--font-display); letter-spacing:-.055em; color:#fff; }
.auth-page .auth-preview-note p { max-width:440px; margin:0 0 26px; font-size:17px; line-height:1.45; color:rgba(255,255,255,.9); }
.auth-page .auth-preview-free { display:inline-block; padding:11px 16px; border-radius:999px; color:#062f1e; background:#dffc63; font-size:13px; font-weight:800; }
.auth-page .btn-social-primary,.auth-page .form-group input,.auth-page .form-group select,.auth-page .code-input-row input { border:1px solid #ccd9d0; border-radius:12px; box-shadow:none; min-height:52px; }
.auth-page .btn-social-primary:hover { transform:none; box-shadow:0 8px 22px rgba(5,45,26,.09); }
.auth-page .form-group input:focus,.auth-page .form-group select:focus,.auth-page .code-input-row input:focus { border-color:#1e9361; box-shadow:0 0 0 3px rgba(30,147,97,.13); }
.auth-page .btn-get-code { border:0; border-radius:12px; box-shadow:none; background:#def0d5; color:#0b5e3a; }
.auth-page .auth-submit { border-radius:13px; background:#0b673f; color:#fff; box-shadow:none; }
.auth-page .auth-submit:hover { background:#06492d; box-shadow:none; }
.auth-page .auth-legal-links { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0 0; color:#65746d; font-size:12px; }
.auth-page .auth-legal-links a { color:#315b47; text-decoration:underline; text-underline-offset:2px; }
@media(max-width:1050px){.auth-page .auth{grid-template-columns:minmax(440px,53%) minmax(0,47%)}.auth-page .auth-main{padding-inline:40px}.auth-page .auth-register-logo{left:40px}}
@media(max-width:800px){.auth-page .auth{display:flex;flex-direction:column}.auth-page .auth-brand{display:none!important}.auth-page .auth-main{order:1;min-height:100vh;padding:96px 22px 60px}.auth-page .auth-register-logo{top:28px;left:22px;position:absolute;margin-bottom:0}.auth-page .auth-card{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.auth-page .auth-preview-column{animation:none}}

/* ============================================================
   Verification-code row — prevent the "Get a Code" button from
   overflowing the card on narrow screens.
   Root cause: .code-input-row is flex + gap; the <input> defaults
   to min-width:auto (its content width), so it refuses to shrink
   and pushes the fixed-width button past the card edge.
   Fix: let the input shrink (min-width:0) and stop the button
   from ever shrinking or wrapping.
   ============================================================ */
.auth-page .code-input-row { display:flex; gap:10px; align-items:stretch; flex-wrap:nowrap; }
.auth-page .code-input-row input { flex:1 1 auto; min-width:0; width:100%; }
.auth-page .btn-get-code {
  flex:0 0 auto; white-space:nowrap;
  min-height:52px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1;
}
@media(max-width:420px){
  .auth-page .btn-get-code { padding:0 14px; font-size:13px; }
}
/* Very narrow phones: stack the button under the input so neither
   the code field nor the button gets crushed. */
@media(max-width:340px){
  .auth-page .code-input-row { flex-wrap:wrap; }
  .auth-page .code-input-row input { flex:1 1 100%; }
  .auth-page .btn-get-code { flex:1 1 100%; width:100%; }
}