/* =========================================================================
   ParPhonix — پوسته‌ی شیشه‌ای پنل‌ها، با حال‌وهوای iOS
   شیشه‌ی مات روی یک پس‌زمینه‌ی رنگی محو، گوشه‌های گرد، فهرست‌های گروه‌بندی‌شده
   مثل «تنظیمات» آیفون و نوار زبانه‌ی پایین در موبایل.

   روی panel.html، automation.html و admin.html (body.ios) بار می‌شود و روی
   panel.css سوار است. پنل مدیریت به‌جای والپیپر رنگی، یک اسطرلاب زنده دارد
   (body.admin-astro + assets/js/astrolabe.js). رنگ‌ها همان هویت پارفونیکس‌اند.
   ========================================================================= */

body.ios {
  --ios-bg: #0a0c0a;
  --ios-glass: rgba(30, 34, 29, 0.55);
  --ios-glass-strong: rgba(38, 43, 36, 0.78);
  --ios-fill: rgba(255, 255, 255, 0.07);       /* زمینه‌ی ورودی‌ها و ردیف‌های داخلی */
  --ios-fill-strong: rgba(255, 255, 255, 0.12);
  --ios-hair: rgba(255, 255, 255, 0.10);        /* خط‌های نازک جداکننده */
  --ios-edge: rgba(255, 255, 255, 0.14);        /* لبه‌ی روشن شیشه */
  --ios-text: #f3f5f0;
  --ios-text-2: rgba(236, 240, 232, 0.62);
  --ios-text-3: rgba(236, 240, 232, 0.40);
  --ios-tint: #e8c987;                          /* رنگ اصلی (طلایی برند) */
  --ios-tint-ink: #1d1a10;
  --ios-green: #7fd18b;
  --ios-red: #ff7b72;
  --ios-blur: blur(28px) saturate(170%);
  --ios-r-card: 22px;
  --ios-r-item: 14px;
  --ios-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);

  /* پنل‌های قبلی با این متغیرها رنگ می‌گیرند؛ همین‌جا هم‌راستا می‌شوند */
  --pnl-text: var(--ios-text);
  --pnl-muted: var(--ios-text-2);
  --pnl-muted-2: var(--ios-text-3);
  --pnl-accent: #d9b56c;
  --pnl-accent-bright: var(--ios-tint);
  --pnl-border: var(--ios-hair);
  /* سطح‌ها و سایه‌های «نئومورفیک» panel.css: شفاف و بدون سایه، تا همه‌ی
     اجزای قدیمی (جدول، تیکت، سوییچ، شبکه‌ی پرداخت…) خودشان شیشه‌ای شوند */
  --pnl-surface: rgba(255, 255, 255, 0.06);
  --pnl-surface-2: rgba(255, 255, 255, 0.10);
  --pnl-shadow-dark: transparent;
  --pnl-shadow-light: transparent;

  background: var(--ios-bg);
  color: var(--ios-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Vazirmatn, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[lang="fa"] body.ios {
  font-family: Vazirmatn, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

/* پس‌زمینه‌ی «والپیپر»: لکه‌های رنگی محو تا شیشه چیزی برای مات کردن داشته باشد */
body.ios::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 12% 10%, rgba(197, 161, 91, 0.55), transparent 70%),
    radial-gradient(42% 45% at 90% 88%, rgba(127, 175, 120, 0.45), transparent 70%),
    radial-gradient(35% 35% at 72% 22%, rgba(88, 118, 150, 0.35), transparent 70%),
    radial-gradient(40% 35% at 22% 82%, rgba(160, 112, 66, 0.32), transparent 70%),
    var(--ios-bg);
  /* بدون filter: blur — گرادیان‌ها خودشان نرم‌اند و یک لایه‌ی ثابتِ مات‌شده‌ی
     بزرگ، اسکرول را روی گوشی‌ها کند می‌کرد */
}

/* ── سطح‌های شیشه‌ای ──────────────────────────────────────────────────── */
body.ios .neo,
body.ios .pnl-card,
body.ios .pnl-tile,
body.ios .pnl-banner,
body.ios .pnl-cta,
body.ios .auto-newstrip,
body.ios .ios-group {
  background: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  border: 1px solid var(--ios-hair);
  border-top-color: var(--ios-edge);
  border-radius: var(--ios-r-card);
  box-shadow: var(--ios-shadow);
}
body.ios .pnl-card h3 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ios-text);
}
body.ios .pnl-card .d,
body.ios .pnl-sub { color: var(--ios-text-2); font-size: 13.5px; line-height: 1.75; }

