/* 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}
}