/* ═══════════════════════════════════════════════════════════════════
   auth-CSS.css  →  مقصد: assets/css/auth.css

   auth.css — استایل مشترک صفحه‌های عمومی احراز هویت
   
   login.php · register.php · verify-mobile.php · 2fa-totp.php
   
   ⚠️ این فایل عمداً از admin.css و panel.css جداست.
      صفحه‌های احراز هویت پیش از ورود رندر می‌شوند و نباید به
      قالب دومیکس وابسته باشند — هم سبک‌تر می‌مانند، هم اگر روزی
      قالب عوض شود این صفحه‌ها دست‌نخورده می‌مانند.
   
   ⚠️ هیچ CDN‌ای اینجا نیست. فونت وزیر محلی و آیکون‌ها SVG
      درون‌خطی‌اند. دلیلش در سرآیند login.php توضیح داده شده.

   ⚠️ اعلام @font-face اینجا **نیست** و نباید برگردد.
      قبلاً سه اعلام اینجا بود که به /assets/fonts/ اشاره می‌کردند
      در حالی که فایل‌ها در /assets/css/ بودند — سه ۴۰۴ بی‌صدا و
      چهار صفحه با فونت سیستم.
      حالا تنها اعلام در assets/css/fonts.css است و هر صفحه‌ای که
      این فایل را می‌خواند باید fonts.css را هم **پیش از** آن
      لینک کند.
   
   ─── سه نقطهٔ شکست ───
   
      دسکتاپ  ≥ 1024px  دو ستونی، فاصله‌های کامل
      تبلت    768–1023  دو ستونی فشرده‌تر
      موبایل  < 768px   تک‌ستونی، معرفی جمع‌شده
   
   ⚠️ نقطهٔ ۷۶۸ عمدی است و با panel.css یکی است. اگر عوضش کنید،
      رفتار این صفحه‌ها با بقیهٔ پنل واگرا می‌شود.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── پالت ─────────────────────────────────────────────────────── */
:root {
  --brand:        #95BA20;
  --brand-dark:   #7A9A18;
  --brand-light:  #AFD03F;
  --radius:       20px;
}

/* شب */
html[data-mode='dark'] {
  --bg-a:      #0A0E07;
  --bg-b:      #141A0D;
  --glass:     rgba(255, 255, 255, 0.045);
  --glass-brd: rgba(255, 255, 255, 0.10);
  --txt:       #F2F5EC;
  --txt-dim:   #9AA48C;
  --field:     rgba(255, 255, 255, 0.06);
  --field-brd: rgba(255, 255, 255, 0.12);
  --divider:   rgba(255, 255, 255, 0.13);
  --wave-op:   0.55;
}

/* روز */
html[data-mode='light'] {
  --bg-a:      #F4F7EC;
  --bg-b:      #E6EED6;
  --glass:     rgba(255, 255, 255, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.85);
  --txt:       #1B2410;
  --txt-dim:   #5C6B47;
  --field:     rgba(255, 255, 255, 0.75);
  --field-brd: rgba(27, 36, 16, 0.13);
  --divider:   rgba(27, 36, 16, 0.12);
  --wave-op:   0.32;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Vazir', system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;          /* نوار آدرس موبایل ارتفاع را می‌خورد */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  color: var(--txt);
  background: linear-gradient(150deg, var(--bg-a) 0%, var(--bg-b) 100%);
  transition: background .4s ease, color .4s ease;
  overflow-x: hidden;
}

/* ─── موج‌های پس‌زمینه ──────────────────────────────────────────
   SVG درون‌خطی است نه فایل جدا: یک درخواست کمتر روی صفحه‌ای که
   باید سریع بیاید، و رنگش از متغیر برند می‌آید پس با تم عوض
   می‌شود. */
.bg-waves {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--wave-op);
  transition: opacity .4s ease;
}

/* ─── کارت ─────────────────────────────────────────────────────── */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  overflow: hidden;
}

/* ⚠️ در RTL ستون اول سمت راست می‌نشیند. معرفی اول می‌آید پس
   راست است، فرم دوم پس چپ — همان چیدمانی که خواسته شده. */

/* ── ستون معرفی (راست) ── */
.intro {
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
}

/* خط جداکنندهٔ عمودی. با ::after می‌آید نه border، چون باید
   کوتاه‌تر از ارتفاع کارت باشد. */
.intro::after {
  content: '';
  position: absolute;
  left: 0; top: 12%;
  width: 1px; height: 76%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--divider) 18%,
    var(--divider) 82%,
    transparent
  );
}

.logo-img { height: 46px; width: auto; }

