/*
====================================================================
EDUCATIONAL DESIGN SYSTEM — style.css
نسخه: 3.0 (Professional / Template-Driven Edition)
هدف: قالب یکدست، حرفه‌ای، واکنش‌گرا و «الگو-محور» برای درسنامه‌های IT

فلسفه‌ی نسخه‌ی ۳:
- هرچیزی که تکرار می‌شود، به یک کلاس/متغیر تبدیل شده تا در HTML فقط
  چند کلاس بنویسی و بقیه (آیکون، رنگ، عنوان جعبه، جهت متن) خودکار
  توسط CSS ساخته شود.
- برای هر «نوع جعبه‌ی آموزشی» فقط کافیست کلاس آن را به div بدهی؛
  آیکون و عنوان به‌صورت خودکار با ::before چاپ می‌شود (نیازی به
  تایپ دستی ایموجی نیست، مگر بخواهی override کنی).
- بلاک کد به‌صورت کامل حرفه‌ای شده: هایلایت خودکار سینتکس (با Prism.js)،
  دکمه‌ی کپی، شماره خط، اسکرول‌بار سفارشی و برچسب زبان خودکار.
- جهت‌چینی (bidi) کلمات/عبارات انگلیسی داخل متن فارسی به‌صورت کلاس
  آماده (.en) مدیریت می‌شود.

راهنمای سریع تغییر:
1) رنگ‌های اصلی و پالت محتوا → بخش «۰۱. DESIGN TOKENS»
2) عرض صفحه                  → --layout-max-width
3) فاصله‌ها                   → --space-*
4) گوشه‌ها و سایه‌ها          → --radius-* / --shadow-*
5) رنگ هر نوع جعبه‌ی آموزشی   → بخش «۱۳. CONTENT BOX SYSTEM»
6) دکمه‌ها                     → بخش «۱۶. BUTTON SYSTEM»
7) بلاک کد و سینتکس‌هایلایت    → بخش «۱۴. CODE BLOCK SYSTEM»

راهنمای استفاده در HTML — به فایل template.html و کامنت‌های همین فایل مراجعه کن.
====================================================================
*/

/* ================================================================
   ۰۱. DESIGN TOKENS — مرکز کنترل کل سیستم طراحی
   ================================================================ */
:root {
  /* ----- Layout ----- */
  --layout-max-width: 1380px;
  --layout-width: 94%;
  --content-readable-width: 1080px;

  /* ----- Typography ----- */
  --font-fa: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-ui: var(--font-fa);
  --font-en: "Segoe UI", "Inter", system-ui, -apple-system, Arial, sans-serif;
  --font-code: "Fira Code", Consolas, "Cascadia Code", "Courier New", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: clamp(36px, 5vw, 62px);

  /* ----- Main colors ----- */
  --color-bg-1: #020812;
  --color-bg-2: #071a2d;
  --color-bg-3: #0b2a43;
  --color-surface: rgba(10, 31, 50, .94);
  --color-surface-soft: rgba(255, 255, 255, .045);
  --color-surface-hover: rgba(255, 255, 255, .075);

  --color-text: #eaf2f8;
  --color-text-soft: #c3d0dc;
  --color-text-muted: #8fa4b7;
  --color-white: #ffffff;

  --color-primary: #4fc3f7;
  --color-primary-bright: #8bdcff;
  --color-gold: #ffd54f;
  --color-success: #42d392;
  --color-danger: #ff6673;
  --color-warning: #ffad42;
  --color-purple: #b47cff;
  --color-info: #5aa9ff;

  /* ----- Content-box colors (هر نوع جعبه‌ی آموزشی یک رنگ) ----- */
  --color-note: #4fc3f7;
  --color-success-box: #42d392;
  --color-warning-box: #ffad42;
  --color-danger-box: #ff6673;
  --color-question: #b47cff;
  --color-example: #5aa9ff;
  --color-important: #ff8fab;
  --color-quiz: #64ffda;
  --color-output: #64ffda;
  --color-resource: #4fc3f7;
  --color-code: #64ffda;
  --color-link: #8bdcff;

  /* ----- Radius ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-pill: 999px;

  /* ----- Spacing ----- */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 30px;
  --space-7: 40px;
  --space-8: 52px;
  --space-9: 70px;

  /* ----- Shadows ----- */
  --shadow-sm: 0 5px 18px rgba(0, 0, 0, .18);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .24);
  --shadow-lg: 0 18px 55px rgba(0, 0, 0, .34);
  --shadow-glow: 0 0 35px rgba(79, 195, 247, .10);

  /* ----- Motion ----- */
  --ease: cubic-bezier(.2, .75, .25, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
}


