* { box-sizing: border-box; }

/* ============================================================
   FONTS
   ============================================================ */

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 100;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-Thin.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-Thin.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-UltraLight.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-UltraLight.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-Light.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-Light.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: normal;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-Regular.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-Regular.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-Medium.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-Medium.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-DemiBold.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-DemiBold.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: bold;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-Bold.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-Bold.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-ExtraBold.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/iransansx/woff/IRANSansX-Black.woff') format('woff'),
       url('/assets/fonts/iransansx/woff2/IRANSansX-Black.woff2') format('woff2');
}

@font-face {
  font-family: iransansdn;
  font-style: normal;
  font-weight: normal;
  src: url('/assets/fonts/iransansdn/eot/iransansdn.eot');
  src: url('/assets/fonts/iransansdn/eot/iransansdn.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/iransansdn/woff2/iransansdn.woff2') format('woff2'),
       url('/assets/fonts/iransansdn/woff/iransansdn.woff') format('woff'),
       url('/assets/fonts/iransansdn/ttf/iransansdn.ttf') format('truetype');
}
@font-face {
  font-family: iransansdn;
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/iransansdn/eot/iransansdnlight.eot');
  src: url('/assets/fonts/iransansdn/eot/iransansdnlight.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/iransansdn/woff2/iransansdnlight.woff2') format('woff2'),
       url('/assets/fonts/iransansdn/woff/iransansdnlight.woff') format('woff'),
       url('/assets/fonts/iransansdn/ttf/iransansdnlight.ttf') format('truetype');
}
@font-face {
  font-family: iransansdn;
  font-style: normal;
  font-weight: bold;
  src: url('/assets/fonts/iransansdn/eot/iransansdnbold.eot');
  src: url('/assets/fonts/iransansdn/eot/iransansdnbold.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/iransansdn/woff2/iransansdnbold.woff2') format('woff2'),
       url('/assets/fonts/iransansdn/woff/iransansdnbold.woff') format('woff'),
       url('/assets/fonts/iransansdn/ttf/iransansdnbold.ttf') format('truetype');
}