.intro-sub {
  color: var(--brand);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: .45rem;
}

.intro-title {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: .9rem;
}

.intro-text {
  color: var(--txt-dim);
  font-size: .9rem;
  line-height: 2.05;
}

.intro-foot {
  font-size: .78rem;
  color: var(--txt-dim);
}
.intro-foot a { color: var(--brand); text-decoration: none; }
.intro-foot a:hover { text-decoration: underline; }

/* ── ستون فرم (چپ) ── */
.pane {
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pane-title {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.75rem;
}

.field { margin-bottom: .95rem; }

.field label {
  display: block;
  font-size: .8rem;
  color: var(--txt-dim);
  margin-bottom: .4rem;
}

.field input {
  width: 100%;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: .93rem;
  color: var(--txt);
  background: var(--field);
  border: 1px solid var(--field-brd);
  border-radius: 12px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.field input::placeholder { color: var(--txt-dim); opacity: .75; }

.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(149, 186, 32, .18);
}

/* ⚠️ ایمیل و رمز همیشه چپ‌چین‌اند، حتی در صفحهٔ راست‌چین.
   بدون این، آدرس ایمیل هنگام تایپ به‌هم‌ریخته دیده می‌شود. */
.field input[type='email'],
.field input[type='password'] {
  direction: ltr;
  text-align: left;
}

/* نمایش رمز */
.pw-wrap { position: relative; }
.pw-wrap input { padding-left: 2.9rem; }

.pw-toggle {
  position: absolute;
  left: .55rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  padding: .45rem;
  cursor: pointer;
  color: var(--txt-dim);
  display: flex;
  border-radius: 8px;
}
.pw-toggle:hover { color: var(--brand); }

.btn-main {
  width: 100%;
  padding: .9rem;
  margin-top: .35rem;
  font-family: inherit;
  font-size: .97rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .18s, filter .18s;
}
.btn-main:hover {
  filter: brightness(1.07);
  box-shadow: 0 8px 22px rgba(149, 186, 32, .3);
}
.btn-main:active { transform: translateY(1px); }

/* ─── جداکنندهٔ «یا» ───────────────────────────────────────────── */
.or {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.4rem 0 1rem;
  color: var(--txt-dim);
  font-size: .78rem;
}
.or::before, .or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* ─── ورود جایگزین ─────────────────────────────────────────────
   ⚠️ این دکمه‌ها عمداً disabled‌اند و هیچ کاری نمی‌کنند.
      نمایش داده می‌شوند تا جای‌گیری‌شان در طراحی مشخص باشد، ولی
      تا وقتی پیاده‌سازی سمت سرور آماده نشده، دکمه‌ای که کلیک شود
      و هیچ اتفاقی نیفتد بدتر از دکمه‌ای است که آشکارا غیرفعال
      است.

      هنگام فعال‌سازی: صفت disabled و کلاس is-soon برداشته شود و
      href واقعی بگیرند. ن.ک. یادداشت طراحی در گفتگو. */
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.btn-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem .5rem;
  font-family: inherit;
  font-size: .84rem;
  color: var(--txt);
  background: var(--field);
  border: 1px solid var(--field-brd);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.btn-alt:hover:not(:disabled) { border-color: var(--brand); }

.btn-alt:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn-alt svg { width: 17px; height: 17px; flex-shrink: 0; }

.soon-tag {
  display: block;
  text-align: center;
  font-size: .7rem;
  color: var(--txt-dim);
  margin-top: .55rem;
}

/* ─── پیام خطا ─────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .8rem .95rem;
  margin-bottom: 1.1rem;
  font-size: .85rem;
  line-height: 1.75;
  color: #FCA5A5;
  background: rgba(220, 38, 38, .12);
  border: 1px solid rgba(220, 38, 38, .3);
  border-radius: 12px;
}
html[data-mode='light'] .alert { color: #991B1B; }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .18rem; }

/* ─── یادداشت امنیتی ───────────────────────────────────────────── */
.sec-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.3rem;
  font-size: .74rem;
  color: var(--txt-dim);
}
.sec-note svg { width: 13px; height: 13px; }

.foot-note {
  text-align: center;
  font-size: .78rem;
  color: var(--txt-dim);
  margin-top: .9rem;
  line-height: 1.9;
}

