:root {
      /* ألوان فاتحة تناسب البلوج الحالي */
      --bg-page: #dbeafe;
      --bg-page-2: #eff6ff;
      --bg-card: #ffffff;
      --bg-soft: #f8fafc;
      --accent-cyan: #06b6d4;
      --accent-purple: #9333ea;
      --accent-yellow: #f59e0b;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-soft: rgba(148, 163, 184, 0.25);
      --radius-lg: 1.5rem;
      --radius-md: 1rem;
      --shadow-soft: 0 16px 36px rgba(148, 163, 184, 0.35);
      --shadow-glow: 0 0 0 1px rgba(191, 219, 254, 0.8), 0 0 35px rgba(56, 189, 248, 0.35);
      --transition-fast: 0.2s ease-out;
    }
    

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at top, var(--bg-page) 0, var(--bg-page-2) 45%, #f9fafb 100%);
      color: var(--text-main);
      line-height: 1.8;
    }

    .page-wrapper {
      min-height: 100vh;
      padding: 32px 16px 48px;
      display: flex;
      justify-content: center;
    }

    .article-shell {
      width: 100%;
      max-width: 1080px;
    }

    .article-shell header,
    .article-shell section {
      position: relative;
      isolation: isolate;
    }

    /* هيرو (بروشور علوي) */
    .hero-card {
      border-radius: 32px;
      padding: 24px 22px 22px;
      margin-bottom: 24px;
      background:
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.95), rgba(239, 246, 255, 0.98));
      border: 1px solid rgba(148, 163, 184, 0.3);
      box-shadow: var(--shadow-soft);
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr);
      gap: 24px;
      overflow: hidden;
    }

    @media (max-width: 800px) {
      .hero-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 16px 18px;
      }
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 12px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid rgba(148, 163, 184, 0.6);
      color: var(--text-muted);
      font-size: 13px;
    }

    .hero-pill span.dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    }
    /* حبة الهيرو في الوضع الداكن */
html.dark #articleRoot .hero-pill {
  background: rgba(15, 23, 42, 0.9) !important;   /* داكنة لكن شفافة شوي */
  border-color: rgba(51, 65, 85, 0.9) !important;
  color: var(--text-main);
}

html.dark #articleRoot .hero-pill span.dot {
  /* نترك التدرّج كما هو عشان تبقى منورة */
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}


    .hero-title {
      font-size: clamp(24px, 3vw, 30px);
      margin: 14px 0 8px;
      letter-spacing: 0.02em;
    }

    .hero-title span.highlight {
      background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      margin: 0 0 14px;
      font-size: 14px;
      color: var(--text-muted);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 14px;
    }

    .hero-meta span {
      padding: 4px 10px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.5);
    }
    /* شارات الهيرو في الوضع الداكن */
html.dark #articleRoot .hero-meta {
  color: var(--text-muted);
}

html.dark #articleRoot .hero-meta span {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-main);
}


    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .btn-main,
    .btn-ghost {
      appearance: none;
      border-radius: 999px;
      font-size: 14px;
      padding: 8px 18px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    }
    /* زر شبح في الوضع الداكن داخل المقال */
html.dark #articleRoot .btn-ghost {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(51, 65, 85, 0.95) !important;
  color: var(--text-main) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
}

