/* ================================================================
   StudyHub STS BPS-14 — Shared Stylesheet
   Fonts : Sora (headings) · DM Sans (body) · JetBrains Mono (code)
   Theme : Deep Cosmos · Light + Dark · Full responsive
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── 1. CSS CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
  /* Brand palette */
  --primary:          #6C63FF;
  --primary-dark:     #4F46E5;
  --primary-light:    #A5B4FC;
  --primary-glow:     rgba(108,99,255,0.18);

  --accent:           #00C9A7;
  --accent-warm:      #FF6B35;
  --danger:           #FF4D6D;
  --gold:             #F59E0B;

  /* Surface & background */
  --bg:               #F5F5FF;
  --bg-2:             #ECEAFD;
  --surface:          #FFFFFF;
  --surface-glass:    rgba(255,255,255,0.78);
  --surface-glass-2:  rgba(245,245,255,0.60);

  /* Borders */
  --border:           rgba(108,99,255,0.12);
  --border-med:       rgba(108,99,255,0.22);
  --border-strong:    rgba(108,99,255,0.40);

  /* Text */
  --text:             #18163A;
  --text-2:           #4B4780;
  --text-3:           #8785B2;
  --text-inv:         #FFFFFF;

  /* Shadows */
  --shadow-xs:        0 1px 4px  rgba(108,99,255,0.06);
  --shadow-sm:        0 3px 12px rgba(108,99,255,0.09);
  --shadow:           0 8px 32px rgba(108,99,255,0.13);
  --shadow-lg:        0 20px 60px rgba(108,99,255,0.18);
  --shadow-glow:      0 0 40px   rgba(108,99,255,0.22);

  /* Radii */
  --r-xs:   0.4rem;
  --r-sm:   0.75rem;
  --r:      1.25rem;
  --r-lg:   2rem;
  --r-xl:   2.5rem;

  /* Layout */
  --nav-h:    68px;
  --fbar-h:   54px;
  --max-w:    1160px;

  /* Fonts */
  --ff-head:  'Sora', sans-serif;
  --ff-body:  'DM Sans', sans-serif;
  --ff-mono:  'JetBrains Mono', monospace;

  /* Easing */
  --ease:         cubic-bezier(0.4,0,0.2,1);
  --ease-spring:  cubic-bezier(0.34,1.56,0.64,1);
  --t:            0.28s;

  /* Per-topic accent (overridden in each page) */
  --topic:        var(--primary);
  --topic-dark:   var(--primary-dark);
  --topic-glow:   var(--primary-glow);
  --topic-light:  #EEF0FF;
  --topic-rgb:    108,99,255;
}

[data-theme="dark"] {
  --bg:               #0D0D1E;
  --bg-2:             #131327;
  --surface:          #1B1B30;
  --surface-glass:    rgba(27,27,48,0.88);
  --surface-glass-2:  rgba(13,13,30,0.70);

  --border:           rgba(108,99,255,0.16);
  --border-med:       rgba(108,99,255,0.28);
  --border-strong:    rgba(108,99,255,0.45);

  --text:             #E8E8F8;
  --text-2:           #9090C4;
  --text-3:           #55558A;

  --shadow-xs:        0 1px 4px  rgba(0,0,0,0.25);
  --shadow-sm:        0 3px 12px rgba(0,0,0,0.35);
  --shadow:           0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:        0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow:      0 0 40px   rgba(108,99,255,0.28);
}

/* ── 2. RESET & BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Selection */
::selection { background: var(--primary-glow); color: var(--text); }

/* Links */
a { color: var(--topic); text-decoration: none; transition: opacity var(--t); }
a:hover { opacity: 0.8; }

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

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-head);
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);  font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem;   font-weight: 600; }

p { color: var(--text-2); margin-bottom: 0.6rem; }
p:last-child { margin-bottom: 0; }

/* Inline code */
code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  background: var(--bg-2);
  color: var(--primary);
  padding: 0.15em 0.45em;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
}