/* ─── کلید شب/روز ──────────────────────────────────────────────── */
.mode-btn {
  position: fixed;
  top: 1.1rem; left: 1.1rem;
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.mode-btn:hover { border-color: var(--brand); color: var(--brand); }
.mode-btn svg { width: 18px; height: 18px; }

html[data-mode='dark']  .icon-sun  { display: block; }
html[data-mode='dark']  .icon-moon { display: none; }
html[data-mode='light'] .icon-sun  { display: none; }
html[data-mode='light'] .icon-moon { display: block; }


/* ═══ عناصر صفحه‌های ثبت‌نام و تأیید ═══════════════════════════ */

.card-wide   { max-width: 1020px; }

/* ⚠️ .card-narrow باید **تک‌ستونی** هم باشد، نه فقط باریک‌تر.
 *
 *    قاعدهٔ پایهٔ .card مقدار grid-template-columns: 1fr 1fr دارد
 *    چون صفحه‌های ورود و ثبت‌نام دو ستون‌اند (معرفی + فرم).
 *
 *    صفحه‌های ۲FA و راه‌اندازی آن یک ستون بیشتر ندارند. بدون این
 *    خط، محتوا در **نیمهٔ اول** یک شبکهٔ دوستونی فشرده می‌شد و
 *    نیمهٔ راست خالی می‌ماند — خانه‌های کد و کد QR له می‌شدند.
 *
 *    روی موبایل دیده نمی‌شد چون آنجا قاعدهٔ max-width: 767.98px
 *    همه‌چیز را تک‌ستونی می‌کند. ایراد فقط روی دسکتاپ و تبلت
 *    ظاهر می‌شد.
 */
.card-narrow {
  max-width: 480px;
  grid-template-columns: 1fr;
}

/* ⚠️ .pane-solo پایین‌تر تعریف شده (بخش «صفحهٔ تأیید دو مرحله‌ای»).
   یک تعریف تکراری اینجا بود که با آن یکی تعارض داشت — حذف شد تا
   دو منبع حقیقت برای یک کلاس نماند. */

.pane-text {
  color: var(--txt-dim);
  font-size: .89rem;
  line-height: 2;
  margin-bottom: 1.3rem;
}

.mono {
  font-family: ui-monospace, monospace;
  direction: ltr;
  display: inline-block;
  color: var(--txt);
}

/* دو فیلد کنار هم (نام و نام خانوادگی) */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.field-hint {
  display: block;
  font-size: .73rem;
  color: var(--txt-dim);
  margin-top: .35rem;
}

/* ورودی کد تأیید — درشت و با فاصلهٔ حروف */
.code-input {
  text-align: center !important;
  direction: ltr;
  font-family: ui-monospace, monospace;
  font-size: 1.7rem !important;
  letter-spacing: .6rem;
  padding: .8rem .5rem !important;
  text-indent: .6rem;   /* جبران letter-spacing تا واقعاً وسط بنشیند */
}

/* دکمهٔ متنی (ارسال دوباره) */
.resend-form { margin-top: .9rem; }

.btn-link {
  background: none;
  border: none;
  font-family: inherit;
  font-size: .84rem;
  color: var(--brand);
  cursor: pointer;
  padding: .4rem;
  border-radius: 8px;
}
.btn-link:hover { text-decoration: underline; }
.btn-link:disabled {
  color: var(--txt-dim);
  cursor: not-allowed;
  text-decoration: none;
}

/* پیام اطلاع‌رسانی — برخلاف alert که خطاست */
.alert-info {
  color: var(--brand);
  background: rgba(149, 186, 32, .10);
  border-color: rgba(149, 186, 32, .30);
}
html[data-mode='light'] .alert-info { color: var(--brand-dark); }

/* نشان تأیید موفق */
.ok-icon {
  width: 62px; height: 62px;
  margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(149, 186, 32, .32);
}
.ok-icon svg { width: 30px; height: 30px; }

.alt-link a { color: var(--brand); text-decoration: none; }
.alt-link a:hover { text-decoration: underline; }

/* ═══ واکنش‌گرایی ═══════════════════════════════════════════════ */

/* ─── تبلت (۷۶۸ تا ۱۰۲۳) ─────────────────────────────────────────
   دو ستون می‌ماند چون عرض کافی است، ولی فاصله‌ها فشرده می‌شوند
   و اندازهٔ قلم یک پله پایین می‌آید. بدون این، کارت روی آی‌پد
   عمودی به لبه‌ها می‌چسبد. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .card { max-width: 720px; }
  .card-narrow { max-width: 440px; }

  .intro, .pane { padding: 2rem 1.75rem; }
  .intro-title  { font-size: 1.5rem; }
  .intro-text   { font-size: .86rem; line-height: 1.95; }
  .pane-title   { font-size: 1.18rem; margin-bottom: 1.4rem; }

  /* نام و نام خانوادگی روی تبلت هم کنار هم می‌مانند */
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* ═══ صفحهٔ تأیید دو مرحله‌ای ════════════════════════════════════ */

/* ستون تنها — بدون بخش معرفی. این صفحه یک کار دارد و حواس‌پرتی
   نباید داشته باشد: کاربر وسط ورود است. */
.pane-solo {
  text-align: center;
  padding: 2.5rem 2.25rem;
}

.solo-logo { margin-bottom: 1.25rem; }
.solo-logo .logo-img { height: 38px; }

/* نشان قفل */
.lock-badge {
  width: 58px;
  height: 58px;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(149, 186, 32, .12);
  border: 1px solid rgba(149, 186, 32, .28);
  border-radius: 50%;
}
.lock-badge svg { width: 26px; height: 26px; }

.pane-sub {
  color: var(--txt-dim);
  font-size: .85rem;
  line-height: 1.9;
  margin: -.6rem 0 1.5rem;
}

/* ─── خانه‌های کد ───────────────────────────────────────────────
   ⚠️ dir="ltr" روی ظرف لازم است. کد عددی است و در RTL از راست
      پر می‌شود — یعنی رقم اول در خانهٔ آخر می‌نشیند. */
.otp-boxes {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.otp-box {
  width: 46px;
  height: 56px;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--txt);
  background: var(--field);
  border: 1px solid var(--field-brd);
  border-radius: 12px;
  outline: none;
  transition: border-color .16s, box-shadow .16s, transform .1s;

  /* فلش بالا/پایین در ورودی عددی روی دسکتاپ آزاردهنده است */
  -moz-appearance: textfield;
}
.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.otp-box:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(149, 186, 32, .18);
  transform: translateY(-1px);
}

