/* گره — ورود و عضویت */
.auth{ min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,580px); }
.auth-art{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--top) clamp(28px,5vw,84px) clamp(52px,7vw,100px); border-inline-end:1px solid var(--line-2);
  background:radial-gradient(70% 60% at 40% 45%,rgba(227,18,44,.15),transparent 68%); }
.auth-reg .auth-art{ background:radial-gradient(70% 60% at 40% 45%,rgba(255,90,31,.13),transparent 68%); }
.auth-knot{ position:absolute; z-index:-1; width:min(660px,74%); inset-inline-end:-10%; top:8%; opacity:.26; transform:rotate(14deg); pointer-events:none; }
.auth-hello{ font-size:clamp(2.8rem,6.2vw,6.2rem); max-width:11ch; }
.auth-sub{ margin-top:14px; max-width:34ch; color:var(--ash); font-size:clamp(1.05rem,1.4vw,1.25rem); }
.auth-panel{ display:flex; align-items:center; padding:var(--top) clamp(22px,4vw,60px) 72px; }
.auth-form{ width:100%; max-width:440px; margin-inline:auto; display:grid; gap:18px; }

.field{ display:grid; gap:7px; }
.field > label,.label-like{ font-weight:700; font-size:.93rem; }
.control{ position:relative; display:flex; align-items:center; border-radius:var(--r-s); background:#080203; border:1px solid rgba(243,233,228,.13);
  transition:border-color .2s,box-shadow .25s,background-color .2s; }
