@font-face{font-family:Peyda;font-style:normal;font-weight:100 900;font-display:swap;src:local("Peyda VF"),local("Peyda Variable"),local("Peyda"),local("Pida")}
:root{--navy:#11102f;--violet:#5c54e8;--lavender:#918cff;--ink:#24233a;--muted:#737d91;--line:#e6e7f1;--soft:#f7f7fc;--green:#178f64;--green-soft:#eaf8f2;--danger:#c33b55;--shadow:0 32px 90px -50px rgba(34,29,105,.58)}
*{box-sizing:border-box}html{background:#f7f7fc;scroll-behavior:smooth}
body{background:radial-gradient(circle at 8% 5%,rgba(139,145,255,.16),transparent 25%),linear-gradient(180deg,#fff,#f6f6fb);color:var(--ink);font-family:Peyda,Vazirmatn,Tahoma,Arial,sans-serif;margin:0;min-height:100vh}
button,input,select{font:inherit}button{cursor:pointer}button,input,select,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid rgba(92,84,232,.2);outline-offset:2px}[hidden]{display:none!important}

.page{display:flex;min-height:100vh;padding:18px}
.shell{background:#fff;border:1px solid rgba(228,228,240,.9);border-radius:30px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(390px,.88fr) minmax(470px,1.12fr);margin:auto;max-width:1180px;min-height:720px;overflow:hidden;width:100%}

.brand-panel{background:linear-gradient(145deg,var(--navy) 0%,#17143c 54%,#29236d 100%);color:#fff;display:flex;flex-direction:column;isolation:isolate;min-height:100%;overflow:hidden;padding:42px;position:relative}
.brand-panel:before,.brand-panel:after{border:1px solid rgba(255,255,255,.09);border-radius:50%;content:"";position:absolute;z-index:-1}
.brand-panel:before{height:520px;left:-270px;top:-140px;width:520px}
.brand-panel:after{bottom:-240px;height:450px;right:-210px;width:450px}
.glow{background:radial-gradient(circle,rgba(121,113,255,.44),transparent 66%);height:360px;left:-170px;position:absolute;top:100px;width:360px;z-index:-1}
.brand{align-items:center;color:#fff;display:flex;gap:12px;text-decoration:none;width:max-content}
.logo{align-items:center;background:#fff;border-radius:14px;box-shadow:0 16px 34px -22px #000;display:flex;height:48px;justify-content:center;width:48px}
.logo svg{height:29px;width:29px}
.brand-copy strong,.brand-copy small{display:block}
.brand-copy strong{font-size:22px;font-weight:950;letter-spacing:-.4px}
.brand-copy small{color:rgba(255,255,255,.58);font-size:10px;margin-top:2px}
.brand-content{margin:auto 0;padding:42px 0 30px}
.eyebrow{align-items:center;color:#b9b6ff;display:flex;font-size:11px;font-weight:850;gap:8px;margin-bottom:15px}
.eyebrow:before{background:#8b85ff;border-radius:99px;content:"";height:6px;width:6px}
.brand-content h1{font-size:clamp(31px,3vw,43px);font-weight:950;letter-spacing:-1.2px;line-height:1.52;margin:0;max-width:460px}
.brand-content h1 span{color:#9d98ff}
.brand-content>p{color:rgba(255,255,255,.65);font-size:13px;line-height:2.05;margin:18px 0 28px;max-width:450px}
.benefits{display:grid;gap:13px}
.benefit{align-items:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:15px;display:flex;gap:12px;min-height:58px;padding:10px 12px}
.benefit-icon{align-items:center;background:rgba(146,140,255,.15);border:1px solid rgba(178,173,255,.18);border-radius:11px;color:#c2bfff;display:flex;flex:0 0 36px;height:36px;justify-content:center;width:36px}
.benefit-icon svg{height:18px;width:18px}
.benefit strong,.benefit small{display:block}
.benefit strong{font-size:11px;font-weight:850}
.benefit small{color:rgba(255,255,255,.5);font-size:9px;line-height:1.7;margin-top:2px}
.trust{align-items:center;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);display:flex;font-size:9px;gap:8px;padding-top:22px}
.trust svg{color:#8ce0bd;height:16px;width:16px}

.form-panel{display:flex;flex-direction:column;min-width:0;padding:32px 50px}
.topline{align-items:center;display:flex;justify-content:space-between;min-height:44px}
.topline .mobile-brand{display:none}
.support{align-items:center;color:var(--muted);display:flex;font-size:9.5px;gap:8px}
.support a{border:1px solid var(--line);border-radius:999px;color:var(--navy);font-weight:850;padding:8px 12px;text-decoration:none}
.secure-chip{align-items:center;background:#f3f2ff;border:1px solid #e5e2ff;border-radius:999px;color:var(--violet);display:flex;font-size:8.5px;font-weight:800;gap:6px;padding:7px 10px}
.secure-chip svg{height:13px;width:13px}
.auth-wrap{margin:auto;max-width:430px;padding:28px 0;width:100%}

.tabs{background:#f4f4f9;border-radius:13px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:30px;padding:4px}
.tab{align-items:center;background:transparent;border:0;border-radius:10px;color:#7d8597;display:flex;font-size:11px;font-weight:850;justify-content:center;min-height:42px;text-decoration:none;transition:.18s ease}
.tab.active{background:#fff;box-shadow:0 5px 16px -12px #333;color:var(--navy)}

.head{margin-bottom:22px}
.head .step{color:var(--violet);display:block;font-size:9px;font-weight:900;margin-bottom:7px}
.head h2{color:var(--navy);font-size:25px;font-weight:950;letter-spacing:-.5px;line-height:1.55;margin:0}
.head p{color:var(--muted);font-size:10px;line-height:1.9;margin:6px 0 0}

.field{display:grid;gap:7px;margin-bottom:14px}
.field>span{color:#4d596d;font-size:9px;font-weight:850}
.input-wrap{position:relative}
.input-wrap input,.field select{background:#fbfbfd;border:1px solid #dfe2eb;border-radius:13px;color:var(--navy);font-size:15px;height:52px;outline:none;padding:0 14px;width:100%}
.input-wrap input:focus,.field select:focus{background:#fff;border-color:var(--violet);box-shadow:0 0 0 4px rgba(92,84,232,.075)}
.input-wrap.error input{border-color:var(--danger);box-shadow:0 0 0 4px rgba(195,59,85,.06)}
.icon-button{align-items:center;background:transparent;border:0;color:#7a8394;display:flex;height:42px;justify-content:center;left:5px;padding:0;position:absolute;top:5px;width:42px}
.icon-button svg{height:18px;width:18px}
.error-text{color:var(--danger);display:none;font-size:8px;margin:-5px 1px 12px}
.error-text.show{display:block}

.primary{align-items:center;background:var(--navy);border:0;border-radius:13px;color:#fff;display:flex;font-size:11px;font-weight:900;gap:8px;height:52px;justify-content:center;margin-top:6px;overflow:hidden;padding:0 18px;position:relative;width:100%}
.primary:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);content:"";height:100%;left:-80%;position:absolute;top:0;transform:skewX(-18deg);transition:.45s;width:45%}
.primary:hover:after{left:130%}
.primary:active{transform:translateY(1px)}
.primary:disabled{cursor:not-allowed;opacity:.62}
.primary svg{height:17px;width:17px}
.link-button{background:transparent;border:0;color:var(--violet);font-size:9px;font-weight:850;padding:8px 0}
.terms{color:#8a92a2;font-size:8px;line-height:1.85;margin:18px 4px 0;text-align:center}
.terms a{color:var(--violet);font-weight:800;text-decoration:none}

.roles{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:0 0 18px}
.role-opt{align-items:center;background:#f7f7fb;border:1px solid #ececf3;border-radius:12px;color:#7d8596;display:flex;font-size:10px;font-weight:850;justify-content:center;min-height:44px;text-decoration:none}
.role-opt input{display:none}
.role-opt.is-checked{background:#fff;box-shadow:0 5px 14px -11px rgba(17,16,47,.8);color:var(--violet)}

.row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.check{align-items:flex-start;color:#667185;display:flex;font-size:8.5px;gap:8px;line-height:1.8;margin:13px 1px}
.check input{accent-color:var(--violet);height:16px;margin:2px 0 0;width:16px}
.check a{color:var(--violet);font-weight:800;text-decoration:none}

@media(max-width:900px){
  .page{padding:0}
  .shell{border:0;border-radius:0;box-shadow:none;grid-template-columns:1fr;max-width:none;min-height:100vh}
  .brand-panel{min-height:auto;padding:28px}
  .brand-content{padding:38px 0 8px}
  .brand-content h1{font-size:31px;max-width:620px}
  .brand-content>p{max-width:630px}
  .benefits{grid-template-columns:1fr 1fr}
  .trust{margin-top:28px}
  .form-panel{padding:28px 34px}
  .auth-wrap{max-width:560px;padding:32px 0}
}
@media(max-width:600px){
  body{background:#fff}
  .brand-panel{border-radius:0 0 24px 24px;padding:18px 18px 22px}
  .brand-panel>.brand,.brand-panel .benefits,.brand-panel .trust{display:none}
  .brand-content{margin:0;padding:10px 0 0}
  .eyebrow{font-size:8px;margin-bottom:7px}
  .brand-content h1{font-size:22px;letter-spacing:-.4px;line-height:1.55}
  .brand-content>p{font-size:9px;line-height:1.75;margin:6px 0 0;max-width:360px}
  .form-panel{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  .topline{min-height:43px}
  .topline .mobile-brand{align-items:center;color:var(--navy);display:flex;font-size:13px;font-weight:950;gap:7px}
  .mobile-brand .mini-logo{align-items:center;background:var(--navy);border-radius:9px;display:flex;height:32px;justify-content:center;width:32px}
  .mobile-brand svg{height:20px;width:20px}
  .support>span,.secure-chip{display:none}
  .support a{font-size:8px;padding:7px 10px}
  .auth-wrap{padding:18px 0}
  .tabs{margin-bottom:23px}
  .tab{min-height:44px}
  .head{margin-bottom:19px}
  .head h2{font-size:22px}
  .head p{font-size:9px}
  .input-wrap input,.field select{font-size:16px;height:54px}
  .primary{height:54px}
  .row{grid-template-columns:1fr}
  .terms{margin-bottom:4px}
}
@media(max-width:360px){
  .brand-panel{padding-left:14px;padding-right:14px}
  .form-panel{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* --- روش ورود/تأیید با کد یکبارمصرف (ملی پیامک) --- */
.method-tabs{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:0 0 18px}
.method-tab{align-items:center;background:#f7f7fb;border:1px solid #ececf3;border-radius:12px;color:#7d8596;cursor:pointer;display:flex;font-size:10.5px;font-weight:850;justify-content:center;min-height:44px}
.method-tab.active{background:#fff;border-color:#e3e1ff;box-shadow:0 5px 14px -11px rgba(17,16,47,.8);color:var(--violet)}
.otp-code-input{direction:ltr;font-size:22px;font-weight:900;letter-spacing:10px;text-align:center}
.otp-hint{color:var(--muted);font-size:9px;line-height:1.9;margin:-4px 1px 14px}
.otp-hint b{color:var(--ink);font-weight:850}
.otp-actions{align-items:center;display:flex;justify-content:space-between;margin:2px 0 4px}
.otp-actions .link-button:disabled{color:#b7bccb;cursor:not-allowed}
.verified-banner{align-items:center;background:var(--green-soft);border:1px solid #bfe9d8;border-radius:13px;color:var(--green);display:flex;font-size:10px;font-weight:800;gap:9px;margin-bottom:18px;padding:12px 14px}
.verified-banner i{align-items:center;background:#fff;border-radius:50%;display:flex;flex:0 0 22px;font-style:normal;height:22px;justify-content:center}
.verified-banner b{direction:ltr;display:inline-block}
.otp-info{color:var(--danger);display:none;font-size:8px;margin:-5px 1px 12px}
.otp-info.show{display:block}
.otp-info.tone-ok{color:var(--green)}