:root {
  --bg: #F6F7FF;
  --paper: #ffffff;
  --paper-soft: #F0F1FF;
  --paper-warm: #F8F9FF;
  --paper-note: #F2F3FF;
  --ink: #1E1B4B;
  --muted: #6B7280;
  --line: rgba(79, 70, 229, 0.10);
  --line-strong: rgba(79, 70, 229, 0.18);
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --accent: #06B6D4;
  --shadow-soft: 0 4px 16px rgba(79, 70, 229, 0.07);
  --shadow-medium: 0 8px 28px rgba(79, 70, 229, 0.10);
  --shadow-strong: 0 18px 48px rgba(79, 70, 229, 0.13);
  --radius: 22px;
  --radius-sm: 14px;

  /* Safe area insets (notch / Dynamic Island / home indicator) */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --bottom-nav-h: 56px;

  /* Dark mode transition */
  --theme-transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Prevent only horizontal overscroll — keeps pull-to-refresh (swipe down) working */
html { overscroll-behavior-x: none; }
html, body { background-color: var(--paper); }

body {
  background:
    radial-gradient(ellipse at 12% 35%, rgba(99, 102, 241, 0.11) 0%, transparent 48%),
    radial-gradient(ellipse at 88% 12%, rgba(6, 182, 212, 0.08) 0%, transparent 42%),
    radial-gradient(ellipse at 48% 92%, rgba(139, 92, 246, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #F6F7FF 55%, #EEF0FF 100%);
  min-height: 100vh;
}

/* =========================
   DARK MODE TOKENS — Deep Navy
   Terinspirasi Linear, Arc, Vercel Dark
========================= */
[data-theme="dark"] {
  --bg: #0D0F1A;
  --paper: #151829;
  --paper-soft: #1A1D2E;
  --paper-warm: #171A2B;
  --paper-note: #131525;
  --ink: #E0E7FF;
  --muted: #94A3B8;
  --line: rgba(129, 140, 248, 0.10);
  --line-strong: rgba(129, 140, 248, 0.18);
  --primary: #818CF8;
  --primary-dark: #6366F1;
  --accent: #22D3EE;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.32);
  --shadow-medium: 0 8px 28px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 18px 48px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.12), transparent 35%),
    radial-gradient(ellipse at top right, rgba(6, 182, 212, 0.07), transparent 30%),
    linear-gradient(180deg, #0D0F1A 0%, #0A0C16 100%);
}

[data-theme="dark"] .site-header {
  background: rgba(13, 15, 26, 0.92);
  border-bottom-color: rgba(129, 140, 248, 0.12);
}

[data-theme="dark"] .section-soft {
  background: rgba(21, 24, 41, 0.7);
}

[data-theme="dark"] .site-footer {
  background: rgba(13, 15, 26, 0.80);
  border-top-color: rgba(129, 140, 248, 0.10);
}

[data-theme="dark"] .site-nav {
  background: rgba(13, 15, 26, 0.98);
}

[data-theme="dark"] .hero-panel {
  background: rgba(21, 24, 41, 0.95);
  border-color: rgba(129, 140, 248, 0.14);
}

[data-theme="dark"] .hero-panel-top span {
  background: rgba(129, 140, 248, 0.18);
}

[data-theme="dark"] .proof-pill {
  background: rgba(129, 140, 248, 0.07);
}

[data-theme="dark"] .metric-card,
[data-theme="dark"] .editorial-card,
[data-theme="dark"] .audience-card,
[data-theme="dark"] .note-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .content-block {
  background: rgba(21, 24, 41, 0.85);
  border-color: rgba(129, 140, 248, 0.10);
}

[data-theme="dark"] .paper-board {
  background: var(--paper);
}

[data-theme="dark"] .paper-board::before {
  background: rgba(129, 140, 248, 0.08);
}

[data-theme="dark"] .paper-flap-card {
  background: var(--paper);
}

[data-theme="dark"] .flap-top {
  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(129,140,248,0.12));
  color: #a5b4fc;
}

[data-theme="dark"] .answer-paper {
  background: rgba(21, 24, 41, 0.55);
  border-color: rgba(129, 140, 248, 0.14);
}

[data-theme="dark"] .info-paper {
  background: linear-gradient(135deg, rgba(13, 18, 38, 0.85), rgba(11, 16, 34, 0.85));
  border-color: rgba(59, 130, 246, 0.18);
}

[data-theme="dark"] .glossary-paper {
  background: linear-gradient(135deg, rgba(20, 13, 42, 0.85), rgba(16, 10, 36, 0.85));
  border-color: rgba(109, 40, 217, 0.20);
}

[data-theme="dark"] .summary-paper {
  background: linear-gradient(135deg, rgba(30, 14, 18, 0.80), rgba(26, 10, 15, 0.80));
  border-color: rgba(244, 63, 94, 0.18);
}

[data-theme="dark"] .master-summary-paper {
  background: linear-gradient(135deg, rgba(13, 22, 42, 0.85), rgba(11, 18, 36, 0.85));
  border-color: rgba(129, 140, 248, 0.22);
}

[data-theme="dark"] .current-focus-card {
  background: linear-gradient(135deg, rgba(21,24,41,0.96), rgba(17,20,35,0.96));
}

[data-theme="dark"] .homepage-focus-section .paper-board {
  background: linear-gradient(135deg, rgba(21,24,41,0.96), rgba(17,20,35,0.96));
}

[data-theme="dark"] .bab-card {
  background: linear-gradient(135deg, rgba(21,24,41,0.95), rgba(17,20,35,0.95));
}

[data-theme="dark"] .bab-card-top {
  background: rgba(129, 140, 248, 0.15);
  color: #a5b4fc;
}

[data-theme="dark"] .bab-card-time {
  color: #94A3B8;
}

[data-theme="dark"] .bab-status-badge {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.22);
  color: #c7d2fe;
}