html.dark #articleRoot .btn-ghost:hover {
  border-color: rgba(56, 189, 248, 0.9) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 1),
              0 0 25px rgba(56, 189, 248, 0.5);
}


    .btn-main {
      background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
      color: #f9fafb;
      font-weight: 600;
      box-shadow: 0 14px 28px rgba(56, 189, 248, 0.3);
    }

    .btn-main:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(56, 189, 248, 0.4);
    }

    .btn-ghost {
      background: #ffffff;
      color: var(--text-main);
      border: 1px solid rgba(148, 163, 184, 0.7);
    }

    .btn-ghost:hover {
      background: #f9fafb;
      border-color: rgba(148, 163, 184, 0.9);
      transform: translateY(-1px);
    }

    /* جانب الهيرو (إنفوغرافيك صغير) */
    .hero-side {
      position: relative;
      border-radius: 24px;
      padding: 16px 16px 14px;
      background: linear-gradient(135deg, #ffffff, #eff6ff);
      border: 1px solid rgba(148, 163, 184, 0.5);
      box-shadow: var(--shadow-glow);
      overflow: hidden;
    }

    .hero-side::before {
      content: "";
      position: absolute;
      inset: -80%;
      background:
        conic-gradient(from 180deg at 50% 50%, rgba(6, 182, 212, 0.18), transparent 32%, rgba(147, 51, 234, 0.15), transparent 65%, rgba(6, 182, 212, 0.15));
      opacity: 0.9;
      filter: blur(2px);
      z-index: -1;
      transform: translate3d(0, 0, 0);
    }

    .hero-side-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 13px;
    }

    .hero-side-badge {
      padding: 3px 9px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid rgba(148, 163, 184, 0.7);
      color: var(--accent-cyan);
    }

    .hero-side-chip {
      padding: 3px 9px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px dashed rgba(148, 163, 184, 0.7);
      color: var(--text-muted);
      font-size: 11px;
    }

    .hero-side-list {
      list-style: none;
      padding: 0;
      margin: 10px 0 0;
      font-size: 12px;
    }

    .hero-side-list li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 7px 0;
      border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    }

    .hero-side-list li:last-child {
      border-bottom: none;
    }

    .hero-side-label {
      color: var(--text-muted);
    }

    .hero-side-value {
      font-weight: 600;
      color: #0f172a;
    }
    /* جانب الهيرو في الوضع الداكن */
html.dark #articleRoot .hero-side {
  background: linear-gradient(135deg, #020617, #020617) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

html.dark #articleRoot .hero-side::before {
  opacity: 0.35; /* نقلل الوهج عشان ما يطلع مزعج على الخلفية الداكنة */
}

/* الهيدر الصغير داخل hero-side */
html.dark #articleRoot .hero-side-badge {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: var(--accent-cyan);
}

html.dark #articleRoot .hero-side-chip {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.7) !important;
  color: var(--text-main);
}

/* قائمة المعلومات */
html.dark #articleRoot .hero-side-list li {
  border-bottom-color: rgba(51, 65, 85, 0.9) !important;
}

html.dark #articleRoot .hero-side-label {
  color: var(--text-muted);
}