.control:hover{ border-color:rgba(243,233,228,.24); }
.control:focus-within{ border-color:var(--cardinal); background:#0c0204; box-shadow:0 0 0 4px rgba(227,18,44,.16),0 0 34px -8px rgba(227,18,44,.6); }
.control-ico{ position:absolute; inset-inline-start:15px; color:var(--smoke); pointer-events:none; transition:color .2s; }
.control:focus-within .control-ico{ color:var(--flare); }
.control input{ width:100%; min-height:54px; padding:12px 48px; border:0; outline:none; background:transparent; font-size:1rem; }
.control input::placeholder{ color:var(--smoke); }
.control input:-webkit-autofill{ -webkit-text-fill-color:var(--bone); -webkit-box-shadow:0 0 0 100px #0c0204 inset; caret-color:var(--bone); }
.reveal{ position:absolute; inset-inline-end:7px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:8px; background:none; color:var(--smoke); cursor:pointer; }
.reveal:hover{ color:var(--bone); }
.reveal[aria-pressed="true"]{ color:var(--flare); }
.field-msg{ min-height:1.5em; font-size:.84rem; line-height:1.6; color:var(--smoke); }
.field.has-error .control{ border-color:rgba(255,59,78,.75); }
.field.has-error .field-msg{ color:#ff8f9b; }
.field.is-ok .field-msg{ color:#9be0b0; }
.field.shake .control{ animation:shake .42s var(--ease); }
@keyframes shake{ 20%,60%{ transform:translateX(-7px); } 40%,80%{ transform:translateX(7px); } }
.form-alert{ padding:12px 16px; border-radius:var(--r-s); background:rgba(255,59,78,.1); border:1px solid rgba(255,59,78,.4); color:#ffc5cc; font-size:.94rem; }
.form-alert[hidden]{ display:none; }
.form-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.check{ position:relative; display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none; }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check-box{ flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; border:1.5px solid rgba(243,233,228,.3); color:transparent; transition:all .2s; }
.check-box .ico{ width:15px; height:15px; }
.check input:checked + .check-box{ background:var(--cardinal); border-color:var(--cardinal); color:#fff; box-shadow:0 0 16px rgba(227,18,44,.6); }
.check input:focus-visible + .check-box{ outline:2px solid var(--flare); outline-offset:3px; }
.check-lg{ align-items:flex-start; line-height:1.7; }
.check-lg .check-box{ margin-top:3px; }
.link-quiet{ color:var(--ash); font-size:.9rem; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(168,149,143,.4); }
.link-quiet:hover{ color:var(--bone); }
.auth-sticks{ margin-top:16px; }
.auth .stick{ --size:clamp(118px,9.4vw,138px); }

/* ---------- قدم‌های عضویت ---------- */
.steps{ --p:0; position:relative; list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); }
.steps::before,.steps::after{ content:""; position:absolute; top:15px; height:5px; border-radius:3px; inset-inline-start:16.66%; }
.steps::before{ inset-inline-end:16.66%; background:rgba(243,233,228,.08); }
.steps::after{ width:calc(66.66% * var(--p)); background:var(--rope); box-shadow:0 0 12px rgba(227,18,44,.5); transition:width .6s var(--ease); }
.step-dot{ position:relative; z-index:1; display:grid; justify-items:center; gap:6px; color:var(--smoke); font-size:.85rem; font-weight:700; }
.dot-n{ display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--void); border:1.5px solid rgba(243,233,228,.22); font-weight:800;
  transition:transform .4s var(--spring),background .3s,border-color .3s,box-shadow .3s; }
.step-dot.is-on,.step-dot.is-done{ color:var(--bone); }
.step-dot.is-on .dot-n{ transform:scale(1.1); color:#fff; border-color:var(--ember); background:radial-gradient(circle at 40% 30%,#ff7a3d,#c8102a 70%); box-shadow:0 0 20px rgba(255,90,31,.6); }
.step-dot.is-done .dot-n{ border-color:var(--cardinal); background:#1a0306; }
.steps-rope{ display:none; }
.step{ display:none; min-width:0; margin:0; padding:0; border:0; }
.step.is-on{ display:grid; gap:16px; animation:step-in .5s var(--ease); }
.step.is-back{ animation-name:step-back; }
:root[dir="rtl"] .step{ --dx:-30px; } :root[dir="ltr"] .step{ --dx:30px; }
@keyframes step-in{ from{ opacity:0; transform:translateX(var(--dx)); } }
@keyframes step-back{ from{ opacity:0; transform:translateX(calc(var(--dx) * -1)); } }
.step-title{ float:left; width:100%; padding:0; margin-bottom:2px; font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem,2.2vw,1.9rem); line-height:1.4; }
:root[lang="en"] .step-title{ line-height:1.2; }
.step-title + *{ clear:both; }
.chips-in{ display:flex; flex-wrap:wrap; gap:8px; }
.pick{ position:relative; }
.pick input{ position:absolute; opacity:0; }
.pick span{ display:inline-flex; padding:8px 16px; border-radius:999px; border:1px solid rgba(243,233,228,.16); font-weight:600; cursor:pointer; transition:all .2s; }
.pick span:hover{ border-color:rgba(243,233,228,.32); }
.pick input:checked + span{ color:#fff; border-color:var(--ember); background:rgba(255,90,31,.15); box-shadow:0 0 20px -5px rgba(255,90,31,.75); }
.pick input:focus-visible + span{ outline:2px solid var(--flare); outline-offset:3px; }
.meter{ display:flex; align-items:center; gap:12px; margin-top:-10px; }
.meter-bar{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.meter-bar i{ height:5px; border-radius:3px; background:rgba(243,233,228,.1); transition:background-color .3s,box-shadow .3s; }
.meter[data-score="1"] i:nth-child(-n+1){ background:#8d0b1f; }
.meter[data-score="2"] i:nth-child(-n+2){ background:var(--cardinal); }
.meter[data-score="3"] i:nth-child(-n+3){ background:var(--ember); }
.meter[data-score="4"] i{ background:var(--flare); box-shadow:0 0 10px rgba(255,163,92,.55); }
.meter-l{ min-width:8ch; color:var(--ash); font-size:.8rem; }
.reg-foot{ display:flex; align-items:center; justify-content:space-between; min-height:36px; }
.btn-back{ display:inline-flex; align-items:center; gap:6px; padding:6px 2px; border:0; background:none; color:var(--ash); font-weight:600; cursor:pointer; }
.btn-back:hover{ color:var(--bone); }
.btn-back[hidden]{ display:none; }
.step-count{ margin-inline-start:auto; color:var(--smoke); font-size:.85rem; }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none; }

@media (max-width:999.98px){
  .auth{ grid-template-columns:1fr; min-height:0; }
  .auth-art{ min-height:0; padding:100px var(--gut) 4px; border:0; }
  .auth-knot{ width:300px; inset-inline-end:-70px; top:40px; opacity:.2; }
  .auth-hello{ font-size:clamp(2.4rem,10vw,3.6rem); }
  .auth-panel{ padding:22px var(--gut) 36px; }
  .auth .stick{ --size:116px; }
}