/* ================================================================
   ۰۲. RESET & BASE — پایه مشترک تمام درسنامه‌ها
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background:
    radial-gradient(circle at 8% 8%, rgba(79, 195, 247, .10), transparent 24%),
    radial-gradient(circle at 92% 82%, rgba(255, 213, 79, .07), transparent 24%),
    linear-gradient(135deg, var(--color-bg-1), var(--color-bg-2) 48%, var(--color-bg-3));
  font-family: var(--font-fa);
  font-size: var(--text-md);
  line-height: 2;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: #06111d;
  background: var(--color-gold);
}

a {
  color: var(--color-link);
  text-underline-offset: 4px;
  transition:
    color var(--duration-fast) var(--ease),
    opacity var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--color-gold);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(139, 220, 255, .75);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

strong {
  color: var(--color-white);
}

img {
  max-width: 100%;
  display: block;
}


/* ================================================================
   ۰۳. BIDI & LANGUAGE HANDLING — جهت‌چینی صحیح انگلیسی داخل فارسی
   ---------------------------------------------------------------
   استفاده: هر جا داخل متن فارسی یک واژه/عبارت انگلیسی (اسم ابزار،
   دستور، مخفف و ...) می‌آید، آن را داخل <span class="en"> بگذار:

       ...با استفاده از <span class="en">Git</span> می‌توانی...

   این کار باعث می‌شود واژه‌ی انگلیسی همیشه چپ‌به‌راست و با فونت
   لاتین درست نمایش داده شود، حتی وسط جمله‌ی راست‌به‌چپ فارسی، و
   ترتیب کاراکترها و علائم نگارشی (مثل پرانتز یا اعداد) به‌هم نریزد.
   ================================================================ */
.en,
[lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-en);
  letter-spacing: 0;
}

/* برای رشته‌های عددی/کد کوتاه وسط متن فارسی (نسخه، پورت، IP و ...) */
.ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* کلید صفحه‌کلید (میان‌بُرها) — مثلاً <kbd>Ctrl</kbd> + <kbd>C</kbd> */
kbd {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--color-text);
  background: #0c2338;
  font-family: var(--font-en);
  font-size: .85em;
  font-weight: 600;
}


/* ================================================================
   ۰۴. READING PROGRESS — نوار پیشرفت بدون JavaScript
   ================================================================ */
.reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 4px;
  pointer-events: none;
  background: rgba(255, 255, 255, .04);
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: right center;
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  animation: reading-progress linear;
  animation-timeline: scroll();
}

@keyframes reading-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* ================================================================
   ۰۵. TOP BAR — ناوبری سریع و ثابت
   ================================================================ */
.topbar {
  position: sticky;
  top: 12px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-pill);
  background: rgba(4, 16, 28, .72);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
}

.topbar__brand {
  color: var(--color-white);
  font-weight: 800;
  text-decoration: none;
}

.topbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topbar__links a {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  text-decoration: none;
}

.topbar__links a:hover {
  color: var(--color-white);
  background: rgba(79, 195, 247, .10);
}


/* ================================================================
   ۰۶. PAGE CONTAINER — عرض اصلی صفحه
   ================================================================ */
.container {
  width: var(--layout-width);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-9);
}


