/* ============================================================
   auth.css — فقط برای صفحات احراز هویت
   (login / register / verify-2fa / forgot / reset)
   وابسته به tokens.css — از app.css و landing.css مستقل است.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{
  min-height:100dvh;
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.7;
  color:var(--ink-1);
  direction:rtl;
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-25)}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.up{color:var(--up)}
.down{color:var(--down)}

/* ---------- پس‌زمینه ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(720px 420px at 85% -60px,var(--gold-08),transparent 62%),
    radial-gradient(560px 380px at 4% 104%,rgba(76,141,255,.05),transparent 60%);
}
.bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 40%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 40%,#000 25%,transparent 78%);
}
.bg-orb{
  position:absolute;border-radius:50%;filter:blur(90px);
  animation:orb 22s ease-in-out infinite;
}
.bg-orb.o1{width:340px;height:340px;top:-80px;inset-inline-start:-70px;background:var(--gold-12)}
.bg-orb.o2{width:280px;height:280px;bottom:-60px;inset-inline-end:-50px;background:rgba(76,141,255,.09);animation-delay:-11s}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-24px) scale(1.08)}66%{transform:translate(-18px,20px) scale(.94)}}

/* ---------- صحنه ---------- */
.stage{
  position:relative;z-index:1;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-6) var(--sp-4);
}

/* ---------- پنل دوتکه ---------- */
.panel{
  display:flex;width:100%;max-width:980px;min-height:600px;
  background:rgba(17,21,29,.88);
  backdrop-filter:blur(26px) saturate(1.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--line-2);
  border-radius:24px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 90px -30px rgba(0,0,0,.8),0 0 60px -20px var(--gold-glow);
  animation:panelIn .65s var(--ease-pop) both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.panel.shake{animation:panelIn .65s var(--ease-pop) both,shake .5s cubic-bezier(.36,.07,.19,.97) .1s both}
@keyframes shake{0%,100%{translate:0}15%{translate:-10px}30%{translate:10px}45%{translate:-7px}60%{translate:7px}75%{translate:-3px}90%{translate:3px}}

/* پنل تک‌ستونه (فراموشی / ریست / 2FA) */
.panel-solo{max-width:440px;min-height:0;display:block;padding:var(--sp-10) var(--sp-8)}

/* ---------- سمت فرم ---------- */
.form-side{
  width:440px;flex-shrink:0;
  padding:var(--sp-10) var(--sp-8);
  display:flex;flex-direction:column;justify-content:center;
}
.form-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-8)}
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:var(--gold-grad);color:var(--gold-ink);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  box-shadow:var(--sh-gold);
}
.brand-name{font-size:16px;font-weight:800}
.brand-sub{font-size:10px;color:var(--ink-4);margin-top:-3px}

.form-title{font-size:var(--fs-3xl);font-weight:900;letter-spacing:-.02em;line-height:1.3}
.form-sub{font-size:var(--fs-sm);color:var(--ink-3);margin:4px 0 var(--sp-6)}

/* ---------- سمت ویترین ---------- */
.show-side{
  flex:1;position:relative;overflow:hidden;
  border-inline-start:1px solid var(--line-1);
  background:
    radial-gradient(480px 300px at 70% 0%,var(--gold-08),transparent 65%),
    var(--bg-raised);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5);
  padding:var(--sp-10) var(--sp-8);
}
.show-side::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,206,133,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,206,133,.03) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 25%,transparent 80%);
}
.show-side>*{position:relative;z-index:1}
.show-quote{font-size:var(--fs-xl);font-weight:800;line-height:1.7;text-wrap:balance}
.show-quote span{color:var(--gold)}
.show-note{font-size:var(--fs-xs);color:var(--ink-3)}

