/* ═══════════════════════════════════════════════════════════════
   OmicsLab Simulator — Main Stylesheet
   Professional dark lab aesthetic with glassmorphism
   ═══════════════════════════════════════════════════════════════ */
/* Fonts are loaded via <link> in index.html for better performance */

/* ── Reset & Custom Properties ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.lab-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; pointer-events: none; }

:root {
  /* Surfaces */
  --bg:          #080c10;
  --surface-1:   #0d1117;
  --surface-2:   #161b22;
  --surface-3:   #21262d;
  --surface-4:   #2d333b;

  /* Borders */
  --border:      #30363d;
  --border-dim:  #21262d;

  /* Text */
  --text:        #e6edf3;
  --text-muted:  #8b949e;
  --text-dim:    #484f58;

  /* Domain accent colours */
  --genomics:    #58a6ff;
  --transcripto: #3fb950;
  --epigenomics: #d2a8ff;
  --metagenomics:#ffa657;
  --metabolomics:#f78166;
  --proteomics:  #79c0ff;
  --virology:    #ff7b72;
  --multiomics:  #e3b341;

  /* Status */
  --success:     #3fb950;
  --warning:     #d29922;
  --danger:      #e5534b;
  --info:        #58a6ff;

  /* Shadows / glows */
  --glow-green:  0 0 20px rgba(63,185,80,0.25);
  --glow-blue:   0 0 20px rgba(88,166,255,0.25);
  --glow-red:    0 0 20px rgba(229,83,75,0.25);

  /* Layout */
  --bench-left:   280px;
  --bench-right:  300px;
  --topbar-h:     56px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    24px;

  /* Font */
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── Ambient mesh gradient (3 radial, 3–5% opacity) ─────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 12% 38%, rgba(63,185,80,0.045) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 84% 18%, rgba(88,166,255,0.035) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 55% 88%, rgba(188,140,255,0.030) 0%, transparent 58%);
}

/* ── Global display typography (Sora) ───────────────────────── */
h1, h2, h3,
.section-title,
.hiw-section-title,
.home-cta-title,
.page-route-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: clamp(2rem,   4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.6rem); }

/* ── Page navigation animations ──────────────────────────────── */
@keyframes pageIn  { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pageOut { from { opacity: 1; transform: translateX(0); }   to { opacity: 0; transform: translateX(-10px); } }
.page-entering { animation: pageIn  0.2s cubic-bezier(.16,1,.3,1) both; }
.page-leaving  { animation: pageOut 0.15s ease-in forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .page-entering { animation: none; opacity: 1; }
  .page-leaving  { animation: none; opacity: 0; }
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-1); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ── Utility ────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.text-muted { color: var(--text-muted); }
.text-mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════ */
#screen-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Landing Nav ── */
.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border-dim);
  backdrop-filter: blur(12px);
  background: rgba(8,12,16,0.8);
  position: sticky; top: 0; z-index: 100;
}

.logo-mark {
  display: flex; align-items: center; gap: 0.75rem;
}
.logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #3fb950, #58a6ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.logo-text {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.3px;
}
.logo-text span { color: var(--success); }

.nav-pills {
  display: flex; gap: 0.5rem;
}
.nav-pill {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
}
.nav-pill:hover { border-color: var(--success); color: var(--success); }
.nav-pill.active { background: var(--success); border-color: var(--success); color: #000; }

/* ── Learn dropdown ─────────────────────────────────────────── */
.nav-learn-wrap { position: relative; }
.nav-learn-btn {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  display: flex; align-items: center; gap: 0.35rem;
  transition: all 0.2s;
}
.nav-learn-btn:hover, .nav-learn-btn.open {
  border-color: #58a6ff; color: #58a6ff;
}
.nav-learn-btn .nav-caret { font-size: 0.65rem; transition: transform 0.2s; }
.nav-learn-btn.open .nav-caret { transform: rotate(180deg); }

.nav-learn-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem;
  min-width: 200px;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.nav-learn-dropdown.open { display: block; }
.nav-learn-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.83rem; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  background: transparent; border: none; width: 100%; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-learn-item:hover { background: rgba(88,166,255,0.1); color: #58a6ff; }
.nav-learn-item .nli-icon { font-size: 1rem; min-width: 20px; text-align: center; }
.nav-learn-divider { height: 1px; background: var(--border); margin: 0.3rem 0.5rem; }

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 5rem 4rem 4rem;
  background:
    radial-gradient(ellipse 70% 60% at 20% 40%, rgba(63,185,80,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(88,166,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(210,168,255,0.05) 0%, transparent 50%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

/* Dot grid */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--surface-3) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  pointer-events: none;
}

/* Animated DNA strands */
.hero-dna {
  position: absolute; right: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: hidden;
  opacity: 0.07;
}
.dna-strand {
  position: absolute; top: 0; height: 100%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--success), transparent);
}
.strand-a { left: 52%; animation: strand-drift 8s ease-in-out infinite alternate; }
.strand-b { left: 55%; animation: strand-drift 8s ease-in-out infinite alternate-reverse; }
@keyframes strand-drift { from { transform: translateX(-20px) scaleY(1); } to { transform: translateX(20px) scaleY(0.95); } }

.dna-rung {
  position: absolute; height: 1px;
  background: linear-gradient(90deg, transparent, var(--success), transparent);
  left: 50%; transform: translateX(-50%);
  width: 60px;
}
.r1 { top: 10%; animation: rung-pulse 3s 0.0s infinite; }
.r2 { top: 22%; animation: rung-pulse 3s 0.4s infinite; }
.r3 { top: 34%; animation: rung-pulse 3s 0.8s infinite; }
.r4 { top: 46%; animation: rung-pulse 3s 1.2s infinite; }
.r5 { top: 58%; animation: rung-pulse 3s 1.6s infinite; }
.r6 { top: 70%; animation: rung-pulse 3s 2.0s infinite; }
@keyframes rung-pulse {
  0%,100% { opacity: 0.3; width: 40px; }
  50%      { opacity: 1;   width: 70px; }
}

/* Hero left */
.hero-left {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 0;
  position: relative; z-index: 1;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(63,185,80,0.1);
  border: 1px solid rgba(63,185,80,0.3);
  color: var(--success);
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s infinite;
}

.hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.hero h1 .accent { color: var(--success); }

.hero-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 480px;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.hero-cta {
  display: flex; gap: 0.85rem; flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.btn-hero {
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-md);
  font-size: 0.92rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  border: none;
}
.btn-hero-primary {
  background: var(--success);
  color: #000;
  box-shadow: 0 0 24px rgba(63,185,80,0.35);
}
.btn-hero-primary:hover { background: #4adb5e; transform: translateY(-2px); box-shadow: 0 0 36px rgba(63,185,80,0.5); }
.btn-hero-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-hero-secondary:hover { border-color: var(--success); color: var(--success); }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.trust-chip {
  font-size: 0.7rem; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 0.2rem 0.75rem;
}
.trust-chip.trust-africa {
  color: var(--success);
  background: rgba(63,185,80,0.07);
  border-color: rgba(63,185,80,0.2);
}

/* Hero right */
.hero-right {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ── Sim Preview Card ── */
.sim-preview-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%; max-width: 480px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(63,185,80,0.1);
  animation: card-float 4s ease-in-out infinite;
}
@keyframes card-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.spc-topbar {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 1rem;
}
.spc-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.spc-dot.r { background: #ff5f57; }
.spc-dot.y { background: #febc2e; }
.spc-dot.g { background: #28c840; }
.spc-title {
  font-size: 0.75rem; color: var(--text-muted);
  font-family: var(--font-mono);
  margin-left: 0.35rem; flex: 1;
}
.spc-score {
  font-size: 0.72rem; color: var(--text-muted);
  font-family: var(--font-mono);
}
.spc-score b { color: var(--success); }

.spc-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }

.spc-phase {
  font-size: 0.82rem; font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  padding: 0.4rem 0.75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.spc-metrics { display: flex; flex-direction: column; gap: 0.5rem; }
.spc-metric { display: grid; grid-template-columns: 130px 1fr 50px; gap: 0.5rem; align-items: center; }
.spc-mlabel { font-size: 0.68rem; color: var(--text-muted); }
.spc-bar-track {
  height: 5px; background: var(--surface-3);
  border-radius: 3px; overflow: hidden;
}
.spc-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.8s ease;
}
.spc-bar-fill.green { background: linear-gradient(90deg, #3fb950, #56d364); }
.spc-bar-fill.blue  { background: linear-gradient(90deg, #58a6ff, #79c0ff); }
.spc-bar-fill.orange{ background: linear-gradient(90deg, #f0883e, #ffa657); }
.spc-bar-fill.red   { background: linear-gradient(90deg, #e5534b, #ff7b72); }
.spc-mval { font-size: 0.65rem; font-family: var(--font-mono); text-align: right; }
.spc-mval.green  { color: var(--success); }
.spc-mval.blue   { color: var(--info); }
.spc-mval.orange { color: #ffa657; }

.spc-terminal {
  background: #010409;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 0.4rem;
  overflow: hidden; white-space: nowrap;
}
.spc-prompt { color: var(--success); font-weight: 700; flex-shrink: 0; }
.spc-cmd { color: #79c0ff; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.spc-cursor {
  color: var(--success);
  animation: blink 1s step-end infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.spc-pipeline {
  display: flex; align-items: center; gap: 0.3rem;
  overflow-x: auto; padding-bottom: 0.15rem;
}
.spc-pipe-node {
  font-size: 0.62rem; font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.spc-pipe-node.done   { background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.35); color: var(--success); }
.spc-pipe-node.active { background: rgba(88,166,255,0.15); border-color: rgba(88,166,255,0.4);  color: var(--info); animation: pulse-glow 2s infinite; }
.spc-pipe-arrow { font-size: 0.6rem; color: var(--text-dim); flex-shrink: 0; }

/* ── Stats strip ── */
.stats-strip {
  display: flex; gap: 3rem; flex-wrap: wrap;
  justify-content: center;
  padding: 2rem;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
  background: var(--surface-1);
  position: relative;
}
.stat {
  text-align: center;
}
.stat-icon { font-size: 1.5rem; margin-bottom: 0.3rem; line-height: 1; }
.stat-num { font-size: 2rem; font-weight: 800; color: var(--success); line-height: 1; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem; font-weight: 500; }

/* ── Domain selector ── */
.domain-section {
  padding: 4rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.section-label {
  text-align: center;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.75rem;
}
.section-title {
  text-align: center;
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--text) 40%, rgba(255,255,255,0.55));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-desc {
  text-align: center;
  color: var(--text-muted);
  max-width: 550px;
  margin: 0 auto 3rem;
  font-size: 0.95rem; line-height: 1.7;
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.domain-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
/* Animated top accent bar */
.domain-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--domain-color, var(--success));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
/* Gradient glow backing */
.domain-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--domain-rgb, 63,185,80), 0.08) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.domain-card:hover {
  border-color: rgba(var(--domain-rgb, 63,185,80), 0.55);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--domain-rgb, 63,185,80), 0.2);
}
.domain-card:hover::after { transform: scaleX(1); }
.domain-card:hover::before { opacity: 1; }

.domain-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 1rem;
}
.domain-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(var(--domain-rgb, 63,185,80), 0.1);
  border: 1px solid rgba(var(--domain-rgb, 63,185,80), 0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.domain-badge {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 20px;
  border: 1px solid;
}
.badge-green { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.3); color: var(--success); }
.badge-blue  { background: rgba(88,166,255,0.1); border-color: rgba(88,166,255,0.3); color: var(--info); }
.badge-orange{ background: rgba(255,166,87,0.1); border-color: rgba(255,166,87,0.3); color: #ffa657; }
.badge-red   { background: rgba(229,83,75,0.1);  border-color: rgba(229,83,75,0.3);  color: var(--danger); }

.domain-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.domain-desc { color: var(--text-muted); font-size: 0.83rem; line-height: 1.6; margin-bottom: 1rem; }

.workflow-list {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.workflow-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer; transition: all 0.18s;
  border: 1px solid transparent;
  position: relative;
}
.workflow-item:hover {
  border-color: rgba(var(--domain-rgb, 63,185,80), 0.5);
  background: rgba(var(--domain-rgb, 63,185,80), 0.1);
  transform: translateX(3px);
  padding-left: 0.9rem;
}
.workflow-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--domain-color, var(--success));
  border-radius: 2px 0 0 2px;
  opacity: 0; transition: opacity 0.18s;
}
.workflow-item:hover::before { opacity: 1; }
.workflow-item-icon { font-size: 0.9rem; }
.workflow-item-name { flex: 1; font-weight: 500; }
.workflow-item-steps {
  font-size: 0.68rem; color: var(--text-muted);
  font-family: var(--font-mono);
}
.workflow-arrow { color: var(--text-dim); font-size: 0.8rem; }

/* ── Feature cards ── */
.features-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.feature-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.feature-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.feature-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; }
.feature-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }

/* ── Footer ── */
.landing-footer {
  border-top: 1px solid var(--border-dim);
  padding: 2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.footer-logo { font-weight: 700; color: var(--text); }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--success); }

/* ═══════════════════════════════════════════════════════════════
   LAB WORKSPACE
   ═══════════════════════════════════════════════════════════════ */
#screen-lab {
  display: none;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#screen-lab.active { display: flex; }

/* ── Topbar ── */
.lab-topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 1rem;
  z-index: 200;
}

.topbar-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.topbar-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }

.btn-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.btn-icon:hover { border-color: var(--danger); color: var(--danger); }

.wf-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem;
}
.wf-domain-label {
  padding: 0.2rem 0.6rem; border-radius: 20px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wf-name { font-weight: 600; color: var(--text); }
.breadcrumb-sep { color: var(--text-dim); }

/* Step progress bar */
.step-progress {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--text-muted);
}
.step-dots {
  display: flex; gap: 4px;
}
.step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-4); transition: all 0.3s;
}
.step-dot.done { background: var(--success); }
.step-dot.active { background: var(--info); box-shadow: 0 0 6px var(--info); }

