/* ==========================================================================
   HERO AI — Layout & Pages
   ========================================================================== */

/* ————————————————————————— Site header ————————————————————————— */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,249,251,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.brand img { height: 38px; width: auto; }
.main-nav { display: flex; align-items: center; gap: var(--s-1); flex: 1; }
.main-nav a {
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-base); font-weight: 500;
  transition: all var(--t-fast);
}
.main-nav a:hover { color: var(--text); background: var(--bg-sunken); }
.main-nav a.is-active { color: var(--blue-500); background: var(--info-bg); }
.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.nav-toggle { display: none; }
.nav-start { display: none; }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }

  /* دراور منو: کشویی از زیر هدر، با ارتفاع محدود و اسکرول داخلی */
  .main-nav {
    position: fixed; inset-inline: 0; top: var(--header-h);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--s-3) var(--s-4) var(--s-5); box-shadow: var(--sh-md);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform var(--t), opacity var(--t);
    z-index: 60;
  }
  .main-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 12px 14px; font-size: var(--fs-base); border-radius: var(--r-md); }

  /* ترتیب در موبایل: آیکون منو (راست) — لوگو — دکمه شروع رایگان (چپ) */
  .site-header .container { gap: var(--s-3); }
  .brand { margin-inline-end: auto; }
  .header-actions { margin-inline-start: 0; }

  /* ورود و ثبت‌نام کامل به داخل دراور می‌روند تا هدر شلوغ نشود */
  .main-nav .nav-cta { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border); }
  .main-nav .nav-cta .btn { width: 100%; justify-content: center; }
  .header-actions .btn-ghost { display: none; }
  .header-actions .btn-primary[href="register.html"]:not(.nav-start) { display: none; }
  .nav-start { display: inline-flex; white-space: nowrap; }

  /* پرده‌ی پشت دراور */
  .nav-scrim {
    position: fixed; inset: var(--header-h) 0 0; z-index: 55;
    background: rgba(26,29,41,.32); opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

@media (min-width: 1001px) {
  .main-nav .nav-cta { display: none; }
  .nav-scrim { display: none; }
  .nav-start { display: none; }
}

@media (max-width: 420px) {
  .site-header .container { gap: var(--s-2); }
  .brand img { height: 30px; }
  .nav-start { padding-inline: 10px; font-size: var(--fs-xs); }
}

/* ————————————————————————— Footer ————————————————————————— */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: var(--s-7) var(--s-5); margin-top: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-6); }
.footer-grid h5 { font-size: var(--fs-base); margin-bottom: var(--s-3); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--s-2); }
.footer-links a { color: var(--text-2); font-size: var(--fs-sm); }
.footer-links a:hover { color: var(--blue-500); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  border-top: 1px solid var(--border); margin-top: var(--s-6); padding-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--text-3);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ————————————————————————— Hero ————————————————————————— */
.hero { position: relative; overflow: hidden; padding-block: var(--s-9); }
.hero::before {
  content: ''; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px; border-radius: 50%;
  background: var(--grad-brand); filter: blur(150px); opacity: .18; pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items: center; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); margin-bottom: var(--s-4); }
.hero .lead { font-size: var(--fs-md); max-width: 520px; }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.hero-note { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); }
.hero-note span { display: flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }

/* Live console mock in hero */
.console {
  background: #14161F; border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  overflow: hidden; direction: ltr; text-align: left;
}
.console-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,.05); }
.console-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3F4E; display: block; }
.console-bar .name { color: #6B7280; font-size: var(--fs-xs); margin-left: auto; }
.console-body { padding: var(--s-5); color: #E6E8F0; font-size: var(--fs-sm); line-height: 2; min-height: 250px; }
.console-body .c-key { color: #7FD8E4; }
.console-body .c-str { color: #C9A7F5; }
.console-body .c-com { color: #6B7280; }
.caret { display: inline-block; width: 8px; background: var(--cyan-400); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Stats strip */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.stat { text-align: center; padding: var(--s-4); }
.stat .metric-value { font-size: var(--fs-2xl); font-weight: 700; display: block; }
.stat .metric-label { color: var(--text-2); font-size: var(--fs-sm); }
@media (max-width: 700px) { .stats-strip { grid-template-columns: 1fr 1fr; } }

/* Model + tool cards */
.model-card { display: flex; flex-direction: column; }
.model-card-top { display: flex; gap: var(--s-3); align-items: flex-start; }
.model-card .meta { flex: 1; min-width: 0; }
/* عنوان کارت: تگش در تنظیمات ویجت قابل انتخاب است (h2 بود، برای سئو
   h3 شد)، پس استایل باید به کلاس بچسبد نه به تگ. h4 به‌عنوان تور
   ایمنی می‌ماند برای هر مارک‌آپ قدیمی‌ای که هنوز h4 می‌دهد. */
.model-card .model-card-name,
.model-card h4 { margin-bottom: 2px; font-size: var(--fs-base); }
.model-card p { font-size: var(--fs-sm); margin-bottom: var(--s-2); }

/* ——— کف کارت مدل: نرخ و وضعیت ———

   کارت‌های یک ردیف هم‌قد می‌شوند و این ردیف به کف کارت می‌چسبد، وگرنه هر
   کارت به اندازه‌ی طول توضیحش جای دیگری تمام می‌شود و چشم هیچ خط افقی
   مشترکی برای مقایسه‌ی قیمت‌ها پیدا نمی‌کند.

   align-self روی meta لازم است: خودِ کارت align-items:flex-start دارد تا
   آیکون بالا بماند، و همان باعث می‌شود meta فقط به قد محتوایش باشد —
   آن‌وقت margin-top:auto جای خالی‌ای برای مصرف ندارد. */
.model-card { height: 100%; }
/* ردیف نرخ/وضعیت به کف کارت می‌چسبد و به عرض کاملِ آن است، پس نرخ به لبه‌ی
   راست می‌رسد همان‌طور که بج وضعیت به لبه‌ی چپ. margin-top: auto روی خودِ
   کارت کار می‌کند چون کارت حالا ستونی است. */
.model-card-top { flex: 1; }
.model-card-foot { margin-top: auto; padding-top: var(--s-3); align-items: flex-end; }

/* نرخ ورودی و خروجی، یک خط داخل یک کادر: «↓ ۱M|۲٫۵$   ↑ ۱M|۱۵$».

   خودِ نرخ LTR است چون عدد و واحد و نشانه‌ی پول با هم یک عبارت لاتین‌اند و
   راست‌به‌چپ‌شدنشان جداکننده و $ را جابه‌جا می‌کند؛ آیکون بیرونش می‌ماند.

   واحد (۱M) عمداً ریزتر و کم‌رنگ‌تر از مبلغ است. وقتی هم‌اندازه و هم‌وزنِ
   عدد بود، چشم اول آن را می‌خواند و قیمت گم می‌شد.

   نام عمداً model-card-price است نه model-price: دومی از قبل دو بار در همین
   فایل تعریف شده بود — یکی برای همین کارت و یکی (پایین‌تر، پس برنده) برای
   منوی انتخاب مدل کادر نوشتن. تا وقتی هر دو یک اسم داشتند، اندازه و رنگِ
   کارت را آن یکی تعیین می‌کرد. */
/* گوشه‌ها روی خودِ نیمه‌ها گرد می‌شوند، نه با overflow: hidden روی کادر.
   آن راه کوتاه‌تر بود ولی تولتیپ را هم می‌بُرد، چون حباب از دلِ همین نیمه‌ها
   بیرون می‌زند. شعاع‌های منطقی‌اند، پس در RTL و LTR هر دو سرِ درست می‌افتند. */
.model-card-price {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: transparent;
}
.model-card-rate:first-child {
  border-start-start-radius: var(--r-full); border-end-start-radius: var(--r-full);
}
.model-card-rate:last-child {
  border-start-end-radius: var(--r-full); border-end-end-radius: var(--r-full);
}
/* ورودی سبز، خروجی آبی — هر دو نصفِ توکن وضعیت خودشان، یعنی نیمه‌راهِ بین
   آن رنگ و سفید. هگزِ صریح اول می‌آید تا مرورگری که color-mix ندارد چیزی
   داشته باشد؛ خطِ دوم همان مقدار است ولی به توکن گره خورده و اگر روزی توکن
   عوض شد خودش دنبالش می‌آید.

   رنگ تنها نشانه است، پس جمله‌ی کامل در aria-label و تولتیپ می‌ماند: کسی
   که رنگ را نمی‌بیند باید همان را بشنود. */
.model-card-rate { display: inline-flex; align-items: center; padding: 3px 9px; white-space: nowrap; }
.model-card-rate.is-in  { color: var(--success); background: #F3FBF8; background: color-mix(in srgb, var(--success-bg), #fff); }
.model-card-rate.is-out { color: var(--info);    background: #F6F9FF; background: color-mix(in srgb, var(--info-bg), #fff); }
.model-card-rate + .model-card-rate { border-inline-start: 1px solid var(--border); }

/* واحد و نشانه‌ی پول هر دو ریزتر از عدد: عدد چیزی است که خوانده می‌شود و
   آن دو فقط می‌گویند این عدد چیست. ارقام لاتین‌اند چون نرخ داده‌ی فنی است
   و مقایسه‌ی سریعِ چند مدل با ارقام فارسی کند می‌شود. */
/* استک لاتین فقط روی همین عدد.

   کاراکترها از قبل لاتین‌اند (اندازه‌گیری شد: U+0032 U+002E U+0035)، ولی
   Yekan Bakh — تنها فونت متنی قالب — گلیف ارقام لاتین را فارسی می‌کشد. تا
   وقتی قالب فونت لاتینی نداشته باشد، تنها راهِ «۲.۵» شدنِ 2.5 همین است.

   سلکتور عمداً با .heroai-widget شروع می‌شود: wordpress.css یک قاعده‌ی
   فراگیر «.heroai-widget *» دارد که فونت را روی همه‌چیز داخل ویجت می‌نشاند و
   دیرتر هم بارگذاری می‌شود، پس با وزن برابر برنده می‌شد.

   tabular-nums هم اضافه شد تا عرض ارقام ثابت بماند و مقایسه‌ی نرخ چند کارت
   کنار هم چشم را نلغزاند. */
/* نام مدل همیشه لاتین می‌ماند — قرارداد CLAUDE.md. یکان بخ ارقام لاتین را
   با گلیف فارسی می‌کشد، پس «Grok 4.3» روی کارت «Grok ۴.۳» دیده می‌شد در
   حالی که خودِ کاراکترها لاتین بودند. مشکل فونت است نه متن، و درمانش هم
   فونت است.

   سلکتور از .heroai-widget شروع می‌شود چون wordpress.css قاعده‌ای روی
   .heroai-widget * دارد که با وزن برابر و بارگذاری دیرتر برنده می‌شد. */
.heroai-widget .model-card-name {
  direction: ltr; unicode-bidi: isolate;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

.heroai-widget .model-card-rate-value,
.heroai-widget .model-card-rate-value * {
  direction: ltr; unicode-bidi: isolate;
  display: inline-flex; align-items: baseline;
  font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-variant-numeric: tabular-nums;
}
/* رنگ از خودِ نیمه ارث می‌رسد تا عدد و واحد با پس‌زمینه‌شان یک خانواده
   باشند. واحد و نشانه‌ی پول با شفافیت عقب می‌نشینند نه با رنگ دیگر — رنگ
   دیگر یعنی یک تصمیم تازه برای هر پس‌زمینه. */
.model-card-rate-value em { font-style: normal; font-weight: 500; opacity: .6; }
/* «1M» بدون فاصله یک تکه خوانده می‌شد و معلوم نبود ۱ عددی است پیش از M.
   حرف کوچک و یک فاصله‌ی مویی بینشان، هر دو را از هم جدا می‌کند. */
.model-card-rate-unit { font-size: 9px; letter-spacing: .04em; margin-inline-end: 5px; }
/* نشانه‌ی پول از واحد بزرگ‌تر است و به عدد چسبیده‌تر: بخشی از خودِ مبلغ
   است، در حالی که واحد فقط می‌گوید این مبلغ برای چند توکن است. */
.model-card-rate-cur { font-size: 11px; margin-inline-start: 1.5px; }
.model-card-rate-value b { font-weight: 600; font-size: var(--fs-xs); }
.model-card-price.is-muted {
  font-size: var(--fs-xs); color: var(--text-3);
  padding: 3px 9px; border-style: dashed;
}

/* برچسب‌های کارت مدل، از واژگان تگ در hero-ai. گپ از .row کوچک‌تر است چون
   اینها چند چیز کنار هم نیستند، یک ردیف از یک جنس‌اند.
   نام عمداً model-card-tags است نه model-tags: دومی از قبل مال ردیف برچسب
   داخل منوی انتخاب مدل کادر نوشتن است (پایین همین فایل). */
.model-card-tags { gap: var(--s-1); margin-bottom: var(--s-3); }

/* آیکون آپلودی مدل یا ارائه‌دهنده‌اش. کادر خودش گرد است، پس تصویر فقط باید
   داخلش بنشیند بدون بریدن نسبت. */
.icon-tile img { width: 26px; height: 26px; object-fit: contain; }

.tool-card { display: block; color: inherit; }
.tool-card:hover { color: inherit; }
.tool-card .icon-tile { margin-bottom: var(--s-3); }
.tool-card .tool-card-name,
.tool-card h4 { font-size: var(--fs-base); margin-bottom: 4px; }
.tool-card p { font-size: var(--fs-sm); margin-bottom: var(--s-3); }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--grad-brand-wide); color: #fff;
  border-radius: var(--r-xl); padding: var(--s-8) var(--s-6); text-align: center;
  box-shadow: var(--sh-lg);
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { opacity: .9; max-width: 560px; margin-inline: auto; }
/* دکمه‌ی اصلی سفیدِ توپر روی گرادیان؛ دکمه‌ی دوم خالی با قاب و متن سفید.

   :not(.btn-ghost) لازم است: قاعده‌ی قبلی همه‌ی .btn داخل نوار را سفید
   می‌کرد و چون specificity‌اش (0,2,0) از خودِ .btn-ghost (0,1,0) بیشتر است،
   دکمه‌ی دوم هم پس‌زمینه‌ی سفید می‌گرفت. متنش هم سفید بود، یعنی سفید روی
   سفید و کاملاً نامرئی. */
.cta-band .btn:not(.btn-ghost) { background: #fff; color: var(--text); border: none; }
.cta-band .btn:not(.btn-ghost):hover { color: var(--violet-500); }
/* پس‌زمینه‌ی تیره‌ی نازک، نه شفافِ کامل. متن سفید روی خودِ گرادیان
   اندازه‌گیری شد: نسبت کنتراست ۳٫۳ بود و برای متن ۱۷ پیکسلی حد لازم ۴٫۵
   است. این لایه هر جای گرادیان که دکمه بیفتد پشتش را تیره می‌کند و نسبت را
   به ۴٫۶ می‌رساند، بدون این‌که دکمه توپر به نظر برسد. */
.cta-band .btn-ghost { background: rgba(0,0,0,.18); color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn-ghost:hover { background: rgba(0,0,0,.28); border-color: #fff; color: #fff; }

/* ——— تولتیپ ———
   فقط CSS و بدون JS. ویژگی title مرورگر جایش را نمی‌گرفت: نیم‌ثانیه تأخیر
   دارد، استایل‌پذیر نیست و متن فارسی را با جهت‌گیری خودِ مرورگر می‌چیند.

   left/translateX تنها ویژگی فیزیکیِ این فایل است و عمدی: مرکزکردن هندسی
   است و در هر دو جهت یکسان عمل می‌کند، در حالی که inset-inline: 0 با
   margin-inline: auto وقتی حباب از خودِ عنصر پهن‌تر باشد به یک سمت می‌افتد
   (اندازه‌گیری شد: حدود ۱۴۵ پیکسل انحراف).

   pointer-events: none لازم است وگرنه خودِ حباب زیر ماوس می‌آید و بین
   عنصر و نشانگر فاصله می‌اندازد. */
.hero-tip { position: relative; }
.hero-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--text); color: var(--text-invert);
  font-size: var(--fs-xs); line-height: 1.7; text-align: center;
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast), visibility var(--t-fast);
  z-index: 20;
}
.hero-tip:hover::after,
.hero-tip:focus-visible::after { opacity: 1; visibility: visible; }

/* ————————————————————————— Auth pages ————————————————————————— */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { position: relative; background: var(--grad-brand-wide); color: #fff; padding: var(--s-8); display: flex; flex-direction: column; justify-content: center; }
.auth-side h2, .auth-side p, .auth-side li { color: #fff; }
.auth-side p, .auth-side li { opacity: .92; }
.auth-side ul { list-style: none; padding: 0; }
.auth-side li { display: flex; gap: var(--s-2); align-items: flex-start; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { justify-content: center; margin-bottom: var(--s-5); }
.auth-card .brand img { height: 46px; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ————————————————————————— Panel shell ————————————————————————— */
.panel { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns var(--t); }

/* حالت جمع‌شده: فقط آیکون‌ها */
.panel.is-rail { grid-template-columns: var(--rail-w) 1fr; }
.panel.is-rail .panel-sidebar { padding-inline: 10px; align-items: center; }
.panel.is-rail .panel-sidebar .brand { padding: var(--s-2) 0 var(--s-4); justify-content: center; }
.panel.is-rail .panel-sidebar .brand img { height: 30px; }
.panel.is-rail .side-link { justify-content: center; padding: 11px 0; width: 44px; }
.panel.is-rail .side-link .grow,
.panel.is-rail .side-link span:not(.badge),
.panel.is-rail .side-group-label,
.panel.is-rail .side-wallet { display: none; }
.panel.is-rail .side-link .badge-new {
  position: absolute; inset-block-start: 4px; inset-inline-end: 2px;
  width: 7px; height: 7px; padding: 0; overflow: hidden; text-indent: -99px; border-radius: 50%;
}
.panel.is-rail .side-link { position: relative; }
.panel.is-rail nav { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* راهنمای شناور نام آیتم در حالت جمع‌شده */
.panel.is-rail .side-link::after {
  content: attr(data-label);
  position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--text); color: #fff; font-size: var(--fs-xs);
  padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast); z-index: 200;
}
.panel.is-rail .side-link:hover::after { opacity: 1; }

/* دکمه جمع/باز کردن */
.rail-toggle {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-top: auto; padding: 9px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2); font-family: inherit; font-size: var(--fs-xs);
  cursor: pointer; transition: all var(--t-fast); flex: none;
}
.rail-toggle:hover { background: var(--bg-sunken); color: var(--text); }
.rail-toggle .icon { width: 17px; height: 17px; transition: transform var(--t); }
.panel.is-rail .rail-toggle span { display: none; }
.panel.is-rail .rail-toggle .icon { transform: rotate(180deg); }
@media (max-width: 1000px) { .rail-toggle { display: none; } }
.panel-sidebar {
  background: var(--surface); border-left: 1px solid var(--border);
  padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.panel-sidebar .brand { padding: var(--s-2) var(--s-2) var(--s-4); }
.side-group-label { font-size: var(--fs-xs); color: var(--text-3); padding: var(--s-3) var(--s-2) var(--s-1); }
.side-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--text-2); font-size: var(--fs-sm); font-weight: 500;
  transition: all var(--t-fast);
}
.side-link .icon { width: 19px; height: 19px; flex: none; }
.side-link:hover { background: var(--bg-sunken); color: var(--text); }
.side-link.is-active { background: var(--grad-brand-soft); color: var(--violet-500); }
.side-wallet {
  margin-top: auto; background: var(--grad-brand); color: #fff;
  border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-brand);
}
.side-wallet .metric-value { display: block; font-size: var(--fs-lg); font-weight: 700; }
.side-wallet .btn { width: 100%; margin-top: var(--s-3); background: rgba(255,255,255,.18); color: #fff; border: none; }
.side-wallet .btn:hover { background: #fff; color: var(--violet-500); }

.panel-main { min-width: 0; display: flex; flex-direction: column; }
.panel-topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--header-h); padding-inline: var(--s-5);
  background: rgba(248,249,251,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.panel-topbar h1 { font-size: var(--fs-lg); margin: 0; }
.panel-body { padding: var(--s-5); flex: 1; }
.panel-body > .page-head { margin-bottom: var(--s-5); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--grad-brand); color: #fff;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
}
.sidebar-toggle { display: none; }
.side-backdrop { display: none; }

@media (max-width: 1000px) {
  .panel { grid-template-columns: 1fr; }
  .panel-sidebar {
    position: fixed; inset-inline-start: 0; top: 0; z-index: 150;
    width: 280px; transform: translateX(100%); transition: transform var(--t);
    box-shadow: var(--sh-lg);
  }
  .panel-sidebar.is-open { transform: none; }
  .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(26,29,41,.4); z-index: 140; opacity: 0; pointer-events: none; transition: opacity var(--t); }
  .side-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .sidebar-toggle { display: inline-flex; }
  .panel-body { padding: var(--s-4); padding-bottom: 88px; }
}

/* Bottom navigation (mobile) */
.bottom-nav { display: none; }
@media (max-width: 1000px) {
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 120;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11px; color: var(--text-3); padding: 6px 0; border-radius: var(--r-sm);
  }
  .bottom-nav a .icon { width: 21px; height: 21px; }
  .bottom-nav a.is-active { color: var(--blue-500); }
}

/* Stat cards in dashboard */
.kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.kpi .metric-label { font-size: var(--fs-sm); color: var(--text-2); }
.kpi .metric-value { font-size: var(--fs-xl); font-weight: 700; display: block; margin-top: 2px; }
.kpi .trend { font-size: var(--fs-xs); }
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }

.chart-box { position: relative; height: 300px; }
.chart-box-sm { height: 180px; }

/* ————————————————————————— Docs ————————————————————————— */
.docs-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--s-7); align-items: start; }
.docs-nav { position: sticky; top: calc(var(--header-h) + 16px); }
.docs-nav h5 { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; margin: var(--s-4) 0 var(--s-2); }
.docs-nav a { display: block; padding: 7px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); }
.docs-nav a:hover { background: var(--bg-sunken); color: var(--text); }
.docs-nav a.is-active { background: var(--grad-brand-soft); color: var(--violet-500); font-weight: 500; }
.docs-content h2 { scroll-margin-top: 100px; margin-top: var(--s-6); }
.docs-content h3 { scroll-margin-top: 100px; margin-top: var(--s-5); }
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } .docs-nav { position: static; } }

/* ————————————————————————— Status page ————————————————————————— */
.status-banner { display: flex; align-items: center; gap: var(--s-3); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); background: var(--success-bg); color: var(--success); font-weight: 500; }
.uptime-bars { display: flex; gap: 3px; align-items: flex-end; height: 34px; direction: ltr; }
.uptime-bars i { flex: 1; height: 100%; border-radius: 2px; background: var(--success); opacity: .85; }
.uptime-bars i.warn { background: var(--warning); }
.uptime-bars i.down { background: var(--danger); }
.incident { display: flex; gap: var(--s-4); padding-bottom: var(--s-5); position: relative; }
.incident::before { content: ''; position: absolute; inset-inline-start: 7px; top: 20px; bottom: 0; width: 2px; background: var(--border); }
.incident:last-child::before { display: none; }
.incident .dot-lg { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--surface); background: var(--warning); flex: none; box-shadow: 0 0 0 2px var(--warning); z-index: 1; }

