/* اسکلت اپ — سایدبار، نوار بالا، ناحیهٔ محتوا.
 *
 * Faraz ships a storefront sidebar with six collapsible sections; ours has two
 * links. Rather than bend theirs into a shape it was not drawn for, this is a
 * thin layer built from the theme's own custom properties, so it inherits every
 * colour and radius and follows the dark-mode switch without knowing about it.
 *
 * Nothing here flips a direction. The page is dir="rtl" and these rules use
 * logical properties, so the layout mirrors itself. */

/* 🔴 `100vh` **پیش از** `100dvh` — و این fallback اجباری است.
 *
 * وب‌ویوی اندروید زیرِ کروم ۱۰۸ واحدِ `dvh` را نمی‌شناسد، و یک واحدِ
 * ناشناس کلِ اعلان را بی‌اثر می‌کند. آن‌وقت `.app` هیچ ارتفاعی ندارد،
 * `.chat-wrap { height: 100% }` می‌شود ۱۰۰٪ ِ auto، و `.messages` که
 * `flex: 1; overflow-y: auto` است هیچ سقفی پیدا نمی‌کند — پس جای یک ناحیهٔ
 * اسکرول‌شوندهٔ داخلی، کلِ صفحه یک سندِ بلند می‌شود: سرصفحه از بالا
 * می‌رود، جعبهٔ نوشتن خیلی پایین می‌افتد، و «هیچ کنترلی روش نیست».
 *
 * ⚠️ در مرورگرِ دسکتاپ و در هر ابزارِ سنجشِ مدرن این هیچ‌وقت دیده نمی‌شود،
 * چون آن‌ها `dvh` را دارند. فقط روی گوشیِ واقعیِ با وب‌ویوی کهنه پیدا شد —
 * و وب‌ویو در ایران چون از گوگل‌پلی به‌روز نمی‌شود، عادتاً کهنه است.
 */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* The theme gives .fz-chip and friends an explicit display, which outranks the
   browser's [hidden] rule — so a hidden balance chip drew as an empty green
   circle in the bar. hidden must mean hidden, whatever the class says. */
