/* ═══════════════════════════════════════════════════════════
   SUBMANDIBULAR GANGLION – ANATOMY SEMINAR PRESENTATION
   Professional Medical Theme
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

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

:root {
  --primary:    #1a3c5e;
  --accent:     #e74c3c;
  --accent2:    #3498db;
  --accent3:    #27ae60;
  --gold:       #f39c12;
  --purple:     #9b59b6;
  --bg:         #0d1b2a;
  --slide-bg:   #ffffff;
  --text:       #1a1a2e;
  --text-light: #5a6a7a;
  --border:     #e0e8f0;
  --shadow:     0 8px 32px rgba(0,0,0,0.18);
  --radius:     12px;
  --font-head:  'Merriweather', serif;
  --font-body:  'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
}

/* ── PROGRESS BAR ── */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: rgba(255,255,255,0.1); z-index: 100;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, #3498db, #e74c3c);
  transition: width 0.4s ease; width: 5.56%;
}

/* ── SLIDE COUNTER ── */
.slide-counter {
  position: fixed; bottom: 20px; right: 24px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.6); z-index: 100;
  background: rgba(0,0,0,0.3); padding: 4px 12px; border-radius: 20px;
}

/* ── KEYBOARD HINT ── */
.key-hint {
  position: fixed; bottom: 20px; left: 24px;
  font-size: 11px; color: rgba(255,255,255,0.35); z-index: 100;
  font-family: var(--font-mono);
}

/* ── NAV BUTTONS ── */
.nav-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 100;
  font-size: 18px; font-weight: bold;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center;
}
.nav-btn:hover { background: rgba(255,255,255,0.25); color: white; transform: translateY(-50%) scale(1.1); }
.prev-btn { left: 12px; }
.next-btn { right: 12px; }
.nav-btn:disabled { opacity: 0.2; cursor: default; }

/* ── PRESENTATION CONTAINER ── */
.presentation {
  width: 100vw; height: 100vh;
  position: relative; overflow: hidden;
}

/* ── SLIDES ── */
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateX(60px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.slide.active {
  opacity: 1; pointer-events: all; transform: translateX(0);
}
.slide.exit-left {
  opacity: 0; transform: translateX(-60px);
}

/* ── SLIDE INNER ── */
.slide-inner {
  width: 100%; max-width: 1200px;
  padding: 28px 48px 20px;
  background: var(--slide-bg);
  overflow-y: auto;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: #ccc transparent;
}
.slide-inner::-webkit-scrollbar { width: 5px; }
.slide-inner::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ── TWO-COLUMN LAYOUT ── */
.slide-inner.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 24px;
}
.slide-header.full-width { grid-column: 1 / -1; }
.col-left, .col-right { overflow-y: auto; padding-bottom: 8px; }

/* ── SLIDE HEADER ── */
.slide-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.slide-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: white; background: var(--primary);
  padding: 3px 9px; border-radius: 4px; letter-spacing: 1px;
}
.slide-header h2 {
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: var(--primary); line-height: 1.2;
}

/* ── SLIDE INTRO ── */
.slide-intro {
  font-size: 14px; color: var(--text-light); margin-bottom: 16px;
  line-height: 1.6; max-width: 900px;
}

/* ═══════════════════════════════════════════════════════════
   TITLE SLIDE
═══════════════════════════════════════════════════════════ */
.title-slide {
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3c5e 50%, #0d2137 100%) !important;
  align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
  padding: 40px !important;
}
.title-badge {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: #3498db;
  border: 1px solid rgba(52,152,219,0.4); padding: 5px 18px; border-radius: 20px;
  margin-bottom: 20px;
}
.title-icon { font-size: 52px; margin-bottom: 16px; }
.main-title {
  font-family: var(--font-head); font-size: 52px; font-weight: 700;
  color: white; line-height: 1.15; margin-bottom: 16px;
}
.main-title .accent { color: #3498db; }
.subtitle {
  font-size: 16px; color: rgba(255,255,255,0.65); max-width: 560px;
  margin: 0 auto 32px; line-height: 1.6;
}
.title-meta {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 20px 32px; max-width: 520px; margin: 0 auto;
}
.meta-item { display: flex; gap: 12px; align-items: baseline; }
.meta-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: #3498db; min-width: 80px;
}
.meta-val { font-size: 13px; color: rgba(255,255,255,0.8); }
.title-deco {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(52,152,219,0.08) 0%, transparent 70%);
  top: -100px; right: -100px; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   CONTENTS SLIDE