/* ================================================================
   ۰۷. HERO — هدر اصلی تمام درسنامه‌ها
   ================================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 7vw, 82px) clamp(22px, 5vw, 60px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-2xl);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(7, 26, 45, .98), rgba(11, 38, 61, .96), rgba(16, 47, 70, .98));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}

.hero::before {
  width: 360px;
  height: 360px;
  top: -220px;
  right: -80px;
  background: rgba(255, 213, 79, .09);
}

.hero::after {
  width: 300px;
  height: 300px;
  bottom: -190px;
  left: -90px;
  background: rgba(79, 195, 247, .10);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(255, 213, 79, .28);
  border-radius: var(--radius-pill);
  color: var(--color-gold);
  background: rgba(255, 213, 79, .08);
  font-weight: 700;
  transition: transform var(--duration-normal) var(--ease);
}

.hero-label:hover {
  transform: translateY(-3px) scale(1.02);
}

.hero h1 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.5px;
}

.hero h1 span {
  color: var(--color-gold);
  text-shadow: 0 0 28px rgba(255, 213, 79, .16);
}

.hero-subtitle {
  max-width: 1000px;
  margin: var(--space-5) auto 0;
  color: var(--color-text-soft);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 2.05;
}

.hero-badge {
  display: inline-flex;
  margin-top: var(--space-6);
  padding: 9px 16px;
  border: 1px solid rgba(79, 195, 247, .20);
  border-radius: var(--radius-md);
  color: var(--color-primary-bright);
  background: rgba(79, 195, 247, .08);
}

/* ----- ردیف نشان‌های سطح/دسته‌بندی درس (اختیاری، زیر هیرو) ----- */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.badge {
  --badge-color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--badge-color) 35%, transparent);
  border-radius: var(--radius-pill);
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.badge.gold    { --badge-color: var(--color-gold); }
.badge.green   { --badge-color: var(--color-success); }
.badge.red     { --badge-color: var(--color-danger); }
.badge.purple  { --badge-color: var(--color-purple); }
.badge.orange  { --badge-color: var(--color-warning); }
.badge.blue    { --badge-color: var(--color-info); }


/* ================================================================
   ۰۸. TABLE OF CONTENTS — فهرست تعاملی
   ================================================================ */
.toc {
  margin-top: var(--space-5);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-right: 5px solid var(--color-gold);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(11, 38, 61, .95), rgba(7, 27, 44, .96));
  box-shadow: var(--shadow-md);
}

.toc h2 {
  margin: 0 0 var(--space-4);
  color: var(--color-white);
  font-size: var(--text-2xl);
}

.toc ol {
  margin: 0;
  padding-right: 28px;
}

.toc li {
  margin: 5px 0;
}

.toc a {
  display: inline-block;
  color: var(--color-primary-bright);
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.toc a:hover {
  color: var(--color-gold);
  transform: translateX(-5px);
}


/* ================================================================
   ۰۹. LESSON SECTION — اسکلت اصلی هر بخش
   ---------------------------------------------------------------
   استفاده:
     <section class="section [gold|green|red|purple|orange|blue]" id="...">
       <h2 class="section-title">🔧 عنوان بخش</h2>
       ...
     </section>
   رنگ نوار کناری هر بخش = دسته‌بندی بصری آن بخش (مفهومی/هشدار/مثال و...)
   ================================================================ */
.section {
  position: relative;
  margin-top: var(--space-5);
  padding: clamp(24px, 3.5vw, 38px);
  border: 1px solid rgba(255, 255, 255, .075);
  border-right: 5px solid var(--color-primary);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(11, 38, 61, .95), rgba(7, 27, 44, .96));
  box-shadow: var(--shadow-md);
  transition:
    transform var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    box-shadow var(--duration-normal) var(--ease);
}

.section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.section.gold   { border-right-color: var(--color-gold); }
.section.green  { border-right-color: var(--color-success); }
.section.red    { border-right-color: var(--color-danger); }
.section.purple { border-right-color: var(--color-purple); }
.section.orange { border-right-color: var(--color-warning); }
.section.blue   { border-right-color: var(--color-info); }

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-5);
  color: var(--color-white);
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 850;
  line-height: 1.6;
}

.section h3 {
  margin: var(--space-7) 0 var(--space-2);
  color: var(--color-white);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.7;
}

.section h3::first-letter {
  color: var(--color-primary);
}

.section p,
.section li {
  color: var(--color-text-soft);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 2.15;
}

.section p {
  margin: 12px 0;
}

.section ul,
.section ol {
  margin: 15px 0;
  padding-right: 30px;
}