/* ── Override global code styles inside dark formula boxes ── */
/* Prevents the light bg-2 background bleeding into dark containers */
.math-formula code,
.math-formula .mf-eq,
.math-formula .mf-note,
.math-formula .mf-label {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.math-formula code.mf-eq  { color: #F1F5F9 !important; font-size: 1.05rem !important; font-weight: 700 !important; }
.math-formula code.mf-note { color: #CBD5E1 !important; font-size: 0.73rem !important; }
.math-formula code.mf-label { color: var(--topic) !important; font-size: 0.69rem !important; }

/* Rule cards use <code class="rule-eq"> — keep dark text on light card bg */
.rule-card code.rule-eq {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

ul, ol {
  padding-left: 1.5rem;
  color: var(--text-2);
}
li { margin-bottom: 0.3rem; }

/* ── 4. LAYOUT ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-body {
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: calc(var(--fbar-h) + 3rem);
  min-height: 100dvh;
}

/* Background orbs (decorative) */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: orbFloat 20s infinite alternate ease-in-out;
}
[data-theme="dark"] .bg-orbs span { opacity: 0.15; }

.bg-orbs span:nth-child(1) {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--topic), transparent 70%);
  top: -200px; left: -100px;
  animation-delay: 0s;
}
.bg-orbs span:nth-child(2) {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  bottom: -150px; right: -100px;
  animation-delay: -7s;
}
.bg-orbs span:nth-child(3) {
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  top: 50%; left: 60%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%  { transform: translate(0,0) scale(1); }
  100%{ transform: translate(40px,60px) scale(1.1); }
}

/* Relative wrapper so content sits above orbs */
.page-content { position: relative; z-index: 1; }

/* ── 5. NAVIGATION ─────────────────────────────────────────────── */
.topnav, #topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 200;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: var(--surface-glass);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: visible;
}

.topnav .container, #topnav .container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
}

/* burger hidden on desktop — shown in mobile media query */
.nav-burger { display: none; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  min-width: 0;
}
.nav-brand-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-brand-icon:hover .brand-icon {
  opacity: 0.85;
}
.nav-brand .brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--topic), var(--topic-dark));
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  transition: all var(--t) var(--ease);
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--topic-glow);
  color: var(--topic);
  opacity: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── 5b. JS-BUILT NAV COMPONENTS ──────────────────────────────── */
#topnav { min-height: var(--nav-h); }

/* burger — desktop hidden, mobile shown via media query */
.nav-burger {
  display: none;
  place-items: center;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-search{position:relative;flex:1;min-width:0;max-width:280px;}
.nav-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:0.8rem;pointer-events:none;}
.nav-search input{width:100%;height:34px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-2);font-size:0.83rem;padding:0 0.75rem 0 2rem;color:var(--text);outline:none;transition:border-color var(--t);box-sizing:border-box;}
.nav-search input:focus{border-color:var(--primary);}
.nav-search input::placeholder{color:var(--text-3);}

.nav-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border-med);border-radius:var(--r-sm);padding:0.4rem;z-index:400;box-shadow:var(--shadow);}
.nsr-group{font-size:0.69rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-3);padding:0.4rem 0.6rem 0.2rem;}
.nsr-item{display:flex;align-items:center;gap:0.6rem;padding:0.45rem 0.6rem;border-radius:var(--r-xs);cursor:pointer;font-size:0.82rem;color:var(--text-2);}
.nsr-item:hover{background:var(--bg-2);color:var(--text);}
.nsr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.nsr-subject{font-size:0.72rem;color:var(--text-3);margin-left:auto;}