[hidden] { display: none !important; }
.fz-topbar {
  display: flex; align-items: center; gap: .9rem;
  height: 3.25rem; padding: 0 1rem; flex: 0 0 auto;
  background: var(--fz-surface, #fff);
  border-bottom: 1px solid var(--fz-border, #e5e7eb);
}
/* The nav takes the middle and pushes the account controls to the far end. On a
   narrow screen it scrolls sideways instead of wrapping the bar to two lines. */
.topnav { display: flex; align-items: center; gap: .25rem; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.fz-brand-name { white-space: nowrap; }
@media (max-width: 640px) {
  .fz-topbar { padding: 0 .75rem; gap: .5rem; }
  .fz-brand-word { display: none; }
  .fz-topbar-user { display: none; }
  .topnav-link span { display: none; }        /* icons alone on a phone */
  .topnav-link { padding: .45rem .55rem; }
  .topnav-link .ico { width: 1.15rem; height: 1.15rem; opacity: 1; }
}
/* On the chat page the bar is gone on a phone: the chat header and the drawer
   carry everything it had. */
@media (max-width: 900px) {
  .fz-chat-page .fz-topbar { display: none; }
}

/* 🔴 یک خطِ عمودی، از بالای صفحه تا پایین.
 *
 * The conversation list has a border down its inline-end, and the bar above it
 * did not continue that line: the brand ended wherever its text ended and the
 * menu began *inside* the list's column, so the two halves of the page did not
 * line up. The brand now occupies exactly the list's width and carries the same
 * border, so the divider runs unbroken from the top and the menu starts where
 * the conversation column starts. Padding matches .chat-list-top, so the brand
 * mark sits directly above the "new chat" button. */
@media (min-width: 901px) {
  .fz-chat-page .fz-topbar { padding-inline-start: 0; gap: 0; }
  .fz-chat-page .fz-brand {
    width: 17rem; flex: 0 0 auto; align-self: stretch;
    padding-inline: .8rem;
    border-inline-end: 1px solid var(--fz-border, #e5e7eb);
  }
  .fz-chat-page .topnav { padding-inline-start: .9rem; }
}
.topnav-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem; border-radius: .65rem; font-size: .82rem;
  color: var(--fz-text-soft, #475569); text-decoration: none; white-space: nowrap;
}
.topnav-link .ico { width: 1rem; height: 1rem; opacity: .8; }
.ico { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
/* روشن/تاریک: همان دکمه، دو آیکن؛ CSS تصمیم می‌گیرد کدام دیده شود */
#themeToggle .ico-sun, #drawerTheme .ico-sun { display: none; }
html.dark #themeToggle .ico-sun, html.dark #drawerTheme .ico-sun { display: block; }
html.dark #themeToggle .ico-moon, html.dark #drawerTheme .ico-moon { display: none; }
.topnav-link:hover { background: var(--fz-surface-soft, #f1f5f9); }
/* ⚠️ `--fz-primary` و `--fz-primary-soft` در هیچ تمی تعریف نشده‌اند، پس
   همیشه همان دو مقدارِ پشتیبان می‌نشستند — و `#059669` روی تمِ تاریک فقط
   ۳٫۵۸ می‌داد. توکن‌های برندِ واقعی تعریف‌شده‌اند؛ از همان‌ها. */
.topnav-link.active {
  background: var(--fz-brand-50, #ecfdf5);
  color: var(--fz-brand-700, #1e6a61); font-weight: 600;
}
html.dark .topnav-link.active {
  background: color-mix(in srgb, var(--fz-brand-400, #4bbcac) 16%, transparent);
  color: var(--fz-brand-400, #4bbcac);
}
.fz-topbar-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }

/* --- اعتبار و کاربر، در سرصفحه ------------------------------------------- *
 * 🔴 این‌ها کلاسِ `.fz-chip` داشتند و قالب آن را یک مربعِ ثابتِ ۲٫۸۷۵rem برای
 * «یک آیکن» تعریف کرده — پس عدد از کاشیِ سبز بیرون می‌زد و روی نام کاربر
 * می‌افتاد. حالا کلاسِ خودشان را دارند و شکلشان از محتواشان می‌آید. */
.credit-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 2rem; padding: 0 .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--fz-primary, #059669);
  background: var(--fz-primary-soft, #ecfdf5);
  border: 1px solid color-mix(in srgb, var(--fz-primary, #059669) 22%, transparent);
  transition: background .15s, border-color .15s;
}
.credit-chip:hover { background: color-mix(in srgb, var(--fz-primary, #059669) 14%, transparent); }
.credit-chip .ico { width: 1rem; height: 1rem; opacity: .85; }
/* کم‌بودنِ اعتبار باید دیده شود، ولی مثل خطا فریاد نزند */
.credit-chip.is-low { color: #b45309; background: #fffbeb; border-color: #fcd34d; }
html.dark .credit-chip { background: rgba(43,161,145,.16); border-color: rgba(43,161,145,.3);
  color: var(--fz-brand-400, #4bbcac); }   /* the light-mode green is too dim on this ground */
html.dark .credit-chip.is-low { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); color: #fbbf24; }

.fz-topbar-user {
  display: inline-flex; align-items: center; gap: .4rem; height: 2rem;
  padding: 0 .6rem 0 .25rem; border-radius: 999px; text-decoration: none;
  color: var(--fz-text-soft, #475569); font-size: .8rem; white-space: nowrap;
}
.fz-topbar-user:hover { background: var(--fz-surface-soft, #f1f5f9); }
.user-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 999px; flex: 0 0 auto;
  font-size: .72rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--fz-brand-500, #2ba191), var(--fz-brand-700, #1e6a61));
}
@media (max-width: 760px) { .fz-topbar-user .user-name { display: none; } }

/* The content area scrolls, the shell does not — a chat that pushes the whole
   page down loses the composer off the bottom of the screen. */
.fz-content { flex: 1 1 auto; overflow: auto; min-height: 0; }

/* Numbers are tabular everywhere: money that jitters between rows is hard to
   scan, and Persian digits come from the font rather than a substitution. */
.num { font-variant-numeric: tabular-nums; }
code, pre, .ltr { direction: ltr; text-align: left; unicode-bidi: isolate; }



/* --- چیدمان صفحه‌های پنل --- */
.fz-page { padding: 1.25rem; }
.fz-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
/* The whole 1..12 set, not the handful we happen to use today. A missing class
 * fails silently — the element keeps its default single column and the page
 * comes out half-width with no error anywhere. That already happened once. */
.fz-span-1  { grid-column: span 1;  }
.fz-span-2  { grid-column: span 2;  }
.fz-span-3  { grid-column: span 3;  }
.fz-span-4  { grid-column: span 4;  }
.fz-span-5  { grid-column: span 5;  }
.fz-span-6  { grid-column: span 6;  }
.fz-span-7  { grid-column: span 7;  }
.fz-span-8  { grid-column: span 8;  }
.fz-span-9  { grid-column: span 9;  }
.fz-span-10 { grid-column: span 10; }
.fz-span-11 { grid-column: span 11; }
.fz-span-12 { grid-column: span 12; }

/* Narrow enough and every column is the whole width — a nine-wide column and a
 * three-wide one side by side stop being two columns and start being two
 * cramped ones. */
@media (max-width: 1100px) {
  .fz-span-1, .fz-span-2, .fz-span-3, .fz-span-4, .fz-span-5, .fz-span-6,
  .fz-span-7, .fz-span-8, .fz-span-9, .fz-span-10, .fz-span-11 {
    grid-column: span 12;
  }
}

.fz-card-title { font-size: .85rem; font-weight: 700; color: var(--fz-text, #0f172a); margin: 0 0 .75rem; }
.fz-sub { font-size: .78rem; color: var(--fz-text-faint, #94a3b8); }
.fz-stat { font-size: 1.9rem; font-weight: 800; color: var(--fz-text, #0f172a); margin: .2rem 0 .6rem; }
.fz-bar { height: .35rem; border-radius: 999px; background: var(--fz-surface-soft, #f1f5f9); overflow: hidden; }
.fz-bar i { display: block; height: 100%; background: var(--fz-primary, #059669); }
.fz-bar i.warn { background: #f59e0b; } .fz-bar i.hot { background: #dc2626; }

.fz-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.fz-field { display: flex; flex-direction: column; gap: .3rem; }
.fz-field > span { font-size: .72rem; color: var(--fz-text-faint, #94a3b8); }

.fz-table-wrap { overflow-x: auto; }
.fz-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
/* ⚠️ `text-align: start` برداشته شد — قانونِ وسط‌چینیِ پایین‌تر باید
   برنده شود؛ وگرنه سرستون و مقدار دو طرفِ ستون می‌افتند. */
.fz-table th, .fz-table td { padding: .6rem .75rem;
  border-bottom: 1px solid var(--fz-border, #e5e7eb); }
.fz-table th { font-size: .74rem; font-weight: 600; color: var(--fz-text-faint, #94a3b8); }
.fz-table tbody tr:hover { background: var(--fz-surface-soft, #f1f5f9); }
.fz-table-plain td, .fz-table-plain th { border: 0; padding: .35rem .5rem; }

.fz-pre { background: var(--fz-surface-soft, #f1f5f9); padding: .8rem; border-radius: .6rem;
  overflow: auto; font-size: .78rem; margin: 0; }
.fz-pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .7rem;
  background: var(--fz-surface-soft, #f1f5f9); color: var(--fz-text-faint, #94a3b8); }
.fz-pill-ok { background: #ecfdf5; color: #059669; }
.fz-pill-off { background: #fef2f2; color: #dc2626; }
.fz-pill-info { background: #eff6ff; color: #2563eb; }
.key-reveal { border: 1px solid var(--fz-primary, #059669); background: var(--fz-primary-soft, #ecfdf5);
  border-radius: .6rem; padding: .8rem; margin-top: .8rem; }
.fz-alert { border-radius: .6rem; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .85rem;
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.fz-alert-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.fz-tabs { display: flex; gap: .35rem; padding: 0 1.25rem; border-bottom: 1px solid var(--fz-border,#e5e7eb); }
.fz-tab { padding: .6rem .9rem; font-size: .85rem; cursor: pointer; background: none; border: 0;
  color: var(--fz-text-faint, #94a3b8); border-bottom: 2px solid transparent; }
.fz-tab.active { color: var(--fz-primary, #059669); border-bottom-color: var(--fz-primary, #059669); font-weight: 600; }


/* --- فونت، سراسری ---------------------------------------------------------
 * The theme names its typeface in a dozen separate rules; missing one shows up
 * as a different font halfway down a page. This settles it in one place, for
 * every element including form controls, which do not inherit by default. */
:root { --fz-font: 'IRANSansXFaNum', 'IRANSansX', ui-sans-serif, system-ui, sans-serif; }
html, body, button, input, select, textarea, optgroup, .fz-btn, .fz-input {
  font-family: var(--fz-font) !important;
}
/* Code is monospace, but Persian inside it (a command that greps for a Persian
   word, a commit message) must not fall back to whatever ugly face the OS has
   for Arabic script: IRANSansX sits at the end of the stack for those glyphs. */
/* 🔴 فارسی **اول**، و با `unicode-range` محدود شده (نگاه: theme-faraz.css).
 * نسخهٔ قبلی ایران‌سنس را ته پشته داشت و هیچ‌وقت به آن نمی‌رسید؛ سنجیده شد:
 * فارسی ۲۸۴px در برابر ۲۳۸px ِ ایران‌سنس. حالا هر گلیفِ فارسی از ایران‌سنس
 * می‌آید و هر چیزِ دیگر — لاتین، رقم، نشانه — از mono، پس ستون‌ها هم
 * سرِ جایشان می‌مانند. */
:root { --fz-mono: 'IRANSansXMonoFa', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
code, pre, kbd, samp { font-family: var(--fz-mono); }

/* --- دیالوگ --- ------------------------------------------------------------
 * Shared: the chat's "new conversation" dialog and the keys page's "new key"
 * form are the same object wearing different contents. */
.fz-modal { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 23, 42, .55); }
.fz-modal[hidden] { display: none; }
.fz-modal-card { width: min(30rem, 100%); padding: 1.5rem;
  max-height: 90vh; overflow-y: auto; }
.fz-modal-head { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem; }
.fz-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--fz-text, #0f172a); }

/* --- سرصفحهٔ صفحه --- */
.fz-page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fz-page-head h1 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 800;
  color: var(--fz-text, #0f172a); }

/* --- متن بلند (راهنما) --- */
.fz-prose { line-height: 2.1; font-size: .88rem; color: var(--fz-text, #0f172a); }
.fz-prose p { margin: 0 0 .8rem; }
.fz-prose ul, .fz-prose ol { margin: 0 0 .9rem; padding-inline-start: 1.3rem; }
.fz-prose li { margin-bottom: .3rem; }
.fz-prose code { background: var(--fz-surface-soft, #f1f5f9); padding: .08rem .35rem;
  border-radius: .3rem; font-size: .82em; }
.fz-h { font-size: .95rem; font-weight: 800; color: var(--fz-text, #0f172a);
  margin: 1.4rem 0 .6rem; }
.fz-h:first-child { margin-top: 0; }

/* Code is always left-to-right, whatever the page around it does. */
/* 🔴 `.ltr` در این مخزن یعنی «رشتهٔ فنی»: نشانیِ کیفِ تتر، شمارهٔ سفارش،
   TxID، مسیرِ دانلود، کد.

   و فونتِ رابط (FaNum) رقمِ **لاتین** را به گلیفِ فارسی نگاشت می‌کند —
   سنجیده شد: عرضِ `0123456789` و `۰۱۲۳۴۵۶۷۸۹` دقیقاً برابر است. نتیجه‌اش
   `AIWS-۰۸۱b۸۵aad۲۶۷۷daf` بود: نیمی فارسی، نیمی لاتین.

   ⚠️ روی نشانیِ کیفِ تتر این فقط زشتی نیست: کاربر باید همان رشته را با
   چیزی که در صرافی می‌بیند تطبیق دهد. `IRANSansX` (بدونِ FaNum) رقم را
   لاتین نگه می‌دارد. */
.ltr {
  direction: ltr; text-align: left; unicode-bidi: isolate;
  font-family: 'IRANSansX', ui-monospace, system-ui, sans-serif;
}
.fz-pre.ltr code { display: block; }

/* --- ناوبری کناریِ راهنما --- */
.fz-toc { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .1rem; }
.fz-toc a { padding: .4rem .6rem; border-radius: .45rem; font-size: .82rem;
  color: var(--fz-text-soft, #475569); text-decoration: none; }
.fz-toc a:hover { background: var(--fz-surface-soft, #f1f5f9); }

/* --- زبانه‌های نمونهٔ کد --- */
.fz-codetabs { display: flex; gap: .3rem; margin-bottom: .5rem; flex-wrap: wrap; }
.fz-codetab { padding: .3rem .7rem; font-size: .78rem; cursor: pointer;
  border-radius: .45rem; border: 1px solid var(--fz-border, #e5e7eb);
  background: none; color: var(--fz-text-soft, #475569); }
.fz-codetab.active { background: var(--fz-primary, #059669); color: #fff;
  border-color: var(--fz-primary, #059669); }

/* --- کدهای وضعیت --- */
.code-2xx { color: #059669; font-weight: 700; }
.code-4xx { color: #b45309; font-weight: 700; }
.code-5xx { color: #dc2626; font-weight: 700; }

/* --- نمای لاگ --- ----------------------------------------------------------
 * Monospace on purpose, and only here: aligned columns are the whole point of
 * a log, and this is the one place in the app where prose readability loses to
 * being able to scan a timestamp down the left edge. */
.log-box {
  max-height: 60vh; overflow: auto; margin-top: 1rem;
  background: var(--fz-surface-soft, #f1f5f9);
  border: 1px solid var(--fz-border, #e5e7eb); border-radius: .6rem;
  padding: .6rem .75rem;
  /* 🔴 تنها پشتهٔ فونتِ سرویس که ایران‌سنس در آن نبود. لاگ فارسی هم
     دارد (پیامِ خطا، نامِ کار) و آن‌ها به فونتِ سیستم می‌افتادند —
     بی‌هیچ نشانه‌ای، چون بقیهٔ صفحه درست بود. `--fz-mono` همین است
     به‌علاوهٔ ایران‌سنس در انتها، برای همان گلیف‌های فارسی. */
  font-family: var(--fz-mono);
  font-size: .76rem; line-height: 1.8;
}
.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line.log-warn { color: #b45309; }
.log-line.log-err  { color: #dc2626; }

/* --- جدول جمع‌وجور و دکمه‌های آیکنی --- ------------------------------------
 * A table with nine columns needs every pixel it can get, and an action column
 * of words ("ابطال", "حذف") eats the width that the data needs. */
.fz-table-tight th, .fz-table-tight td { padding: .45rem .55rem; }
.fz-table-tight { font-size: .8rem; }
.fz-table-tight .fz-sub { font-size: .7rem; }

.git-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.git-row > div:first-child { flex: 1 1 14rem; min-width: 0; }
.git-row .fz-input { flex: 1 1 18rem; }

.sess-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sess-head .fz-btn:disabled { opacity: .5; cursor: default; }
.icon-act .ico { width: .95rem; height: .95rem; }

.col-act { width: 1%; white-space: nowrap; text-align: end; }
.icon-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin-inline-start: .2rem;
  border: 1px solid var(--fz-border, #e5e7eb); border-radius: .45rem;
  background: none; color: var(--fz-text-soft, #475569);
  cursor: pointer; font-size: .9rem; line-height: 1;
}
.icon-act:hover { background: var(--fz-surface-soft, #f1f5f9); color: var(--fz-text, #0f172a); }
.icon-act.danger:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* سرگروهِ فهرستِ راهنما — راهنما دو نیمه دارد: کار با پنل، و API */
.fz-toc-group {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--fz-text-faint, #94a3b8);
  padding: .5rem .25rem .2rem;
}
.fz-toc-group:first-child { padding-top: 0; }

/* کلیدهای صفحه‌کلید در راهنما — بدون این، <kbd> فقط متنِ مونو است */
kbd {
  display: inline-block; padding: .05rem .38rem; border-radius: .35rem;
  font-size: .78em; line-height: 1.5; direction: ltr;
  color: var(--fz-text, #0f172a);
  background: var(--fz-surface-2, #f6faf8);
  border: 1px solid var(--fz-border, #e5e7eb);
  box-shadow: 0 1px 0 var(--fz-border, #e5e7eb);
}
html.dark kbd { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

/* فهرست دانلود در راهنما */
.dl-row {
  display: flex; align-items: center; gap: .7rem; padding: .5rem 0;
  border-bottom: 1px solid var(--fz-border, #e5e7eb);
}
.dl-row:last-child { border-bottom: 0; }
.dl-row .dl-name { flex: 1; font-size: .84rem; color: var(--fz-text, #0f172a); }
/* نامِ فایل زیرِ برچسبِ آدمی می‌نشیند — هست تا کاربر بداند چه گرفت، ولی
   انتخاب را برچسب می‌سازد نه آن. */
.dl-row .dl-file { display: block; font-size: .72rem; }
.dl-row .fz-btn { font-size: .78rem; padding: .25rem .8rem; }

/* --- جدولِ قیمت: ستون‌های کنارِ هم ---------------------------------------
   🔴 «جدول قیمت» ردیف‌های یک <table> نیست. چشم پلن‌ها را عمودی مقایسه
   می‌کند، پس هر پلن یک ستون است — و یک ستون باید برجسته باشد، وگرنه پنج
   گزینهٔ یکسان یعنی تصمیمِ سخت‌تر نه راحت‌تر. */
.planCards { display: grid; grid-template-columns: repeat(5, 1fr);
             gap: .9rem; align-items: stretch; }
.planCards .plan { background: var(--fz-surface, #fff);
  border: 1px solid var(--fz-border, #e2e8f0); border-radius: 14px;
  padding: 1.25rem 1.1rem; display: flex; flex-direction: column;
  position: relative; }
.planCards .plan.featured { border-color: var(--fz-primary, #059669);
  border-width: 2px; box-shadow: 0 8px 24px -12px rgba(5,150,105,.45); }
.planCards .tag { position: absolute; top: -.7rem; inset-inline-start: 1rem;
  background: var(--fz-primary, #059669); color: #fff; font-size: .7rem;
  font-weight: 700; padding: .18rem .6rem; border-radius: 999px; }
.planCards h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .15rem;
  color: var(--fz-text, #0f172a); }
.planCards .who { font-size: .76rem; color: var(--fz-text-faint, #94a3b8);
  min-height: 2.4em; line-height: 1.6; margin-bottom: .7rem; }
.planCards .price { font-size: 1.6rem; font-weight: 800;
  color: var(--fz-text, #0f172a); letter-spacing: -.5px; }
.planCards .price small { font-size: .8rem; font-weight: 500;
  color: var(--fz-text-faint, #94a3b8); }
.planCards .rial { font-size: .8rem; color: var(--fz-text-soft, #475569);
  margin: .15rem 0 .9rem; min-height: 1.4em; }
.planCards ul { list-style: none; padding: 0; margin: 0 0 1rem; flex: 1; }
.planCards li { font-size: .82rem; color: var(--fz-text-soft, #475569);
  padding: .34rem 0; border-bottom: 1px dashed var(--fz-border, #e2e8f0);
  display: flex; justify-content: space-between; gap: .5rem; }
.planCards li:last-child { border-bottom: 0; }
.planCards li b { color: var(--fz-text, #0f172a); font-weight: 700; }
.planCards .buy { display: block; text-align: center; text-decoration: none;
  border-radius: 9px; padding: .55rem; font-weight: 700; font-size: .85rem;
  background: var(--fz-surface-soft, #f1f5f9); color: var(--fz-text, #0f172a); }
.planCards .plan.featured .buy { background: var(--fz-primary, #059669); color: #fff; }
@media (max-width: 1100px) { .planCards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .planCards { grid-template-columns: repeat(2, 1fr); } }

/* 🔴 سلولِ `.ltr` در جدولِ راست‌چین — و این «بی‌نظمی»ِ دیده‌شده بود.
   سلولی که رشتهٔ فنی دارد `direction: ltr` می‌گیرد تا مسیر و شناسه درست
   خوانده شود؛ ولی آن‌وقت `text-align: start` برای همان سلول یعنی **چپ**،
   در حالی که سرستونش راست‌چین می‌ماند. نتیجه: سرستون یک طرف، مقدارها
   طرفِ دیگر، و ده‌ها پیکسل فاصلهٔ خالی وسط.
   پس در جدول، لبه را صریح می‌گوییم: همان لبه‌ای که ستون از آن شروع
   می‌شود. (سنجیده شد: صفحهٔ راهنما ۹ ستونِ ناهم‌تراز داشت، حالا صفر.) */

/* 🔴 همان تصمیمِ `panel.css`، و به همان دلیل عوض شد: مسئله فضای اضافه
   نبود، لبه‌چسبی بود. مقدارِ کوتاهِ وسط‌چین شبکه می‌سازد. */
.fz-table th, .fz-table td { text-align: center; }
.fz-table th.grow, .fz-table td.grow { text-align: start; width: 40%; }
/* ⚠️ عدد و رشتهٔ فنی وسط‌چین نمی‌شوند — مقایسهٔ رقم‌به‌رقم از بین می‌رود. */
/* استثنای ترازِ لبه‌چین برداشته شد — به همان دلیلِ legacy.css. */

/* 🔴 شناسهٔ فنی وسطِ کلمه نمی‌شکند.
   با برگشتنِ شکستِ متن، `claude-opus-5` شد «claude-» و «opus-5»، و
   `user:u-002` دو خط شد — مرورگر خط‌تیره و دونقطه را نقطهٔ شکست می‌داند.
   ⚠️ ولی `nowrap` ِ سراسری همان اشتباهِ قبلی است: متنِ فارسیِ بلند (پیامِ
   خطا) **باید** بشکند. پس فقط سلولِ شناسه‌دار. */
.fz-table .ltr, .fz-table .num, .fz-table .fz-cell-num,
.fz-table .mono, .fz-table .pn-mono { white-space: nowrap; }

/* 🔴 عددِ علامت‌دار در سلولِ راست‌به‌چپ از هم می‌پاشد.
   `−$0.4211` سه بخشِ خنثی دارد (علامت، دلار) و الگوریتمِ دوسویه آن‌ها را
   به جهتِ **متنِ دربرگیرنده** می‌چسباند: علامت می‌رفت سرِ دیگرِ عدد.
   با `getClientRects` سنجیده شد — پیش از اصلاح رشته **دو قطعهٔ جدا**
   رندر می‌شد، پس از آن یک قطعهٔ پیوسته.
   ⚠️ و تاریخِ فارسی (`۱۴۰۵/۰۶/۳۰-۱۱:۵۵`) که هم `pn-num` است، جابه‌جا
   نمی‌شود — سنجیده شد، مختصاتش یکی ماند. `isolate` یعنی این بسته روی
   همسایه‌اش هم اثر نمی‌گذارد. */
.pn-table .pn-num, .fz-table .num { direction: ltr; unicode-bidi: isolate; }

/* 🔴 رقمِ لاتین در فونتِ FaNum شکلِ فارسی می‌گیرد.
   ستونِ «مدل» در صفحهٔ حساب `claude-opus-۵` نشان می‌داد — یک شناسهٔ فنی
   با رقمِ فارسی، که نه قابلِ کپی است نه قابلِ جستجو. تمامِ فونتِ صفحه
   `IRANSansXFaNum` است و همین کار را می‌کند.
   ⚠️ برخلافِ `.ltr`، این کلاس ترازِ متن را دست نمی‌زند — ستون وسط‌چین
   می‌ماند مثل بقیه. `isolate` هم لازم است تا رشتهٔ لاتین جهتِ جملهٔ
   فارسیِ همسایه را به‌هم نریزد. */
.fz-table .latin, .pn-table .latin {
  font-family: 'IRANSansX', ui-monospace, system-ui, sans-serif;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}

/* پنهان برای چشم، موجود برای صفحه‌خوان.
   ⚠️ `display:none` این کار را نمی‌کند — صفحه‌خوان هم آن را نمی‌بیند. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}