/* ================================================================
   ۱۰. INLINE LINKS & TEXT UTILITIES
   ================================================================ */
.inline-link {
  color: var(--color-primary-bright);
  font-weight: 700;
  text-decoration: underline;
}

.inline-link:hover {
  color: var(--color-gold);
}

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

blockquote {
  margin: var(--space-5) 0;
  padding: 16px 20px;
  border-right: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  background: rgba(255, 213, 79, .06);
}


/* ================================================================
   ۱۱. LESSON IMAGE — قاب شیک برای تصاویر (لینک عمومی گوگل‌درایو و ...)
   ---------------------------------------------------------------
   کافیست لینک عمومی تصویر (مثلاً لینک اشتراک‌گذاری گوگل‌درایو) را در
   src بگذاری؛ خودِ تصویر با یک قاب شیشه‌ای/شیک نمایش داده می‌شود.
   کپشن (figcaption) اختیاری است.

   حالت ۱ — درون‌متنی (پیش‌فرض): داخل یک .section، بین دو پاراگراف
   می‌آید و به عرض همان بخش محدود می‌ماند:

     <p>...یک پاراگراف...</p>
     <figure class="lesson-image">
       <img src="LINK_تصویر" alt="توضیح کوتاه برای دسترس‌پذیری" loading="lazy" />
       <figcaption>توضیح زیر تصویر (اختیاری)</figcaption>
     </figure>
     <p>...ادامه‌ی متن بعد از تصویر...</p>

   حالت ۲ — مستقل/تمام‌عرض: خارج از کادر گام‌ها، مستقیماً زیر
   </section> و قبل از section بعدی در .container قرار می‌گیرد؛
   مثل یک کارت مستقل بین دو گام:

     </section>

     <figure class="lesson-image lesson-image--full">
       <img src="LINK_تصویر" alt="..." loading="lazy" />
       <figcaption>...</figcaption>
     </figure>

     <section class="section" id="...">

   نکته: اگر می‌خواهی با کلیک روی تصویر، نسخه‌ی بزرگ آن در تب جدید باز
   شود، کافیست img را داخل یک <a href="همان لینک" target="_blank">
   بگذاری؛ قاب و رفتار هاور به‌طور خودکار درست کار می‌کند.
   ================================================================ */
.lesson-image {
  margin: var(--space-6) auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: var(--shadow-md);
  transition:
    transform var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    box-shadow var(--duration-normal) var(--ease);
}

.lesson-image:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 195, 247, .30);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.lesson-image a {
  display: block;
  line-height: 0;
}

.lesson-image img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  background: #06131f; /* پس‌زمینه‌ی تمیز تا زمان لود شدن یا اگر لینک شکست بخورد */
}

.lesson-image figcaption {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, .12);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.9;
  text-align: center;
}

/* حالت مستقل / تمام‌عرض — خارج از کادر گام‌ها، هم‌تراز با section/hero/toc */
.lesson-image--full {
  padding: 20px;
  border-radius: var(--radius-2xl);
}

.lesson-image--full img {
  border-radius: var(--radius-xl);
}


/* ================================================================
   ۱۲. INLINE CODE — کد کوتاه وسط متن
   ================================================================ */
code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255, 213, 79, .13);
  border-radius: var(--radius-sm);
  color: var(--color-gold);
  background: #081a2a;
  font-family: var(--font-code);
  font-size: .91em;
  font-weight: 650;
}

/* کدِ داخل بلاک کد نباید استایل inline code را بگیرد */
.code-block pre code {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-weight: 400;
}


