/* ==========================================================================
   ورود و راه‌اندازی — صفحه‌هایی که پوستهٔ پنل را ندارند
   --------------------------------------------------------------------------
   این دو صفحه عمداً نه ریل دارند نه نوار پایین: در لحظه‌ی ورود و راه‌اندازی،
   ناوبری فقط حواس را پرت می‌کند. مرکز ثقل باید یک چیز باشد و فقط یک چیز.
   ========================================================================== */

.pbare {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.pbare__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0 var(--sp-4);
}
.pbare__sys { font-size: var(--fs-xs); color: var(--text-4); }
.pbare__actions { margin-inline-start: auto; display: flex; gap: var(--sp-1); }

.pbare__body {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-4) var(--sp-4) var(--sp-12);
}

/* ==========================================================================
   ورود — یک کارت، یک پرسش
   ========================================================================== */
.pauth {
  width: 100%;
  max-width: 380px;
  margin-block-start: 6vh;
}
.pauth__mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-block-end: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-family: var(--font-en);
  font-weight: 800;
}
.pauth__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pauth__lead {
  margin-block: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: var(--lh-body);
}
.pauth__form { display: grid; gap: var(--sp-3); }
.pauth__alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
}
.plink {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 24px;
}
.plink:hover { color: var(--brand-ink, var(--brand)); }
/* لینک‌های «اقدام» (نه لینکِ درونِ متن) کنترل‌اند و هدف لمسی می‌خواهند.
   داخل .pauth__alt و .pwiz__actions فرزندِ فلکس‌اند، پس min-height اثر دارد. */
@media (pointer: coarse) {
  .pauth__alt .plink,
  .pwiz__actions .plink { min-height: 44px; }
}

.pauth__terms {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-2xs);
  color: var(--text-4);
  line-height: var(--lh-body);
}

/* ---------- فیلدها ---------- */
.pfield { display: grid; gap: var(--sp-2); }
.pfield__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.pfield__input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: var(--border-w) solid var(--line-strong);
  color: var(--text);
  font-size: var(--fs-md);
  transition: border-color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
}
.pfield__input::placeholder { color: var(--text-4); }
.pfield__input:focus-visible { border-color: var(--brand); background: var(--surface-1); }
.pfield__input[aria-invalid="true"] { border-color: var(--danger); }
.pfield__input--num {
  font-family: var(--font-num);
  letter-spacing: .12em;
  text-align: center;
}
/* پیام خطا: شکل + متن، و همیشه کنار همان فیلد */
.pfield__err {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  color: var(--danger-ink);
}
.pfield__err .ico { width: 14px; height: 14px; flex: 0 0 auto; }
.pfield[data-invalid="true"] .pfield__err { display: flex; }
.pfield__hint { font-size: var(--fs-2xs); color: var(--text-4); }

/* ==========================================================================
   جادوی راه‌اندازی
   ========================================================================== */
.pwiz {
  width: 100%;
  max-width: 1060px;
  display: grid;
  gap: var(--sp-5);
}
.pwiz__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.pwiz__bar {
  flex: 1 1 auto;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.pwiz__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width var(--d-3) var(--e-out);
}
.pwiz__grid { display: grid; gap: var(--sp-5); }
.pwiz__ask { display: grid; gap: var(--sp-4); align-content: start; }
.pwiz__title { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.pwiz__lead { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-body); }
.pwiz__actions { display: flex; align-items: center; gap: var(--sp-3); }
.pwiz__actions .pbtn--primary { flex: 1 1 auto; }

/* ---------- انتخاب نسخهٔ آماده ---------- */
.plooks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.plook {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  background: var(--surface-2);
  transition: border-color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}
.plook:hover { transform: translateY(-2px); }
.plook[aria-pressed="true"] { border-color: var(--brand); }
.plook__swatch {
  height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(120deg, var(--look-a), var(--look-b));
}
.plook__name { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-2); text-align: center; }

.pswatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pswatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw);
  transition: transform var(--d-1) var(--e-spring), border-color var(--d-1) var(--e-out);
}
.pswatch:hover { transform: scale(1.08); }
.pswatch[aria-pressed="true"] { border-color: var(--text); }

/* ---------- بارگذار نشان ---------- */
.plogo-pick {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 2px dashed var(--line-strong);
  background: var(--surface-2);
}
.plogo-pick__preview {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-xl);
  overflow: hidden;
}
.plogo-pick__preview img { width: 100%; height: 100%; object-fit: cover; }
.plogo-pick__body { display: grid; gap: var(--sp-2); }

/* ---------- نشانی سایت ---------- */
.paddr { display: flex; align-items: stretch; }
.paddr__input {
  flex: 1 1 auto;
  min-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  font-family: var(--font-en);
  direction: ltr;
  text-align: left;
}
.paddr__suffix {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0 var(--sp-3);
  border: var(--border-w) solid var(--line-strong);
  border-inline-start: 0;
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text-3);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
}
.paddr-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  min-height: 18px;
}
.paddr-status .ico { width: 14px; height: 14px; }
.paddr-status[data-state="free"] { color: var(--success-ink); }
.paddr-status[data-state="taken"] { color: var(--warning-ink); }
.paddr-status[data-state="checking"] { color: var(--text-4); }

/* ==========================================================================
   پیش‌نمایش زندهٔ سایت
   نمونه‌ای کوچک از خودِ سایت، با همان توکن‌ها — نه یک تصویر ثابت. چیزی که
   همکار می‌بیند باید همان چیزی باشد که کاربرش می‌بیند.
   ========================================================================== */
.ppreview { display: grid; gap: var(--sp-2); align-content: start; }
.ppreview__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text-4);
}
.ppreview__toggle { margin-inline-start: auto; display: flex; gap: 4px; }
.ppreview__tab {
  height: 26px;
  min-width: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
}
.ppreview__tab[aria-pressed="true"] { background: var(--brand-fill, var(--brand)); color: var(--on-brand); }
/* روی دستگاه لمسی، کلیدهای پیش‌نمایش هم کنترل‌اند و باید ۴۴ باشند. */
@media (pointer: coarse) {
  .ppreview__tab { height: 44px; }
}

.ppreview__frame {
  border-radius: var(--r-lg);
  border: var(--border-w) solid var(--line);
  overflow: hidden;
  background: var(--p-bg, var(--bg));
  transition: max-width var(--d-3) var(--e-out);
  margin-inline: auto;
  width: 100%;
}
.ppreview__frame[data-view="mobile"] { max-width: 300px; }

/* نمونه‌ی سایت — رنگ‌هایش از متغیرهای محلی می‌آید، پس با انتخاب همکار زنده
   عوض می‌شود بدون آنکه پوستهٔ پنل تکان بخورد. */