/* سطح‌های داخلی (ردیف‌ها، جعبه‌های کوچک) — پرشده، بدون سایه */
body.ios .neo-inset {
  background: var(--ios-fill);
  border: 1px solid transparent;
  border-radius: var(--ios-r-item);
  box-shadow: none;
}

/* ── عنوان بزرگ مثل iOS ───────────────────────────────────────────────── */
body.ios .pnl-title {
  font-family: inherit;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ios-text);
}
body.ios .pnl-eyebrow {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ios-tint);
}

/* ── کاشی‌های آمار ────────────────────────────────────────────────────── */
body.ios .pnl-tiles { gap: 12px; }
body.ios .pnl-tile { padding: 16px 18px; }
body.ios .pnl-tile .k {
  font-family: -apple-system, "SF Pro Rounded", "SF Pro Display", Vazirmatn, sans-serif;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.ios .pnl-tile .l {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ios-text-2);
}

/* ── دکمه‌ها ──────────────────────────────────────────────────────────── */
body.ios .pnl-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 12px;
  padding: 11px 18px;
  background: var(--ios-tint);
  color: var(--ios-tint-ink);
  border: none;
  box-shadow: none;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.15s ease;
}
body.ios .pnl-btn:active:not(:disabled) { transform: scale(0.97); opacity: 0.85; }
body.ios .pnl-btn--ghost {
  background: var(--ios-fill-strong);
  color: var(--ios-tint);
  border: none;
}
body.ios .pnl-btn:focus-visible,
body.ios .pnl-link-btn:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 2px; }
body.ios .pnl-link-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ios-tint);
}
body.ios .pnl-link-btn:hover { opacity: 0.8; color: var(--ios-tint); }

/* ── ورودی‌ها ─────────────────────────────────────────────────────────── */
body.ios .pnl-input,
body.ios .pnl-select {
  background: var(--ios-fill);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  color: var(--ios-text);
  font-family: inherit;
  font-size: 16px; /* زیر ۱۶ پیکسل، سافاری iOS زوم می‌کند */
}
body.ios .pnl-input::placeholder { color: var(--ios-text-3); }
body.ios .pnl-input:focus,
body.ios .pnl-select:focus {
  outline: none;
  background: var(--ios-fill-strong);
  border-color: rgba(232, 201, 135, 0.55);
  box-shadow: 0 0 0 3px rgba(232, 201, 135, 0.18);
}
body.ios .pnl-field label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ios-text-2);
}

/* سوییچ iOS برای تیک‌های تکی («فقط تازه‌ها»، پذیرش قوانین) */
body.ios .auto-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--ios-fill-strong);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.ios .auto-check input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
body.ios .auto-check input[type="checkbox"]:checked { background: var(--ios-green); }
body.ios .auto-check input[type="checkbox"]:checked::after { transform: translateX(20px); }
html[dir="rtl"] body.ios .auto-check input[type="checkbox"]:checked::after { transform: translateX(-20px); }
body.ios .auto-check input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }
body.ios .auto-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 2px; }

/* تیک گرد برای فهرست کانال‌ها */
body.ios .pnl-target {
  background: var(--ios-fill);
  border: none;
  border-radius: var(--ios-r-item);
  box-shadow: none;
}
body.ios .pnl-target input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ios-text-3);
  display: grid;
  place-content: center;
}
body.ios .pnl-target input[type="checkbox"]:checked { background: var(--ios-tint); border-color: var(--ios-tint); }
body.ios .pnl-target input[type="checkbox"]:checked::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid var(--ios-tint-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}
body.ios .pnl-target input[type="checkbox"]:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 2px; }
body.ios .auto-channel__state { font-family: inherit; font-size: 13px; }
body.ios .auto-channel__name { font-family: inherit; font-weight: 600; font-size: 15px; }
body.ios .auto-target-remove { margin-inline-start: auto; color: var(--ios-red); font-size: 13px; }

