/* ════════════════════════════════════════════════════════════
   RadikalWP — استایل‌های سفارشی (در کنار Tailwind CDN)
   فقط چیزهایی که Tailwind CDN پوشش نمی‌دهد اینجا تعریف می‌شود.
   ════════════════════════════════════════════════════════════ */

/* فونت پیش‌فرض با fallback امن */
body { font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif; }

/* ══ ضد سرریز افقی در موبایل (فیکس «صفحات تکی می‌زنه بیرون») ══
   ۱) هیچ‌وقت اسکرول افقی سطح صفحه نداشته باشیم؛
   ۲) آیتم‌های گرید به‌جای min-width:auto (رفتار پیش‌فرض) قابل‌تقلیل
      باشند تا <pre> کدهای طولانی مجبور به اسکرول داخلی شود نه
      بیرون‌زدگی از صفحه؛
   ۳) همه رسانه‌ها حداکثر هم‌عرض والدشان. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
.grid > * { min-width: 0; }
pre, .code-block, .font-css-block, .prose-fa pre, .pages-body pre { max-width: 100%; }
img, video, iframe, svg, table { max-width: 100%; }
/* واژه‌های بدون فاصله (URL/هش/کد داخل متن) هیچ‌جا نباید خط بسازند */
h1, h2, h3, p, li, dd, dt, span, a { overflow-wrap: break-word; }

/* بلوک کد داخل تب‌های اسنیپت */
.code-block {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  /* padding-top بزرگ‌تر تا دکمه «کپی» روی اولین خط کد نیفتد */
  padding: 3.1rem 1.5rem 1.25rem;
  background: #0f172a;
  direction: ltr;
  text-align: left;
  font-size: 13px;
  line-height: 1.9;
  font-family: 'Sarasa Mono SC', Consolas, Monaco, 'Courier New', monospace;
  color: #e2e8f0;
  border-radius: 0 0 1rem 1rem;
}
.code-block::-webkit-scrollbar { width: 8px; height: 8px; }
.code-block::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }

/* رنگ‌بندی ساده کد (بدون کتابخانه سنگین) */
pre code { display: block; }

/* مخفی‌سازی عناصر Alpine پیش از مقداردهی */
[x-cloak] { display: none !important; }

