/* ================================================================
   صفحهٔ ورود/عضویت — استایل تکمیلی
   ----------------------------------------------------------------
   اجزای فرم و تب‌ها یک‌بار این‌جا تعریف می‌شوند. رنگ‌ها از توکن‌های
   قالب می‌آیند، بدون رنگ خام.
   ================================================================ */

/* تب‌ها */
.jj-auth-tab {
  background: transparent;
  color: rgb(var(--c-ink-2));
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s, background-color .2s;
  cursor: pointer;
}
.jj-auth-tab:hover { color: rgb(var(--c-primary)); }
.jj-auth-tab-on {
  color: rgb(var(--c-primary));
  border-bottom-color: rgb(var(--c-primary));
  background: rgb(var(--c-primary) / .05);
}

/* روش‌ها (کد/رمز) */
.jj-auth-method {
  background: transparent;
  color: rgb(var(--c-ink-2));
  cursor: pointer;
}
.jj-auth-method-on {
  background: rgb(var(--c-surface));
  color: rgb(var(--c-primary));
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}

/* فرم */
.jj-auth-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  color: rgb(var(--c-ink-2));
}
.jj-auth-input {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 1rem;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-ink-3) / .28);
  color: rgb(var(--c-ink));
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.jj-auth-input::placeholder { color: rgb(var(--c-ink-3) / .7); }
.jj-auth-input:focus {
  outline: none;
  border-color: rgb(var(--c-primary));
  box-shadow: 0 0 0 3px rgb(var(--c-primary) / .18);
}

/* کادر کد: بزرگ و با فاصلهٔ حروف */
.jj-auth-code {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: .5rem;
  font-variant-numeric: tabular-nums;
}

/* دکمهٔ اصلی */
.jj-auth-submit {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 9999px;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
  font-weight: 700;
  font-size: .95rem;
  border: 0;
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}
.jj-auth-submit:hover { background: rgb(var(--c-primary-hover, var(--c-primary))); }
.jj-auth-submit:disabled { opacity: .6; cursor: wait; }

/* پیام‌ها */
.jj-auth-msg-ok {
  background: rgb(var(--c-ok) / .10);
  border: 1px solid rgb(var(--c-ok) / .35);
  color: rgb(var(--c-ok));
}
.jj-auth-msg-err {
  background: rgb(var(--c-err) / .10);
  border: 1px solid rgb(var(--c-err) / .35);
  color: rgb(var(--c-err));
}

/* ابزارهای غایب از بیلد فعلی */
.jj-auth-scope .max-w-md { max-width: 28rem; }

/* ابزار غایب از بیلد فعلی */
.jj-auth-scope .mt-5 { margin-top: 1.25rem; }

/* ================================================================
   ابزارهای طرح که در بیلد فعلی نیستند (مقدارها از توکن‌های طرح)
   ================================================================ */
.jj-auth-scope .py-space-2xs { padding-top: .25rem; padding-bottom: .25rem; }
.jj-auth-scope .px-margin-mobile { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) {
  .jj-auth-scope .md\:px-gutter { padding-left: var(--gutter, 1.5rem); padding-right: var(--gutter, 1.5rem); }
}
.jj-auth-scope .tracking-\[0\.5em\] { letter-spacing: .5em; }