/* StaqOn — auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; background:var(--surface-0)}
.auth-card{width:100%; max-width:420px}
.auth-logo{display:flex; justify-content:center; margin-bottom:24px}
.auth-box{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:40px}
.auth-box h1{font-size:22px; font-weight:600; text-align:center; margin-bottom:6px}
.auth-box .sub{text-align:center; color:var(--text-2); font-size:14px; margin-bottom:26px}
.auth-foot{text-align:center; font-size:14px; color:var(--text-2); margin-top:22px}
.row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.checkbox{display:flex; align-items:center; gap:8px; font-size:13px; color:#374151; cursor:pointer}
.checkbox input{width:16px;height:16px;accent-color:var(--brand)}
.btn-google{width:100%; height:36px; background:#fff; border:1px solid var(--border-strong); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:500; color:#374151; transition:var(--t)}
.btn-google:hover{background:var(--surface-0)}
.pw-meter{height:5px; border-radius:3px; background:var(--border); margin-top:8px; overflow:hidden}
.pw-meter > span{display:block; height:100%; width:0; transition:var(--t)}
.pw-hint{font-size:12px; margin-top:5px; color:var(--text-muted)}
.pw-weak > span{width:33%; background:var(--danger)}
.pw-medium > span{width:66%; background:var(--warning)}
.pw-strong > span{width:100%; background:var(--success)}

/* ---- MPIN + OTP multi-step auth ---- */
.auth-step{display:none; animation:authFade .28s ease}
.auth-step.active{display:block}
@keyframes authFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

.link-muted{color:var(--text-2)}
.mpin-label{display:block; font-size:13px; font-weight:500; color:#374151; margin:0 0 8px}
.rules-text{font-size:12px; color:var(--text-muted); margin:14px 0 18px; line-height:1.5}

/* 6-digit boxes */
.otp-inputs{display:flex; gap:8px; justify-content:center; margin:0 0 20px}
.otp-inputs.is-loading{opacity:.55; pointer-events:none}
.otp-box{
  width:48px; height:48px; padding:0; text-align:center;
  font-size:24px; font-family:'SFMono-Regular',Consolas,Menlo,monospace; font-weight:600;
  color:#111827; background:#fff; border:2px solid var(--border); border-radius:8px;
  transition:border-color .15s, box-shadow .15s; -moz-appearance:textfield;
}
.otp-box::-webkit-outer-spin-button,.otp-box::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.otp-box:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.otp-box:disabled{background:var(--surface-0); color:var(--text-muted)}

/* error shake */
.otp-inputs.shake{animation:otpShake .42s cubic-bezier(.36,.07,.19,.97)}
.otp-inputs.shake .otp-box{border-color:var(--danger)}
@keyframes otpShake{
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}
}

/* masked email + resend */
[data-masked-email]{color:#111827; font-weight:600}
.resend-row{display:flex; align-items:center; justify-content:center; gap:6px; min-height:20px; font-size:13px; color:var(--text-2); margin-bottom:4px}
.resend-row a{font-size:13px}

@media (max-width:380px){
  .otp-box{width:42px; height:46px; font-size:20px}
  .otp-inputs{gap:6px}
}

/* ===== 50:50 split layout (login) ===== */
.auth-split-body{margin:0;background:#fff}
.auth-split{min-height:100vh}
.auth-left{width:50%;min-height:100vh;background:#F8FAFC;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;position:fixed;left:0;top:0;bottom:0;border-right:1px solid #EEF1F5}
.auth-left .wl-brand{text-align:center;margin-bottom:32px}
.auth-left .wl-logo{display:flex;justify-content:center;margin-bottom:14px}
.auth-left .wl-name{font-size:24px;font-weight:500;color:#111827;letter-spacing:-.01em}
.auth-left .wl-tag{font-size:14px;color:#6B7280;margin-top:4px}
.auth-left .wl-quote{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:24px;max-width:300px;font-size:16px;color:#374151;font-style:italic;line-height:1.6;text-align:center;transition:opacity 300ms ease}
.auth-left .wl-quote.fading{opacity:0}
.auth-left .wl-foot{position:absolute;bottom:32px;left:0;right:0;text-align:center;font-size:12px;color:#9CA3AF}
.auth-left .wl-foot a{color:#6B7280;text-decoration:none}
.auth-left .wl-foot a:hover{color:#000}
.auth-left .wl-foot-appeal{margin-top:8px;line-height:1.5;max-width:300px;margin-left:auto;margin-right:auto}
.auth-left .wl-foot-appeal a{color:#E11D48;font-weight:500}
.auth-left .wl-foot-appeal a:hover{color:#BE123C}

.auth-right{width:50%;margin-left:50%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:48px 64px;background:#fff;box-sizing:border-box}
/* form sits clean on white inside the split (no card chrome) */
.auth-split .auth-box{background:none;border:none;box-shadow:none;padding:0;width:100%;max-width:380px;margin:0 auto}
.auth-split .auth-box h1{text-align:left}
.auth-split .auth-box .sub{text-align:left}
.auth-split .otp-inputs{justify-content:flex-start}

@media (max-width:768px){
  .auth-left{position:relative;width:100%;min-height:auto;height:auto;padding:20px 24px;border-right:none;border-bottom:1px solid #EEF1F5;flex-direction:row;gap:12px;justify-content:flex-start;align-items:center}
  .auth-left .wl-brand{margin-bottom:0;display:flex;align-items:center;gap:12px}
  .auth-left .wl-logo{margin-bottom:0}
  .auth-left .wl-name{font-size:18px}
  .auth-left .wl-tag,.auth-left .wl-quote,.auth-left .wl-foot{display:none}
  .auth-right{width:100%;margin-left:0;min-height:auto;padding:32px 24px}
  .auth-split .auth-box .sub,.auth-split .auth-box h1,.auth-split .otp-inputs{text-align:center}
  .auth-split .otp-inputs{justify-content:center}
}

/* === MOBILE RESPONSIVE (Phase 1) === */
@media (max-width:767px){
  .auth-split .auth-box{max-width:100%}
  .auth-box h1{font-size:24px}
  /* full-width 48px inputs + buttons, 16px font (no zoom) */
  .auth-box .input{height:48px;font-size:16px}
  .auth-box .btn,.auth-box .btn-block{width:100%;height:48px;font-size:16px}
  /* OTP/MPIN: taller, thumb-friendly; flex so 6 boxes always fit (no h-scroll at 360px) */
  .otp-inputs{gap:8px;justify-content:center}
  .otp-box{flex:1 1 0;min-width:0;width:auto;max-width:52px;height:56px;font-size:22px}
  /* Forgot MPIN / footer links: 44px tap target */
  .auth-foot a{display:inline-block;min-height:44px;line-height:44px;font-size:14px}
}
/* keep the tiny-phone fallback from over-shrinking now that boxes flex */
@media (max-width:380px){
  .otp-box{height:54px;font-size:20px}
}