/* Hooshi auth: login.zip shell + 1.zip OTP orbit (unified)
   فونت: فقط Google Fonts Vazirmatn مثل لندینگ — بدون @font-face محلی تداخلی */
:root{
  --brand:#00b894;
  --brand-dark:#00a085;
  --brand-soft:rgba(0,184,148,.12);
  --gold:#fdcb6e;
  --text:#2d3436;
  --muted:#636e72;
  --card:#ffffff;
  --font:"Vazirmatn",Tahoma,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --otp-green:#00b894;
  --otp-text:#f0f1f3;
  --otp-muted:#8d9199;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body.auth-combo{
  font-family:var(--font);
  display:flex;justify-content:center;align-items:center;
  min-height:100svh;width:100%;
  background:linear-gradient(135deg,var(--brand) 0%,var(--gold) 100%);
  overflow:hidden; /* مثل login.zip تا اسلاید کارت‌ها دیده شود */
  direction:rtl;padding:72px 16px 28px;
  color:var(--text);
}
[data-auth-combo]{
  width:min(420px,100%);
  max-width:100%;
  flex:0 1 auto;
  overflow:visible;
  position:relative;
}
.brand-link{
  position:fixed;top:20px;right:24px;z-index:20;
  font-family:var(--font);
  font-weight:800;color:#fff;text-decoration:none;font-size:18px;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}
.brand-link span{color:#fff7c2}
/* بالای کارت — روی عنوان «ورود/ثبت‌نام» ننشیند */
.auth-flash{
  position:relative;z-index:5;
  width:100%;margin:0 0 14px;padding:12px 16px;border-radius:12px;
  font-family:var(--font);
  font-size:13px;line-height:1.7;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.auth-flash.err{background:#fff1f0;color:#c0392b;border:1px solid #f5c6c2}
.auth-flash.ok{background:#e8fff8;color:#0b6b54;border:1px solid #b7ebd9}

/* —— login.zip dual cards + انیمیشن اصلی (عیناً از style.css) —— */
.wrapper{
  position:relative;width:100%;max-width:420px;height:560px;margin:0 auto;
}
.form-wrapper{
  position:absolute;top:0;right:0;
  display:flex;justify-content:center;align-items:center;
  width:100%;height:100%;
  background:#fff;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  border-radius:16px;
  backdrop-filter:blur(10px);
}
.wrapper.animate-signUp .form-wrapper.sign-in{
  transform:rotate(-7deg);
  animation:animateRotate .7s ease-in-out forwards;
  animation-delay:.3s;
}
.wrapper.animate-signIn .form-wrapper.sign-in{
  animation:animateSignIn 1.5s ease-in-out forwards;
}
.wrapper .form-wrapper.sign-up{
  transform:rotate(-7deg);
}
.wrapper.animate-signIn .form-wrapper.sign-up{
  animation:animateRotate .7s ease-in-out forwards;
  animation-delay:.3s;
}
.wrapper.animate-signUp .form-wrapper.sign-up{
  animation:animateSignUp 1.5s ease-in-out forwards;
}
@keyframes animateSignIn{
  0%{transform:translateX(0)}
  50%{transform:translateX(500px)}
  100%{transform:translateX(0) rotate(-7deg)}
}
@keyframes animateRotate{
  0%{transform:rotate(-7deg)}
  100%{transform:rotate(0);z-index:1}
}
@keyframes animateSignUp{
  0%{transform:translateX(0);z-index:1}
  50%{transform:translateX(-500px)}
  100%{transform:translateX(0) rotate(-7deg)}
}
.form-wrapper form,.form-panel{width:100%;padding:40px}
/* عنوان ورود/ثبت‌نام — همان Vazirmatn و وزن تیتر لندینگ */
.form-wrapper h2{
  font-family:var(--font);
  font-size:clamp(1.85rem,4.2vw,2.65rem);
  color:#212121;
  text-align:center;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.45;
  margin:0 0 10px;
}
.form-lead{text-align:center;color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 8px}
.input-group{position:relative;width:100%;margin:28px 0}
.input-group label{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  font-size:15px;color:var(--muted);padding:0 8px;pointer-events:none;transition:.35s;background:#fff;
}
.input-group input,.input-group select{
  width:100%;height:48px;font-size:15px;color:var(--text);padding:0 16px;
  background:transparent;border:2px solid #ddd;outline:none;border-radius:8px;transition:.3s;text-align:right;
  font-family:inherit;
}
.input-group input[dir=ltr]{text-align:left;direction:ltr}
.input-group input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label,
.input-group input:valid~label{
  top:0;font-size:12px;background:#fff;color:var(--brand);font-weight:600;
}
.hint-row{margin:-8px 0 16px;font-size:12px;color:var(--muted);line-height:1.7}
.btn{
  position:relative;width:100%;height:48px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  box-shadow:0 4px 15px rgba(0,184,148,.4);
  font-size:16px;color:#fff;font-weight:700;cursor:pointer;border-radius:8px;border:none;outline:none;
  transition:all .3s;overflow:hidden;font-family:inherit;z-index:0;
}
.btn::before{
  content:'';position:absolute;top:0;right:-100%;width:100%;height:100%;
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 100%);transition:.4s;z-index:-1;
}
.btn:hover::before{right:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,184,148,.5)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.65;cursor:default;transform:none}
.sign-link{font-size:14px;text-align:center;margin:22px 0 0;color:var(--muted)}
.sign-link a,.tab-link{
  color:var(--brand);text-decoration:none;font-weight:700;cursor:pointer;background:none;border:0;font:inherit;
}
.sign-link a:hover,.tab-link:hover{color:var(--brand-dark);text-decoration:underline}
.mode-tabs{display:flex;gap:8px;margin:8px 0 4px;background:#f4f6f7;border-radius:10px;padding:4px}
.mode-tabs button{
  flex:1;border:0;background:transparent;border-radius:8px;height:36px;font:600 13px var(--font);
  color:var(--muted);cursor:pointer;transition:.2s;
}
.mode-tabs button.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.subpane[hidden]{display:none!important}
.email-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.7}
.captcha-row{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.captcha-img{
  display:block;width:200px;height:64px;border-radius:10px;border:1px solid #d7e8e2;
  background:#e8f8f3;box-shadow:inset 0 1px 2px #fff8;
}
.captcha-refresh{
  width:42px;height:42px;border-radius:10px;border:2px solid #ddd;background:#fff;
  color:var(--brand);font-size:22px;line-height:1;cursor:pointer;flex-shrink:0;
  transition:border-color .2s,transform .2s;
}
.captcha-refresh:hover{border-color:var(--brand);transform:rotate(-20deg)}

/* hide dual cards when OTP — فقط با کلاس اختصاصی، نه .wrapper عمومی */
body.auth-combo.otp-active > .brand-link + [data-auth-combo] .wrapper,
body.auth-combo.otp-active [data-auth-combo] > .wrapper{display:none !important}
body.auth-combo.otp-active{
  align-items:flex-start;padding-top:36px;background:
  radial-gradient(ellipse at 50% -10%,rgba(0,184,148,.35),transparent 45%),
  linear-gradient(160deg,#0b1210 0%,#10201c 40%,#0a1412 100%);
}

/* —— 1.zip OTP stage (scoped) —— */
.otp-stage{width:min(100%,700px);text-align:center;margin:0 auto;display:none}
body.auth-combo.otp-active .otp-stage{display:block}
.otp-stage .page-title{font-size:clamp(22px,4vw,36px);font-weight:650;letter-spacing:-1px;margin:0 0 20px;color:#e1e5eb}
.otp-stage .version{font-family:Arial,sans-serif;font-size:.52em;color:#f3f4f7;margin-right:7px}
.otp-stage .panel{
  position:relative;isolation:isolate;overflow:hidden;min-height:680px;border-radius:48px;
  background:linear-gradient(145deg,#14171d 0%,#101318 48%,#0d1115 100%);
  border:1px solid #ffffff06;box-shadow:inset 0 2px 2px #ffffff05,0 24px 80px #0005;
  padding:62px 30px 35px;transition:box-shadow 1s;
}
.otp-stage .handle{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:65px;height:6px;background:#33373c;border-radius:10px}
.otp-stage .heading{margin:0 0 17px;font-size:28px;font-weight:650;line-height:1.6;color:var(--otp-text);transition:color .6s}
.otp-stage .subtitle{color:var(--otp-muted);margin:0;font-size:16px;line-height:1.9;min-height:32px}
.otp-stage .phone{direction:ltr;unicode-bidi:isolate-override;display:inline-block;white-space:nowrap;color:#a5a8af;font-weight:600}
.otp-stage .scene{position:relative;height:390px;display:grid;place-items:center;direction:ltr}
.otp-stage .orbit{position:absolute;width:226px;height:226px;border:1px solid #9ca2ad00;border-radius:50%;transition:border-color .7s,transform .7s}
.otp-stage .orbit:before{content:"";position:absolute;inset:-2px;border-radius:50%;border-top:1px solid #fff0;border-left:1px solid #fff0;transition:border-color .7s}
.otp-stage .core{width:6px;height:6px;background:#dadde2;border-radius:50%;opacity:0;box-shadow:0 0 12px #fff8;transition:opacity .5s}
.otp-stage .rotor{position:absolute;inset:0;pointer-events:none;will-change:transform;transform:rotate(0deg) translateZ(0)}
.otp-stage .digits{position:absolute;inset:0;pointer-events:none;transition:opacity .4s,transform .65s var(--ease);will-change:transform,opacity}
.otp-stage .digit{
  --x:0px;--y:0px;position:absolute;left:50%;top:50%;width:92px;height:96px;margin:-48px 0 0 -46px;
  border-radius:25px;border:2px solid #41454c;background:linear-gradient(140deg,#22262d,#1c2026);
  display:grid;place-items:center;font:500 39px/1 Arial,sans-serif;color:#eef0f4;
  transform:translate(var(--x),var(--y));
  transition:transform .65s cubic-bezier(.25,.8,.25,1),border-color .35s,background .5s,box-shadow .4s,opacity .6s;
  box-shadow:inset 0 1px 1px #ffffff06;will-change:transform;
}
.otp-stage .digit:nth-child(1){--x:-165px}
.otp-stage .digit:nth-child(2){--x:-55px}
.otp-stage .digit:nth-child(3){--x:55px}
.otp-stage .digit:nth-child(4){--x:165px}
.otp-stage .digit.filled{border-color:#858b96;background:linear-gradient(140deg,#2b2f3a,#232731);box-shadow:inset 0 1px 2px #ffffff24,0 0 16px #ffffff04}
.otp-stage .digit.active{border-color:#d2dae5;box-shadow:0 0 0 6px #a6b7d215,0 0 26px #b4d0ed12,inset 0 0 0 3px #ffffff05}
.otp-stage .digit.active:after{content:"";width:2px;height:33px;position:absolute;background:#e8edf4;box-shadow:0 0 9px #fff5;animation:blink 1.05s steps(2,end) infinite}
.otp-stage .digit.active.filled:after{display:none}
.otp-stage .digit.pop span{animation:digit-in .3s var(--ease)}
.otp-stage.code-long .digits{display:none}
.otp-stage.code-long .code-input{
  position:relative;left:auto;top:auto;transform:none;opacity:1;
  width:min(100%,320px);height:64px;caret-color:#e8edf4;
  text-align:center;letter-spacing:.18em;font-size:22px;font-weight:650;
  border-radius:16px;border:1px solid #858b96;background:#232731;color:#f0f1f3;
}
.otp-stage.code-long .scene{height:160px}
.otp-stage .resend-row{position:absolute;left:20px;right:20px;bottom:118px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;color:var(--otp-muted);font-size:15px;min-height:40px;margin:0;transition:opacity .4s}
.otp-stage .resend{border:0;background:none;color:#a5a8af;padding:5px 0;min-width:145px;font:inherit;cursor:pointer}
.otp-stage .resend:disabled{cursor:default}
.otp-stage .resend:not(:disabled){color:var(--otp-green)}
.otp-stage .status{position:absolute;bottom:170px;left:20px;right:20px;margin:0;line-height:1.8;font-size:14px;color:#dc8b8b;min-height:25px;opacity:0;transition:opacity .3s}
.otp-stage .status.visible{opacity:1}
.otp-stage .success-art{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%) scale(.82);opacity:0;pointer-events:none;transition:opacity .65s,transform 1.2s var(--ease)}
.otp-stage .square-ring{position:absolute;inset:0;border-radius:79px;border:2px solid #303a3b;box-shadow:inset 0 0 12px #00b89404,0 0 15px #00b89404}
.otp-stage .square-ring.inner{inset:45px;border-radius:56px;border-color:#283b37;filter:blur(1px)}
.otp-stage .check-box{position:absolute;inset:103px;border-radius:25px;background:#06372a;border:3px solid #00b894;box-shadow:0 0 0 3px #00b8940b,0 0 42px #00b8941c;display:grid;place-items:center}
.otp-stage .check{width:31px;fill:none;stroke:#d7fff3;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.otp-stage .check path{stroke-dasharray:30;stroke-dashoffset:30}
.otp-stage .particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#00b894;box-shadow:0 0 6px #00b89488;opacity:0}
.otp-stage .success-actions{position:absolute;bottom:27px;left:0;right:0;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .6s .3s,transform .8s .3s var(--ease)}
.otp-stage .secure{color:#00b894;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:21px}
.otp-stage .secure svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.otp-stage .continue{
  border:0;border-radius:40px;background:#00b894;color:#034d3d;font-weight:650;padding:14px 55px;font-size:18px;
  outline:2px solid #00b894;outline-offset:5px;box-shadow:0 0 25px #00b8940c;transition:background .2s,transform .2s;font-family:inherit;cursor:pointer;
}
.otp-stage .continue:hover{background:#26d0b0;transform:translateY(-2px)}
.otp-stage .footnote{color:#8aa39a;font-size:13px;margin:22px 0 0;line-height:2}
.otp-stage .panel.verifying .orbit{border-color:#979da188;animation:orbit-spin 2.58s cubic-bezier(.72,0,.8,.45) .12s 1 both}
.otp-stage .panel.verifying .orbit:before{border-top-color:#d8dee5aa;border-left-color:#d8dee52a}
.otp-stage .panel.verifying .core{opacity:1}
.otp-stage .panel.verifying .rotor{animation:orbit-spin 2.58s cubic-bezier(.72,0,.8,.45) .12s 1 both}
.otp-stage .panel.verifying .digit{border-color:#adb2bc;background:linear-gradient(140deg,#303440,#232730);box-shadow:inset 0 1px 3px #fff2,0 0 14px #ffffff05}
.otp-stage .panel.verifying .digit:nth-child(1){--x:-113px;--y:0px;transform:translate(var(--x),var(--y)) rotate(0deg)}
.otp-stage .panel.verifying .digit:nth-child(2){--x:0px;--y:-113px}
.otp-stage .panel.verifying .digit:nth-child(3){--x:113px;--y:0px}
.otp-stage .panel.verifying .digit:nth-child(4){--x:0px;--y:113px}
.otp-stage .panel.verifying .code-input,.otp-stage .panel.success .code-input{pointer-events:none}
.otp-stage .panel.success .digits{opacity:0;transform:scale(.4);transition:opacity .35s,transform .8s var(--ease)}
.otp-stage .panel.success .heading{color:#00b894}
.otp-stage .panel.success .orbit,.otp-stage .panel.success .core{opacity:0}
.otp-stage .panel.success .success-art{opacity:1;transform:translate(-50%,-50%) scale(1)}
.otp-stage .panel.success .check path{animation:draw-check .55s .45s var(--ease) forwards}
.otp-stage .panel.success .particle{animation:sparkle 3s var(--ease) infinite;animation-delay:var(--delay)}
.otp-stage .panel.success .success-actions{opacity:1;transform:translateY(0);pointer-events:auto}
.otp-stage .panel.success .resend-row{opacity:0;pointer-events:none}
.otp-stage .panel.error .digits{animation:shake .45s ease-in-out}
.otp-stage .panel.error .digit{border-color:#d4858566;box-shadow:0 0 20px #dc77770a}
.otp-stage .panel.continued .check-box{animation:confirm-pulse .7s var(--ease)}
.otp-stage .panel.verifying.invalid-code .rotor,
.otp-stage .panel.verifying.invalid-code .orbit{animation-name:orbit-rush;animation-duration:.88s;animation-delay:.12s}

@keyframes blink{50%{opacity:0}}
@keyframes digit-in{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
@keyframes orbit-spin{from{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1080deg) translateZ(0)}}
@keyframes orbit-rush{from{transform:rotate(0deg) translateZ(0)}to{transform:rotate(540deg) translateZ(0)}}
@keyframes draw-check{to{stroke-dashoffset:0}}
@keyframes sparkle{0%,100%{opacity:.1;transform:translateY(6px) scale(.5)}45%{opacity:.8;transform:translateY(-6px) scale(1.1)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes confirm-pulse{50%{transform:scale(1.13);box-shadow:0 0 60px #00b89455}}

@media(max-width:600px){
  .form-wrapper form,.form-panel{padding:32px 24px 28px}
  .wrapper{height:580px}
  .otp-stage .panel{min-height:640px;padding:65px 19px 28px;border-radius:38px}
  .otp-stage .heading{font-size:24px}
  .otp-stage .subtitle{font-size:14px}
  .otp-stage .scene{height:345px}
  .otp-stage .digit{width:64px;height:72px;margin:-36px 0 0 -32px;border-radius:20px;font-size:31px}
  .otp-stage .digit:nth-child(1){--x:-118px}
  .otp-stage .digit:nth-child(2){--x:-39px}
  .otp-stage .digit:nth-child(3){--x:39px}
  .otp-stage .digit:nth-child(4){--x:118px}
  .otp-stage .code-input{width:310px;height:85px}
  .otp-stage .orbit{width:190px;height:190px}
  .otp-stage .panel.verifying .digit:nth-child(1){--x:-95px}
  .otp-stage .panel.verifying .digit:nth-child(2){--y:-95px}
  .otp-stage .panel.verifying .digit:nth-child(3){--x:95px}
  .otp-stage .panel.verifying .digit:nth-child(4){--y:95px}
  .otp-stage .success-art{width:265px;height:265px}
  .otp-stage .check-box{inset:88px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .otp-stage .panel.verifying .rotor{animation:none}
  .otp-stage .panel.success .check path{stroke-dashoffset:0}
}