/* هایلایت لینک‌های کپی‌شده موفق */
.copy-flash { outline: 2px solid #10b981 !important; }

/* اعداد در متن فارسی با فاصله استاندارد */
.tabular-fa { font-variant-numeric: tabular-nums; }

/* اسکرول‌بار نرم صفحه (با احترام به کاهش‌حرکت) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* جلوگیری قطعی از اسکرول افقی (کشو/المان‌های لبه) — clip برای حفظ sticky */
html, body { overflow-x: clip; }

/* UX موبایل: حذف فلش آبی کلیک + حلقه فوکوس استاندارد برای کیبورد */
body { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 4px; }

/* ── محتوای مقاله/صفحات ثابت (prose-fa / pages-body) ──
   این کلاس‌ها در ویوها استفاده می‌شوند ولی تعریف نداشتند؛
   HTML ادمین‌نویس (h2/table/pre/…) بدون ساختار رندر می‌شد */
.prose-fa, .pages-body { overflow-wrap: break-word; word-break: break-word; }
.prose-fa h2 { font-size: 1.35rem; font-weight: 800; margin: 1.75rem 0 .75rem; color: #1e293b; }
.prose-fa h3 { font-size: 1.12rem; font-weight: 700; margin: 1.4rem 0 .6rem; color: #334155; }
.prose-fa ul, .prose-fa ol { padding-inline-start: 1.5rem; margin: .75rem 0; }
.prose-fa ul { list-style: disc; }
.prose-fa ol { list-style: decimal; }
.prose-fa li { margin: .35rem 0; }
.prose-fa blockquote { border-inline-start: 4px solid #6366f1; background: #f8fafc; padding: .8rem 1.1rem; border-radius: .6rem; margin: 1rem 0; color: #475569; }
.prose-fa a { color: #4f46e5; text-decoration: underline; text-underline-offset: 3px; }
.prose-fa img { max-width: 100%; height: auto; border-radius: .75rem; }
.prose-fa table, .pages-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose-fa table td, .prose-fa table th,
.pages-body table td, .pages-body table th { border: 1px solid #e2e8f0; padding: .55rem .8rem; text-align: start; }
.prose-fa pre, .pages-body pre {
  overflow-x: auto;
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  direction: ltr;
  text-align: left;
  font-size: 13px;
  line-height: 1.9;
}
.prose-fa code, .pages-body code { background: #f1f5f9; padding: .1rem .35rem; border-radius: .35rem; font-size: .85em; overflow-wrap: anywhere; }
.prose-fa pre code, .pages-body pre code { background: transparent; padding: 0; color: inherit; }
.pages-body h2 { font-size: 1.25rem; font-weight: 800; margin: 1.5rem 0 .65rem; color: #1e293b; }
.pages-body h3 { font-size: 1.08rem; font-weight: 700; margin: 1.2rem 0 .5rem; color: #334155; }
.pages-body ul, .pages-body ol { padding-inline-start: 1.5rem; margin: .65rem 0; }
.pages-body ul { list-style: disc; }
.pages-body ol { list-style: decimal; }
.pages-body a { color: #4f46e5; text-decoration: underline; text-underline-offset: 3px; }
.pages-body img { max-width: 100%; height: auto; }
html.dark .prose-fa h2, html.dark .pages-body h2 { color: #e4eaf5; }
html.dark .prose-fa h3, html.dark .pages-body h3 { color: #ccd6e6; }
html.dark .prose-fa blockquote { background: #18233c; color: #b3c0d6; }
html.dark .prose-fa code, html.dark .pages-body code { background: #223050; }
html.dark .prose-fa table td, html.dark .prose-fa table th,
html.dark .pages-body table td, html.dark .pages-body table th { border-color: #253355; }

/* بلوک کد فونت‌ها (fonts/show) — اسکرول افقی برای src:url(...) طولانی */
.font-css-block {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #0f172a;
  direction: ltr;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.9;
  font-family: 'Sarasa Mono SC', Consolas, Monaco, 'Courier New', monospace;
  color: #e2e8f0;
  border-radius: .75rem;
}
.font-css-block::-webkit-scrollbar { width: 8px; height: 8px; }
.font-css-block::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }

/* دکمه بازگشت به بالا */
.rwp-to-top {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: #4f46e5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(79, 70, 229, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.rwp-to-top.rwp-to-top-show { opacity: 1; visibility: visible; transform: translateY(0); }
.rwp-to-top:active { transform: scale(.94); }

/* اگر کاربر حالت کاهش‌حرکت دارد، انیمیشن‌ها خاموش شوند */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ════════════════════════════════════════════════════════════
   اسکلتون لودینگ (Skeleton Loading) — بارگذاری بخش‌ها با استخوان
   ════════════════════════════════════════════════════════════ */

/* بلوک پایه اسکلتون با درخشش عبوری */
.sk {
  position: relative;
  overflow: hidden;
  background: #e9edf5;
  border-radius: 10px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: rwp-sk 1.4s infinite;
}
@keyframes rwp-sk { to { transform: translateX(100%); } }

/* اندازه‌های آماده */
.sk--line  { height: 12px; }
.sk--title { height: 18px; width: 60%; }

/* پوشش اسکلتون روی iframe پیش‌نمایش */
.preview-wrap { position: relative; }
.sk-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f8fafc;
  transition: opacity .4s ease;
}
.sk-overlay.sk-done { opacity: 0; pointer-events: none; }
.sk-overlay .sk-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  animation: rwp-spin .8s linear infinite;
}
@keyframes rwp-spin { to { transform: rotate(360deg); } }

/* نوار پیشرفت بالای صفحه هنگام ناوبری */
.sk-bar {
  position: fixed;
  top: 0; right: 0;
  height: 3px;
  width: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  opacity: 0;
  transition: width .3s ease, opacity .3s ease;
  border-radius: 0 0 0 4px;
}

/* تصاویر lazy تا لحظه بارگذاری، اسکلتون می‌گیرند */
img[data-sk] { min-height: 1px; }

/* ════════════════════════════════════════════════════════════
   حالت شب سراسری (Dark Mode) — کلاس dark روی <html>
   لایه بازنویسی متغیرهای Tailwind به‌صورت متمرکز؛ بدون نیاز به
   ویرایش تک‌تک نماها. سوییچ: دکمه data-theme-toggle + localStorage
   ════════════════════════════════════════════════════════════ */

/* رنگ‌بندی بومی مرورگر (اسکرول‌بار، فرم‌ها و...) */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1220; color: #e2e8f0; }

/* انتقال نرم فقط هنگام تعویض تم (کلاس theming توسط JS گذاشته می‌شود) */
html.theming, html.theming body,
html.theming body *:not(iframe):not(canvas) {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease !important;
}

/* ── سطوح روشن → تیره ─────────────────────────────────── */
html.dark .bg-white            { background-color: #111a2e; }
html.dark .bg-white\/90        { background-color: #14203acc; }
html.dark .bg-white\/10        { background-color: #ffffff14; }
html.dark .bg-slate-50         { background-color: #0d1526; }
html.dark .bg-slate-50\/60     { background-color: #0d152699; }
html.dark .bg-slate-100        { background-color: #18233c; }
html.dark .bg-slate-200        { background-color: #223050; }
html.dark .bg-slate-300        { background-color: #2b3a5e; }
html.dark .bg-slate-600        { background-color: #3c4a6b; }
html.dark .bg-slate-800        { background-color: #0f1930; }

/* ── متن‌ها ───────────────────────────────────────────── */
html.dark .text-slate-800 { color: #e4eaf5; }
html.dark .text-slate-700 { color: #ccd6e6; }
html.dark .text-slate-600 { color: #b3c0d6; }
html.dark .text-slate-500 { color: #9dabc4; }
html.dark .text-slate-400 { color: #8593ae; }
html.dark .text-slate-300 { color: #74839f; }
html.dark .text-slate-900 { color: #f1f5fb; }

/* ── حاشیه‌ها و جداکننده‌ها ───────────────────────────── */
html.dark .border-slate-100  { border-color: #1c2743; }
html.dark .border-slate-200  { border-color: #253355; }
html.dark .border-slate-300  { border-color: #2f4066; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1c2743; }

/* ── پالت ایندیگو (کلیک‌پذیرها) ──────────────────────── */
html.dark .text-indigo-600  { color: #a5b4fc; }
html.dark .text-indigo-700  { color: #b4bdff; }
html.dark .hover\:text-indigo-600:hover { color: #a5b4fc; }
html.dark .bg-indigo-50     { background-color: #1b2547; }
html.dark .bg-indigo-100    { background-color: #232c55; }
html.dark .bg-indigo-600    { background-color: #4f46e5; }
html.dark .hover\:bg-indigo-700:hover { background-color: #4338ca; }
html.dark .hover\:bg-indigo-600:hover { background-color: #5850ec; }
html.dark .border-indigo-100 { border-color: #27305a; }
html.dark .border-indigo-200 { border-color: #2f3a6e; }
html.dark .border-indigo-300 { border-color: #3b4680; }
html.dark .shadow-indigo-100 { --tw-shadow-color: #050a18; }

/* ── پالت سبز / قرمز / کهربایی ───────────────────────── */
html.dark .bg-emerald-50  { background-color: #0d2a20; }
html.dark .bg-emerald-100 { background-color: #123a2c; }
html.dark .text-emerald-600 { color: #4ade80; }
html.dark .text-emerald-700 { color: #6ee7a0; }
html.dark .text-emerald-800 { color: #86efac; }
html.dark .border-emerald-200 { border-color: #1c4534; }
html.dark .bg-red-50      { background-color: #2b1319; }
html.dark .bg-red-100     { background-color: #381a23; }
html.dark .text-red-600   { color: #f87171; }
html.dark .text-red-700   { color: #fca5a5; }
html.dark .hover\:bg-red-50:hover { background-color: #2b1319; }
html.dark .border-red-200 { border-color: #4b2029; }
html.dark .border-red-300 { border-color: #5c2833; }
html.dark .bg-amber-50    { background-color: #291f0c; }
html.dark .bg-amber-100   { background-color: #342812; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-800 { color: #fde68a; }
html.dark .text-amber-900 { color: #fef3c7; }
html.dark .border-amber-200 { border-color: #4a3a14; }

/* ── سایه‌ها در حالت شب عمیق‌تر می‌شوند ───────────────── */
html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-lg,
html.dark .shadow-xl, html.dark .shadow-2xl {
  --tw-shadow-color: rgba(0, 0, 0, .45);
}
html.dark .hover\:shadow-indigo-100:hover { --tw-shadow-color: rgba(0,0,0,.4); }

/* ── عناصر خاص: اسکلتون و پوشش پیش‌نمایش ─────────────── */
html.dark .sk { background: #1a2440; }
html.dark .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); }
html.dark .sk-overlay { background: #0d1526; }
html.dark .sk-overlay .sk-spinner { border-color: #253355; border-top-color: #818cf8; }

/* ── فرم‌ها ───────────────────────────────────────────── */
html.dark input, html.dark textarea, html.dark select { color-scheme: dark; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }

/* ── دکمه سوییچ تم ────────────────────────────────────── */
.theme-toggle { cursor: pointer; }
.theme-toggle .ic-moon  { display: none; }
.theme-toggle .ic-sun   { display: inline; }
html.dark .theme-toggle .ic-moon  { display: inline; }
html.dark .theme-toggle .ic-sun   { display: none; }

/* منوی کشویی موبایل (کشو از راست) */
.rwp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(310px, 86vw);
  background: #0f172a;
  transform: translateX(105%);
  /* کشوی بسته از لبه بیرون می‌زند؛ visibility + overflow-x clip
     جلوی اسکرول افقی و خواندن منوی مخفی را می‌گیرد */
  visibility: hidden;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s;
  z-index: 70;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -18px 0 50px rgba(0, 0, 0, .45);
}
.rwp-drawer.rwp-drawer-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
.rwp-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 65;
}
.rwp-drawer-backdrop.rwp-drawer-open { opacity: 1; visibility: visible; }
html.dark .rwp-drawer { background: #0c1425; }

/* در دسکتاپ کشو مخفی است (منوی کامل دیده می‌شود) — آستانه lg چون
   منوی دسکتاپ از ۹ آیتم فقط در ۱۰۲۴px به بالا جا می‌شود */
@media (min-width: 1024px) {
  .rwp-drawer, .rwp-drawer-backdrop { display: none !important; }
}
body.rwp-no-scroll { overflow: hidden; }

/* ══════════════ هایلایت سینتکس (توکن‌های سرورساید Highlighter) ══════════════ */
.code-block .tok-tag    { color: #7dd3fc; }
.code-block .tok-attr   { color: #c4b5fd; }
.code-block .tok-str    { color: #86efac; }
.code-block .tok-com    { color: #64748b; font-style: italic; }
.code-block .tok-kw     { color: #fca5a5; font-weight: 600; }
.code-block .tok-num    { color: #fdba74; }
.code-block .tok-sel    { color: #fcd34d; }
.code-block .tok-prop   { color: #93c5fd; }
.code-block .tok-pseudo { color: #f0abfc; }
.code-block .tok-fn     { color: #67e8f9; }
.code-block .tok-var    { color: #fda4af; }
.code-block .tok-pun    { color: #94a3b8; }

/* ══════════════ بهبودهای UX سراسری ══════════════ */
/* فوکوس قابل‌مشاهده برای دسترس‌پذیری (کیبورد) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 6px;
}

/* انتقال نرم برای کارت‌ها و لینک‌ها (الگوی یکدست) */
.bg-white.rounded-2xl, a[class*="rounded-2xl"] {
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
  a[class*="rounded-2xl"]:hover { transform: translateY(-2px); }
}

/* کارت دانلود: محدودیت خطوط توضیح */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* جدول‌های ادمین روی موبایل: اسکرول نرم */
.overflow-x-auto { scrollbar-width: thin; }

/* دکمه بازگشت به بالا در حالت تاریک */
html.dark #rwp-backtop { background: #4f46e5; }
html.dark #rwp-backtop:hover { background: #6366f1; }

/* سوییچر زبان هدر */
a[title="زبان"], a[title="Language"] { min-width: 2.5rem; text-align: center; }

/* کپچای تصویری: استایل ورودی کد */
input[name="captcha_answer"] { letter-spacing: .3em; }

/* ═══════════ v0.4.0 ═══════════ */

/* اسکرول‌بار نازک سایدبار پنل ادمین (فیکس عدم اسکرول سایدبار دسکتاپ) */
.rwp-slim-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .45) transparent;
}
.rwp-slim-scroll::-webkit-scrollbar { width: 6px; }
.rwp-slim-scroll::-webkit-scrollbar-track { background: transparent; }
.rwp-slim-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .45); border-radius: 999px; }
.rwp-slim-scroll::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .7); }

/* سایدبار چسبان صفحات جزئیات: اگر بلندتر از viewport شد، خودش اسکرول شود
   (فیکس «سایدبار دسکتاپ اسکرول نمی‌شود») */
@media (min-width: 1024px) {
  aside.lg\:sticky, aside[class*="lg:sticky"] {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .4) transparent;
  }
  aside[class*="lg:sticky"]::-webkit-scrollbar { width: 6px; }
  aside[class*="lg:sticky"]::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .4); border-radius: 999px; }
}

/* ── تبلیغات متنی (Text Ads) ── */
.rwp-text-ad {
  display: block;
  padding: 10px 14px;
  border: 1px dashed rgba(99, 102, 241, .45);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.rwp-text-ad:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, .05);
}
.rwp-text-ad .rwp-text-ad-title { font-weight: 700; font-size: 13px; color: #4f46e5; }
html.dark .rwp-text-ad .rwp-text-ad-title { color: #818cf8; }
.rwp-text-ad .rwp-text-ad-desc { font-size: 11.5px; color: #64748b; margin-top: 2px; }

/* در فوتر تیره، قاب‌ها و متن‌ها روشن‌تر دیده شوند */
.rwp-text-ads-block { color: #334155; }

/* ── ریل تبلیغ «ستون کنار کل صفحه» — فقط نمایشگرهای بزرگ (xl+) ── */
.rwp-page-rail {
  display: none;
}
@media (min-width: 1440px) {
  .rwp-page-rail {
    display: block;
    position: fixed;
    bottom: 96px;
    inset-inline-end: 16px;
    width: 170px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    z-index: 40;
    scrollbar-width: thin;
  }
}

/* ── مودال تایمر دانلود (۵ ثانیه) ── */
/* ── اورلی تایمر دانلود ۵ ثانیه‌ای (.dl-timer-*) ── */
html.dl-timer-lock { overflow: hidden; }
.dl-timer-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(2, 6, 23, .72); backdrop-filter: blur(4px);
  animation: dlTimerIn .18s ease-out;
}
.dl-timer-overlay.dl-timer-out { animation: dlTimerOut .18s ease-in forwards; }
@keyframes dlTimerIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlTimerOut { from { opacity: 1; } to { opacity: 0; } }
.dl-timer-box {
  position: relative; background: #fff; border-radius: 20px; padding: 28px 24px;
  width: min(380px, 94vw); text-align: center; box-shadow: 0 25px 60px rgba(2, 6, 23, .35);
}
html.dark .dl-timer-box { background: #111a2e; color: #e2e8f0; }
.dl-timer-ring-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.dl-timer-ring { transform: rotate(-90deg); width: 96px; height: 96px; }
.dl-timer-ring circle { fill: none; stroke-width: 8; }
.dl-timer-ring-bg { stroke: rgba(99, 102, 241, .18); }
.dl-timer-ring-fg { stroke: #6366f1; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.dl-timer-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #4f46e5;
}
html.dark .dl-timer-num { color: #818cf8; }
.dl-timer-label { font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 4px; }
html.dark .dl-timer-label { color: #cbd5e1; }
.dl-timer-name { font-size: 12px; color: #94a3b8; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-timer-cancel {
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
  padding: 8px 26px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.dl-timer-cancel:hover { border-color: #f87171; color: #dc2626; }
html.dark .dl-timer-cancel { background: transparent; border-color: #334155; color: #cbd5e1; }
html.dark .dl-timer-cancel:hover { border-color: #f87171; color: #f87171; }

/* پیش‌نمایش تصویری فونت روی کارت‌ها (جایگزین بارگذاری فونت واقعی) */
.rwp-font-preview-img {
  width: 100%; height: 110px; object-fit: cover; object-position: center;
  background: #fff; display: block;
}

/* ═══════════════════════════════════════════════════════════
   فیکس سرریز (Overflow) کارت‌ها — v3.4
   مشکل: ناوبری (breadcrumb/صفحه‌بندی)، عنوان‌های طولانی،
   برچسب‌ها و ردیف آمار از باکس کارت بیرون می‌زدند.
   راه‌حل: قفل کردن عرض فرزندان flex + شکستن کلمات بلند +
   wrap کردن ردیف‌های متادیتا + محدود کردن ناوبری داخل کادر.
   ═══════════════════════════════════════════════════════════ */

/* ۱) همه کارت‌های عمومی (کارت اسنیپت/قالب/دانلود/کتابخانه): محتوای بدنه هرگز از کادر خارج نشود */
.group > div, div.group > a, .group .p-4, .group .p-5 {
  min-width: 0;
  max-width: 100%;
}

/* ۲) عنوان کارت‌ها: کلمات خیلی بلند (URL/انگلیسی) بشکنند و سرریز نکنند */
.group h3, .group h2, .group h4 {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* ۳) ردیف متادیتا (آیکون‌ها + ستاره‌ها): در عرض کم بپیچد نه اینکه بیرون بزند */
.group .flex.items-center.gap-3 {
  flex-wrap: wrap;
  row-gap: 4px;
  min-width: 0;
}

/* ۴) برچسب‌های تگ داخل کارت: شکستن و محدودیت عرض */
.group .flex.flex-wrap {
  min-width: 0;
  max-width: 100%;
}
.group .flex.flex-wrap > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ۵) ناوبری (breadcrumb و صفحه‌بندی): همیشه داخل کادر والد بماند */
nav[aria-label] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
nav.flex.items-center.gap-1 {
  min-width: 0;
}
nav.flex.items-center.gap-1 > * {
  flex-shrink: 0;
}
nav.flex.items-center.gap-1 > span:last-child,
nav.flex.items-center.gap-1 > b {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ۶) پیش‌نمایش زنده اسنیپت: هیچ عنصری از ناحیه پیش‌نمایش خارج نشود */
.group .relative.h-36, .group .relative.h-44 {
  contain: layout paint;
}

/* ۷) متن‌های کلیپ‌شده کارت دانلود/کتابخانه: شکست امن */
.group p {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ۸) جدول‌ها و کدهای داخل کارت‌ها و صفحات: اسکرول افقی داخل خود باکس */
.group pre, .prose-fa pre, .pages-body pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ۹) دارک‌مود — همان قواعد با تفسیر یکسان (بدون تغییر رنگ) */
html.dark .group > div, html.dark .group .p-4, html.dark .group .p-5 {
  min-width: 0;
  max-width: 100%;
}

/* ۱۰) کارت با لایه لینک (stretched-link — کارت اسنیپت/قالب/دانلود):
   لغزش نرم کل کارت هنگام هاور؛ لایه لینک شفاف است و خودش جابه‌جا نمی‌شود */
@media (prefers-reduced-motion: no-preference) {
  .group.relative.rounded-2xl:hover {
    transform: translateY(-2px);
  }
}