/* ===== sign-in popup: dimmed backdrop + card (bottom sheet on phones) ===== */
.auth-screen{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px;
  background:var(--overlay); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:1; transition:opacity .22s ease;
}
.auth-screen.hidden{ opacity:0; pointer-events:none; }
.auth-card{
  position:relative; width:420px; max-width:100%; max-height:calc(100dvh - 40px); overflow-y:auto;
  scrollbar-width:none; /* still scrolls on short screens, just no visible bar */
  background:var(--card); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow);
  padding:34px 28px 22px; display:flex; flex-direction:column;
  transform:translateY(0) scale(1); transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.auth-screen.hidden .auth-card{ transform:translateY(12px) scale(.97); }
.auth-card::-webkit-scrollbar{ display:none; }
.auth-close{
  position:absolute; top:14px; inset-inline-end:14px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--bg-soft); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.auth-close svg{ width:14px; height:14px; fill:currentColor; }
.auth-alert{ font-size:12.5px; line-height:1.6; border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.auth-alert.error{ color:var(--danger); background:var(--danger-soft); }
.auth-alert.ok{ color:var(--text); background:var(--primary-soft); }
.auth-hint{ font-size:11.5px; color:var(--text-muted); margin:-4px 2px 6px; }
.auth-link{ align-self:center; margin-top:14px; border:none; background:none; color:var(--primary); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; padding:4px; }
.auth-link:hover{ text-decoration:underline; }
.device.lang-fa .auth-card{ text-align:right; }
/* The email field is LTR; while empty, keep its Persian placeholder on the right. */
.device.lang-fa .auth-form input[type="email"]:placeholder-shown{ direction:rtl; }
@media (max-width:600px){
  .auth-screen{ align-items:flex-end; padding:0; }
  .auth-card{ width:100%; max-height:92dvh; border-radius:26px 26px 0 0; padding:30px 22px calc(22px + env(safe-area-inset-bottom)); }
  .auth-screen.hidden .auth-card{ transform:translateY(100%); }
}/* ===== boot screen: skeleton while session is checked, error on failure ===== */
.boot-screen{
  position:absolute; inset:0; background:var(--bg); z-index:79; overflow-y:auto;
  padding:22px max(18px, calc((100% - 640px)/2)) 100px; opacity:1; transition:opacity .25s ease;
}
.boot-screen.hidden{ opacity:0; pointer-events:none; }
.skel-block{
  border-radius:14px; background:linear-gradient(90deg, var(--bg-soft) 25%, var(--card) 37%, var(--bg-soft) 63%);
  background-size:400% 100%; animation:skel-shimmer 1.4s ease infinite;
}
@keyframes skel-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.auth-logo{ width:58px; height:58px; margin:0 auto 12px auto; }
.auth-logo img{ width:100%; height:100%; display:block; }
.auth-title{ text-align:center; font-size:20px; font-weight:800; }
.auth-sub{ text-align:center; font-size:13px; color:var(--text-muted); margin-top:4px; margin-bottom:26px; }
.auth-tabs{ display:flex; gap:6px; background:var(--bg-soft); padding:4px; border-radius:14px; margin-bottom:22px; }
.auth-tabs button{ flex:1; border:none; background:transparent; padding:11px; border-radius:11px; font-size:13px; font-weight:700; color:var(--text-muted); cursor:pointer; font-family:inherit; }
.auth-tabs button.active{ background:var(--card); color:var(--primary); }
.auth-form .field{ margin-bottom:12px; }
.auth-form input{ width:100%; border:2px solid transparent; background:var(--bg-soft); border-radius:14px; padding:14px 16px; font-size:14px; color:var(--text); font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-form input::placeholder{ color:var(--text-muted); }
.auth-form input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 5px var(--primary-soft); }
.auth-form .field.has-error input{ border-color:var(--danger); }
.auth-form .field.has-error input:focus{ box-shadow:0 0 0 5px var(--danger-soft); }
.auth-field-error{ color:var(--danger); font-size:12px; margin-top:6px; }
.auth-submit{ width:100%; margin-top:10px; padding:15px; border-radius:14px; font-size:14px; }
.auth-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--google-btn-bg); color:var(--google-btn-text); border:1px solid var(--border); border-radius:14px;
  padding:13px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease;
}
.auth-google:hover{ box-shadow:0 2px 10px rgba(0,0,0,0.18); }
.auth-google svg{ width:18px; height:18px; flex:0 0 auto; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:12px; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
.auth-footer{ margin-top:16px; text-align:center; font-size:12px; color:var(--text-muted); }