html.dark #articleRoot .hero-side-value {
  color: var(--text-main);
}


    /* بلوكات المقالة */
    .article-block {
      margin-bottom: 18px;
      border-radius: var(--radius-lg);
      padding: 18px 18px 16px;
      background: linear-gradient(135deg, #ffffff, var(--bg-soft));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow-soft);
    }

    .article-block-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .section-icon {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 10%, var(--accent-cyan), var(--accent-purple));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #f9fafb;
      font-size: 16px;
      box-shadow: 0 0 0 1px #e5e7eb, 0 0 30px rgba(56, 189, 248, 0.35);
      flex-shrink: 0;
    }

    .section-label {
      font-size: 11px;
      text-transform: uppercase;
      color: var(--accent-cyan);
      letter-spacing: 0.16em;
    }

    .section-title {
      margin: 0;
      font-size: 19px;
    }

    .section-lead {
      margin: 2px 0 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .article-block-body {
      font-size: 14px;
      color: var(--text-main);
    }

    .article-block-body p {
      margin: 0 0 10px;
    }

    .muted {
      color: var(--text-muted);
      font-size: 13px;
    }

    /* شبكة ميزات صغيرة */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    @media (max-width: 700px) {
      .features-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .feature-card {
      border-radius: var(--radius-md);
      padding: 10px 11px 9px;
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 13px;
      box-shadow: 0 10px 22px rgba(148, 163, 184, 0.25);
    }

    .feature-card h3 {
      margin: 0 0 4px;
      font-size: 14px;
    }

    .feature-card p {
      margin: 0;
      color: var(--text-muted);
    }

    /* عمودان */
    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
      gap: 16px;
    }

    @media (max-width: 800px) {
      .two-col {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .soft-card {
      border-radius: var(--radius-md);
      padding: 11px 12px;
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.32);
      font-size: 13px;
      box-shadow: 0 10px 22px rgba(148, 163, 184, 0.2);
    }

    .soft-card h3 {
      margin: 0 0 6px;
      font-size: 14px;
    }
    html.dark #articleRoot .soft-card {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-main);
}

html.dark #articleRoot .soft-card .muted {
  color: var(--text-muted);
}


    .check-list {
      margin: 6px 0;
      padding-right: 18px;
      font-size: 13px;
    }

    .check-list li {
      margin-bottom: 4px;
      position: relative;
    }

    .check-list li::before {
      content: "✔";
      position: absolute;
      right: -16px;
      top: 0;
      font-size: 11px;
      color: var(--accent-cyan);
    }

    /* خطوات (إنفوغرافيك رأسي) */
    .steps-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin-top: 8px;
    }

    .step-card {
      position: relative;
      border-radius: var(--radius-md);
      padding: 10px 12px 9px;
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.32);
      font-size: 13px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      overflow: hidden;
      box-shadow: 0 10px 22px rgba(148, 163, 184, 0.25);
    }

    .step-number {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #f9fafb;
      font-weight: 700;
      font-size: 13px;
      box-shadow: 0 0 0 1px #e5e7eb, 0 0 24px rgba(56, 189, 248, 0.4);
      margin-top: 2px;
    }

    .step-card h3 {
      margin: 0 0 4px;
      font-size: 14px;
    }

    .step-card p {
      margin: 0 0 4px;
    }

    .step-card ul {
      margin: 0 0 3px;
      padding-right: 18px;
    }

    .step-card li {
      margin-bottom: 2px;
    }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid rgba(148, 163, 184, 0.6);
      color: #0f172a;
    }

    /* نصائح */
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 8px;
    }

    @media (max-width: 900px) {
      .tips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 650px) {
      .tips-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .tip-card {
      border-radius: var(--radius-md);
      padding: 10px 11px;
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.3);
      font-size: 13px;
      box-shadow: 0 10px 22px rgba(148, 163, 184, 0.2);
    }

    .tip-card h3 {
      margin: 0 0 4px;
      font-size: 14px;
    }

    .tip-card p {
      margin: 0;
      color: var(--text-muted);
    }

    /* FAQ */
    .faq-list {
      margin-top: 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
    }

    details.faq-item {
      border-radius: var(--radius-md);
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.35);
      padding: 7px 10px;
      font-size: 13px;
      box-shadow: 0 10px 22px rgba(148, 163, 184, 0.2);
    }

    details.faq-item[open] {
      border-color: rgba(56, 189, 248, 0.9);
      box-shadow: 0 0 0 1px #e0f2fe, 0 0 26px rgba(56, 189, 248, 0.25);
    }

    details.faq-item summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--text-main);
    }

    details.faq-item summary::marker,
    details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-question {
      font-weight: 600;
      font-size: 13px;
    }

    .faq-toggle {
      font-size: 16px;
      color: var(--accent-cyan);
      transition: transform var(--transition-fast);
    }

    details.faq-item[open] .faq-toggle {
      transform: rotate(90deg);
    }

    details.faq-item p {
      margin: 6px 0 4px;
      color: var(--text-muted);
    }

    /* خاتمة / CTA */
    .conclusion-cta {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .badge-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 9px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid rgba(148, 163, 184, 0.7);
      font-size: 11px;
      color: var(--accent-yellow);
    }

    .badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--accent-yellow);
    }

    @media (max-width: 600px) {
      .article-block {
        padding: 16px 14px 12px;
      }
      .hero-card {
        padding: 18px 14px 16px;
      }
    }
    /* فهرس المحتوى – كرت أنيق + ترقيم تلقائي */
    #tocContainer {
      background: linear-gradient(135deg, #e0f2fe, #f5f3ff);
      border-radius: 18px;
      padding: 14px 20px 12px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10);

      /* 🔥 توسيع الصندوق وتوسيطه داخل عمود المحتوى */
      max-width: 880px;         /* تقدر تزودها أو تنقصها حسب عينك */
      width: 100%;
      margin: 0 auto 24px;      /* وسط أفقيًا + مسافة تحت */
    }