/* ————————————————————————— Pricing ————————————————————————— */
.plan { display: flex; flex-direction: column; height: 100%; position: relative; }
.plan.is-featured { border-color: transparent; box-shadow: var(--sh-md); outline: 2px solid var(--blue-500); }
.plan .price { font-size: var(--fs-2xl); font-weight: 700; }
.plan ul { list-style: none; padding: 0; margin: var(--s-4) 0; flex: 1; }
.plan li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); }
.plan li .icon { width: 17px; height: 17px; color: var(--success); flex: none; margin-top: 5px; }
.ribbon { position: absolute; top: -12px; inset-inline-start: var(--s-5); }

/* ————————————————————————— Chat ————————————————————————— */
.chat-layout {
  display: grid; grid-template-columns: var(--chat-list-w, 292px) 1fr;
  height: calc(100vh - var(--header-h));
  transition: grid-template-columns var(--t);
}
.chat-layout.is-collapsed { --chat-list-w: 0px; }
.chat-layout.is-collapsed .chat-list { opacity: 0; pointer-events: none; }

/* — لیست گفتگوها — */
.chat-list {
  border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  overflow: hidden; transition: opacity var(--t);
}
.chat-list-head { padding: var(--s-4); border-bottom: 1px solid var(--border); flex: none; }
.chat-search { position: relative; margin-top: var(--s-3); }
.chat-search .icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.chat-search .input { padding-inline-start: 36px; background: var(--bg-sunken); border-color: transparent; }
.chat-search .input:focus { background: var(--surface); }

.chat-items { overflow-y: auto; padding: var(--s-2) var(--s-3) var(--s-4); flex: 1; }
.chat-day-label { font-size: var(--fs-xs); color: var(--text-3); padding: var(--s-4) var(--s-2) var(--s-1); font-weight: 500; }
.chat-item {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: right; border: 1px solid transparent;
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--text-2); background: none; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chat-item .icon { width: 16px; height: 16px; flex: none; margin-top: 6px; color: var(--text-3); }
.chat-item:hover { background: var(--bg-sunken); color: var(--text); }
.chat-item.is-active { background: var(--grad-brand-soft); border-color: rgba(139,79,217,.18); color: var(--text); }
.chat-item.is-active .icon { color: var(--violet-500); }
.chat-item .txt { min-width: 0; flex: 1; }
.chat-item strong { display: block; font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item span.meta { font-size: var(--fs-xs); color: var(--text-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast); }
.chat-item:hover .row-actions, .chat-item.is-active .row-actions { opacity: 1; }
.chat-item .row-actions button { border: none; background: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--text-3); line-height: 0; }
.chat-item .row-actions button:hover { background: var(--surface); color: var(--danger); }

/* — ستون اصلی — */
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.chat-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.86); backdrop-filter: blur(10px); flex: none;
}
.model-select {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px 8px 6px 14px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); cursor: pointer; font-size: var(--fs-sm); font-weight: 500;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.model-select:hover { border-color: var(--blue-500); box-shadow: var(--sh-xs); }
.model-select .icon-tile { width: 28px; height: 28px; border-radius: var(--r-sm); }
.model-select .icon-tile .icon { width: 16px; height: 16px; }

.chat-scroll { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-4); scroll-behavior: smooth; }
.chat-thread { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-5); }

/* — پیام‌ها: کاربر سمت راست، دستیار سمت چپ — */
.msg { display: flex; gap: var(--s-3); max-width: 86%; }
.msg .avatar { width: 34px; height: 34px; font-size: var(--fs-xs); flex: none; }
.msg-body { min-width: 0; }
.msg-body .bubble {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-xs);
  overflow-wrap: anywhere;
}
.msg-body .bubble > *:last-child { margin-bottom: 0; }
.msg-meta { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }

/* کاربر: چسبیده به لبه راست (شروع در RTL) */
.msg-user { align-self: flex-start; max-width: 76%; }
.msg-user .avatar { background: var(--text); }
.msg-user .bubble { background: var(--grad-brand-soft); border-color: rgba(139,79,217,.14); border-top-right-radius: 6px; }
.msg-user .msg-meta { justify-content: flex-start; }

/* دستیار: چسبیده به لبه چپ، آواتار در سمت چپ‌ترین نقطه */
.msg-assistant { align-self: flex-end; flex-direction: row-reverse; }
.msg-assistant .bubble { border-top-left-radius: 6px; }
.msg-assistant .msg-body { flex: 1; }
.msg-assistant .msg-meta { flex-direction: row-reverse; }
.msg-name { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 5px; display: block; }
.msg-assistant .msg-name { text-align: left; }

/* حالت استریم */
.stream-caret { display: inline-block; width: 7px; height: 15px; vertical-align: -2px; background: var(--violet-500); border-radius: 2px; animation: blink 1s steps(2) infinite; margin-inline-start: 3px; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: bounce 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: none; opacity: .45 } 30% { transform: translateY(-5px); opacity: 1 } }

/* بازخورد روی پاسخ */
.feedback-bar { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px; }
.feedback-bar button { border: none; background: none; cursor: pointer; padding: 6px; border-radius: 50%; color: var(--text-3); line-height: 0; transition: all var(--t-fast); }
.feedback-bar button:hover { background: var(--bg-sunken); color: var(--text); }
.feedback-bar button.is-up { background: var(--success-bg); color: var(--success); }
.feedback-bar button.is-down { background: var(--danger-bg); color: var(--danger); }
.feedback-panel { margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface-2); }
.feedback-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.chip { padding: 5px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); cursor: pointer; transition: all var(--t-fast); }
.chip:hover { border-color: var(--blue-500); color: var(--blue-500); }
.chip.is-on { background: var(--grad-brand); color: #fff; border-color: transparent; }

/* پیوست و خروجی فایل داخل پاسخ */
.file-chip {
  display: flex; align-items: center; gap: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--surface-2); margin-top: var(--s-3);
}
.file-chip .icon-tile { width: 38px; height: 38px; border-radius: var(--r-sm); }
.file-chip .grow { min-width: 0; }
.file-chip strong { display: block; font-size: var(--fs-sm); font-weight: 500; }

/* پیش‌نمایش کد / سند */
.preview-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-top: var(--s-3); }
.preview-head { display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.preview-switch { display: flex; background: var(--bg-sunken); border-radius: var(--r-sm); padding: 2px; }
.preview-switch button { border: none; background: none; cursor: pointer; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); padding: 5px 12px; border-radius: 6px; }
.preview-switch button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); }
.preview-body { min-height: 220px; }
.preview-body iframe { width: 100%; height: 320px; border: none; display: block; background: #fff; }
.preview-body .code-block { border-radius: 0; }
.doc-preview { padding: var(--s-5); direction: rtl; }
.doc-preview h1, .doc-preview h2, .doc-preview h3 { margin-top: 0; }

/* نوار نوشتن */
.chat-composer { border-top: 1px solid var(--border); background: var(--surface); padding: var(--s-4) var(--s-5) var(--s-3); flex: none; }
.composer-box { max-width: 900px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-2); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.composer-box:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(61,123,240,.12); }
.composer-box textarea { width: 100%; border: none; resize: none; padding: 8px 10px; max-height: 160px; background: transparent; }
.composer-box textarea:focus { outline: none; }
.composer-actions { display: flex; align-items: center; gap: var(--s-1); }
.composer-attachments { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 10px 6px; }
.attach-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); background: var(--bg-sunken); border-radius: var(--r-full); padding: 4px 10px; }
.attach-pill button { border: none; background: none; cursor: pointer; color: var(--text-3); line-height: 0; padding: 0; }

