/* Authentication is deliberately isolated from old public form styles.
 * Mobile is the base layout; the two-column presentation only exists on wide screens. */
.auth-page .auth-wrap,
.auth-page .auth-wrap * { box-sizing:border-box; }

.auth-page .auth-wrap {
  min-height:100dvh;
  padding:24px 16px calc(32px + env(safe-area-inset-bottom));
  background:#f7f9fc;
}
.auth-page .auth-showcase { display:none; }
.auth-page .auth-shell { width:100%; max-width:440px; margin:0 auto; }
.auth-page .auth-main {
  width:100%;
  padding:24px 16px 20px;
  border:1px solid #e2e8f1;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 30px rgba(31,52,78,.06);
}
.auth-page .auth-form-box { width:100%; margin:0; }
.auth-page .auth-logo { display:flex; align-items:center; gap:8px; margin:0 0 28px; color:#202938; font-size:24px; font-weight:700; letter-spacing:-.035em; line-height:1.2; }
.auth-page .auth-logo-badge { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border-radius:4px; background:#f1f3f6; color:#7d8999; font-size:11px; font-weight:600; letter-spacing:0; }
.auth-page .auth-form-title { position:static!important; width:auto!important; height:auto!important; margin:0 0 7px!important; padding:0!important; overflow:visible!important; clip:auto!important; white-space:normal!important; border:0!important; color:#26344a; font-size:21px; font-weight:750; line-height:1.35; }
.auth-page .auth-form-title::after { display:none; }
.auth-page .auth-form-sub { display:block!important; margin:0 0 22px; color:#7b899c; font-size:13px; line-height:1.6; }
.auth-page .auth-form-sub a,
.auth-page .auth-legal a,
.auth-page .auth-bottom a,
.auth-page .auth-forgot { color:#3478f6; text-decoration:none; }
.auth-page .auth-form-sub a:hover,
.auth-page .auth-legal a:hover,
.auth-page .auth-bottom a:hover,
.auth-page .auth-forgot:hover { text-decoration:underline; }
.auth-page .auth-form-box form { margin:0; }
.auth-page .auth-field { margin:0 0 16px; }
.auth-page .auth-field-grid,
.auth-page .auth-field-row { display:grid; grid-template-columns:1fr; gap:0; margin:0; }
.auth-page .auth-field-row .auth-field { margin:0 0 16px; }
.auth-page .auth-label,
.auth-page .auth-visual-label,
.auth-page .auth-register-captcha label { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.auth-page .auth-input-wrap { position:relative; min-width:0; }
.auth-page .auth-form-box input.auth-input,
.auth-page .auth-form-box input.auth-ref-input {
  display:block; width:100%; min-width:0; height:46px!important; min-height:46px!important; margin:0; padding:0 40px!important;
  border:1px solid #d7e0ec!important; border-radius:5px!important; outline:0; background:#fff!important; color:#36455a!important;
  font:400 16px/1.4 system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif!important; letter-spacing:0; box-shadow:none!important;
  transition:border-color .15s,box-shadow .15s;
}
.auth-page .auth-form-box input.auth-input::placeholder { color:#a5b2c2; opacity:1; }
.auth-page .auth-form-box input.auth-input:hover { border-color:#bac9dc!important; }
.auth-page .auth-form-box input.auth-input:focus { border-color:#3378f6!important; box-shadow:0 0 0 3px rgba(51,120,246,.12)!important; }
.auth-page .auth-input-icon { position:absolute; z-index:1; left:13px; top:50%; display:inline-flex!important; align-items:center; justify-content:center; width:16px; height:16px; transform:translateY(-50%); color:#64748b; font-size:14px; line-height:1; pointer-events:none; }
.auth-page .auth-eye { position:absolute; z-index:2; right:5px; top:50%; display:grid; place-items:center; width:34px; height:34px; padding:0; transform:translateY(-50%); border:0; border-radius:5px; background:transparent; color:#64748b; cursor:pointer; }
.auth-page .auth-eye:hover { background:#f1f5fb; color:#334155; }
.auth-page .auth-eye > i[class*="fa-"] { display:block!important; }
.auth-page .auth-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 17px; }
.auth-page .auth-check-label { display:flex; align-items:center; gap:7px; color:#69788c; font-size:12px; line-height:1.4; cursor:pointer; }
.auth-page .auth-check-label input { width:16px; height:16px; min-height:16px; margin:0; padding:0; accent-color:#3578ed; }
.auth-page .auth-btn { width:100%; height:48px; min-height:48px; padding:0 16px; border:1px solid #3378f6; border-radius:5px; background:#3378f6; color:#fff; font:700 15px/1 system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; cursor:pointer; transition:background .15s,border-color .15s; }
.auth-page .auth-btn:hover { background:#286ae0; border-color:#286ae0; }
.auth-page .auth-btn:disabled { opacity:.65; cursor:not-allowed; }
.auth-page .auth-bottom { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:14px; color:#8490a1; font-size:12px; line-height:1.55; }
.auth-page .auth-bottom-links { display:flex; width:100%; justify-content:space-between; gap:14px; }
.auth-page .auth-validation { margin-top:5px; color:#d83a4a; font-size:12px; line-height:1.5; }
.auth-page .auth-input-error { border-color:#d83a4a!important; box-shadow:0 0 0 3px rgba(216,58,74,.1)!important; }
.auth-page .auth-legal { margin:14px 0 0; color:#7a899e; font-size:12px; line-height:1.65; text-align:center; }
.auth-page .auth-forgot { display:inline-block; font-size:12px; font-weight:650; }
.auth-page .pwd-strength { margin:-8px 0 15px!important; }
.auth-page .pwd-strength-bar-wrap,
.auth-page .pwd-strength-bar-bg { height:3px; overflow:hidden; background:#e5ebf3; }
.auth-page .pwd-strength-bar { height:100%; width:0; }
.auth-page .pwd-strength-lbl { margin-top:4px; font-size:11px; }
.auth-page .auth-recovery-copy { margin:-8px 0 22px; color:#6b7c93; font-size:13px; line-height:1.7; }
.auth-page .auth-recovery-note { margin:0 0 20px; padding:10px 12px; border:1px solid #dbe6f5; border-radius:5px; background:#f7faff; color:#5f718b; font-size:12px; line-height:1.65; }
.auth-page .auth-recovery-state { padding:4px 0 2px; text-align:center; }
.auth-page .auth-recovery-state h1 { margin:0 0 9px; color:#1d2d46; font-size:20px; line-height:1.3; }
.auth-page .auth-recovery-state p { margin:0 0 22px; color:#6b7c93; font-size:13px; line-height:1.7; }
.auth-page .auth-state-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border:1px solid #3578ed; border-radius:5px; background:#3578ed; color:#fff; font-size:13px; font-weight:700; text-decoration:none; }
.auth-page .auth-switch { margin-top:12px; color:#7a899e; font-size:13px; line-height:1.5; }
.auth-page .auth-switch a { color:#3478f6; text-decoration:none; }
.auth-page .auth-switch a:hover { text-decoration:underline; }
.auth-page .auth-register { padding:20px 12px calc(28px + env(safe-area-inset-bottom)); background:#f7f9fc; }
.auth-page .auth-register .auth-shell { max-width:440px; padding:24px 20px 20px; border:1px solid #e2e8f1; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(31,52,78,.06); }
.auth-page .auth-register .auth-main { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.auth-page .auth-register .auth-logo { margin-bottom:20px; font-size:22px; }
.auth-page .auth-register .auth-form-sub { margin-bottom:18px; }
.auth-page .auth-register .auth-register-captcha > div { margin:0 0 16px!important; max-width:100%; }
.auth-page .auth-register .auth-register-captcha input { width:100%; height:44px!important; min-height:44px!important; padding:0 12px!important; border:1px solid #d7e0ec!important; border-radius:5px!important; font-size:16px!important; }
.auth-page .auth-register .auth-register-captcha img { height:44px!important; max-width:100%; border:1px solid #d7e0ec!important; border-radius:5px!important; }

@media (min-width:641px) {
  .auth-page .pub-nav.auth-nav { display:none; }
  .auth-page .auth-wrap { display:grid; grid-template-columns:42% 58%; align-items:stretch; padding:0; background:#f3f6fc; }
  /* Recovery flows have no showcase column. Do not let the login/register
     two-column grid strand their form in a narrow left rail. */
  .auth-page .auth-wrap.auth-recovery-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100dvh;
    padding:32px 24px;
    background:#f7f9fc;
  }
  .auth-page .auth-recovery-wrap .auth-shell { width:100%; max-width:440px; }
  .auth-page .auth-showcase { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; padding:48px 16.5%; color:#fff; background:linear-gradient(150deg,#1d75f0 0%,#1057cf 100%); }
  .auth-page .auth-showcase::before { content:""; position:absolute; inset:0; opacity:.28; background-image:radial-gradient(rgba(255,255,255,.62) 1px,transparent 1px); background-size:18px 18px; }
  .auth-page .auth-showcase-brand,.auth-page .auth-showcase-copy,.auth-page .auth-showcase-dots { position:relative; z-index:1; }
  .auth-page .auth-showcase-brand { font-size:20px; font-weight:750; letter-spacing:-.03em; }
  .auth-page .auth-showcase-copy { display:flex; flex-direction:column; gap:8px; margin:auto 0; text-align:center; white-space:nowrap; }
  .auth-page .auth-showcase-copy strong { font-size:22px; font-weight:750; }
  .auth-page .auth-showcase-copy span { font-size:13px; opacity:.86; }
  .auth-page .auth-showcase-dots { display:flex; justify-content:center; gap:8px; }
  .auth-page .auth-showcase-dots i { width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.38); }
  .auth-page .auth-showcase-dots i:first-child { width:28px; background:#fff; }
  .auth-page .auth-shell { display:flex; align-items:center; justify-content:center; max-width:none; margin:0; }
  .auth-page .auth-main { width:min(446px,calc(100% - 48px)); padding:34px 32px 30px; border:1px solid #dfe6ef; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(15,35,65,.025); }
  .auth-page .auth-logo { margin-bottom:28px; font-size:27px; font-weight:650; }
  .auth-page .auth-form-title { margin-bottom:12px!important; font-size:14px; font-weight:650; }
  .auth-page .auth-form-sub { margin-bottom:20px; line-height:1.4; }
  .auth-page .auth-field { margin-bottom:14px; }
  .auth-page .auth-field-row .auth-field { margin-bottom:14px; }
  .auth-page .auth-form-box input.auth-input,
  .auth-page .auth-form-box input.auth-ref-input { height:36px!important; min-height:36px!important; padding:0 38px!important; border-radius:3px!important; font-size:14px!important; }
  .auth-page .auth-eye { width:28px; height:28px; }
  .auth-page .auth-btn { height:36px; min-height:36px; border:0; border-radius:2px; background:#1d4ed8; font-size:14px; font-weight:600; }
  .auth-page .auth-btn:hover { background:#1e40af; }
  .auth-page .auth-btn:disabled { background:#93b8f6; }
  .auth-page .auth-bottom { flex-direction:row; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; }
  .auth-page .auth-bottom-links { width:auto; justify-content:flex-start; gap:18px; }
  /* Register is a full-height two-column grid. Do not center grid items here:
     that makes the blue showcase collapse to the form height and float midway
     down the page on desktop. */
  .auth-page .auth-register { align-items:stretch; padding:0; }
  .auth-page .auth-register .auth-shell { display:flex; align-items:center; justify-content:center; width:100%; max-width:none; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .auth-page .auth-register .auth-main { width:min(430px,calc(100% - 48px)); padding:20px 26px 18px; border:1px solid #dfe6ef; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(15,35,65,.025); }
  .auth-page .auth-register .auth-logo { margin-bottom:12px; font-size:20px; }
  .auth-page .auth-register .auth-form-title { margin-bottom:3px!important; font-size:20px; }
  .auth-page .auth-register .auth-form-sub { margin-bottom:12px; line-height:1.45; }
  .auth-page .auth-register .auth-field { margin-bottom:8px; }
  .auth-page .auth-register .auth-field-row .auth-field { margin-bottom:8px; }
  .auth-page .auth-register .auth-register-captcha > div { margin-bottom:8px!important; }
  .auth-page .auth-register .auth-register-captcha input,
  .auth-page .auth-register .auth-register-captcha img { height:36px!important; min-height:36px!important; font-size:14px!important; }
  .auth-page .auth-register .auth-btn { height:40px; min-height:40px; }
  .auth-page .auth-register .auth-legal { margin-top:8px; line-height:1.45; }
}