/* عنوان الفهرس */
    #tocContainer > h2 {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    #tocContainer > h2::before {
      content: "📚";
      font-size: 16px;
    }

    /* قائمة العناصر */
    #tocList {
      list-style: none;         /* إلغاء النِّقَط السوداء */
      margin: 6px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;

      counter-reset: toc;       /* نبدأ عدّاد الترقيم */
    }

    #tocList li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14px;
    }

    /* الرقم الدائري قبل كل عنصر */
    #tocList li::before {
      counter-increment: toc;
      content: counter(toc);

      min-width: 26px;
      height: 26px;
      border-radius: 999px;
      background: #ffffff;
      color: #0e7490;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
    }

    /* رابط العنوان */
    #tocList a {
      flex: 1;
      text-decoration: none;
      color: #0f172a;
      font-weight: 600;
      line-height: 1.5;
      transition: color 0.15s ease, transform 0.15s ease;
    }

    #tocList a:hover {
      color: #0ea5e9;
      transform: translateX(-2px);
    }

    /* على الشاشات الأوسع نعرضها كشبكة عمودين */
    @media (min-width: 768px) {
      #tocList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
      }
    }

    /* الوضع الداكن */
    html.dark #tocContainer {
      background: linear-gradient(135deg, #020617, #0b1120);
      border-color: rgba(51, 65, 85, 0.9);
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
    }

    html.dark #tocContainer > h2,
    html.dark #tocList a {
      color: #e5e7eb;
    }

    html.dark #tocList li::before {
      background: rgba(15, 23, 42, 0.95);
      color: #38bdf8;
    }

    /* سكرول ناعم داخل الصفحة */
    html {
      scroll-behavior: smooth;
    }
    /* نفس مزاج الوضع الداكن في المدونة الأساسية */
html.dark {
  /* خلفية الصفحة العامة */
  --bg-page: #10244d;   /* كحلي غامق جداً */
  --bg-page-2: #0b1220; /* نفس اللون عشان ما يطلع شطرنج */

  /* الكروت والصناديق */
  --bg-card: #10244d;   /* كرت غامق مثل كروت المدونة */
  --bg-soft: #0b1220;   /* خلفية ناعمة أفتح شوي داخل الكروت */

  /* النصوص */
  --text-main: #e6f1ff;   /* تقريباً text-slate-200 */
  --text-muted: #a5b4cd;  /* تقريباً text-slate-400 */

  /* الحدود والظلال */
  --border-soft: rgba(15, 23, 42, 0.85);
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.95);
  --shadow-glow: 0 0 0 1px rgba(56, 189, 248, 0.35),
                 0 0 40px rgba(56, 189, 248, 0.55);
}


/* ========== أوفررايد إضافي للكروت في الوضع الداكن ========== */

/* الهيرو العلوي + الإنفوغرافيك الجانبي */
html.dark #articleRoot .hero-card,
html.dark #articleRoot .hero-side {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* بلوكات المقال الرئيسية */
html.dark #articleRoot .article-block {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* كروت المزايا الصغيرة */
html.dark #articleRoot .feature-card {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* خطوات الاستخدام + كروت النصائح */
html.dark #articleRoot .step-card,
html.dark #articleRoot .tip-card,
html.dark #articleRoot .cta-card {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* عناصر الـ FAQ (مفتوحة ومغلقة) */
html.dark #articleRoot details.faq-item,
html.dark #articleRoot details.faq-item[open] {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}
/* كروت داخلية داخل بلوكات المقال في الوضع الداكن */
html.dark #articleRoot .article-block > div,
html.dark #articleRoot .article-block .inner,
html.dark #articleRoot .article-block .card-inner,
html.dark #articleRoot .article-block .side-card {
  background: var(--bg-soft) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* 🌟 تصميم موحّد فخم لقسم "مقالات أو أدوات ذات صلة" 🌟 */