[data-theme="dark"] .bab-card-theme-1 { background: linear-gradient(135deg, rgba(95, 50, 13, 0.32), rgba(72, 35, 10, 0.34)); border-color: rgba(251, 146, 60, 0.28); }
[data-theme="dark"] .bab-card-theme-2 { background: linear-gradient(135deg, rgba(9, 65, 98, 0.32), rgba(8, 48, 72, 0.34)); border-color: rgba(56, 189, 248, 0.28); }
[data-theme="dark"] .bab-card-theme-3 { background: linear-gradient(135deg, rgba(16, 90, 50, 0.3), rgba(13, 68, 38, 0.34)); border-color: rgba(74, 222, 128, 0.28); }
[data-theme="dark"] .bab-card-theme-4 { background: linear-gradient(135deg, rgba(62, 33, 126, 0.3), rgba(49, 25, 102, 0.34)); border-color: rgba(167, 139, 250, 0.28); }
[data-theme="dark"] .bab-card-theme-5 { background: linear-gradient(135deg, rgba(122, 26, 85, 0.28), rgba(92, 20, 63, 0.34)); border-color: rgba(244, 114, 182, 0.28); }
[data-theme="dark"] .bab-card-theme-6 { background: linear-gradient(135deg, rgba(9, 82, 80, 0.3), rgba(8, 60, 58, 0.34)); border-color: rgba(45, 212, 191, 0.28); }
[data-theme="dark"] .bab-card-theme-7 { background: linear-gradient(135deg, rgba(118, 86, 8, 0.28), rgba(89, 64, 6, 0.34)); border-color: rgba(250, 204, 21, 0.28); }

[data-theme="dark"] .paper-chip {
  background: rgba(129, 140, 248, 0.06);
  border-color: rgba(129, 140, 248, 0.12);
}

[data-theme="dark"] .paper-kingdom {
  background: linear-gradient(135deg, rgba(21,24,41,0.95), rgba(17,20,35,0.95));
}

[data-theme="dark"] .paper-accordion-item {
  background: rgba(21, 24, 41, 0.85);
}

[data-theme="dark"] .paper-accordion-trigger:hover {
  background: rgba(129, 140, 248, 0.05);
}

[data-theme="dark"] .paper-tab {
  background: linear-gradient(135deg, rgba(21,24,41,0.95), rgba(17,20,35,0.95));
}

[data-theme="dark"] .paper-tab-panel {
  background: var(--paper);
}

[data-theme="dark"] .paper-process-card {
  background: linear-gradient(135deg, rgba(21,24,41,0.95), rgba(17,20,35,0.95));
}

[data-theme="dark"] .paper-process-panel {
  background: rgba(21, 24, 41, 0.55);
  border-color: rgba(129, 140, 248, 0.13);
}

[data-theme="dark"] .paper-timeline-node {
  background: linear-gradient(135deg, rgba(21,24,41,0.95), rgba(17,20,35,0.95));
}