.nav-subjects-btn{display:flex;align-items:center;gap:0.35rem;font-size:0.82rem;font-weight:600;color:var(--text-2);padding:0.35rem 0.75rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-2);cursor:pointer;white-space:nowrap;transition:border-color var(--t),color var(--t);flex-shrink:0;}
.nav-subjects-btn:hover{border-color:var(--primary);color:var(--primary);}
.nav-subjects-dropdown{position:fixed;top:var(--nav-h);right:1rem;background:var(--surface);border:1px solid var(--border-med);border-radius:var(--r-sm);padding:0.6rem;z-index:400;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;min-width:320px;}
.nsd-card{padding:0.6rem 0.75rem;border-radius:var(--r-xs);border:1px solid var(--border);cursor:pointer;transition:border-color var(--t),background var(--t);text-decoration:none;display:block;}
.nsd-card:hover{border-color:var(--primary);background:var(--bg-2);}
.nsd-name{font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:0.15rem;display:flex;align-items:center;gap:0.4rem;}
.nsd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.nsd-count{font-size:0.71rem;color:var(--text-3);}

.ctx-pill{display:flex;align-items:center;gap:0.3rem;font-size:0.78rem;overflow:hidden;}
.ctx-subject{color:var(--text-3);font-weight:500;white-space:nowrap;}
.ctx-sep{color:var(--text-3);font-size:0.7rem;flex-shrink:0;}
.ctx-current{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.nav-drawer{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border-med);z-index:199;padding:0.75rem 1rem 1rem;box-shadow:var(--shadow);}
.nav-drawer-label{font-size:0.69rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-3);margin:0.5rem 0 0.25rem;}
.nav-drawer-label:first-child{margin-top:0;}
.nav-drawer-toggle{display:flex;align-items:center;cursor:pointer;user-select:none;}
.nav-drawer-toggle:hover{color:var(--text-2);}
.nav-drawer-link{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.6rem;border-radius:var(--r-xs);font-size:0.85rem;color:var(--text-2);cursor:pointer;text-decoration:none;transition:background var(--t),color var(--t);}
.nav-drawer-link:hover{background:var(--bg-2);color:var(--text);}
.nav-drawer-divider{height:1px;background:var(--border);margin:0.5rem 0;}
.nav-drawer-home{color:var(--text);font-weight:600;}

@media(max-width:768px){
  .nav-search{display:none;}
  .nav-search.mobile-open{
    display:flex;
    position:fixed;
    top:var(--nav-h);
    left:0;right:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:0.65rem 1rem;
    z-index:300;
    box-shadow:var(--shadow);
    max-width:100%;
    flex:none;
  }
  .nav-search.mobile-open input{
    width:100%;
    height:38px;
    font-size:0.9rem;
  }
  .nav-search-results{
    top:100%;
    left:0;right:0;
  }
  .nav-mob-search{display:grid !important;}
  .nav-subjects-btn{display:none;}
  .nav-subjects-dropdown{display:none !important;}
}



.icon-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-glass);
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), opacity var(--t);
}
.icon-btn:hover {
  background: var(--topic-glow);
  color: var(--topic);
  border-color: var(--border-med);
  opacity: 1;
  transform: translateY(-1px);
}

/* ── 7. BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--topic), var(--topic-dark));
  color: white;
  box-shadow: 0 4px 20px var(--topic-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--topic-glow);
  opacity: 1;
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--topic);
  border: 1.5px solid var(--border-med);
}
.btn-outline:hover {
  background: var(--topic-glow);
  border-color: var(--topic);
  opacity: 1;
  color: var(--topic);
}

.btn-ghost {
  background: var(--surface-glass);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--bg-2);
  color: var(--text);
  opacity: 1;
}

.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; }

/* Mark complete button */
.btn-complete {
  background: transparent;
  color: var(--text-3);
  border: 1.5px dashed var(--border-med);
  transition: color var(--t), border-color var(--t), background var(--t);
  width: 36px; height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.btn-complete span { display: none; }
.btn-complete:hover, .btn-complete.done {
  background: rgba(0,201,167,0.12);
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}
.btn-complete.done { cursor: default; }

/* ── 8. CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--topic), var(--accent));
  opacity: 0;
  transition: opacity var(--t);
}

.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.card-icon {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--topic-light);
  color: var(--topic);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: background var(--t);
}
[data-theme="dark"] .card-icon {
  background: rgba(var(--topic-rgb),0.18);
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.card-subtitle {
  font-size: 0.82rem;
  color: var(--text-3);
  margin: 0;
}

/* Grid layouts */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.cards-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ── 9. FORMULA BOX ────────────────────────────────────────────── */
.formula-box {
  background: var(--topic-light);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  position: relative;
}
[data-theme="dark"] .formula-box {
  background: rgba(var(--topic-rgb),0.08);
}

.formula-box .formula-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--topic);
  margin-bottom: 0.4rem;
}

