/* ================================================================
   مظهر السبورة (نسخة تجريبية): خلفية بيج + سبورة خضراء بإطار خشبي
   للعناوين والقواعد والنتائج فقط، والقراءة الطويلة تبقى على ورق فاتح
   يُفعَّل بإضافة الصنف theme-board إلى <html>
   ================================================================ */
html.theme-board {
  --bd-beige: #ECE7DA; --bd-beige-2: #E4DDCB;
  --bd-board: #1E4A3E; --bd-board-2: #173D33; --bd-wood: #8B5E3C; --bd-wood-2: #6F4A2E;
  --bd-chalk: #F3EEDC; --bd-chalk-yellow: #FFDF8A; --bd-chalk-mint: #8EE3B9; --bd-chalk-dim: #B9CFC4;
}
html.theme-board body { background: var(--bd-beige); }

/* السبورة المشتركة */
html.theme-board .content-box-header,
html.theme-board .tp-band,
html.theme-board .tp-rule {
  background: radial-gradient(120% 140% at 85% 0%, #24584A 0%, var(--bd-board) 45%, var(--bd-board-2) 100%) !important;
  border: 7px solid var(--bd-wood) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 14px rgba(70,45,20,.18) !important;
  color: var(--bd-chalk) !important;
}

/* رأس كل تبويب = سبورة صغيرة */
html.theme-board .content-box { background: #FFFDF7; border-color: var(--bd-beige-2); }
html.theme-board .content-box-header {
  position: relative; border-radius: 16px; padding: 1rem 1.25rem 1.6rem; margin-bottom: 1.4rem; flex-wrap: wrap; gap: .6rem;
}
html.theme-board .content-box-header h3 { color: var(--bd-chalk-yellow); font-family: var(--font-title); font-weight: 700; letter-spacing: .01em; }
html.theme-board .content-box-header p { color: var(--bd-chalk-dim) !important; }
html.theme-board .content-box-header .pill-tag {
  background: transparent !important; color: var(--bd-chalk-mint) !important; border: 1px solid rgba(142,227,185,.45) !important;
}
/* شرائط الطباشير الثلاثة أسفل السبورة */
html.theme-board .content-box-header::after {
  content: ""; position: absolute; inset-inline-end: 1.25rem; bottom: .6rem; width: 120px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--bd-chalk) 0 30%, transparent 30% 35%, var(--bd-chalk-yellow) 35% 65%, transparent 65% 70%, var(--bd-chalk-mint) 70% 100%);
  opacity: .9;
}

/* شرح مثال من الواقع: ورقة فاتحة وعنوانها سبورة */
html.theme-board .tp-paper { background: #FFFDF7; border-color: var(--bd-beige-2); }
html.theme-board .tp-band { border-radius: 16px !important; overflow: hidden; }
html.theme-board .tp-band-badge { background: transparent !important; border-inline-end: 1px solid rgba(243,238,220,.25); border-radius: 0 !important; color: var(--bd-chalk-mint); }
html.theme-board .tp-band-title h3 { color: var(--bd-chalk-yellow) !important; font-family: var(--font-title); }
html.theme-board .tp-band-title span { color: var(--bd-chalk-dim) !important; }

/* القاعدة السهلة = سبورة صغيرة بطباشير أصفر */
html.theme-board .tp-rule {
  border-width: 5px !important; border-radius: 12px; padding: .6rem 1rem; color: var(--bd-chalk-yellow) !important; text-align: center; font-size: 1.12em;
}
html.theme-board .tp-rule math, html.theme-board .tp-rule * { color: inherit; }

/* الناتج النهائي في التمارين المحلولة */
html.theme-board #content-solved-ex-body .exercise-box div[style*="f0fdf4"] {
  background: var(--bd-board) !important; border: 4px solid var(--bd-wood) !important; color: var(--bd-chalk) !important; border-radius: 10px !important;
}
html.theme-board #content-solved-ex-body .exercise-box div[style*="f0fdf4"] span { color: var(--bd-chalk-yellow) !important; }

/* صفحة الكتاب تبقى ورقة بيضاء كما هي، مع ظل خفيف على البيج */
html.theme-board .book-page-img { box-shadow: 0 6px 18px rgba(70,45,20,.14); }

/* الشريط العلوي يطفو فوق البيج */
html.theme-board .topic-top-ribbon-bar { background: rgba(255,253,247,.96) !important; }
html.theme-board .ribbon-tab-btn.active { background: var(--bd-board) !important; color: var(--bd-chalk-yellow) !important; box-shadow: 0 0 0 3px var(--bd-wood) !important; }


/* أزرار الاستماع على السبورة */
html.theme-board .tp-listen-all { background: var(--bd-board); color: var(--bd-chalk-yellow); border: 3px solid var(--bd-wood); }
html.theme-board .tp-player { background: var(--bd-board); border: 3px solid var(--bd-wood); }