/* پیشنهادهای شروع گفتگو */
.starter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); max-width: 620px; margin: var(--s-5) auto 0; }
.starter {
  text-align: right; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); padding: var(--s-4); cursor: pointer;
  transition: all var(--t-fast);
}
.starter:hover { border-color: var(--blue-500); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.starter strong { display: block; font-size: var(--fs-sm); margin-bottom: 3px; }
.starter span { font-size: var(--fs-xs); color: var(--text-3); }

@media (max-width: 1000px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - var(--header-h) - 64px); }
  .chat-list {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 290px; z-index: 150;
    transform: translateX(100%); transition: transform var(--t); opacity: 1; pointer-events: auto;
  }
  .chat-list.is-open { transform: none; }
  .chat-scroll { padding: var(--s-4) var(--s-3); }
  .msg, .msg-user { max-width: 94%; }
  .chat-composer { padding: var(--s-3); }
  .starter-grid { grid-template-columns: 1fr; }
}

/* ————————————————————————— Tool template ————————————————————————— */
.tool-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-5); align-items: start; }
.tool-output { min-height: 320px; display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--s-5); }
.tool-output.has-result { display: block; background: var(--surface); border-style: solid; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.result-img { aspect-ratio: 1; border-radius: var(--r-md); background: var(--grad-brand-wide); position: relative; overflow: hidden; }
.result-img::after { content: 'خروجی نمونه'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: var(--fs-sm); background: rgba(26,29,41,.18); }
@media (max-width: 900px) { .tool-layout { grid-template-columns: 1fr; } }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--bg-sunken) 25%, #E9ECF3 50%, var(--bg-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r-md); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-in { opacity: 1; transform: none; }

/* بدنه‌ی بدون حاشیه — برای صفحه چت که خودش تمام ارتفاع را می‌گیرد */
.panel-body.p0 { padding: 0; }
@media (max-width: 1000px) { .panel-body.p0 { padding-bottom: 76px; } }
.page-head { margin-bottom: var(--s-5); }
.page-head h2 { margin-bottom: 4px; }
.page-head p { margin: 0; }

/* ==========================================================================
   HERO AI — چیدمان‌های نسخه ۲
   ========================================================================== */

/* ——— هیرو: شیپ‌های شناور پس‌زمینه ——— */
.hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-shape { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .3; }
.hero-shape.s1 { width: 480px; height: 480px; background: #8B4FD9; top: -160px; inset-inline-start: -80px; animation: float1 22s ease-in-out infinite; }
.hero-shape.s2 { width: 420px; height: 420px; background: #12B5C9; bottom: -180px; inset-inline-end: -60px; animation: float2 26s ease-in-out infinite; }
.hero-shape.s3 { width: 360px; height: 360px; background: #3D7BF0; top: 40px; inset-inline-end: 28%; animation: float3 30s ease-in-out infinite; opacity: .22; }
@keyframes float1 { 0%,100% { transform: none } 50% { transform: translate(60px, 50px) scale(1.12) } }
@keyframes float2 { 0%,100% { transform: none } 50% { transform: translate(-70px, -40px) scale(1.08) } }
@keyframes float3 { 0%,100% { transform: none } 33% { transform: translate(40px, -30px) } 66% { transform: translate(-30px, 40px) } }
.hero::before { display: none; }
.hero-inner { z-index: 1; }

/* ——— نوار آمار: هم‌ترازی متن ——— */
.stats-strip { align-items: stretch; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 104px; padding: var(--s-4) var(--s-3); }
.stat .metric-value { font-size: 30px; line-height: 1.25; }
.stat .metric-label { font-size: var(--fs-sm); line-height: 1.6; max-width: 190px; }
.stat + .stat { border-inline-start: 1px solid var(--border); }
@media (max-width: 700px) {
  .stat { min-height: 92px; }
  .stat:nth-child(odd) { border-inline-start: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ——— گرید تاشو (نمایش بیشتر) ——— */
.collapsible-grid { position: relative; }
.collapsible-grid.is-clamped { max-height: var(--clamp-h, 720px); overflow: hidden; }
.collapsible-grid.is-clamped::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 160px;
  background: linear-gradient(to top, var(--bg) 12%, transparent);
  pointer-events: none;
}

/* ——— سکشن مقالات ——— */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .articles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .articles-grid { grid-template-columns: 1fr; } }

/* ——— اعتبار هدیه ——— */
.gift-band {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-6); align-items: center;
  border-radius: var(--r-xl); padding: var(--s-7) var(--s-6);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
}
.gift-band::before {
  content: ''; position: absolute; inset-inline-end: -120px; top: -120px;
  width: 340px; height: 340px; border-radius: 50%; background: var(--grad-brand-soft);
}
.gift-band > * { position: relative; z-index: 1; }
.gift-amount {
  border-radius: var(--r-lg); padding: var(--s-6); text-align: center;
  background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand);
}
.gift-amount .metric-value { display: block; font-size: 40px; font-weight: 700; line-height: 1.2; }
@media (max-width: 800px) { .gift-band { grid-template-columns: 1fr; } }

/* ——— نوار مجوزها ——— */
.trust-row { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
/* روی موبایل هر کارت به اندازه‌ی متن خودش پهن می‌شد و ستون پلکانی و ناهموار
   درمی‌آمد. تمام‌عرض کردن لبه‌ها را هم‌تراز می‌کند. */
@media (max-width: 640px) {
  .trust-row { flex-direction: column; }
  .trust-row .trust-badge { width: 100%; }
}

/* ——— راهنمای توسعه‌دهنده ——— */
.dev-steps { counter-reset: step; }
.dev-step { position: relative; padding-inline-start: 52px; padding-bottom: var(--s-6); }
.dev-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
}
.dev-step::after {
  content: ''; position: absolute; inset-inline-start: 16px; top: 40px; bottom: 6px;
  width: 2px; background: var(--border);
}
.dev-step:last-child::after { display: none; }
.dev-step h4 { margin-bottom: 6px; }
.callout {
  display: flex; gap: var(--s-3); align-items: flex-start;
  border-radius: var(--r-md); padding: var(--s-4);
  background: var(--info-bg); color: var(--info); font-size: var(--fs-sm);
}
.callout .icon { width: 19px; height: 19px; flex: none; margin-top: 3px; }
.callout p { margin: 0; color: inherit; }
.callout-warn { background: var(--warning-bg); color: var(--warning); }
.callout-ok { background: var(--success-bg); color: var(--success); }

/* ——— UI Kit ——— */
.kit-layout { display: grid; grid-template-columns: 230px 1fr; gap: var(--s-7); align-items: start; }
.kit-nav { position: sticky; top: calc(var(--header-h) + 16px); }
.kit-nav a { display: block; padding: 7px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); }
.kit-nav a:hover { background: var(--bg-sunken); color: var(--text); }
.kit-section { scroll-margin-top: 100px; margin-bottom: var(--s-8); }
.kit-section > h2 { padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.kit-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.kit-label { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s-3); display: block; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s-3); }
.swatch { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.swatch .chip-color { height: 68px; }
.swatch .info { padding: 8px 10px; font-size: var(--fs-xs); }
.swatch .info b { display: block; }
.swatch .info code { color: var(--text-3); direction: ltr; display: block; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-3) 6px; border-radius: var(--r-md); border: 1px solid var(--border); font-size: 11px; color: var(--text-3); text-align: center; }
.icon-cell .icon { width: 22px; height: 22px; color: var(--text); }
.spec-row { display: flex; align-items: center; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-row .demo { flex: none; }
.spec-row .desc { font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 900px) { .kit-layout { grid-template-columns: 1fr; } .kit-nav { position: static; } }

/* ——— اصلاحات ریسپانسیو عمومی ——— */
@media (max-width: 1100px) {
  .grid[style*="2fr 1fr"], .grid[style*="1.4fr 1fr"], .grid[style*="1.6fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .grid[style*="1.4fr"] { grid-template-columns: 1fr !important; }
  .hero-cta .btn { flex: 1; justify-content: center; }
  .cta-band { padding: var(--s-6) var(--s-4); }
  .card { padding: var(--s-4); }
  .modal { padding: var(--s-5); }
}
@media (max-width: 640px) {
  .container { padding-inline: var(--s-4); }
  .table th, .table td { padding: 11px 12px; }
  .site-footer { margin-top: var(--s-6); padding-block: var(--s-6) var(--s-4); }
  /* یک‌ستونی فوتر را روی موبایل بی‌دلیل بلند می‌کرد. بلوک برند تمام‌عرض
     می‌ماند چون متن و شبکه‌های اجتماعی دارد؛ سه گروه لینک دوتایی می‌شوند.
     (طرح مرجع هم یک‌ستونی است — این عمداً از آن جلو می‌زند.) */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); align-items: start; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  /* footer.php همیشه چهار بلوک دارد: برند و سه گروه لینک. طول گروه‌ها خیلی
     نامساوی است (۳ و ۱ و ۵ آیتم)، پس با چیدمان خودکار یک ستون نصفه خالی
     می‌ماند. دو گروه کوتاه روی هم، گروه بلند تنها در ستون کناری. */
  .footer-grid > :nth-child(2),
  .footer-grid > :nth-child(3) { grid-column: 1; }
  .footer-grid > :nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
  .footer-grid h5 { margin-bottom: var(--s-2); }
  .footer-links li { margin-bottom: 6px; }
  .row-between { flex-wrap: wrap; }
  .page-head .btn { width: 100%; justify-content: center; }
  .tabs { gap: var(--s-4); }
  .otp-input { width: 46px; height: 54px; font-size: var(--fs-lg); }
  .otp-row { gap: var(--s-2); }
  .stats-strip { gap: 0; }
  .pagination { justify-content: center; }
  .invoice-head, .invoice-body { padding: var(--s-4); }
  .promo { padding: var(--s-5); }
  .gift-band { padding: var(--s-5) var(--s-4); }
}
@media (max-width: 420px) {
  .otp-input { width: 40px; height: 48px; }
  .btn { padding: 10px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   نسخه ۲ — ابزار زیرنویس: پیش‌نمایش و تنظیمات استایل
   ═══════════════════════════════════════════════════════════ */
.sub-preview {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.sub-preview-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 210px;
  padding: 18px;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(18,181,201,.35), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(139,79,217,.4), transparent 60%),
    #1A1D29;
}
.sub-preview-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.sub-caption {
  position: relative;
  max-width: 88%;
  padding: 6px 12px;
  border-radius: 8px;
  line-height: 1.7;
  text-align: center;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-weight: 700;
  transition: all .15s ease;
}

/* ورودی بازه (range) هم‌رنگ برند */
.range {
  width: 100%;
  height: 6px;
  margin: 6px 0;
  appearance: none;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-brand);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(26,29,41,.25);
}
.range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--violet-500);
  border: 2px solid #fff;
}