.formula-box .formula-eq {
  font-family: var(--ff-mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 0.25rem;
}

.formula-box .formula-note {
  font-size: 0.82rem;
  color: var(--text-2);
}

.formula-inline {
  font-family: var(--ff-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--topic);
  background: var(--topic-light);
  padding: 0.2em 0.55em;
  border-radius: var(--r-xs);
  white-space: nowrap;
}
[data-theme="dark"] .formula-inline {
  background: rgba(var(--topic-rgb),0.15);
}

/* MCQ Tip box */
.tip-box {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(255,107,53,0.08));
  border: 1.5px solid rgba(245,158,11,0.3);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-2);
}
.tip-box strong {
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--ff-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── 10. TABLES ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin: 0.75rem 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  white-space: nowrap;
}

.data-table thead th {
  background: var(--topic-light);
  color: var(--topic);
  font-family: var(--ff-head);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1.5px solid var(--border-med);
}
[data-theme="dark"] .data-table thead th {
  background: rgba(var(--topic-rgb),0.12);
}

.data-table tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  white-space: normal;
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td {
  background: rgba(var(--topic-rgb),0.04);
}
.data-table tbody td:first-child { font-weight: 600; color: var(--text); }

/* ── 11. TOPIC HERO ────────────────────────────────────────────── */
.topic-hero {
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
}

.topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--topic);
  background: var(--topic-light);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
[data-theme="dark"] .topic-badge {
  background: rgba(var(--topic-rgb),0.15);
}

.topic-hero h1 {
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--topic), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topic-hero p {
  font-size: 1.05rem;
  max-width: 620px;
}

.section-spacer { margin-top: 2.5rem; }

/* Section heading inside page */
.section-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.section-heading .sh-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--topic), var(--topic-dark));
  border-radius: var(--r-sm);
  color: white;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.section-heading h2 { font-size: 1.35rem; margin: 0; }

/* ── 12. ANIMATION CARD ─────────────────────────────────────────── */
.anim-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.anim-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.anim-title { font-size: 1rem; font-weight: 700; margin: 0; }
.anim-subtitle { font-size: 0.82rem; color: var(--text-3); }

.anim-canvas-wrap {
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 280px;
}
[data-theme="dark"] .anim-canvas-wrap { background: var(--bg); }

.anim-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
}

.anim-controls {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 160px;
}
.control-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  min-width: 80px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--bg-2);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--topic);
  border: 2px solid white;
  box-shadow: 0 2px 6px var(--topic-glow);
  cursor: pointer;
  transition: transform var(--t);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--topic);
  border: 2px solid white;
  cursor: pointer;
}

.slider-val {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  color: var(--topic);
  min-width: 36px;
  text-align: right;
}

/* ── 13. STICKY FORMULA BAR ─────────────────────────────────────── */
#formula-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--fbar-h);
  z-index: 150;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: var(--surface-glass);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 0;
  overflow: hidden;
}

.fbar-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
  flex-shrink: 0;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fbar-formulas {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.fbar-formulas::-webkit-scrollbar { display: none; }

.fbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  background: var(--topic-light);
  border: 1px solid var(--border-med);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .fbar-pill { background: rgba(var(--topic-rgb),0.12); }

.fbar-pill .fbar-name {
  font-size: 0.7rem;
  color: var(--text-2);
  font-weight: 600;
}
.fbar-pill .fbar-eq {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--topic);
}