/* کارت سیگنال کوچک داخل ویترین */
.mini-sig{
  display:flex;align-items:center;gap:11px;
  padding:var(--sp-3) var(--sp-4);
  background:rgba(17,21,29,.85);
  border:1px solid var(--line-1);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  animation:sigIn .5s var(--ease-pop) both;
}
@keyframes sigIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.mini-sig .ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.ico.long{background:var(--up-12);color:var(--up)}
.ico.short{background:var(--down-12);color:var(--down)}
.ico.tp{background:var(--gold-12);color:var(--gold)}
.mini-sig .tt{font-size:var(--fs-xs);font-weight:700;line-height:1.4}
.mini-sig .dd{font-size:10px;color:var(--ink-4)}
.mini-sig .pnl{margin-inline-start:auto;font-size:var(--fs-sm);font-weight:800}
/* آمار ویترین */
.show-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-1);border:1px solid var(--line-1);border-radius:var(--r-lg);overflow:hidden}
.show-stat{background:rgba(12,15,21,.7);padding:var(--sp-4);text-align:center}
.show-stat b{display:block;font-size:var(--fs-xl);font-weight:900;color:var(--gold)}
.show-stat span{font-size:10px;color:var(--ink-4)}

/* ---------- فرم ---------- */
.field{margin-bottom:var(--sp-4)}
.field>label{display:block;margin-bottom:6px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}
.in-wrap{position:relative}
.in-wrap>i{
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  font-size:17px;color:var(--ink-4);pointer-events:none;
  transition:color var(--t-fast);
}
.in-wrap:focus-within>i{color:var(--gold)}
.input{
  width:100%;min-height:48px;padding:0 var(--sp-4);
  background:var(--bg-inset);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  color:var(--ink-1);font-family:var(--font);font-size:var(--fs-sm);
  outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.input::placeholder{color:var(--ink-4)}
.input:focus{border-color:var(--gold-45);background:var(--bg-card);box-shadow:0 0 0 3px var(--gold-12)}
.in-wrap .input{padding-inline-start:42px}
.in-wrap .input[dir=ltr]{text-align:left;padding-inline-end:42px}
.peek{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--ink-4);font-size:17px;cursor:pointer;
  transition:color var(--t-fast);
}
.peek:hover{color:var(--ink-2)}
.field .hint{font-size:var(--fs-2xs);color:var(--ink-4);margin-top:5px}
.field.is-invalid .input{border-color:var(--down);box-shadow:0 0 0 3px var(--down-12)}
.field.is-invalid .hint{color:var(--down)}
.field.is-valid .hint{color:var(--up)}

/* قدرت رمز */
.strength{display:flex;gap:5px;margin-top:8px}
.strength i{flex:1;height:4px;border-radius:var(--r-full);background:var(--bg-hover);transition:background var(--t-med)}
.strength[data-lv="1"] i:nth-child(-n+1){background:var(--down)}
.strength[data-lv="2"] i:nth-child(-n+2){background:#F59E0B}
.strength[data-lv="3"] i:nth-child(-n+3){background:var(--gold)}
.strength[data-lv="4"] i:nth-child(-n+4){background:var(--up)}
.strength-txt{font-size:var(--fs-2xs);margin-top:5px;font-weight:600;color:var(--ink-4)}

/* ---------- ردیف کمکی ---------- */
.aux{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.aux a{font-size:var(--fs-xs);font-weight:600;color:var(--gold)}
.aux a:hover{color:var(--gold-bright)}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-xs);color:var(--ink-2);user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.ckbox{
  width:18px;height:18px;flex-shrink:0;
  border:1.5px solid var(--line-3);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;
  transition:all var(--t-fast);
}
.check input:checked~.ckbox{background:var(--gold-grad);border-color:transparent;color:var(--gold-ink)}
.check a{color:var(--gold)}

/* جعبه ریسک (ثبت‌نام) */
.riskbox{
  background:var(--gold-04);border:1px solid var(--gold-25);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-5);
}
.riskbox b{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--gold);margin-bottom:4px}
.riskbox p{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.8;margin-bottom:10px}