.psite { font-size: 11px; color: var(--p-text, var(--text)); }
.psite__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--p-surface, var(--surface-1));
  border-block-end: 1px solid var(--p-line, var(--line));
}
.psite__mark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: calc(6px * var(--p-round, 1));
  background: var(--p-brand, var(--brand));
  color: var(--p-onbrand, #fff);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  overflow: hidden;
}
.psite__mark img { width: 100%; height: 100%; object-fit: cover; }
.psite__name { font-weight: 700; font-size: 12px; }
.psite__nav { margin-inline-start: auto; display: flex; gap: 10px; opacity: .65; font-size: 10px; }
.psite__cta {
  padding: 4px 10px;
  border-radius: calc(999px * var(--p-round, 1));
  background: var(--p-brand, var(--brand));
  color: var(--p-onbrand, #fff);
  font-weight: 700;
  font-size: 10px;
}
.psite__hero {
  height: 88px;
  margin: 12px;
  border-radius: calc(14px * var(--p-round, 1));
  background: linear-gradient(120deg, var(--p-brand, var(--brand)), var(--p-accent, var(--accent-violet)));
  box-shadow: 0 calc(10px * var(--p-depth, 1)) calc(24px * var(--p-depth, 1)) rgb(0 0 0 / calc(.4 * var(--p-depth, 1)));
}
.psite__row { display: flex; gap: 8px; padding: 0 12px 14px; }
.psite__poster {
  flex: 1 1 0;
  aspect-ratio: 230 / 345;
  border-radius: calc(10px * var(--p-round, 1));
  background: var(--p-surface2, var(--surface-3));
  box-shadow: 0 calc(6px * var(--p-depth, 1)) calc(16px * var(--p-depth, 1)) rgb(0 0 0 / calc(.35 * var(--p-depth, 1)));
}
.psite__label { padding: 0 12px 8px; font-size: 10px; font-weight: 700; opacity: .8; }

/* ==========================================================================
   صفحهٔ «آماده شد»
   ========================================================================== */
.pdone { text-align: center; display: grid; gap: var(--sp-4); justify-items: center; max-width: 460px; }
.pdone__ico {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--success) 20%, var(--surface-2));
  color: var(--success-ink);
}
.pdone__ico .ico { width: 30px; height: 30px; }
.pdone__title { font-size: var(--fs-xl); font-weight: 800; color: var(--text); }
.pdone__url {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: var(--border-w) solid var(--line);
  font-family: var(--font-en);
  direction: ltr;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.pdone__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ==========================================================================
   دسکتاپ: پرسش و پیش‌نمایش کنار هم
   ========================================================================== */
@media (min-width: 900px) {
  .pwiz__grid { grid-template-columns: 420px 1fr; gap: var(--sp-8); align-items: start; }
  .ppreview { position: sticky; inset-block-start: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .pwiz__fill, .plook, .pswatch, .ppreview__frame { transition: none !important; }
}
:root[data-motion="off"] .pwiz__fill,
:root[data-motion="off"] .plook,
:root[data-motion="off"] .pswatch,
:root[data-motion="off"] .ppreview__frame { transition: none !important; }

/* ==========================================================================
   نشانِ متحرک — «کریستالِ در حالِ تشکیل»
   --------------------------------------------------------------------------
   فقط خط و نقطه. هیچ سطحِ پرشده‌ای در کار نیست.
   هندسه از docs/make-crystal.py می‌آید؛ این‌جا فقط زمان و رنگ است.

   منطقِ حرکت: هر لبه یک «طول» (--len) و یک «تأخیر» (--d) دارد که از فاصله‌اش
   تا مرکز حساب شده. پس موج از وسط شروع می‌شود و به لبه‌ها می‌رسد — چیزی که
   چشم آن را «تشکیل شدن» می‌خواند، نه «ظاهر شدن».
   ========================================================================== */
.pcrystal {
  width: min(460px, 100%);
  margin: 0 auto var(--sp-5);
  line-height: 0;
}
.crystal {
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--brand);
}

.crystal line,
.crystal circle { vector-effect: non-scaling-stroke; }

/* ---------- لبه‌های شبکه ---------- */
.crystal__edge {
  stroke: currentColor;
  /* وزن و شفافیت از خودِ عنصر می‌آید (مولد حسابشان کرده): هستهٔ کریستال
     پررنگ و ضخیم، لبه‌ها نازک و محو. همین شیب، عمق می‌سازد. */
  stroke-width: var(--w, 1);
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: cs-crystal-edge 7s var(--e-in-out, cubic-bezier(.65,0,.35,1)) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cs-crystal-edge {
  0%        { stroke-dashoffset: var(--len); opacity: 0; }
  4%        { opacity: var(--o, .55); }
  20%       { stroke-dashoffset: 0; opacity: var(--o, .55); }
  58%       { stroke-dashoffset: 0; opacity: var(--o, .55); }
  78%       { stroke-dashoffset: calc(var(--len) * -1); opacity: 0; }
  100%      { stroke-dashoffset: calc(var(--len) * -1); opacity: 0; }
}

/* ---------- گره‌ها ---------- */
.crystal__node {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: cs-crystal-node 7s var(--e-out, cubic-bezier(.22,1,.36,1)) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cs-crystal-node {
  0%        { opacity: 0; scale: 0; }
  14%       { opacity: 1; scale: 1.5; }
  24%       { opacity: .8; scale: .85; }
  58%       { opacity: .8; scale: .85; }
  80%       { opacity: 0; scale: 0; }
  100%      { opacity: 0; scale: 0; }
}
/* گره‌های مرکزی کمی درشت‌تر و روشن‌تر — بذرِ کریستال */
.crystal__node--core { r: 2.1; filter: drop-shadow(0 0 6px currentColor); }

/* ---------- ریل‌ها و نقطهٔ دونده ---------- */
.crystal__rail {
  stroke: currentColor;
  stroke-width: .6;
  opacity: .1;
}
.crystal__run {
  stroke: var(--accent-violet, currentColor);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* یک خطِ کوتاه که در طولِ ریل می‌دود: دشِ ۲۲ واحدی در فاصلهٔ ۴۶۰ واحدی */
  stroke-dasharray: 22 460;
  stroke-dashoffset: 482;
  opacity: .85;
  animation: cs-crystal-run 7s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cs-crystal-run {
  0%   { stroke-dashoffset: 482; }
  100% { stroke-dashoffset: -22; }
}

/* در تمِ روشن، خطوطِ نازک روی زمینهٔ سفید گم می‌شوند */
:root[data-theme="light"] .crystal__edge { stroke-width: 1.15; }
:root[data-theme="light"] .crystal__rail { opacity: .16; }

/* ---------- احترام به ترجیح کاربر ----------
   حرکت خاموش یعنی شکلِ کامل، ساکن — نه یک قابِ خالی. */
@media (prefers-reduced-motion: reduce) {
  .crystal__edge { animation: none; stroke-dashoffset: 0; opacity: .5; }
  .crystal__node { animation: none; opacity: .85; scale: 1; }
  .crystal__run  { animation: none; opacity: 0; }
}
:root[data-motion="off"] .crystal__edge { animation: none; stroke-dashoffset: 0; opacity: .5; }
:root[data-motion="off"] .crystal__node { animation: none; opacity: .85; scale: 1; }
:root[data-motion="off"] .crystal__run  { animation: none; opacity: 0; }

/* نشان و کارتِ ورود روی هم می‌نشینند، نه کنار هم.
   (.pbare__body یک ردیفِ فلکس است؛ بدون این ظرف، هر دو فرزند در یک سطر
   می‌نشستند و نشان از کنارِ صفحه بیرون می‌زد.) */
.plogin {
  width: 100%;
  max-width: 480px;
  display: grid;
  justify-items: center;
  margin-block-start: 4vh;
}
.plogin .pauth { margin-block-start: 0; }


/* ---------- سیلوئت: وجه‌های بیرونیِ کریستال ----------
   این‌ها با تأخیرِ کمتر و روشن‌تر کشیده می‌شوند، پس چشم اول شکلِ کلی را
   می‌گیرد و بعد تورِ درونی را — همان ترتیبی که «تشکیل شدن» را باورپذیر می‌کند. */
.crystal__facet {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: cs-crystal-facet 7s cubic-bezier(.65, 0, .35, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cs-crystal-facet {
  0%   { stroke-dashoffset: var(--len); opacity: 0; }
  6%   { opacity: .95; }
  26%  { stroke-dashoffset: 0; opacity: .95; }
  60%  { stroke-dashoffset: 0; opacity: .95; }
  80%  { stroke-dashoffset: calc(var(--len) * -1); opacity: 0; }
  100% { stroke-dashoffset: calc(var(--len) * -1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crystal__facet { animation: none; stroke-dashoffset: 0; opacity: .9; }
}
:root[data-motion="off"] .crystal__facet { animation: none; stroke-dashoffset: 0; opacity: .9; }