/* Login gate — same tokens as dashboard; unique auth classes from template */
#authGate{
  position:fixed; inset:0; z-index:90;
  display:none;
  background:var(--bg-void);
}
#authGate.show{ display:block; }
@media (min-width:768px){
  #authGate{ padding:28px 16px; }
}
@media (min-width:1280px){
  #authGate{ padding:40px 16px; }
}
#authGate .app-shell{
  position:relative; z-index:1;
  height:100%;
}
@media (min-width:768px){
  #authGate .app-shell{
    height:calc(100dvh - 56px);
  }
}
@media (min-width:1280px){
  #authGate .app-shell{ height:calc(100dvh - 80px); }
}

.top-bar{
  position:sticky; top:0; z-index:20;
  padding-top:calc(12px + var(--safe-top));
  padding-bottom:12px;
  padding-inline:16px;
  display:flex; align-items:center; gap:10px;
  background:rgba(11,14,23,.78);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border-softer);
  min-height:22px;
}
.top-bar .icon-btn[disabled]{ opacity:0; pointer-events:none; }
.top-bar .top-title{ font-size:15px; font-weight:700; color:var(--text-2); flex:1; }
.top-bar .auth-to-chat{
  display:inline-flex; margin-inline-start:auto;
}

.auth-stage{
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding:8px 20px calc(28px + var(--safe-bottom));
}

.brand{
  display:flex; flex-direction:column; align-items:center;
  margin-top:26px; margin-bottom:8px;
  animation:rise .6s var(--ease) forwards; opacity:0;
}
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.bot-avatar-lg{
  position:relative;
  width:76px; height:76px; border-radius:26px;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -10px rgba(58,168,232,.5);
  margin-bottom:16px;
}
.bot-avatar-lg svg{ width:38px; height:38px; color:#fff; }
.bot-avatar-lg i{ font-size:36px; line-height:1; color:#fff; }
.bot-avatar-lg.has-logo svg,
.bot-avatar-lg.has-logo i{ display:none; }
.bot-avatar-lg .bot-logo{
  width:100%; height:100%; object-fit:cover; border-radius:26px; display:block;
}
.status-dot-lg{
  position:absolute; left:-2px; bottom:-2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--green); border:3px solid var(--bg-deep);
}
.status-dot-lg::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:var(--green); opacity:.3;
  animation:pulse-ring 2.2s var(--ease) infinite;
}

.brand-name{ font-size:22px; font-weight:800; }
.brand-badge{
  margin-top:6px; font-size:13px; font-weight:600; color:var(--accent-1);
  background:var(--accent-grad-soft); border:1px solid rgba(91,124,245,.3);
  padding:2.5px 10px; border-radius:20px;
}

.step-track{
  width:100%; max-width:380px;
  position:relative;
  margin-top:22px;
}
.step-panel{
  width:100%;
  animation:panel-in var(--dur-slow) var(--ease) forwards;
}
@keyframes panel-in{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:translateX(0); }
}
[dir="rtl"] .step-panel.back{ animation-name:panel-in-back; }
@keyframes panel-in-back{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:translateX(0); }
}

.step-title{ font-size:20px; font-weight:800; text-align:center; margin-bottom:6px; }
.step-sub{ font-size:15px; color:var(--text-2); text-align:center; line-height:1.9; margin-bottom:26px; }
.step-sub b{ color:var(--text-1); font-weight:700; unicode-bidi:embed; }

.auth-card{
  background:var(--surface-glass);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
  padding:20px 18px;
  box-shadow:var(--shadow-soft);
}

.field-label{ font-size:14px; font-weight:700; color:var(--text-2); margin-bottom:8px; display:block; }
.phone-field{
  display:flex; align-items:center; gap:0;
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  overflow:hidden;
}
.phone-field:focus-within{
  border-color:rgba(91,124,245,.55);
  background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(91,124,245,.14);
}
.country-chip{
  display:flex; align-items:center; gap:6px;
  padding:13px 12px;
  border-inline-end:1px solid var(--border-softer);
  color:var(--text-1); font-size:15px; font-weight:700;
  flex-shrink:0; white-space:nowrap;
  direction:ltr;
}
.country-chip .flag{ font-size:15px; line-height:1; }
#phoneInput{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-1); font-family:inherit; font-size:17px; font-weight:600;
  padding:13px 12px; direction:ltr; text-align:left; letter-spacing:.4px;
}
#phoneInput::placeholder{ color:var(--text-3); font-weight:500; letter-spacing:0; }

.auth-card .field-hint{ font-size:13px; color:var(--text-3); margin-top:9px; line-height:1.8; }