═══════════════════════════════════════════════════════════ */
.contents-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  flex: 1;
}
.content-card {
  background: linear-gradient(135deg, #f8faff, #eef4ff);
  border: 1px solid #d0dff5; border-radius: 10px;
  padding: 16px 14px; display: flex; align-items: center; gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s; cursor: default;
}
.content-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(52,152,219,0.15); }
.cc-num {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: #3498db; min-width: 32px;
}
.cc-text { font-size: 13px; font-weight: 500; color: var(--primary); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════
   INFO BLOCKS
═══════════════════════════════════════════════════════════ */
.info-block {
  background: #f8faff; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.info-block.mt { margin-top: 12px; }
.ib-title {
  font-size: 13px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 2px solid #3498db;
}
.info-block p { font-size: 13px; line-height: 1.65; color: var(--text); margin-bottom: 8px; }
.info-block p:last-child { margin-bottom: 0; }

/* ── STYLED LIST ── */
.styled-list { list-style: none; padding: 0; margin: 6px 0; }
.styled-list li {
  font-size: 13px; line-height: 1.6; color: var(--text);
  padding: 3px 0 3px 18px; position: relative;
}
.styled-list li::before {
  content: '▸'; position: absolute; left: 0; color: #3498db; font-size: 11px; top: 5px;
}
.sub-list { margin-top: 4px; margin-left: 8px; }
.sub-list li::before { content: '–'; color: #95a5a6; }

/* ── TAGS ── */
.tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px; margin-right: 4px;
}
.ciliary { background: #e3f2fd; color: #1565c0; }
.pterygo { background: #f3e5f5; color: #6a1b9a; }
.otic { background: #e8f5e9; color: #1b5e20; }
.sub { background: #fce4ec; color: #880e4f; }
.highlight-tag { background: #e74c3c; color: white; }

/* ── FACT ROWS ── */
.fact-row {
  display: flex; gap: 12px; padding: 5px 0;
  border-bottom: 1px solid #eef2f7; font-size: 13px;
}
.fact-row:last-child { border-bottom: none; }
.fact-label { font-weight: 600; color: var(--primary); min-width: 130px; }
.fact-val { color: var(--text-light); }

/* ── DIAGRAM BOX ── */
.diagram-box {
  background: #f8faff; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; height: 100%;
  display: flex; flex-direction: column;
}
.diagram-title {
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 10px; text-align: center;
}
.anatomy-svg { width: 100%; flex: 1; }
.wide-svg { width: 100%; height: auto; }

/* ── RELATIONS TABLE ── */
.relations-table { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rel-row {
  display: flex; gap: 10px; align-items: center;
  padding: 5px 8px; background: white; border-radius: 6px;
  border: 1px solid #e8eef5; font-size: 12.5px;
}
.rel-dir {
  font-weight: 700; color: #e74c3c; min-width: 55px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.rel-str { color: var(--text); }

/* ── TWO FILAMENTS ── */
.two-filaments { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.filament-card {
  border-radius: 8px; padding: 10px 12px; font-size: 12px;
}
.filament-card.anterior { background: #e8f5e9; border: 1px solid #a5d6a7; }
.filament-card.posterior { background: #fce4ec; border: 1px solid #f48fb1; }
.fc-label { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.anterior .fc-label { color: #1b5e20; }
.posterior .fc-label { color: #880e4f; }
.fc-desc { font-size: 11.5px; line-height: 1.5; color: #444; }

/* ═══════════════════════════════════════════════════════════
   ROOTS GRID
═══════════════════════════════════════════════════════════ */
.roots-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  flex: 1; margin-bottom: 12px;
}
.root-card {
  border-radius: 12px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.root-card.parasym { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border: 1px solid #90caf9; }
.root-card.sympath { background: linear-gradient(135deg, #fce4ec, #f8bbd0); border: 1px solid #f48fb1; }
.root-card.sensory { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border: 1px solid #a5d6a7; }
.root-icon { font-size: 28px; }
.root-title { font-size: 15px; font-weight: 700; color: var(--primary); }
.root-subtitle { font-size: 11px; font-weight: 600; color: #666; margin-top: -4px; }
.root-card ul { list-style: none; padding: 0; flex: 1; }
.root-card ul li {
  font-size: 12px; line-height: 1.6; padding: 2px 0 2px 14px;
  position: relative; color: #333;
}
.root-card ul li::before { content: '•'; position: absolute; left: 0; color: #3498db; }
.root-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; margin-top: 6px; align-self: flex-start;
}
.root-badge.synapse { background: #27ae60; color: white; }
.root-badge.no-synapse { background: #e74c3c; color: white; }

/* ═══════════════════════════════════════════════════════════
   PATHWAY FLOW
═══════════════════════════════════════════════════════════ */
.pathway-flow { display: flex; flex-direction: column; gap: 0; }
.pf-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 8px; border-left: 3px solid transparent;
}
.pf-step.step1 { background: #e3f2fd; border-color: #2196f3; }
.pf-step.step2 { background: #f3e5f5; border-color: #9c27b0; }
.pf-step.step3 { background: #fff3e0; border-color: #ff9800; }
.pf-step.step4 { background: #fff8e1; border-color: #ffc107; }
.pf-step.step5 { background: #fce4ec; border-color: #e91e63; }
.pf-step.step6 { background: #e8f5e9; border-color: #4caf50; }
.pf-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: white;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.pf-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.pf-desc { font-size: 12px; line-height: 1.55; color: #444; }
.pf-arrow { text-align: center; font-size: 16px; color: #aaa; line-height: 1; padding: 2px 0; }

/* ═══════════════════════════════════════════════════════════
   COMPARE BOX
═══════════════════════════════════════════════════════════ */
.compare-box { border-radius: 8px; overflow: hidden; border: 1px solid #e0e8f0; margin-top: 8px; }
.cb-row {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr;
  font-size: 12px; padding: 6px 10px; gap: 8px;
  border-bottom: 1px solid #eef2f7;
}
.cb-row:last-child { border-bottom: none; }
.cb-row.header-row { background: var(--primary); color: white; font-weight: 600; font-size: 11px; }
.cb-row:not(.header-row):nth-child(even) { background: #f8faff; }
.yes { color: #27ae60; font-weight: 700; }
.no { color: #e74c3c; font-weight: 700; }

/* ── NOTE BOX ── */
.note-box {
  background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px;
  padding: 10px 12px; margin-top: 8px;
}
.note-box p { font-size: 12.5px; line-height: 1.6; color: #5d4037; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   BRANCH CARDS
═══════════════════════════════════════════════════════════ */
.branch-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.branch-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; border: 1px solid transparent;
}
.bc1 { background: #fce4ec; border-color: #f48fb1; }
.bc2 { background: #fff3e0; border-color: #ffcc80; }
.bc3 { background: #fff9c4; border-color: #fff176; }
.bc4 { background: #e8f5e9; border-color: #a5d6a7; }
.bc-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.bc-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.bc-content p { font-size: 12px; line-height: 1.55; color: #444; margin-bottom: 4px; }
.bc-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,0.08); color: #333;
  padding: 2px 8px; border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   HISTOLOGY TABLE
═══════════════════════════════════════════════════════════ */
.histo-table { border-radius: 8px; overflow: hidden; border: 1px solid #e0e8f0; margin-top: 8px; }
.ht-row {
  display: grid; grid-template-columns: 1.2fr 1.2fr 1.5fr;
  font-size: 12px; padding: 7px 10px; gap: 8px;
  border-bottom: 1px solid #eef2f7;
}
.ht-row:last-child { border-bottom: none; }
.ht-row.header { background: var(--primary); color: white; font-weight: 600; font-size: 11px; }
.ht-row:not(.header):nth-child(even) { background: #f8faff; }

/* ═══════════════════════════════════════════════════════════
   BIG TABLE (Comparison / Applied)
═══════════════════════════════════════════════════════════ */
.big-table-wrap { overflow-x: auto; flex: 1; }
.big-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  border-radius: 10px; overflow: hidden;
}
.big-table thead tr { background: var(--primary); color: white; }
.big-table th {
  padding: 10px 12px; text-align: left; font-size: 12px;
  font-weight: 600; letter-spacing: 0.3px;
}
.big-table th.highlight-col { background: #e74c3c; }
.big-table td {
  padding: 9px 12px; border-bottom: 1px solid #eef2f7;
  vertical-align: top; line-height: 1.5;
}
.big-table td.highlight-col { background: #fff5f5; font-weight: 500; }
.big-table td.row-label { font-weight: 600; color: var(--primary); background: #f8faff; }
.big-table tbody tr:hover { background: #f0f7ff; }
.big-table tbody tr:hover td.highlight-col { background: #ffe8e8; }

/* ═══════════════════════════════════════════════════════════
   FULL DIAGRAM SLIDE
═══════════════════════════════════════════════════════════ */
.full-diagram {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: #f8faff; border-radius: 10px; padding: 12px;
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   CLINICAL CARDS
═══════════════════════════════════════════════════════════ */
.clinical-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1;
}
.clinical-card {
  border-radius: 10px; padding: 14px 16px;
  border: 1px solid transparent;
}
.cc-red { background: #fce4ec; border-color: #f48fb1; }
.cc-blue { background: #e3f2fd; border-color: #90caf9; }
.cc-green { background: #e8f5e9; border-color: #a5d6a7; }
.cc-orange { background: #fff3e0; border-color: #ffcc80; }
.cc-purple { background: #f3e5f5; border-color: #ce93d8; }
.cc-teal { background: #e0f2f1; border-color: #80cbc4; }
.cc-dark { background: #eceff1; border-color: #b0bec5; }
.clinical-icon { font-size: 24px; margin-bottom: 6px; }
.clinical-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.clinical-card p { font-size: 12.5px; line-height: 1.6; color: #333; margin-bottom: 6px; }
.clinical-card ul { list-style: none; padding: 0; }
.clinical-card ul li {
  font-size: 12px; line-height: 1.6; padding: 2px 0 2px 14px; position: relative; color: #333;
}
.clinical-card ul li::before { content: '▸'; position: absolute; left: 0; color: #3498db; font-size: 10px; top: 5px; }
.clinical-mechanism {
  margin-top: 8px; padding: 6px 10px;
  background: rgba(0,0,0,0.05); border-radius: 6px;
  font-size: 11.5px; color: #444; line-height: 1.5;
}
.cm-label { font-weight: 700; color: var(--primary); }

/* ── DRUG TABLE ── */
.drug-table { border-radius: 6px; overflow: hidden; border: 1px solid #cfd8dc; margin-top: 8px; }
.dt-row {
  display: grid; grid-template-columns: 1fr 2fr;
  font-size: 12px; padding: 5px 8px; gap: 8px;
  border-bottom: 1px solid #eceff1;
}
.dt-row:last-child { border-bottom: none; }
.dt-row.header { background: #546e7a; color: white; font-weight: 600; font-size: 11px; }
.dt-row:not(.header):nth-child(even) { background: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════════════════
   VIVA GRID
═══════════════════════════════════════════════════════════ */
.viva-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1;
}
.viva-card {
  background: #f8faff; border: 1px solid #d0dff5;
  border-radius: 10px; padding: 12px 14px;
  border-left: 4px solid #3498db;
}
.viva-q {
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin-bottom: 6px; line-height: 1.4;
}
.viva-a {
  font-size: 12px; line-height: 1.6; color: #444;
  background: white; border-radius: 6px; padding: 8px 10px;
  border: 1px solid #e8eef5;
}

/* ═══════════════════════════════════════════════════════════
   SUMMARY GRID
═══════════════════════════════════════════════════════════ */
.summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1;
}
.sum-card {
  border-radius: 10px; padding: 14px 12px;
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid transparent;
}
.s1 { background: #e3f2fd; border-color: #90caf9; }
.s2 { background: #e8f5e9; border-color: #a5d6a7; }
.s3 { background: #f3e5f5; border-color: #ce93d8; }
.s4 { background: #fce4ec; border-color: #f48fb1; }
.s5 { background: #fff3e0; border-color: #ffcc80; }
.s6 { background: #e0f2f1; border-color: #80cbc4; }
.s7 { background: #fff9c4; border-color: #fff176; }
.s8 { background: #eceff1; border-color: #b0bec5; }
.sum-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: white;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sum-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
.sum-content p { font-size: 12px; line-height: 1.55; color: #444; }

/* ═══════════════════════════════════════════════════════════
   KEY POINT BOX
═══════════════════════════════════════════════════════════ */
.key-point-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 1px solid #ffe082; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; line-height: 1.6; color: #5d4037;
  margin-top: 12px;
}
.key-point-box.mt { margin-top: 14px; }
.kp-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════
   REFERENCES SLIDE
═══════════════════════════════════════════════════════════ */
.ref-slide {
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3c5e 100%) !important;
  padding: 32px 48px !important;
}
.ref-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.ref-icon { font-size: 36px; }
.ref-header h2 {
  font-family: var(--font-head); font-size: 28px; font-weight: 700; color: white;
}
.ref-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ref-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 12px 16px;
}
.ref-item.primary { background: rgba(52,152,219,0.12); border-color: rgba(52,152,219,0.3); }
.ref-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: #3498db; color: white;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ref-title { font-size: 14px; font-weight: 700; color: white; margin-bottom: 3px; }
.ref-detail { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.ref-chapter { font-size: 11.5px; color: rgba(255,255,255,0.45); }
.ref-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; margin-top: 4px;
}
.primary-badge { background: #3498db; color: white; }
.thank-you {
  text-align: center; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ty-text {
  font-family: var(--font-head); font-size: 32px; font-weight: 700;
  color: white; margin-bottom: 6px;
}
.ty-sub { font-size: 14px; color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .slide-inner { padding: 18px 20px; }
  .slide-inner.two-col { grid-template-columns: 1fr; }
  .roots-grid { grid-template-columns: 1fr; }
  .contents-grid { grid-template-columns: repeat(2, 1fr); }
  .clinical-grid { grid-template-columns: 1fr; }
  .viva-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .main-title { font-size: 36px; }
}