/* ================================================================
   ۱۳. CONTENT BOX SYSTEM — استاندارد جعبه‌های آموزشی
   ---------------------------------------------------------------
   کلاس پایه: .box   (هر جعبه باید هم .box و هم یکی از انواع زیر را داشته باشد)

     نوع          آیکون + عنوان خودکار      کاربرد
     -----------  -----------------------   ---------------------------------
     .note        💡 نکته                   هر نوع نکته‌ی تکمیلی/توضیحی
                                             (شامل ترفند، تایید نتیجه، تعریف
                                             مفهوم و ...؛ همه زیر یک عنوان)
     .warning     ⚠️ هشدار                  احتیاط، جلوگیری از اشتباه رایج
     .danger      🚨 خطا / خطر               خطر جدی، از دست رفتن داده و ...
     .question    ❓ سؤال                    سؤال مطرح‌شده در متن
     .example     🧪 مثال                    مثال عملی
     .important   📌 مهم                    نکته‌ای که نباید فراموش شود
     .quiz        📝 آزمون خودت              تمرین/سؤال خودآزمایی
     .solution    🗝️ پاسخ                   پاسخ تمرین (معمولاً داخل details)
     .output      🖥️ خروجی                  خروجی اجرای کد/دستور
     .resource    📚 منبع بیشتر              لینک یا منبع تکمیلی
     .success     ✅ موفقیت                  پیام موفقیت‌آمیز، تبریک، پایان مرحله

   استفاده‌ی ساده (آیکون/عنوان خودکار):
     <div class="box note"><p>متن نکته...</p></div>

   بازنویسی عنوان (اختیاری):
     <div class="box note" data-title="💡 نکته‌ی امنیتی"><p>...</p></div>
   ================================================================ */
.box {
  --box-color: var(--color-note);
  --box-bg: rgba(79, 195, 247, .08);
  position: relative;
  margin-top: var(--space-5);
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-right: 4px solid var(--box-color);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: var(--box-bg);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-lg);
  line-height: 2;
  transition:
    transform var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease);
}

.box:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .065);
}

.box > *:first-child { margin-top: 0; }
.box > *:last-child { margin-bottom: 0; }

.box::before {
  display: block;
  margin-bottom: 8px;
  color: var(--box-color);
  font-size: var(--text-md);
  font-weight: 800;
}

.box.note      { --box-color: var(--color-note);      --box-bg: rgba(79, 195, 247, .08); }
.box.note::before      { content: "💡 نکته"; }

.box.warning   { --box-color: var(--color-warning-box); --box-bg: rgba(255, 173, 66, .09); }
.box.warning::before   { content: "⚠️ هشدار"; }

.box.danger    { --box-color: var(--color-danger-box); --box-bg: rgba(255, 102, 115, .09); }
.box.danger::before    { content: "🚨 خطا / خطر"; }

.box.question  { --box-color: var(--color-question);  --box-bg: rgba(180, 124, 255, .08); }
.box.question::before  { content: "❓ سؤال"; }

.box.example   { --box-color: var(--color-example);   --box-bg: rgba(90, 169, 255, .08); }
.box.example::before   { content: "🧪 مثال"; }

.box.important { --box-color: var(--color-important); --box-bg: rgba(255, 143, 171, .08); }
.box.important::before { content: "📌 مهم"; }

.box.quiz      { --box-color: var(--color-quiz);      --box-bg: rgba(100, 255, 218, .07); }
.box.quiz::before      { content: "📝 آزمون خودت"; }

.box.solution  { --box-color: var(--color-success-box); --box-bg: rgba(66, 211, 146, .08); }
.box.solution::before  { content: "🗝️ پاسخ"; }

.box.output    { --box-color: var(--color-output);    --box-bg: rgba(100, 255, 218, .06); }
.box.output::before    { content: "🖥️ خروجی"; }

.box.resource  { --box-color: var(--color-resource);  --box-bg: rgba(79, 195, 247, .08); }
.box.resource::before  { content: "📚 منبع بیشتر"; }

.box.success   { --box-color: var(--color-success-box); --box-bg: rgba(66, 211, 146, .08); }
.box.success::before   { content: "✅ موفقیت"; }

/* override دستی عنوان با data-title (اولویت با این است) */
.box[data-title]::before { content: attr(data-title); }