/* Score chip */
.score-chip {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem; font-weight: 600;
}
.score-num {
  font-size: 1rem; font-weight: 800;
  font-family: var(--font-mono);
  color: var(--success);
  transition: color 0.4s;
}
.score-num.ok   { color: var(--success); }
.score-num.warn { color: var(--warning); }
.score-num.bad  { color: var(--danger); }

/* Timer */
.timer-chip {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--text-muted); font-size: 0.82rem;
  font-family: var(--font-mono);
}

/* ── 3-column lab body ── */
.lab-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--bench-left) 1fr var(--bench-right);
  overflow: hidden;
}

/* ── LEFT: Protocol sidebar ── */
.protocol-sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.sidebar-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
}
.protocol-steps {
  flex: 1; overflow-y: auto; padding: 0.75rem;
}
.proto-step {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: all 0.2s;
}
.proto-step.active {
  background: rgba(88,166,255,0.08);
  border-color: rgba(88,166,255,0.25);
}
.proto-step.done {
  background: rgba(63,185,80,0.05);
  border-color: rgba(63,185,80,0.1);
  opacity: 0.7;
}
.proto-step.locked { opacity: 0.3; }

.proto-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
  background: var(--surface-4); border: 1px solid var(--border);
  color: var(--text-muted); flex-shrink: 0;
  transition: all 0.3s;
}
.proto-step.active .proto-num { background: var(--info); border-color: var(--info); color: #fff; }
.proto-step.done .proto-num   { background: var(--success); border-color: var(--success); color: #fff; font-size: 0.8rem; }

.proto-info { flex: 1; min-width: 0; }
.proto-step-name { font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.proto-step-phase { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; }
.proto-step.active .proto-step-phase { color: var(--info); }
.proto-step.done .proto-step-phase   { color: var(--success); }

/* Mini quality indicators */
.sidebar-quality {
  padding: 0.75rem 1.1rem 1rem;
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.sqm-row { margin-bottom: 0.6rem; }
.sqm-label {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.2rem;
}
.sqm-label span:last-child { font-family: var(--font-mono); font-weight: 700; }
.sqm-track { height: 4px; background: var(--surface-3); border-radius: 2px; }
.sqm-fill  { height: 4px; border-radius: 2px; transition: width 0.7s ease, background 0.5s; }

/* ── CENTER: Bench ── */
.bench-center {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

/* Step instruction card */
.step-instruction {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-dim);
  background: var(--surface-1);
  flex-shrink: 0;
}
.step-phase-tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--info);
  margin-bottom: 0.3rem;
}
.step-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; }
.step-desc { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; }

/* The actual bench workspace */
.bench-workspace {
  flex: 1; overflow-y: auto;
  padding: 1.25rem;
  display: flex; flex-direction: column;
  gap: 1rem;
}

/* Edu note */
.edu-note {
  display: flex; gap: 0.75rem;
  background: rgba(88,166,255,0.06);
  border: 1px solid rgba(88,166,255,0.15);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.8rem; line-height: 1.65;
  color: var(--text-muted);
}
.edu-note-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }

/* ── Drag-and-Drop Bench UI ── */
.dnd-area {
  display: flex; gap: 1.25rem;
  min-height: 220px;
}

/* Reagent shelf */
.reagent-shelf {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  min-width: 140px;
  max-width: 160px;
}
.shelf-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.reagent-item {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--vial-color, var(--border));
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  cursor: grab; user-select: none;
  transition: all 0.2s;
  position: relative;
  touch-action: none;
}
.reagent-item:hover {
  border-color: var(--vial-color, var(--info));
  border-left-color: var(--vial-color, var(--info));
  background: color-mix(in srgb, var(--vial-color, var(--info)) 8%, var(--surface-3));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.reagent-item.dragging {
  opacity: 0.4; cursor: grabbing;
}
.reagent-item.used {
  opacity: 0.25; cursor: not-allowed;
  pointer-events: none;
}
/* Category vial colors */
.reagent-item[data-cat="Extraction"]     { --vial-color: #58a6ff; }
.reagent-item[data-cat="Enzyme"]         { --vial-color: #3fb950; }
.reagent-item[data-cat="Antibody"]       { --vial-color: #d2a8ff; }
.reagent-item[data-cat="Library Prep"]   { --vial-color: #ffa657; }
.reagent-item[data-cat="PCR"]            { --vial-color: #f0883e; }
.reagent-item[data-cat="Sample"]         { --vial-color: #e5534b; }
.reagent-item[data-cat="Lysis"]          { --vial-color: #79c0ff; }
.reagent-item[data-cat="Buffer"]         { --vial-color: #a5d6ff; }
.reagent-item[data-cat="Cleanup"]        { --vial-color: #bc8cff; }
.reagent-item[data-cat="Precipitation"]  { --vial-color: #56d364; }
.reagent-item[data-cat="DIY"]            { --vial-color: #8b949e; }
.reagent-item[data-cat="Mechanical"]     { --vial-color: #c9d1d9; }
.reagent-item[data-cat="Protease"]       { --vial-color: #ff7b72; }
.reagent-item[data-cat="Reducing agent"] { --vial-color: #ffa198; }
.reagent-item[data-cat="Alkylation"]     { --vial-color: #cae8ff; }

.reagent-emoji { font-size: 1.2rem; margin-bottom: 0.2rem; }
.reagent-name { font-size: 0.72rem; font-weight: 600; line-height: 1.3; }
.reagent-cat  { font-size: 0.62rem; color: var(--text-muted); margin-top: 0.1rem; }

/* Equipment / drop zone */
.equipment-area {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
}

.drop-zone {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 180px;
  border: 2px dashed rgba(139,148,158,0.3);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all 0.25s;
  width: 100%;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(88,166,255,0.03) 0%, transparent 70%);
}
/* Corner decorators */
.drop-zone::before, .drop-zone::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--border);
  border-style: solid;
  pointer-events: none;
  transition: border-color 0.25s;
}
.drop-zone::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.drop-zone::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.drop-zone.drag-over-valid {
  border-color: var(--success);
  background: rgba(63,185,80,0.06);
  box-shadow: var(--glow-green), inset 0 0 40px rgba(63,185,80,0.04);
}
.drop-zone.drag-over-valid::before,
.drop-zone.drag-over-valid::after { border-color: var(--success); }
.drop-zone.drag-over-invalid {
  border-color: var(--danger);
  background: rgba(229,83,75,0.05);
  box-shadow: var(--glow-red);
}
.drop-zone.filled {
  border-style: solid;
  border-color: rgba(63,185,80,0.5);
  background: rgba(63,185,80,0.04);
}
.drop-zone.filled::before,
.drop-zone.filled::after { border-color: var(--success); }

.equip-icon { font-size: 3.5rem; }
.equip-name { font-size: 0.88rem; font-weight: 600; }
.equip-hint { font-size: 0.75rem; color: var(--text-muted); }
.equip-status {
  font-size: 0.75rem; font-weight: 700;
  color: var(--success);
  display: none;
}
.drop-zone.filled .equip-status { display: block; }
.drop-zone.filled .equip-hint { display: none; }

/* Reaction animation overlay */
.reaction-overlay {
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  overflow: hidden;
}

/* Multi-drop zones (e.g., tube rack with multiple positions) */
.multi-drop {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  justify-content: center;
}
.tube-drop {
  width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.tube-body {
  width: 32px; height: 80px;
  border: 2px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  position: relative; overflow: hidden;
  background: var(--surface-2);
  transition: all 0.3s;
}
.tube-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 0 0 14px 14px;
  transition: height 0.8s ease, background-color 0.8s;
  height: 0%;
}
.tube-cap {
  width: 32px; height: 8px;
  background: var(--surface-4);
  border-radius: 3px 3px 0 0;
  border: 1px solid var(--border);
}
.tube-label-text { font-size: 0.62rem; color: var(--text-muted); text-align: center; }

/* ── Parameter controls (sliders, selects) ── */
.param-controls {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.param-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 1rem; }

.param-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.9rem;
}
.param-label {
  font-size: 0.82rem; font-weight: 600;
  min-width: 140px; flex-shrink: 0;
}
.param-slider-wrap { flex: 1; }
input[type=range] {
  width: 100%; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: var(--surface-3);
  border-radius: 3px; outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--info); border: 2px solid var(--text);
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.param-value-box {
  font-family: var(--font-mono); font-size: 0.82rem;
  background: var(--surface-3); border: 1px solid var(--border);
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);
  min-width: 80px; text-align: center; transition: color 0.3s;
}
.param-optimal {
  font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem;
  font-family: var(--font-mono);
}
.optimal-bar {
  height: 3px; border-radius: 2px; margin-top: 4px;
  background: linear-gradient(to right, var(--danger) 0%, var(--warning) 30%, var(--success) 50%, var(--warning) 70%, var(--danger) 100%);
}

/* ── Feedback box ── */
.feedback-box {
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  padding: 0.85rem 1rem;
  font-size: 0.83rem; line-height: 1.6;
  animation: slideInUp 0.25s ease;
}
.feedback-good { border-color: var(--success); background: rgba(63,185,80,0.07); }
.feedback-warn { border-color: var(--warning); background: rgba(210,153,34,0.07); }
.feedback-bad  { border-color: var(--danger);  background: rgba(229,83,75,0.07);  }
.feedback-title { font-weight: 700; margin-bottom: 0.2rem; }

/* ── Action button ── */
.btn-advance {
  padding: 0.85rem;
  background: var(--info);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  width: 100%;
}
.btn-advance:hover  { background: #79b8ff; transform: translateY(-1px); }
.btn-advance:disabled {
  background: var(--surface-3); color: var(--text-muted);
  cursor: not-allowed; transform: none;
}
.btn-advance-waiting {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}

/* ── RIGHT: QC Panel ── */
.qc-sidebar {
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qc-section {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.qc-section:last-child { border-bottom: none; }
.qc-section-scrollable {
  overflow-y: auto; padding: 0.75rem 1.1rem;
  max-height: 180px; flex-shrink: 0;
}

.qc-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem;
}

.qc-gauge { margin-bottom: 0.85rem; }
.qc-gauge-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.3rem;
}
.qc-gauge-name { font-size: 0.75rem; font-weight: 600; }
.qc-gauge-val  {
  font-size: 0.72rem; font-weight: 700;
  font-family: var(--font-mono);
}
.qc-track { height: 6px; background: var(--surface-3); border-radius: 3px; }
.qc-fill  { height: 6px; border-radius: 3px; transition: width 0.8s ease, background 0.5s; }

/* Pipeline nodes */
.pipeline-track { display: flex; flex-direction: column; gap: 0.3rem; }
.pipe-node {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.75rem; color: var(--text-muted);
  transition: all 0.3s;
}
.pipe-node.p-active {
  background: rgba(88,166,255,0.08);
  border-color: rgba(88,166,255,0.2);
  color: var(--text);
}
.pipe-node.p-done {
  background: rgba(63,185,80,0.06);
  border-color: rgba(63,185,80,0.15);
  color: var(--success);
}
.pipe-node.p-error {
  background: rgba(229,83,75,0.06);
  border-color: rgba(229,83,75,0.15);
  color: var(--danger);
}
.pipe-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-4);
  flex-shrink: 0; transition: all 0.3s;
}
.pipe-node.p-active .pipe-dot { background: var(--info); border-color: var(--info); animation: pulse-dot 1.5s infinite; }
.pipe-node.p-done  .pipe-dot { background: var(--success); border-color: var(--success); }
.pipe-node.p-error .pipe-dot { background: var(--danger); border-color: var(--danger); }

/* Mistake log */
.mistake-list { display: flex; flex-direction: column; gap: 0.35rem; }
.mistake-entry {
  font-size: 0.7rem; line-height: 1.5; padding: 0.4rem 0.6rem;
  background: rgba(229,83,75,0.06);
  border-left: 2px solid var(--danger);
  border-radius: 0 4px 4px 0;
  color: var(--text-muted);
}
.no-mistakes {
  font-size: 0.75rem; color: var(--success);
  display: flex; align-items: center; gap: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS SCREEN
   ═══════════════════════════════════════════════════════════════ */
#screen-results {
  display: none;
  min-height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(63,185,80,0.08), transparent 60%),
    var(--bg);
  padding: 2rem;
}
#screen-results.active { display: block; }

.results-container { max-width: 900px; margin: 0 auto; }

/* Grade hero */
.results-hero {
  text-align: center;
  padding: 3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.results-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(63,185,80,0.1), transparent 65%);
}

.grade-ring {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
  font-size: 3rem; font-weight: 900; line-height: 1;
}
.grade-ring.grade-A { background: rgba(63,185,80,0.15); border: 3px solid var(--success); color: var(--success); }
.grade-ring.grade-B { background: rgba(88,166,255,0.15); border: 3px solid var(--info); color: var(--info); }
.grade-ring.grade-C { background: rgba(210,153,34,0.15); border: 3px solid var(--warning); color: var(--warning); }
.grade-ring.grade-D { background: rgba(229,83,75,0.15); border: 3px solid var(--danger); color: var(--danger); }

.results-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.4rem; }
.results-sub   { color: var(--text-muted); font-size: 0.95rem; }

/* Results metric cards */
.results-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem; margin-bottom: 1.5rem;
}
.r-metric {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 1.1rem;
  text-align: center;
}
.r-metric-val {
  font-size: 1.6rem; font-weight: 800; line-height: 1;
  font-family: var(--font-mono); margin-bottom: 0.3rem;
}
.r-metric-name { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.results-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  margin-bottom: 1rem;
}
.results-card-title {
  font-size: 0.9rem; font-weight: 700;
  margin-bottom: 1.1rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border-dim);
  display: flex; align-items: center; gap: 0.5rem;
}

/* QC table */
.qc-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.qc-table th {
  text-align: left; padding: 0.6rem 0.85rem;
  font-size: 0.67rem; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.qc-table td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-dim); }
.qc-table tr:last-child td { border-bottom: none; }
.qc-table td:last-child { font-family: var(--font-mono); }

.pill { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 20px;
        font-size: 0.68rem; font-weight: 700; }
.pill-pass { background: rgba(63,185,80,0.12); color: var(--success); }
.pill-warn { background: rgba(210,153,34,0.12); color: var(--warning); }
.pill-fail { background: rgba(229,83,75,0.12); color: var(--danger); }

/* Cascade bar */
.cascade { display: flex; gap: 0; overflow-x: auto; padding-bottom: 0.5rem; }
.cascade-node {
  flex-shrink: 0; min-width: 90px;
  padding: 0.55rem 0.75rem;
  background: var(--surface-3); border: 1px solid var(--border);
  text-align: center; font-size: 0.72rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  position: relative;
}
.cascade-node:not(:last-child)::after {
  content: '›'; position: absolute; right: -8px; top: 50%;
  transform: translateY(-50%); color: var(--text-dim);
  font-size: 1.2rem; z-index: 1;
}
.cascade-node:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cascade-node:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cascade-node-q { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; }

.results-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.5rem; }
.btn-result-primary {
  padding: 0.8rem 1.75rem; background: var(--success); color: #000;
  border: none; border-radius: var(--radius-md);
  font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.btn-result-primary:hover { background: #4adb5e; transform: translateY(-1px); }
.btn-result-secondary {
  padding: 0.8rem 1.75rem; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn-result-secondary:hover { border-color: var(--info); color: var(--info); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0.6); }
  50% { box-shadow: 0 0 0 4px rgba(88,166,255,0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes drop-success {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-40px) scale(0.3); opacity: 0; }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.4); }
  50%     { box-shadow: 0 0 20px 4px rgba(63,185,80,0.2); }
}

.animate-in { animation: fadeIn 0.3s ease; }
.animate-shake { animation: shake 0.35s ease; }
.animate-drop  { animation: drop-success 0.4s ease; }
.animate-glow  { animation: glow-pulse 2s infinite; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

.bubble {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  animation: bubble-rise 0.9s ease-out forwards;
  pointer-events: none;
}

/* ── Drag ghost ── */
.drag-ghost {
  position: fixed; pointer-events: none;
  z-index: 9999; opacity: 0.85;
  background: var(--surface-3); border: 1px solid var(--info);
  border-radius: var(--radius-sm); padding: 0.5rem 0.8rem;
  font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%);
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════
   DISEASE EXPLORER (landing)
   ═══════════════════════════════════════════════════════════════ */
.disease-explorer-section, .tool-explorer-section {
  padding: 5rem 2rem 4rem;
  max-width: 1200px; margin: 0 auto;
}

/* Filter tabs */
.disease-filter-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem;
}
.df-tab {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); padding: 0.4rem 1rem;
  border-radius: 20px; cursor: pointer; font-size: 0.8rem;
  transition: all 0.2s;
}
.df-tab:hover { border-color: var(--info); color: var(--info); }
.df-tab.active { background: var(--info); border-color: var(--info); color: #fff; }

/* Disease cards grid */
.disease-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.disease-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 3px solid var(--disease-color, var(--info));
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.disease-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--disease-color, var(--info)) 10%, transparent) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.disease-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--disease-color, var(--info)) 50%, var(--border));
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--disease-color, var(--info)) 20%, transparent);
}
.disease-card:hover::before { opacity: 1; }