/* ── برچسب‌ها ─────────────────────────────────────────────────────────── */
body.ios .pnl-badge {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── منوی کناری (دسکتاپ): پنل شیشه‌ای شناور ──────────────────────────── */
@media (min-width: 861px) {
  body.ios .panel-shell { grid-template-columns: 260px minmax(0, 1fr); }
  body.ios .pnl-side {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    margin: 16px 0 16px 16px;
    padding: 18px 12px;
    background: var(--ios-glass);
    -webkit-backdrop-filter: var(--ios-blur);
    backdrop-filter: var(--ios-blur);
    border: 1px solid var(--ios-hair);
    border-top-color: var(--ios-edge);
    border-radius: 26px;
    box-shadow: var(--ios-shadow);
  }
  html[dir="rtl"] body.ios .pnl-side { margin: 16px 16px 16px 0; }
}
body.ios .pnl-brand span { font-family: inherit; font-weight: 700; letter-spacing: -0.01em; }
body.ios .pnl-nav button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ios-text);
  border-radius: 12px;
  box-shadow: none;
}
body.ios .pnl-nav button .ic { opacity: 1; color: var(--ios-tint); }
body.ios .pnl-nav button:hover { background: var(--ios-fill); }
body.ios .pnl-nav button.is-active {
  background: rgba(232, 201, 135, 0.16);
  color: var(--ios-tint);
  box-shadow: none;
}
body.ios .pnl-nav .pnl-badge {
  background: var(--ios-red);
  color: #fff;
  min-width: 20px;
}
body.ios .pnl-logout { font-family: inherit; letter-spacing: 0; text-transform: none; border-radius: 12px; }