/* ================================================================
   ۱۴. CODE BLOCK SYSTEM — بلاک کد حرفه‌ای (Python و بقیه زبان‌ها)
   ---------------------------------------------------------------
   ساختار HTML:

     <div class="code-block" data-lang="python">
       <div class="code-block__header">
         <span class="code-block__lang"></span>
         <button class="copy-code" type="button">📋 کپی</button>
       </div>
       <pre class="line-numbers"><code class="language-python">
   def greet(name):
       print(f"سلام {name}!")
       </code></pre>
     </div>

   نکات مهم:
   - برچسب زبان (نام + آیکون) به‌صورت خودکار از روی data-lang ساخته
     می‌شود؛ کافیست <span class="code-block__lang"></span> خالی بماند.
   - تورفتگی (indentation) کد پایتون همان چیزی‌ست که داخل تگ <code>
     می‌نویسی (فاصله/Tab واقعی) — چون white-space:pre رعایت می‌شود.
   - رنگ‌آمیزی خودکار کلمات کلیدی با کتابخانه‌ی سبک Prism.js انجام
     می‌شود (در HTML لینک شده)؛ این فایل CSS فقط «پوسته‌ی» رنگی
     هم‌راستا با پالت سایت را به توکن‌های Prism می‌دهد.
   - زبان‌های پشتیبانی‌شده برای برچسب خودکار: python, bash, html,
     css, javascript, json, yaml, sql — هر زبان دیگری هم کار می‌کند،
     فقط برچسبش عمومی («کد») نمایش داده می‌شود مگر خودت با data-title
     آن را ست کنی.
   ================================================================ */
.code-block {
  --lang-color: var(--color-code);
  position: relative;
  margin: var(--space-5) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-md);
  background: #020b14;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.code-block:hover {
  border-color: color-mix(in srgb, var(--lang-color) 35%, transparent);
}