.disease-card-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.dc-icon-wrap { font-size: 1.8rem; line-height: 1; }
.dc-name { font-size: 0.95rem; font-weight: 700; color: var(--disease-color, var(--text)); }
.dc-cat-badge {
  font-size: 0.65rem; color: var(--text-muted);
  background: var(--surface-3); padding: 2px 7px; border-radius: 4px;
  display: inline-block; margin-top: 2px;
}
.dc-description { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.dc-biomarkers { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dc-bm-tag {
  font-size: 0.67rem; color: var(--text-muted);
  background: var(--surface-3); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 4px;
}
.dc-african-tag {
  font-size: 0.72rem; color: var(--success);
  background: rgba(63,185,80,0.08); border: 1px solid rgba(63,185,80,0.2);
  border-radius: 5px; padding: 0.3rem 0.5rem; line-height: 1.4;
}
.dc-wf-section { margin-top: auto; border-top: 1px solid var(--border-dim); padding-top: 0.6rem; }
.dc-wf-label { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.dc-wf-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dc-wf-tag {
  font-size: 0.7rem; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; cursor: pointer; transition: all 0.15s;
}
.dc-wf-tag:hover {
  border-color: var(--info); color: var(--info);
  background: rgba(88,166,255,0.1);
}

/* Stats row on disease card */
.dc-stats-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dc-stat-chip {
  font-size: 0.65rem; color: var(--text-muted);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px; line-height: 1.5;
}
.dc-stat-chip.dc-stat-africa {
  color: var(--success);
  background: rgba(63,185,80,0.08);
  border-color: rgba(63,185,80,0.25);
}

/* Card footer with meta pills + Details button */
.dc-card-footer {
  display: flex; gap: 0.4rem; align-items: center;
  margin-top: auto; padding-top: 0.5rem;
  border-top: 1px solid var(--border-dim);
  flex-wrap: wrap;
}
.dc-meta-pill {
  font-size: 0.65rem; color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 8px;
}
.dc-detail-btn {
  margin-left: auto; font-size: 0.72rem;
  color: var(--info); font-weight: 600;
  transition: color 0.15s;
}
.disease-card:hover .dc-detail-btn { color: var(--accent); }

/* ── Disease Detail Modal ──────────────────────────────────── */
.dm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.dm-overlay.dm-open { opacity: 1; pointer-events: all; }

.dm-panel {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(700px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.dm-overlay.dm-open .dm-panel {
  transform: translateY(0) scale(1);
}

/* Modal header */
.dm-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dm-color, var(--info)) 18%, var(--surface-1)), var(--surface-1));
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.5rem 1rem;
  position: sticky; top: 0; z-index: 2;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.dm-title-row { display: flex; gap: 0.85rem; align-items: flex-start; }
.dm-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.dm-name { font-size: 1.15rem; font-weight: 700; color: var(--dm-color, var(--text)); }
.dm-cat  { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.dm-close {
  margin-left: auto; flex-shrink: 0;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 50%;
  width: 28px; height: 28px; font-size: 0.85rem;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.dm-close:hover { background: var(--surface-4); color: var(--text); }

/* Stats row in modal */
.dm-stats-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 0.85rem;
}
.dm-stat {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.4rem 0.75rem;
}
.dm-stat-val { font-size: 0.72rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.dm-stat-lbl { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1px; }

/* Modal body */
.dm-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.dm-section { display: flex; flex-direction: column; gap: 0.4rem; }
.dm-section-label {
  font-size: 0.68rem; font-weight: 700; color: var(--info);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dm-section-impact .dm-section-label { color: var(--warning); }
.dm-section-africa .dm-section-label { color: var(--success); }
.dm-text { font-size: 0.8rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.dm-bm-list {
  padding-left: 1.25rem; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.15rem;
}
.dm-bm-list li { font-size: 0.75rem; color: var(--text-muted); line-height: 1.7; }
.dm-tags-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dm-tag {
  font-size: 0.7rem; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 9px;
}
.dm-tag-db { color: var(--info); background: rgba(88,166,255,0.07); border-color: rgba(88,166,255,0.2); }
.dm-tag-sample { color: var(--text-muted); border-style: dashed; }
.dm-wf-row { gap: 0.5rem; }
.dm-wf-btn {
  font-size: 0.76rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 12px; cursor: pointer; transition: all 0.15s;
  color: var(--text-muted);
}
.dm-wf-btn:hover { border-color: var(--info); color: var(--info); background: rgba(88,166,255,0.1); }

/* Prevent body scroll while modal open */
body.modal-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   REPOSITORY EXPLORER (landing)
   ═══════════════════════════════════════════════════════════════ */
.repo-explorer-section {
  padding: 4rem 2rem;
  max-width: 1200px; margin: 0 auto;
}
.repo-filter-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.repo-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}
.repo-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex; flex-direction: column; gap: 0.65rem;
  transition: transform 0.18s, box-shadow 0.18s;
}
.repo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.repo-card-head { display: flex; gap: 0.7rem; align-items: flex-start; }
.repo-icon { font-size: 1.5rem; line-height: 1; }
.repo-name { font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.repo-cat-badge {
  font-size: 0.62rem; color: var(--info);
  background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.2);
  padding: 2px 7px; border-radius: 4px; display: inline-block; margin-top: 3px;
}
.repo-scope-chip {
  font-size: 0.68rem; color: var(--text-muted);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; line-height: 1.5;
}
.repo-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; }
.repo-access { font-size: 0.72rem; color: var(--text-muted); }
.repo-africa-note {
  font-size: 0.7rem;
}
.repo-link-btn {
  display: inline-block; margin-top: auto;
  font-size: 0.74rem; font-weight: 600;
  color: var(--info); text-decoration: none;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border-dim);
  transition: color 0.15s;
}
.repo-link-btn:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   TOOL EXPLORER (landing)
   ═══════════════════════════════════════════════════════════════ */
.tool-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.tool-cat-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}

.tcc-header {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--surface-2); padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.tcc-icon { font-size: 1.1rem; }
.tcc-name { font-size: 0.85rem; font-weight: 700; flex: 1; }
.tcc-count {
  font-size: 0.68rem; color: var(--text-muted);
  background: var(--surface-3); padding: 2px 7px; border-radius: 10px;
}

.tcc-tools { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }

.tool-item {
  background: var(--surface-2); border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.ti-name { font-size: 0.85rem; font-weight: 700; color: var(--info); }
.ti-io { font-size: 0.7rem; font-family: monospace; color: var(--text-muted); }
.ti-in  { color: var(--warning); }
.ti-out { color: var(--success); }
.ti-desc { font-size: 0.74rem; color: var(--text-muted); line-height: 1.5; }
.ti-use { font-size: 0.72rem; color: var(--text-muted); }
.ti-alts {
  font-size: 0.68rem; color: var(--text-muted);
  border-top: 1px solid var(--border-dim); padding-top: 0.2rem; margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════
   BIOINFORMATICS PIPELINE GUIDE (landing)
   ═══════════════════════════════════════════════════════════════ */
.bioinfo-pipeline-section {
  padding: 4rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.bp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 1.1rem;
  align-items: start;
}
.bp-column {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.bp-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.9rem;
}
.bp-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.8rem;
}
.bp-stage-card {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bp-stage-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--success);
}
.bp-stage-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.bp-stage-tools {
  font-size: 0.7rem;
  color: var(--info);
  font-family: var(--font-mono);
}
.bp-stage-text,
.bp-stage-output,
.bp-stage-interpretation,
.bp-card-copy,
.bp-meaning-text {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.bp-stage-output,
.bp-stage-interpretation {
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-dim);
}
.bp-meaning-list {
  display: grid;
  gap: 0.75rem;
}
.bp-meaning-item {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 0.8rem;
  display: grid;
  gap: 0.2rem;
}
.bp-meaning-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warning);
}
.bp-scripts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.bp-script-card,
.bp-africa-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.bp-code {
  margin-top: 0.8rem;
  padding: 0.9rem;
  border-radius: 12px;
  background: #010409;
  border: 1px solid var(--border-dim);
  color: #c9d1d9;
  overflow-x: auto;
  font-size: 0.68rem;
  line-height: 1.55;
}
.bp-code code {
  font-family: var(--font-mono);
  white-space: pre;
}
.bp-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bp-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(88,166,255,0.3);
  color: var(--info);
  background: rgba(88,166,255,0.08);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.38rem 0.8rem;
}
.bp-link-btn:hover {
  border-color: rgba(88,166,255,0.55);
  background: rgba(88,166,255,0.14);
}
.bp-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.bp-tag {
  font-size: 0.68rem;
  color: var(--success);
  background: rgba(63,185,80,0.08);
  border: 1px solid rgba(63,185,80,0.22);
  border-radius: 999px;
  padding: 0.24rem 0.65rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS — Disease block
   ═══════════════════════════════════════════════════════════════ */
.res-disease-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.res-disease-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dc, var(--info));
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.rdc-head { display: flex; gap: 0.6rem; align-items: flex-start; }
.rdc-icon { font-size: 1.5rem; }
.rdc-name { font-size: 0.9rem; font-weight: 700; color: var(--dc, var(--text)); }
.rdc-cat  { font-size: 0.68rem; color: var(--text-muted); }
.rdc-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; }
.rdc-section-label { font-size: 0.7rem; font-weight: 700; color: var(--info); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.25rem; }
.rdc-bm-list { padding-left: 1.2rem; font-size: 0.74rem; color: var(--text-muted); line-height: 1.8; margin: 0; }
.rdc-findings { font-size: 0.74rem; color: var(--text-muted); line-height: 1.5; }
.rdc-impact { color: rgba(210,168,80,0.9); }
.rdc-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rdc-tool-tag {
  font-size: 0.68rem; color: var(--text-muted);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 7px;
}
.rdc-african {
  font-size: 0.72rem; color: var(--success);
  background: rgba(63,185,80,0.08); border-radius: 4px;
  padding: 0.3rem 0.5rem; line-height: 1.4;
}
.rdc-stats-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rdc-stat {
  font-size: 0.65rem; color: var(--text-muted);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px;
}
.rdc-stat.rdc-stat-africa {
  color: var(--success);
  background: rgba(63,185,80,0.07);
  border-color: rgba(63,185,80,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   Q&A SECTION
   ═══════════════════════════════════════════════════════════════ */
.qa-section {
  padding: 4rem 2rem;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.qa-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 1rem;
  gap: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 1.25rem;
}
.qa-search-wrap:focus-within {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(63,185,80,0.12);
}
.qa-search-wrap > svg { flex-shrink: 0; color: var(--text-dim); }
.qa-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem;
  padding: 0.9rem 0;
  min-width: 0;
}
.qa-input::placeholder { color: var(--text-dim); font-size: 0.9rem; }
.qa-clear-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.qa-clear-btn:hover { background: var(--border); color: var(--text); }

.qa-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.qa-cat-tab {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.2s;
}
.qa-cat-tab:hover { border-color: var(--success); color: var(--success); }
.qa-cat-tab.active { background: var(--success); border-color: var(--success); color: #000; font-weight: 600; }

.qa-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.qa-suggest-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s;
}
.qa-suggest-chip:hover { border-color: var(--info); color: var(--info); background: rgba(88,166,255,0.06); }

.qa-results { display: flex; flex-direction: column; gap: 1rem; }

.qa-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s;
}
.qa-card:hover { border-color: var(--border); }
.qa-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.qa-cat-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.qa-q-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.qa-a-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.qa-a-text strong { color: var(--text); }
.qa-a-text code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--surface-3);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--info);
}
mark.qa-highlight {
  background: rgba(227,179,65,0.25);
  color: var(--warning);
  border-radius: 2px;
  padding: 0 1px;
}

