/*! IPStable Post Page Optimized CSS (Included Footer Styles) */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

html{
    font-family: "Vazirmatn", Tahoma, sans-serif;
}

@layer properties; @layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: 'Vazir', 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
    --font-mono: monospace;
    --color-primary: #00DF82; --color-surface: #121214; --color-background: #09090B; --color-borderline: #27272A; --color-text-main: #FAFAFA; --color-text-muted: #A1A1AA;
    --spacing: 0.25rem; --container-7xl: 80rem; --blur-md: 12px; --blur-2xl: 40px;
    --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer base {
  *, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html, :host {       line-height: 1.5; 
      font-family: var(--font-sans); 
      scroll-behavior: smooth; 
      scroll-padding-top: 140px !important; }
  body { background-color: var(--color-background); color: var(--color-text-main); }
  hr { height: 0; border-top-width: 1px; }
  h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  button, input { font: inherit; background: transparent; opacity: 1; border-radius: 0; }
  img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
  ul, ol, details, summary { list-style: none; }
  [hidden] { display: none !important; }
}
@layer utilities {
  .absolute { position: absolute; } .relative { position: relative; } .fixed { position: fixed; } .sticky { position: sticky; }
  .inset-0 { inset: 0; } .top-0 { top: 0; } .right-0 { right: 0; } .top-\[-10\%\] { top: -10%; } .left-1\/2 { left: 50%; }
  .z-10 { z-index: 10; } .z-50 { z-index: 50; } .z-\[-1\] { z-index: -1; } .pointer-events-none { pointer-events: none; }
  .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; }
  .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; }
  .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; }
  .w-full { width: 100%; } .h-full { height: 100%; } .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; } .w-16 { width: 4rem; } .h-16 { height: 4rem; } .w-24 { width: 6rem; } .h-24 { height: 6rem; } .w-32 { width: 8rem; } .h-32 { height: 8rem; } .h-px { height: 1px; } .h-auto { height: auto; } .h-20 { height: 5rem; }
  .w-\[600px\] { width: 600px; } .h-\[300px\] { height: 300px; } .max-w-7xl { max-width: var(--container-7xl); } .max-w-none { max-width: none; }
  .mx-auto { margin-left: auto; margin-right: auto; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
  .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
  .mb-0\.5 { margin-bottom: 0.125rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
  .-mt-6 { margin-top: -1.5rem; } .-mr-6 { margin-right: -1.5rem; } .-mr-10 { margin-right: -2.5rem; } .-mt-10 { margin-top: -2.5rem; }
  .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-2\.5 { padding: 0.625rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .pt-4 { padding-top: 1rem; } .pt-8 { padding-top: 2rem; } .pt-10 { padding-top: 2.5rem; } .pt-32 { padding-top: 6rem; } .pb-5 { padding-bottom: 1.2rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pb-12 { padding-bottom: 3rem; }
  .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }
  .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; } .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; } .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; } .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
  
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rounded-md { border-radius: 0.375rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-b-2xl { border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded-bl-full { border-bottom-left-radius: 9999px; }
  .border { border-width: 1px; } .border-t { border-top-width: 1px; } .border-b { border-bottom-width: 1px; } .border-r-4 { border-right-width: 4px; } .last\:border-b-0:last-child { border-bottom-width: 0; }
  .font-mono { font-family: var(--font-mono); } .font-bold { font-weight: 700; } .font-black { font-weight: 900; }
  .text-\[10px\] { font-size: 10px; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; } .leading-loose { line-height: 2; }
  .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .tracking-tight { letter-spacing: -0.025em; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .overflow-hidden { overflow: hidden; } .scroll-pt-32 { scroll-padding-top: 8rem; } .scroll-mt-28 { scroll-margin-top: 7rem; } .-translate-x-1\/2 { transform: translateX(-50%); }
  .transition-all { transition: all 300ms ease-in-out; } .transition-colors { transition: color 300ms, background-color 300ms, border-color 300ms; } .transition-transform { transition: transform 300ms; }
  .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; }
  
  /* Colors & Backgrounds */
  .text-primary { color: var(--color-primary); } .text-black { color: #000; } .text-white { color: #fff; } .text-textMain { color: var(--color-text-main); } .text-textMuted { color: var(--color-text-muted); } .text-gray-300 { color: #d1d5db; } .text-gray-400 { color: #9ca3af; } .text-emerald-100 { color: #d1fae5; }
  .bg-primary { background-color: var(--color-primary); } .bg-primary\/10 { background-color: rgba(0, 223, 130, 0.1); } .bg-background { background-color: var(--color-background); } .bg-surface { background-color: var(--color-surface); } .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); } .bg-black\/10 { background-color: rgba(0, 0, 0, 0.1); } .bg-\[\#0B111A\] { background-color: #0B111A; } .bg-slate-800\/40 { background-color: rgba(30, 41, 59, 0.4); } .bg-\[\#09090B\]\/90 { background-color: rgba(9, 9, 11, 0.9); } .bg-emerald-900\/50 { background-color: rgba(6, 78, 59, 0.5); }
  .border-borderline { border-color: var(--color-borderline); } .border-primary { border-color: var(--color-primary); } .border-primary\/20 { border-color: rgba(0, 223, 130, 0.2); } .border-white\/5 { border-color: rgba(255, 255, 255, 0.05); } .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); } .border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3); }
  
  /* Gradients */
  .bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); }
  .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } 
  .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
  .from-\[\#0B111A\] { --tw-gradient-from: #0B111A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(11, 17, 26, 0)); } 
  .from-\[\#064E3B\] { --tw-gradient-from: #064E3B; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 78, 59, 0)); }
  .to-\[\#064E3B\]\/30 { --tw-gradient-to: rgba(6, 78, 59, 0.3); } 
  .to-\[\#022C22\] { --tw-gradient-to: #022C22; }
  .from-primary\/40 { --tw-gradient-from: rgba(0, 223, 130, 0.4); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } 
  .via-white\/10 { --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.1), var(--tw-gradient-to); } 
  .to-transparent { --tw-gradient-to: transparent; }
  
  /* Shadows & Blurs */
  .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .shadow-glow { box-shadow: 0 0 20px rgba(0, 223, 130, 0.2); } .shadow-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
  .blur-xl { filter: blur(24px); } .blur-2xl { filter: blur(40px); } .blur-\[120px\] { filter: blur(120px); } .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  
  /* Hover & Groups */
  .hover\:scale-105:hover { transform: scale(1.05); } .hover\:bg-primary:hover { background-color: var(--color-primary); } .hover\:bg-\[\#00c572\]:hover { background-color: #00c572; } .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); } .hover\:bg-white:hover { background-color: #fff; } .hover\:text-black:hover { color: #000; } .hover\:text-white:hover { color: #fff; } .hover\:text-emerald-800:hover { color: #065f46; } .hover\:border-primary:hover { border-color: var(--color-primary); } .hover\:border-primary\/50:hover { border-color: rgba(0, 223, 130, 0.5); } .hover\:shadow-\[0_0_25px_rgba\(0\,223\,130\,0\.4\)\]:hover { box-shadow: 0 0 25px rgba(0,223,130,0.4); } .hover\:shadow-\[0_0_25px_rgba\(0\,223\,130\,0\.5\)\]:hover { box-shadow: 0 0 25px rgba(0,223,130,0.5); }
  .group:hover .group-hover\:bg-transparent { background-color: transparent; } .group:hover .group-hover\:bg-primary\/20 { background-color: rgba(0, 223, 130, 0.2); } .group:hover .group-hover\:border-primary\/50 { border-color: rgba(0, 223, 130, 0.5); } .group:hover .group-hover\:text-primary { color: var(--color-primary); } .group:hover .group-hover\:scale-110 { transform: scale(1.1); }
  details[open].group .group-open\:rotate-180 { transform: rotate(180deg); } details[open].group .group-open\:text-primary { color: var(--color-primary); } details[open].group { border-color: rgba(0, 223, 130, 0.5); }

  /* Responsive Queries */
  @media (min-width: 640px) { 
    .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:items-start { align-items: flex-start; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:text-right { text-align: right; }
  }
  @media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:text-right { text-align: right; } .md\:justify-start { justify-content: flex-start; }
  }
  @media (min-width: 1024px) {
    .lg\:flex { display: flex; } .lg\:flex-row { flex-direction: row; } .lg\:hidden { display: none; } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:w-\[60\%\] { width: 60%; } .lg\:w-\[40\%\] { width: 40%; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:p-8 { padding: 2rem; } .lg\:text-4xl { font-size: 1.5rem; line-height: 2.5rem; } .lg\:scroll-mt-32 { scroll-margin-top: 8rem; }
    .lg\:justify-start { justify-content: flex-start; } .lg\:justify-end { justify-content: flex-end; }
    .lg\:rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .lg\:rounded-r-2xl { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }
  }

  /* Custom Utilities */
  .bg-grid-pattern { position: fixed; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; z-index: -2; pointer-events: none; }
  .btn-primary { background-color: var(--color-primary); color: #000; display: inline-flex; align-items: center; justify-content: center; transition: all 300ms; }
  .btn-primary:hover { background-color: #00c572; box-shadow: 0 0 20px rgba(0, 223, 130, 0.4); transform: translateY(-2px); }
  .selection\:bg-primary *::selection, .selection\:bg-primary::selection { background-color: var(--color-primary); color: #000; }
  
/* =========================================
   ۹. Prose (محتوای مقاله) - استایل‌های حرفه‌ای و مدرن
   ========================================= */

/* تنظیمات کلی متن و تایپوگرافی */
.prose {
    color: #d1d5db;
    font-size: 14px;  /* ✅ FIX: کاهش از 16px به 14px برای موبایل */
    line-height: 1.9;  /* ✅ FIX: کاهش از 2.1 به 1.9 */
    text-align: justify;
    max-width: none;
    word-spacing: -0.1em;  /* ✅ بهبود فاصله کلمات فارسی */
}
@media (min-width: 768px) {
    .prose {
        font-size: 16px;  /* دسکتاپ: 16px */
        line-height: 2.2;
    }
}

/* مدیریت دقیق فاصله پاراگراف‌ها */
.prose p {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;  /* ✅ FIX: افزایش فاصله پاراگراف‌ها */
}
@media (min-width: 768px) {
    .prose p {
        margin-bottom: 0.25rem !important;
    }
}

/* =========================================
   تیترها (تنظیم فاصله دقیق تا متن)
   ========================================= */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #fff;
    font-weight: 800;
    clear: both;
    line-height: 1.4;
    scroll-margin-top: 100px !important;  /* ✅ FIX: کاهش از 150px */
}

.prose h2 {
    font-size: 1.15rem;  /* ✅ FIX: کاهش از 1.4rem به 1.15rem برای موبایل */
    margin-top: 1.5rem !important;  /* ✅ FIX: کاهش از 2.5rem */
    margin-bottom: 0.75rem !important;
    border-right: 3px solid var(--color-primary);  /* ✅ FIX: کاهش از 4px */
    padding: 0.4rem 10px 0.4rem 0;  /* ✅ FIX: کاهش padding */
    background: linear-gradient(90deg, transparent, rgba(0, 223, 130, 0.05) 80%);
    border-radius: 8px 0 0 8px;  /* ✅ FIX: کاهش از 12px */
    scroll-margin-top: 100px !important;
}
@media (min-width: 768px) {
    .prose h2 {
        font-size: 1.4rem;
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        border-right: 4px solid var(--color-primary);
        padding: 0.5rem 14px 0.5rem 0;
        border-radius: 12px 0 0 12px;
    }
}

.prose h3 {
    font-size: 1.05rem;  /* ✅ FIX: کاهش از 1.25rem به 1.05rem برای موبایل */
    margin-top: 1.25rem !important;  /* ✅ FIX: کاهش از 2rem */
    margin-bottom: 0.6rem !important;
    border-right: 3px solid var(--color-primary);
    padding: 0.4rem 10px 0.4rem 0;
    background: linear-gradient(90deg, transparent, rgba(0, 223, 130, 0.05) 80%);
    border-radius: 8px 0 0 8px;
    color: var(--color-primary);
    display: block;
    scroll-margin-top: 100px !important;
}
.prose h3::before {
    display: none !important;
}

@media (min-width: 768px) {
    .prose h3 {
        font-size: 1.2rem;
        margin-top: 2rem !important;
        margin-bottom: 0.85rem !important;
        border-right: 4px solid var(--color-primary);
        padding: 0.5rem 14px 0.5rem 0;
        border-radius: 12px 0 0 12px;
    }
}

/* ✅ FIX: h4 برای موبایل */
.prose h4 {
    font-size: 0.95rem;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    color: var(--color-primary);
}
@media (min-width: 768px) {
    .prose h4 {
        font-size: 1.1rem;
    }
}

/* لینک‌ها داخل متن (طراحی مدرن) */
.prose p a, .prose li a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 rgba(0, 223, 130, 0.3);
    transition: all 0.3s ease;
}
.prose p a:hover, .prose li a:hover {
    color: #000;
    background-color: var(--color-primary);
    box-shadow: inset 0 -20px 0 var(--color-primary);
    border-radius: 4px;
}

/* =========================================
   لیست‌های معمولی (حذف خط تیره و مربع)
   ========================================= */
.prose ul, .prose ol {
    padding-right: 0rem;
    margin-bottom: 0.75rem !important;
    font-size: 14px;  /* ✅ FIX: موبایل */
}
@media (min-width: 768px) {
    .prose ul, .prose ol {
        font-size: 16px;
    }
}
.prose li {
    margin-bottom: 0.5rem;  /* ✅ FIX: کاهش از 0.75rem */
}
@media (min-width: 768px) {
    .prose li {
        margin-bottom: 0.75rem;
    }
}
/* اعمال استایل فقط روی لیست‌های عادی (نه روی فهرست مطالب) */
.prose ul:not(.toc-list):not(.ai-toc-box ul) li {
    position: relative;
    list-style-type: none;
    padding-right: 0rem;
}
.prose ul:not(.toc-list):not(.ai-toc-box ul) li::before {
    content: "" !important;
    position: absolute;
    right: 0;
    top: 10px;  /* ✅ FIX: کاهش از 12px */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 223, 130, 0.3);
    background: transparent;
}

/* تصاویر داخل مقاله */
.prose img {
    border-radius: 12px;  /* ✅ FIX: کاهش از 16px */
    border: 1px solid rgba(255,255,255,0.08);
    margin: 1.5rem auto;  /* ✅ FIX: کاهش از 2.5rem */
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);  /* ✅ FIX: کاهش shadow */
}
@media (min-width: 768px) {
    .prose img {
        border-radius: 16px;
        margin: 2.5rem auto;
        box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
    }
}

/* ✅ FIX: استایل‌های موبایل (max-width: 640px) */
@media (max-width: 640px) {
    .prose {
        font-size: 13.5px;
        line-height: 1.85;
    }

    .prose h2 {
        font-size: 1.1rem;
        margin-top: 1.25rem !important;
        margin-bottom: 0.6rem !important;
        padding: 0.35rem 8px 0.35rem 0;
    }

    .prose h3 {
        font-size: 1rem;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.35rem 8px 0.35rem 0;
    }

    .prose h4 {
        font-size: 0.9rem;
        margin-top: 0.85rem !important;
        margin-bottom: 0.4rem !important;
    }

    .prose p {
        margin-bottom: 0.4rem !important;
    }

    .prose ul, .prose ol {
        font-size: 13.5px;
        margin-bottom: 0.6rem !important;
    }

    .prose li {
        margin-bottom: 0.4rem;
    }

    .prose img {
        margin: 1rem auto;
        border-radius: 10px;
    }

    /* ✅ FIX: جعبه‌های callout و TLDR در موبایل */
    .prose .callout-success,
    .prose .callout-warning,
    .prose .callout-danger,
    .prose .tldr-box,
    .prose .bg-slate-900\/50 {
        padding: 0.75rem !important;
        margin: 1rem 0 !important;
        border-radius: 8px !important;
    }

    /* ✅ FIX: جداول در موبایل — قابل اسکرول */
    .prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        font-size: 12px;
    }

    /* ✅ FIX: mark هایلایت‌ها */
    .prose mark {
        padding: 1px 4px;
        border-radius: 3px;
    }

    /* ✅ FIX: figure و figcaption */
    .prose figure {
        margin: 1rem 0 !important;
    }

    .prose figcaption {
        font-size: 11px;
        margin-top: 0.5rem;
    }

    /* ✅ FIX: بلاک کوت (blockquote) */
    .prose blockquote {
        padding: 0.75rem 1rem !important;
        margin: 1rem 0 !important;
        font-size: 13px;
    }
}

/* =========================================
   ۱۰. Blockquotes و تجربه واقعی
   ========================================= */

.prose blockquote {
    background: linear-gradient(90deg, #121214 0%, rgba(18, 18, 20, 0.5) 100%) !important;
    border-right: 4px solid var(--color-primary) !important;
    padding: 1.5rem 1.75rem !important;
    margin: 2.5rem 0 !important;
    border-radius: 16px 0 0 16px !important;
    color: #d1d5db !important;
    font-size: 1.05em !important;
    font-style: normal !important; /* حذف ایتالیک */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
    position: relative;
}
.prose blockquote::before {
    content: '"';
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 4rem;
    color: rgba(0, 223, 130, 0.1);
    font-family: serif;
    line-height: 1;
}

.prose blockquote:has(strong:contains("تجربه واقعی")) {
    background: linear-gradient(90deg, rgba(0, 223, 130, 0.08) 0%, #121214 100%) !important;
    border-color: var(--color-primary) !important;
    border-left: 1px solid rgba(0, 223, 130, 0.1) !important;
}
.prose blockquote:has(strong:contains("تجربه واقعی")) strong {
    color: var(--color-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.15em !important;
    margin-bottom: 0.75rem !important;
}

/* =========================================
   ۱۱. جداول (Tables)
   ========================================= */
.prose table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: #0B111A !important;
    border-radius: 12px !important;
    border: 1px solid #27272A !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}
@media (min-width: 768px) {
    .prose table { display: table !important; white-space: normal !important; }
}
.prose th {
    background-color: rgba(0, 223, 130, 0.1) !important;
    color: var(--color-primary) !important;
    padding: 16px !important;
    font-weight: 800 !important;
    text-align: right !important;
}
.prose td {
    padding: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #e4e4e7 !important;
}
.prose tr:last-child td { border-bottom: none !important; }
.prose tr:hover td { background-color: rgba(255, 255, 255, 0.03) !important; }

/* =========================================
   ۱۲. فهرست مطالب (TOC) - طراحی فوق حرفه‌ای
   ========================================= */

.prose .ai-toc-box {
    background: linear-gradient(145deg, #121214, #0B111A) !important;
    border: 1px solid rgba(0, 223, 130, 0.15) !important;
    border-radius: 16px !important;
    margin: 3rem 0 !important;
    padding: 24px 30px !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5) !important;
    direction: rtl !important;
    text-align: right !important;
    position: relative !important;
    overflow: hidden !important;
}

/* افکت هاله نور در پس‌زمینه فهرست */
.prose .ai-toc-box::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: var(--color-primary);
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
}

/* استایل تیتر فهرست مطالب (رفع ارور سئو) */
.prose .ai-toc-box h3,
.prose .ai-toc-box .toc-title {
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
    padding-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.prose .ai-toc-box h3::before { display: none !important; /* حذف دایره سبز قبلی از این بخش */ }

/* فعال‌سازی شماره‌گذاری اتوماتیک با CSS Counters */
.prose .ai-toc-box ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
    counter-reset: toc-counter !important; /* شروع شمارش */
}

.prose .ai-toc-box li {
    list-style: none !important;
    margin-bottom: 10px !important;
    padding-right: 0 !important; 
    counter-increment: toc-counter !important; /* افزایش شماره */
}
.prose .ai-toc-box li::before { display: none !important; }

/* لینک‌های فهرست */
.prose .ai-toc-box a {
    color: #a1a1aa !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important; /* لغو استایل لینک عادی متون */
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 8px 12px 8px 8px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
}

/* باکس شماره‌گذاری جذاب (بجای هشتگ و خط تیره) */
.prose .ai-toc-box a::before {
    content: counter(toc-counter) !important;
    background: rgba(0, 223, 130, 0.1) !important;
    color: var(--color-primary) !important;
    min-width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    transition: all 0.3s ease !important;
}

/* افکت Hover روی فهرست */
.prose .ai-toc-box a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.03) !important;
    transform: translateX(-5px) !important; 
}
.prose .ai-toc-box a:hover::before {
    background: var(--color-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 223, 130, 0.4) !important;
}

/* مخفی کردن فهرست‌های اضافی */
.ai-toc-box ~ .ai-toc-box { display: none !important; }

/* =========================================
   ۱۳. کدهای برنامه‌نویسی
   ========================================= */
.prose pre { 
    background-color: #0B111A !important; 
    padding: 1.5rem !important; 
    border-radius: 12px !important; 
    border: 1px solid #27272A !important; 
    font-family: var(--font-mono) !important; 
    font-size: 0.875rem !important; 
    text-align: left !important; 
    direction: ltr !important; 
    overflow-x: auto !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important;
}
.prose code { 
    background-color: rgba(255, 255, 255, 0.05) !important; 
    color: var(--color-primary) !important; 
    padding: 0.2rem 0.4rem !important; 
    border-radius: 6px !important; 
    font-size: 0.85em !important; 
    font-weight: bold;
}
  /* =========================================
   باکس پیشنهاد ویژه (CTA) داخل مقالات
   ========================================= */
.prose .article-cta-box {
    background: linear-gradient(145deg, #121214, #0B111A) !important;
    border: 1px solid rgba(0, 223, 130, 0.2) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin: 45px 0 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.prose .article-cta-content {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.prose .article-cta-icon {
    width: 55px !important;
    height: 55px !important;
    background: rgba(0, 223, 130, 0.1) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 223, 130, 0.2) !important;
    flex-shrink: 0 !important;
}

.prose .article-cta-icon span {
    font-size: 26px !important;
}

.prose .article-cta-text {
    display: flex !important;
    flex-direction: column !important;
}

.prose .article-cta-title {
    color: #fff !important;
    margin: 0 0 6px 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    border: none !important;
    padding: 0 !important;
}

.prose .article-cta-subtitle {
    color: #a1a1aa !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.prose .article-cta-btn {
    background: var(--color-primary, #00DF82) !important;
    color: #000 !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    box-shadow: 0 0 20px rgba(0, 223, 130, 0.3) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    border: none !important;
}

/* افکت جذاب با رفتن موس روی دکمه (Hover) */
.prose .article-cta-btn:hover {
    background: #00c572 !important;
    box-shadow: 0 0 30px rgba(0, 223, 130, 0.5) !important;
    transform: translateY(-2px) !important;
    color: #000 !important;
}
.ck-content mark, article mark, mark {
    background-color: rgba(245, 158, 11, 0.15) !important; /* پس‌زمینه زرد/نارنجی بسیار محو */
    color: #fbbf24 !important; /* رنگ متن طلایی */
    padding: 2px 6px !important;
    border-radius: 4px !important;
}
html {
    scroll-behavior: smooth;
}

/* AUDIT-2027: the `@layer utilities` block opened on line 47 was never closed.
   CSS auto-closes it at EOF, so nothing was visibly broken, but the file was
   unbalanced for every validator. Closed explicitly here — the visual result is
   byte-for-byte identical because the same rules stay inside the same layer. */
}