@font-face {
  font-family: 'Fira Code';
  font-weight: 300;
  font-style: normal;
  src: url('/assets/fonts/firacode6.2/woff2/FiraCode-Light.woff2') format('woff2'),
       url('/assets/fonts/firacode6.2/woff/FiraCode-Light.woff') format('woff');
}
@font-face {
  font-family: 'Fira Code';
  font-weight: 400;
  font-style: normal;
  src: url('/assets/fonts/firacode6.2/woff2/FiraCode-Regular.woff2') format('woff2'),
       url('/assets/fonts/firacode6.2/woff/FiraCode-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Fira Code';
  font-weight: 500;
  font-style: normal;
  src: url('/assets/fonts/firacode6.2/woff2/FiraCode-Medium.woff2') format('woff2'),
       url('/assets/fonts/firacode6.2/woff/FiraCode-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Fira Code';
  font-weight: 600;
  font-style: normal;
  src: url('/assets/fonts/firacode6.2/woff2/FiraCode-SemiBold.woff2') format('woff2'),
       url('/assets/fonts/firacode6.2/woff/FiraCode-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Fira Code';
  font-weight: 700;
  font-style: normal;
  src: url('/assets/fonts/firacode6.2/woff2/FiraCode-Bold.woff2') format('woff2'),
       url('/assets/fonts/firacode6.2/woff/FiraCode-Bold.woff') format('woff');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-v2.304/webfonts/JetBrainsMono-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-v2.304/webfonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-v2.304/webfonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-v2.304/webfonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-v2.304/webfonts/JetBrainsMono-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-v2.304/webfonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
}

/* ============================================================
   DOCUMENT PAGE LAYOUT
   ============================================================ */

body {
  font-family: IRANSansX, iransansdn, sans-serif;
  background-color: #e5e7eb;
  margin: 0;
  padding: 0;
}

.doc-page {
  width: 100%;
  background-color: #e5e7eb;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.doc-wrapper {
  margin: 0.5rem auto;
  width: 91.666%;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0 1rem;
}

/* ============================================================
   DOCUMENT HEADER
   ============================================================ */

.doc-header {
  margin: 0.5rem;
}

.doc-header-top {
  font-family: IRANSansX;
  text-align: center;
  padding-top: 0.5rem;
  font-size: 0.875rem;
}

.doc-page-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* collapsible jalase / titr1 sections */
.myjalase1,
.mytitr1 {
  cursor: pointer;
  user-select: none;
}

.doc-section.collapsed > .doc-section-body {
  display: none;
}

.doc-header h1 {
  font-family: IRANSansX;
  text-align: center;
  font-weight: 600;
  padding-top: 0.5rem;
  font-size: 1rem;
  margin: 0;
  font-feature-settings: "ss01", "ss03";
}

.doc-doc-title {
  padding-bottom: 0;
}

.doc-header-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: IRANSansX;
  padding-top: 0.5rem;
  font-feature-settings: "ss01", "ss03";
}

.doc-header-right {
  display: none;
  padding-top: 1rem;
  font-size: 0.875rem;
  flex: 1;
  text-align: right;
}

.doc-header-logo {
  flex: none;
  padding: 0 1rem;
}

.doc-header-logo img {
  display: block;
  margin: 0 auto;
  width: 2.5rem;
}

.doc-header-left {
  display: none;
  padding-top: 1rem;
  font-size: 0.875rem;
  text-align: left;
  flex: 1;
}

@media (min-width: 640px) {
  .doc-header-meta {
    justify-content: space-between;
  }

  .doc-header-right,
  .doc-header-left {
    display: block;
  }
}

.doc-header-divider {
  border: none;
  border-top: 4px double #000000;
  margin: 0;
}

/* ============================================================
   JALASE / TITLE
   ============================================================ */

.myjalase1 {
  font-family: IRANSansX;
  text-align: center;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
  background-color: #bbf7d0;
  border: 2px solid #22c55e;
  font-feature-settings: "ss01", "ss03";
  position: relative;
}

/* ============================================================
   HEADINGS
   ============================================================ */

.mytitr1 {
  font-family: IRANSansX;
  font-weight: 700;
  font-size: 1.125rem;
  text-align: justify;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
  background-color: #bfdbfe;
  border: 2px solid #3b82f6;
  counter-reset: section;
  font-feature-settings: "ss01", "ss03";
  position: relative;
}

.mytitr2 {
  font-family: IRANSansX;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  position: relative;
  counter-increment: section;
  font-feature-settings: "ss01", "ss03";
}

.mytitr2::before {
  content: counter(section) "- ";
  font-weight: 700;
  color: #000000;
}

.mytitr3 {
  font-family: IRANSansX;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  font-feature-settings: "ss01", "ss03";
  position: relative;
}

/* ── Heading deep-link (copy #block-<id> URL) icon ── */
.myheading-link {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.3rem;
  padding: 0.25rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.35;
  transition: opacity 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.myheading-link:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   TEXT BLOCKS
   ============================================================ */

.mymatn1 {
  font-family: IRANSansX;
  text-align: justify;
  font-size: 1rem;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  line-height: 1.8;
  font-feature-settings: "ss01", "ss03";
}

/* per-paragraph alignment/direction come from inline styles the editor writes — this only
   sets the fallback for a paragraph with none, matching the app's RTL default (unlike .mymatn1,
   never forced to justify, since mixed per-paragraph alignment is the whole point of this block) */
.mymatnadv {
  text-align: right;
  /* padding/margin/border-radius/border/background-color/font-feature-settings all come from
     resolveMatnAdvStyle's inline style (src/lib/matnadv-style.ts) — always present, so nothing
     needs setting here for those */
}

.mymatn2bordered {
  font-family: IRANSansX;
  text-align: justify;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  margin-right: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  line-height: 1.8;
  border: none;
  border-right: 4px double #93c5fd;
  font-feature-settings: "ss01", "ss03";
}

.mymatnen1 {
  font-size: 1rem;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  direction: ltr;
  text-align: justify;
  line-height: 1.8;
}

.mymatnen2 {
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  direction: ltr;
  text-align: justify;
  line-height: 1.8;
  border: none;
  border-left: 4px double #93c5fd;
}

/* Reset <p> margins inside text blocks (TipTap wraps content in <p>) */
.mymatn1 p,
.mymatnadv p,
.mymatn2bordered p,
.mymatnen1 p,
.mymatnen2 p {
  margin: 0;
}
.mymatn1 p + p,
.mymatnadv p + p,
.mymatn2bordered p + p,
.mymatnen1 p + p,
.mymatnen2 p + p {
  margin-top: 0.5rem;
}

/* Reset <ul>/<ol> margins inside text blocks — browser default (~1em) was collapsing
   through the block's zero vertical padding and stacking with the block's own margin,
   doubling the gap around any block containing a list. Matches the p+p rhythm instead. */
.mymatn1 ul, .mymatn1 ol,
.mymatnadv ul, .mymatnadv ol,
.mymatn2bordered ul, .mymatn2bordered ol,
.mymatnen1 ul, .mymatnen1 ol,
.mymatnen2 ul, .mymatnen2 ol,
.myprompt-body ul, .myprompt-body ol,
.mytamrin-body ul, .mytamrin-body ol {
  margin: 0.5rem 0;
}
.mymatn1 p + ul, .mymatn1 p + ol, .mymatn1 ul + p, .mymatn1 ol + p,
.mymatnadv p + ul, .mymatnadv p + ol, .mymatnadv ul + p, .mymatnadv ol + p,
.mymatn2bordered p + ul, .mymatn2bordered p + ol, .mymatn2bordered ul + p, .mymatn2bordered ol + p,
.mymatnen1 p + ul, .mymatnen1 p + ol, .mymatnen1 ul + p, .mymatnen1 ol + p,
.mymatnen2 p + ul, .mymatnen2 p + ol, .mymatnen2 ul + p, .mymatnen2 ol + p,
.myprompt-body p + ul, .myprompt-body p + ol, .myprompt-body ul + p, .myprompt-body ol + p,
.mytamrin-body p + ul, .mytamrin-body p + ol, .mytamrin-body ul + p, .mytamrin-body ol + p {
  margin-top: 0.5rem;
}

/* ── Prompt blocks (AI prompt example) ── */
.myprompt {
  font-family: IRANSansX;
  margin: 1rem 0.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  overflow: hidden;
}

.myprompt-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
  padding: 0.4rem 0.875rem;
  border-bottom: 1px solid #ddd6fe;
  letter-spacing: 0.01em;
}

.myprompt-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.myprompt-copy {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #7c3aed;
  opacity: 0.65;
  padding: 0.2rem;
  border-radius: 0.25rem;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.myprompt-copy:hover {
  opacity: 1;
  background: rgba(124, 58, 237, 0.12);
}

.myprompt-body {
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: #4c1d95;
  text-align: justify;
  font-feature-settings: "ss01", "ss03";
}

.myprompt-en .myprompt-body {
  text-align: left;
  direction: ltr;
}

.myprompt-body p {
  margin: 0;
}
.myprompt-body p + p {
  margin-top: 0.5rem;
}

/* ── Exercise (تمرین) block ── */
.mytamrin {
  font-family: IRANSansX;
  margin: 1.5rem 0.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 2px dashed #f59e0b;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}

.mytamrin-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  padding: 0.5rem 1rem;
  letter-spacing: 0.01em;
}

.mytamrin-body {
  padding: 1rem 1.125rem;
  font-size: 1rem;
  line-height: 1.8;
  color: #78350f;
  text-align: justify;
  font-feature-settings: "ss01", "ss03";
}

.mytamrin-body p {
  margin: 0;
}
.mytamrin-body p + p {
  margin-top: 0.5rem;
}

.mytamrin-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #22c55e;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
}
.mytamrin-green .mytamrin-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.mytamrin-green .mytamrin-body {
  color: #14532d;
}

/* ============================================================
   IMAGE BLOCKS
   ============================================================ */

.myimgdivlevel1_type1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.5rem 0;
}

.myimgdivlevel2_type1 {
  width: 9rem;
}

.myimgdivlevel2_type1 img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 640px)  { .myimgdivlevel2_type1 { width: 14rem; } }
@media (min-width: 768px)  { .myimgdivlevel2_type1 { width: 16rem; } }
@media (min-width: 1024px) { .myimgdivlevel2_type1 { width: 18rem; } }

