.auth-backdrop{
  position:fixed;inset:0;background:rgba(11,21,38,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;opacity:0;pointer-events:none;transition:opacity .2s ease;
  padding:20px;
}
.auth-backdrop.open{opacity:1;pointer-events:auto}
.auth-card{
  position:relative;
  background:var(--paper-raised);width:100%;max-width:420px;
  border-radius:var(--radius-lg);padding:30px 26px 26px;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px);transition:transform .2s ease;
}
.auth-backdrop.open .auth-card{transform:translateY(0)}
.auth-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.auth-title{font-family:var(--font-display);font-size:19px;font-weight:700;margin-bottom:4px}
.auth-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.auth-tabs{display:flex;gap:8px;margin-bottom:18px;background:var(--paper);border-radius:10px;padding:4px}
.auth-tab{
  flex:1;padding:9px;border-radius:8px;border:none;background:transparent;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);
}
.auth-tab.active{background:var(--paper-raised);color:var(--ink);box-shadow:var(--shadow-sm)}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.auth-field input{
  width:100%;padding:11px 13px;border-radius:6px;border:1.5px solid var(--line-strong);font-size:14.5px;
}
.auth-error{
  background:#FDEDEA;color:#C4392C;font-size:12.5px;padding:10px 12px;
  border-radius:8px;margin-bottom:14px;display:none;
}
.auth-notice{
  background:var(--blue-tint);color:var(--blue-deep);font-size:12.5px;padding:10px 12px;
  border-radius:8px;margin-bottom:14px;display:none;
}
.auth-forgot{display:block;text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:14px}
.auth-forgot:hover{color:var(--blue)}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12px;color:var(--ink-soft)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.auth-confirm{text-align:center;padding:6px 0 2px}
.auth-confirm-icon{font-size:38px;margin-bottom:10px}

/* ---------------- Password show/hide ---------------- */
.auth-password-wrap{position:relative}
.auth-password-wrap input{padding-right:44px}
.auth-password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:13px;color:var(--ink-soft);
  padding:4px;
}
.auth-password-toggle:hover{color:var(--ink)}

/* ---------------- OTP code entry ---------------- */
.auth-code-boxes{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.auth-code-box{
  width:44px;height:52px;text-align:center;font-size:22px;font-weight:700;
  border:1.5px solid var(--line-strong);border-radius:10px;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-code-box:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,79,224,.15)}
.auth-code-box.wrong{border-color:#C4392C;animation:auth-code-shake .35s ease}
.auth-code-box.right{border-color:#1B8A5A;background:rgba(27,138,90,.08)}
@keyframes auth-code-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.auth-code-error{color:#C4392C;font-size:13px;text-align:center;margin-top:4px}