.qa-no-results {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
}
.qa-nr-icon { margin-bottom: 0.75rem; opacity: 0.4; }
.qa-nr-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.qa-nr-hint { font-size: 0.82rem; }

/* ═══════════════════════════════════════════════════════════════
   HAMBURGER NAV (mobile)
   ═══════════════════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s;
  line-height: 1;
}
.nav-hamburger:hover { border-color: var(--success); color: var(--success); }

.mobile-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(8,12,16,0.97);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 200;
  backdrop-filter: blur(16px);
}
.mobile-nav-dropdown.open { display: flex; }
.mob-nav-group-label {
  width: 100%; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #58a6ff; padding: 0.4rem 0.2rem 0.1rem;
  margin-top: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════
   EQUIPMENT PHOTO IN GALLERY CARDS
   ═══════════════════════════════════════════════════════════════ */
.egc-photo-wrap {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}
.egc-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.equip-gallery-card:hover .egc-photo { transform: scale(1.04); }
.egc-photo-fallback {
  display: none;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
}
.egc-photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to top, var(--surface-1) 0%, transparent 100%);
  pointer-events: none;
}
.egc-photo-badge {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.4px;
}

/* ═══════════════════════════════════════════════════════════════
   EQUIPMENT SEARCH BAR
   ═══════════════════════════════════════════════════════════════ */
.equip-search-wrap {
  position: relative;
  max-width: 400px;
  margin: 0 auto 1.5rem;
}
.equip-search-wrap svg {
  position: absolute;
  left: 0.85rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}
.equip-search {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.equip-search:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(63,185,80,0.12);
}
.equip-search::placeholder { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   EQUIPMENT DETAIL MODAL
   ═══════════════════════════════════════════════════════════════ */
.equip-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.equip-modal-overlay.open {
  opacity: 1; pointer-events: auto;
}
.equip-modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.2s;
}
.equip-modal-overlay.open .equip-modal { transform: scale(1); }
.emd-header {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-2);
}
.emd-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.emd-photo-gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 100px;
  background: linear-gradient(to top, var(--surface-1), transparent);
}
.emd-anim-preview {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.emd-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}
.emd-close:hover { background: rgba(229,83,75,0.7); }
.emd-body { padding: 1.5rem; }
.emd-maker { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--eg-color, var(--info)); }
.emd-name { font-size: 1.4rem; font-weight: 800; color: var(--text); line-height: 1.2; margin: 0.3rem 0 0.5rem; }
.emd-tagline { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 1rem; }
.emd-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; }
.emd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.25rem; }
.emd-spec {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}
.emd-spec-key { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 0.2rem; }
.emd-spec-val { font-size: 0.82rem; font-family: var(--font-mono); color: var(--text); }
.emd-section { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); margin: 0.85rem 0 0.4rem; }
.emd-cost { font-size: 0.82rem; font-family: var(--font-mono); color: var(--warning); }
.emd-when { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.emd-wf-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.emd-alts { font-size: 0.76rem; color: var(--text-dim); line-height: 1.6; }
.emd-footer { padding: 0 1.5rem 1.5rem; }
.emd-launch-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--success);
  color: #000;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.emd-launch-btn:hover { background: #4adb5e; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ═══════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s, color 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.back-to-top.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.back-to-top:hover { border-color: var(--success); color: var(--success); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAB WORKSPACE — bottom tab bar
   ═══════════════════════════════════════════════════════════════ */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 58px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  z-index: 100;
  align-items: stretch;
}
.mtb-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.2rem;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding: 0.25rem 0;
}
.mtb-tab .mtb-icon { font-size: 1.3rem; }
.mtb-tab.active {
  color: var(--success);
  background: rgba(63,185,80,0.06);
  border-top: 2px solid var(--success);
  margin-top: -1px;
}