/* ============================================================
   VIDEO BLOCK (vid1)
   ============================================================ */

.myvid1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1rem 0;
}

.myvid1-inner {
  width: 60%;
}

.myvid1-inner video {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.myvid1-embed {
  width: 60%;
  margin: 1rem auto;
}

.myvid1-embed iframe,
.myvid1-embed video {
  max-width: 100%;
}

.vid-print-placeholder {
  display: none;
}

/* ============================================================
   GIF BLOCK (gif1)
   ============================================================ */

.mygif1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.75rem 0;
}

.mygif1-inner {
  width: 60%;
}

.mygif1-inner img {
  display: block;
  width: 100%;
  height: auto;
}

.mygif1-print-frame {
  display: none !important;
}

/* ============================================================
   AUDIO BLOCK (aud1)
   ============================================================ */

.myaud1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.75rem 0;
}

.myaud1-inner {
  width: 80%;
}

.aud-print-placeholder {
  display: none;
}

/* ============================================================
   LINK BLOCK (lnk1)
   ============================================================ */

.mylnk1 {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.mylnk1-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.375rem;
  border: 1.5px solid #bfdbfe;
  border-radius: 0.625rem;
  background: #eff6ff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  max-width: 36rem;
}

.mylnk1-card:hover {
  background: #dbeafe;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.18);
}