/* ── 14. MCQ FLOATING BUTTON ────────────────────────────────────── */
#mcq-fab {
  position: fixed;
  bottom: calc(var(--fbar-h) + 1rem);
  right: 1.5rem;
  z-index: 160;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--topic), var(--topic-dark));
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px var(--topic-glow);
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  transition: all var(--t) var(--ease-spring);
}
#mcq-fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: var(--shadow-glow); }

#mcq-fab .fab-tooltip {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
}
#mcq-fab:hover .fab-tooltip { opacity: 1; }

/* ── 15. MCQ MODAL ──────────────────────────────────────────────── */
#mcq-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(13,13,30,0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
#mcq-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#mcq-modal {
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
  width: 100%;
  max-width: 520px;
  padding: 2rem;
  transform: translateY(80px);
  transition: transform var(--t) var(--ease-spring);
  box-shadow: var(--shadow-lg);
}
#mcq-overlay.open #mcq-modal { transform: translateY(0); }

.mcq-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.mcq-title {
  font-family: var(--ff-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.mcq-counter {
  font-size: 0.8rem;
  color: var(--text-3);
  font-family: var(--ff-mono);
}

.mcq-progress-track {
  height: 4px;
  background: var(--bg-2);
  border-radius: 99px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.mcq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--topic), var(--accent));
  border-radius: 99px;
  transition: width 0.4s var(--ease);
}

.mcq-question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.mcq-options {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.mcq-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  font-size: 0.9rem;
  color: var(--text-2);
  background: var(--bg);
}
.mcq-opt:hover:not(.disabled) {
  border-color: var(--topic);
  color: var(--text);
  background: var(--topic-light);
}
.mcq-opt.correct {
  border-color: var(--accent);
  background: rgba(0,201,167,0.1);
  color: var(--accent);
}
.mcq-opt.wrong {
  border-color: var(--danger);
  background: rgba(255,77,109,0.08);
  color: var(--danger);
}
.mcq-opt.disabled { cursor: default; }

.mcq-opt .opt-key {
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--ff-mono);
  flex-shrink: 0;
  transition: all var(--t);
}
.mcq-opt.correct .opt-key { background: var(--accent); border-color: var(--accent); color: white; }
.mcq-opt.wrong   .opt-key { background: var(--danger);  border-color: var(--danger);  color: white; }

.mcq-explanation {
  font-size: 0.85rem;
  color: var(--text-2);
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--topic);
  display: none;
}
.mcq-explanation.show { display: block; }

.mcq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mcq-score {
  font-size: 0.82rem;
  color: var(--text-3);
  font-family: var(--ff-mono);
}

/* ── 16. INDEX – HERO ───────────────────────────────────────────── */
.index-hero {
  text-align: center;
  padding: 3.5rem 0 2rem;
}
.index-hero .eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 0.75rem;
  display: block;
}
.index-hero h1 span {
  background: linear-gradient(135deg, var(--primary) 20%, var(--accent) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.index-hero .hero-desc {
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0.75rem auto 2rem;
}

/* Progress ring */
.progress-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
}
.progress-ring-svg { transform: rotate(-90deg); }
.progress-ring-track { fill: none; stroke: var(--bg-2); stroke-width: 6; }
.progress-ring-fill {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease);
}
.progress-ring-label {
  font-family: var(--ff-head);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}
.progress-ring-sub {
  font-size: 0.7rem;
  color: var(--text-3);
}
.progress-caption {
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ── 17. INDEX – TOPIC CARDS ────────────────────────────────────── */
.topic-card {
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  backdrop-filter: blur(10px);
}
.topic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--tc-glow,transparent));
  pointer-events: none;
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--tc-color, var(--border-med));
  opacity: 1;
}