@media (max-width: 640px) {
  .sub-preview-frame { min-height: 160px; }
  .sub-caption { max-width: 94%; }
}

/* ═══════════════════════════════════════════════════════════
   UI Kit — المان‌های نمایشی
   ═══════════════════════════════════════════════════════════ */
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.kit-swatch { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.kit-swatch .chip-color { height: 62px; display: block; }
.kit-swatch .meta { padding: 8px 10px; }
.kit-swatch .meta b { display: block; font-size: var(--fs-sm); }
.kit-swatch .meta code { font-size: 11px; color: var(--text-3); }
.kit-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.kit-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
.kit-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-align: center; }
.kit-icon span { font-size: 11px; color: var(--text-3); direction: ltr; word-break: break-all; }
.kit-icon .icon { width: 22px; height: 22px; color: var(--text); }
.kit-shadow { height: 74px; border-radius: var(--r-md); background: var(--surface); display: grid; place-items: center; font-size: var(--fs-xs); color: var(--text-2); }
.kit-space { background: var(--grad-brand); border-radius: 4px; height: 14px; }
.kit-type-row { display: flex; align-items: baseline; gap: var(--s-4); padding: 10px 0; border-bottom: 1px dashed var(--border); }
.kit-type-row code { color: var(--text-3); font-size: 11px; min-width: 120px; direction: ltr; }

@media (max-width: 900px) {
  .kit-layout { grid-template-columns: 1fr; gap: var(--s-4); }
  .kit-nav { position: static; }
  .kit-nav .card { display: flex; flex-wrap: wrap; gap: 4px; }
  .kit-type-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   بازبینی نهایی ریسپانسیو — نقاط شکست استاندارد پروژه
   1100 / 900 / 640 / 420
   ═══════════════════════════════════════════════════════════ */

/* ——— ≤ 1100px: چیدمان‌های سه‌ستونی به دوستونی ——— */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tool-layout { grid-template-columns: 1fr 300px; }
  .docs-layout { grid-template-columns: 220px 1fr; gap: var(--s-5); }
  .kit-layout { grid-template-columns: 200px 1fr; gap: var(--s-5); }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-5); }
}

/* ——— ≤ 900px: تک‌ستونی شدن ساختارهای اصلی ——— */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-visual { order: -1; }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-layout aside { order: -1; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-layout .docs-nav { position: static; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }

  /* جدول‌ها: اسکرول افقی نرم به‌جای شکستن چیدمان */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 620px; }

  /* نوار ابزار جدول‌ها زیر هم */
  .table-toolbar { flex-wrap: wrap; gap: var(--s-2); }
  .table-toolbar .search-inline { flex: 1 1 100%; }

  /* فاکتور و مودال‌های عریض */
  .modal { max-width: 100%; padding: var(--s-5); }
  .invoice-grid { grid-template-columns: 1fr; }
}

/* ——— ≤ 640px: موبایل ——— */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--s-6); }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }

  /* آمار: دو ستونی با خط جداکننده افقی */
  .stat + .stat { border-inline-start: none; }
  .stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .stats-row .stat { border: 1px solid var(--border); border-radius: var(--r-md); }

  /* دکمه‌های CTA تمام‌عرض */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* بنر تبلیغاتی */
  .promo { flex-direction: column; align-items: flex-start; gap: var(--s-3); text-align: start; }
  .promo .btn { width: 100%; justify-content: center; }

  /* صفحه‌بندی و OTP */
  .pagination { flex-wrap: wrap; justify-content: center; }
  .otp-row { gap: 8px; }
  .otp-input { width: 46px; height: 54px; font-size: 22px; }

  /* سربرگ صفحه‌ها */
  .page-head .row { flex-wrap: wrap; gap: var(--s-3); }
  .page-head .row > .badge { margin-inline-start: 0 !important; }

  /* فوتر */
  .social-row { flex-wrap: wrap; }

  /* چت: لیست گفتگوها به‌صورت کشویی روی محتوا */
  .chat-layout { grid-template-columns: 1fr; }
  .msg { max-width: 100%; }
  .msg-user { max-width: 92%; }

  /* ابزارها و کارت‌ها */
  .tool-output { padding: var(--s-3); }
  .kit-icons { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .kit-swatches { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ——— ≤ 420px: موبایل کوچک ——— */
@media (max-width: 420px) {
  .container { padding-inline: var(--s-3); }
  .panel-body { padding: var(--s-3); }
  h1 { font-size: 26px; }
  .card { padding: var(--s-4); }
  .stats-row { grid-template-columns: 1fr; }
  .otp-input { width: 40px; height: 48px; font-size: 19px; }
  .btn { padding-inline: var(--s-3); }
  .btn-lg { padding: 12px 18px; font-size: var(--fs-base); }
  .tabs { gap: 2px; }
  .tab { padding: 8px 10px; font-size: var(--fs-sm); }
  .kit-icons { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

/* ——— اصلاحات عمومی مستقل از عرض ——— */
img, svg, video { max-width: 100%; height: auto; }
pre, .code-block pre { overflow-x: auto; }
.table td, .table th { white-space: nowrap; }
.table td.wrap, .table th.wrap { white-space: normal; }

/* ═══════════════════════════════════════════════════════════
   صفحه تکی مقاله
   ═══════════════════════════════════════════════════════════ */
.article-hero { background: var(--grad-brand-soft); border-bottom: 1px solid var(--border); padding-block: var(--s-7); }
.article-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s-4); flex-wrap: wrap; }
.article-crumbs a { color: var(--text-2); }
.article-crumbs a:hover { color: var(--text); }
.article-title { font-size: var(--fs-2xl); line-height: 1.45; max-width: 780px; margin: 0 0 var(--s-4); }
.article-facts { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); }
.article-facts span { display: flex; align-items: center; gap: 6px; }

.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-7); align-items: start; padding-block: var(--s-7); }
.article-content { max-width: 760px; }
.article-content h2 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); }
.article-content h2:first-child { margin-top: 0; }
.article-content p { color: var(--text-2); line-height: 2.1; margin-bottom: var(--s-4); }
.article-lead { font-size: var(--fs-md); color: var(--text) !important; padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--violet-500); }

.article-figure { height: 220px; border-radius: var(--r-lg); background: var(--grad-brand); display: grid; place-items: center; margin: var(--s-5) 0; }
.article-figure .icon { width: 54px; height: 54px; color: #fff; opacity: .9; }

.article-toc { position: sticky; top: calc(var(--header-h) + 16px); }
.article-toc a { display: block; padding: 7px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }
.article-toc a:hover, .article-toc a.is-active { background: var(--bg-sunken); color: var(--text); }

.article-share { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; padding: var(--s-4) 0; margin-top: var(--s-5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.article-nav a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: all var(--t-fast); }
.article-nav a:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.article-nav .muted { display: block; font-size: var(--fs-xs); margin-bottom: 2px; }
.article-nav b { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.article-nav a:last-child { flex-direction: row-reverse; text-align: start; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: var(--s-5); }
  .article-toc { position: static; }
  .article-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-figure { height: 160px; }
  .article-content p { line-height: 1.95; }
}

/* ═══════════════════════════════════════════════════════════
   بازبینی ریسپانسیو — دور چهارم
   ═══════════════════════════════════════════════════════════ */

/* ——— چت: کادر نوشتن پیام ———
   در دسکتاپ همان کادر وسط‌چین با گوشه‌ی گرد می‌ماند؛
   فقط در موبایل تا لبه‌های صفحه کشیده می‌شود. */
@media (max-width: 640px) {
  .chat-composer { padding: var(--s-2) 0 0; }
  .composer-box {
    max-width: none; margin: 0;
    border-inline: none; border-bottom: none; border-radius: 0;
    padding: var(--s-2) var(--s-3);
  }
  .composer-box:focus-within { box-shadow: none; border-top-color: var(--blue-500); }
}

/* ——— داشبورد در موبایل ——— */
@media (max-width: 640px) {
  /* اعلان‌ها و شارژ کیف پول در دراپ‌دان آواتار هستند؛ در نوار بالا تکرار نشوند */
  .panel-topbar .row > a[href="notifications.html"],
  .panel-topbar .row > a[href="status.html"] { display: none; }
  .page-head .row > a[href="charge.html"],
  .page-head .row > .btn-primary[href="charge.html"] { display: none; }

  /* باکس اعتبار: عدد و واحد و برچسب زیر هم، بدون شکستگی متن */
  .metric { min-width: 0; }
  .metric-value { font-size: var(--fs-lg); line-height: 1.6; word-break: keep-all; }
  .metric-value .num { display: inline-block; direction: ltr; }
  .metric-label, .metric .muted { font-size: var(--fs-xs); line-height: 1.8; }
  .metric-foot { flex-wrap: wrap; gap: 4px; }
}

/* ——— تب‌های حساب کاربری ——— */
@media (max-width: 900px) {
  .tab-panel .grid-2, .tab-panel .grid-3 { grid-template-columns: 1fr; }
  .tab-panel .row-between { flex-wrap: wrap; gap: var(--s-2); }
  .tab-panel .row-between > .btn { margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .tab-panel .card { padding: var(--s-4); }
  .tab-panel .check { align-items: flex-start; }
  .tab-panel .check span { line-height: 1.9; }
  /* سطرهای «برچسب — مقدار — دکمه» زیر هم می‌روند */
  .tab-panel .side-link { flex-wrap: wrap; }
  .pw-rules { grid-template-columns: 1fr; }
}

/* ——— مستندات ——— */
@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 210px 1fr; gap: var(--s-5); }
}
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
  /* فهرست مستندات به یک نوار افقی تبدیل می‌شود */
  .docs-nav { position: static; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-3); }
  .docs-nav nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .docs-nav a { white-space: nowrap; }
  .docs-content { min-width: 0; }
  .docs-content pre, .docs-content .code-block { max-width: 100%; }
}
@media (max-width: 640px) {
  .docs-content h2 { font-size: var(--fs-lg); }
  .docs-content table { min-width: 520px; }
  .code-block pre { font-size: 12px; }
}