.mylnk1-icon {
  flex-shrink: 0;
  color: #3b82f6;
}

.mylnk1-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.mylnk1-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1e40af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mylnk1-url {
  font-size: 0.75rem;
  color: #64748b;
  direction: ltr;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mylnk1-arrow {
  flex-shrink: 0;
  color: #93c5fd;
}

.lnk-print-placeholder {
  display: none;
}

/* ============================================================
   DOWNLOAD FILE BLOCK (dl1)
   ============================================================ */

.mydl1 {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.mydl1-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.375rem;
  border: 1.5px solid #bbf7d0;
  border-radius: 0.625rem;
  background: #f0fdf4;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  max-width: 36rem;
}

.mydl1-card:hover {
  background: #dcfce7;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.18);
}

.mydl1-icon {
  flex-shrink: 0;
  color: #16a34a;
}

.mydl1-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.mydl1-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #15803d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mydl1-desc {
  font-size: 0.8125rem;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mydl1-badge {
  font-size: 0.75rem;
  background: #16a34a;
  color: #ffffff;
  padding: 0.2rem 0.65rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.dl-print-placeholder {
  display: none;
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */

.mycode1 {
  position: relative;
  font-family: 'Fira Code', IRANSansX, monospace;
  direction: ltr;
  text-align: left;
  margin: 1rem 0.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 1.125rem;
}

.mycode1-light {
  border: 2px solid #1e40af;
}

.mycode1-dark {
  border: none;
}

.mycode2 {
  font-family: 'Fira Code', IRANSansX, monospace;
  direction: ltr;
  text-align: left;
  margin: 1rem 0.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 1.125rem;
  border: 2px solid #1e40af;
}

.mycode1 pre,
.mycode2 pre {
  margin: 0;
  padding: 0;
  line-height: 1.75rem;
  overflow-x: auto;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.mycode2 pre {
  padding: 1rem;
}

.mycode1 code {
  display: block;
}

/* Line numbers */
@counter-style persian-digits {
  system: numeric;
  symbols: '۰' '۱' '۲' '۳' '۴' '۵' '۶' '۷' '۸' '۹';
  suffix: '';
}

.mycode1[data-line-numbers] {
  counter-reset: line;
}

.mycode1[data-line-numbers] .code-line {
  display: block;
  padding-left: 4rem;
  position: relative;
}

.mycode1[data-line-numbers] .code-line::before {
  counter-increment: line;
  content: counter(line, persian-digits);
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  text-align: right;
  padding-right: 0.75rem;
  font-size: 0.875em;
  font-family: IRANSansX, sans-serif;
  color: rgba(156, 163, 175, 0.6);
  user-select: none;
  border-right: 1px solid rgba(107, 114, 128, 0.2);
  line-height: inherit;
}

/* ============================================================
   CODE3 — Claude-style code block (dark / light)
   ============================================================ */

.mycode3 {
  position: relative;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', IRANSansX, monospace;
  direction: ltr;
  text-align: left;
  margin: 0.25rem 0.5rem;
  border-radius: 0.625rem;
  overflow: hidden;
  font-size: 1.1rem;
  transition: background 0.2s, border-color 0.2s;
}
.mycode3 + .mycode3 {
  margin-top: 0.75rem;
}


/* ── Dark mode ── */
.mycode3-dark {
  background: #282c34;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.mycode3-dark .mycode3-header {
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mycode3-dark .mycode3-lang {
  color: rgba(255, 255, 255, 0.4);
}

.mycode3-dark .mycode3-toggle,
.mycode3-dark .mycode3-copy,
.mycode3-dark .mycode3-fs-up,
.mycode3-dark .mycode3-fs-down,
.mycode3-dark .mycode3-lh-up,
.mycode3-dark .mycode3-lh-down,
.mycode3-dark .mycode3-fw,
.mycode3-dark .mycode3-ff {
  color: rgba(255, 255, 255, 0.45);
}

.mycode3-dark .mycode3-toggle:hover,
.mycode3-dark .mycode3-copy:hover,
.mycode3-dark .mycode3-fs-up:hover,
.mycode3-dark .mycode3-fs-down:hover,
.mycode3-dark .mycode3-lh-up:hover,
.mycode3-dark .mycode3-lh-down:hover,
.mycode3-dark .mycode3-fw:hover,
.mycode3-dark .mycode3-ff:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.09);
}

.mycode3-dark .mycode3-sep { background: rgba(255, 255, 255, 0.18); }

/* Dark: hljs theme controls all colors and background */

/* ── Light mode ── */
.mycode3-light {
  background: #ffffff;
  border: 1px solid #d0d7de;
}

.mycode3-light .mycode3-header {
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
}

.mycode3-light .mycode3-lang {
  color: #57606a;
}

.mycode3-light .mycode3-toggle,
.mycode3-light .mycode3-copy,
.mycode3-light .mycode3-fs-up,
.mycode3-light .mycode3-fs-down,
.mycode3-light .mycode3-lh-up,
.mycode3-light .mycode3-lh-down,
.mycode3-light .mycode3-fw,
.mycode3-light .mycode3-ff {
  color: #57606a;
}

.mycode3-light .mycode3-toggle:hover,
.mycode3-light .mycode3-copy:hover,
.mycode3-light .mycode3-fs-up:hover,
.mycode3-light .mycode3-fs-down:hover,
.mycode3-light .mycode3-lh-up:hover,
.mycode3-light .mycode3-lh-down:hover,
.mycode3-light .mycode3-fw:hover,
.mycode3-light .mycode3-ff:hover {
  color: #24292f;
  background: rgba(0, 0, 0, 0.06);
}

.mycode3-light .mycode3-sep { background: rgba(0, 0, 0, 0.15); }

/* Light: hljs theme controls all colors and background */

/* ── Shared ── */
.mycode3-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.mycode3-lang {
  font-size: 0.75rem;
  font-family: 'Fira Code', monospace;
  letter-spacing: 0.02em;
}

.mycode3-actions {
  display: flex;
  gap: 0.125rem;
  align-items: center;
}

.mycode3-toggle,
.mycode3-copy,
.mycode3-fs-up,
.mycode3-fs-down,
.mycode3-lh-up,
.mycode3-lh-down,
.mycode3-fw,
.mycode3-ff {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  transition: color 0.15s ease, background 0.15s ease;
  line-height: 1;
  font-family: inherit;
}

.mycode3-fs-up,
.mycode3-fs-down,
.mycode3-fw,
.mycode3-ff {
  gap: 0.05em;
}

.c3-ff {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Font-family override: Fira Code */
.mycode3[data-ff="fira"] pre,
.mycode3[data-ff="fira"] pre code,
.mycode3[data-ff="fira"] pre code span {
  font-family: 'Fira Code', IRANSansX, monospace !important;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.mycode3-dark  .mycode3-theme-sel-light { display: none; }
.mycode3-light .mycode3-theme-sel-dark  { display: none; }

.mycode3-theme-sel {
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.15rem 0.2rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  max-width: 7.5rem;
}
.mycode3-theme-sel:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.04);
}
.mycode3-dark .mycode3-theme-sel {
  color: rgba(255, 255, 255, 0.45);
}
.mycode3-dark .mycode3-theme-sel:hover {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}
.mycode3-dark .mycode3-theme-sel option {
  background: #1e1e2e;
  color: #e2e8f0;
}
.mycode3-light .mycode3-theme-sel {
  color: #57606a;
}
.mycode3-light .mycode3-theme-sel:hover {
  color: #24292f;
  border-color: rgba(0, 0, 0, 0.18);
}

.mycode3-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 0.2rem;
  align-self: center;
  flex-shrink: 0;
}

.c3-a-sm {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
}

.c3-a-lg {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

.c3-op {
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1;
}

.c3-b {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1em;
  line-height: 1;
}


.mycode3 pre {
  margin: 0;
  padding: 0;
  line-height: 24.4px;
  overflow-x: auto;
  font-weight: 700;
  font-family: 'JetBrains Mono', IRANSansX, monospace !important;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.mycode3 pre code,
.mycode3 pre code span {
  font-family: 'JetBrains Mono', IRANSansX, monospace !important;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.mycode3 code {
  display: block;
  padding: 1.25rem 1.5rem;
}

/* ── Line numbers ── */
.mycode3[data-line-numbers] {
  counter-reset: line;
}

.mycode3[data-line-numbers] .code-line {
  display: block;
  padding-left: 4rem;
  position: relative;
}

.mycode3-dark[data-line-numbers] .code-line::before {
  counter-increment: line;
  content: counter(line, persian-digits);
  position: absolute;
  left: 0; top: 0;
  width: 3rem;
  text-align: right;
  padding-right: 0.75rem;
  font-size: 0.875em;
  font-family: IRANSansX, sans-serif;
  color: rgba(156, 163, 175, 0.35);
  user-select: none;
  border-right: 1px solid rgba(107, 114, 128, 0.15);
  line-height: inherit;
}

.mycode3-light[data-line-numbers] .code-line::before {
  counter-increment: line;
  content: counter(line, persian-digits);
  position: absolute;
  left: 0; top: 0;
  width: 3rem;
  text-align: right;
  padding-right: 0.75rem;
  font-size: 0.875em;
  font-family: IRANSansX, sans-serif;
  color: #8b949e;
  user-select: none;
  border-right: 1px solid #d0d7de;
  line-height: inherit;
}

.toggleTheme {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  line-height: 1;
}

.toggleTheme:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   MATH (math-katex)
   ============================================================ */

.mymath-katex {
  margin: 1rem 0.5rem;
  padding: 0.5rem 1rem;
  text-align: center;
  overflow-x: auto;
}

/* katex hard-sets text-align:center on TWO levels of its own markup: the outer .katex-display
   AND its direct child .katex (".katex-display > .katex{text-align:center}" is katex's own rule,
   and it's actually THIS inner element's text-align — not the outer wrapper's — that positions
   the formula, since it's the inner one that's display:block). Both need to be handed back to
   the wrapper's chosen alignment, and both selectors need one more class than katex's own rule
   to actually win on specificity. */
.mymath-katex .katex-display,
.mymath-katex .katex-display > .katex {
  text-align: inherit;
}

/* inline formula inside otherwise-RTL Persian prose (matn1-katex block) — unicode-bidi:isolate
   (not just dir="ltr" on the span) keeps the LTR formula's internal character order intact
   without letting it get reordered relative to the surrounding RTL sentence */
.mymath-katex-inline {
  display: inline-block;
  unicode-bidi: isolate;
  margin: 0 0.15em;
}

/* MathJax's SVG output (matn1-mathjax block) — same bidi-isolation reasoning as the KaTeX inline
   span above. MathJax renders \text{} content (used for the optional "اعداد فارسی" Persian-digit
   substitution) as real SVG <text> elements sized by the browser's own font metrics, unlike
   KaTeX's fixed-metrics vector glyphs — so this font-family override actually takes effect and
   the digits are drawn in the site's own font instead of MathJax's default serif fallback. */
.mymath-mathjax-inline {
  display: inline-block;
  unicode-bidi: isolate;
  margin: 0 0.15em;
}
.mymath-mathjax-inline svg text {
  font-family: IRANSansX, iransansdn, sans-serif;
}

/* math-mathjax block — display-mode formulas, one per line, stacked. MathJax's own injected
   stylesheet sets text-align:center directly on mjx-container[display="true"] (the same kind of
   "element sets its own text-align, so the parent's doesn't cascade down" situation already found
   and fixed for KaTeX's .katex-display), so it needs the identical override here. */
.mymath-mathjax {
  margin: 1rem 0.5rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  /* KaTeX renders at font: 1.21em by design (.katex in katex.min.css) — MathJax's SVG output has
     no such built-in boost and renders at 1x the surrounding font-size by default, which made it
     look visibly smaller/less prominent than the KaTeX block next to it. MathJax's SVG dimensions
     are specified in ex units (relative to font-size), so bumping font-size here scales the whole
     formula up proportionally — matching KaTeX's boost ratio exactly for a consistent size. */
  font-size: 1.21em;
}
.mymath-mathjax-block-line {
  display: block;
}
.mymath-mathjax mjx-container[display="true"] {
  /* mjx-container is an unknown custom element to the browser (we deliberately don't load MathJax's
     own default stylesheet, which normally sets this), so its UA default display is "inline" — on an
     inline element, top/bottom margin creates no layout space at all, which is why stacked formulas
     were rendering stuck together with zero visible gap despite the margin rule below. */
  display: block;
  text-align: inherit;
  /* KaTeX's own .katex-display gets margin:1em 0 by default — matching that here instead of a
     smaller value so stacked formulas (one per line) get the same breathing room in both blocks */
  margin: 1em 0;
}
.mymath-mathjax svg text {
  font-family: IRANSansX, iransansdn, sans-serif;
}

/* MathJax's browser component (tex-svg.js) attaches a hidden "assistive MathML" copy alongside
   every SVG render — a real, browser-renderable <math> element meant only for screen readers,
   normally invisible. This app doesn't load MathJax's own auto-injected stylesheet that hides it
   by default, so without this rule the browser renders BOTH the SVG and the "hidden" MathML
   natively (Chromium/Firefox both support native MathML now) — the exact cause of every formula
   visibly appearing twice. This is MathJax's own standard clip-rect hiding technique. */
mjx-assistive-mml {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  padding: 1px 0 0 0 !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  user-select: none !important;
}
mjx-assistive-mml[display="block"] {
  width: 100% !important;
}

/* ============================================================
   END CONTENT
   ============================================================ */

.myend {
  font-family: IRANSansX;
  direction: ltr;
  text-align: left;
  padding: 1rem 0;
  font-size: 0.875rem;
  margin: 0.5rem 0;
  font-feature-settings: "ss01", "ss03";
}

/* ============================================================
   PAGE BREAK
   ============================================================ */

.page-break {
  display: none;
}

/* ============================================================
   FULLPAGE MODE
   ============================================================ */

.doc-page.doc-page-fullwidth {
  background-color: #ffffff;
}

body.doc-fullpage {
  background-color: #ffffff;
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .doc-page-toggle {
    display: none !important;
  }

  .doc-section.collapsed > .doc-section-body {
    display: block !important;
  }


  .mycode3-actions {
    display: none !important;
  }

  .myprompt-copy {
    display: none !important;
  }

  .myheading-link {
    display: none !important;
  }

  /* badge text is white-on-gradient; if the print dialog has "print backgrounds" off, the
     gradient vanishes and white text disappears on white paper — force a dark, always-legible
     fallback instead of relying on background colors printing at all */
  .mytamrin-badge {
    background: none !important;
    color: #78350f !important;
    border-bottom: 2px solid #f59e0b !important;
  }
  .mytamrin-green .mytamrin-badge {
    color: #14532d !important;
    border-bottom: 2px solid #22c55e !important;
  }

  /* mycode3-dark's border/lang label are white-based (rgba(255,255,255,…)), tuned to sit on the
     dark editor background — if that background doesn't print, they're invisible on white paper.
     mycode3-light's border/lang were also too pale (#d0d7de / #57606a) — real printers manage,
     but photocopiers wash out anything that light, so both variants get a strong, uniform,
     always-legible border + bold dark label in print regardless of on-screen theme. */
  .mycode3-dark,
  .mycode3-light {
    border: 1.5px solid #334155 !important;
  }
  .mycode3-dark .mycode3-header,
  .mycode3-light .mycode3-header {
    border-bottom: 1.5px solid #334155 !important;
  }
  .mycode3-dark .mycode3-lang,
  .mycode3-light .mycode3-lang {
    color: #1e293b !important;
    font-weight: 700 !important;
  }

  /* prompt box border (#ddd6fe) and badge background/text are too pale for photocopiers —
     same treatment as mycode3: thick dark border + bold dark label, background stripped */
  .myprompt {
    background: none !important;
    border: 1.5px solid #6d28d9 !important;
  }
  .myprompt-badge {
    background: none !important;
    color: #4c1d95 !important;
    font-weight: 700 !important;
    border-bottom: 1.5px solid #6d28d9 !important;
  }

  .mycode1 pre,
  .mycode2 pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: visible !important;
  }

  .toggleTheme {
    display: none !important;
  }

  .mycode1,
  .mycode2,
  .mycode1 pre,
  .mycode2 pre {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-break {
    display: block;
    page-break-before: always;
    break-before: page;
  }

  .doc-wrapper {
    box-shadow: none;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0 0.5rem;
  }

  .doc-page {
    background-color: #ffffff;
  }

  .lb-overlay {
    display: none !important;
  }

  .lb-trigger {
    cursor: default !important;
  }

  .myvid1-inner,
  .myvid1-embed > *:not(.vid-print-placeholder) {
    display: none !important;
  }

  .has-print-frame .mygif1-img {
    display: none !important;
  }

  .mygif1-print-frame {
    display: block !important;
  }

  .myaud1-inner {
    display: none !important;
  }

  .mylnk1-card {
    display: none !important;
  }

  .lnk-print-placeholder {
    display: block !important;
    text-align: center;
    font-family: IRANSansX, sans-serif;
    font-size: 0.9rem;
    color: #1e40af;
    border: 1.5px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem 1rem;
    margin: 0.5rem auto;
    width: fit-content;
    background: #eff6ff;
  }

  .mydl1-card {
    display: none !important;
  }

  .dl-print-placeholder {
    display: block !important;
    text-align: center;
    font-family: IRANSansX, sans-serif;
    font-size: 0.9rem;
    color: #15803d;
    border: 1.5px solid #bbf7d0;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem 1rem;
    margin: 0.5rem auto;
    width: fit-content;
    background: #f0fdf4;
  }

  .dl-print-desc {
    font-size: 0.78rem;
    color: #4b5563;
    margin-top: 0.375rem;
    font-family: IRANSansX, sans-serif;
  }

  .aud-print-placeholder {
    display: block !important;
    text-align: center;
    font-family: IRANSansX, sans-serif;
    font-size: 0.9rem;
    color: #64748b;
    border: 1.5px dashed #94a3b8;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem 1rem;
    margin: 0.5rem auto;
    width: fit-content;
  }

  .vid-print-placeholder {
    display: block !important;
    text-align: center;
    font-family: IRANSansX, sans-serif;
    font-size: 0.9rem;
    color: #64748b;
    border: 1.5px dashed #94a3b8;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem 1rem;
    margin: 0.5rem auto;
    width: fit-content;
  }

  .vid-qr-label {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 0.25rem;
  }

  .vid-qr-wrap {
    margin: 0 auto;
    width: 80px;
    height: 80px;
  }

  .vid-qr-wrap svg {
    width: 80px !important;
    height: 80px !important;
    display: block;
  }
}

/* ─── Table block (table1) ──────────────────────────── */
.mytable1 {
  margin: 1.25rem 0;
  overflow-x: auto;
}
.mytable1-inner {
  width: 100%;
  border-collapse: collapse;
  font-family: IRANSansX, sans-serif;
  font-size: 0.9375rem;
  direction: rtl;
}
.mytable1-inner th,
.mytable1-inner td {
  padding: 0.5rem 0.75rem;
  text-align: right;
  vertical-align: middle;
}
.mytable1-bordered th,
.mytable1-bordered td {
  border: 1px solid #d1d5db;
}
.mytable1-inner thead th {
  background: var(--table-header-bg, #e0f2fe);
  font-weight: 700;
  color: #1e3a5f;
}
.mytable1-striped tbody tr:nth-child(even) td {
  background: var(--table-stripe-bg, #f8fafc);
}
.mytable1-link {
  color: #2563eb;
  text-decoration: underline;
}
.mytable1-link:hover {
  color: #1d4ed8;
}
.mytable1-img {
  max-width: 80px;
  max-height: 60px;
  object-fit: contain;
  display: block;
}

/* ─── Chart block (chart1) ─────────────────────────── */
.mychart1-wrap {
  margin: 1.25rem 0;
  max-width: 100%;
}
.mychart1-title {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #1e293b;
  margin-bottom: 0.5rem;
  font-family: IRANSansX, sans-serif;
}
.mychart1-canvas {
  max-width: 100%;
}

/* ─── Function/plot blocks (funcplot1/plotly1/jsxgraph1/d3plot1) ─────── */
.myplot-wrap {
  margin: 1.25rem 0;
  max-width: 100%;
  min-height: 320px;
  overflow-x: auto;
  direction: ltr;
}
/* funcplot1's axis-tick and hover-tooltip text — a persistent CSS rule instead of a one-off DOM
   patch, driven by custom properties set inline on .myplot-wrap by plot-render-client.ts
   (renderFuncPlot). Two independent sizes on purpose (not one shared value) — axis ticks use
   "سایز اعداد محورها", the hover tooltip uses its own separate "سایز فونت نقاط" slider; both
   fall back to inherit (function-plot's own default) when unset. */
.myplot-wrap .tick text,
.myplot-wrap .tip text {
  font-family: IRANSansX, iransansdn, sans-serif;
}
.myplot-wrap .tick text {
  font-size: var(--plot-axis-font-size, inherit);
}
.myplot-wrap .tip text {
  font-size: var(--plot-tip-font-size, inherit);
}

@media print {
  .mytable1-inner {
    font-size: 0.8rem;
  }
  .mytable1-inner th,
  .mytable1-inner td {
    padding: 0.25rem 0.5rem;
  }
  .mychart1-canvas {
    display: none !important;
  }
  .mychart1-print-img {
    max-width: 100%;
    display: block !important;
  }
  .myplot-wrap {
    overflow: visible !important;
  }
  .myplot-wrap svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }
}