[data-theme="dark"] .paper-step {
  background: linear-gradient(135deg, rgba(21,24,41,0.95), rgba(17,20,35,0.95));
}

[data-theme="dark"] .mindmap-card {
  background: rgba(21,24,41,0.85);
}

[data-theme="dark"] .paper-flow-card {
  background: rgba(21,24,41,0.85);
}

[data-theme="dark"] .org-node {
  background: rgba(21, 24, 41, 0.9);
}

[data-theme="dark"] .keyword-legend-wrap {
  background: rgba(21, 24, 41, 0.65);
}

[data-theme="dark"] .bloc-legend-item {
  background: rgba(21, 30, 46, 0.88);
}

[data-theme="dark"] .mini-points span {
  background: var(--paper);
}

[data-theme="dark"] .preview-reading-card {
  background: var(--paper-warm);
}

[data-theme="dark"] .preview-mini-grid span {
  background: var(--paper);
}

/* Paper strips dark */
[data-theme="dark"] .paper-strip.strip-main {
  background: linear-gradient(90deg, rgba(247,220,168,0.18), rgba(245,207,134,0.15));
  color: #e8b96a;
}
[data-theme="dark"] .paper-strip.strip-sub {
  background: linear-gradient(90deg, rgba(74,170,143,0.18), rgba(74,170,143,0.12));
  color: #6fcfb5;
}
[data-theme="dark"] .paper-strip.strip-info {
  background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(99,160,255,0.14));
  color: #7ab4f5;
}
[data-theme="dark"] .paper-strip.strip-glossary {
  background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(167,139,250,0.14));
  color: #b49af7;
}
[data-theme="dark"] .paper-strip.strip-summary {
  background: linear-gradient(90deg, rgba(244,63,94,0.16), rgba(255,100,130,0.12));
  color: #f4758a;
}

/* Paper label dark */
[data-theme="dark"] .paper-label {
  background: rgba(129, 140, 248, 0.15);
  color: #a5b4fc;
}
[data-theme="dark"] .paper-label.small {
  background: linear-gradient(90deg, rgba(129,140,248,0.15), rgba(129,140,248,0.10));
  color: #a5b4fc;
}