/* ——— نوار فیلتر (تراکنش‌ها و سفارش‌ها) ——— */
.filter-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.filter-grid .field { margin: 0; min-width: 0; }
@media (max-width: 1100px) { .filter-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .filter-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px)  { .filter-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .filter-grid { grid-template-columns: 1fr; } .filter-grid .btn { width: 100%; justify-content: center; } }

/* دیت‌پیکر — عنصری که جابه‌جا می‌شود «پنل» است، نه ظرفِ ورودی.
   دست‌زدن به .datepicker خودِ فیلد را از جریان صفحه بیرون می‌برد. */
.datepicker-panel { max-width: min(296px, calc(100vw - 28px)); }

/* اگر فیلد نزدیک لبه‌ی چپ باشد، پنل از سمت دیگر باز می‌شود */
.datepicker-panel.is-flipped { inset-inline-start: auto; inset-inline-end: 0; }

@media (max-width: 560px) {
  /* در موبایل به شکل ورق پایین صفحه، تا هرگز از کادر فیلتر بیرون نزند */
  .datepicker-panel {
    position: fixed; inset-inline: 12px; inset-block-end: 12px; top: auto;
    width: auto; max-width: none; max-height: 74dvh; overflow-y: auto; z-index: 300;
  }
  .dp-day { font-size: var(--fs-base); }
  /* پرده‌ی پشت ورق */
  .dp-scrim { position: fixed; inset: 0; background: rgba(26,29,41,.35); z-index: 290; }
}
@media (min-width: 561px) { .dp-scrim { display: none; } }

/* ——— آفرها و کدهای تخفیف ——— */
.offer-card { position: relative; display: flex; flex-direction: column; }
.offer-head { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.offer-head .badge { margin-inline-start: auto; flex: none; }
.offer-card .coupon { margin-top: auto; }
@media (max-width: 640px) {
  .offer-card { padding: var(--s-4); }
  .offer-card .row-between { flex-wrap: wrap; gap: var(--s-2); }
  .offer-card .coupon { flex-wrap: wrap; gap: var(--s-2); }
  .offer-card .coupon code { flex: 1 1 100%; text-align: center; padding: 10px; }
  .offer-card .coupon .btn { width: 100%; justify-content: center; }
  /* nowrap لازم است: components.css روی .pill-tabs مقدار wrap دارد و بدون
     خنثی‌کردنش overflow هیچ‌وقت فعال نمی‌شود — قرص‌ها به‌جای اسکرول در دو
     سطر ناهموار می‌شکستند. */
  .pill-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .pill-tabs::-webkit-scrollbar { display: none; }
  .pill-tabs .pill { white-space: nowrap; flex: none; }
  /* نوار تا لبه‌ی صفحه کشیده شود تا معلوم باشد ادامه دارد. */
  .pill-tabs { margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); }
}

/* ——— دکمه‌های عملیات جدول: در موبایل هم دیده شوند ——— */
.row-actions { gap: 4px; flex-wrap: nowrap; }
.row-actions .btn-icon { width: 32px; height: 32px; flex: none; }
.row-actions .btn-icon .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .row-actions { gap: 2px; }
  .row-actions .btn-icon { width: 30px; height: 30px; }
  /* ستون عملیات همیشه در دید بماند حتی وقتی جدول اسکرول افقی دارد */
  .table th:last-child, .table td:last-child {
    position: sticky; inset-inline-end: 0;
    background: var(--surface); box-shadow: -6px 0 8px -6px rgba(26,29,41,.14);
  }
  .table tbody tr:hover td:last-child { background: var(--bg-sunken); }
}

/* ——— گفتگوهای برخاسته از ابزار در فهرست چت ——— */
.chat-item.is-tool > .icon { color: var(--violet-500); }
.chat-item.is-tool::before {
  content: ''; position: absolute; inset-block: 8px; inset-inline-start: 0;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--grad-brand);
}
.chat-item { position: relative; }
.tool-tag {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--violet-500); font-size: 11px;
}
.tool-tag svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════
   نوار «جدیدترین مدل‌ها» در صفحه اصلی
   ═══════════════════════════════════════════════════════════ */
.newmodels {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--sh-sm);
  padding: var(--s-5); overflow: hidden;
}
.newmodels-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.newmodels-head h3 { margin: 6px 0 0; font-size: var(--fs-lg); }
.newmodels-head .btn { margin-inline-start: auto; flex: none; }
.newmodels-head .eyebrow { display: inline-flex; align-items: center; gap: 7px; }

.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); position: relative; flex: none; }
.pulse-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--success); opacity: .5; animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(.6); opacity: .6 } 100% { transform: scale(1.5); opacity: 0 } }

/* نوار اسکرول خام حذف شد: کارت اول را بریده نشان می‌داد و کاربر نمی‌فهمید
   اول فهرست کجاست. جایش دو دکمه‌ی پیمایش با scroll-snap آمده — کشیدن انگشت
   و اسکرول با ترک‌پد سر جایشان می‌مانند، فقط راهنمای بصری عوض شده. */
.newmodels-rail {
  display: flex; gap: var(--s-3); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;

  /* گودی داخلی با حاشیه‌ی منفیِ هم‌اندازه: کارت‌ها دقیقاً سر جای قبلی‌شان
     می‌مانند ولی بلندشدن ۲ پیکسلی و سایه‌ی hover دیگر بریده نمی‌شوند —
     ظرف overflow: hidden دارد و قبلاً لبه‌ی کارت را می‌تراشید. */
  padding: 8px; margin: -8px;
  scroll-padding-inline-start: 8px;

  /* کارتِ لبه به‌جای اینکه با خط‌کش بریده شود محو می‌شود، تا «ادامه دارد»
     خوانده شود نه «خراب است». ماسک فقط سمت پایانی است؛ سمت شروع باید تیز
     بماند وگرنه کارت اول همیشه نیمه‌محو دیده می‌شود. */
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}
.newmodels-rail::-webkit-scrollbar { display: none; }

/* وقتی به ته فهرست رسیدیم دیگر چیزی برای محوکردن نیست. */
.newmodels-rail[data-rail-end] {
  -webkit-mask-image: none;
  mask-image: none;
}

.newmodels-nav { display: flex; gap: 6px; flex: none; }
.newmodels-arrow {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  cursor: pointer; transition: all var(--t-fast);
}
.newmodels-arrow:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.newmodels-arrow:disabled { opacity: .35; cursor: default; }
.newmodels-arrow .icon { width: 17px; height: 17px; }

.newmodel {
  display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto;
  min-width: 232px; scroll-snap-align: start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); transition: all var(--t-fast);
}
.newmodel:hover { border-color: rgba(139,79,217,.35); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.newmodel-icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-md);
  background: var(--grad-brand-soft); color: var(--violet-500);
  display: grid; place-items: center;
}
.newmodel-icon .icon { width: 20px; height: 20px; }
.newmodel-icon img { width: 22px; height: 22px; object-fit: contain; }
.newmodel-body { min-width: 0; flex: 1; }
/* نام مدل اینجا هم لاتین می‌ماند، به همان دلیل .model-card-name پایین‌تر:
   یکان بخ FaNum ارقام لاتین را با گلیف فارسی می‌کشد. */
/* سلکتور با .heroai-widget شروع می‌شود چون wordpress.css قاعده‌ای روی
   «.heroai-widget *» دارد که فونت را روی همه‌چیزِ داخل ویجت می‌نشاند و دیرتر
   بار می‌شود؛ با وزن برابر برنده می‌شد. (همان دلیلِ .model-card-name.) */
.heroai-widget .newmodel-name {
  display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); line-height: 1.8;
  direction: ltr; unicode-bidi: isolate; text-align: start;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}
.newmodel .badge-new { flex: none; }

.collapse-toggle-wrap { margin-top: var(--s-5); }

@media (max-width: 640px) {
  /* روی موبایل کارت از حالت جعبه درمی‌آید و می‌شود یک نوار تمام‌عرض.
     قبلاً یک کارتِ تورفته بود با overflow: hidden، و ریل داخلش فقط تا لبه‌ی
     همان کارت می‌رفت؛ مدل‌ها وسط قاب گرد بریده می‌شدند و نوار اسکرول هم پیدا
     بود. حالا خود نوار به لبه‌ی صفحه می‌رسد و ریل داخلش جا دارد. */
  .newmodels {
    margin-inline: calc(var(--s-5) * -1);
    padding-block: var(--s-5);
    padding-inline: var(--s-5);
    border-inline: 0;
    border-radius: 0;
  }
  /* بدون این، حاشیه‌ی منفی بالا فقط نوار را جابه‌جا می‌کرد و پهن نمی‌کرد:
     wordpress.css روی هر .heroai-widget داخل ظرف ویجت width: 100% می‌گذارد و
     عرض روی همان ۳۴۲ پیکسل قفل می‌ماند. انتخابگر عمداً یک درجه ویژگیِ بیشتر
     دارد چون wordpress.css بعد از این فایل بار می‌شود. */
  .elementor-widget-container > .newmodels.heroai-widget {
    width: auto;
  }
  .newmodels-head { flex-wrap: wrap; gap: var(--s-2); }
  .newmodels-head .btn { margin-inline-start: 0; }
  .newmodel { min-width: 200px; }

  /* ریل تا لبه‌ی صفحه کشیده شود تا حس اسکرول افقی طبیعی بدهد. عددها با گودی
     خود نوار یکی است، پس کارت اول دقیقاً زیر تیتر می‌ماند. */
  .newmodels-rail {
    margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
    scroll-padding-inline-start: var(--s-5);
  }
}

/* ═══════════════════════════════════════════════════════════
   صفحه مقاله — تکمیلی: پیشرفت مطالعه، برچسب، نویسنده، دیدگاه‌ها
   ═══════════════════════════════════════════════════════════ */
.read-progress { position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 120; background: transparent; pointer-events: none; }
.read-progress > span { display: block; height: 100%; width: 0; background: var(--grad-brand); transition: width .1s linear; }

.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.tag-chip {
  padding: 5px 11px; border-radius: var(--r-full); font-size: var(--fs-xs);
  background: var(--bg-sunken); color: var(--text-2); border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.tag-chip:hover { background: var(--grad-brand-soft); color: var(--violet-500); border-color: rgba(139,79,217,.3); }

.author-card {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin-top: var(--s-5); padding: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2);
}
.avatar-lg { width: 54px; height: 54px; flex: none; font-size: var(--fs-md); }
.author-card b { font-size: var(--fs-md); }