/* الحاوية العامة */
.related-tools,
#relatedArticlesSection,
.related-box {
  max-width: 1070px;
  margin: 0px auto 0px;
  padding: 24px 24px 30px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 15px 45px rgba(148, 163, 184, 0.25);
  text-align: right;
  transition: background 0.3s, box-shadow 0.3s;
}

/* العنوان */
.related-tools h3,
#relatedArticlesSection h3,
.related-box h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}

.related-tools h3::before,
#relatedArticlesSection h3::before,
.related-box h3::before {
  content: "✨";
  font-size: 22px;
}

/* الشبكة */
.related-tools-grid,
#relatedArticles,
.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* الكرت */
.related-tools .rel-card,
#relatedArticles .rel-card,
.related-list .rel-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(148, 163, 184, 0.25);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.related-tools .rel-card:hover,
#relatedArticles .rel-card:hover,
.related-list .rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(6, 182, 212, 0.35);
  border-color: rgba(6, 182, 212, 0.6);
}

/* الصورة */
.rel-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

/* النصوص */
.rel-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 12px 14px 4px;
  color: var(--text-main);
}

.rel-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 14px 10px;
}

/* الزر */
.rel-card a {
  align-self: flex-start;
  margin: 0 0 14px 14px;
  text-decoration: none;
  font-size: 13px;
  border-radius: 999px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff;
  box-shadow: 0 6px 14px rgba(56, 189, 248, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rel-card a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(56, 189, 248, 0.55);
}

/* 🌙 الوضع الداكن */
html.dark .related-tools,
html.dark #relatedArticlesSection,
html.dark .related-box {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

html.dark .rel-card {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

html.dark .rel-card h4 {
  color: #e5e7eb;
}

html.dark .rel-card p {
  color: #9ca3af;
}
/* 🔧 إصلاح اختفاء النصوص في قسم "مقالات ذات صلة" في الوضع الداكن */

/* لون الكروت في الوضع الداكن */
html.dark #relatedArticles .rel-card,
html.dark .related-tools .rel-card,
html.dark .related-list .rel-card {
  background: #020617 !important; /* غامق واضح */
  border-color: rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75) !important;
}

/* ألوان العناوين والوصف */
html.dark #relatedArticles .rel-card h4,
html.dark .related-tools .rel-card h4,
html.dark .related-list .rel-card h4 {
  color: #e5e7eb !important;
}

html.dark #relatedArticles .rel-card p,
html.dark .related-tools .rel-card p,
html.dark .related-list .rel-card p {
  color: #9ca3af !important;
  opacity: 0.96;
}

/* زر "اقرأ الآن" يبقى نصه أبيض */
html.dark #relatedArticles .rel-card a,
html.dark .related-tools .rel-card a,
html.dark .related-list .rel-card a {
  color: #ffffff !important;
}
/* الزر – مع إزاحة عن الحواف يميناً ويساراً */
.rel-card a {
  align-self: flex-start;
  margin: 0 14px 14px 14px;  /* top right bottom left */
  text-decoration: none;
  font-size: 13px;
  border-radius: 999px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff;
  box-shadow: 0 6px 14px rgba(56, 189, 248, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}



/* خلفية ناعمة موحّدة في الوضع الداكن لصفحات المقال */
html.dark body {
  background:
    radial-gradient(circle at 50% -20%, #0b1120 0, #020617 55%, #020617 100%);
  background-attachment: fixed;
}
/* خلفية ناعمة موحّدة في الوضع الفاتح لصفحات المقال */
html:not(.dark) body {
  background:
    radial-gradient(circle at 50% -20%, #e0f2fe 0, #eff6ff 40%, #f9fafb 75%, #f1f5f9 100%);
  background-attachment: fixed;
}