/* Reset-password modal — calm auth card, desktop dialog / mobile bottom-sheet (2026-08) */
#resetPasswordModal.ui-modal-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(17,20,28,0.52);backdrop-filter:blur(5px);z-index:9999;overflow-y:auto}
#resetPasswordModal.show{display:flex}
#resetPasswordModal .ui-modal{background:#fff;border-radius:18px;width:100%;max-width:410px;padding:0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,0.10),0 32px 80px rgba(0,0,0,0.45),0 6px 20px rgba(0,0,0,0.25);animation:rpFadeIn 0.22s ease-out;max-height:calc(100dvh - 40px);overflow-y:auto}
@keyframes rpFadeIn{from{opacity:0;transform:translateY(12px) scale(0.985)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Header — compact lockup: icon tile, title + sub, close. Hairline below. */
#resetPasswordModal .rp-head{padding:20px 22px 16px;border-bottom:1px solid var(--border-light)}
#resetPasswordModal .rp-handle{display:none}
#resetPasswordModal .rp-head-row{display:flex;align-items:center;gap:13px}
#resetPasswordModal .rp-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#1a3d7c,#2f7ae5);color:#fff;box-shadow:0 3px 8px rgba(47,122,229,0.30)}
#resetPasswordModal .rp-head-tx{flex:1;min-width:0}
#resetPasswordModal .rp-head-tx h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-0.01em;color:var(--ink-900)}
#resetPasswordModal .rp-head-sub{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-500)}
#resetPasswordModal .ui-modal-close{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-2px -6px 0 0;background:none;border:none;border-radius:8px;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-500);transition:background 0.15s,color 0.15s}
#resetPasswordModal .ui-modal-close:hover{background:var(--ink-100);color:var(--ink-800)}

/* Body */
#resetPasswordModal .ui-modal-body{padding:20px 22px 24px;font-size:15px;color:var(--ink-700)}
#resetPasswordModal .rp-desc{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-600)}
#resetPasswordModal .rp-step-title{margin:0 0 8px;font-size:16.5px;font-weight:700;color:var(--ink-900)}

/* Step progress dots (SMS/code flow) */
#resetPasswordModal .rp-dots{display:flex;gap:6px;margin-bottom:14px}
#resetPasswordModal .rp-dots span{width:20px;height:4px;border-radius:999px;background:var(--ink-200);transition:background 0.2s}
#resetPasswordModal .rp-dots span.on{background:var(--brand-500)}

/* Method options (only visible when >1 method) */
#resetPasswordModal .reset-options{display:flex;flex-direction:column;gap:10px}
#resetPasswordModal .rp-opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;background:#fff;border:1px solid var(--border);border-radius:13px;cursor:pointer;text-align:left;font:inherit;transition:border-color 0.15s,background 0.15s,box-shadow 0.15s}
#resetPasswordModal .rp-opt:hover{border-color:var(--brand-500);background:var(--brand-50);box-shadow:0 1px 6px rgba(47,122,229,0.14)}
#resetPasswordModal .rp-opt-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--brand-50);color:var(--brand-500)}
#resetPasswordModal .rp-opt:hover .rp-opt-ic{background:#fff}
#resetPasswordModal .rp-opt-tx{flex:1;display:flex;flex-direction:column;gap:1px}
#resetPasswordModal .rp-opt-tx strong{font-size:14.5px;font-weight:600;color:var(--ink-900)}
#resetPasswordModal .rp-opt-tx small{font-size:12.5px;color:var(--ink-500)}
#resetPasswordModal .rp-opt-arrow{flex:0 0 auto;font-size:20px;color:var(--ink-500);transition:transform 0.15s,color 0.15s}
#resetPasswordModal .rp-opt:hover .rp-opt-arrow{transform:translateX(3px);color:var(--brand-500)}

/* Fields — 16px inputs so iOS doesn't auto-zoom on focus */
#resetPasswordModal .rp-fg{margin-bottom:14px}
#resetPasswordModal .rp-fg label{display:block;font-size:12.5px;font-weight:650;color:var(--ink-700);margin-bottom:6px}
#resetPasswordModal .rp-fg input{width:100%;padding:12px 14px;border-radius:11px;border:1.5px solid var(--border);font-size:16px;color:var(--ink-900);background:#fff;transition:border-color 0.15s,box-shadow 0.15s}
#resetPasswordModal .rp-fg input::placeholder{color:var(--ink-500);opacity:0.55}
#resetPasswordModal .rp-fg input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3.5px rgba(47,122,229,0.15)}
#resetPasswordModal .rp-code{text-align:center;font-size:22px;font-weight:700;letter-spacing:0.35em;font-variant-numeric:tabular-nums}
#resetPasswordModal .rp-code::placeholder{letter-spacing:0.35em}

/* Primary action */
#resetPasswordModal .rp-btn{display:block;width:100%;padding:13px 18px;background:var(--brand-500);color:#fff;border:none;border-radius:999px;font-size:14.5px;font-weight:650;letter-spacing:0.01em;cursor:pointer;box-shadow:0 3px 10px rgba(47,122,229,0.28);transition:background 0.15s,box-shadow 0.15s,transform 0.12s;margin-top:4px}
#resetPasswordModal .rp-btn:hover{background:var(--brand-600);box-shadow:0 5px 14px rgba(47,122,229,0.36);transform:translateY(-1px)}
#resetPasswordModal .rp-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(47,122,229,0.25)}
#resetPasswordModal .rp-btn:disabled{opacity:0.6;cursor:default;transform:none;box-shadow:none}

/* Link-sent state */
#resetPasswordModal .rp-sent{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 2px}
#resetPasswordModal .rp-sent-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--brand-50);color:var(--brand-500);margin-bottom:13px}
#resetPasswordModal .rp-sent h4{margin:0 0 5px;font-size:17px;font-weight:750;color:var(--ink-900)}
#resetPasswordModal .rp-sent .rp-desc{margin-bottom:8px}
#resetPasswordModal .rp-sent-hint{margin:0 0 16px;font-size:12.5px;color:var(--ink-500);line-height:1.5}
#resetPasswordModal .rp-resend{background:none;border:none;padding:0;font:inherit;font-size:12.5px;color:var(--brand-500);cursor:pointer;text-decoration:underline}
#resetPasswordModal .rp-resend:hover{color:var(--brand-600)}

/* Success state */
#resetPasswordModal .rp-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 2px}
#resetPasswordModal .rp-success-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#dcfce7;color:#16a34a;margin-bottom:13px;animation:rpPop 0.35s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes rpPop{from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1}}
#resetPasswordModal .rp-success h4{margin:0 0 5px;font-size:17px;font-weight:750;color:var(--ink-900)}
#resetPasswordModal .rp-success .rp-desc{margin-bottom:18px}

/* Footer / back link */
#resetPasswordModal .reset-footer{display:flex;justify-content:center;margin-top:12px}
#resetPasswordModal .reset-back-btn{background:none;border:none;padding:7px 11px;font-size:13.5px;color:var(--ink-500);cursor:pointer;border-radius:8px;transition:color 0.15s,background 0.15s}
#resetPasswordModal .reset-back-btn:hover{color:var(--ink-800);background:var(--ink-100)}

/* Mobile — bottom sheet with grab handle */
@media (max-width:620px){
  #resetPasswordModal.ui-modal-backdrop{padding:0;align-items:flex-end}
  #resetPasswordModal .ui-modal{max-width:none;border-radius:20px 20px 0 0;max-height:92dvh;animation:rpSlideUp 0.26s ease-out}
  @keyframes rpSlideUp{from{opacity:0.6;transform:translateY(44px)}to{opacity:1;transform:translateY(0)}}
  #resetPasswordModal .rp-head{padding:10px 20px 14px}
  #resetPasswordModal .rp-handle{display:block;width:36px;height:4px;border-radius:999px;background:var(--ink-200);margin:0 auto 12px}
  #resetPasswordModal .ui-modal-body{padding:18px 20px calc(22px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  #resetPasswordModal .ui-modal,#resetPasswordModal .rp-success-ic{animation:none}
}