/* خانهٔ پرشده متمایز باشد تا کاربر بداند کجاست */
.otp-box:not(:placeholder-shown),
.otp-box[value]:not([value=""]) {
  border-color: rgba(149, 186, 32, .45);
}

/* ─── بخش کد بازیابی ───────────────────────────────────────────
   جمع‌شده می‌آید. اکثر ورودها با کد برنامه انجام می‌شوند و باز
   بودنش فقط صفحه را شلوغ می‌کند. */
.recovery {
  text-align: right;
  margin-bottom: .5rem;
}

.recovery > summary {
  cursor: pointer;
  font-size: .84rem;
  color: var(--txt-dim);
  padding: .55rem 0;
  text-align: center;
  list-style: none;
  transition: color .16s;
}
.recovery > summary::-webkit-details-marker { display: none; }
.recovery > summary:hover { color: var(--brand); }

.recovery[open] > summary { color: var(--brand); margin-bottom: .5rem; }

.btn-block { width: 100%; }

.mt-1 { margin-top: .5rem; }

/* ═══ صفحهٔ راه‌اندازی ۲FA ══════════════════════════════════════ */

.lock-ok {
  color: #4ADE80;
  background: rgba(74, 222, 128, .12);
  border-color: rgba(74, 222, 128, .3);
}

/* ─── مراحل ───────────────────────────────────────────────────── */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: right;
}

.steps li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .84rem;
  color: var(--txt-dim);
  padding: .35rem 0;
  line-height: 1.8;
}

.step-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  color: var(--txt-dim);
  border: 1px solid var(--field-brd);
  border-radius: 50%;
}

.step-on { color: var(--txt); }
.step-on .step-num {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

/* شمارهٔ خودکار برای فهرست مراحل راه‌اندازی */
.steps-num { counter-reset: st; }
.steps-num li { counter-increment: st; }
.steps-num li::before {
  content: counter(st);
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  color: var(--brand);
  border: 1px solid rgba(149, 186, 32, .35);
  border-radius: 50%;
}

/* ─── کد QR ───────────────────────────────────────────────────────
   ⚠️ زمینه همیشه سفید است، حتی در حالت شب. اسکنرها به کنتراست
      تیره‌روی‌روشن نیاز دارند و QR وارونه را بسیاری نمی‌خوانند. */
.qr-box {
  display: inline-block;
  padding: 10px;
  margin-bottom: 1.1rem;
  background: #fff;
  border-radius: 12px;
  line-height: 0;
}
.qr-box svg { display: block; width: 200px; height: 200px; }

/* ─── کلید دستی ───────────────────────────────────────────────── */
.secret-label {
  font-size: .78rem;
  color: var(--txt-dim);
  margin-bottom: .45rem;
}

.secret-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .95rem;
  letter-spacing: .12em;
  word-break: break-all;
  padding: .7rem .8rem;
  color: var(--txt);
  background: var(--field);
  border: 1px dashed var(--field-brd);
  border-radius: 10px;

  /* ⚠️ کاربر باید بتواند انتخابش کند حتی اگر دکمهٔ نسخه‌برداری
     کار نکند (مثلاً روی HTTP). */
  user-select: all;
  -webkit-user-select: all;
}