.primary-btn{
  width:100%; margin-top:20px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border-radius:var(--radius-md); border:none;
  background:var(--accent-grad); color:#fff;
  font-family:inherit; font-size:16px; font-weight:700;
  cursor:pointer; position:relative; overflow:hidden;
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.primary-btn:hover{ filter:brightness(1.07); }
.primary-btn:active{ transform:scale(.98); }
.primary-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.primary-btn[disabled]{ opacity:.45; cursor:not-allowed; filter:none; transform:none; }
.primary-btn svg{ width:17px; height:17px; }
.primary-btn i.arrow{ font-size:16px; line-height:1; }
.primary-btn .spinner{
  width:16px; height:16px; border-radius:50%;
  border:2.2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.primary-btn.loading .btn-label,.primary-btn.loading svg.arrow,.primary-btn.loading i.arrow{ display:none; }
.primary-btn.loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.legal-note{
  text-align:center; font-size:13px; color:var(--text-3); line-height:1.9;
  margin-top:18px; padding:0 6px;
}
.legal-note a{ color:var(--accent-1); text-decoration:none; font-weight:600; }

.divider{
  display:flex; align-items:center; gap:10px;
  margin:20px 0 16px; color:var(--text-3); font-size:13.5px; font-weight:600;
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--border-soft); }

.social-row{ display:flex; gap:9px; flex-wrap:wrap; }
.social-btn{
  flex:1; min-width:96px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 8px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border-soft);
  color:var(--text-1); font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-btn svg{ width:18px; height:18px; flex-shrink:0; }
.social-btn i{ font-size:18px; line-height:1; flex-shrink:0; }
.social-btn:hover{ transform:translateY(-1px); background:var(--surface-2); }
.social-btn:active{ transform:translateY(0) scale(.97); }
.social-btn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }
.social-btn.google:hover{ border-color:rgba(66,133,244,.4); }
.social-btn.telegram:hover{ border-color:rgba(58,168,232,.45); }
.social-btn.telegram svg{ color:#3aa8e8; }
.social-btn.apple:hover{ border-color:rgba(255,255,255,.28); }
.social-btn.bale:hover{ border-color:rgba(56,211,159,.4); }
.social-btn.eitaa:hover{ border-color:rgba(232,181,89,.4); }
.social-btn.rubika:hover{ border-color:rgba(124,92,252,.45); }
.social-btn.soroush:hover{ border-color:rgba(244,114,182,.4); }
.login-code{
  font-family:ui-monospace,Consolas,monospace;
  font-size:22px; font-weight:800; letter-spacing:.12em;
  text-align:center; direction:ltr;
  padding:14px 10px; margin:0 0 12px;
  border-radius:var(--radius-md);
  background:var(--surface-2); border:1.5px dashed var(--border-soft);
  color:var(--text-1); user-select:all;
}

.otp-target{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:24px;
}
.otp-target .num{ font-size:14.5px; font-weight:700; direction:ltr; color:var(--text-1); }
.otp-edit{
  font-size:11.5px; font-weight:700; color:var(--accent-1);
  background:var(--accent-grad-soft); border:1px solid rgba(91,124,245,.28);
  padding:3px 10px; border-radius:20px; cursor:pointer;
  transition:background var(--dur-fast);
}
.otp-edit:hover{ background:rgba(91,124,245,.22); }

.otp-inputs{
  display:flex; justify-content:center; gap:9px; direction:ltr;
  margin-bottom:8px;
}
.otp-box{
  width:46px; height:56px; border-radius:var(--radius-md);
  background:var(--surface); border:1.5px solid var(--border-soft);
  color:var(--text-1); font-family:inherit; font-size:21px; font-weight:800;
  text-align:center; outline:none;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.otp-box:focus{
  border-color:var(--accent-1); background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(58,168,232,.16);
}
.otp-box.filled{ border-color:rgba(91,124,245,.45); }
.otp-box.error{ border-color:var(--red); animation:shake .38s var(--ease); }
.otp-box.success{ border-color:var(--green); background:var(--green-soft); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(3px); }
}

.otp-status{
  min-height:18px; text-align:center; font-size:14px; font-weight:600;
  margin-bottom:6px; color:var(--text-3);
}
.otp-status.error{ color:var(--red); }
.otp-status.success{ color:var(--green); }

.resend-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:18px; font-size:14.5px; color:var(--text-3);
}
.resend-link{
  color:var(--accent-1); font-weight:700; cursor:pointer; background:none; border:none;
  font-family:inherit; font-size:14.5px; padding:0;
}
.resend-link[disabled]{ color:var(--text-3); cursor:default; }
.resend-timer{ direction:ltr; font-weight:700; color:var(--text-2); }

.trust-strip{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:28px; opacity:.75;
}
.trust-item{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-3); font-weight:600; }
.trust-item svg{ width:13px; height:13px; color:var(--text-3); }
.trust-item i{ font-size:13px; color:var(--text-3); }

.toast.err svg{ color:var(--red); }
.toast.err i{ color:var(--red); }