/* ── موبایل: نوار زبانه‌ی پایین، مثل iOS ─────────────────────────────── */
@media (max-width: 860px) {
  body.ios .panel-shell { display: block; }
  body.ios .pnl-main { padding: 18px 16px calc(110px + env(safe-area-inset-bottom)); }

  body.ios .pnl-side {
    position: fixed;
    top: auto;
    inset-inline: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    overflow: visible;
    background: var(--ios-glass-strong);
    -webkit-backdrop-filter: var(--ios-blur);
    backdrop-filter: var(--ios-blur);
    border: 1px solid var(--ios-hair);
    border-top-color: var(--ios-edge);
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  }
  body.ios .pnl-brand { display: none; }
  /* «اتوماسیون ندارید» / ایمیل تأییدنشده: منویی نیست، پس نوار زبانه هم نباشد */
  body.ios .pnl-side:has(#pnlNav[hidden]) { display: none; }
  body.ios .pnl-side .pnl-nav { flex: 1; display: flex; gap: 0; }
  body.ios .pnl-nav button {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 7px 2px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    color: var(--ios-text-2);
    background: transparent;
  }
  body.ios .pnl-nav button span:not(.pnl-badge) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.ios .pnl-nav button .ic { width: 22px; height: 22px; color: currentColor; }
  body.ios .pnl-nav button.is-active { background: transparent; color: var(--ios-tint); }
  body.ios .pnl-nav button { position: relative; }
  body.ios .pnl-nav .pnl-badge {
    position: absolute;
    top: 2px;
    inset-inline-start: calc(50% + 4px);
    font-size: 10px;
    padding: 0 5px;
    min-width: 16px;
  }
  /* «بازگشت به پنل» در موبایل بالای صفحه می‌آید، نه در نوار زبانه */
  body.ios .pnl-side > a { display: none; }
  body.ios a.ios-back { display: inline-flex; }
  body.ios .pnl-nav button span.nav-long { display: none; }
  body.ios .pnl-nav button span.nav-short { display: block; }
  body.ios .lang-switch { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
body.ios .pnl-nav .nav-short { display: none; }
body.ios .ios-back {
  display: none;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  color: var(--ios-tint);
  font-size: 16px;
  text-decoration: none;
}
html[dir="rtl"] body.ios .ios-back svg { transform: scaleX(-1); }

/* ── فهرست گروه‌بندی‌شده (راهنما) مثل «تنظیمات» آیفون ──────────────────── */
body.ios .ios-group { padding: 0; overflow: hidden; }
.ios-row + .ios-row { border-top: 1px solid var(--ios-hair, rgba(255,255,255,0.1)); }
.ios-row summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
}
.ios-row summary::-webkit-details-marker { display: none; }
.ios-row summary:focus-visible { outline: 2px solid var(--ios-tint, #e8c987); outline-offset: -2px; }
.ios-row__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
}
.ios-row__icon svg { width: 18px; height: 18px; }
.ios-tint--gold   { background: linear-gradient(160deg, #f0cf86, #c99a45); color: #2b210b; }
.ios-tint--blue   { background: linear-gradient(160deg, #5aa7ff, #2f6fe0); }
.ios-tint--green  { background: linear-gradient(160deg, #6fd88a, #2f9e55); }
.ios-tint--orange { background: linear-gradient(160deg, #ffb35a, #e9772b); }
.ios-tint--purple { background: linear-gradient(160deg, #b98cff, #7a4fe0); }
.ios-tint--red    { background: linear-gradient(160deg, #ff7b72, #e0453c); }
.ios-tint--gray   { background: linear-gradient(160deg, #a1a8a0, #6b7268); }
.ios-row__label { flex: 1; }
.ios-row__chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ios-text-3, rgba(255,255,255,0.4));
  border-bottom: 2px solid var(--ios-text-3, rgba(255,255,255,0.4));
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
html[dir="rtl"] .ios-row__chev { transform: rotate(135deg); }
.ios-row[open] .ios-row__chev { transform: rotate(45deg); }
.ios-row__body {
  margin: 0;
  padding: 0 18px 16px;
  padding-inline-start: 58px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ios-text-2, rgba(255,255,255,0.65));
  font-size: 14.5px;
  line-height: 1.85;
}
.ios-row__body code {
  font-family: ui-monospace, "SF Mono", "Share Tech Mono", monospace;
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--ios-fill-strong, rgba(255,255,255,0.12));
  color: var(--ios-tint, #e8c987);
  direction: ltr;
  unicode-bidi: isolate;
}
.ios-row__body b { color: var(--ios-text, #fff); font-weight: 600; }

/* ── پنجره‌ی تأیید شیشه‌ای (iosConfirm) ──────────────────────────────── */
.ios-alert {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ios-fade 0.18s ease;
}
.ios-alert.is-leaving { opacity: 0; transition: opacity 0.15s ease; }
.ios-alert__box {
  width: min(290px, 100%);
  overflow: hidden;
  border-radius: 16px;
  background: rgba(44, 48, 42, 0.86);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: ios-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.ios-alert__msg { margin: 0; padding: 20px 18px 18px; font-size: 15px; line-height: 1.7; color: #f3f5f0; }
.ios-alert__btns { display: flex; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ios-alert__btn {
  flex: 1;
  min-height: 46px;
  border: none;
  background: transparent;
  color: #e8c987;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.ios-alert__btn + .ios-alert__btn { border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
.ios-alert__btn--main { font-weight: 700; }
.ios-alert__btn:hover,
.ios-alert__btn:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
@keyframes ios-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ios-pop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }

/* ── صفحه‌بندی، عکس بزرگ، کارت‌ها ─────────────────────────────────────── */
body.ios .pager__btn {
  font-family: inherit;
  background: var(--ios-fill);
  border: none;
  border-radius: 10px;
  color: var(--ios-text-2);
}
body.ios .pager__btn.is-current { background: var(--ios-tint); color: var(--ios-tint-ink); }
body.ios .auto-lightbox { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
body.ios .auto-lightbox__close { background: var(--ios-glass-strong); border-color: var(--ios-hair); border-radius: 50%; }
body.ios .auto-item.is-new { box-shadow: var(--ios-shadow), inset 0 0 0 1.5px rgba(232, 201, 135, 0.6); }
body.ios .auto-contact { border-radius: 999px; background: rgba(127, 209, 139, 0.12); border-color: transparent; color: var(--ios-green); }
body.ios .auto-score { border-width: 2.5px; }
body.ios .auto-pre { background: var(--ios-fill); border-radius: var(--ios-r-item); }
body.ios .pnl-cmd code { background: var(--ios-fill-strong); border-radius: 8px; color: var(--ios-tint); }
body.ios .auto-wa__qr img { border-radius: 18px; }

/* ── دسترس‌پذیری و مرورگرهای قدیمی ──────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  body.ios .neo, body.ios .pnl-card, body.ios .pnl-tile, body.ios .pnl-banner,
  body.ios .pnl-side, body.ios .ios-group, body.ios .auto-newstrip, .ios-alert__box {
    background: #1d221c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ios .neo, body.ios .pnl-card, body.ios .pnl-tile, body.ios .pnl-banner,
  body.ios .pnl-side, body.ios .ios-group, body.ios .auto-newstrip, .ios-alert__box {
    background: #1d221c;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ios-alert, .ios-alert__box { animation: none; }
  body.ios .pnl-btn, .ios-row__chev, body.ios .auto-check input::after { transition: none; }
}

/* =========================================================================
   اصلاحات نمای موبایل
   ========================================================================= */

/* «هاور چسبنده» در صفحه‌ی لمسی: بعد از لمس، حالت hover/focus روی دکمه‌ی
   قبلی می‌ماند و دو زبانه با هم رنگی دیده می‌شدند. هاور فقط برای ماوس. */
@media (hover: none) {
  body.ios .pnl-nav button:hover,
  body.ios .pnl-nav button:focus { background: transparent; color: var(--ios-text-2); }
  body.ios .pnl-nav button.is-active,
  body.ios .pnl-nav button.is-active:hover,
  body.ios .pnl-nav button.is-active:focus { color: var(--ios-tint); }
  body.ios .pnl-link-btn:hover { opacity: 1; }
}
body.ios .pnl-nav button:focus:not(:focus-visible) { outline: none; }

/* زیر ۱۶ پیکسل، سافاری آیفون با لمس فیلد صفحه را زوم می‌کند */
body.ios .pnl-export .ctl .pnl-input,
body.ios .auto-token .pnl-input { font-size: 16px; }

@media (max-width: 860px) {
  /* کاشی‌های آمار: جمع‌وجور، عدد و عنوان در یک ردیف (مثل ویجت‌های iOS) */
  body.ios .pnl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.ios .pnl-tile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
  }
  body.ios .pnl-tile .k { font-size: 20px; line-height: 1; }
  body.ios .pnl-tile .l { margin: 0; font-size: 12px; line-height: 1.4; }

  /* انتخاب زبان: به‌جای دکمه‌ی شناور روی محتوا، بالای صفحه کنار «بازگشت» */
  body.ios .lang-switch {
    position: absolute;
    top: 14px;
    bottom: auto;
    right: 16px;
    left: auto;
    z-index: 30;
  }
  /* راست‌به‌چپ: «بازگشت» سمت راست است، پس زبان سمت چپ */
  html[dir="rtl"] body.ios .lang-switch { right: auto; left: 16px; }
  /* منو هم‌تراز با لبه‌ی بیرونی دکمه باز شود، نه چسبیده به لبه‌ی صفحه */
  html[dir="rtl"] body.ios .lang-switch__menu { right: auto; left: 0; }
  body.ios .lang-switch__menu { top: calc(100% + 6px); bottom: auto; }

  /* قوانین واتساپ: اسکرولِ داخل اسکرول روی گوشی آزاردهنده است */
  body.ios .auto-wa__terms { max-height: none; overflow: visible; }

  /* کارت‌ها روی گوشی کمی جمع‌وجورتر */
  body.ios .pnl-card { padding: 18px 16px; border-radius: 20px; }
  body.ios .pnl-header { gap: 6px; }

  /* ردیف کانال: نام و وضعیت در یک خط، دکمه‌ی توکن زیرشان */
  body.ios .auto-channel { row-gap: 6px; padding: 12px 14px; }
  body.ios .auto-channel__state { flex: 1 1 auto; min-width: 0; }
  body.ios .auto-channel__edit { flex-basis: 100%; text-align: start; margin-inline-start: 0; }

  /* فرم «افزودن کانال با آی‌دی»: انتخاب پیام‌رسان یک خط کامل */
  body.ios .auto-target-add .pnl-select { flex: 1 1 100%; }

  /* فیلترهای سرنخ و فایل: جست‌وجو یک خط کامل */
  body.ios .pnl-filters .pnl-input { flex: 1 1 100%; }
  body.ios .pnl-filters .pnl-select { flex: 1 1 0; min-width: 0; }

  /* مراحل «چطور کار می‌کند» */
  body.ios .pnl-steps { gap: 8px; }
  body.ios .pnl-step { padding: 14px; }

  /* پنجره‌ی تأیید کمی پهن‌تر روی گوشی‌های کوچک */
  .ios-alert__box { width: min(300px, 100%); }
}

/* گوشی‌های خیلی باریک (۳۲۰–۳۶۰) */
@media (max-width: 360px) {
  body.ios .pnl-main { padding-inline: 12px; }
  body.ios .pnl-nav button { font-size: 9.5px; }
  body.ios .pnl-title { font-size: 24px; }
}

/* =========================================================================
   داشبورد کاربر (panel.html) و پنل مدیریت (admin.html)
   ========================================================================= */

/* ── جدول‌ها ──────────────────────────────────────────────────────────── */
body.ios .pnl-table-wrap {
  border-radius: var(--ios-r-item);
  background: var(--ios-fill);
}
body.ios table.pnl-table th {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ios-text-2);
  border-bottom: 1px solid var(--ios-hair);
}
body.ios table.pnl-table td { border-top-color: var(--ios-hair); }
body.ios table.pnl-table tbody tr { transition: background 0.15s ease; }
@media (hover: hover) {
  body.ios table.pnl-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
}

/* ── پنجره‌ها (مودال) — شیشه‌ی پررنگ، مثل برگه‌های iOS ──────────────── */
body.ios .pnl-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.ios .pnl-modal {
  background: var(--ios-glass-strong);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--ios-hair);
  border-top-color: var(--ios-edge);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: ios-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
body.ios .pnl-modal h3 { font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* ── تیکت‌ها: فهرست و گفتگو مثل «پیام‌ها»ی آیفون ─────────────────────── */
body.ios .tk__list,
body.ios .tk__pane {
  background: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  border: 1px solid var(--ios-hair);
  border-radius: var(--ios-r-card);
  box-shadow: var(--ios-shadow);
}
body.ios .tk__item { border-radius: 12px; }
body.ios .tk__item.is-active { background: rgba(232, 201, 135, 0.14); }
body.ios .tk__msg { border-radius: 18px; font-size: 15px; line-height: 1.7; }
body.ios .tk__msg--user { background: rgba(232, 201, 135, 0.18); border-color: rgba(232, 201, 135, 0.28); }
body.ios .tk__msg--staff { background: var(--ios-fill-strong); border-color: var(--ios-hair); }
body.ios .tk__title, body.ios .tk__itemsubject { font-family: inherit; letter-spacing: -0.01em; }

/* ── سوییچ‌ها و کنترل سه‌حالته ──────────────────────────────────────── */
body.ios .pnl-toggle { width: 51px; height: 31px; }
body.ios .pnl-toggle .track { background: var(--ios-fill-strong); box-shadow: none; }
body.ios .pnl-toggle .track::before {
  top: 2px; left: 2px; width: 27px; height: 27px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body.ios .pnl-toggle input:checked + .track { background: var(--ios-green); }
body.ios .pnl-toggle input:checked + .track::before { transform: translateX(20px); background: #fff; }
/* راست‌به‌چپ: دکمه از راست شروع می‌شود و با روشن شدن به چپ می‌رود (مثل iOS فارسی) */
html[dir="rtl"] body.ios .pnl-toggle .track::before { left: auto; right: 2px; }
html[dir="rtl"] body.ios .pnl-toggle input:checked + .track::before { transform: translateX(-20px); }

/* «پیش‌فرض / مجاز / مسدود» = کنترل بخش‌بندی‌شده‌ی iOS */
body.ios .pnl-tri { background: var(--ios-fill); border-radius: 10px; padding: 2px; box-shadow: none; }
body.ios .pnl-tri button {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; border-radius: 8px;
  color: var(--ios-text-2);
}
body.ios .pnl-tri button.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ios-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.ios .pnl-tri button.is-active[data-val="true"] { color: var(--ios-green); }
body.ios .pnl-tri button.is-active[data-val="false"] { color: var(--ios-red); }

/* ── کارت امکانات، کیف پول، پرداخت ─────────────────────────────────── */
body.ios .pnl-feature h4,
body.ios .pnl-balance .unit,
body.ios .pnl-network,
body.ios .pnl-lock-chip { font-family: inherit; letter-spacing: 0; text-transform: none; }
body.ios .pnl-feature .ic { color: var(--ios-tint); opacity: 1; }
body.ios .pnl-balance .amount { font-family: -apple-system, "SF Pro Rounded", Vazirmatn, sans-serif; font-weight: 700; }
body.ios .pnl-network { border-radius: 12px; }
body.ios .pnl-copy-btn { border-radius: 10px; }
body.ios .pnl-ovr-row .name { font-family: inherit; letter-spacing: 0; }

/* ── منوی پایین موبایل وقتی بخش‌ها زیادند (داشبورد ۷، مدیریت ۹) ──────── */
@media (max-width: 860px) {
  body.ios .pnl-side .pnl-nav {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.ios .pnl-side .pnl-nav::-webkit-scrollbar { display: none; }
  /* فقط منوهای ۷+ بخشی (داشبورد، مدیریت)؛ ۶ زبانه‌ی اتوماسیون جا می‌شوند */
  body.ios .pnl-nav:has(> :nth-child(7)) > button,
  body.ios .pnl-nav:has(> :nth-child(7)) > .pnl-nav-link {
    flex: 1 0 64px;   /* نیمه‌ی پیدای آخرین زبانه نشان می‌دهد نوار اسکرول می‌خورد */
    scroll-snap-align: start;
  }
  body.ios .pnl-nav > .pnl-nav-link { display: flex; }
  body.ios .pnl-nav:has(> :nth-child(7)) > .pnl-nav-link { min-width: 64px; }
  body.ios a.ios-back { margin-bottom: 12px; }
  body.ios .pnl-nav > .pnl-nav-link > button { flex: 1; width: 100%; }
  /* خروج: فقط آیکون، ته نوار */
  body.ios .pnl-side > .pnl-logout {
    flex: none;
    width: 46px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--ios-red);
    border-radius: 14px;
  }
  body.ios .pnl-side > .pnl-logout span { display: none; }
  body.ios .pnl-side > .pnl-nav-spacer { display: none; }
}

/* =========================================================================
   پنل مدیریت: «اسطرلاب» — شیشه‌ی مات روی آسمان سرمه‌ای با ستاره‌ی طلایی،
   کره‌ی سیمی چرخان، مدارها و رشته‌های نور (assets/js/astrolabe.js)
   ========================================================================= */

body.ios.admin-astro {
  --ios-bg: #0b1020;
  /* شیشه با ته‌رنگ سرمه‌ای؛ کمی پررنگ‌تر تا نور ستاره متن را نشوید */
  --ios-glass: rgba(16, 21, 40, 0.56);
  --ios-glass-strong: rgba(19, 25, 46, 0.86);
  --ios-hair: rgba(255, 232, 196, 0.10);
  --ios-edge: rgba(255, 222, 170, 0.24);
  --ios-tint: #f4c878;          /* طلایی ستاره */
  --ios-tint-ink: #1d1405;
  background: #0b1020;
}
body.ios.admin-astro::before { display: none; }   /* والپیپر رنگی جایش را به اسطرلاب می‌دهد */

.astro-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
  background: #0b1020;
}
/* بدون Canvas: ستاره و یک حلقه با گرادیان */
.astro-canvas.astro-fallback {
  background:
    radial-gradient(circle at 55% 46%, #fff8e6 0 0.6vmin, rgba(255, 206, 128, 0.55) 1.4vmin, transparent 9vmin),
    radial-gradient(circle at 55% 46%, transparent 27vmin, rgba(255, 206, 128, 0.35) 27.2vmin, transparent 27.6vmin),
    radial-gradient(circle at 55% 46%, rgba(40, 52, 90, 0.6), transparent 60vmin),
    #0b1020;
}

body.ios.admin-astro .pnl-card,
body.ios.admin-astro .pnl-tile,
body.ios.admin-astro .tk__list,
body.ios.admin-astro .tk__pane {
  box-shadow: 0 10px 40px rgba(2, 4, 12, 0.5), inset 0 1px 0 rgba(255, 226, 170, 0.08);
}
/* زبانه‌ی فعال: از طلایی ستاره به آبی-نقره‌ای هلال */
body.ios.admin-astro .pnl-nav button.is-active {
  background: linear-gradient(90deg, rgba(244, 200, 120, 0.22), rgba(150, 176, 214, 0.08));
  color: var(--ios-tint);
}
html[dir="rtl"] body.ios.admin-astro .pnl-nav button.is-active {
  background: linear-gradient(270deg, rgba(244, 200, 120, 0.22), rgba(150, 176, 214, 0.08));
}
body.ios.admin-astro .pnl-title {
  background: linear-gradient(100deg, #fff 35%, #ffe2a8 75%, #f4c878);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* دکمه‌ی «حرکت پس‌زمینه» (روشن/خاموش انیمیشن) */
.astro-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 4px 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ios-text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.astro-toggle:hover { background: var(--ios-fill); }
.astro-toggle:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 2px; }
.astro-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ios-green); }
.astro-toggle[aria-pressed="false"] .astro-toggle__dot { background: var(--ios-text-3); }
@media (max-width: 860px) { .astro-toggle { display: none; } }

/* دسکتاپ راست‌به‌چپ: نوار کناری سمت راست است، پس انتخاب زبان می‌رود سمت چپ
   (وگرنه روی «بازگشت» ته نوار کناری می‌افتاد) */
@media (min-width: 861px) {
  html[dir="rtl"] body.ios .lang-switch { right: auto; left: 18px; }
  html[dir="rtl"] body.ios .lang-switch__menu { right: auto; left: 0; }
}
/* گرادیان عنوان فقط به اندازه‌ی خود متن (عنوان بلوکی است و در RTL متن کوتاه
   فقط سر نارنجی گرادیان را می‌گرفت) */
body.ios.admin-astro .pnl-title { width: fit-content; max-width: 100%; }

/* فهرست بازشوی <select>: پنجره‌ی بومی مرورگر پس‌زمینه‌ی شیشه‌ای را نمی‌شناسد و
   سفید می‌شد، با متن روشن ما → گزینه‌ها فقط زیر هایلایت آبی خوانا بودند */
body.ios { color-scheme: dark; }
body.ios select option,
body.ios select optgroup { background-color: #161c30; color: #eef0f6; }
body.ios select option:checked { background-color: #2a3352; color: #fff; }

/* متن‌هایی که بیرون از کارت‌ها روی آسمان می‌نشینند، روی نور ستاره هم خوانا */
body.ios.admin-astro .pnl-eyebrow,
body.ios.admin-astro .pnl-sub,
body.ios.admin-astro .ios-back {
  text-shadow: 0 1px 10px rgba(6, 9, 20, 0.9), 0 0 2px rgba(6, 9, 20, 0.7);
}
/* عنوان گرادیانی (background-clip: text) با text-shadow خراب می‌شود؛ drop-shadow نه */
body.ios.admin-astro .pnl-title { filter: drop-shadow(0 1px 8px rgba(6, 9, 20, 0.85)); }

/* =========================================================================
   مینی‌اپ تلگرام/بله (pages/app.html): یک کارت ورود شیشه‌ای وسط صفحه
   ========================================================================= */
body.ios.app-mini { min-height: 100vh; }
.app-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.app-brand { display: flex; align-items: center; gap: 10px; color: var(--ios-text); font-weight: 700; font-size: 18px; }
.app-brand img { width: 36px; height: 36px; }
.app-loading { color: var(--ios-text-2); }
.app-card { width: min(420px, 100%); }
.app-card .pnl-title { font-size: 24px; }
.app-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.app-card .pnl-input { width: 100%; font-size: 16px; }
.app-pass { position: relative; display: block; }
.app-pass .pnl-link-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-end: 12px; font-size: 13px;
}
.app-pass .pnl-input { padding-inline-end: 64px; }
.app-submit { width: 100%; justify-content: center; min-height: 48px; }
.app-foot { margin: 14px 0 0; text-align: center; font-size: 14px; }
.app-foot a { color: var(--ios-tint); text-decoration: none; }
.app-links { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 8px; }
.app-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  background: var(--ios-fill); color: var(--ios-text); text-decoration: none;
  transition: background 0.15s ease;
}
.app-link:hover, .app-link:focus-visible { background: var(--ios-fill-strong); }
.app-link b { display: block; font-size: 15px; }
.app-link small { display: block; font-size: 12.5px; color: var(--ios-text-2); }
.app-link .ios-tint { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.app-link .ios-tint svg { width: 19px; height: 19px; }
.app-logout { margin-top: 6px; color: var(--ios-red); }

/* صف انتشار: کدام مقصد و چرا نرفت */
.auto-post-fails { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.auto-post-fails li { line-height: 1.6; }

/* کارت واتساپ: گروه‌های شماره — فقط با «افزودن به انتشار» مقصد می‌شوند */
.auto-wagroups { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--ios-hair, rgba(255,255,255,0.1)); }
.auto-wagroups__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auto-wagroups__head h4 { margin: 0; font-size: 15px; }
.auto-wagroups__list { display: grid; gap: 8px; margin-top: 10px; }
.auto-wagroup {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--ios-fill, rgba(255,255,255,0.06));
}
.auto-wagroup .info { display: flex; flex-direction: column; min-width: 0; }
.auto-wagroup .name { font-weight: 600; overflow-wrap: anywhere; }
.auto-wagroup .meta { font-size: 12.5px; color: var(--ios-text-2, rgba(255,255,255,0.6)); }
.auto-wagroup__add { flex: none; padding: 8px 12px; font-size: 13px; }