/* ——— دیدگاه‌ها ——— */
.comments { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.comments h2 { font-size: var(--fs-xl); }

.cm { display: flex; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.cm:last-of-type { border-bottom: none; }
.cm .avatar { flex: none; }
.cm .avatar.is-staff { background: var(--grad-brand); color: #fff; }
.cm-body { min-width: 0; flex: 1; }
.cm-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: 6px; }
.cm-head b { font-size: var(--fs-sm); }
.cm-date { margin-inline-start: auto; font-size: var(--fs-xs); }
.cm-body > p { color: var(--text-2); line-height: 2.05; margin: 0 0 10px; font-size: var(--fs-sm); }

.cm-actions { display: flex; gap: var(--s-2); }
.cm-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-xs); color: var(--text-3); padding: 5px 8px;
  border-radius: var(--r-sm); transition: all var(--t-fast);
}
.cm-btn:hover { background: var(--bg-sunken); color: var(--violet-500); }
.cm-btn .icon { width: 14px; height: 14px; }

/* پاسخ‌ها یک پله تورفته با خط راهنما */
.cm-reply {
  margin-top: var(--s-3); padding: var(--s-3) 0 0 0;
  padding-inline-start: var(--s-4); border-bottom: none;
  border-inline-start: 2px solid var(--border);
}
.cm-reply .avatar { width: 32px; height: 32px; font-size: 11px; }

.cm-form { margin-top: var(--s-6); }
.cm-replying {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 9px 12px; margin: 0 0 var(--s-4);
  background: var(--grad-brand-soft); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text-2);
}
.cm-replying .icon { width: 15px; height: 15px; }
.cm-replying .btn { margin-inline-start: auto; }

@media (max-width: 640px) {
  .comments { margin-top: var(--s-6); }
  .comments h2 { font-size: var(--fs-lg); }
  .author-card { flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
  .cm-date { margin-inline-start: 0; width: 100%; }
  .cm-reply { padding-inline-start: var(--s-3); }
  .cm-form .grid-2 { grid-template-columns: 1fr; }
  .cm-form .btn[type="submit"] { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   مقاله — سایدبار پر و اجزای متن
   ═══════════════════════════════════════════════════════════ */
.article-aside { display: grid; gap: var(--s-4); align-content: start; }
.aside-title { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: var(--fs-sm); }
.aside-title .icon { width: 16px; height: 16px; color: var(--violet-500); }

/* باکس بازاریابی */
.aside-promo {
  border-radius: var(--r-lg); padding: var(--s-5);
  background: var(--grad-brand-wide, var(--grad-brand)); color: #fff;
  box-shadow: var(--sh-brand); position: relative; overflow: hidden;
}
.aside-promo::after {
  content: ''; position: absolute; inset-inline-end: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.aside-promo-badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.2); font-size: var(--fs-xs); margin-bottom: 10px;
}
.aside-promo h4 { color: #fff; margin: 0 0 8px; font-size: var(--fs-md); line-height: 1.7; }
.aside-promo p { color: rgba(255,255,255,.88); font-size: var(--fs-sm); line-height: 2; margin: 0 0 16px; }
.aside-promo .btn { background: #fff; color: var(--violet-500); font-weight: 700; }
.aside-promo .btn:hover { background: rgba(255,255,255,.9); }
.aside-promo-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; font-size: var(--fs-xs); color: rgba(255,255,255,.8);
}
.aside-promo-foot .icon { width: 13px; height: 13px; }
.aside-share .social-row { justify-content: flex-start; }

/* اجزای متن مقاله */
.article-callout {
  border: 1px solid var(--border); border-inline-start: 3px solid var(--violet-500);
  border-radius: var(--r-md); background: var(--surface-2);
  padding: var(--s-4) var(--s-5); margin: var(--s-5) 0;
}
.article-callout h5 { margin: 0 0 10px; font-size: var(--fs-sm); }
.article-callout ul { margin: 0; padding-inline-start: 18px; }
.article-callout li { color: var(--text-2); font-size: var(--fs-sm); line-height: 2.05; margin-bottom: 4px; }

.article-quote {
  margin: var(--s-5) 0; padding: var(--s-5);
  border: none; border-radius: var(--r-lg);
  background: var(--grad-brand-soft);
  font-size: var(--fs-md); line-height: 2; color: var(--text);
  position: relative;
}
.article-quote::before {
  content: '”'; position: absolute; inset-inline-start: 14px; top: -6px;
  font-size: 54px; line-height: 1; color: var(--violet-500); opacity: .28;
}
.article-content .code-block { margin: var(--s-5) 0; }

@media (max-width: 900px) {
  .article-aside { gap: var(--s-3); }
  /* در موبایل باکس بازاریابی بعد از فهرست مطالب بیاید، نه ته صفحه */
  .article-toc { order: 1; }
  .aside-promo { order: 2; }
}
@media (max-width: 640px) {
  .article-quote { padding: var(--s-4); font-size: var(--fs-base); }
  .article-callout { padding: var(--s-4); }
}

/* ═══════════════════════════════════════════════════════════
   چیدمان‌های دوستونی «محتوا + ستون کناری»
   جایگزین استایل‌های درون‌خطی که ریسپانسیو نمی‌شدند
   ═══════════════════════════════════════════════════════════ */
.split-aside { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-5); align-items: start; }
.split-aside.is-wide { grid-template-columns: 1fr 340px; }
.split-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-4); }
.split-3-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-4); }

@media (max-width: 1100px) {
  .split-aside, .split-aside.is-wide { grid-template-columns: 1fr 270px; }
  .split-2-1, .split-3-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .split-aside, .split-aside.is-wide { grid-template-columns: 1fr; }
  /* ستون کناری زیر فرم می‌آید و کارت‌هایش کنار هم می‌نشینند تا فضا هدر نرود */
  .split-aside > aside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}
@media (max-width: 640px) {
  .split-aside > aside { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   تب‌های حساب کاربری — ریسپانسیو
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* فرم‌های داخل تب همیشه تک‌ستونی */
  .tab-panel .grid-2,
  .tab-panel .grid-3,
  .tab-panel form > .grid { grid-template-columns: 1fr !important; }

  /* سر فرم پروفایل: آواتار بالا، دکمه زیرش */
  .tab-panel form > .row:first-child { flex-direction: column; align-items: flex-start; gap: var(--s-3); }

  /* دکمه‌های ذخیره تمام‌عرض */
  .tab-panel form > .btn,
  .tab-panel form > .row > .btn { width: 100%; justify-content: center; }

  /* سطرهای «برچسب — مقدار» نباید به هم بچسبند */
  .tab-panel .row-between { flex-wrap: wrap; gap: 4px; row-gap: 6px; }
  .tab-panel .row-between > strong,
  .tab-panel .row-between > .badge { margin-inline-start: auto; }

  /* گروه بج‌ها سطرشکن شود */
  .tab-panel .row { flex-wrap: wrap; }
  .tab-panel .card { padding: var(--s-4); }
  .tab-panel .avatar { flex: none; }
}
@media (max-width: 420px) {
  .tab-panel .row-between > strong { margin-inline-start: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   کادر نوشتن چت — دکمه «+» و انتخاب مدل درون‌خطی
   ═══════════════════════════════════════════════════════════ */
.composer-actions { display: flex; align-items: center; gap: var(--s-2); }
.quick-wrap, .model-wrap { position: relative; }

/* دکمه گرد «+» */
.composer-plus {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); display: grid; place-items: center;
  cursor: pointer; transition: all var(--t-fast);
}
.composer-plus:hover { background: var(--grad-brand-soft); color: var(--violet-500); border-color: rgba(139,79,217,.35); }
.composer-plus .icon { width: 18px; height: 18px; transition: transform var(--t); }
.composer-plus[aria-expanded="true"] { background: var(--grad-brand); color: #fff; border-color: transparent; }
.composer-plus[aria-expanded="true"] .icon { transform: rotate(45deg); }

/* دکمه انتخاب مدل کنار کادر */
.composer-model {
  display: flex; align-items: center; gap: 6px; max-width: 260px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); color: var(--text); transition: all var(--t-fast);
}
.composer-model:hover { border-color: var(--border-strong); background: var(--bg-sunken); }
.composer-model[aria-expanded="true"] { border-color: var(--violet-500); background: var(--grad-brand-soft); }
.composer-model > .icon { width: 16px; height: 16px; color: var(--violet-500); flex: none; }
.cm-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-price { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cm-caret { width: 14px; height: 14px; color: var(--text-3); flex: none; }

/* ——— منوهای بازشونده ——— */
.quick-menu, .model-menu {
  position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0;
  width: 330px; max-width: calc(100vw - 32px); max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 6px;
  z-index: 180; display: none;
}
.model-menu { width: 360px; inset-inline-start: auto; inset-inline-end: 0; }
.quick-menu.is-open, .model-menu.is-open { display: block; animation: fadeUp var(--t) both; }

.menu-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 6px; font-size: var(--fs-xs); color: var(--text-3);
}
.menu-head .icon { width: 14px; height: 14px; color: var(--violet-500); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 10px; margin-top: 4px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--violet-500);
}
.menu-foot .icon { width: 15px; height: 15px; }

/* ——— آیتم کار پرکاربرد ——— */
.quick-item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 9px 10px; border: none; background: none; cursor: pointer;
  border-radius: var(--r-md); text-align: start; font-family: inherit;
  transition: background var(--t-fast);
}
.quick-item:hover { background: var(--bg-sunken); }
.quick-item .icon-tile { width: 34px; height: 34px; flex: none; }
.quick-item .icon-tile .icon { width: 17px; height: 17px; }
.quick-item .grow { min-width: 0; }
.quick-label { display: block; font-size: var(--fs-sm); color: var(--text); line-height: 1.8; }
.quick-item .muted { font-size: var(--fs-xs); }
.quick-model {
  flex: none; font-size: 11px; color: var(--violet-500);
  background: var(--grad-brand-soft); padding: 3px 8px; border-radius: var(--r-full);
  white-space: nowrap;
}

