/* css/components/auth_modal.css — auth modal styles + shared modal base.

   Loaded by base.html so every MPA page has the modal chrome ready
   when /js/core/auth_modal.js opens #signinModal. The .modal-overlay
   / .modal / .modal-top / .close-btn / .modal-content rules below
   are the same ones the SPA defines in fragra_ui.html lines 2680-2728
   and matched by /css/pages/result_modal.css for the result modal on
   /create. Loading both is harmless — they define identical values. */

/* ── Modal base chrome (matches SPA lines 2680-2728) ──────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(20,18,14,0.55);
  z-index:1050;align-items:flex-start;justify-content:center;
  padding:48px 16px 24px;overflow-y:auto;
  animation:authFadeIn .15s ease-out;
}
.modal-overlay.open{display:flex}
@keyframes authFadeIn{from{opacity:0}to{opacity:1}}

.modal{
  background:var(--card);border-radius:18px;
  max-width:640px;width:100%;
  box-shadow:0 18px 56px rgba(0,0,0,0.25);
  position:relative;
  animation:authSlideUp .18s ease-out;
}
@keyframes authSlideUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.modal-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.modal-top h3{font-size:17px;font-weight:800;letter-spacing:-0.3px}
.close-btn{
  background:transparent;border:1px solid transparent;border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-size:20px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.close-btn:hover{background:var(--accent-soft);color:var(--ink);border-color:var(--line2)}
.modal-content{padding:18px 24px 24px}

/* ── Sign-in box variants (auth/verify/forgot/reset share this) ──── */
.signin-box{max-width:340px;margin:0 auto;text-align:center;padding:16px 0}
.signin-box h3{font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-0.4px}
.signin-box p{color:var(--muted);font-size:13px;margin-bottom:22px;line-height:1.5}
.signin-input{
  width:100%;border:1.5px solid var(--line2);border-radius:12px;
  padding:13px 16px;font-size:15px;text-align:center;outline:none;
  font-weight:500;font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.signin-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,0.06)}