/* کپچا placeholder */
.captcha{
  display:flex;align-items:center;gap:10px;
  min-height:64px;padding:0 var(--sp-4);
  background:var(--bg-inset);border:1px dashed var(--line-3);border-radius:var(--r-md);
  font-size:var(--fs-xs);color:var(--ink-4);
  margin-bottom:var(--sp-5);
}
.captcha i{font-size:20px;color:var(--ink-3)}

/* ---------- دکمه ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:50px;padding:0 var(--sp-5);
  border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--font);font-size:15px;font-weight:800;
  cursor:pointer;transition:all .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn i{font-size:18px}
.btn-gold{background:var(--gold-grad);color:var(--gold-ink);box-shadow:var(--sh-gold)}
.btn-gold:hover{filter:brightness(1.07);box-shadow:var(--sh-gold-lg);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--line-3);color:var(--ink-1);background:rgba(255,255,255,.03)}
.btn.is-loading{pointer-events:none;color:transparent;position:relative}
.btn.is-loading::after{
  content:'';position:absolute;width:19px;height:19px;
  border:2px solid rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.75);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- آلرت ---------- */
.alert{
  display:flex;align-items:flex-start;gap:9px;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-size:var(--fs-xs);font-weight:600;
  margin-bottom:var(--sp-4);
}
.alert i{font-size:17px;flex-shrink:0;margin-top:1px}
.alert-down{background:var(--down-12);border:1px solid var(--down-25);color:var(--down)}
.alert-up{background:var(--up-12);border:1px solid var(--up-25);color:var(--up)}

/* ---------- فوتر فرم ---------- */
.form-foot{text-align:center;margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--ink-3)}
.form-foot a{color:var(--gold);font-weight:700}
.form-foot a:hover{color:var(--gold-bright)}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);
  margin-bottom:var(--sp-5);
  transition:color var(--t-fast);
}
.back-link:hover{color:var(--gold)}

/* ---------- OTP (2FA) ---------- */
.otp-head{text-align:center;margin-bottom:var(--sp-6)}
.otp-ico{
  width:64px;height:64px;margin:0 auto var(--sp-4);
  border-radius:18px;
  background:var(--gold-12);border:1px solid var(--gold-25);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:var(--gold);
  animation:ringPulse 2.8s ease-in-out infinite;
}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 var(--gold-25)}50%{box-shadow:0 0 0 12px transparent}}
.otp-row{display:flex;gap:9px;direction:ltr;justify-content:center;margin-bottom:var(--sp-4)}
.otp{
  width:50px;height:58px;text-align:center;
  background:var(--bg-inset);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  color:var(--ink-1);font-family:var(--font);font-size:22px;font-weight:800;
  outline:none;caret-color:var(--gold);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.otp:focus{border-color:var(--gold-45);box-shadow:0 0 0 3px var(--gold-12);transform:translateY(-2px)}
.otp.full{border-color:var(--gold-25);background:var(--gold-04)}
.otp-timer{text-align:center;font-size:var(--fs-xs);color:var(--ink-4);margin-bottom:var(--sp-4)}
.otp-timer b{color:var(--gold)}

/* ---------- ریسپانسیو ---------- */
@media(max-width:900px){
  .show-side{display:none}
  .panel{max-width:440px;min-height:0}
  .form-side{width:100%;padding:var(--sp-8) var(--sp-6)}
  .panel-solo{padding:var(--sp-8) var(--sp-6)}
}
@media(max-width:400px){
  .otp{width:44px;height:52px;font-size:19px}
  .stage{padding:var(--sp-4) var(--sp-3)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- v2 reskin: هم‌ترازیِ کلاس‌های alert بک‌اند با پالت v2 ---------- */
.alert-red{background:var(--down-12);border:1px solid var(--down-25);color:var(--down)}
.alert-green{background:var(--up-12);border:1px solid var(--up-25);color:var(--up)}
.alert-blue{background:var(--info-12);border:1px solid var(--info);color:var(--info)}
.alert-amber,.alert-yellow{background:var(--gold-12);border:1px solid var(--gold-25);color:var(--gold-bright)}