.code-block[data-lang="python"]     { --lang-color: #ffd54f; }
.code-block[data-lang="bash"]       { --lang-color: #42d392; }
.code-block[data-lang="shell"]      { --lang-color: #42d392; }
.code-block[data-lang="html"]       { --lang-color: #ff8fab; }
.code-block[data-lang="css"]        { --lang-color: #5aa9ff; }
.code-block[data-lang="javascript"] { --lang-color: #ffd54f; }
.code-block[data-lang="json"]       { --lang-color: #b47cff; }
.code-block[data-lang="yaml"]       { --lang-color: #b47cff; }
.code-block[data-lang="sql"]        { --lang-color: #4fc3f7; }

/* هدر بلاک کد: برچسب زبان (راست) + دکمه کپی (چپ) */
.code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
}

.code-block__lang {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--lang-color);
  font-family: var(--font-code);
  font-size: var(--text-sm);
  font-weight: 700;
}

.code-block__lang::before { content: "📄 کد"; }
.code-block[data-lang="python"] .code-block__lang::before     { content: "🐍 Python"; }
.code-block[data-lang="bash"] .code-block__lang::before       { content: "💻 Bash / Terminal"; }
.code-block[data-lang="shell"] .code-block__lang::before      { content: "💻 Shell"; }
.code-block[data-lang="html"] .code-block__lang::before       { content: "🌐 HTML"; }
.code-block[data-lang="css"] .code-block__lang::before        { content: "🎨 CSS"; }
.code-block[data-lang="javascript"] .code-block__lang::before { content: "⚙️ JavaScript"; }
.code-block[data-lang="json"] .code-block__lang::before       { content: "🗂️ JSON"; }
.code-block[data-lang="yaml"] .code-block__lang::before       { content: "📄 YAML"; }
.code-block[data-lang="sql"] .code-block__lang::before        { content: "🗄️ SQL"; }
.code-block[data-title] .code-block__lang::before             { content: attr(data-title); }

.code-block .copy-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  background: rgba(255, 255, 255, .04);
  font-family: var(--font-fa);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.code-block .copy-code:hover {
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--lang-color) 45%, transparent);
  background: color-mix(in srgb, var(--lang-color) 14%, transparent);
}

.code-block .copy-code.is-copied {
  color: #06111d;
  border-color: var(--color-success);
  background: var(--color-success);
}

/* بدنه‌ی کد */
.code-block pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  font-family: var(--font-code);
  font-size: 15px;
  line-height: 1.85;
  white-space: pre;
  tab-size: 4;
}

.code-block pre::-webkit-scrollbar {
  height: 8px;
}

.code-block pre::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
}

.code-block pre::-webkit-scrollbar-track {
  background: transparent;
}

/* شماره‌گذاری خط (پلاگین line-numbers از Prism.js) — هم‌رنگ با پالت سایت */
.code-block pre.line-numbers {
  padding-left: 3.6em;
}

.code-block .line-numbers-rows {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.code-block .line-numbers-rows > span::before {
  color: rgba(255, 255, 255, .22);
}

/* بلاک بدون هایلایت (خروجی ترمینال ساده و ...) */
.code-block[data-lang="plaintext"] pre,
.code-block:not([data-lang]) pre {
  color: var(--color-text-soft);
}

/* --- پوسته‌ی رنگی Prism.js هم‌راستا با پالت سایت (Token Theme) --- */
.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.doctype,
.code-block .token.cdata {
  color: var(--color-text-muted);
  font-style: italic;
}

.code-block .token.keyword,
.code-block .token.operator.arrow,
.code-block .token.important {
  color: var(--color-gold);
}

.code-block .token.string,
.code-block .token.char,
.code-block .token.attr-value {
  color: var(--color-success);
}

.code-block .token.function,
.code-block .token.method {
  color: var(--color-primary-bright);
}

.code-block .token.class-name,
.code-block .token.builtin,
.code-block .token.decorator {
  color: var(--color-purple);
}

.code-block .token.number,
.code-block .token.boolean,
.code-block .token.constant {
  color: var(--color-info);
}

.code-block .token.punctuation,
.code-block .token.operator {
  color: var(--color-text-soft);
}

.code-block .token.tag,
.code-block .token.selector {
  color: var(--color-danger);
}

.code-block .token.attr-name,
.code-block .token.property {
  color: var(--color-warning);
}

.code-block .token.variable,
.code-block .token.parameter {
  color: var(--color-text);
}


/* ================================================================
   ۱۵. LEGACY .command — سازگاری با درسنامه‌های قدیمی‌تر
   (برای درسنامه‌های جدید از .code-block استفاده کن)
   ================================================================ */
.command {
  position: relative;
  margin: var(--space-5) auto;
  padding: 17px 20px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-md);
  background: #020b14;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .24);
  transition:
    transform var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.command:hover {
  transform: translateY(-2px);
  border-color: rgba(100, 255, 218, .28);
}

.command code {
  display: block;
  padding: 0;
  border: 0;
  color: var(--color-code);
  background: transparent;
  font-size: 16px;
  white-space: pre;
}


/* ================================================================
   ۱۶. BUTTON SYSTEM — دکمه‌های لینک‌دار
   ================================================================ */
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 750;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease),
    box-shadow var(--duration-normal) var(--ease),
    filter var(--duration-normal) var(--ease);
}

.btn:hover {
  color: var(--color-white);
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-md);
  filter: brightness(1.08);
}

.btn-blue    { background: #0878e8; }
.btn-dark    { background: #17191c; }
.btn-green   { background: #269b50; }
.btn-red     { background: #cf3445; }
.btn-vscode  { background: #0879bd; }
.btn-edx     { background: #0a55c9; }
.btn-purple  { background: #7547b5; }
.btn-orange  { background: #dc8a08; }
.telegram    { background: #229ed9; }
.instagram   { background: linear-gradient(45deg, #833ab4, #c13584, #e1306c, #f77737, #fcaf45); }


/* ================================================================
   ۱۷. CHECKLIST — چک‌لیست‌های قابل اسکن
   ================================================================ */
.checklist {
  list-style: none !important;
  padding-right: 0 !important;
}

.checklist li {
  position: relative;
  padding: 9px 15px;
  margin: 8px 0;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  transition:
    transform var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.checklist li:hover {
  transform: translateX(-5px);
  border-color: rgba(66, 211, 146, .25);
  background: rgba(66, 211, 146, .07);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border: 1px solid rgba(79, 195, 247, .30);
  border-radius: 50%;
  color: var(--color-primary-bright);
  background: rgba(79, 195, 247, .15);
  font-weight: 800;
}


/* ================================================================
   ۱۸. INFO CARDS — کارت‌های مقایسه‌ای و مفهومی
   ================================================================ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--space-5);
}

.info-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.info-card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    background var(--duration-normal) var(--ease);
}

.info-card:hover {
  transform: translateY(-5px);
  border-color: rgba(79, 195, 247, .25);
  background: var(--color-surface-hover);
}

.info-card h4 {
  margin: 0 0 8px;
  color: var(--color-gold);
  font-size: 18px;
}

.info-card p {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-soft);
}


/* ================================================================
   ۱۹. TABLE SYSTEM — جداول آموزشی
   ================================================================ */
.table-scroll {
  margin-top: var(--space-5);
  overflow-x: auto;
  border-radius: var(--radius-md);
}

table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  direction: ltr;
  overflow: hidden;
  border: 1px solid rgba(255, 213, 79, .55);
  border-radius: var(--radius-md);
}

th {
  padding: 14px;
  color: var(--color-gold);
  background: rgba(66, 211, 146, .28);
  font-size: 15px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 213, 79, .55);
  border-right: 1px solid rgba(255, 213, 79, .20);
}

td {
  padding: 12px;
  color: var(--color-text-soft);
  font-size: 15px;
  font-weight: 650;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  border-right: 1px solid rgba(255, 255, 255, .05);
  transition: background var(--duration-fast) var(--ease);
}

tr:last-child td {
  border-bottom: 0;
}

tr:hover td {
  background: rgba(255, 213, 79, .07);
}


/* ================================================================
   ۲۰. DETAILS / ACCORDION — تعامل بدون JavaScript
   برای سوال، جواب، تمرین و بخش‌های قابل باز و بسته شدن.
   ================================================================ */
details {
  margin-top: var(--space-5);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  transition: border-color var(--duration-fast) var(--ease);
}

details:hover {
  border-color: rgba(79, 195, 247, .28);
}

details > *:not(summary) {
  padding: 0 18px 16px;
}

summary {
  cursor: pointer;
  padding: 15px 18px;
  color: var(--color-white);
  font-weight: 750;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "＋";
  display: inline-block;
  margin-left: 8px;
  color: var(--color-gold);
  transition: transform var(--duration-fast) var(--ease);
}

details[open] summary::before {
  transform: rotate(45deg);
}


/* ================================================================
   ۲۱. COMMUNITY / FOOTER — انتهای درسنامه
   ================================================================ */
.social {
  margin-top: var(--space-7);
  padding: 35px 30px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-xl);
  text-align: center;
  background: linear-gradient(135deg, rgba(15, 45, 68, .95), rgba(6, 24, 39, .95));
  box-shadow: var(--shadow-md);
}

.social h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 26px;
}

.social p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.8;
}

.site-footer {
  margin-top: var(--space-6);
  padding-bottom: var(--space-5);
  color: #63788b;
  font-size: 14px;
  text-align: center;
}


/* ================================================================
   ۲۲. RESPONSIVE — موبایل، تبلت و صفحات کوچک
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --layout-width: 93%;
  }

  .topbar {
    border-radius: var(--radius-lg);
  }

  .info-grid,
  .info-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  :root {
    --layout-width: 94%;
  }

  .container {
    padding-top: var(--space-5);
  }

  .topbar {
    position: relative;
    top: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar__links {
    width: 100%;
  }

  .topbar__links a {
    flex: 1 1 auto;
    text-align: center;
  }

  .hero {
    padding: 45px 20px;
    border-radius: var(--radius-xl);
  }

  .section {
    padding: 23px 19px;
    border-right-width: 4px;
  }

  .section-title {
    font-size: 22px;
  }

  .section p,
  .section li {
    font-size: 16px;
  }

  .buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    min-width: 0;
  }

  .toc {
    padding: 22px 18px;
  }

  .code-block__header {
    flex-wrap: wrap;
  }
}

@media (max-width: 430px) {
  .topbar__links {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 35px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .section {
    padding: 20px 16px;
  }

  .code-block pre {
    font-size: 13.5px;
  }
}


/* ================================================================
   ۲۳. ACCESSIBILITY & REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* پرینت: حذف تزئینات غیرضروری */
@media print {
  .reading-progress,
  .topbar,
  .buttons,
  .social {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }

  .section,
  .box,
  .toc,
  .hero {
    box-shadow: none !important;
    background: #fff !important;
  }
}