/* Keyword highlights light — Global */
.kw-tokoh { color: #9f1239; background: rgba(255, 228, 230, 0.92); }
.kw-masa { color: #1e40af; background: rgba(219, 234, 254, 0.92); }
.kw-tahun { color: #075985; background: rgba(224, 242, 254, 0.94); }
.kw-tempat { color: #166534; background: rgba(220, 252, 231, 0.92); }
.kw-konsep { color: #9a3412; background: rgba(255, 237, 213, 0.94); }
.kw-kerajaan { color: #6d28d9; background: rgba(237, 233, 254, 0.94); }
.kw-istilah { color: #0f766e; background: rgba(204, 251, 241, 0.94); }
.kw-pentadbiran { color: #92400e; background: rgba(254, 243, 199, 0.94); }
.kw-perjanjian { color: #be185d; background: rgba(252, 231, 243, 0.94); }
.kw-peristiwa { color: #b45309; background: rgba(254, 249, 195, 0.94); }
.kw-gerakan { color: #7e22ce; background: rgba(243, 232, 255, 0.94); }
.kw-pertubuhan { color: #4338ca; background: rgba(224, 231, 255, 0.94); }
.kw-karya { color: #0e7490; background: rgba(207, 250, 254, 0.94); }

/* Keyword highlights dark — Global */
[data-theme="dark"] .kw-tokoh { color: #e8828f; background: rgba(232, 130, 143, 0.12); }
[data-theme="dark"] .kw-masa { color: #82a8e0; background: rgba(130, 168, 224, 0.12); }
[data-theme="dark"] .kw-tahun { color: #8ecae6; background: rgba(8, 47, 73, 0.34); }
[data-theme="dark"] .kw-tempat { color: #7ec49a; background: rgba(126, 196, 154, 0.12); }
[data-theme="dark"] .kw-konsep { color: #fdba74; background: rgba(124, 45, 18, 0.34); }
[data-theme="dark"] .kw-kerajaan { color: #c4b5fd; background: rgba(76, 29, 149, 0.34); }
[data-theme="dark"] .kw-istilah { color: #5ec4b4; background: rgba(94, 196, 180, 0.12); }
[data-theme="dark"] .kw-pentadbiran { color: #facc15; background: rgba(113, 63, 18, 0.34); }
[data-theme="dark"] .kw-perjanjian { color: #f9a8d4; background: rgba(131, 24, 67, 0.34); }
[data-theme="dark"] .kw-peristiwa { color: #fcd34d; background: rgba(120, 53, 15, 0.34); }
[data-theme="dark"] .kw-gerakan { color: #d8b4fe; background: rgba(88, 28, 135, 0.34); }
[data-theme="dark"] .kw-pertubuhan { color: #a5b4fc; background: rgba(49, 46, 129, 0.34); }
[data-theme="dark"] .kw-karya { color: #67e8f9; background: rgba(21, 94, 117, 0.34); }

/* Bloc dark */
[data-theme="dark"] .bloc-central { color: #94a3b8; background: rgba(226, 232, 240, 0.1); }
[data-theme="dark"] .bloc-triple-entente { color: #86efac; background: rgba(220, 252, 231, 0.1); }
[data-theme="dark"] .bloc-axis { color: #fca5a5; background: rgba(254, 226, 226, 0.1); }
[data-theme="dark"] .bloc-allies { color: #93c5fd; background: rgba(219, 234, 254, 0.1); }

[data-theme="dark"] .paper-chip.bloc-chip-central { color: #94a3b8; background: linear-gradient(135deg, rgba(30,40,55,0.9), rgba(25,35,50,0.9)); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .paper-chip.bloc-chip-entente { color: #86efac; background: linear-gradient(135deg, rgba(20,50,35,0.9), rgba(15,45,30,0.9)); border-color: rgba(134,239,172,0.2); }
[data-theme="dark"] .paper-chip.bloc-chip-axis { color: #fca5a5; background: linear-gradient(135deg, rgba(50,20,20,0.9), rgba(45,15,15,0.9)); border-color: rgba(252,165,165,0.2); }
[data-theme="dark"] .paper-chip.bloc-chip-allies { color: #93c5fd; background: linear-gradient(135deg, rgba(20,35,65,0.9), rgba(15,30,60,0.9)); border-color: rgba(147,197,253,0.2); }

[data-theme="dark"] .bloc-box-central { background: linear-gradient(135deg, rgba(30,40,55,0.8), rgba(25,35,50,0.8)); border-color: rgba(148,163,184,0.18); }
[data-theme="dark"] .bloc-box-entente { background: linear-gradient(135deg, rgba(20,50,35,0.8), rgba(15,45,30,0.8)); border-color: rgba(134,239,172,0.18); }
[data-theme="dark"] .bloc-box-axis { background: linear-gradient(135deg, rgba(50,20,20,0.8), rgba(45,15,15,0.8)); border-color: rgba(252,165,165,0.18); }
[data-theme="dark"] .bloc-box-allies { background: linear-gradient(135deg, rgba(20,35,65,0.8), rgba(15,30,60,0.8)); border-color: rgba(147,197,253,0.18); }

/* Search dark */
[data-theme="dark"] .search-result-item {
  background: var(--paper);
}
[data-theme="dark"] .search-result-tag {
  background: rgba(129, 140, 248, 0.18);
  color: #a5b4fc;
}
[data-theme="dark"] .search-result-excerpt mark {
  background: rgba(129, 140, 248, 0.18);
  color: #a5b4fc;
}
[data-theme="dark"] .search-empty {
  background: var(--paper);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background:
    radial-gradient(ellipse at 12% 35%, rgba(99, 102, 241, 0.11) 0%, transparent 48%),
    radial-gradient(ellipse at 88% 12%, rgba(6, 182, 212, 0.08) 0%, transparent 42%),
    radial-gradient(ellipse at 48% 92%, rgba(139, 92, 246, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #F6F7FF 55%, #EEF0FF 100%);
  transition: var(--theme-transition);
}


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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(1100px, calc(100% - 2.5rem));
  margin: 0 auto;
}

.narrow {
  width: min(780px, 100%);
}

.note-wide {
  max-width: 1180px;
}

.note-section-wide .container.narrow,
.note-section-wide .container.note-wide {
  max-width: 1180px;
}

.section {
  padding: 4rem 0;
}

.section-soft {
  background: rgba(240, 241, 255, 0.55);
  backdrop-filter: blur(8px);
  transition: background 0.35s ease;
}