/* =========================================================
   ZYMNOTES — BAB VISUAL THEMES (SCALABLE)
   Gantikan keseluruhan themes.css dengan versi ini
   Menyokong bab-theme-1 hingga bab-theme-10
========================================================= */



/* =========================================================
   GLOBAL PAGE THEMES — halaman umum (non-bab)
========================================================= */

body[class*="page-theme-"] {
  --page-bg-solid: #f2f6ff;
  --page-overlay-1: radial-gradient(circle at 10% 14%, rgba(120, 151, 255, 0.19), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 88% 16%, rgba(94, 211, 194, 0.14), transparent 0 20%);
  --page-overlay-3: radial-gradient(circle at 22% 86%, rgba(188, 162, 255, 0.14), transparent 0 18%);
  --page-gradient: linear-gradient(180deg, #ffffff 0%, #f3f7ff 52%, #edf6ff 100%);

  --page-surface-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 255, 0.88));
  --page-surface-border: rgba(94, 115, 148, 0.16);
  --page-surface-shadow: 0 18px 40px rgba(50, 62, 82, 0.10);
  --page-header-bg: rgba(255, 255, 255, 0.78);
  --page-footer-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(242, 249, 255, 0.74));
  --page-header-border: rgba(79, 70, 229, 0.10);
  --page-footer-border: rgba(79, 70, 229, 0.10);

  background-color: var(--page-bg-solid);
  background-image:
    var(--page-overlay-1),
    var(--page-overlay-2),
    var(--page-overlay-3),
    var(--page-gradient);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, scroll;
}

body[class*="page-theme-"] .site-header {
  background: var(--page-header-bg);
  border-bottom-color: var(--page-header-border);
  backdrop-filter: blur(14px);
}

body[class*="page-theme-"] .site-footer {
  background: var(--page-footer-bg);
  border-top-color: var(--page-footer-border);
}

body[class*="page-theme-"] .paper-board,
body[class*="page-theme-"] .paper-flap-card,
body[class*="page-theme-"] .metric-card,
body[class*="page-theme-"] .editorial-card,
body[class*="page-theme-"] .audience-card,
body[class*="page-theme-"] .note-card,
body[class*="page-theme-"] .value-card,
body[class*="page-theme-"] .content-block,
body[class*="page-theme-"] .search-wrap,
body[class*="page-theme-"] .search-results,
body[class*="page-theme-"] .search-empty,
body[class*="page-theme-"] .feedback-form-wrap {
  background: var(--page-surface-bg);
  border-color: var(--page-surface-border);
  box-shadow: var(--page-surface-shadow);
}