/* Share button in results */
.btn-share {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-share:hover { border-color: var(--info); color: var(--info); }

/* No results message for search */
.equip-no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 1rem;
}
.equip-no-results span { font-size: 2rem; display: block; margin-bottom: 0.75rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --bench-left: 220px; --bench-right: 240px; }
  .hero-sub { font-size: 1rem; }
  .stats-strip { gap: 2rem; padding: 1.5rem; }
  .stat-num { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav */
  .nav-pills { display: none; }
  .nav-hamburger { display: flex; align-items: center; }
  .landing-nav { position: relative; padding: 0.85rem 1.25rem; }

  /* Hero */
  .hero { grid-template-columns: 1fr; padding: 3rem 1.25rem 2rem; gap: 0; }
  .hero-right { display: none; }
  .hero-left { align-items: center; text-align: center; }
  .hero-sub { text-align: center; }
  .hero-trust { justify-content: center; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: -0.5px; }
  .hero-cta { gap: 0.75rem; margin-bottom: 2rem; justify-content: center; }
  .btn-hero { padding: 0.75rem 1.5rem; font-size: 0.88rem; }

  /* Stats */
  .stats-strip { gap: 1rem; padding: 1.25rem 1rem; flex-wrap: wrap; }
  .stat { width: calc(33.3% - 1rem); }
  .stat-num { font-size: 1.5rem; }

  /* Sections */
  .domain-section, .disease-explorer-section, .equipment-gallery-section,
  .tool-explorer-section, .features-section { padding: 2.5rem 1rem; }

  /* Domain grid */
  .domain-grid { grid-template-columns: 1fr; }

  /* Disease cards */
  .disease-cards-grid { grid-template-columns: 1fr; }
  .disease-card { padding: 1rem; }

  /* Disease modal on mobile */
  .dm-panel { max-height: 92vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .dm-overlay { align-items: flex-end; padding: 0; }
  .dm-body { padding: 1rem; }
  .dm-header { padding: 1rem; }
  .dm-bm-list { grid-template-columns: 1fr; }

  /* Filter tabs */
  .disease-filter-tabs, .equip-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .disease-filter-tabs::-webkit-scrollbar,
  .equip-filter-tabs::-webkit-scrollbar { display: none; }
  .df-tab { flex-shrink: 0; }

  /* Equipment gallery */
  .equip-gallery-grid { grid-template-columns: 1fr; }

  /* Tool grid */
  .tool-category-grid { grid-template-columns: 1fr; }

  /* Bioinformatics pipeline guide */
  .bp-grid { grid-template-columns: 1fr; }
  .bp-scripts-grid { grid-template-columns: 1fr; }

  /* Repository grid */
  .repo-cards-grid { grid-template-columns: 1fr; }
  .repo-filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .repo-filter-tabs::-webkit-scrollbar { display: none; }

  /* Features */
  .feature-grid { grid-template-columns: 1fr 1fr; }

  /* Back to top - shift up on landing to avoid overlap */
  .back-to-top { bottom: 1rem; right: 1rem; }

  /* Equipment modal */
  .equip-modal { max-height: 95vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .equip-modal-overlay { align-items: flex-end; padding: 0; }
  .emd-header { height: 180px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .emd-specs { grid-template-columns: 1fr; }

  /* Results */
  .results-metrics { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .r-metric-val { font-size: 1.4rem; }
  .qc-table { font-size: 0.72rem; }

  /* Lab workspace — show tab bar, stack panels */
  .mobile-tab-bar { display: flex; }

  .screen-lab-active .lab-body {
    display: block;
    height: calc(100vh - var(--topbar-h) - 58px);
    overflow: hidden;
    position: relative;
  }

  .protocol-sidebar {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    overflow-y: auto;
  }
  .protocol-sidebar.mobile-panel-active { display: flex; flex-direction: column; }

  .bench-center {
    height: 100%;
    overflow-y: auto;
  }
  .bench-center.mobile-panel-hidden { display: none; }

  .qc-sidebar {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    overflow-y: auto;
  }
  .qc-sidebar.mobile-panel-active { display: block; }

  /* Bench workspace adjustments on mobile */
  .step-instruction { padding: 0.75rem 1rem; }
  .bench-workspace { padding: 0.75rem 1rem; }
  .dnd-area { flex-direction: column; }
  .reagent-shelf { flex-direction: row; flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .choice-grid { grid-template-columns: 1fr 1fr; }

  /* Topbar on mobile */
  .lab-topbar { padding: 0 0.75rem; gap: 0.5rem; }
  .wf-breadcrumb { display: none; }
  .topbar-center .step-progress { font-size: 0.7rem; }
  .timer-chip, .score-chip { font-size: 0.72rem; padding: 0.25rem 0.5rem; }

  /* Section title sizing */
  .section-title { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONES (≤480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .bp-stage-grid { grid-template-columns: 1fr; }
  .results-metrics { grid-template-columns: repeat(2, 1fr); }
  .stat { width: calc(50% - 0.5rem); }
  .stat:last-child { width: 100%; }
  .emd-specs { grid-template-columns: 1fr; }
  .domain-badge { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURES 1–9: Compare, Quiz, Africa Map, Troubleshoot,
   Cost Calc, Variant Walkthrough, Sandbox, Sabotage, Print
   ═══════════════════════════════════════════════════════════════ */

/* ── Protocol Comparison Modal ────────────────────────────────── */
.compare-modal-overlay {
  position: fixed; inset: 0; background: rgba(8,12,16,0.85);
  z-index: 9000; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); padding: 1rem;
}
.compare-modal-overlay.active { display: flex; }
.compare-modal {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 900px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.compare-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.compare-modal-title { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.compare-modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.25rem; padding: 0.25rem 0.5rem; border-radius: 6px;
  transition: color 0.15s;
}
.compare-modal-close:hover { color: var(--text); background: var(--surface-3); }
.compare-selectors {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.compare-sel-wrap { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.compare-sel-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.compare-sel {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
  padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.88rem; cursor: pointer;
  width: 100%;
}
.compare-vs { font-size: 1.1rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.compare-table-box { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.cmp-empty { color: var(--text-muted); text-align: center; padding: 2rem; }
.cmp-headers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.5rem; padding: 0 0 0 160px; }
.cmp-head-cell { font-weight: 700; font-size: 0.92rem; text-align: center; padding: 0.5rem; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.cmp-table tr { border-bottom: 1px solid var(--border-dim); }
.cmp-table tr:last-child { border-bottom: none; }
.cmp-label { width: 160px; padding: 0.6rem 1rem 0.6rem 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: top; white-space: nowrap; }
.cmp-table td:not(.cmp-label) { padding: 0.6rem; color: var(--text); vertical-align: top; line-height: 1.5; }
.cmp-start-btns { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Quiz Mode ────────────────────────────────────────────────── */
.quiz-wrap {
  max-width: 700px; margin: 0 auto; padding: 2rem 1rem;
}
.quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}
.quiz-title { font-size: 1.05rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.5rem; }
.quiz-progress { font-size: 0.8rem; color: var(--text-muted); background: var(--surface-3); padding: 0.3rem 0.75rem; border-radius: 20px; }
.quiz-q-text { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 1.5rem; line-height: 1.6; }
.quiz-opts { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.quiz-opt {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
  padding: 0.75rem 1rem; border-radius: 8px; cursor: pointer; text-align: left;
  font-size: 0.9rem; transition: background 0.15s, border-color 0.15s;
}
.quiz-opt:hover:not(:disabled) { background: var(--surface-4); border-color: var(--success); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct { background: rgba(63,185,80,0.15); border-color: var(--success); color: var(--success); }
.quiz-opt.wrong { background: rgba(229,83,75,0.15); border-color: var(--danger); color: var(--danger); }
.quiz-opt.neutral { opacity: 0.5; }
.quiz-explanation {
  padding: 0.9rem 1.1rem; border-radius: 8px; font-size: 0.85rem; line-height: 1.6;
  margin-bottom: 1.5rem;
}
.quiz-exp-correct { background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.3); color: #c8e6c9; }
.quiz-exp-wrong { background: rgba(229,83,75,0.12); border: 1px solid rgba(229,83,75,0.3); color: #ffcdd2; }
.quiz-footer { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.quiz-next-btn {
  background: var(--success); color: #000; border: none; padding: 0.65rem 1.5rem;
  border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 0.9rem;
  transition: opacity 0.15s;
}
.quiz-next-btn:hover { opacity: 0.85; }
.quiz-score-ring {
  width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 2.5rem; font-weight: 800; margin: 1.5rem auto;
  border: 4px solid currentColor;
}
.quiz-score-msg { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }
.quiz-score-detail { text-align: center; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 2rem; }

/* ── Africa Genomics Map ──────────────────────────────────────── */
.africa-map-section {
  padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; width: 100%;
}
.africa-map-container { width: 100%; }
.amap-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start;
}
@media (max-width: 768px) { .amap-layout { grid-template-columns: 1fr; } }
.amap-svg-wrap { position: relative; }
.amap-svg {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--border); display: block;
}
.amap-dot { cursor: pointer; transition: r 0.2s; }
.amap-dot:hover { r: 10; }
.amap-pulse { animation: amap-pulse 2s ease-in-out infinite; }
@keyframes amap-pulse { 0%,100%{r:7;opacity:0.5} 50%{r:14;opacity:0} }
.amap-legend {
  display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 0.5rem;
}
.amap-leg-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-muted); }
.amap-leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.amap-info-panel {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.25rem; min-height: 200px; position: sticky; top: 80px;
}
.amap-info-placeholder { display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--text-muted); text-align: center; padding: 1rem 0; }
.amap-info-placeholder svg { opacity: 0.4; }
.amap-info-placeholder p { font-size: 0.85rem; }
.amap-info-card { display: flex; flex-direction: column; gap: 0.75rem; }
.amap-info-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.amap-info-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.amap-info-name { font-weight: 700; font-size: 0.92rem; color: var(--text); line-height: 1.3; }
.amap-info-country { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.amap-info-focus { font-size: 0.8rem; font-weight: 600; color: var(--success); padding: 0.3rem 0.6rem; background: rgba(63,185,80,0.1); border-radius: 6px; width: fit-content; }
.amap-info-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.amap-prog-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.amap-progs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.amap-prog-tag {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 20px;
}

/* ── Troubleshooting Modal ────────────────────────────────────── */
.troubleshoot-modal-overlay {
  position: fixed; inset: 0; background: rgba(8,12,16,0.85); z-index: 9100;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); padding: 1rem;
}
.troubleshoot-modal-overlay.active { display: flex; }
.troubleshoot-modal {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 560px; overflow: hidden;
}
.ts-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.ts-modal-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.ts-modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.25rem; padding: 0.25rem 0.5rem; border-radius: 6px;
}
.ts-modal-close:hover { background: var(--surface-3); color: var(--text); }
.ts-modal-body { padding: 1.5rem; }
.ts-depth { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.ts-question { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 1.5rem; line-height: 1.5; }
.ts-yn-btns { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.ts-btn {
  padding: 0.6rem 1.25rem; border-radius: 8px; border: 1px solid var(--border);
  cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: all 0.15s;
}
.ts-btn-yes { background: rgba(63,185,80,0.15); border-color: var(--success); color: var(--success); }
.ts-btn-yes:hover { background: rgba(63,185,80,0.25); }
.ts-btn-no { background: rgba(229,83,75,0.15); border-color: var(--danger); color: var(--danger); }
.ts-btn-no:hover { background: rgba(229,83,75,0.25); }
.ts-btn-back { background: var(--surface-3); border-color: var(--border); color: var(--text-muted); font-size: 0.82rem; font-weight: 400; }
.ts-btn-back:hover { background: var(--surface-4); color: var(--text); }
.ts-btn-restart { background: var(--surface-3); border-color: var(--border); color: var(--text-muted); margin-left: 0.5rem; }
.ts-verdict-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; }
.ts-verdict-title { font-size: 1.05rem; font-weight: 700; color: var(--warning); margin-bottom: 1.25rem; }
.ts-fix-label { font-size: 0.72rem; color: var(--success); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; }
.ts-fix-text { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.ts-actions { display: flex; gap: 0.75rem; }
.ts-trigger-card { border-left: 3px solid var(--warning); }
.ts-trigger-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ts-trigger-btn {
  background: var(--surface-3); border: 1px solid var(--warning); color: var(--warning);
  padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.82rem;
  transition: background 0.15s;
}
.ts-trigger-btn:hover { background: rgba(210,153,34,0.12); }

/* ── Cost & Time Calculator ───────────────────────────────────── */
.calc-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1rem;
}
@media (max-width: 640px) { .calc-grid { grid-template-columns: repeat(2,1fr); } }
.calc-cell {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.85rem 1rem; text-align: center;
}
.calc-val { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 0.25rem; }
.calc-africa { color: var(--warning); }
.calc-label { font-size: 0.72rem; color: var(--text-muted); }
.calc-reagents { font-size: 0.83rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.calc-note { font-size: 0.8rem; color: var(--text-dim); font-style: italic; line-height: 1.5; }

/* ── Variant Interpretation Walkthrough ──────────────────────── */
.vw-grid { display: flex; flex-direction: column; gap: 1rem; }
.vw-card {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.25rem;
}
.vw-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.vw-gene { font-weight: 800; font-size: 1rem; color: var(--genomics); }
.vw-pos { font-size: 0.78rem; color: var(--text-muted); font-family: monospace; }
.vw-change { font-size: 0.82rem; color: var(--warning); font-family: monospace; font-weight: 600; }
.vw-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.vw-metric { font-size: 0.78rem; color: var(--text-muted); background: var(--surface-2); padding: 0.25rem 0.6rem; border-radius: 6px; }
.vw-metric strong { color: var(--text); }
.vw-classify { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.vw-btn {
  padding: 0.4rem 0.9rem; border-radius: 20px; border: 1px solid; cursor: pointer;
  font-size: 0.78rem; font-weight: 600; transition: all 0.15s;
}
.vw-btn:disabled { opacity: 0.5; cursor: default; }
.vw-path { border-color: var(--danger); color: var(--danger); background: rgba(229,83,75,0.1); }
.vw-path:hover:not(:disabled) { background: rgba(229,83,75,0.2); }
.vw-vus { border-color: var(--warning); color: var(--warning); background: rgba(210,153,34,0.1); }
.vw-vus:hover:not(:disabled) { background: rgba(210,153,34,0.2); }
.vw-benign { border-color: var(--success); color: var(--success); background: rgba(63,185,80,0.1); }
.vw-benign:hover:not(:disabled) { background: rgba(63,185,80,0.2); }
.vw-feedback { font-size: 0.84rem; padding: 0.65rem 0.85rem; border-radius: 7px; line-height: 1.55; }
.vw-fb-correct { background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.25); color: #c8e6c9; }
.vw-fb-wrong { background: rgba(229,83,75,0.12); border: 1px solid rgba(229,83,75,0.25); color: #ffcdd2; }

/* ── Pipeline Sandbox ─────────────────────────────────────────── */
.sandbox-section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.sandbox-outer { width: 100%; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--surface-1); }
.sb-layout { display: grid; grid-template-columns: 220px 1fr; height: 520px; }
@media (max-width: 768px) { .sb-layout { grid-template-columns: 1fr; height: auto; } }
.sb-sidebar {
  background: var(--surface-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.sb-sidebar-title { padding: 0.75rem 1rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-dim); }
.sb-cat-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-dim); }
.sb-cat-btn {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted);
  padding: 0.2rem 0.5rem; border-radius: 20px; cursor: pointer; font-size: 0.68rem;
}
.sb-cat-btn.active { background: color-mix(in srgb, var(--cc) 20%, transparent); border-color: var(--cc); color: var(--cc); }
.sb-tool-list { flex: 1; overflow-y: auto; padding: 0.4rem; }
.sb-tool-item {
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.6rem;
  border-radius: 6px; cursor: grab; border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s; margin-bottom: 0.2rem;
}
.sb-tool-item:hover { background: var(--surface-3); border-color: var(--border); }
.sb-tool-item:active { cursor: grabbing; }
.sb-tool-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sb-tool-label { font-size: 0.8rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.sb-tool-io { font-size: 0.65rem; color: var(--text-dim); font-family: monospace; }
.sb-canvas-wrap { display: flex; flex-direction: column; overflow: hidden; }
.sb-toolbar {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0;
}
.sb-toolbar-btn {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
  padding: 0.35rem 0.85rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem;
  transition: background 0.12s;
}
.sb-toolbar-btn:hover { background: var(--surface-4); border-color: var(--success); color: var(--success); }
.sb-toolbar-hint { font-size: 0.72rem; color: var(--text-dim); flex: 1; }
.sb-canvas-area { flex: 1; position: relative; overflow: hidden; }
.sb-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sb-canvas { position: absolute; inset: 0; overflow: hidden; }
.sb-node {
  position: absolute; width: 160px; background: var(--surface-2);
  border: 1.5px solid; border-radius: 8px; cursor: default; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); user-select: none;
}
.sb-node-connecting { box-shadow: 0 0 0 2px var(--success); }
.sb-node-head {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem;
  border-radius: 6px 6px 0 0; cursor: grab;
}
.sb-node-head:active { cursor: grabbing; }
.sb-node-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-node-label { font-size: 0.75rem; font-weight: 700; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-node-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.85rem; padding: 0 0.25rem; line-height: 1; flex-shrink: 0; }
.sb-node-del:hover { color: var(--danger); }
.sb-node-io { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; gap: 0.25rem; }
.sb-node-in, .sb-node-out {
  font-size: 0.62rem; color: var(--text-dim); cursor: pointer; padding: 0.15rem 0.35rem;
  border-radius: 4px; border: 1px solid var(--border-dim); transition: all 0.12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58px;
}
.sb-node-in:hover { border-color: var(--info); color: var(--info); }
.sb-node-out:hover { border-color: var(--success); color: var(--success); }
.sb-node-arrow { font-size: 0.65rem; color: var(--text-dim); flex-shrink: 0; }
.sb-validation-output { padding: 0.75rem 1rem; border-top: 1px solid var(--border-dim); font-size: 0.82rem; max-height: 120px; overflow-y: auto; }
.sb-val-ok { color: var(--success); }
.sb-val-ok ul { padding-left: 1.25rem; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.78rem; }
.sb-val-issues { color: var(--warning); }
.sb-val-issues ul { padding-left: 1.25rem; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.78rem; }
.sb-val-warn { color: var(--text-muted); }

/* ── Sabotage Mode ────────────────────────────────────────────── */
.sabotage-section { padding: 3rem 2rem; max-width: 700px; margin: 0 auto; width: 100%; }
.sabotage-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.5rem; }
.btn-sabotage {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted);
  padding: 0.65rem 1.5rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
  font-weight: 600; transition: all 0.2s;
}
.btn-sabotage:hover { border-color: var(--danger); color: var(--danger); background: rgba(229,83,75,0.08); }
.btn-sabotage.sabotage-active { background: rgba(229,83,75,0.15); border-color: var(--danger); color: var(--danger); animation: sabotage-pulse 1.5s ease-in-out infinite; }
@keyframes sabotage-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(229,83,75,0)} 50%{box-shadow:0 0 0 6px rgba(229,83,75,0.15)} }
.sabotage-hint { font-size: 0.85rem; color: var(--danger); background: rgba(229,83,75,0.08); border: 1px solid rgba(229,83,75,0.3); border-radius: 8px; padding: 0.85rem 1.1rem; line-height: 1.6; max-width: 500px; }

/* ── Compare + Sandbox + Map sections ────────────────────────── */
.compare-section { padding: 3rem 2rem; max-width: 800px; margin: 0 auto; width: 100%; text-align: center; }

/* ── Print / PDF styles ───────────────────────────────────────── */
.btn-result-primary, .btn-share { cursor: pointer; }

/* Ensure new nav pills fit on smaller screens */
@media (max-width: 900px) {
  .nav-pills { gap: 0.25rem; }
  .nav-pill { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
}

/* ── Research Project Mode ────────────────────────────────────── */
.research-mode-section {
  padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; width: 100%;
}

/* ── HPC Training Layer ───────────────────────────────────────── */
.hpc-training-section {
  padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%;
}
.hpc-tab-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hpc-tab { padding: 0.45rem 1rem; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.85rem;
  cursor: pointer; transition: background 0.2s, color 0.2s; }
.hpc-tab.active { background: var(--success); color: #000; border-color: var(--success); font-weight: 700; }
.hpc-tab:hover:not(.active) { background: var(--surface-3, #2d333b); color: var(--text); }

.hpc-panel { display: none; }
.hpc-panel.active { display: block; }

/* SLURM builder */
.hpc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .hpc-two-col { grid-template-columns: 1fr; } }
.hpc-form-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem;
}
.hpc-form-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); }
.hpc-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.hpc-field label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hpc-field select, .hpc-field input { padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text); font-size: 0.9rem; }
.hpc-submit-btn { width: 100%; padding: 0.65rem; border-radius: 8px; background: var(--success);
  color: #000; border: none; font-weight: 700; cursor: pointer; margin-top: 0.5rem; font-size: 0.95rem; }
.hpc-submit-btn:hover { filter: brightness(1.1); }

/* Script preview */
.hpc-script-preview {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  line-height: 1.6; color: #e6edf3; overflow-x: auto; white-space: pre; min-height: 260px;
}
.hpc-directive { color: #79c0ff; }
.hpc-comment { color: #8b949e; }
.hpc-cmd { color: #3fb950; }

/* Simulation output */
.hpc-sim-output {
  background: #0d1117; border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.25rem; font-family: monospace; font-size: 0.82rem; line-height: 1.7;
  color: #e6edf3; min-height: 120px; margin-top: 0.75rem;
}
.hpc-sim-line { display: flex; gap: 0.5rem; align-items: flex-start; }
.hpc-sim-time { color: #8b949e; min-width: 60px; }
.hpc-sim-ok { color: #3fb950; }
.hpc-sim-warn { color: #d29922; }
.hpc-sim-err { color: #f85149; }
.hpc-sim-info { color: #58a6ff; }
.hpc-status-badge {
  display: inline-block; padding: 0.2rem 0.7rem; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; margin-left: 0.5rem;
}
.hpc-status-pending  { background: rgba(210,153,34,0.2);  color: #d29922; }
.hpc-status-running  { background: rgba(88,166,255,0.2);  color: #58a6ff; }
.hpc-status-done     { background: rgba(63,185,80,0.2);   color: #3fb950; }
.hpc-status-failed   { background: rgba(248,81,73,0.2);   color: #f85149; }

/* Queue table */
.hpc-queue-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 1rem; }
.hpc-queue-table th { text-align: left; padding: 0.4rem 0.75rem; color: var(--text-muted);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border); }
.hpc-queue-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.hpc-queue-table tr:hover td { background: var(--surface-2); }

/* Concept cards */
.hpc-concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.hpc-concept-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem;
}
.hpc-concept-icon { display:flex;align-items:center;margin-bottom:0.4rem;color:var(--text-muted,#8b949e); }
.hpc-concept-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.hpc-concept-body { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.hpc-code-inline { font-family: monospace; background: rgba(255,255,255,0.07); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.8em; }

/* Scenario pills */
.hpc-scenario-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }
.hpc-scenario-btn { padding: 0.4rem 0.9rem; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 0.85rem; cursor: pointer; }
.hpc-scenario-btn:hover { border-color: var(--success); color: var(--success); }
.hpc-scenario-btn.selected { background: rgba(63,185,80,0.15); border-color: var(--success); color: var(--success); font-weight: 700; }

/* Workflow engines comparison */
.hpc-engines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.hpc-engine-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
.hpc-engine-name { font-weight: 800; font-size: 1rem; margin-bottom: 0.25rem; }
.hpc-engine-tag { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 10px;
  background: rgba(88,166,255,0.15); color: #58a6ff; margin-bottom: 0.5rem; }
.hpc-engine-list { list-style: none; padding: 0; margin: 0; }
.hpc-engine-list li { font-size: 0.82rem; color: var(--text-muted); padding: 0.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); }
.hpc-engine-list li:last-child { border-bottom: none; }

/* ── Reproducibility & Research Metadata Hub ─────────────────── */
.repro-hub-section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Tab bar — reuse rh- prefix so no clash with hpc- */
.rh-tab-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.rh-tab { padding: 0.45rem 1rem; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.85rem;
  cursor: pointer; transition: background 0.2s, color 0.2s; }
.rh-tab.active { background: #58a6ff; color: #000; border-color: #58a6ff; font-weight: 700; }
.rh-tab:hover:not(.active) { background: var(--surface-3, #2d333b); color: var(--text); }
.rh-panel { display: none; }
.rh-panel.active { display: block; }

/* Layout */
.rh-submit-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
.rh-validate-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .rh-submit-layout, .rh-validate-layout { grid-template-columns: 1fr; } }
.rh-form-col { display: flex; flex-direction: column; gap: 0; }
.rh-scores-col { position: sticky; top: 1rem; }

/* Form elements */
.rh-section-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #58a6ff; margin: 0.2rem 0 0.6rem; padding-top: 0.2rem; }
.rh-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; }
.rh-field label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; }
.rh-field input, .rh-field select, .rh-field textarea {
  padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 0.88rem;
  font-family: inherit; resize: vertical; }
.rh-field input:focus, .rh-field select:focus, .rh-field textarea:focus {
  outline: none; border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88,166,255,0.2); }
.rh-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 600px) { .rh-field-row { grid-template-columns: 1fr; } }
.rh-submit-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.rh-btn-primary { padding: 0.55rem 1.1rem; border-radius: 8px; background: #58a6ff;
  color: #000; border: none; font-weight: 700; cursor: pointer; font-size: 0.9rem; }
.rh-btn-primary:hover { filter: brightness(1.1); }
.rh-btn-secondary { padding: 0.55rem 1.1rem; border-radius: 8px; background: var(--surface-2);
  color: var(--text); border: 1px solid var(--border); font-weight: 600; cursor: pointer; font-size: 0.9rem; }
.rh-btn-secondary:hover { border-color: #58a6ff; color: #58a6ff; }
.rh-btn-ghost { padding: 0.55rem 1.1rem; border-radius: 8px; background: transparent;
  color: var(--text-muted); border: 1px solid transparent; cursor: pointer; font-size: 0.9rem; }
.rh-btn-ghost:hover { color: var(--text); border-color: var(--border); }

/* Score card */
.rh-scores-card { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem; }
.rh-scores-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.rh-scores-hint { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.rh-gauge-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 0.75rem 0; }
.rh-gauge { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.rh-gauge-label { font-size: 0.72rem; color: var(--text-muted); text-align: center; }

/* Checklist bars */
.rh-checklist { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.rh-cl-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 0.4rem; }
.rh-cl-label { font-size: 0.72rem; font-weight: 600; }
.rh-cl-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.rh-cl-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.rh-cl-pct { font-size: 0.72rem; color: var(--text-muted); text-align: right; }

/* Browse panel */
.rh-browse-controls { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rh-search { flex: 1; min-width: 200px; padding: 0.45rem 0.8rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 0.9rem; }
.rh-filter-select { padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 0.88rem; }
.rh-browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.rh-browse-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
.rh-browse-card:hover { border-color: #58a6ff; transform: translateY(-2px); }
.rh-browse-head { margin-bottom: 0.5rem; }
.rh-browse-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; line-height: 1.4; }
.rh-browse-meta { font-size: 0.75rem; color: var(--text-muted); }
.rh-browse-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.rh-tag { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 10px;
  border: 1px solid var(--border); color: var(--text-muted); }
.rh-tag-disease { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.3); color: #3fb950; }
.rh-tag-workflow { background: rgba(88,166,255,0.1); border-color: rgba(88,166,255,0.3); color: #58a6ff; }
.rh-browse-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.6rem; }
.rh-browse-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.rh-mini-scores { display: flex; gap: 0.75rem; font-size: 0.78rem; font-weight: 700; }
.rh-browse-stats { display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.rh-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: 0.9rem; }

/* FAIR checker */
.rh-fair-principle { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0.75rem;
  border-left: 3px solid; border-radius: 4px; margin-bottom: 0.5rem; background: rgba(255,255,255,0.03); }
.rh-fair-letter { font-size: 1.4rem; font-weight: 900; min-width: 20px; line-height: 1.2; }
.rh-fair-result-title { font-weight: 700; margin-bottom: 0.75rem; font-size: 0.9rem; }

/* Modal */
.rh-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 9999; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; }
.rh-modal-overlay.open { display: flex; }
.rh-modal-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 900px; padding: 1.75rem; position: relative; }
.rh-modal-close { position: absolute; top: 1rem; right: 1rem; background: transparent;
  border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0.25rem 0.5rem; }
.rh-modal-close:hover { color: var(--text); }
.rh-modal-header { margin-bottom: 1rem; }
.rh-modal-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.3rem; line-height: 1.4; }
.rh-modal-sub { font-size: 0.82rem; color: var(--text-muted); }
.rh-modal-gauges { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rh-modal-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem;
  padding: 0.75rem; background: rgba(255,255,255,0.03); border-radius: 8px; }
.rh-modal-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .rh-modal-two-col { grid-template-columns: 1fr; } }
.rh-meta-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.rh-meta-key { color: var(--text-muted); padding: 0.3rem 0.75rem 0.3rem 0; white-space: nowrap;
  vertical-align: top; font-weight: 600; }
.rh-meta-table td { padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.rh-modal-pre { background: #0d1117; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.75rem; font-family: monospace; font-size: 0.78rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all; color: #e6edf3; margin-top: 0.5rem; }
.rh-modal-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--border); }

/* FAIR checklist in modal */
.rh-fair-checklist-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.rh-fair-check-group { padding: 0.5rem 0; }
.rh-fair-check-title { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.3rem; }
.rh-fair-item { font-size: 0.78rem; padding: 0.15rem 0.5rem; margin: 0.1rem 0;
  border-radius: 4px; }
.rh-fair-pass { color: #3fb950; background: rgba(63,185,80,0.08); }
.rh-fair-fail  { color: #8b949e; background: rgba(255,255,255,0.03); }

/* ── Curriculum Learning Paths ────────────────────────────────── */
.curriculum-section  { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.curr-overview-bar   { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1.5rem; padding:1rem 1.25rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.curr-overview-stat  { display:flex; flex-direction:column; align-items:center; min-width:70px; }
.curr-stat-n         { font-size:1.6rem; font-weight:800; }
.curr-stat-l         { font-size:0.72rem; color:var(--text-muted); }
.curr-reset-btn      { margin-left:auto; padding:0.35rem 0.8rem; border-radius:8px; background:transparent; border:1px solid var(--border); color:var(--text-muted); font-size:0.8rem; cursor:pointer; }
.curr-track-grid     { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.curr-track-card     { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:border-color 0.2s,transform 0.15s; }
.curr-track-card:hover,.curr-track-card.active { border-color:var(--track-color,#3fb950); transform:translateY(-2px); }
.curr-track-top      { padding:1.25rem 1.25rem 0.75rem; display:flex; justify-content:space-between; align-items:flex-start; }
.curr-track-icon     { display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:currentColor; }
.curr-complete-badge { font-size:0.72rem; font-weight:700; color:#3fb950; background:rgba(63,185,80,0.12); padding:0.2rem 0.6rem; border-radius:10px; border:1px solid rgba(63,185,80,0.3); }
.curr-track-body     { padding:0 1.25rem 1.25rem; }
.curr-track-title    { font-size:1rem; font-weight:800; margin-bottom:0.2rem; }
.curr-track-subtitle { font-size:0.82rem; color:var(--success); font-weight:600; margin-bottom:0.4rem; }
.curr-track-audience { font-size:0.78rem; color:var(--text-muted); margin-bottom:0.75rem; }
.curr-progress-wrap  { margin-bottom:0.75rem; }
.curr-progress-bar   { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; margin-bottom:0.3rem; }
.curr-progress-fill  { height:100%; border-radius:3px; transition:width 0.5s ease; }
.curr-progress-label { font-size:0.72rem; color:var(--text-muted); }
.curr-start-btn      { width:100%; padding:0.5rem; border-radius:8px; border:none; color:#000; font-weight:700; cursor:pointer; font-size:0.88rem; }
.curr-detail-area    { margin-top:1.5rem; }
.curr-detail-panel   { border-left:4px solid #58a6ff; padding-left:1.25rem; }
.curr-detail-header  { margin-bottom:1rem; }
.curr-detail-title   { font-size:1.1rem; font-weight:800; margin-bottom:0.2rem; display:flex;align-items:center;gap:.4rem; }
.curr-detail-sub     { color:var(--success); font-size:0.88rem; font-weight:600; margin-bottom:0.4rem; }
.curr-detail-outcome { font-size:0.85rem; color:var(--text-muted); margin-bottom:0.6rem; }
.curr-detail-progress{ display:flex; align-items:center; gap:0.75rem; }
.curr-lesson-list    { display:flex; flex-direction:column; gap:0.75rem; max-width:900px; }
.curr-lesson-row     { display:grid; grid-template-columns:32px 1fr auto; gap:0.75rem; align-items:start; padding:0.75rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.curr-lesson-row.done   { border-color:rgba(63,185,80,0.3); background:rgba(63,185,80,0.05); }
.curr-lesson-row.next   { border-color:#58a6ff; }
.curr-lesson-num        { font-size:0.85rem; font-weight:700; color:var(--text-muted); margin-top:0.1rem; text-align:center; }
.curr-lesson-row.done .curr-lesson-num { color:#3fb950; }
.curr-lesson-title  { font-weight:700; font-size:0.9rem; margin-bottom:0.2rem; display:flex;align-items:center;gap:.3rem; }
.curr-lesson-meta   { font-size:0.78rem; color:var(--text-muted); margin-bottom:0.4rem; }
.curr-key-points    { display:flex; flex-wrap:wrap; gap:0.3rem; }
.curr-kp            { font-size:0.72rem; color:var(--text-muted); background:rgba(255,255,255,0.04); padding:0.15rem 0.5rem; border-radius:6px; }
.curr-lesson-actions{ display:flex; flex-direction:column; gap:0.4rem; min-width:80px; }
.curr-go-btn        { padding:0.4rem 0.75rem; border-radius:8px; background:#58a6ff; color:#000; border:none; font-weight:700; cursor:pointer; font-size:0.8rem; white-space:nowrap; }
.curr-mark-btn      { padding:0.35rem 0.75rem; border-radius:8px; background:transparent; border:1px solid var(--border); color:var(--text-muted); cursor:pointer; font-size:0.78rem; }

/* ── Badges & Certificates ────────────────────────────────────── */
.badges-section  { padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.badges-header   { margin-bottom: 1.5rem; }
.badges-total    { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.badges-hint     { font-size: 0.85rem; color: var(--text-muted); }
.badge-category  { margin-bottom: 1.5rem; }
.badge-cat-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.75rem; }
.badge-row       { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.badge-item      { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 90px; cursor: default; }
.badge-item.earned { cursor: pointer; }
.badge-item.earned:hover .badge-circle { transform: scale(1.05); }
.badge-circle    { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--border); background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.badge-icon      { display:flex;align-items:center;justify-content:center; }
.badge-item.locked .badge-icon { filter: grayscale(1); opacity: 0.4; }
.badge-name      { font-size: 0.68rem; font-weight: 700; text-align: center; color: var(--text); line-height: 1.3; }
.badge-date      { font-size: 0.62rem; color: var(--text-muted); }
.badge-hint      { font-size: 0.62rem; color: var(--text-muted); text-align: center; line-height: 1.3; }
/* Certificate modal */
.cert-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; }
.cert-modal-overlay.open { display: flex; }
.cert-modal-box  { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; max-width: 760px; width: 100%; padding: 2rem; position: relative; }
.cert-close      { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.cert-paper      { background: #fff; color: #111; border-radius: 8px; padding: 2rem; font-family: Georgia, serif; }
.cert-header     { text-align: center; }
.cert-logo       { font-size: 1.4rem; font-weight: 900; color: #3fb950; }
.cert-issuer     { font-size: 0.8rem; color: #666; margin-top: 0.2rem; }
.cert-divider    { border-top: 1px solid #ccc; margin: 1rem 0; }
.cert-body       { text-align: center; }
.cert-presents   { color: #888; font-size: 0.85rem; }
.cert-name       { font-size: 1.8rem; font-weight: 700; margin: 0.4rem 0 0.75rem; }
.cert-earned     { color: #888; margin-bottom: 0.5rem; }
.cert-badge-display { margin: 0.75rem 0; }
.cert-badge-title{ font-size: 1.2rem; font-weight: 700; margin-top: 0.25rem; }
.cert-desc       { font-size: 0.88rem; color: #555; max-width: 500px; margin: 0.5rem auto; }
.cert-footer     { text-align: center; font-size: 0.78rem; color: #999; }
.cert-sig        { font-weight: 600; }
.cert-consortium { margin-top: 0.25rem; font-size: 0.7rem; }
.cert-actions    { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.cert-name-field { flex: 1; min-width: 180px; padding: 0.4rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 0.88rem; }
.cert-print-btn  { padding: 0.5rem 1rem; border-radius: 8px; background: #3fb950; color: #000; border: none; font-weight: 700; cursor: pointer; }
.cert-close-btn  { padding: 0.5rem 1rem; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }

/* ── Africa Science Hub ───────────────────────────────────────── */
.africa-hub-section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.ah-tab-bar  { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ah-tab      { padding: 0.45rem 1rem; border-radius: 20px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 0.85rem; cursor: pointer; transition: background 0.2s; }
.ah-tab.active { background: #d2a8ff; color: #000; border-color: #d2a8ff; font-weight: 700; }
.ah-panel    { display: none; }
.ah-panel.active { display: block; }
.ah-intro    { font-size: 0.88rem; color: var(--text-muted); max-width: 800px; margin-bottom: 1.25rem; line-height: 1.7; }
.ah-sub-head { font-size: 0.85rem; font-weight: 700; color: #d2a8ff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; margin-top: 1.5rem; }
.ah-principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.ah-principle-card  { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid; border-radius: 8px; }
.ah-principle-letter{ font-size: 1.5rem; font-weight: 900; min-width: 24px; }
.ah-principle-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.3rem; }
.ah-principle-body  { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }
.ah-fw-table        { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ah-fw-table th     { text-align: left; padding: 0.4rem 0.75rem; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.ah-fw-table td     { padding: 0.45rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ah-fw-name         { font-weight: 700; color: var(--text); }
.ah-fw-year         { color: var(--text-muted); white-space: nowrap; }
.ah-callout         { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(210,168,255,0.08); border: 1px solid rgba(210,168,255,0.25); border-radius: 10px; margin-top: 1.5rem; cursor: pointer; align-items: center; }
.ah-callout-icon    { display:flex;align-items:center;flex-shrink:0;color:var(--text-muted,#8b949e); }
.ah-why-box         { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255,255,255,0.03); border-left: 4px solid #58a6ff; border-radius: 6px; margin-bottom: 1rem; }
.ah-why-icon        { display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:28px;color:var(--text-muted,#8b949e); }
.ah-why-text        { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; }
.ah-stats-grid      { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.ah-stat-card       { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; text-align: center; }
.ah-stat-value      { font-size: 1.5rem; font-weight: 800; }
.ah-stat-label      { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.4; }
.ah-initiatives-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.ah-initiative-card { background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid; border-radius: 10px; padding: 0.9rem; }
.ah-init-head       { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.5rem; }
.ah-init-icon       { display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted,#8b949e); }
.ah-init-name       { font-weight: 800; font-size: 0.9rem; }
.ah-init-size       { font-size: 0.72rem; color: var(--text-muted); }
.ah-init-desc       { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.4rem; }
.ah-init-url        { font-size: 0.72rem; color: #58a6ff; }
.ah-oh-grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .ah-oh-grid { grid-template-columns: 1fr; } }
.ah-oh-domain       { background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid; border-radius: 10px; padding: 1rem; }
.ah-oh-icon         { display:flex;align-items:center;justify-content:center;margin-bottom:0.3rem;color:var(--text-muted,#8b949e); }
.ah-oh-title        { font-weight: 800; font-size: 0.95rem; margin-bottom: 0.5rem; }
.ah-oh-list         { list-style: none; padding: 0; margin: 0; }
.ah-oh-list li      { font-size: 0.8rem; color: var(--text-muted); padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ah-oh-list li:last-child { border: none; }
.ah-oh-platforms    { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.ah-oh-platform     { font-size: 0.83rem; color: var(--text-muted); padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ah-workflow-note   { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(63,185,80,0.06); border: 1px solid rgba(63,185,80,0.2); border-radius: 8px; font-size: 0.83rem; color: var(--text-muted); }
.ah-impact-grid     { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.ah-impact-stat     { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; text-align: center; }
.ah-impact-icon     { display:flex;align-items:center;justify-content:center;margin-bottom:.3rem;color:var(--text-muted,#8b949e); }
.ah-impact-value    { font-size: 1.4rem; font-weight: 800; color: var(--success); }
.ah-impact-label    { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
.ah-grant-table     { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ah-grant-row       { display: grid; grid-template-columns: 220px 1fr; gap: 0; border-bottom: 1px solid var(--border); }
.ah-grant-row:last-child { border-bottom: none; }
.ah-grant-funder    { padding: 0.6rem 0.75rem; font-weight: 700; font-size: 0.82rem; background: var(--surface-2); }
.ah-grant-rel       { padding: 0.6rem 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 600px) { .ah-grant-row { grid-template-columns: 1fr; } }
.ah-problem-box     { padding: 1rem; background: rgba(248,81,73,0.05); border: 1px solid rgba(248,81,73,0.2); border-radius: 8px; margin-bottom: 1rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.ah-sustainability-box { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(88,166,255,0.06); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; font-size: 0.83rem; color: var(--text-muted); }
.ah-training-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.ah-training-card   { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
.ah-training-name   { font-weight: 800; font-size: 0.9rem; margin-bottom: 0.4rem; }
.ah-training-meta   { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.ah-training-type   { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 10px; background: rgba(88,166,255,0.12); color: #58a6ff; }
.ah-training-deadline{ font-size: 0.72rem; color: var(--text-muted); }
.ah-training-desc   { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.4rem; }
.ah-training-url    { font-size: 0.72rem; color: #58a6ff; }

/* ── Workshop / Instructor Mode ───────────────────────────────── */
.workshop-section   { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.ws-layout          { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .ws-layout { grid-template-columns: 1fr; } }
.ws-setup-col       { display: flex; flex-direction: column; gap: 0; }
.ws-main-col        { min-width: 0; }
.ws-card            { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.ws-card-head       { display:flex;align-items:center;gap:.35rem;font-weight: 700; font-size: 0.9rem; margin-bottom: 0.75rem; }
.ws-field           { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
.ws-field label     { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ws-field input, .ws-field select { padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); font-size: 0.88rem; }
.ws-btn-primary     { width: 100%; padding: 0.55rem; border-radius: 8px; background: #d29922; color: #000; border: none; font-weight: 700; cursor: pointer; margin-top: 0.25rem; font-size: 0.9rem; }
.ws-btn             { padding: 0.45rem 0.9rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 0.85rem; }
.ws-no-session      { padding: 2rem; text-align: center; color: var(--text-muted); }
.ws-session-header  { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; padding: 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.ws-session-name    { font-weight: 800; font-size: 1rem; }
.ws-session-meta    { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
.ws-session-stats   { display: flex; gap: 1rem; }
.ws-session-stat    { text-align: center; }
.ws-stat-n          { font-size: 1.4rem; font-weight: 800; }
.ws-stat-l          { font-size: 0.7rem; color: var(--text-muted); }
.ws-two-col         { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .ws-two-col { grid-template-columns: 1fr; } }
.ws-col-head        { font-size: 0.8rem; font-weight: 700; color: #d29922; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.ws-module-list     { display: flex; flex-direction: column; gap: 0.4rem; }
.ws-module-check    { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); }
.ws-module-check.done { color: #3fb950; border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.06); }
.ws-go-btn          { margin-left: auto; padding: 0.25rem 0.6rem; border-radius: 6px; background: #d29922; color: #000; border: none; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.ws-cohort-table    { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ws-cohort-table th { text-align: left; padding: 0.35rem 0.5rem; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.ws-cohort-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.ws-mod-tag         { display: inline-block; font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 6px; margin: 0.1rem; background: rgba(255,255,255,0.05); color: var(--text-muted); }
.ws-mod-tag.done    { background: rgba(63,185,80,0.12); color: #3fb950; }
.ws-export-row      { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.ws-active-panel    { min-height: 200px; }
.ws-hist-row        { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; font-size: 0.83rem; }
.ws-hist-row:hover  { color: #d29922; }

/* ── i18n toggle ──────────────────────────────────────────────── */
.i18n-toggle-wrap   { display: flex; gap: 0.2rem; align-items: center; }
.i18n-btn           { padding: 0.3rem 0.65rem; border-radius: 16px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.i18n-btn.active    { background: var(--success); color: #000; border-color: var(--success); }
.i18n-btn:hover:not(.active) { border-color: var(--success); color: var(--success); }

/* ══════════════════════════════════════════════════════════════
   DESIGN POLISH — Grade-Ready Overrides
   Applied last so they win specificity without editing originals
   ══════════════════════════════════════════════════════════════ */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #06090f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --bg: #06090f;
  --surface-1: #0d1117;
  --surface-2: #161b22;
  --surface-3: #1c2128;
  --surface-4: #272e38;
  --border: #2a3142;
  --border-dim: #1c2128;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-elevated: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.7);
}

/* ── Nav refinement ──────────────────────────────────────────── */
.landing-nav {
  background: rgba(6,9,15,0.85);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.7rem 1.75rem;
  gap: 1rem;
}
.logo-text { font-size: 1.1rem; font-weight: 900; letter-spacing: -0.5px; }
.nav-pills { gap: 0.35rem; align-items: center; flex-wrap: nowrap; overflow-x: auto; }
.nav-pills::-webkit-scrollbar { display: none; }
.nav-pill {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem; font-weight: 500;
  border-radius: 20px;
  border: 1px solid transparent;
  color: rgba(230,237,243,0.65);
  transition: all 0.18s;
  white-space: nowrap;
}
.nav-pill:hover { background: rgba(255,255,255,0.07); color: var(--text); border-color: rgba(255,255,255,0.1); }
.nav-pill.active { background: var(--success); border-color: var(--success); color: #000; font-weight: 700; box-shadow: 0 0 12px rgba(63,185,80,0.35); }
.nav-learn-btn { padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 500; color: rgba(230,237,243,0.65); border-color: transparent; }
.nav-learn-btn:hover, .nav-learn-btn.open { background: rgba(255,255,255,0.07); color: var(--text); border-color: rgba(255,255,255,0.1); }
.nav-learn-dropdown { background: #0d1117; border: 1px solid var(--border); box-shadow: var(--shadow-elevated); border-radius: 14px; padding: 0.4rem; }
.nav-learn-item { padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.82rem; color: rgba(230,237,243,0.7); font-weight: 500; }
.nav-learn-item:hover { background: rgba(88,166,255,0.1); color: #58a6ff; }
.nav-learn-divider { background: rgba(255,255,255,0.06); margin: 0.25rem 0.6rem; }

/* ── Hero refinement ─────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 15% 40%, rgba(63,185,80,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 55%, rgba(88,166,255,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(210,168,255,0.05) 0%, transparent 50%),
    #06090f;
  padding: 5rem 4rem 4.5rem;
}
.hero-title { font-size: 3.6rem; font-weight: 900; line-height: 1.08; letter-spacing: -2px; }
.hero-tagline { font-size: 0.72rem; letter-spacing: 2px; font-weight: 700; }
.hero-desc { font-size: 1rem; line-height: 1.75; color: rgba(139,148,158,0.9); }
@media (max-width: 900px) { .hero { padding: 3rem 1.5rem; } .hero-title { font-size: 2.5rem; } }

/* ── Stats strip ─────────────────────────────────────────────── */
.stats-strip {
  background: linear-gradient(90deg, rgba(63,185,80,0.04) 0%, rgba(88,166,255,0.04) 50%, rgba(210,168,255,0.04) 100%);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 1.75rem 4rem;
}
.stat-num { font-size: 2.2rem; font-weight: 900; letter-spacing: -1px; }
.stat-label { font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 600; }

/* ── Section header system ───────────────────────────────────── */
.section-label {
  font-size: 0.68rem; letter-spacing: 2.5px; font-weight: 800;
  color: var(--success); margin-bottom: 0.6rem;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.section-label::before, .section-label::after {
  content: ''; flex: 0 0 24px; height: 1px; background: rgba(63,185,80,0.35);
}
.section-title {
  font-size: 2.2rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #e6edf3 30%, rgba(230,237,243,0.5) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-desc {
  font-size: 0.97rem; line-height: 1.75; color: rgba(139,148,158,0.85);
  max-width: 540px; margin: 0 auto 2.5rem;
}

/* Reduce padding between sections — they were 4rem+4rem = 8rem gap */
.domain-section,
.curriculum-section, .badges-section, .africa-hub-section,
.workshop-section, .hpc-training-section, .research-mode-section,
.repro-hub-section, .sandbox-section, .bioinfo-pipeline-section,
.repo-explorer-section, .tool-explorer-section,
.equipment-gallery-section, .disease-explorer-section,
.disease-learning-section, .africa-map-section,
.features-section, .qa-section {
  padding: 3.5rem 2.5rem;
}

/* ── Card system ─────────────────────────────────────────────── */
/* Universal card upgrade */
.workflow-card, .disease-card, .repo-card, .equip-gallery-card,
.rh-browse-card, .curr-track-card, .hpc-form-card, .ws-card,
.ah-initiative-card, .ah-training-card, .ah-principle-card,
.rh-scores-card, .rh-form-card {
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.workflow-card:hover, .disease-card:hover, .rh-browse-card:hover,
.curr-track-card:hover, .ah-initiative-card:hover, .ah-training-card:hover {
  box-shadow: var(--shadow-elevated);
}

/* ── Curriculum polish ───────────────────────────────────────── */
.curr-overview-bar {
  background: linear-gradient(135deg, rgba(63,185,80,0.06) 0%, rgba(88,166,255,0.04) 100%);
  border: 1px solid rgba(63,185,80,0.15);
  box-shadow: var(--shadow-card);
}
.curr-stat-n { font-size: 2rem; font-weight: 900; letter-spacing: -1px; }
.curr-track-card { border-radius: var(--radius-lg); }
.curr-track-title { font-size: 1.05rem; font-weight: 900; letter-spacing: -0.3px; }
.curr-start-btn { font-size: 0.9rem; border-radius: 10px; padding: 0.6rem; letter-spacing: 0.01em; }
.curr-lesson-row { border-radius: var(--radius-md); }
.curr-lesson-row.next { box-shadow: 0 0 0 1px #58a6ff, 0 0 16px rgba(88,166,255,0.12); }
.curr-lesson-row.done { box-shadow: 0 0 0 1px rgba(63,185,80,0.3); }

/* ── Badges polish ───────────────────────────────────────────── */
.badge-circle {
  width: 64px; height: 64px;
  box-shadow: var(--shadow-card);
}
.badge-item.earned .badge-circle {
  box-shadow: 0 0 20px rgba(63,185,80,0.2), var(--shadow-card);
}
.badge-cat-label {
  font-size: 0.68rem; letter-spacing: 2px; font-weight: 800;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1rem;
}

/* ── Africa Hub polish ───────────────────────────────────────── */
.ah-tab-bar { gap: 0.4rem; }
.ah-tab {
  padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 500;
  border-radius: 20px;
}
.ah-tab.active { box-shadow: 0 0 12px rgba(210,168,255,0.3); }
.ah-principle-card { border-radius: 10px; align-items: flex-start; }
.ah-principle-title { font-size: 0.9rem; font-weight: 800; }
.ah-principle-body { font-size: 0.82rem; }
.ah-stat-value { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.5px; }
.ah-init-name { font-size: 0.95rem; font-weight: 900; }
.ah-grant-funder { font-size: 0.85rem; font-weight: 800; }
.ah-grant-rel { font-size: 0.82rem; }
.ah-callout { transition: background 0.2s; }
.ah-callout:hover { background: rgba(210,168,255,0.14); }

/* ── Workshop polish ─────────────────────────────────────────── */
.ws-card { border-radius: var(--radius-md); }
.ws-card-head { font-size: 0.95rem; font-weight: 800; }
.ws-btn-primary { border-radius: 10px; font-size: 0.92rem; letter-spacing: 0.01em; transition: filter 0.15s; }
.ws-btn-primary:hover { filter: brightness(1.12); }
.ws-session-header { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.ws-stat-n { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; }

/* ── Repro Hub polish ────────────────────────────────────────── */
.rh-tab.active { box-shadow: 0 0 12px rgba(88,166,255,0.3); }
.rh-btn-primary { border-radius: 10px; transition: filter 0.15s; }
.rh-btn-primary:hover { filter: brightness(1.1); }
.rh-browse-card { border-radius: var(--radius-md); }
.rh-gauge-row { gap: 1.25rem; }

/* ── HPC Training polish ─────────────────────────────────────── */
.hpc-tab.active { box-shadow: 0 0 12px rgba(63,185,80,0.3); }
.hpc-form-card { border-radius: var(--radius-md); }
.hpc-submit-btn { border-radius: 10px; transition: filter 0.15s; }
.hpc-submit-btn:hover { filter: brightness(1.12); }

/* ── Research Mode polish ────────────────────────────────────── */
.rm-card { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.rm-select, .rm-row input { border-radius: 10px; }

/* ── Global button system ────────────────────────────────────── */
button { cursor: pointer; }
.btn-result-primary {
  background: var(--success);
  color: #000; font-weight: 700;
  border: none; border-radius: 10px;
  padding: 0.55rem 1.1rem;
  transition: filter 0.15s, transform 0.15s;
}
.btn-result-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-result-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  transition: border-color 0.15s, color 0.15s;
}
.btn-result-secondary:hover { border-color: var(--info); color: var(--info); }

/* ── Reveal animation refinement ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Scroll divider between sections ─────────────────────────── */
.domain-section,
.curriculum-section, .badges-section, .africa-hub-section,
.workshop-section, .hpc-training-section, .research-mode-section,
.repro-hub-section, .sandbox-section, .bioinfo-pipeline-section,
.repo-explorer-section, .tool-explorer-section,
.equipment-gallery-section, .disease-explorer-section,
.disease-learning-section, .africa-map-section,
.qa-section, .features-section {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ── Africa Map section ──────────────────────────────────────── */
.africa-map-section { padding: 3.5rem 2.5rem; }

/* ── Features section ────────────────────────────────────────── */
.features-section { padding: 3.5rem 2.5rem; }

/* ── Mobile responsive overrides ─────────────────────────────── */
@media (max-width: 768px) {
  .domain-section,
  .curriculum-section, .badges-section, .africa-hub-section,
  .workshop-section, .hpc-training-section, .research-mode-section,
  .repro-hub-section, .sandbox-section, .bioinfo-pipeline-section,
  .repo-explorer-section, .tool-explorer-section,
  .equipment-gallery-section, .disease-explorer-section,
  .disease-learning-section, .africa-map-section, .qa-section, .features-section {
    padding: 2.5rem 1.25rem;
  }
  .section-title { font-size: 1.7rem; }
  .hero-title { font-size: 2.2rem; letter-spacing: -1px; }
  .stats-strip { padding: 1.5rem 1.25rem; }
  .curr-track-grid { grid-template-columns: 1fr; }
  .ws-layout { grid-template-columns: 1fr; }
  .ah-oh-grid { grid-template-columns: 1fr; }
  .hpc-two-col { grid-template-columns: 1fr; }
  .rh-submit-layout, .rh-validate-layout { grid-template-columns: 1fr; }
}

/* ── Scroll margin — offset sections for the sticky nav ──────── */
.domain-section, .curriculum-section, .badges-section, .africa-hub-section,
.workshop-section, .hpc-training-section, .research-mode-section,
.repro-hub-section, .sandbox-section, .bioinfo-pipeline-section,
.repo-explorer-section, .tool-explorer-section, .equipment-gallery-section,
.disease-explorer-section, .disease-learning-section, .africa-map-section,
.qa-section, .features-section {
  scroll-margin-top: 62px;
}

/* ── QA section polish ───────────────────────────────────────── */
.qa-section { padding: 3.5rem 2.5rem; max-width: 900px; margin: 0 auto; width: 100%; }

/* ── Sandbox section ─────────────────────────────────────────── */
.sandbox-section { padding: 3.5rem 2.5rem; }

/* ── Code blocks ─────────────────────────────────────────────── */
pre, code { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; }
.hpc-script-preview, .rh-modal-pre, .bp-code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.65;
}

/* ── Focus visible ───────────────────────────────────────────── */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

/* ── Selection ───────────────────────────────────────────────── */
::selection { background: rgba(63,185,80,0.25); color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   MOBILE — All phone sizes (375 base, down to 320 minimum)
   ══════════════════════════════════════════════════════════════ */

/* ── 768px and below ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav: keep logo + lang toggle + hamburger only */
  .landing-nav {
    padding: 0.65rem 1rem;
    gap: 0.5rem;
  }
  .i18n-toggle-wrap { order: 2; }
  .nav-hamburger    { order: 3; }

  /* Hero: single-column, centered */
  .hero {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.25rem 2rem;
    text-align: center;
  }
  .hero-left  { align-items: center; }
  .hero-right { display: none; }
  .hero-eyebrow { justify-content: center; font-size: 0.65rem; letter-spacing: 1.5px; }
  .hero h1  { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -1px; line-height: 1.1; }
  .hero-sub { font-size: 0.9rem; line-height: 1.7; max-width: 340px; margin: 0 auto 1.5rem; }
  .hero-cta { flex-direction: column; align-items: center; gap: 0.6rem; }
  .btn-hero { width: 100%; max-width: 300px; justify-content: center; padding: 0.85rem 1.5rem; font-size: 0.92rem; }
  .hero-trust { justify-content: center; flex-wrap: wrap; gap: 0.4rem; }
  .trust-chip { font-size: 0.7rem; padding: 0.25rem 0.6rem; }

  /* Stats strip: 2-column grid */
  .stats-strip { padding: 1.25rem 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .stat { width: auto; }
  .stat-num { font-size: 1.6rem; }
  .stat-label { font-size: 0.65rem; }

  /* Section headers */
  .section-title  { font-size: 1.6rem; letter-spacing: -0.5px; }
  .section-desc   { font-size: 0.88rem; margin-bottom: 1.75rem; }
  .section-label  { font-size: 0.62rem; }
  .section-label::before, .section-label::after { flex: 0 0 16px; }

  /* All new sections */
  .curriculum-section, .badges-section, .africa-hub-section,
  .workshop-section, .repro-hub-section, .hpc-training-section,
  .research-mode-section, .sandbox-section { padding: 2.5rem 1rem; }

  /* Curriculum */
  .curr-track-grid { grid-template-columns: 1fr; }
  .curr-overview-bar { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .curr-lesson-row { grid-template-columns: 28px 1fr; gap: 0.5rem; }
  .curr-lesson-actions { grid-column: 1 / -1; display: flex; flex-direction: row; gap: 0.4rem; flex-wrap: wrap; }
  .curr-go-btn, .curr-mark-btn { flex: 1; }

  /* Badges */
  .badge-row { gap: 0.5rem; }
  .badge-item { width: 72px; }
  .badge-circle { width: 52px; height: 52px; }
  .badge-icon { font-size: 1.2rem; }
  .badge-name { font-size: 0.6rem; }
  .badge-hint { font-size: 0.58rem; }

  /* Africa Hub */
  .ah-tab-bar { gap: 0.3rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ah-tab-bar::-webkit-scrollbar { display: none; }
  .ah-tab { flex-shrink: 0; padding: 0.35rem 0.7rem; font-size: 0.78rem; }
  .ah-principles-grid { grid-template-columns: 1fr; }
  .ah-initiatives-grid { grid-template-columns: 1fr; }
  .ah-oh-grid { grid-template-columns: 1fr; }
  .ah-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ah-impact-grid { grid-template-columns: repeat(3, 1fr); }
  .ah-grant-row { grid-template-columns: 1fr; }
  .ah-training-grid { grid-template-columns: 1fr; }

  /* Workshop */
  .ws-layout { grid-template-columns: 1fr; }
  .ws-two-col { grid-template-columns: 1fr; }

  /* HPC */
  .hpc-tab-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hpc-tab-bar::-webkit-scrollbar { display: none; }
  .hpc-tab { flex-shrink: 0; font-size: 0.78rem; padding: 0.35rem 0.75rem; }
  .hpc-two-col { grid-template-columns: 1fr; }
  .hpc-concept-grid { grid-template-columns: 1fr; }
  .hpc-engines-grid { grid-template-columns: 1fr; }

  /* Repro Hub */
  .rh-tab-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rh-tab-bar::-webkit-scrollbar { display: none; }
  .rh-tab { flex-shrink: 0; }
  .rh-submit-layout { grid-template-columns: 1fr; }
  .rh-validate-layout { grid-template-columns: 1fr; }
  .rh-field-row { grid-template-columns: 1fr; }
  .rh-browse-grid { grid-template-columns: 1fr; }
  .rh-scores-col { position: static; }
  .rh-modal-box { padding: 1.25rem; }
  .rh-modal-two-col { grid-template-columns: 1fr; }
  .rh-modal-gauges { gap: 0.75rem; }

  /* Mobile nav dropdown */
  .mobile-nav-dropdown { max-height: 75vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 480px and below ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero h1  { font-size: clamp(1.7rem, 10vw, 2.2rem); }
  .hero-sub { font-size: 0.85rem; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .section-title  { font-size: 1.4rem; }
  .curr-track-card { border-radius: 10px; }
  .badge-item { width: 64px; }
  .ah-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ah-impact-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-session-header { flex-direction: column; }
  .ws-session-stats { justify-content: flex-start; gap: 1.5rem; }
  .hpc-queue-table { font-size: 0.72rem; }
  .rh-browse-card { padding: 0.75rem; }
  .rh-browse-footer { flex-direction: column; gap: 0.3rem; }
  .cert-modal-box { padding: 1rem; }
}

/* ── 375px and below (iPhone mini, SE) ───────────────────────── */
@media (max-width: 375px) {
  .landing-nav { padding: 0.55rem 0.75rem; }
  .logo-text { font-size: 0.95rem; }
  .logo-icon { width: 30px; height: 30px; }
  .hero { padding: 2rem 0.9rem 1.5rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero-eyebrow { font-size: 0.58rem; letter-spacing: 1px; }
  .btn-hero { font-size: 0.85rem; padding: 0.75rem 1.25rem; }
  .stats-strip { padding: 1rem 0.75rem; }
  .stat-num { font-size: 1.4rem; }
  .section-title { font-size: 1.3rem; }
  .section-desc { font-size: 0.82rem; }
  .curr-overview-bar { padding: 0.75rem; }
  .curr-stat-n { font-size: 1.5rem; }
  .ah-tab { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
  .hpc-tab { font-size: 0.72rem; padding: 0.3rem 0.55rem; }
  .rh-tab { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
  .badge-circle { width: 46px; height: 46px; }
  .badge-icon { font-size: 1rem; }
  .badge-item { width: 58px; }
  .ws-card { padding: 0.75rem; }
  .ws-btn-primary { font-size: 0.85rem; }
  .rh-modal-overlay { padding: 0.5rem; }
}

/* ── Prevent horizontal overflow everywhere ──────────────────── */
section, .domain-section, .curriculum-section, .badges-section,
.africa-hub-section, .workshop-section, .repro-hub-section,
.hpc-training-section, .research-mode-section, .sandbox-section,
.bioinfo-pipeline-section, .repo-explorer-section, .tool-explorer-section,
.equipment-gallery-section, .disease-explorer-section,
.disease-learning-section, .africa-map-section, .qa-section, .features-section {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Touch: bigger tap targets on mobile ─────────────────────── */
@media (max-width: 768px) {
  .nav-learn-item, .hpc-tab, .ah-tab, .rh-tab, .curr-tab,
  .ws-btn, .ws-btn-primary, .rh-btn-primary, .rh-btn-secondary,
  .curr-go-btn, .curr-start-btn { min-height: 40px; }

  /* Smooth scroll for touch */
  html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

  /* Modals: full-width on mobile */
  .rh-modal-box, .cert-modal-box, .equip-modal {
    width: 100%; max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .rh-modal-overlay, .cert-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
}