.topic-card .tc-icon {
  width: 52px; height: 52px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.tc-header { display: flex; align-items: center; gap: 0.9rem; }
.tc-title {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tc-num {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.tc-desc { font-size: 0.85rem; color: var(--text-2); }
.tc-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tc-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.tc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.tc-status {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.tc-status.done { color: var(--accent); }
.tc-arrow { color: var(--text-3); font-size: 0.9rem; transition: transform var(--t); }
.topic-card:hover .tc-arrow { transform: translateX(4px); }

/* ── 18. REVISION CARD ──────────────────────────────────────────── */
.revision-card {
  background: linear-gradient(135deg,
    rgba(var(--topic-rgb),0.06),
    rgba(0,201,167,0.04));
  border: 1.5px solid var(--border-med);
}

/* ── 19. SCIENTISTS TABLE ───────────────────────────────────────── */
.scientists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.scientist-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: all var(--t);
}
.scientist-card:hover { border-color: var(--border-med); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sci-emoji { font-size: 1.6rem; }
.sci-name { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.sci-contrib { font-size: 0.78rem; color: var(--text-2); }

/* ── 20. UTILITIES ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.badge-primary { background: var(--topic-light); color: var(--topic); }
.badge-success  { background: rgba(0,201,167,0.12); color: var(--accent); }
.badge-warn     { background: rgba(245,158,11,0.12); color: var(--gold); }
.badge-danger   { background: rgba(255,77,109,0.12); color: var(--danger); }

.divider { height: 1px; background: var(--border); margin: 2rem 0; }

.text-topic   { color: var(--topic); }
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-3); }
.font-mono    { font-family: var(--ff-mono); }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
.small        { font-size: 0.82rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ── 21. TOPIC NAV (prev / next) ────────────────────────────────── */
.topic-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}
.topic-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-med);
  background: var(--surface-glass);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all var(--t);
  max-width: 45%;
  backdrop-filter: blur(8px);
}
.topic-nav-btn:hover {
  border-color: var(--topic);
  color: var(--topic);
  background: var(--topic-light);
}
.topic-nav-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.topic-nav-label {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.topic-nav-direction {
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.topic-nav-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.topic-nav-spacer { flex: 1; }

/* ── 22. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  /* Nav: brand takes remaining space, actions on right */
  .nav-brand {
    font-size: 0.9rem;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .nav-brand .brand-icon {
    width: 30px; height: 30px;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  .nav-brand span:not(.brand-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    z-index: 199;
    gap: 0.25rem;
    box-shadow: var(--shadow);
  }
  .nav-links.open a { padding: 0.6rem 1rem; display: block; border-radius: var(--r-sm); }

  .nav-actions {
    gap: 0.35rem;
    flex-shrink: 0;
  }
  }
  .nav-burger {
    display: grid;
    width: 36px; height: 36px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .icon-btn {
    width: 34px; height: 34px;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  .cards-grid { grid-template-columns: 1fr; }
  .anim-controls { flex-direction: column; align-items: stretch; }

  h1 { font-size: 1.9rem; }
  .topic-hero h1 { font-size: 1.7rem; }

  #formula-bar { padding: 0 1rem; }
  .fbar-label span { display: none; }

  .mcq-footer { flex-wrap: wrap; }

  .topic-nav-name { max-width: 110px; }
  .topic-nav-btn  { padding: 0.55rem 0.8rem; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .card { padding: 1.25rem; }
  .anim-header { flex-direction: column; align-items: flex-start; }
  .topic-nav-name { max-width: 80px; }
}

/* ── 22. MORE DETAIL ────────────────────────────────────────────── */
.more-detail-wrap {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.more-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--topic);
  background: transparent;
  color: var(--topic);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--ff-sans, inherit);
  cursor: pointer;
  transition: all var(--t);
  user-select: none;
}
.more-detail-btn:hover {
  background: var(--topic-light);
}
.more-detail-btn[aria-expanded="true"] {
  background: var(--topic);
  color: white;
}
.more-detail-chevron {
  font-size: 0.69rem;
  transition: transform var(--t);
}
.more-detail-btn[aria-expanded="true"] .more-detail-chevron {
  transform: rotate(180deg);
}
.more-detail-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.more-detail-inner {
  margin-top: 0.85rem;
  padding: 1.25rem 1.4rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--topic);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-2);
  max-height: 420px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.more-detail-inner::-webkit-scrollbar { width: 5px; }
.more-detail-inner::-webkit-scrollbar-track { background: transparent; }
.more-detail-inner::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 999px; }
.more-detail-inner::-webkit-scrollbar-thumb:hover { background: var(--topic); }
.more-detail-inner h1,
.more-detail-inner h2,
.more-detail-inner h3 {
  font-family: var(--ff-head);
  color: var(--topic);
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}
.more-detail-inner p { margin-bottom: 0.6rem; }
.more-detail-inner ul,
.more-detail-inner ol  { padding-left: 1.4rem; margin-bottom: 0.6rem; }
.more-detail-inner li  { margin-bottom: 0.25rem; }
.more-detail-inner strong { color: var(--text); }
.more-detail-inner code {
  font-family: var(--ff-mono);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.8rem;
}
.more-detail-inner blockquote {
  border-left: 3px solid var(--topic);
  padding-left: 0.85rem;
  margin: 0.5rem 0;
  color: var(--text-3);
  font-style: italic;
}
.more-detail-inner table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 0.75rem; }
.more-detail-inner th,
.more-detail-inner td { padding: 0.4rem 0.7rem; border: 1px solid var(--border); text-align: left; }
.more-detail-inner th  { background: var(--bg); font-weight: 700; color: var(--text); }
.more-detail-msg {
  color: var(--text-3);
  font-style: italic;
  font-size: 0.8rem;
}
.more-detail-msg code {
  font-family: var(--ff-mono);
  background: var(--bg);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-style: normal;
}


/* ── Mobile table handling ────────────────────────────────────── */
/* Keep wide reference tables scrollable */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll .data-table { min-width: 480px; }

/* Shrink 4-col tables on mobile */
@media (max-width: 768px) {
  .data-table th,
  .data-table td {
    font-size: 0.78rem;
    padding: 0.45rem 0.55rem;
  }
}
@media (max-width: 480px) {
  .data-table th,
  .data-table td {
    font-size: 0.73rem;
    padding: 0.35rem 0.45rem;
  }
}

/* Prose cards — stacked on mobile, table on desktop */
.prose-cards-wrap { display: none; }
.table-wrap-desktop { display: block; }

@media (max-width: 700px) {
  .prose-cards-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
  .table-wrap-desktop { display: none; }
  .prose-card-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--topic);
  }
  .prose-card-item .pc-head {
    font-family: var(--ff-head);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
  }
  .prose-card-item .pc-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
  }
  .prose-card-item .pc-label {
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
  }
  .prose-card-item .pc-value {
    color: var(--text-2);
    line-height: 1.45;
  }
}

/* ── 23. PRINT STYLES ───────────────────────────────────────────── */
@media print {
  .topnav, #formula-bar, #mcq-fab, #mcq-overlay,
  .bg-orbs, .anim-card, .btn-complete { display: none !important; }

  body {
    background: white !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  .page-body { padding-top: 1rem !important; padding-bottom: 0 !important; }

  .card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1pt solid #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: white !important;
    margin-bottom: 12pt;
  }

  .formula-box {
    background: #f5f5f5 !important;
    border: 1pt dashed #666 !important;
  }

  .data-table thead th { background: #eee !important; }

  a { color: #000; text-decoration: none; }

  h1, h2, h3 { color: #000 !important; -webkit-text-fill-color: #000 !important; }

  @page {
    margin: 1.5cm;
    size: A4;
  }
}

/* ── 23. SCROLL ANIMATION ───────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── 18. TOPIC NAV BAR (prev/next) ─────────────────────────────── */