.copy-btn {
  margin: .5rem 0 1.2rem;
  padding: .45rem .95rem;
  font-family: inherit;
  font-size: .78rem;
  color: var(--txt-dim);
  background: transparent;
  border: 1px solid var(--field-brd);
  border-radius: 9px;
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
.copy-btn:hover { color: var(--brand); border-color: var(--brand); }

/* کد ۶ رقمی تک‌ورودی */
.code-input {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .35em;
}

/* هشدار موفقیت */
.alert-success {
  color: #86EFAC;
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .3);
}
html[data-mode='light'] .alert-success { color: #14532D; }

/* ─── موبایل (زیر ۷۶۸) ───────────────────────────────────────────
   تک‌ستونی. ستون معرفی جمع می‌شود: لوگو و عنوان می‌مانند، متن
   بلند و یادداشت پایین حذف می‌شوند.

   ⚠️ دلیلش کمبود جا نیست، اولویت است: کاربر گوشی آمده وارد شود
      یا ثبت‌نام کند، نه معرفی بخواند. فرم باید بدون اسکرول دیده
      شود. */
@media (max-width: 767.98px) {
  body { padding: .85rem; align-items: flex-start; padding-top: 1.5rem; }

  .card { grid-template-columns: 1fr; max-width: 440px; }
  .card-narrow, .card-wide { max-width: 440px; }

  .intro { padding: 1.75rem 1.5rem 0; gap: .9rem; }
  .intro::after { display: none; }
  .intro-text, .intro-foot { display: none; }
  .intro-title { font-size: 1.3rem; margin-bottom: 0; }
  .intro-sub { margin-bottom: .3rem; }
  .logo-img { height: 38px; }

  .pane { padding: 1.5rem; }
  .pane-solo { padding: 2rem 1.5rem; }

  /* نام و نام خانوادگی زیر هم می‌روند — کنار هم روی ۳۶۰ پیکسل
     هرکدام حدود ۱۵۰ پیکسل می‌شوند که برای نام فارسی تنگ است. */
  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* ⚠️ اندازهٔ قلم ورودی‌ها زیر ۱۶ پیکسل نرود.
     iOS Safari هر ورودی با قلم کوچک‌تر را که فوکوس بگیرد،
     صفحه را خودکار زوم می‌کند و کاربر گیر می‌افتد. */
  .field input { font-size: 16px; padding: .8rem .9rem; }

  .code-input { font-size: 1.5rem; letter-spacing: .5rem; }
}

/* ─── گوشی‌های باریک (زیر ۳۶۰) ─────────────────────────────────── */
@media (max-width: 767.98px) {
  /* ⚠️ شش خانهٔ ۴۶ پیکسلی با فاصله = ۳۱۶ پیکسل. روی گوشی ۳۶۰
     پیکسلی با حاشیهٔ کارت جا نمی‌شود و سطر می‌شکند. */
  .qr-box svg { width: 170px; height: 170px; }
  .secret-key { font-size: .85rem; letter-spacing: .08em; }
  .otp-box { width: 42px; height: 50px; font-size: 1.2rem; }
  .otp-boxes { gap: .35rem; }
  .pane-solo { padding: 2rem 1.5rem; }
  .lock-badge { width: 50px; height: 50px; }
}

@media (max-width: 359.98px) {
  .otp-box { width: 36px; height: 46px; font-size: 1.05rem; }
  .otp-boxes { gap: .25rem; }
}

@media (max-width: 359.98px) {
  .alt-row { grid-template-columns: 1fr; }
  .intro { padding: 1.4rem 1.1rem 0; }
  .pane  { padding: 1.2rem 1.1rem; }
  .code-input { font-size: 1.3rem; letter-spacing: .35rem; }
}

/* ─── ارتفاع کم (گوشی افقی) ──────────────────────────────────────
   روی گوشی چرخانده، ارتفاع حدود ۳۶۰ پیکسل می‌شود و کارت با
   فاصله‌های عادی بیرون می‌زند. */
@media (max-height: 520px) and (max-width: 1023.98px) {
  body { align-items: flex-start; padding-top: 1rem; }
  .intro { display: none; }
  .card { grid-template-columns: 1fr; }
  .pane { padding: 1.3rem; }
  .pane-title { margin-bottom: 1rem; }
}

/* کسانی که در سیستمشان کاهش حرکت را فعال کرده‌اند */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}