/* ——— گزینه مدل با برچسب توانمندی ——— */
.model-option {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%;
  padding: 10px; border: none; background: none; cursor: pointer;
  border-radius: var(--r-md); text-align: start; font-family: inherit;
  transition: background var(--t-fast);
}
.model-option:hover { background: var(--bg-sunken); }
.model-option.is-active { background: var(--grad-brand-soft); }
.model-option .icon-tile { width: 34px; height: 34px; flex: none; }
.model-option .icon-tile .icon { width: 17px; height: 17px; }
.model-option-body { min-width: 0; flex: 1; }
.model-option-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.model-option-top b { font-weight: 500; color: var(--text); font-size: var(--fs-sm); }
.model-price { margin-inline-start: auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.model-option .muted { display: block; font-size: var(--fs-xs); line-height: 1.9; margin-top: 3px; }
.cm-check { width: 16px; height: 16px; color: var(--violet-500); flex: none; margin-top: 8px; }

.model-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.model-tag {
  font-size: 11px; color: var(--text-2); background: var(--bg-sunken);
  border: 1px solid var(--border); padding: 2px 7px; border-radius: var(--r-full);
  white-space: nowrap;
}
.model-option.is-active .model-tag { background: rgba(255,255,255,.7); border-color: rgba(139,79,217,.2); }

/* عنوان گفتگو در نوار بالا (جایگزین دکمه مدل قدیمی) */
.chat-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }

@media (max-width: 640px) {
  /* در موبایل نام مدل حذف می‌شود تا نوار شلوغ نشود */
  .composer-model { max-width: none; padding: 6px 8px; }
  .cm-price { display: none; }
  .cm-name { max-width: 92px; }
  .quick-menu, .model-menu {
    width: auto; inset-inline: 0;
    position: fixed; bottom: 12px; inset-inline: 12px; max-height: 70dvh;
  }
  .quick-model { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   صفحات ابزار — قیمت شفاف، نمونه‌کارها، اعتبار ناکافی
   ═══════════════════════════════════════════════════════════ */

/* ——— کارت قیمت ——— */
.price-card { border-top: 3px solid transparent; border-image: var(--grad-brand) 1; border-image-slice: 0 0 0 0; }
.price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.price-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.price-label .icon { width: 16px; height: 16px; color: var(--violet-500); }
.price-amount { font-size: var(--fs-xl); font-weight: 700; color: var(--text); line-height: 1.4; }
.price-amount small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-2); margin-inline-start: 5px; }

.price-rows { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--border); }
.price-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 7px 0; font-size: var(--fs-sm); }
.price-row span { color: var(--text-2); }
.price-row b { font-weight: 500; color: var(--text); }

.price-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: var(--s-3) 0; padding: 9px 11px;
  background: var(--grad-brand-soft); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--text-2); line-height: 1.9;
}
.price-note .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--violet-500); }

/* ——— گالری نمونه‌کارها ——— */
.samples-section { margin-top: var(--s-7); }
.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); }
.sample-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-3); cursor: pointer;
  font-family: inherit; text-align: start; transition: all var(--t-fast);
}
.sample-card:hover { border-color: rgba(139,79,217,.35); box-shadow: var(--sh-md); transform: translateY(-3px); }
.sample-thumb {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md);
  display: grid; place-items: center; overflow: hidden;
}
.sample-thumb.is-text { background: var(--surface-2); border: 1px dashed var(--border); }
.sample-doc { width: 34px; height: 34px; color: var(--text-3); }
.sample-play {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--violet-500);
  display: grid; place-items: center; box-shadow: var(--sh-md);
  transition: transform var(--t-fast);
}
.sample-card:hover .sample-play { transform: scale(1.1); }
.sample-time {
  position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
  background: rgba(26,29,41,.72); color: #fff; font-size: 11px;
  padding: 2px 7px; border-radius: var(--r-full);
}
.sample-body { min-width: 0; }
.sample-title { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); line-height: 1.8; }
.sample-body .muted { font-size: var(--fs-xs); }

/* ——— مودال نمونه ——— */
.sample-full { aspect-ratio: 16 / 10; border-radius: var(--r-lg); display: grid; place-items: center; }
.sample-full .icon { width: 54px; height: 54px; color: rgba(255,255,255,.75); }

.sample-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  display: grid; place-items: center;
}
.sample-player-btn {
  width: 58px; height: 58px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--violet-500);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-md);
  transition: transform var(--t-fast);
}
.sample-player-btn:hover { transform: scale(1.06); }
.sample-player-btn .icon { width: 24px; height: 24px; }
.sample-bar {
  position: absolute; inset-inline: 14px; inset-block-end: 34px; height: 4px;
  background: rgba(255,255,255,.3); border-radius: 99px; overflow: hidden;
}
.sample-bar > span { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; }
.sample-player .sample-time { inset-block-end: 12px; }

.sample-prompt { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface-2); border-radius: var(--r-md); }
.sample-prompt p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text); line-height: 2; }

.sample-text { margin-bottom: var(--s-3); }
.sample-text pre {
  margin: 6px 0 0; padding: var(--s-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: var(--fs-sm); line-height: 2.05; color: var(--text);
  max-height: 260px; overflow-y: auto;
}
.sample-text.is-out pre { background: var(--grad-brand-soft); border-color: rgba(139,79,217,.18); }

/* ——— اعتبار ناکافی ——— */
.insufficient { text-align: center; padding: var(--s-5) var(--s-4); }
.insufficient .icon-tile { margin-bottom: var(--s-3); }
.insufficient h4 { margin: 0 0 8px; }
.insufficient > p { max-width: 460px; margin: 0 auto var(--s-4); line-height: 2.05; }
.insufficient .charge-label { justify-content: center; }
.insufficient .charge-presets { max-width: 420px; margin-inline: auto; }
.insufficient .row { justify-content: center; }

.insufficient-meter { max-width: 420px; margin: 0 auto var(--s-5); }
.insufficient-meter .muted { display: block; margin-top: 6px; font-size: var(--fs-xs); }

.insufficient-total {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin-top: var(--s-4); padding: 11px; border-radius: var(--r-md);
  background: var(--grad-brand-soft); font-size: var(--fs-sm); color: var(--text-2);
}
.insufficient-total b { color: var(--violet-500); font-size: var(--fs-md); }

/* نوار بازگشت در صفحه شارژ */
.charge-return {
  display: flex; align-items: center; gap: 8px;
  margin: var(--s-4) var(--s-5) 0; padding: 10px 12px;
  background: var(--grad-brand-soft); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text-2);
}
.charge-return .icon { width: 15px; height: 15px; color: var(--violet-500); flex: none; }

@media (max-width: 640px) {
  .samples-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .sample-card { padding: var(--s-2); }
  .price-head { flex-direction: column; gap: 4px; }
  .insufficient { padding: var(--s-4) var(--s-2); }
  .insufficient .row .btn { width: 100%; justify-content: center; }
  .sample-text pre { max-height: 200px; font-size: var(--fs-xs); }
}
@media (max-width: 380px) {
  .samples-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   پنل پیش‌نمایش چت (مشابه کلاد) — نیمی از صفحه
   ═══════════════════════════════════════════════════════════ */

/* چیپ خروجی داخل پاسخ */
.artifact-chip {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  margin-top: var(--s-3); padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; font-family: inherit;
  text-align: start; transition: all var(--t-fast);
}
.artifact-chip:hover { border-color: rgba(139,79,217,.4); box-shadow: var(--sh-sm); }
.artifact-icon {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-md);
  background: var(--grad-brand-soft); color: var(--violet-500);
  display: grid; place-items: center;
}
.artifact-icon .icon { width: 18px; height: 18px; }
.artifact-body { min-width: 0; flex: 1; }
.artifact-name { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); line-height: 1.8; }
.artifact-chip .muted { font-size: var(--fs-xs); }
.artifact-go { width: 16px; height: 16px; color: var(--text-3); flex: none; }

/* چیدمان: با باز شدن پنل، ناحیه گفتگو نصف می‌شود */
.chat-layout.has-artifact { grid-template-columns: var(--chat-list-w, 292px) 1fr 1fr; }

.artifact-panel {
  display: none; flex-direction: column; min-width: 0;
  border-inline-start: 1px solid var(--border); background: var(--surface);
  height: 100%; overflow: hidden;
}
.chat-layout.has-artifact .artifact-panel { display: flex; animation: fadeUp var(--t) both; }

.artifact-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
  flex: none;
}
.artifact-head .artifact-icon { width: 32px; height: 32px; }
.artifact-title { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.artifact-head .muted { font-size: var(--fs-xs); }
.artifact-head .preview-switch { flex: none; }

.artifact-body { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.artifact-body iframe { width: 100%; height: 100%; border: none; background: #fff; }
.artifact-body .doc-preview { padding: var(--s-5); background: var(--surface); min-height: 100%; }
.artifact-body .code-block { margin: 0; border: none; border-radius: 0; min-height: 100%; }
.artifact-body .code-block pre { max-height: none; }

.artifact-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px var(--s-4); border-top: 1px solid var(--border); flex: none;
}
.artifact-foot .muted { font-size: var(--fs-xs); }

.artifact-scrim { display: none; }

/* ——— موبایل و تبلت: پنل روی صفحه می‌آید ——— */
@media (max-width: 1100px) {
  .chat-layout.has-artifact { grid-template-columns: var(--chat-list-w, 292px) 1fr; }
  .artifact-panel {
    position: fixed; inset-block: 0; inset-inline-end: 0;
    width: min(560px, 92vw); z-index: 200; box-shadow: var(--sh-lg);
    border-inline-start: 1px solid var(--border);
  }
  .artifact-scrim {
    display: block; position: fixed; inset: 0; z-index: 195;
    background: rgba(26,29,41,.3); opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .artifact-scrim.is-open { opacity: 1; pointer-events: auto; }
}
@media (max-width: 900px) {
  .chat-layout.has-artifact { grid-template-columns: 1fr; }
  .artifact-panel { width: 100%; }
  .artifact-head { flex-wrap: wrap; row-gap: var(--s-2); }
  .artifact-head .preview-switch { order: 3; width: 100%; }
}

/* ——— دکمه پرش به نمونه‌ها در سربرگ ابزار ——— */
.head-actions { margin-inline-start: auto; gap: var(--s-2); flex-wrap: wrap; }
.samples-section { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }

/* ——— کارت هزینه: مبلغ در مرکز توجه، بدون توکن ——— */
.price-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.price-unit { font-size: var(--fs-xs); color: var(--text-2); }
.price-amount { line-height: 1.3; }

@media (max-width: 640px) {
  .head-actions { margin-inline-start: 0; width: 100%; }
  .head-actions .btn { flex: 1; justify-content: center; }
}