body.page-theme-home {
  --page-bg-solid: #fffaf3;
  --page-overlay-1: radial-gradient(circle at 8% 10%, rgba(255, 184, 107, 0.25), transparent 0 30%);
  --page-overlay-2: radial-gradient(circle at 92% 14%, rgba(108, 200, 255, 0.24), transparent 0 32%);
  --page-overlay-3: radial-gradient(circle at 52% 86%, rgba(99, 219, 161, 0.18), transparent 0 36%);
  --page-gradient: linear-gradient(180deg, #fffdf8 0%, #fff7ec 42%, #eff8ff 100%);
}

body.page-theme-notes {
  --page-bg-solid: #f4f9ff;
  --page-overlay-1: radial-gradient(circle at 10% 12%, rgba(126, 169, 255, 0.2), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 88% 16%, rgba(71, 198, 214, 0.18), transparent 0 20%);
  --page-overlay-3: radial-gradient(circle at 20% 86%, rgba(137, 228, 200, 0.18), transparent 0 18%);
  --page-gradient: linear-gradient(180deg, #fcfeff 0%, #eff6ff 52%, #e9fbf7 100%);
}

body.page-theme-about {
  --page-bg-solid: #f8f5ff;
  --page-overlay-1: radial-gradient(circle at 12% 10%, rgba(170, 148, 255, 0.22), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 86% 14%, rgba(108, 198, 255, 0.17), transparent 0 20%);
  --page-overlay-3: radial-gradient(circle at 18% 86%, rgba(255, 179, 222, 0.18), transparent 0 18%);
  --page-gradient: linear-gradient(180deg, #fffcff 0%, #f4f0ff 54%, #eef6ff 100%);
}

body.page-theme-feedback {
  --page-bg-solid: #f6fff9;
  --page-overlay-1: radial-gradient(circle at 10% 12%, rgba(91, 199, 168, 0.22), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 88% 16%, rgba(125, 175, 255, 0.18), transparent 0 20%);
  --page-overlay-3: radial-gradient(circle at 24% 86%, rgba(255, 196, 145, 0.18), transparent 0 18%);
  --page-gradient: linear-gradient(180deg, #fcfffd 0%, #f0fff8 52%, #edf4ff 100%);
}

body.page-theme-thankyou {
  --page-bg-solid: #f4fbff;
  --page-overlay-1: radial-gradient(circle at 12% 12%, rgba(113, 188, 255, 0.22), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 88% 14%, rgba(111, 224, 196, 0.19), transparent 0 20%);
  --page-overlay-3: radial-gradient(circle at 22% 86%, rgba(171, 165, 255, 0.16), transparent 0 18%);
  --page-gradient: linear-gradient(180deg, #fdfefe 0%, #eef8ff 52%, #eafaf6 100%);
}

body.page-theme-error {
  --page-bg-solid: #fff8f4;
  --page-overlay-1: radial-gradient(circle at 12% 10%, rgba(255, 186, 153, 0.20), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 90% 14%, rgba(144, 199, 255, 0.20), transparent 0 20%);
  --page-overlay-3: radial-gradient(circle at 18% 86%, rgba(191, 204, 255, 0.18), transparent 0 18%);
  --page-gradient: linear-gradient(180deg, #fffefd 0%, #fff4ef 54%, #edf5ff 100%);
}

html[data-theme="dark"] body[class*="page-theme-"] {
  --page-bg-solid: #0D0F1A;
  --page-overlay-1: radial-gradient(circle at 12% 12%, rgba(99, 102, 241, 0.16), transparent 0 24%);
  --page-overlay-2: radial-gradient(circle at 86% 12%, rgba(34, 211, 238, 0.12), transparent 0 22%);
  --page-overlay-3: radial-gradient(circle at 16% 86%, rgba(129, 140, 248, 0.10), transparent 0 20%);
  --page-gradient: linear-gradient(180deg, #0D0F1A 0%, #0B0E1A 56%, #0A0C16 100%);
  --page-surface-bg: rgba(21, 24, 41, 0.88);
  --page-surface-border: rgba(129, 140, 248, 0.12);
  --page-surface-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  --page-header-bg: rgba(13, 15, 26, 0.92);
  --page-footer-bg: rgba(13, 15, 26, 0.84);
  --page-header-border: rgba(129, 140, 248, 0.12);
  --page-footer-border: rgba(129, 140, 248, 0.10);
}

/* =========================================================
   THEME CORE — semua bab guna rangka sama
========================================================= */

body[class*="bab-theme-"] {
  --theme-bg-solid: #f3f8ff;
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(111, 167, 248, 0.18), transparent 0 20%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(96, 216, 182, 0.14), transparent 0 18%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(189, 149, 255, 0.14), transparent 0 16%);
  --theme-pattern: none;
  --theme-gradient: linear-gradient(180deg, #fcfdff 0%, #f2f7ff 52%, #eefbf9 100%);

  --theme-label-bg: linear-gradient(90deg, #e8f2ff, #ddeeff);
  --theme-label-color: #2f567f;

  --theme-surface-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 252, 255, 0.84));
  --theme-surface-border: rgba(92, 110, 132, 0.13);
  --theme-surface-shadow: 0 18px 40px rgba(36, 49, 63, 0.11);

  --theme-header-bg: rgba(255, 255, 255, 0.74);
  --theme-footer-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(244, 251, 255, 0.72));

  background-color: var(--theme-bg-solid);
  background-image:
    var(--theme-overlay-1),
    var(--theme-overlay-2),
    var(--theme-overlay-3),
    var(--theme-pattern),
    var(--theme-gradient);
  background-size:
    auto,
    auto,
    auto,
    720px 620px,
    cover;
  background-position:
    left top,
    right top,
    left bottom,
    center top,
    center center;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    no-repeat;
  background-attachment:
    fixed,
    fixed,
    fixed,
    scroll,
    scroll;
}

body[class*="bab-theme-"] .site-header {
  background: var(--theme-header-bg);
  backdrop-filter: blur(16px);
}

body[class*="bab-theme-"] .site-footer {
  background: var(--theme-footer-bg);
  backdrop-filter: blur(14px);
}

body[class*="bab-theme-"] .paper-label,
body[class*="bab-theme-"] .paper-label.small,
body[class*="bab-theme-"] .bab-card-top {
  background: var(--theme-label-bg);
  color: var(--theme-label-color);
}

body[class*="bab-theme-"] .paper-board,
body[class*="bab-theme-"] .paper-flap-card,
body[class*="bab-theme-"] .paper-accordion-item,
body[class*="bab-theme-"] .paper-tab,
body[class*="bab-theme-"] .paper-tab-panel,
body[class*="bab-theme-"] .paper-process-card,
body[class*="bab-theme-"] .paper-process-panel,
body[class*="bab-theme-"] .paper-timeline-node,
body[class*="bab-theme-"] .paper-chip,
body[class*="bab-theme-"] .keyword-legend-wrap,
body[class*="bab-theme-"] .mindmap-card,
body[class*="bab-theme-"] .paper-flow-card,
body[class*="bab-theme-"] .org-node,
body[class*="bab-theme-"] .metric-card,
body[class*="bab-theme-"] .editorial-card,
body[class*="bab-theme-"] .audience-card,
body[class*="bab-theme-"] .note-card,
body[class*="bab-theme-"] .value-card,
body[class*="bab-theme-"] .content-block,
body[class*="bab-theme-"] .current-focus-card,
body[class*="bab-theme-"] .search-wrap,
body[class*="bab-theme-"] .search-results,
body[class*="bab-theme-"] .search-empty {
  background: var(--theme-surface-bg);
  border-color: var(--theme-surface-border);
  box-shadow: var(--theme-surface-shadow);
}

/* Light refresh override supaya semua bab tidak lagi beige-dominant */
body[class*="bab-theme-"] {
  --theme-bg-solid: #f3f8ff;
  --theme-gradient: linear-gradient(180deg, #fcfdff 0%, #f2f7ff 52%, #eefbf9 100%);
}

/* =========================================================
   DARK MODE — semua bab automatik ikut
========================================================= */

html[data-theme="dark"] body[class*="bab-theme-"] {
  --theme-bg-solid: #0D0F1A;
  --theme-overlay-1: radial-gradient(circle at 12% 12%, rgba(99, 102, 241, 0.18), transparent 0 24%);
  --theme-overlay-2: radial-gradient(circle at 86% 12%, rgba(34, 211, 238, 0.12), transparent 0 22%);
  --theme-overlay-3: radial-gradient(circle at 16% 86%, rgba(129, 140, 248, 0.12), transparent 0 20%);
  --theme-pattern: none;
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0B0E1A 56%, #0A0C16 100%);

  --theme-surface-bg: rgba(21, 24, 41, 0.88);
  --theme-surface-border: rgba(129, 140, 248, 0.12);
  --theme-surface-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);

  --theme-header-bg: rgba(13, 15, 26, 0.92);
  --theme-footer-bg: rgba(13, 15, 26, 0.84);

  color: #E0E7FF;
}

html[data-theme="dark"] body[class*="bab-theme-"] .brand,
html[data-theme="dark"] body[class*="bab-theme-"] h1,
html[data-theme="dark"] body[class*="bab-theme-"] h2,
html[data-theme="dark"] body[class*="bab-theme-"] h3,
html[data-theme="dark"] body[class*="bab-theme-"] .point-heading {
  color: #EEF2FF !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .lead,
html[data-theme="dark"] body[class*="bab-theme-"] .point-line,
html[data-theme="dark"] body[class*="bab-theme-"] .preview-answer,
html[data-theme="dark"] body[class*="bab-theme-"] .footer-text,
html[data-theme="dark"] body[class*="bab-theme-"] .site-nav a,
html[data-theme="dark"] body[class*="bab-theme-"] .search-input,
html[data-theme="dark"] body[class*="bab-theme-"] .emoji-point-list span:last-child {
  color: #94A3B8 !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .site-header {
  border-bottom-color: rgba(129, 140, 248, 0.12) !important;
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] body[class*="bab-theme-"] .site-footer {
  border-top-color: rgba(129, 140, 248, 0.10) !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .site-nav {
  background: rgba(13, 15, 26, 0.96);
  border-color: rgba(129, 140, 248, 0.12) !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .nav-toggle,
html[data-theme="dark"] body[class*="bab-theme-"] .display-fab {
  background: #1A1D2E !important;
  color: #C7D2FE !important;
  border: 1px solid rgba(129, 140, 248, 0.14) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-label,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-label.small,
html[data-theme="dark"] body[class*="bab-theme-"] .bab-card-top {
  background-image: none !important;
  background-color: rgba(var(--theme-accent-rgb, 98, 126, 168), 0.16) !important;
  color: var(--theme-label-dark-color, #b9ccef) !important;
  border: 1px solid rgba(var(--theme-accent-rgb, 185, 204, 239), 0.16) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

/* Paper board & chip dark */
html[data-theme="dark"] body[class*="bab-theme-"] .paper-board,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-flap-card,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-accordion-item,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-tab,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-tab-panel,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-process-card,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-timeline-node,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-step,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-kingdom,
html[data-theme="dark"] body[class*="bab-theme-"] .mindmap-card,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-flow-card,
html[data-theme="dark"] body[class*="bab-theme-"] .org-node {
  background: rgba(21, 24, 41, 0.88) !important;
  border-color: rgba(129, 140, 248, 0.12) !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-chip {
  background: rgba(129, 140, 248, 0.07) !important;
  border-color: rgba(129, 140, 248, 0.14) !important;
  color: #C7D2FE !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-accordion-trigger:hover {
  background: rgba(129, 140, 248, 0.05) !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .keyword-legend-wrap {
  background: rgba(21, 24, 41, 0.65) !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .metric-card,
html[data-theme="dark"] body[class*="bab-theme-"] .content-block,
html[data-theme="dark"] body[class*="bab-theme-"] .note-card {
  background: rgba(21, 24, 41, 0.85) !important;
  border-color: rgba(129, 140, 248, 0.12) !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .answer-paper,
html[data-theme="dark"] body[class*="bab-theme-"] .paper-process-panel {
  background: rgba(21, 24, 41, 0.55) !important;
  border-color: rgba(129, 140, 248, 0.14) !important;
}

/* Strip dark mode automatik */
html[data-theme="dark"] body[class*="bab-theme-"] .paper-strip.strip-main {
  background: linear-gradient(90deg, rgba(212,170,96,0.18), rgba(180,140,60,0.14)) !important;
  color: #e2b56f !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-strip.strip-sub {
  background: linear-gradient(90deg, rgba(82,179,150,0.18), rgba(82,179,150,0.12)) !important;
  color: #79d2b8 !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-strip.strip-info {
  background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(99,160,255,0.14)) !important;
  color: #8eb9f7 !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-strip.strip-glossary {
  background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(167,139,250,0.14)) !important;
  color: #c0aaf8 !important;
}

html[data-theme="dark"] body[class*="bab-theme-"] .paper-strip.strip-summary {
  background: linear-gradient(90deg, rgba(244,63,94,0.16), rgba(255,100,130,0.12)) !important;
  color: #f48ca0 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  body[class*="bab-theme-"] {
    background-size: auto, auto, auto, 500px 430px, cover;
    background-attachment: scroll, scroll, scroll, scroll, scroll;
  }
}

/* =========================================================
   BAB 1 — WARISAN NEGARA BANGSA
========================================================= */

body.bab-theme-1 {
  --theme-accent-rgb: 82, 179, 150;
  --theme-label-bg: linear-gradient(90deg, #e5efdf, #d7e9cf);
  --theme-label-color: #315649;
  --theme-label-dark-color: #99dbc8;

  --theme-bg-solid: #efe9de;
  --theme-overlay-1: radial-gradient(circle at 8% 12%, rgba(63, 125, 95, 0.18), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(198, 153, 62, 0.18), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 78%, rgba(110, 78, 53, 0.10), transparent 0 15%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Crect width='640' height='640' fill='none'/%3E%3Cg opacity='0.17'%3E%3Cpath d='M78 96c28-22 58-22 86 0 28 22 58 22 86 0 28-22 58-22 86 0 28 22 58 22 86 0' fill='none' stroke='%23846a3d' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M78 148c28-22 58-22 86 0 28 22 58 22 86 0 28-22 58-22 86 0 28 22 58 22 86 0' fill='none' stroke='%23846a3d' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M78 200c28-22 58-22 86 0 28 22 58 22 86 0 28-22 58-22 86 0 28 22 58 22 86 0' fill='none' stroke='%23846a3d' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='520' cy='136' r='56' fill='none' stroke='%23506f58' stroke-width='4'/%3E%3Ccircle cx='520' cy='136' r='30' fill='none' stroke='%23506f58' stroke-width='3'/%3E%3Cpath d='M520 80v112M464 136h112' stroke='%23506f58' stroke-width='3'/%3E%3Cpath d='M120 432c22-16 42-24 60-24 20 0 38 8 54 24 16 16 34 24 54 24 18 0 38-8 60-24 22-16 42-24 60-24 20 0 38 8 54 24' fill='none' stroke='%23906f46' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M120 486c22-16 42-24 60-24 20 0 38 8 54 24 16 16 34 24 54 24 18 0 38-8 60-24 22-16 42-24 60-24 20 0 38 8 54 24' fill='none' stroke='%23906f46' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M84 566c48-18 94-18 142 0 48 18 94 18 142 0 48-18 94-18 142 0' fill='none' stroke='%235d7d6e' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cg opacity='0.08'%3E%3Cpath d='M84 280h472M84 306h472M84 332h472M84 358h472' stroke='%236e6151' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #f1eadb 0%, #e7dfcf 100%);
}

html[data-theme="dark"] body.bab-theme-1 {
  --theme-overlay-1: radial-gradient(circle at 8% 12%, rgba(82, 179, 150, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(212, 170, 96, 0.10), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 78%, rgba(118, 92, 68, 0.08), transparent 0 15%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Crect width='640' height='640' fill='none'/%3E%3Cg opacity='0.09'%3E%3Cpath d='M78 96c28-22 58-22 86 0 28 22 58 22 86 0 28-22 58-22 86 0 28 22 58 22 86 0' fill='none' stroke='%23b79b6a' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='520' cy='136' r='56' fill='none' stroke='%237abca9' stroke-width='4'/%3E%3Ccircle cx='520' cy='136' r='30' fill='none' stroke='%237abca9' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 2 — KEBANGKITAN NASIONALISME
========================================================= */

body.bab-theme-2 {
  --theme-accent-rgb: 88, 135, 206;
  --theme-label-bg: linear-gradient(90deg, #dbe8f4, #cdddf0);
  --theme-label-color: #294d80;
  --theme-label-dark-color: #a9c4f2;

  --theme-bg-solid: #efe8dc;
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(54, 99, 170, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 90% 16%, rgba(48, 130, 108, 0.15), transparent 0 15%);
  --theme-overlay-3: radial-gradient(circle at 22% 82%, rgba(159, 105, 48, 0.10), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.16'%3E%3Crect x='40' y='52' width='280' height='180' rx='12' fill='none' stroke='%23476284' stroke-width='3'/%3E%3Cline x1='64' y1='84' x2='296' y2='84' stroke='%23476284' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='64' y1='114' x2='280' y2='114' stroke='%23476284' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='64' y1='144' x2='292' y2='144' stroke='%23476284' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='64' y1='174' x2='250' y2='174' stroke='%23476284' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='378' y='58' width='330' height='164' rx='14' fill='none' stroke='%232f7a67' stroke-width='3'/%3E%3Cpath d='M402 92h282M402 124h250M402 156h268M402 188h210' stroke='%232f7a67' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M70 350c42-18 82-18 124 0 42 18 82 18 124 0 42-18 82-18 124 0 42 18 82 18 124 0' fill='none' stroke='%23ad7334' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M70 404c42-18 82-18 124 0 42 18 82 18 124 0 42-18 82-18 124 0 42 18 82 18 124 0' fill='none' stroke='%23ad7334' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M88 500c60 0 96 18 132 36 36 18 72 36 132 36 60 0 96-18 132-36 36-18 72-36 132-36' fill='none' stroke='%2350776d' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cg opacity='0.08'%3E%3Cline x1='0' y1='0' x2='760' y2='640' stroke='%23626d78' stroke-width='2'/%3E%3Cline x1='120' y1='0' x2='760' y2='540' stroke='%23626d78' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #efe8dc 0%, #e3dacb 100%);
}

html[data-theme="dark"] body.bab-theme-2 {
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(88, 135, 206, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 90% 16%, rgba(82, 179, 150, 0.08), transparent 0 15%);
  --theme-overlay-3: radial-gradient(circle at 22% 82%, rgba(180, 132, 86, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.09'%3E%3Crect x='40' y='52' width='280' height='180' rx='12' fill='none' stroke='%23b6c4d4' stroke-width='3'/%3E%3Crect x='378' y='58' width='330' height='164' rx='14' fill='none' stroke='%2378bdae' stroke-width='3'/%3E%3Cpath d='M70 350c42-18 82-18 124 0 42 18 82 18 124 0 42-18 82-18 124 0 42 18 82 18 124 0' fill='none' stroke='%23d1a16b' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 3 — KONFLIK DUNIA & PENDUDUKAN JEPUN
========================================================= */

body.bab-theme-3 {
  --theme-accent-rgb: 120, 138, 156;
  --theme-label-bg: linear-gradient(90deg, #dde4ea, #d0d9e2);
  --theme-label-color: #41576c;
  --theme-label-dark-color: #ccd7e1;

  --theme-bg-solid: #ece5d8;
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(79, 104, 132, 0.18), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(114, 128, 84, 0.16), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 20% 84%, rgba(148, 90, 72, 0.12), transparent 0 15%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='660' viewBox='0 0 760 660'%3E%3Crect width='760' height='660' fill='none'/%3E%3Cg opacity='0.16'%3E%3Cpath d='M78 120c48-30 110-42 172-30 32 6 58 4 92-8 34-12 64-16 104-8 36 8 74 24 114 48' fill='none' stroke='%23576780' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M98 200c58 16 118 22 178 12 38-6 70-2 110 10 38 12 84 18 138 10' fill='none' stroke='%23576780' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M112 296c42-22 88-32 138-28 44 4 80-2 124-20 42-18 86-24 142-18' fill='none' stroke='%23576780' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M122 404c26-12 50-18 78-18 30 0 56-8 86-26 30-18 62-28 104-30 38-2 74 6 116 26' fill='none' stroke='%23576780' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M184 96l64 24-64 26' fill='none' stroke='%23905d4a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M402 262l90-34' fill='none' stroke='%23905d4a' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M482 228l14 36-38 0' fill='none' stroke='%23905d4a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='152' cy='228' r='10' fill='none' stroke='%235a6f68' stroke-width='3'/%3E%3Ccircle cx='326' cy='174' r='10' fill='none' stroke='%235a6f68' stroke-width='3'/%3E%3Ccircle cx='564' cy='422' r='10' fill='none' stroke='%235a6f68' stroke-width='3'/%3E%3Crect x='72' y='514' width='272' height='90' rx='14' fill='none' stroke='%235a6f68' stroke-width='3'/%3E%3Cpath d='M102 544h212M102 572h182' stroke='%235a6f68' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cg opacity='0.07'%3E%3Cpath d='M0 110h760M0 220h760M0 330h760M0 440h760M0 550h760' stroke='%23656b72' stroke-width='2'/%3E%3Cpath d='M90 0v660M220 0v660M350 0v660M480 0v660M610 0v660' stroke='%23656b72' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #ece5d8 0%, #dfd5c6 100%);
}

html[data-theme="dark"] body.bab-theme-3 {
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(120, 138, 156, 0.12), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(136, 148, 98, 0.10), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 20% 84%, rgba(176, 108, 88, 0.08), transparent 0 15%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='660' viewBox='0 0 760 660'%3E%3Crect width='760' height='660' fill='none'/%3E%3Cg opacity='0.09'%3E%3Cpath d='M78 120c48-30 110-42 172-30 32 6 58 4 92-8 34-12 64-16 104-8 36 8 74 24 114 48' fill='none' stroke='%23b4c3cf' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M184 96l64 24-64 26' fill='none' stroke='%23d29a79' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='152' cy='228' r='10' fill='none' stroke='%2395b8aa' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 4 — ERA PERALIHAN KUASA BRITISH DI NEGARA KITA
========================================================= */

body.bab-theme-4 {
  --theme-accent-rgb: 98, 126, 168;
  --theme-label-bg: linear-gradient(90deg, #e2e7ef, #d5dde8);
  --theme-label-color: #465d77;
  --theme-label-dark-color: #b9ccef;

  --theme-bg-solid: #eee6d8;
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(84, 103, 132, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(58, 112, 104, 0.14), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(145, 108, 62, 0.10), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='660' viewBox='0 0 760 660'%3E%3Crect width='760' height='660' fill='none'/%3E%3Cg opacity='0.16'%3E%3Crect x='54' y='56' width='272' height='172' rx='14' fill='none' stroke='%23566a84' stroke-width='3'/%3E%3Cpath d='M86 92h208M86 124h176M86 156h196M86 188h148' stroke='%23566a84' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='622' cy='128' r='54' fill='none' stroke='%237b6442' stroke-width='4'/%3E%3Ccircle cx='622' cy='128' r='30' fill='none' stroke='%237b6442' stroke-width='3'/%3E%3Cpath d='M592 128h60M622 98v60' stroke='%237b6442' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='394' y='282' width='280' height='156' rx='14' fill='none' stroke='%234f7a6f' stroke-width='3'/%3E%3Cpath d='M426 316h216M426 348h194M426 380h208M426 412h152' stroke='%234f7a6f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M104 330c44 0 74 16 104 32 30 16 60 32 104 32 44 0 74-16 104-32 30-16 60-32 104-32' fill='none' stroke='%23a1763f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M104 392c44 0 74 16 104 32 30 16 60 32 104 32 44 0 74-16 104-32 30-16 60-32 104-32' fill='none' stroke='%23a1763f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M120 528h520' stroke='%236d665b' stroke-width='3' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3Cpath d='M206 496l48 32-48 32' fill='none' stroke='%23905d4a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M440 496l48 32-48 32' fill='none' stroke='%23905d4a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg opacity='0.07'%3E%3Cpath d='M0 120h760M0 240h760M0 360h760M0 480h760M0 600h760' stroke='%236b706f' stroke-width='2'/%3E%3Cpath d='M100 0v660M240 0v660M380 0v660M520 0v660M660 0v660' stroke='%236b706f' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #efe7d9 0%, #e2d7c8 100%);
}

html[data-theme="dark"] body.bab-theme-4 {
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(98, 126, 168, 0.11), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(86, 158, 145, 0.09), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(176, 130, 78, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='660' viewBox='0 0 760 660'%3E%3Crect width='760' height='660' fill='none'/%3E%3Cg opacity='0.09'%3E%3Crect x='54' y='56' width='272' height='172' rx='14' fill='none' stroke='%23b5c3d4' stroke-width='3'/%3E%3Cpath d='M86 92h208M86 124h176M86 156h196M86 188h148' stroke='%23b5c3d4' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='622' cy='128' r='54' fill='none' stroke='%23c89a64' stroke-width='4'/%3E%3Crect x='394' y='282' width='280' height='156' rx='14' fill='none' stroke='%2376b3a7' stroke-width='3'/%3E%3Cpath d='M120 528h520' stroke='%23969a99' stroke-width='3' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3Cpath d='M206 496l48 32-48 32' fill='none' stroke='%23d29a79' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M440 496l48 32-48 32' fill='none' stroke='%23d29a79' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 5 — PERSEKUTUAN TANAH MELAYU 1948
========================================================= */

body.bab-theme-5 {
  --theme-accent-rgb: 74, 132, 124;
  --theme-label-bg: linear-gradient(90deg, #dcece7, #cfe3dc);
  --theme-label-color: #315f57;
  --theme-label-dark-color: #9dd8cf;

  --theme-bg-solid: #ece5d8;
  --theme-overlay-1: radial-gradient(circle at 12% 12%, rgba(74, 132, 124, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 16%, rgba(181, 143, 78, 0.12), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 22% 82%, rgba(104, 118, 148, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Crect width='760' height='620' fill='none'/%3E%3Cg opacity='0.15'%3E%3Crect x='72' y='74' width='252' height='152' rx='14' fill='none' stroke='%234b6f69' stroke-width='3'/%3E%3Cpath d='M102 108h194M102 140h164M102 172h184' stroke='%234b6f69' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M400 132h238M400 164h198M400 196h218' stroke='%23907a4a' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='578' cy='432' r='58' fill='none' stroke='%23547492' stroke-width='4'/%3E%3Cpath d='M548 432h60M578 402v60' stroke='%23547492' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #efe8db 0%, #e1d7c7 100%);
}

html[data-theme="dark"] body.bab-theme-5 {
  --theme-overlay-1: radial-gradient(circle at 12% 12%, rgba(110, 185, 174, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 16%, rgba(201, 162, 96, 0.08), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 22% 82%, rgba(130, 152, 186, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Crect width='760' height='620' fill='none'/%3E%3Cg opacity='0.09'%3E%3Crect x='72' y='74' width='252' height='152' rx='14' fill='none' stroke='%2399d0c7' stroke-width='3'/%3E%3Cpath d='M400 132h238M400 164h198M400 196h218' stroke='%23d0af78' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='578' cy='432' r='58' fill='none' stroke='%23abc0d7' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 6 — ANCAMAN KOMUNIS & DARURAT
========================================================= */

body.bab-theme-6 {
  --theme-accent-rgb: 132, 70, 70;
  --theme-label-bg: linear-gradient(90deg, #efdede, #e5d2d2);
  --theme-label-color: #6f3e3e;
  --theme-label-dark-color: #e2b3b3;

  --theme-bg-solid: #ece4d9;
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(132, 70, 70, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 16%, rgba(104, 124, 92, 0.10), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(90, 108, 136, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.14'%3E%3Cpath d='M84 120h272M84 156h232M84 192h252' stroke='%23714a4a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M404 110l74 38-74 38' fill='none' stroke='%235f7287' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='590' cy='206' r='52' fill='none' stroke='%235f7287' stroke-width='4'/%3E%3Crect x='106' y='364' width='244' height='128' rx='14' fill='none' stroke='%23714a4a' stroke-width='3'/%3E%3Cpath d='M402 420h230M402 454h188' stroke='%238f7f50' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #eee5d8 0%, #dfd3c4 100%);
}

html[data-theme="dark"] body.bab-theme-6 {
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(176, 104, 104, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 16%, rgba(126, 148, 112, 0.08), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(132, 152, 188, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.09'%3E%3Cpath d='M84 120h272M84 156h232M84 192h252' stroke='%23d0a7a7' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M404 110l74 38-74 38' fill='none' stroke='%23b0bfd0' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='590' cy='206' r='52' fill='none' stroke='%23b0bfd0' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #1b1917 0%, #161412 100%);
}

/* =========================================================
   BAB 7 — USAHA KE ARAH KEMERDEKAAN
========================================================= */

body.bab-theme-7 {
  --theme-accent-rgb: 106, 88, 170;
  --theme-label-bg: linear-gradient(90deg, #e8e3f5, #ddd7ef);
  --theme-label-color: #584892;
  --theme-label-dark-color: #c5b8f2;

  --theme-bg-solid: #efe7dc;
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(106, 88, 170, 0.15), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(76, 138, 122, 0.10), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 22% 82%, rgba(182, 142, 82, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Crect width='760' height='620' fill='none'/%3E%3Cg opacity='0.15'%3E%3Ccircle cx='170' cy='158' r='66' fill='none' stroke='%235e4ea0' stroke-width='4'/%3E%3Cpath d='M138 158h64M170 126v64' stroke='%235e4ea0' stroke-width='3'/%3E%3Cpath d='M338 118h274M338 154h238M338 190h256' stroke='%23706c86' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='88' y='352' width='268' height='144' rx='16' fill='none' stroke='%234c7f72' stroke-width='3'/%3E%3Cpath d='M424 402c42-18 84-18 126 0 42 18 84 18 126 0' fill='none' stroke='%23a67b44' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #f0e8dc 0%, #e1d6c8 100%);
}

html[data-theme="dark"] body.bab-theme-7 {
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(156, 136, 220, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(98, 174, 152, 0.08), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 22% 82%, rgba(198, 160, 98, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Crect width='760' height='620' fill='none'/%3E%3Cg opacity='0.09'%3E%3Ccircle cx='170' cy='158' r='66' fill='none' stroke='%23c5b8f2' stroke-width='4'/%3E%3Cpath d='M338 118h274M338 154h238M338 190h256' stroke='%23b5b8c7' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='88' y='352' width='268' height='144' rx='16' fill='none' stroke='%2393d6c6' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 8 — PILIHAN RAYA
========================================================= */

body.bab-theme-8 {
  --theme-accent-rgb: 58, 124, 176;
  --theme-label-bg: linear-gradient(90deg, #deedf6, #d2e3ef);
  --theme-label-color: #2f6087;
  --theme-label-dark-color: #a7d0ee;

  --theme-bg-solid: #ece6da;
  --theme-overlay-1: radial-gradient(circle at 12% 10%, rgba(58, 124, 176, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 90% 16%, rgba(64, 132, 110, 0.10), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(176, 142, 82, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Crect width='760' height='620' fill='none'/%3E%3Cg opacity='0.15'%3E%3Crect x='86' y='88' width='126' height='86' rx='12' fill='none' stroke='%233c75aa' stroke-width='3'/%3E%3Cpath d='M116 130h66' stroke='%233c75aa' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='280' y='70' width='332' height='132' rx='16' fill='none' stroke='%23556a7d' stroke-width='3'/%3E%3Cpath d='M310 108h270M310 144h214' stroke='%23556a7d' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M112 404h498' stroke='%23907a48' stroke-width='3' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3Ccircle cx='170' cy='404' r='16' fill='none' stroke='%234d7b6f' stroke-width='4'/%3E%3Ccircle cx='370' cy='404' r='16' fill='none' stroke='%234d7b6f' stroke-width='4'/%3E%3Ccircle cx='570' cy='404' r='16' fill='none' stroke='%234d7b6f' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #efe8db 0%, #dfd4c5 100%);
}

html[data-theme="dark"] body.bab-theme-8 {
  --theme-overlay-1: radial-gradient(circle at 12% 10%, rgba(98, 176, 228, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 90% 16%, rgba(102, 182, 156, 0.08), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(198, 160, 102, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Crect width='760' height='620' fill='none'/%3E%3Cg opacity='0.09'%3E%3Crect x='86' y='88' width='126' height='86' rx='12' fill='none' stroke='%23a9d3ef' stroke-width='3'/%3E%3Crect x='280' y='70' width='332' height='132' rx='16' fill='none' stroke='%23b8c0cd' stroke-width='3'/%3E%3Cpath d='M112 404h498' stroke='%23d1b37c' stroke-width='3' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3Ccircle cx='170' cy='404' r='16' fill='none' stroke='%2394d7c7' stroke-width='4'/%3E%3Ccircle cx='370' cy='404' r='16' fill='none' stroke='%2394d7c7' stroke-width='4'/%3E%3Ccircle cx='570' cy='404' r='16' fill='none' stroke='%2394d7c7' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 9 — PERLEMBAGAAN PERSEKUTUAN TANAH MELAYU 1957
========================================================= */

body.bab-theme-9 {
  --theme-accent-rgb: 52, 120, 116;
  --theme-label-bg: linear-gradient(90deg, #dcece8, #d0e3de);
  --theme-label-color: #2e5e59;
  --theme-label-dark-color: #9fddd4;

  --theme-bg-solid: #ece5d8;
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(52, 120, 116, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(102, 120, 170, 0.10), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 20% 84%, rgba(176, 134, 84, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.15'%3E%3Crect x='74' y='78' width='286' height='156' rx='14' fill='none' stroke='%23417b73' stroke-width='3'/%3E%3Cpath d='M108 116h218M108 150h176M108 184h198' stroke='%23417b73' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='572' cy='152' r='62' fill='none' stroke='%235c7395' stroke-width='4'/%3E%3Ccircle cx='572' cy='152' r='34' fill='none' stroke='%235c7395' stroke-width='3'/%3E%3Cpath d='M120 444c44-18 88-18 132 0 44 18 88 18 132 0 44-18 88-18 132 0' fill='none' stroke='%239f7b46' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #efe7da 0%, #ded3c4 100%);
}

html[data-theme="dark"] body.bab-theme-9 {
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(90, 176, 168, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(134, 156, 212, 0.08), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 20% 84%, rgba(198, 160, 102, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.09'%3E%3Crect x='74' y='78' width='286' height='156' rx='14' fill='none' stroke='%2397ddd3' stroke-width='3'/%3E%3Ccircle cx='572' cy='152' r='62' fill='none' stroke='%23b5c4e8' stroke-width='4'/%3E%3Cpath d='M120 444c44-18 88-18 132 0 44 18 88 18 132 0 44-18 88-18 132 0' fill='none' stroke='%23d0b17c' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   BAB 10 — PEMASYHURAN KEMERDEKAAN
========================================================= */

body.bab-theme-10 {
  --theme-accent-rgb: 62, 132, 118;
  --theme-label-bg: linear-gradient(90deg, #dcefe8, #d1e6de);
  --theme-label-color: #2f6358;
  --theme-label-dark-color: #a4e0d2;

  --theme-bg-solid: #eee7da;
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(62, 132, 118, 0.16), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(196, 152, 76, 0.12), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(86, 110, 158, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.15'%3E%3Cpath d='M106 126h230M106 162h194M106 198h212' stroke='%23418173' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M406 118c40-28 86-28 126 0M406 162c40-28 86-28 126 0' fill='none' stroke='%23c08e44' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='168' cy='432' r='54' fill='none' stroke='%235c7394' stroke-width='4'/%3E%3Cpath d='M140 432h56M168 404v56' stroke='%235c7394' stroke-width='3'/%3E%3Crect x='384' y='372' width='248' height='132' rx='16' fill='none' stroke='%23418173' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #f0e8db 0%, #e0d5c6 100%);
}

html[data-theme="dark"] body.bab-theme-10 {
  --theme-overlay-1: radial-gradient(circle at 10% 10%, rgba(98, 182, 166, 0.10), transparent 0 18%);
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(224, 182, 104, 0.08), transparent 0 16%);
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(132, 154, 206, 0.08), transparent 0 14%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='640' viewBox='0 0 760 640'%3E%3Crect width='760' height='640' fill='none'/%3E%3Cg opacity='0.09'%3E%3Cpath d='M106 126h230M106 162h194M106 198h212' stroke='%239fe2d3' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M406 118c40-28 86-28 126 0M406 162c40-28 86-28 126 0' fill='none' stroke='%23d9b36f' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='168' cy='432' r='54' fill='none' stroke='%23b9c8e6' stroke-width='4'/%3E%3Crect x='384' y='372' width='248' height='132' rx='16' fill='none' stroke='%239fe2d3' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

/* =========================================================
   LIGHT REFRESH — paksa tona putih moden untuk semua bab
========================================================= */
body[class*="bab-theme-"] {
  --theme-bg-solid: #f7faff !important;
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(111, 167, 248, 0.14), transparent 0 20%) !important;
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(96, 216, 182, 0.10), transparent 0 18%) !important;
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(189, 149, 255, 0.10), transparent 0 16%) !important;
  --theme-pattern: none !important;
  --theme-gradient: linear-gradient(180deg, #ffffff 0%, #f8fbff 52%, #f4fbff 100%) !important;
  --theme-label-bg: linear-gradient(90deg, #edf5ff, #e4f0ff) !important;
  --theme-label-color: #315a86 !important;
  --theme-surface-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)) !important;
  --theme-surface-border: rgba(92, 110, 132, 0.16) !important;
  --theme-header-bg: rgba(255, 255, 255, 0.86) !important;
  --theme-footer-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(246, 251, 255, 0.84)) !important;
}

/* Pastikan dark mode kekal dominan walaupun light refresh guna !important */
html[data-theme="dark"] body[class*="bab-theme-"] {
  --theme-bg-solid: #0D0F1A !important;
  --theme-overlay-1: radial-gradient(circle at 10% 12%, rgba(99, 102, 241, 0.12), transparent 0 35%) !important;
  --theme-overlay-2: radial-gradient(circle at 88% 14%, rgba(34, 211, 238, 0.08), transparent 0 30%) !important;
  --theme-overlay-3: radial-gradient(circle at 18% 84%, rgba(129, 140, 248, 0.10), transparent 0 26%) !important;
  --theme-pattern: none !important;
  --theme-gradient: linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%) !important;
  --theme-label-bg: linear-gradient(90deg, rgba(99, 102, 241, 0.26), rgba(129, 140, 248, 0.22)) !important;
  --theme-label-color: #C7D2FE !important;
  --theme-surface-bg: rgba(21, 24, 41, 0.88) !important;
  --theme-surface-border: rgba(129, 140, 248, 0.12) !important;
  --theme-header-bg: rgba(13, 15, 26, 0.92) !important;
  --theme-footer-bg: rgba(13, 15, 26, 0.84) !important;
}

/* =========================================================
   RESTORE WAR BLOCK CHIPS
   Kekalkan supaya Bab 3 tidak rosak
========================================================= */

body .paper-chip.bloc-chip-central {
  color: #334155 !important;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
  border-color: rgba(71, 85, 105, 0.22) !important;
}

body .paper-chip.bloc-chip-entente {
  color: #14532d !important;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border-color: rgba(22, 101, 52, 0.20) !important;
}

body .paper-chip.bloc-chip-axis {
  color: #991b1b !important;
  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  border-color: rgba(153, 27, 27, 0.20) !important;
}

body .paper-chip.bloc-chip-allies {
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: rgba(29, 78, 216, 0.20) !important;
}

html[data-theme="dark"] body .paper-chip.bloc-chip-central {
  color: #94a3b8 !important;
  background: linear-gradient(135deg, rgba(30,40,55,0.92), rgba(25,35,50,0.92)) !important;
  border-color: rgba(148,163,184,0.20) !important;
}

html[data-theme="dark"] body .paper-chip.bloc-chip-entente {
  color: #86efac !important;
  background: linear-gradient(135deg, rgba(20,50,35,0.92), rgba(15,45,30,0.92)) !important;
  border-color: rgba(134,239,172,0.20) !important;
}

html[data-theme="dark"] body .paper-chip.bloc-chip-axis {
  color: #fca5a5 !important;
  background: linear-gradient(135deg, rgba(50,20,20,0.92), rgba(45,15,15,0.92)) !important;
  border-color: rgba(252,165,165,0.20) !important;
}

html[data-theme="dark"] body .paper-chip.bloc-chip-allies {
  color: #93c5fd !important;
  background: linear-gradient(135deg, rgba(20,35,65,0.92), rgba(15,30,60,0.92)) !important;
  border-color: rgba(147,197,253,0.20) !important;
                                     }