@import url('enhance.css?v=5');
/* print.css loaded dynamically by enhance.js — not render-blocking */
/* BUMP the ?v= number above after ANY change to enhance.css to bust cache */

/* ============================================================
   Shared Styles — System Guide
   Dark theme, glass-morphism, responsive layout
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS Variables (Dark Theme)
   ---------------------------------------------------------- */
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-green: #10b981;
  --accent-red: #ef4444;
  --accent-yellow: #f59e0b;
  --accent-cyan: #06b6d4;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: #334155;
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(148, 163, 184, 0.1);

  /* Theme-switchable tokens */
  --accent-primary: #14b8a6;
  --accent-primary-rgb: 20, 184, 166;
  --bg-code: #1a1e2e;
  --text-link: #5eead4;
  --font-mono: 'JetBrains Mono', monospace;
  --toolbar-bg: rgba(15, 23, 42, 0.95);
  --macos-titlebar: #1a1e2e;

  /* Design tokens — spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Design tokens — radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* Design tokens — shadows (3 levels) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------
   1b. Theme Overrides
   ---------------------------------------------------------- */
[data-theme="purple"] {
  --bg-primary: #13091f;
  --bg-secondary: #1e1533;
  --bg-tertiary: #2d2247;
  --accent-primary: #14b8a6;
  --accent-primary-rgb: 20, 184, 166;
  --accent-blue: #14b8a6;
  --border-color: #2d2247;
  --glass-bg: rgba(30, 21, 51, 0.7);
  --glass-border: rgba(20, 184, 166, 0.1);
  --bg-code: #1a1229;
  --text-link: #5eead4;
  --toolbar-bg: rgba(19, 9, 31, 0.95);
  --macos-titlebar: #1a1229;
}

[data-theme="emerald"] {
  --bg-primary: #0a1a14;
  --bg-secondary: #132d22;
  --bg-tertiary: #1e4433;
  --accent-primary: #14b8a6;
  --accent-primary-rgb: 20, 184, 166;
  --accent-blue: #14b8a6;
  --border-color: #1e4433;
  --glass-bg: rgba(19, 45, 34, 0.7);
  --glass-border: rgba(20, 184, 166, 0.1);
  --bg-code: #0e2218;
  --text-link: #5eead4;
  --toolbar-bg: rgba(10, 26, 20, 0.95);
  --macos-titlebar: #0e2218;
}

[data-theme="charcoal"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2d2d2d;
  --accent-primary: #14b8a6;
  --accent-primary-rgb: 20, 184, 166;
  --accent-blue: #14b8a6;
  --border-color: #333333;
  --glass-bg: rgba(30, 30, 30, 0.7);
  --glass-border: rgba(20, 184, 166, 0.1);
  --bg-code: #1a1a1a;
  --text-link: #5eead4;
  --toolbar-bg: rgba(18, 18, 18, 0.95);
  --macos-titlebar: #1a1a1a;
}

/* ----------------------------------------------------------
   1c. Per-Page Accent Overrides
   ---------------------------------------------------------- */
[data-accent="purple"] {
  --accent-primary: #8b5cf6;
  --accent-primary-rgb: 139, 92, 246;
}
[data-accent="green"] {
  --accent-primary: #10b981;
  --accent-primary-rgb: 16, 185, 129;
}
[data-accent="cyan"] {
  --accent-primary: #06b6d4;
  --accent-primary-rgb: 6, 182, 212;
}
[data-accent="yellow"] {
  --accent-primary: #f59e0b;
  --accent-primary-rgb: 245, 158, 11;
}
[data-accent="red"] {
  --accent-primary: #ef4444;
  --accent-primary-rgb: 239, 68, 68;
}
[data-accent="blue"] {
  --accent-primary: #3b82f6;
  --accent-primary-rgb: 59, 130, 246;
}
[data-accent="orange"] {
  --accent-primary: #f97316;
  --accent-primary-rgb: 249, 115, 22;
}

/* ----------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Inherit font on form elements */
button, input, select, textarea {
  font-family: inherit;
}

html {
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 1rem;
  padding-top: 52px;
  overflow-x: hidden;
  animation: pageReveal 0.35s ease forwards;  /* Smooth fade-in on every page load */
}

/* Hide page scrollbar — progress bar in toolbar replaces it */
html {
  scrollbar-width: none;           /* Firefox */
}
html::-webkit-scrollbar {
  display: none;                   /* Chrome, Edge, Safari */
}

/* ----------------------------------------------------------
   3. Wiki Container
   ---------------------------------------------------------- */
.wiki-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem 1rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ----------------------------------------------------------
   4. Hero Section
   ---------------------------------------------------------- */
.hero {
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(var(--accent-primary-rgb), 0.08) 50%, var(--bg-primary) 100%);
  background-size: 400% 400%;
  animation: heroGradientShift 15s ease-in-out infinite;
  border-bottom: 1px solid var(--border-color);
  padding: 5rem 2rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Dual glowing orbs */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 30% 20%, rgba(var(--accent-primary-rgb), 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 70% 80%, rgba(56, 189, 248, 0.10) 0%, transparent 70%);
  animation: heroPulse 6s ease-in-out infinite alternate;
}

/* Dot grid + noise texture */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--accent-primary-rgb), 0.07) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 24px 24px, auto;
  pointer-events: none;
  z-index: 0;
}

@keyframes pageReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes heroPulse {
  0%   { opacity: 0.6; transform: scale(1) translateY(0); }
  100% { opacity: 1; transform: scale(1.05) translateY(-2%); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--accent-primary-rgb), 0.1);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  color: var(--accent-blue);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.15),
              inset 0 0 20px rgba(var(--accent-primary-rgb), 0.05);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Shimmer sweep across badge */
.hero-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.15), transparent);
  animation: badgeShimmer 4s ease-in-out infinite;
}

@keyframes badgeShimmer {
  0%, 100% { left: -100%; }
  50%      { left: 100%; }
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #f1f5f9 0%, var(--text-link) 25%, #38bdf8 50%, var(--text-link) 75%, #f1f5f9 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: h1GradientFlow 8s ease-in-out infinite;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 30px rgba(var(--accent-primary-rgb), 0.3));
}

@keyframes h1GradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto 2rem;
}

.hero-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.hero-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-meta i {
  color: var(--accent-blue);
}

/* ----------------------------------------------------------
   5. Top Toolbar
   ---------------------------------------------------------- */
/* Floating pill toolbar */
.top-toolbar {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: rgba(15, 20, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: visible;
  width: fit-content;
  max-width: calc(100vw - 2rem);
}

/* #2 Reading progress bar — thin line under the pill */
.top-toolbar::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  width: var(--scroll-pct, 0%);
  max-width: 80%;
  background: linear-gradient(90deg, var(--accent-primary), #38bdf8);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.6),
              0 0 20px rgba(var(--accent-primary-rgb), 0.3);
  transition: width 0.1s linear;
  z-index: 1;
}
.top-toolbar.no-progress::after { display: none; }

/* Hide language switcher globally until content is ready */
.lang-switcher { display: none; }

/* Separator between button groups */
.toolbar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 0.1rem;
  flex-shrink: 0;
}


.fab-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.fab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.2);
}

.fab-btn.active {
  background: rgba(var(--accent-primary-rgb), 0.25);
  color: var(--accent-primary);
}

.fab-home, .fab-back {
  font-size: 0.8rem;
}


/* ----------------------------------------------------------
   Back to Top floating button
   ---------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background-color 0.2s, border-color 0.2s;
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(var(--accent-primary-rgb), 0.5);
  color: var(--accent-primary);
  box-shadow:
    0 0 0 4px rgba(var(--accent-primary-rgb), 0.1),
    0 0 0 8px rgba(var(--accent-primary-rgb), 0.05),
    0 0 20px rgba(var(--accent-primary-rgb), 0.2);
}

/* ----------------------------------------------------------
   5b. Theme Switcher Dropdown
   ---------------------------------------------------------- */
.theme-switcher {
  position: relative;
}
.theme-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 130px;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
}
.theme-dropdown.open {
  display: flex;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.theme-option:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.theme-option.active {
  color: var(--accent-primary);
}
.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-option.active .theme-swatch {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.3);
}

/* ----------------------------------------------------------
 *  Language Switcher
 * -------------------------------------------------------- */
.lang-switcher {
  position: relative;
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 150px;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
}
.lang-dropdown.open {
  display: flex;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.lang-option:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.lang-option.active {
  color: var(--accent-primary);
}
.lang-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lang-option.active .lang-swatch {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.3);
}

/* ----------------------------------------------------------
   6. Dot Navigation (right-edge)
   ---------------------------------------------------------- */
.dot-nav {
  display: none;
}
.dot-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  flex-direction: row-reverse;
  padding: 0.125rem 0;
}
.dot-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  transition: width 0.2s, height 0.2s, background-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.dot-nav-item.active .dot-nav-dot {
  width: 10px;
  height: 10px;
  background: var(--accent-blue);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
}
.dot-nav-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.9);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
}
.dot-nav-item:hover .dot-nav-label {
  opacity: 1;
  transform: translateX(0);
}
.dot-nav-item:hover .dot-nav-dot {
  width: 8px;
  height: 8px;
  background: rgba(148, 163, 184, 0.7);
}
.dot-nav-item.active:hover .dot-nav-dot {
  width: 10px;
  height: 10px;
  background: var(--accent-blue);
}
@media (max-width: 1023px) {
  .dot-nav { display: none; }
}

/* ----------------------------------------------------------
   7. Sections
   ---------------------------------------------------------- */
.section {
  margin: 3rem 0;
  scroll-margin-top: 5rem;
  /* NO overflow:hidden — tooltips must be visible above sections */
}

/* #5 Section dividers */
.section + .section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.3) 20%, rgba(56, 189, 248, 0.3) 50%, rgba(var(--accent-primary-rgb), 0.3) 80%, transparent);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.15);
  margin-bottom: 3rem;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0;
  border-bottom: none;
  flex-wrap: wrap;
}

.section-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.1);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
}

.section-icon.blue   { background: rgba(var(--accent-primary-rgb), 0.15);  color: var(--accent-blue); box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.12); }
.section-icon.purple { background: rgba(139, 92, 246, 0.15);  color: var(--accent-purple); box-shadow: 0 0 16px rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.1); }
.section-icon.green  { background: rgba(16, 185, 129, 0.15);  color: var(--accent-green); box-shadow: 0 0 16px rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.1); }
.section-icon.red    { background: rgba(239, 68, 68, 0.15);   color: var(--accent-red); box-shadow: 0 0 16px rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.1); }
.section-icon.yellow { background: rgba(245, 158, 11, 0.15);  color: var(--accent-yellow); box-shadow: 0 0 16px rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.1); }
.section-icon.cyan   { background: rgba(6, 182, 212, 0.15);   color: var(--accent-cyan); box-shadow: 0 0 16px rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.1); }

.section-title {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary), var(--text-link));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-num {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   8. Cards (Accordion) — Premium Design
   ---------------------------------------------------------- */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid rgba(var(--accent-primary-rgb), 0.35);
  border-radius: var(--radius-lg);
  padding: 0;
  transition: border-color 0.2s ease;
  margin-bottom: 0.75rem;
  overflow: visible;
  position: relative;
}
/* First component in a group gets top spacing from preceding text */
p + .card,
p + .exercise-card,
p + .think-first-box,
p + .math-block,
p + .tab-container,
p + .grid-2,
p + .grid-3,
p + .flow-stepper,
p + .math-stepper,
p + .sequence-diagram,
p + .packet-viewer,
p + .schema-viewer,
p + .api-viewer,
p + .log-viewer,
p + .error-block,
p + .query-plan,
p + .dashboard,
p + .interview-chat,
p + .knowledge-check,
p + .code-walkthrough,
p + .scorecard,
p + .estimation-calc,
p + .proof-block,
p + .myth-buster,
p + .whatif-card,
p + .company-card,
p + .callout-trap,
p + .callout-insight,
p + .tradeoff-slider,
p + .arch-diff,
p + .evolution-stepper,
p + .compare-table,
.callout + .card,
.callout + .exercise-card,
.table-wrapper + .card,
svg + .card {
  margin-top: 1.25rem;
}

/* Hover — accent glow + lift */
@media (hover: hover) {
  .card:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
}

/* Open state — subtle elevated shadow, no heavy glow border */
.card.open {
  border-color: rgba(var(--accent-primary-rgb), 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  transition: color 0.25s, background 0.25s;
}
.card-title:hover {
  background: rgba(var(--accent-primary-rgb), 0.04);
}

.card-title::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: auto;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s, background 0.25s, box-shadow 0.25s;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb), 0.06);
  flex-shrink: 0;
}
.card:hover .card-title::after {
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.12);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.15);
}
.card.open .card-title::after {
  transform: rotate(180deg);
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.18);
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
}

.card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
  padding: 0 1.5rem;
}

.card.open .card-title {
  color: var(--accent-primary);
}
/* Title badges — auto-generated by JS for "Bug 1", "Pitfall 2", etc. */
.title-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-right: 0.35rem;
  vertical-align: middle;
  white-space: nowrap;
}
.title-badge i { font-size: 0.75rem; }
.title-badge--bug      { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
.title-badge--pitfall   { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.title-badge--step      { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
.title-badge--stage     { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }
.title-badge--level     { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.title-badge--era       { background: rgba(251,146,60,0.12); color: #fb923c; border: 1px solid rgba(251,146,60,0.25); }
.title-badge--phase     { background: rgba(56,189,248,0.12); color: #38bdf8; border: 1px solid rgba(56,189,248,0.25); }
.title-badge--part      { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
.title-badge--case      { background: rgba(244,114,182,0.12); color: #f472b6; border: 1px solid rgba(244,114,182,0.25); }
.title-badge--fix       { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }

/* Card/collapsible/tab icons — sized, color applied by JS colorizeIcons() */
.card-title i.fa-solid,
.card-title i.fas,
.collapsible-header i.fa-solid,
.collapsible-header i.fas,
.tab-btn i.fa-solid,
.tab-btn i.fas {
  font-size: 0.95rem;
}
.card.open .card-body {
  max-height: none;
  padding: 0.75rem 1.5rem 1.5rem;
  overflow: visible;
  border-top: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   9. Jr vs Sr Toggle System
   ---------------------------------------------------------- */
.jr-sr-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .jr-sr-list {
    grid-template-columns: 1fr;
  }
}

.jr-sr-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.jr-sr-item > .callout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sr-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 11;
}

.sr-toggle:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--accent-green);
  color: #a7f3d0;
}

.sr-solution-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sr-solution-wrap.show {
  pointer-events: auto;
  opacity: 1;
}

@media (max-width: 768px) {
  .sr-solution-wrap {
    position: static;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sr-solution-wrap.show {
    opacity: 1;
    max-height: 3000px;
    pointer-events: auto;
  }
}

.sr-solution-wrap > .sr-solution {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent-green);
  border-radius: 0.75rem;
  background: #0a1f14;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(16, 185, 129, 0.15);
  min-height: 100%;
}

/* ----------------------------------------------------------
   10. Grid System
   ---------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; }
}
  align-items: start;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

.grid-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-9 > * {
  min-width: 0;
}

.span-full {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-9 {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   11. Code Window (macOS Style)
   ---------------------------------------------------------- */
.macos-window {
  background: var(--bg-code, #1a1e2e);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.06),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(var(--accent-primary-rgb), 0.05);
  margin-bottom: 1.5rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  transition: border-color 0.2s ease;
}
@media (hover: hover) {
  .macos-window:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.2);
  }
}

@media (min-width: 1025px) {
  .macos-window {
    max-width: 100%;
  }
}

.macos-titlebar {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red    { background: #ff5f57; box-shadow: 0 0 6px rgba(255, 95, 87, 0.5), inset 0 1px 1px rgba(255,255,255,0.2); }
.dot-yellow { background: #ffbd2e; box-shadow: 0 0 6px rgba(255, 189, 46, 0.5), inset 0 1px 1px rgba(255,255,255,0.2); }
.dot-green  { background: #28c840; box-shadow: 0 0 6px rgba(40, 200, 64, 0.5), inset 0 1px 1px rgba(255,255,255,0.2); }

.macos-filename {
  margin-left: 0.75rem;
  font-size: 0.8rem;
  color: #9ca3af;
  font-family: 'JetBrains Mono', monospace;
}

.macos-body {
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 280px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.macos-body.scroll-active {
  overflow-y: auto;
}
.macos-body::-webkit-scrollbar { width: 4px; height: 6px; }
.macos-body::-webkit-scrollbar-track { background: transparent; }
.macos-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.macos-body pre {
  margin: 0;
  padding: 0.75rem 1rem;
  background: transparent;
  width: max-content;
  min-width: 100%;
  overflow: visible;
  counter-reset: none;
}
.macos-body pre.scroll-active {
  /* legacy compat — new scroll is on .macos-body */
}
/* Kill any line numbers inside terminal */
.macos-body pre code .hljs-ln-numbers,
.macos-body pre .hljs-ln-line,
.macos-body pre td.hljs-ln-numbers { display: none !important; }
.macos-body pre .hljs-ln { border: none; }
.macos-body pre td.hljs-ln-code { padding-left: 0; }
.macos-body pre code {
  display: block !important;
  width: max-content;
  min-width: 100%;
  font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  line-height: 1;
  background: transparent !important;
  overflow: visible !important;
  color: #abb2bf;
}
.macos-body .hljs { overflow: visible !important; }

/* ── One Dark (Atom) Syntax Theme ── */
.sy-kw   { color: #c678dd; }                /* keywords — soft purple */
.sy-type { color: #e5c07b; }                /* types/classes — warm gold */
.sy-str  { color: #98c379; }                /* strings — soft green */
.sy-num  { color: #d19a66; }                /* numbers — orange */
.sy-cmt  { color: #5c6370; font-style: italic; }  /* comments — dim gray */
.sy-fn   { color: #61afef; }                /* function/method names — calm blue */
.sy-attr { color: #e06c75; }                /* attributes/decorators — soft red */

/* ── Terminal-specific styles (only .macos-window.terminal) ── */
.macos-window.terminal .macos-body {
  background: rgba(0, 0, 0, 0.3);
}
/* Kill line numbers in terminals */
.macos-window.terminal .code-line .line-num { display: none; }

/* ── Terminal token colors ── */
.term-line {
  font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
  font-size: 0.88rem;
  line-height: 2;
  white-space: pre;
  color: var(--text-primary);
}
.t-path    { color: #c084fc; }
.t-prompt  { color: #60a5fa; font-weight: 700; }
.t-cmd     { color: #4ade80; font-weight: 600; }
.t-flag    { color: #fbbf24; }
.t-param   { color: #fb923c; }
.t-url     { color: #38bdf8; text-decoration: underline; text-decoration-color: rgba(56,189,248,0.3); text-underline-offset: 2px; }
.t-string  { color: #fde68a; }
.t-number  { color: #f472b6; }
.t-comment { color: #6b7280; font-style: italic; }
.term-line.term-output {
  color: #94a3b8;
  opacity: 0.85;
  font-weight: 400;
}

/* ----------------------------------------------------------
   12. Callouts — Premium with icons via CSS ::before
   ---------------------------------------------------------- */
.callout,
.callout-danger, .callout-success, .callout-info, .callout-warning, .callout-purple,
.callout-red, .callout-blue, .callout-cyan {
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem 1.25rem 2.6rem;
  border-left: 4px solid;
  margin: 1rem 0;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
/* Inside grids — remove margin, pin icon to top */
.grid-2 > .callout,
.grid-3 > .callout,
.grid-2 > [class*="callout-"],
.grid-3 > [class*="callout-"] {
  margin: 0;
}
.grid-2 > [class*="callout-"]::before,
.grid-3 > [class*="callout-"]::before {
  top: 1.25rem;
  transform: none;
}
/* Shared icon base — absolute, aligned with callout-title or first line */
.callout-danger::before, .callout-success::before, .callout-info::before,
.callout-warning::before, .callout-purple::before,
.callout-red::before, .callout-blue::before, .callout-cyan::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85rem;
  position: absolute;
  left: 1rem;
  top: 1.25rem;
  line-height: 1;
}

.callout-danger  { background: rgba(239, 68, 68, 0.08);  border-color: var(--accent-red); }
.callout-danger::before  { content: '\f06a'; color: var(--accent-red); }
.callout-success { background: rgba(16, 185, 129, 0.08); border-color: var(--accent-green); }
.callout-success::before { content: '\f058'; color: var(--accent-green); }
.callout-info    { background: rgba(var(--accent-primary-rgb), 0.08);  border-color: var(--accent-blue); }
.callout-info::before    { content: '\f05a'; color: var(--accent-blue); }
.callout-warning { background: rgba(245, 158, 11, 0.08); border-color: var(--accent-yellow); }
.callout-warning::before { content: '\f071'; color: var(--accent-yellow); }

/* Callout label (strong tag) inherits variant color */
.callout-danger strong  { color: var(--accent-red); }
.callout-success strong { color: var(--accent-green); }
.callout-info strong    { color: var(--accent-blue); }
.callout-warning strong { color: var(--accent-yellow); }
.callout-purple strong  { color: var(--accent-purple); }

.callout-title {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.callout-danger  .callout-title { color: var(--accent-red); }
.callout-success .callout-title { color: var(--accent-green); }
.callout-info    .callout-title { color: var(--accent-blue); }
.callout-warning .callout-title { color: var(--accent-yellow); }
.callout-purple  { background: rgba(139, 92, 246, 0.08); border-color: var(--accent-purple); }
.callout-purple::before { content: '\f0eb'; color: var(--accent-purple); }
.callout-purple  .callout-title { color: var(--accent-purple); }
.callout-red     { background: rgba(239, 68, 68, 0.08);  border-color: var(--accent-red); }
.callout-red     .callout-title { color: var(--accent-red); }
.callout-blue    { background: rgba(59, 130, 246, 0.08);  border-color: var(--accent-blue); }
.callout-blue    .callout-title { color: var(--accent-blue); }
.callout-cyan    { background: rgba(6, 182, 212, 0.08);   border-color: var(--accent-cyan); }
.callout-cyan    .callout-title { color: var(--accent-cyan); }

/* ----------------------------------------------------------
   13. Tables
   ---------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}
.table-wrapper::-webkit-scrollbar { display: none; }

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: rgba(var(--accent-primary-rgb), 0.08);
  border-bottom: 2px solid rgba(var(--accent-primary-rgb), 0.15);
}

th {
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  white-space: nowrap;
}

td {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
  vertical-align: top;
  color: var(--text-secondary);
}
td:first-child {
  color: var(--text-primary);
  font-weight: 500;
}

/* #15 Table row hover with left accent */
tr {
  transition: background 0.15s;
}
tr:hover td {
  background: rgba(var(--accent-primary-rgb), 0.04);
}
tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-blue);
}
thead tr:hover th { background: none; box-shadow: none; }

/* ----------------------------------------------------------
   14. Inline Code
   ---------------------------------------------------------- */
:not(pre) > code {
  font-family: 'JetBrains Mono', monospace;
  font-size: max(0.75rem, 0.85em);
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 0.3rem;
  color: var(--text-link) !important;
  display: inline !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ----------------------------------------------------------
   15. Badges
   ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.badge-blue   { background: rgba(var(--accent-primary-rgb), 0.15);  color: var(--text-link); }
.badge-green  { background: rgba(16, 185, 129, 0.15);  color: #6ee7b7; }
.badge-red    { background: rgba(239, 68, 68, 0.15);   color: #fca5a5; }
.badge-yellow { background: rgba(245, 158, 11, 0.15);  color: #fcd34d; }
.badge-purple { background: rgba(139, 92, 246, 0.15);  color: #c4b5fd; }

/* ----------------------------------------------------------
   16. Comparison Grid
   ---------------------------------------------------------- */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
  margin: 1rem 0;
  position: relative;
}
.comparison-panel { min-width: 0; }
.comparison-panel {
  border-radius: 0;
  overflow: visible;
  border: none;
  background: var(--bg-secondary);
}
.comparison-panel > .macos-body,
.comparison-panel > div:not(.comparison-header) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
/* Panel borders */
.comparison-panel:first-child { border-right: 1px solid var(--border-color); }
.comparison-panel.bad  { border-right: 1px solid var(--border-color); }
.comparison-panel.good { }
.comparison-header {
  padding: 0.65rem 1.2rem;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}
.comparison-panel.bad  .comparison-header { background: rgba(239,68,68,0.08); color: #fca5a5; border-left: 3px solid rgba(239,68,68,0.4); }
.comparison-panel.good .comparison-header { background: rgba(16,185,129,0.08); color: #6ee7b7; border-left: 3px solid rgba(16,185,129,0.4); }
/* Neutral panels — first gets blue tint, second gets purple tint */
.comparison-panel:not(.bad):not(.good):first-child h4,
.comparison-panel:not(.bad):not(.good):first-child .comparison-header {
  color: #60a5fa;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.65rem 1.2rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  background: rgba(59,130,246,0.06);
  border-left: 3px solid rgba(59,130,246,0.35);
}
.comparison-panel:not(.bad):not(.good):last-child h4,
.comparison-panel:not(.bad):not(.good):last-child .comparison-header {
  color: #c084fc;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.65rem 1.2rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  background: rgba(192,132,252,0.06);
  border-left: 3px solid rgba(192,132,252,0.35);
}
.comparison-panel ul {
  padding: 0.7rem 1.5rem 0.7rem 2.2rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.75;
}
.comparison-panel li { padding: 0.05rem 0; }
.comparison-panel h4 {
  margin: 0;
}
.vs-badge {
  display: none;
}
@media (max-width: 700px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .vs-badge { position: relative; top: auto; left: auto; transform: none; margin: -0.8rem auto; width: 2rem; height: 2rem; font-size: 0.6rem; }
  .comparison-panel:first-child, .comparison-panel.bad { border-right: none; border-bottom: 1px solid var(--border-color); }
}

/* ----------------------------------------------------------
   17. Q&A Accordion
   ---------------------------------------------------------- */
.qa-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.qa-item.active {
  border-color: rgba(var(--accent-primary-rgb), 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
              0 0 12px rgba(var(--accent-primary-rgb), 0.06);
}

.qa-header {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background 0.2s;
}

.qa-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.qa-question {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.qa-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.qa-chevron {
  color: var(--text-muted);
  transition: transform 0.3s, color 0.2s;
  flex-shrink: 0;
  font-size: 0.8rem;
}
.qa-item.active .qa-chevron {
  transform: rotate(180deg);
  color: var(--accent-primary);
}

.qa-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.qa-item.active .qa-body {
  /* JS handles scrollHeight-based animation */
}

.qa-content {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* "Think First" prompt — purple accent with icon */
.qa-think {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-left: 3px solid var(--accent-purple);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #c4b5fd;
  line-height: 1.5;
  position: relative;
}
.qa-think strong {
  color: var(--accent-purple);
  font-style: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.375rem;
}

/* Main answer body */
.qa-content .body-text {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1.25rem;
  font-size: 0.925rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.qa-content .body-text strong {
  color: var(--text-primary);
}
.qa-content .body-text code {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--text-link);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}
.qa-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: qa-counter;
}
.qa-list li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.55;
  counter-increment: qa-counter;
}
/* Bullets for <ul> */
ul.qa-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.6;
}
/* Numbers for <ol> */
ol.qa-list li::before {
  content: counter(qa-counter);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary);
  opacity: 0.8;
}
.qa-list li code {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--text-link);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}
.mb-sm { margin-bottom: 0.5rem; }

/* "Great Answer" bonus — green accent */
.qa-great {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-left: 3px solid var(--accent-green);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #6ee7b7;
  line-height: 1.5;
}
.qa-great strong {
  color: var(--accent-green);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.375rem;
}
.qa-great code {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* ----------------------------------------------------------
   18. Collapsibles
   ---------------------------------------------------------- */
.collapsible {
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
/* First collapsible in a group gets top spacing from preceding text */
p + .collapsible,
.callout + .collapsible,
.table-wrapper + .collapsible,
.callout + .exercise-card {
  margin-top: 1.25rem;
}

.collapsible:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}
.collapsible.active {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.collapsible-header {
  padding: 1rem 1.5rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s;
}

.collapsible-header:hover {
  background: rgba(var(--accent-primary-rgb), 0.03);
}
/* Chevron icon inside header — styled as pill indicator */
.collapsible-header i.fa-chevron-right,
.collapsible-header i.fas {
  font-size: 0.6rem;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb), 0.06);
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s, background 0.25s, box-shadow 0.25s;
}
.collapsible:hover .collapsible-header i.fa-chevron-right,
.collapsible:hover .collapsible-header i.fas {
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.12);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.15);
}
.collapsible.active .collapsible-header i.fa-chevron-right,
.collapsible.active .collapsible-header i.fas {
  transform: rotate(90deg);
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.18);
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
}

.collapsible-chevron {
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s, background 0.2s;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb), 0.06);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.collapsible:hover .collapsible-chevron {
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.12);
}
.collapsible.active .collapsible-chevron {
  transform: rotate(180deg);
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.15);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible.active .collapsible-content {
  /* JS handles scrollHeight-based animation */
  overflow: visible;
}

.collapsible-body {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(var(--accent-primary-rgb), 0.1);
}

/* ----------------------------------------------------------
   19. Styled Lists
   ---------------------------------------------------------- */
ul.styled {
  list-style: none;
  padding: 0;
}

ul.styled li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  color: var(--text-secondary);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

ul.styled li:last-child {
  border-bottom: none;
}

ul.styled li::before {
  content: '\25B8';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 0.8rem;
  top: 0.6rem;
}

ul.styled.green li::before {
  color: var(--accent-green);
}

ul.styled.red li::before {
  color: var(--accent-red);
  content: '\2717';
}

/* ----------------------------------------------------------
   19b. Global List Spacing (all ul/ol inside content areas)
   ---------------------------------------------------------- */
.wiki-container ul:not(.styled):not(.hub-nav):not(.footer-links),
.wiki-container ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.wiki-container ul:not(.styled):not(.hub-nav):not(.footer-links) > li,
.wiki-container ol > li {
  margin-bottom: 0.4rem;
}
.wiki-container ul:not(.styled):not(.hub-nav):not(.footer-links) > li:last-child,
.wiki-container ol > li:last-child {
  margin-bottom: 0;
}

/* Sub-headings inside sections get proper top breathing room */
.section > h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.section > h3:first-child {
  margin-top: 0;
}

/* SVGs inside content areas: full-width with vertical breathing room */
.wiki-container svg[viewBox] {
  width: 100%;
  margin: 1.5rem 0;
}
/* Prevent full-width SVG rule from leaking into tooltips */
.tooltip-rich svg,
.tooltip-rich-content svg[viewBox] {
  width: auto;
  margin: 0;
}

/* Callouts inside grids: remove default bottom margin so grid gap controls spacing */
.grid-2 > .callout,
.grid-3 > .callout {
  margin: 0;
}

/* Lists inside callouts: tighter spacing since callout already provides padding */
.callout ul,
.callout ol {
  margin: 0;
  padding-left: 1.2em;
}

/* ----------------------------------------------------------
   20. Tabs
   ---------------------------------------------------------- */
.tab-container {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  overflow: visible;        /* Allow tooltips inside tabs to overflow */
  margin-bottom: 1.5rem;
}

.tab-header {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0.75rem 0.75rem 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-header::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab-btn.active {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-panel {
  display: none;
  padding: 1.5rem;
}

.tab-panel.active {
  display: block;
}

/* ----------------------------------------------------------
   21. Cheat Cards
   ---------------------------------------------------------- */
.cheat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-width: 0;
  position: relative;
}
.cheat-list {
  list-style: none;
  padding: 0.35rem 0.7rem 0.4rem;
  margin: 0;
}
.cheat-list li {
  padding: 0.18rem 0.35rem;
  line-height: 1.4;
  color: var(--text-secondary);
  font-size: 0.78rem;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.cheat-list li:hover { background: rgba(255,255,255,0.03); }
@media (hover: hover) {
  .cheat-card:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
}
/* Cheat card color variants — use class: cheat-blue, cheat-green, cheat-amber, etc. */
/* Falls back to accent-primary if no color class */
.cheat-card.cheat-blue   { border-color: rgba(59,130,246,0.2); }
.cheat-card.cheat-green  { border-color: rgba(16,185,129,0.2); }
.cheat-card.cheat-amber  { border-color: rgba(245,158,11,0.2); }
.cheat-card.cheat-purple { border-color: rgba(139,92,246,0.2); }
.cheat-card.cheat-pink   { border-color: rgba(236,72,153,0.2); }
.cheat-card.cheat-cyan   { border-color: rgba(6,182,212,0.2); }
.cheat-card.cheat-red    { border-color: rgba(239,68,68,0.2); }
.cheat-card.cheat-teal   { border-color: rgba(20,184,166,0.2); }
/* Header tint per color */
.cheat-card.cheat-blue > strong   { background: rgba(59,130,246,0.08); }
.cheat-card.cheat-green > strong  { background: rgba(16,185,129,0.08); }
.cheat-card.cheat-amber > strong  { background: rgba(245,158,11,0.08); }
.cheat-card.cheat-purple > strong { background: rgba(139,92,246,0.08); }
.cheat-card.cheat-pink > strong   { background: rgba(236,72,153,0.08); }
.cheat-card.cheat-cyan > strong   { background: rgba(6,182,212,0.08); }
.cheat-card.cheat-red > strong    { background: rgba(239,68,68,0.08); }
.cheat-card.cheat-teal > strong   { background: rgba(20,184,166,0.08); }
/* Title colors */
.cheat-card.cheat-blue strong   { color: #60a5fa; }
.cheat-card.cheat-green strong  { color: #34d399; }
.cheat-card.cheat-amber strong  { color: #fbbf24; }
.cheat-card.cheat-purple strong { color: #a78bfa; }
.cheat-card.cheat-pink strong   { color: #f472b6; }
.cheat-card.cheat-cyan strong   { color: #22d3ee; }
.cheat-card.cheat-red strong    { color: #f87171; }
.cheat-card.cheat-teal strong   { color: #2dd4bf; }
/* Hover glow per color */
.cheat-card.cheat-blue:hover   { border-color: #60a5fa; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(59,130,246,.12); }
.cheat-card.cheat-green:hover  { border-color: #34d399; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(16,185,129,.12); }
.cheat-card.cheat-amber:hover  { border-color: #fbbf24; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(245,158,11,.12); }
.cheat-card.cheat-purple:hover { border-color: #a78bfa; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(139,92,246,.12); }
.cheat-card.cheat-pink:hover   { border-color: #f472b6; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(236,72,153,.12); }
.cheat-card.cheat-cyan:hover   { border-color: #22d3ee; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(6,182,212,.12); }
.cheat-card.cheat-red:hover    { border-color: #f87171; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(239,68,68,.12); }
.cheat-card.cheat-teal:hover   { border-color: #2dd4bf; box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 20px rgba(20,184,166,.12); }
/* Separator matches card color */
.cheat-card.cheat-blue strong   { border-bottom-color: rgba(59,130,246,0.12); }
.cheat-card.cheat-green strong  { border-bottom-color: rgba(16,185,129,0.12); }
.cheat-card.cheat-amber strong  { border-bottom-color: rgba(245,158,11,0.12); }
.cheat-card.cheat-purple strong { border-bottom-color: rgba(139,92,246,0.12); }
.cheat-card.cheat-pink strong   { border-bottom-color: rgba(236,72,153,0.12); }
.cheat-card.cheat-cyan strong   { border-bottom-color: rgba(6,182,212,0.12); }
.cheat-card.cheat-red strong    { border-bottom-color: rgba(239,68,68,0.12); }
.cheat-card.cheat-teal strong   { border-bottom-color: rgba(20,184,166,0.12); }

.cheat-card pre {
  overflow-x: auto;
}

.cheat-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  position: relative;
}

.cheat-card-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--accent-cyan, #67e8f9);
  line-height: 1.5;
}
/* Title = header bar with accent tint */
.cheat-card > strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.cheat-list strong { display: inline; font-size: inherit; margin: 0; padding: 0; border: none; font-weight: 600; }
.cheat-card br { display: none; }
.cheat-card {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ----------------------------------------------------------
   22. Footer
   ---------------------------------------------------------- */
.footer {
  text-align: center;
  padding: 3rem 2rem 2rem;
  color: var(--text-muted);
  border-top: none;
  margin-top: 2rem;
  font-size: 0.875rem;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-primary-rgb), 0.04) 40%, rgba(var(--accent-primary-rgb), 0.06) 100%);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.4), rgba(56, 189, 248, 0.4), rgba(var(--accent-primary-rgb), 0.4), transparent);
}
.footer-inner {
  max-width: 720px;
  margin: 0 auto;
}
.footer-brand {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.footer-brand i {
  color: var(--accent-primary);
  margin-right: 0.375rem;
}
.footer-tagline {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--accent-primary);
}
.footer-links a i {
  margin-right: 0.3rem;
  font-size: 0.7rem;
  opacity: 0.6;
}
.footer-tech {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.footer-tech span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), 0.08);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.footer-divider {
  width: 60px;
  height: 1px;
  margin: 0 auto 1rem;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.3), transparent);
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ----------------------------------------------------------
   23a. SVG UML Diagrams
   ---------------------------------------------------------- */
.uml-diagram-wrapper {
  position: relative;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  overflow: hidden;
  scrollbar-width: none;
  box-shadow:
    0 0 30px rgba(var(--accent-primary-rgb), 0.06),
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(var(--accent-primary-rgb), 0.08);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--accent-primary-rgb), 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(56, 189, 248, 0.03) 0%, transparent 50%);
}
.uml-diagram-wrapper::-webkit-scrollbar {
  display: none;
}
.uml-svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
  display: block;
}
@media (max-width: 768px) {
  .uml-diagram-wrapper {
    padding: 1rem 0.5rem;
  }
  .uml-svg {
    min-width: 560px;
  }
}

/* ----------------------------------------------------------
   23b. Mermaid Diagrams
   ---------------------------------------------------------- */
.mermaid-container {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  margin: 1rem 0;
  overflow: auto;
  box-shadow:
    0 0 30px rgba(var(--accent-primary-rgb), 0.08),
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(var(--accent-primary-rgb), 0.1);
  max-height: 60vh;
  position: relative;
  max-width: 100%;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--accent-primary-rgb), 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(56, 189, 248, 0.03) 0%, transparent 50%);
}

.diagram-zoom-controls {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  z-index: 5;
}

.diagram-zoom-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  background: rgba(15, 23, 42, 0.9);
  color: var(--text-link);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.diagram-zoom-btn:hover {
  background: rgba(var(--accent-primary-rgb), 0.2);
  color: #fff;
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
  border-color: rgba(var(--accent-primary-rgb), 0.5);
}

.mermaid-container .mermaid {
  display: flex;
  justify-content: center;
  min-width: fit-content;
}

.mermaid-container .mermaid svg {
  height: auto;
}

.diagram-hint {
  display: none;
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.85);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  pointer-events: none;
}

/* Collapsible diagram toggle */
.diagram-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: rgba(var(--accent-primary-rgb), 0.08);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--text-link);
  font-size: 0.875rem;
  font-weight: 600;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, border-color 0.2s;
  min-height: 44px;
}

.diagram-toggle:hover {
  background: rgba(var(--accent-primary-rgb), 0.15);
  border-color: var(--accent-primary);
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.12);
}

.diagram-toggle .chevron {
  font-size: 0.7rem;
  transition: transform 0.3s;
  margin-left: auto;
  color: var(--text-muted);
}

.diagram-toggle.open .chevron {
  transform: rotate(180deg);
}

.mermaid-container.collapsed {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
}

/* ----------------------------------------------------------
   24. Mermaid Overrides (Class / Sequence / Flowchart)
   ---------------------------------------------------------- */

/* Class diagram */
.mermaid .classGroup rect {
  fill: #0f2d2b !important;
  stroke: #14b8a6 !important;
  stroke-width: 2px !important;
}
.mermaid .classGroup .label {
  fill: #f1f5f9 !important;
  font-weight: 600 !important;
}
.mermaid .classLabel .label {
  fill: #5eead4 !important;
}
.mermaid .classTitle {
  font-weight: 700 !important;
  fill: #2dd4bf !important;
  font-size: 16px !important;
}
.mermaid .classTitleText {
  fill: #2dd4bf !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.mermaid .relation {
  stroke: #2dd4bf !important;
  stroke-width: 2px !important;
}
.mermaid .cardinality {
  fill: #94a3b8 !important;
}
.mermaid defs marker path {
  fill: #2dd4bf !important;
  stroke: #2dd4bf !important;
}

/* Sequence diagram */
.mermaid .actor-line {
  stroke: #14b8a6 !important;
  stroke-width: 2px !important;
  stroke-dasharray: 4;
}
.mermaid .actor {
  fill: #0f2d2b !important;
  stroke: #14b8a6 !important;
  stroke-width: 2px !important;
}
.mermaid text.actor > tspan {
  fill: #e2e8f0 !important;
  font-weight: 600 !important;
}
.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: #2dd4bf !important;
  stroke-width: 2px !important;
}
.mermaid .messageText {
  fill: #f1f5f9 !important;
  font-weight: 500 !important;
}
.mermaid .note {
  fill: #0f2d2b !important;
  stroke: #14b8a6 !important;
  stroke-width: 1.5px !important;
}
.mermaid .noteText > tspan {
  fill: #e2e8f0 !important;
}
.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: #0f2d2b !important;
  stroke: #14b8a6 !important;
}
.mermaid .loopText > tspan {
  fill: #94a3b8 !important;
}
.mermaid .loopLine {
  stroke: #334155 !important;
}

/* Flowchart */
.mermaid .nodeLabel {
  color: #f1f5f9 !important;
  font-weight: 500 !important;
}
.mermaid .edgeLabel {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
.mermaid .label {
  color: #f1f5f9 !important;
}

/* ----------------------------------------------------------
   25. Utilities
   ---------------------------------------------------------- */
h3.sub {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
  color: var(--text-primary);
}

p.body-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------
   26. Responsive Breakpoints
   ---------------------------------------------------------- */

/* Tablet & small desktop */
@media (max-width: 1024px) {
  body {
    font-size: 0.9375rem;
    padding-top: 48px;
  }
  .wiki-container {
    padding: 0 1rem 2rem;
  }
  .hero {
    padding: 2.5rem 1rem 2rem;
  }
  .hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-meta {
    gap: 1rem;
    font-size: 0.8rem;
  }
  .section {
    margin: 2rem 0;
    scroll-margin-top: 4.5rem;
  }
  .section-title {
    font-size: 1.375rem;
  }
  .section-header {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .section-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  .card {
    margin-bottom: 1rem;
    border-radius: 0.75rem;
  }
  .card-title {
    font-size: 1rem;
  }
  .callout {
    padding: 1rem;
    margin: 0.75rem 0;
  }
  .macos-body {
    padding: 0.75rem 1rem;
  }
  .macos-body pre code {
    font-size: 0.8rem;
    line-height: 1.1;
  }
  .grid-2 {
    gap: 1rem;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  table {
    font-size: 0.8125rem;
  }
  td, th {
    padding: 0.5rem 0.75rem;
  }
  .top-toolbar {
    padding: 0.375rem 0.75rem;
  }
  .fab-btn {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
  .diagram-zoom-btn {
    width: 44px;
    height: 44px;
  }
  .sr-toggle {
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .mermaid-container {
    padding: 1rem;
    max-height: 50vh;
  }
  .diagram-hint {
    display: block;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .collapsible-body {
    padding: 1rem;
  }
  .tab-btn {
    padding: 0.875rem 1rem;
    min-height: 44px;
  }
  .tab-panel {
    padding: 1rem;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .toolbar-brand {
    font-size: 0.75rem;
  }
  body {
    font-size: 1rem;
    padding-top: 44px;
  }
  .wiki-container {
    padding: 0 0.625rem 1.5rem;
  }
  .hero {
    padding: 2rem 0.75rem 1.5rem;
  }
  .hero h1 {
    font-size: 1.5rem;
  }
  .hero-subtitle {
    font-size: 0.875rem;
  }
  .hero-meta {
    gap: 0.5rem;
  }
  .section-title {
    font-size: 1.2rem;
  }
  .card-title {
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
  }
  .macos-body pre code {
    font-size: 0.75rem;
  }
  .top-toolbar {
    padding: 0.25rem 0.5rem;
  }
  .fab-btn {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
  }
  .diagram-zoom-btn {
    width: 44px;
    height: 44px;
  }
  .section {
    scroll-margin-top: 3.5rem;
  }
  th {
    white-space: normal;
    word-break: break-word;
  }
  .footer {
    padding: 2rem 1rem;
  }
  .collapsible-body {
    padding: 0.75rem;
  }
  .qa-content {
    padding: 0 1rem 1rem;
  }
}

/* Extra small */
@media (max-width: 375px) {
  .wiki-container {
    padding: 0 0.5rem 1.5rem;
  }
  .qa-content {
    padding: 0 0.75rem 0.75rem;
  }
}

/* Tiny screens — keep 36px min for touch targets */
@media (max-width: 360px) {
  .top-toolbar {
    padding: 0.25rem 0.25rem;
  }
  .fab-btn {
    width: 36px;
    height: 36px;
    font-size: 0.7rem;
  }
}

/* ----------------------------------------------------------
   27. Hover Media Query & Reduced Motion
   ---------------------------------------------------------- */
@media (hover: hover) {
  .fab-btn:hover {
    background: rgba(var(--accent-primary-rgb), 0.2);
    border-color: var(--accent-blue);
    color: #fff;
    transform: scale(1.04);
  }
  .cheat-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================
   NEW COMPONENTS
   ========================================================== */

/* ----------------------------------------------------------
   28. Tooltip (Jargon / Complex Terms)
   Smart positioning: tries above, falls back to below.
   ---------------------------------------------------------- */
.tooltip-trigger {
  position: relative;
  border-bottom: 1.5px dashed rgba(var(--accent-primary-rgb), 0.4);
  cursor: help;
  color: inherit;
  display: inline;
  transition: border-color 0.25s, background 0.25s;
  padding-bottom: 1px;
}
@media (hover: hover) {
  .tooltip-trigger:hover {
    border-bottom-color: var(--accent-primary);
    border-bottom-style: solid;
    background: rgba(var(--accent-primary-rgb), 0.08);
    border-radius: 2px;
  }
}
.tooltip-trigger::after {
  content: '\f059';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.55rem;
  color: rgba(var(--accent-primary-rgb), 0.4);
  margin-left: 0.2rem;
  vertical-align: super;
  transition: color 0.25s;
}
@media (hover: hover) {
  .tooltip-trigger:hover::after { color: var(--accent-primary); }
}

.tooltip-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.4);
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  font-size: 0.8rem;
  font-weight: 400;
  font-style: normal;
  color: var(--text-secondary);
  width: max-content;
  max-width: min(320px, 90vw);   /* Never wider than viewport */
  min-width: 200px;
  z-index: 1002;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-primary-rgb), 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}

/* Arrow pointing down (tooltip above trigger) */
.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(var(--accent-primary-rgb), 0.4);
}

.tooltip-content.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* When tooltip is near the left edge, shift right */
.tooltip-content.shift-right {
  left: 0;
  transform: none;
}
.tooltip-content.shift-right::after {
  left: 1.5rem;
  transform: none;
}

/* When tooltip is near the right edge, shift left */
.tooltip-content.shift-left {
  left: auto;
  right: 0;
  transform: none;
}
.tooltip-content.shift-left::after {
  left: auto;
  right: 1.5rem;
  transform: none;
}

/* When tooltip must appear below (near top of viewport) */
.tooltip-content.below {
  bottom: auto;
  top: calc(100% + 10px);
}
.tooltip-content.below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(var(--accent-primary-rgb), 0.4);
}

/* ----------------------------------------------------------
   29. Popup / Overlay
   ---------------------------------------------------------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  background: var(--bg-secondary);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: popupSlideIn 0.25s ease;
}

@keyframes popupSlideIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.popup-content::-webkit-scrollbar { display: none; }
.popup-content { scrollbar-width: none; }

.popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  z-index: 1;
}

.popup-close:hover {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
}

/* ----------------------------------------------------------
   30. TL;DR Card
   ---------------------------------------------------------- */
.tldr-card {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
  position: relative;
  box-shadow: 0 4px 20px rgba(var(--accent-primary-rgb), 0.06),
              inset 0 1px 0 rgba(var(--accent-primary-rgb), 0.1);
}

.tldr-card::before {
  content: 'TL;DR';
  position: absolute;
  top: -0.6rem;
  left: 1.5rem;
  background: var(--bg-primary);
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tldr-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.tldr-card p:last-child { margin-bottom: 0; }
.tldr-card strong { color: var(--text-primary); }

/* ----------------------------------------------------------
   31. Prerequisites Card
   ---------------------------------------------------------- */
.prereq-card {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

.prereq-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prereq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.prereq-item {
  display: block;
  position: relative;
  padding: 0.55rem 0 0.55rem 1.25rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.1);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.6;
}

.prereq-item:last-child { border-bottom: none; }

.prereq-item > i { position: absolute; left: 0; top: 0.7rem; color: var(--accent-yellow); font-size: 0.7rem; }

.prereq-item .tooltip-trigger { color: #fcd34d; font-weight: 600; }

/* ----------------------------------------------------------
   32. Related Topics / What Next
   ---------------------------------------------------------- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.related-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-decoration: none !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}
.related-card * { text-decoration: none !important; }
.related-card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  background: rgba(var(--accent-primary-rgb), 0.03);
}
.related-card-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.related-card:hover .related-card-icon {
  background: rgba(var(--accent-primary-rgb), 0.2);
  transform: scale(1.08);
}
.related-card-text {
  min-width: 0;
}
.related-card-text strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none !important;
  margin-bottom: 0.1rem;
}
.related-card-text br + * {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.related-card-text h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.1rem 0;
}
.related-card-text p {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  opacity: 0.7;
}
/* Rotating icon colors for related cards */
.related-card:nth-child(1) .related-card-icon { background: rgba(59,130,246,0.12); color: #60a5fa; }
.related-card:nth-child(2) .related-card-icon { background: rgba(139,92,246,0.12); color: #a78bfa; }
.related-card:nth-child(3) .related-card-icon { background: rgba(16,185,129,0.12); color: #34d399; }
.related-card:nth-child(4) .related-card-icon { background: rgba(245,158,11,0.12); color: #fbbf24; }
.related-card:nth-child(5) .related-card-icon { background: rgba(236,72,153,0.12); color: #f472b6; }
.related-card:nth-child(6) .related-card-icon { background: rgba(6,182,212,0.12); color: #22d3ee; }
.related-card:nth-child(1):hover .related-card-icon { background: rgba(59,130,246,0.25); }
.related-card:nth-child(2):hover .related-card-icon { background: rgba(139,92,246,0.25); }
.related-card:nth-child(3):hover .related-card-icon { background: rgba(16,185,129,0.25); }
.related-card:nth-child(4):hover .related-card-icon { background: rgba(245,158,11,0.25); }
.related-card:nth-child(5):hover .related-card-icon { background: rgba(236,72,153,0.25); }
.related-card:nth-child(6):hover .related-card-icon { background: rgba(6,182,212,0.25); }

/* ----------------------------------------------------------
   33. Problem Cards (Jr) & Concept Cards (Sr)
   ---------------------------------------------------------- */
.problem-card {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
}

.problem-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fca5a5;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.problem-card-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.solution-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}

.solution-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--accent-green);
  transform: translateY(-1px);
}

.concept-card {
  background: rgba(var(--accent-primary-rgb), 0.06);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
}

.concept-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-link);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.concept-card-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ----------------------------------------------------------
   34. Practice Exercise
   ---------------------------------------------------------- */
.exercise-card {
  background: linear-gradient(135deg, rgba(6,182,212,0.06) 0%, rgba(139,92,246,0.04) 100%);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-left: 3px solid var(--accent-cyan, #22d3ee);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.35rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s;
}
/* Large watermark icon */
.exercise-card::before {
  content: '\f121';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  bottom: -0.5rem;
  right: -0.25rem;
  font-size: 4rem;
  color: rgba(6, 182, 212, 0.025);
  pointer-events: none;
  transition: color 0.3s;
}
/* Top-right accent glow dot */
.exercise-card::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
  pointer-events: none;
}
@media (hover: hover) {
  .exercise-card:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 6px 28px rgba(6, 182, 212, 0.1),
                0 0 20px rgba(6, 182, 212, 0.06);
    transform: translateY(-2px);
  }
  .exercise-card:hover::before {
    color: rgba(6, 182, 212, 0.08);
  }
}

.exercise-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent-cyan, #67e8f9);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  position: relative;
}

.exercise-card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
  position: relative;
}

.exercise-card-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 1rem;
  line-height: 1.65;
  position: relative;
}

/* ----------------------------------------------------------
   35. When To Use / When Not To
   ---------------------------------------------------------- */
.when-use-grid {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.when-use-grid .when-section-label {
  grid-column: 1 / -1;
  padding: 0.4rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
}
.when-use-grid .when-section-label--yes {
  background: rgba(16,185,129,0.06);
  color: #34d399;
  border-left: 3px solid rgba(16,185,129,0.4);
}
.when-use-grid .when-section-label--no {
  background: rgba(239,68,68,0.06);
  color: #f87171;
  border-left: 3px solid rgba(239,68,68,0.4);
  border-top: 1px solid var(--border-color);
}
/* Tint items under each section */
.when-section-label--yes ~ .when-item:not(.when-section-label--no ~ .when-item) {
  background: rgba(16,185,129,0.015);
}
.when-section-label--no ~ .when-item {
  background: rgba(239,68,68,0.015);
}

/* when-use-grid is already single-column at all breakpoints */

.when-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.when-item:hover { background: rgba(255,255,255,0.02); }

.when-text { flex: 1; }

.when-icon-yes {
  color: #34d399;
  font-size: 0.8rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.when-icon-no {
  color: #f87171;
  font-size: 0.8rem;
  margin-top: 0.05rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(248,113,113,0.3));
}

/* ----------------------------------------------------------
   36. Focus Styles (Keyboard Accessibility)
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.fab-btn:focus-visible,
.tab-btn:focus-visible,
.diagram-zoom-btn:focus-visible,
.solution-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ----------------------------------------------------------
   37. Selection Color
   ---------------------------------------------------------- */
::selection {
  background: rgba(var(--accent-primary-rgb), 0.3);
  color: var(--text-primary);
}

/* ----------------------------------------------------------
   38. Copy-to-Clipboard Button (#1)
   ---------------------------------------------------------- */
.copy-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  color: var(--text-muted);
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.copy-btn.copied { color: var(--accent-green); border-color: rgba(16, 185, 129, 0.4); }

/* ----------------------------------------------------------
   39. Button Press Feedback (#4)
   ---------------------------------------------------------- */
.fab-btn:active { transform: scale(0.92) !important; }
.solution-btn:active, .sr-toggle:active { transform: scale(0.97); }
.tab-btn:active { opacity: 0.7; }
.diagram-toggle:active { background: rgba(var(--accent-primary-rgb), 0.2); }
.popup-close:active { transform: scale(0.92); }
.copy-btn:active { transform: translateY(-50%) scale(0.92); }

/* ----------------------------------------------------------
   40. Scroll Reveal Animations (#7)
   ---------------------------------------------------------- */
.card, .callout, .qa-item, .exercise-card, .problem-card,
.concept-card, .cheat-card, .related-card, .tldr-card, .prereq-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s;
  will-change: opacity, transform;
}
.card.visible, .callout.visible, .qa-item.visible, .exercise-card.visible,
.problem-card.visible, .concept-card.visible, .cheat-card.visible,
.related-card.visible, .tldr-card.visible, .prereq-card.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Mobile: lighter animations for smooth scrolling */
@media (max-width: 768px) {
  .card, .callout, .qa-item, .exercise-card, .problem-card,
  .concept-card, .cheat-card, .related-card, .tldr-card, .prereq-card {
    transform: translateY(8px);
    transition-duration: 0.2s;
  }
  .hero, .hero::before {
    animation: none;
  }
  .hero-badge, .hero h1 {
    animation: none;
  }
  .top-toolbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 20, 35, 0.95);
  }
  .landing-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }
}

/* ----------------------------------------------------------
   41. (reserved)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   42. Tooltip Animation (#11) — JS handles positioning via
       position:fixed, so no CSS transform overrides needed.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   43. Line Numbers in Code (#13)
   ---------------------------------------------------------- */
.code-line { display: block; line-height: 1; padding: 0; margin: 0; white-space: pre; }
.line-num {
  display: inline-block;
  width: 1.2rem;
  text-align: right;
  padding-right: 0.35rem;
  margin-right: 0.35rem;
  color: rgba(148, 163, 184, 0.2);
  border-right: 1px solid rgba(148, 163, 184, 0.06);
  user-select: none;
  font-size: 0.7em;
}

/* ----------------------------------------------------------
   44. Popup Close Animation (#16)
   ---------------------------------------------------------- */
.popup-content.closing {
  animation: popupSlideOut 0.2s ease forwards;
}
@keyframes popupSlideOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(12px) scale(0.97); opacity: 0; }
}

/* ----------------------------------------------------------
   45. Cmd+K Search Palette (#14)
   ---------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}
.search-box {
  background: var(--bg-secondary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  border-radius: var(--radius-lg);
  width: min(560px, 90vw);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popupSlideIn 0.2s ease;
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.search-input-wrap i {
  color: var(--text-muted);
  font-size: 1rem;
}
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
}
.search-input::placeholder { color: var(--text-muted); }
.search-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  color: var(--text-muted);
}
.search-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
}
.search-results:empty::after {
  content: 'No sections found';
  display: block;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: background 0.1s;
}
.search-result-item:hover, .search-result-item.active {
  background: rgba(var(--accent-primary-rgb), 0.12);
  color: var(--text-primary);
}
.search-result-item i {
  color: var(--accent-blue);
  width: 20px;
  text-align: center;
  font-size: 0.85rem;
}
.search-results::-webkit-scrollbar { display: none; }
.search-results { scrollbar-width: none; }

/* ----------------------------------------------------------
   46. (reserved — old sidebar removed)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   47. Utility Classes
   ---------------------------------------------------------- */
.relative { position: relative; }
.z-1 { z-index: 1; }
.mt-sm { margin-top: 0.75rem; }
.mt-md { margin-top: 1rem; }
.mb-sm { margin-bottom: 0.75rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mt-lg { margin-top: 1.5rem; }
.mt-xs { margin-top: 0.5rem; }
.text-green { color: var(--accent-green); }
.text-red { color: var(--accent-red); }
.text-yellow { color: var(--accent-yellow); }
.text-purple { color: #a78bfa; }
.text-blue { color: #60a5fa; }
.text-cyan { color: #22d3ee; }
.icon-gap { margin-right: 0.5rem; }
.pad-card { padding: 1rem 1.25rem; }
.text-xs { font-size: 0.8rem; }

/* (Typography system moved to enhance.css — loaded via @import) */

/* Animated underline for content links */
.card-body a,
.qa-content a,
.callout a {
  text-decoration: none;
  color: var(--text-link);
  background-image: linear-gradient(var(--accent-primary), var(--accent-primary));
  background-size: 0% 1px;
  background-position: center bottom;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 1px;
}
.card-body a:hover,
.qa-content a:hover,
.callout a:hover {
  background-size: 100% 1px;
}

/* ----------------------------------------------------------
   48. Search Palette Footer
   ---------------------------------------------------------- */
.search-footer {
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.search-footer kbd {
  background: var(--bg-tertiary);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.7rem;
}

/* ----------------------------------------------------------
   45. Landing Page
   ---------------------------------------------------------- */
.toolbar-brand {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.landing-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.4s, transform 0.3s;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: landingCardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-card:nth-child(2) {
  animation-delay: 0.15s;
}

/* Gradient border glow layer */
.landing-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.4), rgba(56, 189, 248, 0.4));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.landing-card:hover:not(.landing-card--soon)::after {
  opacity: 1;
}

@keyframes landingCardEntrance {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-card--soon {
  animation-name: landingCardEntranceDim;
}
@keyframes landingCardEntranceDim {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 0.55; transform: translateY(0); }
}
.landing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.landing-card--lld::before { background: linear-gradient(90deg, var(--accent-primary), #38bdf8); }
.landing-card--hld::before { background: linear-gradient(90deg, #38bdf8, var(--accent-primary)); }

.landing-card:hover:not(.landing-card--soon) {
  border-color: transparent;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(var(--accent-primary-rgb), 0.1);
  transform: translateY(-4px) perspective(800px) rotateX(1deg);
}

.landing-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.landing-card:hover:not(.landing-card--soon) .landing-card-icon {
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.3),
              0 0 40px rgba(var(--accent-primary-rgb), 0.1);
  transform: scale(1.05);
}
.landing-card--lld .landing-card-icon {
  background: rgba(var(--accent-primary-rgb), 0.12);
  color: var(--accent-blue);
}
.landing-card--hld .landing-card-icon {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-green);
}

.landing-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.landing-card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.landing-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.775rem;
  color: var(--text-muted);
}
.landing-card-stats i {
  margin-right: 0.3rem;
}

.landing-card-cta {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.2s;
}
.landing-card-cta i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-card:hover:not(.landing-card--soon) .landing-card-cta i {
  transform: translateX(4px);
}
.landing-card:hover .landing-card-cta:not(.landing-card-cta--soon) {
  gap: 0.75rem;
}
.landing-card-cta--soon {
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .landing-grid {
    grid-template-columns: 1fr;
  }
  .landing-card {
    padding: 1.5rem;
  }
}

/* ----------------------------------------------------------
   46. LLD Hub — Topic Cards & Categories
   ---------------------------------------------------------- */
.lld-category {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.lld-category:first-of-type {
  margin-top: 0.5rem;
}

.lld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.lld-topic-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
}
a.lld-topic-card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.3);
  background: rgba(var(--accent-primary-rgb), 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2),
              0 0 20px rgba(var(--accent-primary-rgb), 0.08);
}
a.lld-topic-card:hover .lld-topic-icon {
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
  transition: box-shadow 0.3s ease;
}
.lld-topic-card--soon {
  opacity: 0.45;
  cursor: default;
}

.lld-topic-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  background: rgba(var(--accent-primary-rgb), 0.12);
  color: var(--accent-blue);
}
.lld-topic-icon--green {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-green);
}
.lld-topic-icon--purple {
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent-purple);
}
.lld-topic-icon--cyan {
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent-cyan);
}

.lld-topic-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lld-topic-status {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}
.lld-topic-status--ready {
  color: var(--accent-green);
}

/* ----------------------------------------------------------
   47. Learning Path — Visual Roadmap
   ---------------------------------------------------------- */
.learning-path {
  position: relative;
  padding-left: 2.5rem;
  margin-top: 0.5rem;
}
.learning-path::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--accent-green),
    var(--accent-primary),
    var(--accent-purple),
    var(--accent-cyan)
  );
  border-radius: 1px;
}

.lp-phase {
  position: relative;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, background-color 0.2s;
}
.lp-phase:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.2);
  background: rgba(var(--accent-primary-rgb), 0.03);
}
.lp-phase:last-child {
  margin-bottom: 0;
}

.lp-phase-num {
  position: absolute;
  left: -2.5rem;
  top: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 1;
  border: 2px solid var(--bg-primary);
}
.lp-phase-num--green  { background: var(--accent-green); color: #fff; }
.lp-phase-num--blue   { background: var(--accent-primary); color: #fff; }
.lp-phase-num--purple { background: var(--accent-purple); color: #fff; }
.lp-phase-num--cyan   { background: var(--accent-cyan); color: #fff; }

.lp-phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.lp-phase-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.lp-phase-count {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-primary-rgb), 0.12);
  color: var(--accent-primary);
  white-space: nowrap;
}
.lp-phase-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.lp-phase-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.lp-topic-pill {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--text-secondary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
}

.lp-case-marker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding-left: 0.5rem;
}
.lp-case-marker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-purple);
  flex-shrink: 0;
}
.lp-case-marker span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----------------------------------------------------------
   48. Difficulty Badges & Pattern Tags
   ---------------------------------------------------------- */
.lld-difficulty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.lld-difficulty--easy {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-green);
}
.lld-difficulty--medium {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-yellow);
}
.lld-difficulty--hard {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-red);
}

.lld-pattern-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.lld-pattern-tag {
  font-size: 0.55rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-primary-rgb), 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.08);
}

/* Case study subcategory headers (smaller than .lld-category) */
.lld-subcategory {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--border-color);
}
.lld-subcategory:first-of-type {
  margin-top: 0.5rem;
}
.lld-subcategory i {
  margin-right: 0.4rem;
}

/* Section count badge in section headers */
.section-count-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
  margin-left: 0.75rem;
  vertical-align: middle;
}

/* Hub nav pills (sticky section navigation) */
.hub-nav {
  position: sticky;
  top: 48px;
  z-index: 50;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 0.6rem 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: -1rem calc(-1 * var(--space-6)) 0;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.hub-nav-pill {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.hub-nav-pill:hover {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
}
.hub-nav-pill i { margin-right: 0.35rem; font-size: 0.7rem; }

/* Coming soon compact line */
.coming-soon-line {
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.5rem 0 0;
  line-height: 1.6;
}
.coming-soon-line i { margin-right: 0.3rem; font-size: 0.65rem; }
.coming-soon-line span { opacity: 0.7; }

/* Featured case study card */
.featured-study {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-primary);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.featured-study:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}
.featured-study-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--accent-primary);
  flex-shrink: 0;
}
.featured-study-text { flex: 1; }
.featured-study-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.featured-study-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}
.featured-study-cta {
  font-size: 0.75rem;
  color: var(--accent-primary);
  font-weight: 500;
  flex-shrink: 0;
}

/* Roadmap compact list (inside collapsibles) */
.roadmap-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.roadmap-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}
.roadmap-item-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}
.roadmap-item .lld-pattern-tags {
  margin: 0;
}

/* LP topic pill as link */
.lp-topic-pill--ready {
  background: rgba(var(--accent-primary-rgb), 0.15);
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: none;
}
.lp-topic-pill--ready:hover {
  background: rgba(var(--accent-primary-rgb), 0.25);
}

/* Phase progress badge */
.lp-phase-progress {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
  margin-left: auto;
  white-space: nowrap;
}
.lp-phase-progress--done {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

/* Advanced topics compact list */
.advanced-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.advanced-topic-chip {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.advanced-topic-chip i { font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 768px) {
  .hub-nav {
    gap: 0.35rem;
    padding: 0.5rem var(--space-4);
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
  }
  .hub-nav-pill { font-size: 0.7rem; padding: 0.3rem 0.75rem; }
  .featured-study { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .featured-study-cta { align-self: flex-end; }
  .lld-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .learning-path {
    padding-left: 2rem;
  }
  .lp-phase-num {
    left: -2rem;
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
  }
  .learning-path::before {
    left: 12px;
  }
  .lp-phase {
    padding: 0.875rem 1rem;
  }
  .lp-phase-title {
    font-size: 0.85rem;
  }
  .lp-topic-pill {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .lld-grid {
    grid-template-columns: 1fr;
  }
  .lld-topic-card {
    gap: 0.75rem;
  }
  .lld-difficulty {
    font-size: 0.55rem;
  }
  .lld-pattern-tag {
    font-size: 0.5rem;
  }
  .learning-path {
    padding-left: 1.75rem;
  }
  .lp-phase-num {
    left: -1.75rem;
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
  }
  .learning-path::before {
    left: 10px;
  }
}

/* ----------------------------------------------------------
   SIDEBAR (Case study pages with body.has-sidebar)
   ---------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 260px;
  height: 100vh;
  background: var(--bg-secondary, #1e293b);
  border-right: 1px solid var(--border-primary, rgba(255,255,255,0.06));
  overflow-y: auto;
  z-index: 100;
  padding-bottom: 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-primary, rgba(255,255,255,0.1)) transparent;
  transition: transform 0.3s ease;
}
.sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary, #e2e8f0);
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.06));
  position: sticky;
  top: 0;
  background: var(--bg-secondary, #1e293b);
  z-index: 2;
}
.sidebar-close {
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-muted, #64748b);
  transition: color 0.2s;
  display: none;
}
.sidebar-close:hover { color: var(--text-primary, #e2e8f0); }
.sidebar-links {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.sidebar-links li { margin: 0; padding: 0; }
.sidebar-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
  line-height: 1.3;
}
.sidebar-links a:hover {
  background: rgba(var(--accent-primary-rgb, 20,184,166), 0.06);
  color: var(--text-primary, #e2e8f0);
}
.sidebar-links a.active {
  background: rgba(var(--accent-primary-rgb, 20,184,166), 0.1);
  color: var(--accent-primary, #14b8a6);
  border-left-color: var(--accent-primary, #14b8a6);
  font-weight: 600;
}
.sidebar-links a i { width: 16px; text-align: center; font-size: 0.75rem; flex-shrink: 0; }
.sidebar-group-label {
  font-size: 0.68rem !important;
  color: var(--text-muted, #64748b) !important;
  text-transform: uppercase;
  padding: 1rem 1.25rem 0.35rem !important;
  letter-spacing: 0.06em;
  cursor: default;
  font-weight: 600;
}
/* Sidebar hamburger toggle (mobile) */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 1.25rem; left: 1.25rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-primary, #14b8a6);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 101;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  align-items: center;
  justify-content: center;
}
/* Layout shift — push content right on desktop */
body.has-sidebar .top-toolbar { /* stays centered on full viewport via base left:50% */ }
body.has-sidebar .hero { margin-left: 260px; }
body.has-sidebar .wiki-container { max-width: 960px; margin-left: max(calc(260px + 2rem), calc(50vw - 480px)); margin-right: auto; padding: 0 2rem 4rem; }
body.has-sidebar .footer { margin-left: 260px; }

/* Tablet and below: overlay sidebar */
@media (max-width: 1100px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  .sidebar-close { display: block; }
  .sidebar-toggle { display: flex; }
  body.has-sidebar .top-toolbar,
  body.has-sidebar .hero,
  body.has-sidebar .wiki-container,
  body.has-sidebar .footer { margin-left: 0; max-width: none; }
}
/* Sidebar backdrop for mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}
.sidebar-backdrop.visible { display: block; }

/* ----------------------------------------------------------
   CASE STUDY COMPONENTS
   ---------------------------------------------------------- */
.before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 640px) { .before-after-grid { grid-template-columns: 1fr; } }
.level-badge { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; margin-left: 0.5rem; font-weight: 600; border: 1px solid; }
.level-badge-easy { background: rgba(34,197,94,0.15); color: #86efac; }
.level-badge-medium { background: rgba(234,179,8,0.15); color: #fde047; }
.level-badge-hard { background: rgba(239,68,68,0.15); color: #fca5a5; }
/* ── Think First Box (HLD) — Premium ── */
.think-first-box {
  position: relative;
  border: 1px solid rgba(59,130,246,0.25);
  border-left: 4px solid #60a5fa;
  background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 100%);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.think-first-box .think-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.82rem;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.65rem;
}
.think-first-box .think-label::before {
  content: '\1F9E0';
  font-size: 1.1rem;
  line-height: 1;
}
.think-first-box p {
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}
.think-first-box p:last-child { margin-bottom: 0; }
.think-first-box .think-hint {
  display: block;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(59,130,246,0.12);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}
.monologue { border-left: 3px solid var(--accent-primary); background: rgba(var(--accent-primary-rgb),0.04); padding: 1.25rem 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1rem 0; font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); }
.monologue-label { margin: 0 0 0.5rem 0; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.smell-card { padding: 1rem 1.25rem; background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.2); border-radius: 0.75rem; margin: 1rem 0; }
.decision-compass { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(var(--accent-primary-rgb),0.06); border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.fork-consequence-bad { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }
.fork-consequence-good { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.06); }
.fork-when-fine { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.06); }
.fork-cost { border-color: rgba(234,179,8,0.3); background: rgba(234,179,8,0.06); }
.level-progress { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.level-progress-item { padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 600; border: 1px solid; display: flex; align-items: center; gap: 0.4rem; transition: transform 0.15s, box-shadow 0.15s; }
.level-progress-item.done { border-color: #34d399; color: #34d399; background: rgba(52,211,153,0.06); }
.level-progress-item.current { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.08); box-shadow: 0 0 8px rgba(251,191,36,0.15); }
.level-progress-item.locked { border-color: var(--text-muted); color: var(--text-muted); opacity: 0.5; }
@media (hover:hover) { .level-progress-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); } }

/* ── Difficulty Tags (HLD Q&A) ── */
.difficulty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.difficulty-beginner  { background: rgba(34,197,94,0.12); color: #86efac; border-color: rgba(34,197,94,0.3); }
.difficulty-intermediate { background: rgba(234,179,8,0.12); color: #fde047; border-color: rgba(234,179,8,0.3); }
.difficulty-advanced  { background: rgba(249,115,22,0.12); color: #fdba74; border-color: rgba(249,115,22,0.3); }
.difficulty-expert    { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.3); }

/* ── Version Badges (HLD progressive builds) ── */
.version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-primary-rgb),0.1));
  color: var(--accent-primary);
  border: 1px solid rgba(var(--accent-primary-rgb),0.35);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.version-badge-current {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.35), rgba(var(--accent-primary-rgb),0.2));
  box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.25);
}

/* ── Math Block (HLD back-of-envelope) — Premium ── */
.math-block {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid rgba(245,158,11,0.2);
  border-left: 4px solid #fbbf24;
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-primary);
  overflow-x: auto;
}
.math-block .math-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.math-block .math-label::before {
  content: '\f1ec';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85rem;
}
.math-block p {
  margin: 0.35rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(245,158,11,0.04);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.math-block .math-result {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fde047;
}

/* ── Architecture Comparison (HLD before/after) ── */
.arch-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin: 1.5rem 0;
}
.arch-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb),0.15);
  color: var(--accent-primary);
  font-size: 1rem;
}
@media (max-width: 640px) {
  .arch-compare { grid-template-columns: 1fr; }
  .arch-compare-arrow { margin: 0 auto; transform: rotate(90deg); }
}

/* ── Step Flow (HLD numbered steps) ── */
.step-flow { counter-reset: step-counter; margin: 1.5rem 0; }
.step-flow-item {
  position: relative;
  counter-increment: step-counter;
  padding: 1.25rem 1.25rem 1.25rem 3.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
}
.step-flow-item::before {
  content: counter(step-counter);
  position: absolute;
  top: 1.15rem;
  left: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb),0.15);
  color: var(--accent-primary);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(var(--accent-primary-rgb),0.3);
}
.step-flow-item h4 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--text-primary); }
.step-flow-item p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }

/* ── SPA Page Transition Bar ── */
.spa-loader {
  position: fixed; top: 0; left: 0; width: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--accent-primary), #38bdf8, var(--accent-primary));
  background-size: 200% 100%;
  animation: spaLoaderShimmer 1s linear infinite;
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
}
@keyframes spaLoaderShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   BATCH 1 — Visual Explanation Components (10)
   Appended 2026-03-21
   ============================================================ */

/* ----------------------------------------------------------
   B1-1. Rich Tooltips (.tooltip-rich)
   ---------------------------------------------------------- */
.tooltip-rich {
  position: relative;
  display: inline;
  cursor: help;
  border-bottom: 1px dashed var(--accent-primary);
  color: var(--accent-primary);
}
.tooltip-rich-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 340px;
  min-width: 200px;
  padding: 0.85rem 1rem;
  background: #0f172a;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 0.6rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--accent-primary-rgb), 0.06);
  z-index: 10000;
  pointer-events: none;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #cbd5e1;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
}
.tooltip-rich-content strong {
  display: block;
  color: var(--accent-primary);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.15);
}
/* Arrow pointing down */
.tooltip-rich-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #0f172a;
}
/* Rich tooltip inherits tooltip-content positioning from existing system */
.tooltip-rich-content.tooltip-content {
  max-width: 360px;
  min-width: 200px;
  padding: 0.85rem 1rem;
  background: #0f172a;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 0.6rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--accent-primary-rgb), 0.06);
  font-size: 0.84rem;
  line-height: 1.6;
  color: #cbd5e1;
}
@keyframes tooltipRichIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Below variant */
.tooltip-rich--below .tooltip-rich-content {
  bottom: auto;
  top: calc(100% + 10px);
}
.tooltip-rich--below .tooltip-rich-content::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}
/* Inner content styles */
.tooltip-rich-content h4 {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  color: var(--accent-primary);
  font-weight: 700;
}
.tooltip-rich-content p {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tooltip-rich-content p:last-child { margin-bottom: 0; }
.tooltip-rich-content pre {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  background: var(--bg-code);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.8rem;
}
.tooltip-rich-content code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
}
.tooltip-rich-content ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.tooltip-rich-content svg {
  max-width: 100%;
  height: auto;
  margin-top: var(--space-2);
}
@media (max-width: 600px) {
  .tooltip-rich-content {
    max-width: 280px;
    left: 0;
    transform: none;
  }
  .tooltip-rich-content::after,
  .tooltip-rich-content::before { left: 1.5rem; transform: none; }
  .tooltip-rich:hover .tooltip-rich-content {
    animation: tooltipRichInMobile 200ms ease forwards;
  }
  @keyframes tooltipRichInMobile {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ----------------------------------------------------------
   B1-2. Math Stepper (.math-stepper) — Premium Redesign
   ---------------------------------------------------------- */
.math-stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-6) 0;
}
.math-step {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: 0;
  position: relative;
  animation: mathStepIn 400ms ease both;
}
.math-step:last-child .math-step-number::after { display: none; }
@keyframes mathStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.math-step:nth-child(1) { animation-delay: 0ms; }
.math-step:nth-child(2) { animation-delay: 80ms; }
.math-step:nth-child(3) { animation-delay: 160ms; }
.math-step:nth-child(4) { animation-delay: 240ms; }
.math-step:nth-child(5) { animation-delay: 320ms; }
.math-step:nth-child(6) { animation-delay: 400ms; }
.math-step:nth-child(7) { animation-delay: 480ms; }
.math-step:nth-child(8) { animation-delay: 560ms; }

.math-step-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  position: relative;
}
/* Number badge — clean, minimal */
.math-step-number::before {
  content: attr(data-num);
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.1);
  border: 1.5px solid rgba(var(--accent-primary-rgb), 0.3);
  flex-shrink: 0;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.math-step:hover .math-step-number::before {
  background: rgba(var(--accent-primary-rgb), 0.18);
  border-color: rgba(var(--accent-primary-rgb), 0.5);
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.2);
}
/* Connecting line below the circle */
.math-step-number::after {
  content: '';
  flex: 1;
  width: 1.5px;
  background: rgba(255,255,255,0.06);
  margin-top: 0.3rem;
}

.math-step-content {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.25rem;
  margin: 0.3rem 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
}
/* Subtle top-left glow rim */
.math-step-content::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.12), transparent 40%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.25s;
}
@media (hover:hover) {
  .math-step-content:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    transform: translateY(-2px);
  }
  .math-step-content:hover::before { opacity: 1; }
}
.math-step-operation {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.math-step-result {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #e2e8f0;
  margin-bottom: 0.4rem;
}
.math-step-why {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .math-step { grid-template-columns: 2.2rem 1fr; }
  .math-step-number::before { width: 1.5rem; height: 1.5rem; font-size: 0.65rem; }
  .math-step-operation { font-size: 0.8rem; }
  .math-step-result { font-size: 0.95rem; }
}

/* ----------------------------------------------------------
   B1-3. Trade-off Slider — Interactive (.tradeoff-slider)
   ---------------------------------------------------------- */
.tradeoff-slider {
  margin: var(--space-6) 0;
  padding: 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
.tradeoff-left,
.tradeoff-right {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.tradeoff-left  { color: #3b82f6; float: left; }
.tradeoff-right { color: #ef4444; float: right; }
.tradeoff-track {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 35%, #a855f7 50%, #f59e0b 75%, #ef4444 100%);
  margin: 0.5rem 0 0;
  clear: both;
  cursor: pointer;
  user-select: none;
}
/* Snap point dots */
.tradeoff-snap-dots {
  position: absolute;
  inset: 0;
}
.tradeoff-snap-dot {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.25);
  transform: translate(-50%, -50%);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tradeoff-snap-dot.active {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
/* Draggable handle */
.tradeoff-handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 12px rgba(var(--accent-primary-rgb), 0.3);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 5;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}
.tradeoff-handle:active { cursor: grabbing; box-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 0 20px rgba(var(--accent-primary-rgb), 0.5); }
.tradeoff-handle.dragging { transition: none; }
/* Info panel below */
.tradeoff-info {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  min-height: 3.5rem;
  transition: border-color 0.25s;
}
.tradeoff-info-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.tradeoff-info-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.tradeoff-label, .tradeoff-marker { display: none; } /* hide old elements */
.tradeoff-label::after { display: none; }
@media (max-width: 600px) {
  .tradeoff-slider { padding: 1rem; }
}

/* ----------------------------------------------------------
   B1-4. Architecture Diff (.arch-diff)
   ---------------------------------------------------------- */
.arch-diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  align-items: stretch;
}
.arch-diff-before,
.arch-diff-after {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.arch-diff-before { border-color: rgba(239, 68, 68, 0.35); }
.arch-diff-after  { border-color: rgba(16, 185, 129, 0.35); }
/* Subtle tint overlays */
.arch-diff-before::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.03);
  pointer-events: none;
}
.arch-diff-after::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 185, 129, 0.03);
  pointer-events: none;
}
.arch-diff-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.arch-diff-label--before {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-red);
}
.arch-diff-label--after {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-green);
}
.arch-diff-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arch-diff-divider span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
}
.arch-diff-highlight {
  outline: 2px solid rgba(16, 185, 129, 0.6);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  animation: archDiffPulse 2s ease-in-out infinite;
}
@keyframes archDiffPulse {
  0%, 100% { outline-color: rgba(16, 185, 129, 0.6); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.15); }
  50%      { outline-color: rgba(16, 185, 129, 0.9); box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.2); }
}
/* Content inside the panels */
.arch-diff-before p,
.arch-diff-after p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.arch-diff-before svg,
.arch-diff-after svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .arch-diff {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .arch-diff-divider { transform: rotate(90deg); padding: var(--space-2) 0; }
}

/* ----------------------------------------------------------
   B1-5. Evolution Stepper (.evolution-stepper)
   ---------------------------------------------------------- */
.evolution-stepper {
  position: relative;
  padding-left: 2.5rem;
  margin: var(--space-6) 0;
}
/* Vertical line */
.evolution-stepper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.1rem;
  width: 2px;
  background: var(--border-color);
}
.evo-step {
  position: relative;
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.evo-step:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.4);
}
.evo-step--active {
  border-color: rgba(var(--accent-primary-rgb), 0.5);
  box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.1);
}
.evo-step-badge {
  position: absolute;
  left: calc(-2.5rem - 1px);
  top: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--accent-primary);
  font-weight: 800;
  font-size: 0.75rem;
  border: 2px solid var(--accent-primary);
  z-index: 1;
}
.evo-step--active .evo-step-badge {
  background: var(--accent-primary);
  color: var(--bg-primary);
}
.evo-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.evo-step-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* Break points between steps */
.evo-step-break {
  position: relative;
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-4);
  background: rgba(239, 68, 68, 0.08);
  border: 1px dashed rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--accent-red);
  font-weight: 600;
}
.evo-step-break::before {
  content: '\26A0';
  margin-right: var(--space-2);
}
.evo-step-break span {
  color: var(--accent-red);
}
@media (max-width: 600px) {
  .evolution-stepper { padding-left: 2rem; }
  .evo-step-badge { left: calc(-2rem - 1px); width: 1.8rem; height: 1.8rem; font-size: 0.7rem; }
}

/* ----------------------------------------------------------
   B1-6. Protocol Sequence Diagram (.sequence-diagram)
   Built by JS: reads data-participants + .seq-msg elements,
   renders participant boxes, lifelines, and arrow rows.
   ---------------------------------------------------------- */
.sequence-diagram {
  margin: var(--space-6) 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 1.25rem;
  overflow-x: auto;
}
/* Participant header row */
.seq-header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0;
  position: relative;
}
.seq-participant {
  padding: 0.4rem 1rem;
  background: rgba(var(--accent-primary-rgb), 0.08);
  border: 1.5px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-primary);
  text-align: center;
  min-width: 70px;
  z-index: 2;
  position: relative;
}
/* Lifeline container */
.seq-body {
  display: flex;
  justify-content: space-around;
  position: relative;
}
.seq-lifeline {
  width: 1.5px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 4px, transparent 4px, transparent 8px);
  flex-shrink: 0;
}
/* Message row — positioned over lifelines */
.seq-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 2.4rem;
}
.seq-arrow-line {
  position: absolute;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.seq-arrow-line.req { background: #3b82f6; }
.seq-arrow-line.resp { background: #34d399; }
/* Arrowhead */
.seq-arrow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  transform: translateY(-50%);
}
.seq-arrow-line.arrow-right::after { right: -1px; border-left: 7px solid; border-left-color: inherit; }
.seq-arrow-line.arrow-left::after { left: -1px; border-right: 7px solid; border-right-color: inherit; }
/* Label on arrow */
.seq-msg-label {
  position: absolute;
  top: -1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--bg-primary);
  z-index: 3;
}
.seq-arrow-line.req .seq-msg-label { color: #60a5fa; }
.seq-arrow-line.resp .seq-msg-label { color: #6ee7b7; }
/* Time badge */
.seq-msg-time {
  position: absolute;
  top: 1rem;
  font-size: 0.62rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  z-index: 3;
}
/* Hide the source elements (JS reads them) */
.seq-flow { display: none; }
/* Old classes hidden */
.seq-participants, .seq-messages { display: none; }
.seq-message--left {
  background: linear-gradient(270deg, transparent, rgba(16, 185, 129, 0.04));
}
@media (max-width: 600px) {
  .seq-participant { min-width: 60px; font-size: 0.78rem; padding: var(--space-1) var(--space-2); }
  .seq-label { font-size: 0.78rem; }
}

/* ----------------------------------------------------------
   B1-7. Annotated Diagram (.annotated-diagram)
   ---------------------------------------------------------- */
.annotated-diagram {
  position: relative;
  margin: var(--space-6) 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.annotated-diagram > svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.annotation-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@keyframes annotation-beacon {
  0% { box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(var(--accent-primary-rgb),0.4); }
  70% { box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 10px rgba(var(--accent-primary-rgb),0); }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(var(--accent-primary-rgb),0); }
}
.annotation-marker {
  pointer-events: auto;
  position: absolute;
  top: var(--marker-top, 10%);
  left: var(--marker-left, 10%);
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 800;
  font-size: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: annotation-beacon 2.5s ease-out infinite;
  z-index: 10;
}
.annotation-marker:hover {
  transform: scale(1.2);
  box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.7);
  animation: none;
}
.annotation-marker.active {
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(var(--accent-primary-rgb), 0.6);
  animation: none;
}
.annotation-marker.active {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.annotation-panel {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: var(--radius-md);
  animation: annotationPanelIn 250ms ease;
}
.annotation-panel.active {
  display: block;
}
@keyframes annotationPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.annotation-panel h4 {
  margin: 0 0 var(--space-2);
  color: var(--accent-primary);
  font-size: 0.95rem;
}
.annotation-panel p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   B1-8. Storage Visualizer (.storage-viz)
   ---------------------------------------------------------- */
.storage-viz {
  margin: var(--space-6) 0;
}
.storage-row {
  display: flex;
  height: 3rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.storage-block {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 var(--space-2);
  transition: flex-basis 0.4s ease;
}
.storage-block:last-child { border-right: none; }
.storage-block--header { background: rgba(139, 92, 246, 0.3); color: var(--accent-purple); }
.storage-block--data   { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); }
.storage-block--free   { background: rgba(100, 116, 139, 0.15); color: var(--text-muted); }
.storage-block--dead   { background: rgba(239, 68, 68, 0.2); color: var(--accent-red); }
.storage-block--index  { background: rgba(20, 184, 166, 0.2); color: var(--accent-primary); }
.storage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.storage-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.storage-legend-item::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.storage-legend-item--header::before { background: rgba(139, 92, 246, 0.5); }
.storage-legend-item--data::before   { background: rgba(59, 130, 246, 0.4); }
.storage-legend-item--free::before   { background: rgba(100, 116, 139, 0.3); }
.storage-legend-item--dead::before   { background: rgba(239, 68, 68, 0.4); }
.storage-legend-item--index::before  { background: rgba(20, 184, 166, 0.4); }
/* Multiple rows */
.storage-row + .storage-row {
  margin-top: var(--space-2);
}
/* Row label */
.storage-row-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
}

/* ----------------------------------------------------------
   B1-9. Latency Ruler (.latency-ruler)
   ---------------------------------------------------------- */
.latency-ruler {
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ruler-item {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  align-items: center;
  gap: var(--space-3);
}
.ruler-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}
.ruler-bar {
  height: 1.5rem;
  border-radius: var(--radius-full);
  width: var(--ruler-width, 50%);
  min-width: 4px;
  position: relative;
  transition: width 0.6s ease;
}
/* Gradient: green (fast) → yellow → red (slow) via data-speed or fallback */
.ruler-item:nth-child(1) .ruler-bar { background: linear-gradient(90deg, #10b981, #10b981); }
.ruler-item:nth-child(2) .ruler-bar { background: linear-gradient(90deg, #10b981, #34d399); }
.ruler-item:nth-child(3) .ruler-bar { background: linear-gradient(90deg, #34d399, #fbbf24); }
.ruler-item:nth-child(4) .ruler-bar { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ruler-item:nth-child(5) .ruler-bar { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.ruler-item:nth-child(6) .ruler-bar { background: linear-gradient(90deg, #ef4444, #dc2626); }
.ruler-item:nth-child(n+7) .ruler-bar { background: linear-gradient(90deg, #dc2626, #991b1b); }
/* CSS-variable driven bar with fallback color */
.ruler-bar-inner {
  height: 100%;
  border-radius: var(--radius-full);
  width: var(--ruler-width, 50%);
  min-width: 4px;
  background: var(--ruler-color, linear-gradient(90deg, var(--accent-green), var(--accent-yellow)));
  box-shadow: 0 0 6px rgba(var(--accent-primary-rgb), 0.2);
  transition: width 0.6s ease;
}
.ruler-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: left;
}
.ruler-multiplier {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.1rem 0;
  opacity: 0.5;
  font-family: var(--font-mono);
}
.ruler-item::after {
  content: none;
}
@media (hover:hover) {
  .ruler-item:hover { background: rgba(var(--accent-primary-rgb), 0.03); border-radius: 6px; }
  .ruler-item:hover .ruler-bar-inner { filter: brightness(1.2); }
}
@media (max-width: 600px) {
  .ruler-item { grid-template-columns: 80px 1fr 60px; }
  .ruler-label { font-size: 0.75rem; }
  .ruler-value { font-size: 0.72rem; }
}

/* ----------------------------------------------------------
   B1-10. Data Flow Stepper (.flow-stepper)
   ---------------------------------------------------------- */
.flow-stepper {
  margin: var(--space-6) 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
}
/* Horizontal timeline built by JS */
.flow-timeline {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow-x: auto;
}
.flow-timeline-node {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-muted);
}
.flow-timeline-node.completed {
  background: rgba(var(--accent-primary-rgb), 0.15);
  border-color: rgba(var(--accent-primary-rgb), 0.4);
  color: var(--accent-primary);
}
.flow-timeline-node.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.4);
  transform: scale(1.15);
}
.flow-timeline-line {
  flex: 1;
  height: 2px;
  min-width: 20px;
  background: rgba(255,255,255,0.06);
  transition: background 0.3s;
}
.flow-timeline-line.completed {
  background: rgba(var(--accent-primary-rgb), 0.4);
}
.flow-step {
  display: none;
  padding: 1.5rem;
  animation: flowStepIn 350ms ease;
}
.flow-step.active {
  display: block;
}
@keyframes flowStepIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.flow-step-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.flow-step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 800;
  font-size: 0.85rem;
}
.flow-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.flow-step-body {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}
.flow-step-body p { margin: 0 0 var(--space-3); }
.flow-step-body p:last-child { margin-bottom: 0; }
.flow-step-body pre {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--bg-code);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.82rem;
}
.flow-step-body svg { max-width: 100%; height: auto; margin: var(--space-3) 0; }
/* Controls */
.flow-stepper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
}
.flow-prev,
.flow-next {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.flow-prev:hover,
.flow-next:hover {
  background: var(--bg-primary);
  border-color: var(--accent-primary);
}
.flow-prev:active,
.flow-next:active { transform: scale(0.97); }
.flow-prev:disabled,
.flow-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.flow-progress {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
/* Progress dots variant */
.flow-dots {
  display: flex;
  gap: var(--space-2);
}
.flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.flow-dot.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.flow-dot.visited {
  background: rgba(var(--accent-primary-rgb), 0.3);
  border-color: rgba(var(--accent-primary-rgb), 0.5);
}
@media (max-width: 600px) {
  .flow-step { padding: var(--space-4); }
  .flow-stepper-controls { padding: var(--space-2) var(--space-3); }
  .flow-prev, .flow-next { padding: var(--space-1) var(--space-3); font-size: 0.78rem; }
}

/* =============================================================
   BATCH 3 — Learning Interaction Components (19–26)
   ============================================================= */

/* ----------------------------------------------------------
   19. Inline Knowledge Check (.knowledge-check)
   ---------------------------------------------------------- */
.knowledge-check {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  margin: var(--space-6) 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}
.kc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.12), rgba(var(--accent-primary-rgb),0.04));
  border-bottom: 1px solid var(--border-color);
}
.kc-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.kc-header-left i { color: var(--accent-primary); font-size: 0.85rem; }
.kc-header-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}
.kc-body { padding: 1.2rem 1.4rem; }
.kc-question {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.55;
}
.kc-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kc-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}
.kc-option:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.5);
  background: rgba(var(--accent-primary-rgb), 0.04);
  transform: translateX(3px);
}
.kc-option input[type="radio"] { display: none; }
.kc-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-top: 1px;
}
.kc-option:hover .kc-badge {
  background: rgba(var(--accent-primary-rgb), 0.2);
}
/* States after selection */
.kc-option--incorrect {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.06);
}
.kc-option--incorrect .kc-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.kc-option--incorrect .kc-badge::after { content: '✗'; font-size: 0.85rem; }
.kc-option--incorrect .kc-badge-letter { display: none; }
.kc-option--correct {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.06);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
}
.kc-option--correct .kc-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.kc-option--correct .kc-badge::after { content: '✓'; font-size: 0.85rem; }
.kc-option--correct .kc-badge-letter { display: none; }
.kc-answered .kc-option { cursor: default; pointer-events: none; }
.kc-answered .kc-option:not(.kc-option--correct):not(.kc-option--incorrect) { opacity: 0.4; }
.kc-explanation {
  display: none;
  background: rgba(var(--accent-primary-rgb), 0.04);
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.4rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.65;
}
.kc-explanation-inner {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.kc-explanation-inner i {
  color: #fbbf24;
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.kc-explanation.kc-visible {
  display: block;
  animation: fadeSlideDown 0.3s ease;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   20. Code Walkthrough (.code-walkthrough)
   ---------------------------------------------------------- */
/* ── Code Walkthrough — Premium annotated code viewer ── */
.code-walkthrough {
  background: #0d1117;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin: 1.25rem 0;
  overflow: hidden;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.84rem;
  line-height: 1.7;
}
.cw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255,255,255,0.015);
}
.cw-filename {
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cw-filename i { font-size: 0.68rem; opacity: 0.5; }
.cw-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: rgb(var(--accent-primary-rgb));
  border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
}
.cw-body { padding: 0.5rem 0; }
.cw-line {
  display: flex;
  align-items: baseline;
  padding: 1px 1rem 1px 0.75rem;
  position: relative;
  transition: background 0.15s ease;
}
.cw-line:hover {
  background: rgba(255,255,255,0.02);
}
/* Only lines with annotations get highlighted */
.cw-line[data-cw-tip] {
  background: rgba(var(--accent-primary-rgb), 0.06);
  border-left: 3px solid rgba(var(--accent-primary-rgb), 0.4);
  padding-left: calc(0.75rem - 3px);
  cursor: pointer;
}
.cw-line[data-cw-tip]:hover {
  background: rgba(var(--accent-primary-rgb), 0.1);
}
.cw-line[data-cw-warn] {
  background: rgba(251,191,36,0.05);
  border-left-color: rgba(251,191,36,0.5);
}
.cw-line[data-cw-warn]:hover {
  background: rgba(251,191,36,0.08);
}
.cw-num {
  color: var(--text-muted);
  min-width: 2.2rem;
  text-align: right;
  padding-right: 0.9rem;
  user-select: none;
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.5;
}
.cw-line code {
  color: var(--text-primary);
  background: none !important;
  padding: 0 !important;
  border: none !important;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

/* ── Hover tooltip on annotated lines ── */
.cw-line[data-cw-tip]::after {
  content: attr(data-cw-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 3rem;
  max-width: calc(100% - 4rem);
  background: linear-gradient(135deg, #1a2236 0%, #151d2e 100%);
  color: #c9d1d9;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgb(var(--accent-primary-rgb));
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.cw-line[data-cw-warn]::after {
  border-left-color: #fbbf24;
}
.cw-line[data-cw-tip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   21. Interview Scorecard (.scorecard)
   ---------------------------------------------------------- */
/* ── Scorecard — Dashboard/Analytics style with radial gauges ── */
.scorecard {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  margin: 1.25rem 0;
}
.scorecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255,255,255,0.015);
}
.scorecard-title {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.scorecard-title i { font-size: 0.72rem; opacity: 0.5; }
.scorecard-verdict {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
}
.scorecard-verdict--hire { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.scorecard-verdict--no   { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.scorecard-verdict--maybe { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }

/* Radial gauge row */
.scorecard-gauges {
  display: flex;
  justify-content: space-around;
  padding: 1.2rem 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
}
.scorecard-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}
.scorecard-gauge svg {
  width: 64px;
  height: 64px;
}
.sg-ring {
  transition: stroke-dasharray 0.8s ease;
}
.sg-value {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sg-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  opacity: 0.6;
  text-align: center;
  max-width: 6rem;
}

/* Detail rows below gauges */
.scorecard-details {
  padding: 0.3rem 0;
}
.scorecard-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  transition: background 0.15s ease;
}
.scorecard-row:last-child { border-bottom: none; }
.scorecard-row:hover { background: rgba(255,255,255,0.015); }
.scorecard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.scorecard-criteria {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-primary);
  min-width: 6.5rem;
}
.scorecard-note {
  flex: 1;
  font-size: 0.74rem;
  color: var(--text-secondary);
  opacity: 0.55;
  line-height: 1.4;
}
.scorecard-rating {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.scorecard-rating--strong { background: rgba(16,185,129,0.1); color: #34d399; }
.scorecard-rating--mixed  { background: rgba(245,158,11,0.1); color: #fbbf24; }
.scorecard-rating--weak   { background: rgba(239,68,68,0.1); color: #f87171; }
.scorecard-rating--na     { background: rgba(100,116,139,0.1); color: var(--text-muted); }
@media (max-width: 600px) {
  .scorecard-gauges { flex-wrap: wrap; gap: 0.5rem; }
  .scorecard-gauge svg { width: 48px; height: 48px; }
  .sg-value { font-size: 0.7rem; top: 12px; }
  .scorecard-note { display: none; }
}

/* ----------------------------------------------------------
   22. Estimation Calculator (.estimation-calc)
   ---------------------------------------------------------- */
/* ── Estimation Calc — Dashboard metric cards ── */
.estimation-calc {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin: 1.25rem 0;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.calc-header span { display: flex; align-items: center; gap: 0.45rem; }
.calc-header i { font-size: 0.72rem; opacity: 0.5; }
.calc-tag {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: rgba(var(--accent-primary-rgb),0.1);
  color: rgb(var(--accent-primary-rgb));
}

/* Metric cards — flex wrap for graceful multi-row */
.calc-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.calc-metrics + .calc-metrics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.3;
}
.calc-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.6rem 1rem;
  min-width: 7rem;
  text-align: center;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.calc-metric:not(.calc-metric--eq):hover {
  background: rgba(255,255,255,0.03);
}
.calc-metric-value {
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
}
.calc-metric-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0.25rem;
}
.calc-metric-note {
  font-size: 0.6rem;
  color: #f0c674;
  opacity: 0.7;
}
.calc-metric--eq {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-primary-rgb), 0.03));
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  position: relative;
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.06);
}
.calc-metric--eq .calc-metric-value {
  color: var(--text-primary);
  font-size: 1.6rem;
  text-shadow: 0 0 30px rgba(var(--accent-primary-rgb), 0.3);
}
.calc-metric-op {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-secondary);
  opacity: 0.7;
  flex-shrink: 0;
  padding: 0;
  margin: 0 -0.3rem;
  align-self: center;
  line-height: 1;
}

/* Result strip — premium metric cards */
.calc-result-strip {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--border-color);
  border-top: 1px solid var(--border-color);
}
.calc-result-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 1.1rem 0.6rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.03), var(--bg-secondary));
  transition: background 0.2s ease;
  position: relative;
}
.calc-result-item:first-child {
  border-bottom-left-radius: 13px;
}
.calc-result-item:last-child {
  border-bottom-right-radius: 13px;
}
.calc-result-item:hover {
  background: rgba(var(--accent-primary-rgb), 0.06);
}
.calc-result-item:hover .calc-result-value {
  color: var(--accent-primary);
  text-shadow: 0 0 25px rgba(var(--accent-primary-rgb), 0.25);
}
.calc-result-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  opacity: 0.55;
  order: -1;
}
.calc-result-value {
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.calc-result-formula {
  font-size: 0.6rem;
  color: #f0c674;
  opacity: 0.7;
  font-family: 'SF Mono', 'Cascadia Code', monospace;
}
.calc-result-divider {
  display: none; /* replaced by gap + background trick */
}
@media (max-width: 600px) {
  .calc-metrics { flex-direction: column; gap: 0.5rem; }
  .calc-metric-op { transform: rotate(90deg); }
  .calc-result-strip { flex-direction: column; }
  .calc-result-divider { width: auto; height: 1px; margin: 0 1rem; }
}
.calc-row {
  display: grid;
  grid-template-columns: 2fr auto 2fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.calc-row:hover {
  background: rgba(var(--accent-primary-rgb), 0.03);
}
.calc-label {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}
.calc-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-align: center;
  white-space: nowrap;
}
.calc-why {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  font-style: italic;
}
.calc-row--operation {
  display: flex;
  justify-content: center;
  padding: var(--space-1) 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
}
.calc-row--operation:hover {
  background: none;
}
.calc-row--result {
  background: rgba(var(--accent-primary-rgb), 0.08);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}
.calc-row--result .calc-value {
  font-size: 1.35rem;
  color: var(--text-primary);
}
.calc-row--result .calc-label {
  font-weight: 700;
}
@media (max-width: 600px) {
  .calc-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    text-align: center;
  }
  .calc-value { font-size: 1.3rem; }
  .calc-why { text-align: center; }
}

/* ----------------------------------------------------------
   23. Proof / Derivation Block (.proof-block)
   ---------------------------------------------------------- */
.proof-block {
  background: var(--bg-secondary);
  border-left: 4px solid var(--accent-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.proof-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}
.proof-step {
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
  font-family: var(--font-mono);
}
.proof-given {
  color: var(--accent-green);
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.proof-therefore {
  color: var(--accent-blue);
  font-weight: 700;
  margin-right: var(--space-2);
  font-size: 1rem;
}
.proof-conclusion {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(var(--accent-primary-rgb), 0.08);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ----------------------------------------------------------
   24. Debug Template (.debug-template)
   ---------------------------------------------------------- */
.debug-template {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin: 1.25rem 0;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.debug-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.debug-header i { opacity: 0.5; font-size: 0.72rem; }
.debug-steps {
  padding: 0.8rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Vertical connector line through all steps */
.debug-steps::before {
  content: '';
  position: absolute;
  left: calc(1.2rem + 15px);
  top: 1.6rem;
  bottom: 1.6rem;
  width: 2px;
  background: linear-gradient(180deg, #3b82f6, #f59e0b, #10b981, #8b5cf6);
  opacity: 0.25;
  border-radius: 2px;
}
.debug-step {
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem 0;
  position: relative;
  z-index: 1;
}
/* Numbered badge with step color */
.debug-step-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
  position: relative;
}
.debug-step-badge i { font-size: 0.75rem; }
.debug-step--observe .debug-step-badge { background: #3b82f6; box-shadow: 0 0 12px rgba(59,130,246,0.25); }
.debug-step--hypothesize .debug-step-badge { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,0.25); }
.debug-step--verify .debug-step-badge { background: #10b981; box-shadow: 0 0 12px rgba(16,185,129,0.25); }
.debug-step--fix .debug-step-badge { background: #8b5cf6; box-shadow: 0 0 12px rgba(139,92,246,0.25); }
.debug-step-content {
  flex: 1;
  min-width: 0;
}
.debug-step-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.debug-step--observe .debug-step-label { color: #60a5fa; }
.debug-step--hypothesize .debug-step-label { color: #fbbf24; }
.debug-step--verify .debug-step-label { color: #34d399; }
.debug-step--fix .debug-step-label { color: #a78bfa; }
.debug-step-example {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid transparent;
  transition: background 0.15s ease;
}
.debug-step:hover .debug-step-example { background: rgba(0,0,0,0.35); }
.debug-step--observe .debug-step-example { border-left-color: rgba(59,130,246,0.5); }
.debug-step--hypothesize .debug-step-example { border-left-color: rgba(245,158,11,0.5); }
.debug-step--verify .debug-step-example { border-left-color: rgba(16,185,129,0.5); }
.debug-step--fix .debug-step-example { border-left-color: rgba(139,92,246,0.5); }
/* Last step gets a subtle "resolved" glow */
.debug-step:last-child .debug-step-example {
  box-shadow: 0 0 15px rgba(16,185,129,0.06);
}

/* ----------------------------------------------------------
   25. Myth Buster (.myth-buster)
   ---------------------------------------------------------- */
.myth-buster {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-6) 0;
}
.myth-claim {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-red);
  background: rgba(239, 68, 68, 0.05);
}
.myth-claim p {
  color: var(--text-secondary);
  font-size: 1rem;
  font-style: italic;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.5);
  line-height: 1.55;
  margin: 0;
}
.myth-label {
  display: inline-block;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.myth-reality {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-green);
  background: rgba(16, 185, 129, 0.05);
}
.myth-reality p {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}
.reality-label {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.myth-evidence {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-blue);
  background: rgba(59, 130, 246, 0.05);
}
.myth-evidence p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}
.evidence-label {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

/* ----------------------------------------------------------
   26. "What If" Scenario Card (.whatif-card)
   ---------------------------------------------------------- */
.whatif-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-6) 0;
}
.whatif-trigger {
  padding: var(--space-4) var(--space-5);
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid var(--accent-yellow);
  font-weight: 700;
  font-size: 1rem;
  color: #fbbf24;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: background 0.2s ease;
  user-select: none;
}
.whatif-trigger::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
  margin-left: auto;
  transition: transform 0.3s ease;
  color: var(--text-muted);
}
.whatif-card.open .whatif-trigger::after {
  transform: rotate(180deg);
}
.whatif-trigger:hover {
  background: rgba(245, 158, 11, 0.12);
}
.whatif-consequence {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-red);
  background: rgba(239, 68, 68, 0.05);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
  display: none;
}
.whatif-recovery {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-green);
  background: rgba(16, 185, 129, 0.05);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
  display: none;
}
.whatif-recovery strong {
  color: #34d399;
}
.whatif-card.open .whatif-consequence,
.whatif-card.open .whatif-recovery {
  display: block;
  animation: fadeSlideDown 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   BATCH 2 — Real-world Simulation Components
   ═══════════════════════════════════════════════════════════════ */

/* ── 11. Network Packet Viewer ── */
.packet-viewer {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}
.packet-header {
  background: linear-gradient(135deg, #161b22, #1c2333);
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #58a6ff;
  border-bottom: 1px solid #21262d;
  letter-spacing: 0.03em;
}
.packet-fields {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  gap: 0;
}
.packet-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #21262d;
  box-sizing: border-box;
  transition: background 0.2s;
}
.packet-field:hover {
  background: rgba(88, 166, 255, 0.04);
}
.packet-field-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b949e;
}
.packet-field-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6edf3;
}
.packet-field-note {
  font-size: 0.75rem;
  color: #8b949e;
  font-style: italic;
  margin-top: 0.15rem;
}
.packet-field--highlight {
  background: rgba(var(--accent-primary-rgb), 0.08);
  border-color: rgba(var(--accent-primary-rgb), 0.35);
  box-shadow: inset 0 0 12px rgba(var(--accent-primary-rgb), 0.06);
}
.packet-field--highlight .packet-field-value {
  color: var(--accent-primary);
}
@media (max-width: 600px) {
  .packet-field { width: 100% !important; }
}

/* ── 12. Database Schema Viewer ── */
.schema-viewer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.25rem 0;
}
.schema-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  min-width: 280px;
  flex: 1;
  transition: box-shadow 0.25s;
}
.schema-table:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.schema-table-header {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.12), rgba(var(--accent-primary-rgb),0.04));
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.schema-table-header i {
  font-size: 0.85rem;
  opacity: 0.8;
}
.schema-columns {
  display: flex;
  flex-direction: column;
}
.schema-col {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.schema-col:last-child { border-bottom: none; }
.schema-col:hover {
  background: rgba(var(--accent-primary-rgb), 0.04);
}
.schema-col-icon {
  font-size: 0.8rem;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}
.schema-col-name {
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.85rem;
  min-width: 80px;
}
.schema-col-type {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.78rem;
  color: #8b949e;
  background: rgba(255,255,255,0.04);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.schema-col-constraint {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b949e;
  margin-left: auto;
  white-space: nowrap;
}
.schema-col--pk {
  background: rgba(227, 179, 65, 0.06);
}
.schema-col--pk .schema-col-name { color: #e3b341; }
.schema-col--pk .schema-col-constraint { color: #e3b341; font-weight: 600; }
.schema-col--fk {
  background: rgba(88, 166, 255, 0.05);
}
.schema-col--fk .schema-col-name { color: #58a6ff; }
.schema-col--fk .schema-col-constraint { color: #58a6ff; font-weight: 600; }

/* ── 13. API Request/Response Viewer ── */
.api-viewer {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.88rem;
}
.api-request {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-color);
}
.api-method {
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.api-method--get { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.api-method--post { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.api-method--put { background: rgba(210, 153, 34, 0.15); color: #d29922; }
.api-method--patch { background: rgba(210, 153, 34, 0.15); color: #d29922; }
.api-method--delete { background: rgba(248, 81, 73, 0.15); color: #f85149; }
.api-url {
  color: var(--text-primary);
  font-size: 0.9rem;
  word-break: break-all;
}
.api-headers {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0,0,0,0.1);
}
.api-header {
  padding: 0.2rem 0;
  color: #8b949e;
  font-size: 0.8rem;
}
.api-header span {
  color: var(--text-secondary);
  font-weight: 600;
}
.api-body {
  border-bottom: 1px solid var(--border-color);
}
.api-body:last-child { border-bottom: none; }
.api-body pre {
  margin: 0;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 0;
}
.api-body code {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.api-response {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-color);
}
.api-status {
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.8rem;
}
.api-status--200, .api-status--201, .api-status--204 {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}
.api-status--301, .api-status--302, .api-status--304 {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
}
.api-status--400, .api-status--401, .api-status--403, .api-status--404, .api-status--409, .api-status--422, .api-status--429 {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
}
.api-status--500, .api-status--502, .api-status--503 {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}
.api-response-time {
  font-size: 0.78rem;
  color: #8b949e;
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}

/* ── JSON Syntax Highlighting (API Viewer) ── */
.json-key    { color: #79c0ff; }
.json-string { color: #a5d6ff; }
.json-number { color: #f0883e; }
.json-bool   { color: #ff7b72; }
.json-null   { color: #8b949e; font-style: italic; }
.json-comment { color: #6e7681; font-style: italic; }

/* ── Collapsible API Body ── */
.api-body--collapsible pre {
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  overflow: hidden;
}
.api-body--collapsed pre {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.api-body--collapsible:not(.api-body--collapsed) pre {
  max-height: 600px;
  opacity: 1;
}
.api-body-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.02);
  border: none;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.api-body-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.api-body-toggle i:first-child {
  font-size: 0.7rem;
  opacity: 0.6;
}
.api-body-lines {
  margin-left: auto;
  font-size: 0.72rem;
  opacity: 0.5;
}
.api-body-chevron {
  font-size: 0.65rem;
  transition: transform 0.3s ease;
}
.api-body--collapsed .api-body-toggle {
  border-bottom: none;
}

/* ── 14. Log Viewer ── */
.log-viewer {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.82rem;
  max-height: 400px;
  overflow-y: auto;
}
.log-viewer::-webkit-scrollbar { width: 6px; }
.log-viewer::-webkit-scrollbar-track { background: #0d1117; }
.log-viewer::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid rgba(33, 38, 45, 0.6);
  transition: background 0.15s;
}
.log-entry:last-child { border-bottom: none; }
.log-entry:hover {
  background: rgba(255, 255, 255, 0.02);
}
.log-timestamp {
  color: #484f58;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.78rem;
}
.log-level {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 3.2rem;
  text-align: center;
}
.log-message {
  color: #c9d1d9;
  line-height: 1.5;
  word-break: break-word;
}
.log-entry--info .log-level {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}
.log-entry--warn .log-level {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
}
.log-entry--warn .log-message { color: #d29922; }
.log-entry--error .log-level {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}
.log-entry--error .log-message { color: #f85149; }
.log-entry--debug .log-level {
  background: rgba(139, 148, 158, 0.1);
  color: #8b949e;
}
.log-entry--debug .log-message { color: #8b949e; }
.log-entry--fatal .log-level {
  background: rgba(248, 81, 73, 0.25);
  color: #ff7b72;
  animation: logFatalPulse 1.5s ease-in-out infinite;
}
.log-entry--fatal .log-message { color: #ff7b72; font-weight: 600; }
@keyframes logFatalPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── 15. Error Message Block ── */
.error-block {
  background: linear-gradient(135deg, rgba(248,81,73,0.08), rgba(248,81,73,0.03));
  border: 1px solid rgba(248, 81, 73, 0.25);
  border-left: 4px solid #f85149;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}
.error-block-header {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f85149;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.error-block-header::before {
  content: '\2715';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  background: rgba(248,81,73,0.15);
  border-radius: 50%;
  font-size: 0.65rem;
}
.error-block-code {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ff7b72;
  margin-bottom: 0.35rem;
}
.error-block-message {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 0.35rem;
}
.error-block-detail {
  font-size: 0.8rem;
  color: #8b949e;
  line-height: 1.5;
  font-style: italic;
}
.error-block--postgres { border-left-color: #336791; }
.error-block--postgres .error-block-header { color: #6d9ec1; }
.error-block--postgres .error-block-header::before { background: rgba(51,103,145,0.2); color: #6d9ec1; }
.error-block--mysql { border-left-color: #00758f; }
.error-block--mysql .error-block-header { color: #00a5c8; }
.error-block--mysql .error-block-header::before { background: rgba(0,117,143,0.2); color: #00a5c8; }
.error-block--http { border-left-color: #d29922; }
.error-block--http .error-block-header { color: #d29922; }
.error-block--http .error-block-header::before { background: rgba(210,153,34,0.15); color: #d29922; content: '!'; }
.error-block--redis { border-left-color: #dc382d; }
.error-block--redis .error-block-header { color: #f0615a; }
.error-block--redis .error-block-header::before { background: rgba(220,56,45,0.15); color: #f0615a; }

/* ── 16. Query Plan Viewer ── */
.query-plan {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.85rem;
}
.plan-node {
  position: relative;
  padding-left: 1.5rem;
}
.plan-node--root {
  padding-left: 0;
}
.plan-node--child {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid #30363d;
}
.plan-node--child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 1rem;
  height: 0;
  border-top: 2px solid #30363d;
}
.plan-node-type {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.82rem;
  color: #c9d1d9;
  background: rgba(255,255,255,0.06);
  margin-bottom: 0.3rem;
}
.plan-node-type--seq-scan,
.plan-node-type--warning {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
}
.plan-node-type--index-scan,
.plan-node-type--good {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
}
.plan-node-type--hash-join,
.plan-node-type--join {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
}
.plan-node-type--sort {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
}
.plan-node-stats {
  font-size: 0.75rem;
  color: #484f58;
  padding: 0.15rem 0 0.35rem;
  line-height: 1.5;
}
.plan-node-note {
  font-size: 0.78rem;
  color: #d29922;
  padding: 0.35rem 0.6rem;
  background: rgba(210,153,34,0.08);
  border-radius: 5px;
  border-left: 3px solid rgba(210,153,34,0.4);
  margin-top: 0.3rem;
  display: inline-block;
}

/* ── 17. Monitoring Dashboard ── */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.dashboard-metric {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.dashboard-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.dashboard-metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b949e;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.dashboard-metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}
.dashboard-metric-trend {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.45rem;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
}
.dashboard-metric-trend--up {
  color: #3fb950;
  background: rgba(63,185,80,0.1);
}
.dashboard-metric-trend--down {
  color: #58a6ff;
  background: rgba(88,166,255,0.1);
}
.dashboard-metric--alert {
  border-color: rgba(248, 81, 73, 0.4);
  background: linear-gradient(135deg, rgba(248,81,73,0.06), var(--bg-secondary));
  animation: dashboardAlertPulse 2s ease-in-out infinite;
}
.dashboard-metric--alert .dashboard-metric-value { color: #f85149; }
.dashboard-metric--alert .dashboard-metric-trend--up {
  color: #f85149;
  background: rgba(248,81,73,0.12);
}
.dashboard-metric--alert .dashboard-metric-trend--down {
  color: #f85149;
  background: rgba(248,81,73,0.12);
}
@keyframes dashboardAlertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,81,73,0); }
  50% { box-shadow: 0 0 12px 2px rgba(248,81,73,0.15); }
}
.dashboard-metric--good .dashboard-metric-trend--up {
  color: #3fb950;
  background: rgba(63,185,80,0.1);
}
.dashboard-metric--good .dashboard-metric-trend--down {
  color: #3fb950;
  background: rgba(63,185,80,0.1);
}

/* ── 18. Interview Chat ── */
/* ── Interview Chat — Premium Messenger UI ── */
.interview-chat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.25rem 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  max-width: 720px;
  position: relative;
  overflow: hidden;
}

/* ── Chat header bar ── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255,255,255,0.015);
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chat-header-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 6px rgba(63,185,80,0.5);
  animation: chatPulse 2s ease-in-out infinite;
}
@keyframes chatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.chat-header-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}
.chat-header-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.chat-header-topic,
.chat-header-duration {
  font-size: 0.68rem;
  color: var(--text-secondary);
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.chat-header-topic i,
.chat-header-duration i { font-size: 0.6rem; }

/* ── Phase divider ── */
.chat-phase {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.1rem;
  margin: 0;
}
.chat-phase::before,
.chat-phase::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.chat-phase span {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  opacity: 0.4;
  white-space: nowrap;
}

/* ── Messages ── */
.chat-message {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.45rem 1.1rem;
}
.chat-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.chat-message--interviewer .chat-avatar {
  background: linear-gradient(135deg, #f87171 0%, #fb923c 100%);
  color: #fff;
}
.chat-message--candidate .chat-avatar {
  background: linear-gradient(135deg, rgb(var(--accent-primary-rgb)), rgba(var(--accent-primary-rgb),0.7));
  color: #fff;
}
.chat-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 85%;
  min-width: 0;
}
.chat-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.chat-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}
.chat-message--interviewer .chat-name { color: #f87171; }
.chat-message--candidate .chat-name { color: rgb(var(--accent-primary-rgb)); }
.chat-time {
  font-size: 0.6rem;
  opacity: 0.3;
  font-family: 'SF Mono', 'Cascadia Code', monospace;
}
.chat-bubble {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.chat-message--interviewer .chat-bubble {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-top-left-radius: 3px;
}
.chat-message--candidate {
  flex-direction: row-reverse;
  padding-left: 2.5rem;
}
.chat-message--candidate .chat-content { align-items: flex-end; }
.chat-message--candidate .chat-meta { flex-direction: row-reverse; }
.chat-message--candidate .chat-bubble {
  background: rgba(var(--accent-primary-rgb), 0.06);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  border-top-right-radius: 3px;
  text-align: left;
}

/* ── Score annotation ── */
.chat-score {
  font-size: 0.7rem;
  padding: 0.25rem 0.75rem;
  margin: 0.1rem 0 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: center;
  color: #3fb950;
  font-weight: 500;
  border-radius: 3px;
  background: rgba(63,185,80,0.04);
  border: 1px solid rgba(63,185,80,0.08);
}
.chat-score i {
  font-size: 0.55rem;
  width: 1rem; height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(63,185,80,0.12);
}
.chat-score--bad {
  color: #f85149 !important;
  background: rgba(248,81,73,0.04) !important;
  border-color: rgba(248,81,73,0.08) !important;
}
.chat-score--bad i {
  background: rgba(248,81,73,0.12) !important;
}

/* ── Typing indicator ── */
.chat-typing {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 1.1rem 0.8rem;
}
.chat-typing .chat-avatar {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f87171, #fb923c);
  color: #fff;
}
.chat-typing-text {
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.4;
  font-style: italic;
  animation: typingPulse 2s ease-in-out infinite;
}
@keyframes typingPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.6; }
}
@media (max-width: 600px) {
  .interview-chat { max-width: 100%; }
  .chat-bubble { max-width: 85%; font-size: 0.85rem; }
  .dashboard { grid-template-columns: repeat(2, 1fr); }
  .dashboard-metric-value { font-size: 1.35rem; }
}

/* ==========================================================
   BATCH 4: Visual Distinction + Code/DevOps Components
   Components 27-42
   ========================================================== */

/* ----------------------------------------------------------
   27. Company Profile Card (.company-card)
   ---------------------------------------------------------- */
.company-card {
  display: flex;
  gap: var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.company-card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.company-card-logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.company-card-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.company-card-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.company-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.company-card-stats span {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  white-space: nowrap;
}
.company-card-stack {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.company-card-lesson {
  font-size: 0.88rem;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  background: rgba(var(--accent-primary-rgb), 0.05);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-1);
}
@media (max-width: 600px) {
  .company-card { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------------
   28. Warning/Trap Callout (.callout-trap)
   ---------------------------------------------------------- */
.callout-trap {
  position: relative;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-4) 0;
}
.callout-trap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent-red),
    var(--accent-red) 4px,
    #1a0a0a 4px,
    #1a0a0a 8px
  );
}
.callout-trap-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-3) calc(6px + var(--space-4));
  font-weight: 700;
  font-size: 0.95rem;
  color: #f87171;
  border-bottom: 1px solid rgba(239, 68, 68, 0.15);
}
.callout-trap-header i {
  font-size: 1rem;
  color: #f87171;
}
.callout-trap-body {
  padding: var(--space-4) var(--space-4) var(--space-4) calc(6px + var(--space-4));
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   29. Dependency Graph (.dep-graph)
   ---------------------------------------------------------- */
.dep-graph {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin: 1.25rem 0;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.dep-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.dep-graph-header i { opacity: 0.5; font-size: 0.72rem; }
.dep-graph-body {
  position: relative;
  padding: 1.8rem 2.5rem 1.8rem 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--accent-primary-rgb),0.02) 0%, transparent 70%);
}
/* SVG canvas */
.dep-graph-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
}
.dep-graph-canvas path {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 1.2;
  transition: stroke 0.25s, stroke-width 0.25s, opacity 0.25s;
}
.dep-graph-canvas path.dg-highlight {
  stroke: var(--accent-primary);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(var(--accent-primary-rgb),0.35));
}
.dep-graph-canvas path.dg-dim { opacity: 0.02; }
/* Layer rows */
.dep-layer {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
/* Layer label on the left */
.dep-layer-tag {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.35;
  white-space: nowrap;
}
/* Nodes */
.dep-node {
  padding: 0.35rem 0.75rem;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s, background 0.2s;
  position: relative;
  backdrop-filter: blur(4px);
}
/* Reset button */
.dep-graph-reset {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 0.6rem;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 5;
}
.dep-graph-body:hover .dep-graph-reset { opacity: 0.7; }
.dep-graph-reset:hover { opacity: 1 !important; background: rgba(255,255,255,0.1); color: var(--text-primary); }
.dep-node:active { cursor: grabbing; transform: scale(1.05); }
.dep-node:hover {
  box-shadow: 0 0 20px rgba(0,0,0,0.4), 0 0 8px rgba(var(--accent-primary-rgb),0.1);
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  z-index: 2;
}
/* Dragging state */
.dep-node.dg-dragging {
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 15px rgba(var(--accent-primary-rgb),0.2);
  transform: scale(1.08);
  z-index: 10;
}
.dep-node i { margin-right: 0.2rem; font-size: 0.6rem; opacity: 0.6; }
.dep-node--done {
  border-color: rgba(16,185,129,0.25);
  color: #34d399;
}
.dep-node--done:hover { box-shadow: 0 0 15px rgba(16,185,129,0.15); }
.dep-node--current {
  border-color: rgba(var(--accent-primary-rgb),0.35);
  color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.1);
}
.dep-node--warn {
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
}
.dep-node--locked {
  border-color: rgba(100,116,139,0.1);
  color: var(--text-muted);
  opacity: 0.45;
}
/* Hover tooltip */
.dep-node-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: linear-gradient(135deg, #1a2236, #151d2e);
  color: #c9d1d9;
  font-size: 0.68rem;
  font-weight: 400;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10;
}
.dep-node:hover .dep-node-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Node count badge in header */
.dep-graph-count {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: rgba(var(--accent-primary-rgb),0.1);
  color: rgb(var(--accent-primary-rgb));
}
.dep-arrow { display: none; }
@media (max-width: 600px) {
  .dep-graph-body { padding: 1rem; gap: 0.8rem; }
  .dep-layer { flex-wrap: wrap; gap: 0.4rem; }
  .dep-node { font-size: 0.65rem; padding: 0.3rem 0.6rem; }
  .dep-layer-tag { display: none; }
}

/* ----------------------------------------------------------
   30. Git Diff Block (.git-diff)
   ---------------------------------------------------------- */
.git-diff {
  border-radius: var(--radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-color);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin: var(--space-4) 0;
}
.diff-header {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-color);
}
.diff-line {
  padding: 0.15rem var(--space-4);
  line-height: 1.65;
  white-space: pre;
  min-width: max-content;
}
.diff-line--remove {
  background: rgba(248, 81, 73, 0.12);
  color: #fca5a5;
}
.diff-line--add {
  background: rgba(63, 185, 80, 0.12);
  color: #86efac;
}
.diff-line--context {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   31. Multi-File Code Viewer (.multi-file)
   macOS-style editor with file tabs
   ---------------------------------------------------------- */
.multi-file {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* Titlebar with traffic lights */
.multi-file-titlebar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border-bottom: none;
  position: relative;
}
.multi-file-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.multi-file-titlebar .dot-red { background: #ff5f57; }
.multi-file-titlebar .dot-yellow { background: #febc2e; }
.multi-file-titlebar .dot-green { background: #28c840; }
/* File tabs */
.multi-file-tabs {
  display: flex;
  gap: 0;
  background: rgba(0,0,0,0.15);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.multi-file-tabs::-webkit-scrollbar { display: none; }
.multi-file-tab {
  padding: 0.4rem 1rem;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}
.multi-file-tab i { font-size: 0.6rem; opacity: 0.6; }
/* File type colors for tab icons */
.multi-file-tab i.fa-hashtag { color: #68217a; } /* C# purple */
.multi-file-tab i.fa-brands.fa-js { color: #f0db4f; } /* JS yellow */
.multi-file-tab i.fa-brands.fa-python { color: #3776ab; } /* Python blue */
.multi-file-tab i.fa-brands.fa-java { color: #ed8b00; } /* Java orange */
.multi-file-tab i.fa-brands.fa-html5 { color: #e34f26; } /* HTML orange */
.multi-file-tab i.fa-brands.fa-css3-alt { color: #1572b6; } /* CSS blue */
.multi-file-tab i.fa-solid.fa-database { color: #336791; } /* SQL blue */
.multi-file-tab i.fa-solid.fa-terminal { color: #4ec9b0; } /* Shell green */
.multi-file-tab i.fa-solid.fa-code { color: #8bc34a; } /* JSON/Go green */
.multi-file-tab:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
}
.multi-file-tab.active {
  color: var(--text-primary);
  background: var(--bg-code, #0d1117);
  border-bottom: 1px solid var(--bg-code, #0d1117);
  margin-bottom: -1px;
}
/* Active tab indicator line */
.multi-file-tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-primary);
}
/* Code panels */
.multi-file-panel {
  display: none;
  background: var(--bg-code, #0d1117);
  max-height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
}
.multi-file-panel::-webkit-scrollbar { width: 5px; }
.multi-file-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.multi-file-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.multi-file-panel::-webkit-scrollbar-track { background: transparent; }
.multi-file-panel.active {
  display: block;
}
.multi-file-panel pre {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
}
.multi-file-panel pre::-webkit-scrollbar { height: 5px; }
.multi-file-panel pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.multi-file-panel pre::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.multi-file-panel pre code {
  display: block;
  padding: 0 1rem;
  width: max-content;
  min-width: 100%;
}
/* Code body wrapper */
.multi-file-body {
  position: relative;
}
/* Copy button — inside titlebar, right side */
.multi-file .mf-copy-btn {
  position: absolute;
  top: 0.35rem;
  right: 0.6rem;
  z-index: 3;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 0.25rem 0.4rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.68rem;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s;
}
.multi-file:hover .mf-copy-btn { opacity: 0.6; }
.multi-file .mf-copy-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); color: var(--text-primary); }
.multi-file .mf-copy-btn.copied { color: #34d399; opacity: 1; }

/* ----------------------------------------------------------
   32. Config Diff (.config-diff) — unified inline diff
   ---------------------------------------------------------- */
.config-diff {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.config-diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.config-diff-header i { opacity: 0.5; font-size: 0.7rem; }
.config-diff-header .cd-file { font-family: 'SF Mono','Cascadia Code',monospace; font-size: 0.72rem; color: var(--text-muted); }
/* Each row = one param */
.config-diff-row {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr auto 1fr;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-family: 'SF Mono','Cascadia Code',monospace;
  font-size: 0.78rem;
  transition: background 0.15s;
}
.config-diff-row:last-child { border-bottom: none; }
.config-diff-row:hover { background: rgba(255,255,255,0.02); }
/* Param name */
.cd-param {
  padding: 0.45rem 0.8rem;
  color: var(--text-primary);
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,0.04);
}
/* Old value */
.cd-old {
  padding: 0.45rem 0.7rem;
  color: #f87171;
  background: rgba(248,81,73,0.04);
  text-decoration: line-through;
  opacity: 0.7;
}
/* Arrow */
.cd-arrow {
  padding: 0 0.4rem;
  color: var(--text-muted);
  opacity: 0.4;
  text-align: center;
  font-size: 0.7rem;
}
/* New value */
.cd-new {
  padding: 0.45rem 0.7rem;
  color: #4ade80;
  font-weight: 600;
}
/* Why annotation */
.cd-why {
  font-size: 0.65rem;
  color: #f0c674;
  opacity: 0.7;
  font-style: italic;
  font-weight: 400;
  margin-left: 0.5rem;
}
/* Unchanged row */
.config-diff-row--same .cd-old,
.config-diff-row--same .cd-new {
  color: var(--text-muted);
  opacity: 0.4;
  text-decoration: none;
  background: none;
}
.config-diff-row--same .cd-old { opacity: 0.3; }
@media (max-width: 600px) {
  .config-diff-row { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.4rem 0.8rem; }
  .cd-param { border-right: none; padding: 0; }
  .cd-old, .cd-new { padding: 0; }
  .cd-arrow { display: none; }
}
/* Legacy support: old side-by-side config-diff still works */
.config-diff-before,
.config-diff-after { display: flex; flex-direction: column; }
.config-diff-before { background: rgba(248,81,73,0.05); border-right: 1px solid var(--border-color); }
.config-diff-after { background: rgba(63,185,80,0.05); }
.config-diff-label {
  padding: 0.45rem 0.8rem; font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color);
}
.config-diff-before .config-diff-label { color: #f87171; background: rgba(248,81,73,0.1); }
.config-diff-after .config-diff-label { color: #4ade80; background: rgba(63,185,80,0.1); }
.config-diff pre {
  margin: 0; padding: 0.8rem; font-family: 'SF Mono','Cascadia Code',monospace;
  font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary); overflow-x: auto; flex: 1;
}

/* ----------------------------------------------------------
   33. CI/CD Pipeline (.pipeline)
   ---------------------------------------------------------- */
.pipeline {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.pipeline-header i { opacity: 0.5; font-size: 0.7rem; }
.pipeline-header .pl-status {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
}
.pipeline-header .pl-status--running { background: rgba(59,130,246,0.15); color: #60a5fa; }
.pipeline-header .pl-status--pass { background: rgba(16,185,129,0.15); color: #34d399; }
.pipeline-header .pl-status--fail { background: rgba(239,68,68,0.15); color: #f87171; }
.pipeline-body {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.2rem 1.5rem;
  overflow-x: auto;
}
.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: normal;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s;
  min-width: 6.5rem;
  max-width: 9rem;
  text-align: center;
  flex-shrink: 0;
}
.pipeline-stage i { font-size: 0.7rem; }
.pipeline-stage-time {
  font-size: 0.62rem;
  color: var(--text-secondary);
  opacity: 0.7;
  font-weight: 400;
  font-family: 'SF Mono','Cascadia Code',monospace;
}
.pipeline-stage--pass {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.pipeline-stage--running {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}
.pipeline-stage--fail {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.pipeline-stage--pending {
  background: rgba(100, 116, 139, 0.1);
  border-color: rgba(100, 116, 139, 0.2);
  color: var(--text-muted);
  opacity: 0.65;
}
.pipeline-connector {
  width: 32px;
  height: 2px;
  background: var(--border-color);
  flex-shrink: 0;
  position: relative;
}
.pipeline-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left: 6px solid var(--border-color);
}
@media (max-width: 600px) {
  .pipeline { flex-direction: column; }
  .pipeline-connector { width: 2px; height: 24px; }
  .pipeline-connector::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%);
    border: 4px solid transparent;
    border-top: 6px solid var(--border-color);
  }
}

/* ----------------------------------------------------------
   34. Cache Simulator (.cache-sim)
   ---------------------------------------------------------- */
.cache-sim {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin: var(--space-4) 0;
}
.cache-sim-entry {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
}
.cache-sim-entry:last-child {
  border-bottom: none;
}
.cache-sim-entry--hit {
  background: rgba(16, 185, 129, 0.06);
}
.cache-sim-entry--miss {
  background: rgba(239, 68, 68, 0.06);
}
.cache-key {
  color: var(--text-primary);
  font-weight: 600;
  min-width: 100px;
}
.cache-result {
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cache-sim-entry--hit .cache-result {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
}
.cache-sim-entry--miss .cache-result {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
}
.cache-time {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ----------------------------------------------------------
   35. Rate Limiter Visualizer (.rate-viz)
   ---------------------------------------------------------- */
.rate-viz {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.rate-viz-bucket {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.rate-viz-token {
  width: 14px;
  border-radius: 2px;
  background: var(--accent-primary);
  transition: height 0.3s, opacity 0.3s;
}
.rate-viz-token--empty {
  background: rgba(100, 116, 139, 0.15);
  border: 1px dashed rgba(100, 116, 139, 0.3);
}
.rate-viz-requests {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.rate-viz-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background 0.2s, box-shadow 0.2s;
}
.rate-viz-dot--accepted {
  background: var(--accent-green);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.rate-viz-dot--rejected {
  background: var(--accent-red);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
.rate-viz-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ----------------------------------------------------------
   36. Circuit Breaker State (.circuit-state)
   ---------------------------------------------------------- */
.circuit-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}
.circuit-node {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  transition: all 0.3s;
}
.circuit-node--closed {
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
}
.circuit-node--open {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
}
.circuit-node--half {
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.08);
}
.circuit-node--active {
  box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.35);
  transform: scale(1.05);
}
.circuit-node--closed.circuit-node--active {
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}
.circuit-node--open.circuit-node--active {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
}
.circuit-node--half.circuit-node--active {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}
.circuit-arrow {
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 0 var(--space-1);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .circuit-state { flex-direction: column; }
}

/* ----------------------------------------------------------
   37. Message Queue Viz (.mq-viz)
   ---------------------------------------------------------- */
.mq-viz {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  overflow-x: auto;
}
.mq-viz-producer,
.mq-viz-consumer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}
.mq-viz-producer {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.mq-viz-consumer {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.mq-viz-queue {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-height: 40px;
  flex: 1;
  min-width: 120px;
}
.mq-viz-msg {
  width: 28px;
  height: 24px;
  border-radius: 3px;
  background: rgba(var(--accent-primary-rgb), 0.2);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-primary);
  flex-shrink: 0;
}
.mq-viz-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.mq-viz-depth {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-1);
}
@media (max-width: 600px) {
  .mq-viz { flex-direction: column; }
}

/* ----------------------------------------------------------
   38. Shard Map (.shard-map)
   ---------------------------------------------------------- */
.shard-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.shard {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.shard--hot {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.06);
  animation: shard-pulse 2s ease-in-out infinite;
}
@keyframes shard-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.2); }
}
.shard--cold {
  opacity: 0.55;
  border-color: rgba(100, 116, 139, 0.2);
}
.shard-id {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.shard-load {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
}
.shard--hot .shard-load { color: #f87171; }
.shard:not(.shard--hot):not(.shard--cold) .shard-load { color: #34d399; }
.shard--cold .shard-load { color: var(--text-muted); }
.shard-size {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   39. Cost Calculator (.cost-calc)
   ---------------------------------------------------------- */
.cost-calc {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: var(--space-4) 0;
}
.cost-calc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cost-calc th {
  background: var(--bg-tertiary);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cost-calc td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}
.cost-calc tr:last-child td {
  border-bottom: none;
}
.cost-calc tbody tr {
  background: var(--bg-secondary);
  transition: background 0.15s;
}
.cost-calc tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.cost-calc-subtotal {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary) !important;
}
.cost-calc-total {
  background: rgba(var(--accent-primary-rgb), 0.08) !important;
  border-top: 2px solid rgba(var(--accent-primary-rgb), 0.25);
}
.cost-calc-total td {
  font-weight: 700;
  color: var(--accent-primary) !important;
  font-size: 1rem;
  padding: var(--space-4);
}

/* ----------------------------------------------------------
   40. Glossary Panel (.glossary-panel) — compact grid
   ---------------------------------------------------------- */
.glossary-panel {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.glossary-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  border-bottom: 1px solid var(--border-color);
}
.glossary-panel-header span { font-weight: 600; font-size: 0.8rem; color: var(--text-primary); }
.glossary-panel-header i { opacity: 0.5; font-size: 0.7rem; }
.glossary-panel-count {
  font-size: 0.6rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 3px;
  background: rgba(var(--accent-primary-rgb),0.1); color: rgb(var(--accent-primary-rgb));
}
/* Search box */
.glossary-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0,0,0,0.1);
}
.glossary-search i { color: var(--text-muted); opacity: 0.4; font-size: 0.65rem; }
.glossary-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.74rem;
  font-family: inherit;
}
.glossary-search input::placeholder { color: var(--text-muted); opacity: 0.4; }
/* Body — no sidebar, just a compact grid */
.glossary-body {
  display: block;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-primary-rgb),0.12) transparent;
}
.glossary-body::-webkit-scrollbar { width: 5px; }
.glossary-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.12); border-radius: 3px; }
/* Alpha sidebar — hidden (removed) */
.glossary-alpha { display: none; }
/* Terms grid — 2 columns */
.glossary-panel-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.glossary-letter {
  grid-column: 1 / -1;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--accent-primary);
  padding: 0.3rem 0.4rem 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.1);
  margin-top: 0.3rem;
}
.glossary-letter:first-child { margin-top: 0; }
.glossary-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: default;
  transition: background 0.15s;
}
.glossary-item:hover { background: rgba(var(--accent-primary-rgb),0.06); }
.glossary-item.gl-hidden { display: none; }
.glossary-term {
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--text-primary);
  font-family: 'SF Mono','Cascadia Code',monospace;
}
.glossary-def {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.35;
}
/* Auto-linked glossary terms in page text */
.gl-auto-link {
  border-bottom: 1px dotted rgba(var(--accent-primary-rgb), 0.35);
  cursor: help;
}
.gl-auto-link:hover {
  border-bottom-color: var(--accent-primary);
  color: var(--accent-primary);
}
/* Legacy compat */
.glossary-panel-title { display: none; }
@media (max-width: 600px) {
  .glossary-panel-list { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   41. Learning Progress Bar (.learning-progress)
   ---------------------------------------------------------- */
.learning-progress {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}
.learning-progress-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.learning-progress-pct {
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-mono);
}
.learning-progress-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(100, 116, 139, 0.15);
  gap: 2px;
}
.learning-progress-seg {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}
.learning-progress-seg--done {
  background: var(--accent-green);
}
.learning-progress-seg--current {
  background: var(--accent-primary);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
  animation: progress-glow 2s ease-in-out infinite;
}
@keyframes progress-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(var(--accent-primary-rgb), 0.3); }
  50% { box-shadow: 0 0 14px rgba(var(--accent-primary-rgb), 0.6); }
}
.learning-progress-seg--upcoming {
  background: rgba(100, 116, 139, 0.2);
}
.learning-progress-markers {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   42. Comparison Table Enhanced (.compare-table)
   ---------------------------------------------------------- */
.compare-table {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: var(--space-4) 0;
}
.compare-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.compare-table th {
  background: var(--bg-tertiary);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.88rem;
  border-bottom: 2px solid var(--border-color);
}
.compare-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  transition: background 0.15s;
}
.compare-table tr:last-child td {
  border-bottom: none;
}
.compare-table tbody tr {
  background: var(--bg-secondary);
}
.compare-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.compare-win {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #34d399 !important;
  font-weight: 600;
}
.compare-lose {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #f87171 !important;
}
.compare-neutral {
  color: var(--text-secondary);
}
.compare-draw {
  background: rgba(245, 158, 11, 0.08) !important;
  color: #fbbf24 !important;
}
@media (max-width: 600px) {
  .compare-table { overflow-x: auto; display: block; }
  .compare-table table { min-width: 480px; }
}

/* ============================================================
   BATCH 5: Components 43–70 (HLD / System Design Viz)
   ============================================================ */

/* ----------------------------------------------------------
   43. Consensus Round Viz (.consensus-viz)
   ---------------------------------------------------------- */
.consensus-viz { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.consensus-ring { position: relative; width: 260px; height: 260px; border-radius: 50%; border: 2px dashed var(--border-color); }
.consensus-node { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #fff; border: 3px solid transparent; transition: all 0.3s; }
.consensus-node.leader { background: #d97706; border-color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.45); }
.consensus-node.leader::after { content: "\265A"; position: absolute; top: -14px; font-size: 1rem; }
.consensus-node.follower { background: #2563eb; border-color: #60a5fa; }
.consensus-node.candidate { background: #ea580c; border-color: #fb923c; animation: pulse-candidate 1.2s infinite; }
.consensus-node.dead { background: #4b5563; border-color: #6b7280; opacity: .5; }
@keyframes pulse-candidate { 0%,100%{box-shadow:0 0 0 0 rgba(251,146,60,.4)} 50%{box-shadow:0 0 0 10px rgba(251,146,60,0)} }
.consensus-log { display: flex; gap: .35rem; }
.consensus-log-entry { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); }
.consensus-log-entry.committed { background: rgba(16,185,129,.2); border-color: #34d399; color: #34d399; }
.consensus-log-entry.pending { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #fbbf24; }
.consensus-stats { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-secondary); }
.consensus-stats span { font-weight: 600; color: var(--text-primary); }

/* ----------------------------------------------------------
   44. Replication Lag Viz (.repl-lag)
   ---------------------------------------------------------- */
.repl-lag { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); flex-wrap: wrap; }
.repl-lag-node { padding: .6rem 1.2rem; border-radius: var(--radius-md); font-weight: 700; font-size: 0.85rem; text-align: center; }
.repl-lag-node.primary { background: rgba(37,99,235,.15); border: 2px solid #60a5fa; color: #93c5fd; }
.repl-lag-node.replica { background: var(--bg-tertiary); border: 2px solid var(--border-color); color: var(--text-secondary); }
.repl-lag-arrow { flex: 1; min-width: 80px; height: 4px; background: var(--border-color); position: relative; border-radius: 2px; }
.repl-lag-arrow::after { content: "\25B6"; position: absolute; right: -8px; top: -8px; color: var(--border-color); font-size: 0.75rem; }
.repl-lag-delay { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 10px; }
.repl-lag-delay.lag-green { background: rgba(16,185,129,.15); color: #34d399; }
.repl-lag-delay.lag-yellow { background: rgba(245,158,11,.15); color: #fbbf24; }
.repl-lag-delay.lag-red { background: rgba(239,68,68,.15); color: #f87171; }
.repl-lag-stats { width: 100%; display: flex; gap: 1.5rem; margin-top: .5rem; font-size: 0.8rem; color: var(--text-secondary); }

/* ----------------------------------------------------------
   45. Connection Pool Viz (.conn-pool)
   ---------------------------------------------------------- */
.conn-pool { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.conn-pool-label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.conn-pool-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.conn-slot { width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--border-color); transition: all 0.3s; }
.conn-slot.active { background: rgba(37,99,235,.35); border-color: #60a5fa; }
.conn-slot.idle { background: var(--bg-tertiary); border-color: var(--border-color); }
.conn-slot.waiting { background: rgba(245,158,11,.2); border-color: #fbbf24; animation: conn-pulse 1s infinite; }
@keyframes conn-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.conn-pool-max { height: 3px; background: rgba(239,68,68,.3); border-radius: 2px; margin-bottom: 1rem; position: relative; }
.conn-pool-max::after { content: "max"; position: absolute; right: 0; top: -18px; font-size: 0.65rem; color: #f87171; font-weight: 600; text-transform: uppercase; }
.conn-pool-stats { display: flex; gap: 1rem; font-size: 0.8rem; flex-wrap: wrap; }
.conn-pool-stats dt { color: var(--text-secondary); }
.conn-pool-stats dd { font-weight: 700; color: var(--text-primary); margin: 0 0 0 .25rem; }

/* ----------------------------------------------------------
   46. Failure Cascade Viz (.cascade-viz) — Premium
   ---------------------------------------------------------- */
@keyframes cascade-dead-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(248,113,113,0.3); }
  50% { box-shadow: 0 0 20px rgba(248,113,113,0.6), 0 0 40px rgba(248,113,113,0.15); }
}
.cascade-viz { display: flex; align-items: center; gap: 0.5rem; padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.cascade-service { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .85rem 1.15rem; border-radius: var(--radius-md); border: 2px solid var(--border-color); min-width: 85px; text-align: center; font-size: 0.8rem; font-weight: 600; transition: all 0.4s; }
.cascade-service.healthy { border-color: #34d399; color: #34d399; background: rgba(16,185,129,.08); }
.cascade-service.struggling { border-color: #fbbf24; color: #fbbf24; background: rgba(245,158,11,.08); }
.cascade-service.dead { border-color: #f87171; color: #f87171; background: rgba(239,68,68,.12); animation: cascade-dead-pulse 2s ease-in-out infinite; }
.cascade-arrow { width: 48px; height: 3px; background: var(--border-color); position: relative; flex-shrink: 0; border-radius: 2px; }
.cascade-arrow::after { content: "\25B6"; position: absolute; right: -6px; top: -8px; font-size: 0.7rem; color: var(--text-muted); }
.cascade-arrow.failing { background: repeating-linear-gradient(90deg, #f87171 0px, #f87171 4px, transparent 4px, transparent 8px); }
.cascade-arrow.failing::after { color: #f87171; }
.cascade-service-icon { font-size: 1.4rem; }

/* ----------------------------------------------------------
   47. Lock Contention Viz (.lock-viz)
   ---------------------------------------------------------- */
.lock-viz { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.lock-viz table { width: 100%; border-collapse: collapse; }
.lock-viz th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border-color); }
.lock-viz td { padding: .4rem .75rem; border-bottom: 1px solid var(--border-color); }
.lock-cell { display: inline-flex; align-items: center; gap: .35rem; padding: 3px 10px; border-radius: 4px; font-size: 0.78rem; font-weight: 600; }
.lock-cell.held { background: rgba(37,99,235,.2); border: 1px solid #60a5fa; color: #93c5fd; }
.lock-cell.waiting { background: rgba(239,68,68,.12); border: 2px solid #f87171; color: #fca5a5; animation: lock-wait 1s infinite; }
@keyframes lock-wait { 0%,100%{border-color:#f87171} 50%{border-color:transparent} }
.lock-cell.free { color: var(--text-secondary); font-weight: 400; opacity: .5; }
.lock-txn-label { font-weight: 700; color: var(--text-primary); font-size: 0.82rem; }

/* ----------------------------------------------------------
   48. Bloom Filter Viz (.bloom-viz)
   ---------------------------------------------------------- */
.bloom-viz { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.bloom-viz-label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: .75rem; }
.bloom-bits { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 1rem; }
.bloom-bit { width: 26px; height: 26px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); transition: all 0.25s; }
.bloom-bit.set { background: rgba(16,185,129,.2); border-color: #34d399; color: #34d399; }
.bloom-bit.highlight { background: rgba(245,158,11,.2); border-color: #fbbf24; color: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.3); }
.bloom-bit.false-pos { background: rgba(239,68,68,.15); border-color: #f87171; color: #f87171; }
.bloom-result { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 20px; font-size: 0.82rem; font-weight: 600; }
.bloom-result.found { background: rgba(16,185,129,.12); color: #34d399; }
.bloom-result.not-found { background: var(--bg-tertiary); color: var(--text-secondary); }
.bloom-result.false-positive { background: rgba(245,158,11,.12); color: #fbbf24; }

/* ----------------------------------------------------------
   49. Consistent Hashing Ring (.hash-ring)
   ---------------------------------------------------------- */
.hash-ring { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.hash-ring-circle { position: relative; width: 240px; height: 240px; border-radius: 50%; border: 3px solid var(--border-color); }
.hash-ring-node { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; color: #fff; border: 2px solid; transform: translate(-50%, -50%); z-index: 2; }
.hash-ring-node.node-a { background: #2563eb; border-color: #60a5fa; }
.hash-ring-node.node-b { background: #7c3aed; border-color: #a78bfa; }
.hash-ring-node.node-c { background: #059669; border-color: #34d399; }
.hash-ring-node.node-add { background: rgba(245,158,11,.2); border: 2px dashed #fbbf24; color: #fbbf24; }
.hash-ring-key { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-tertiary); border: 2px solid var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 600; color: var(--text-secondary); transform: translate(-50%, -50%); z-index: 1; }
.hash-ring-key.moving { border-color: #fbbf24; color: #fbbf24; animation: key-move 1.5s ease-in-out; }
@keyframes key-move { 0%{opacity:1} 50%{opacity:.3} 100%{opacity:1} }
.hash-ring-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); }
.hash-ring-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ----------------------------------------------------------
   50. Vector Clock Viz (.vector-clock)
   ---------------------------------------------------------- */
.vector-clock { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.vc-timeline { display: flex; flex-direction: column; gap: 0; position: relative; min-width: 400px; }
.vc-process { display: flex; align-items: center; gap: 0; padding: .6rem 0; position: relative; }
.vc-process-label { width: 50px; font-weight: 700; font-size: 0.82rem; color: var(--text-primary); flex-shrink: 0; }
.vc-line { flex: 1; height: 3px; background: var(--border-color); position: relative; border-radius: 2px; }
.vc-event { position: absolute; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; top: -14px; transform: translateX(-50%); z-index: 2; }
.vc-event.proc-a { background: #2563eb; }
.vc-event.proc-b { background: #7c3aed; }
.vc-event.proc-c { background: #059669; }
.vc-stamp { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: var(--text-secondary); white-space: nowrap; font-family: var(--font-mono); }
.vc-arrow { position: absolute; z-index: 1; border-left: 2px dashed var(--text-secondary); opacity: .5; }
.vc-concurrent { outline: 2px dashed #fbbf24; outline-offset: 4px; border-radius: 50%; }

/* ----------------------------------------------------------
   51. Write Amplification Calc (.write-amp)
   ---------------------------------------------------------- */
.write-amp { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.write-amp-flow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.write-amp-input { padding: .6rem 1rem; background: rgba(37,99,235,.15); border: 2px solid #60a5fa; border-radius: var(--radius-md); font-weight: 700; font-size: 0.85rem; color: #93c5fd; white-space: nowrap; }
.write-amp-arrow { color: var(--text-secondary); font-size: 1.2rem; }
.write-amp-outputs { display: flex; flex-wrap: wrap; gap: .4rem; }
.write-amp-out { padding: .4rem .75rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.78rem; color: var(--text-secondary); }
.write-amp-total { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: rgba(239,68,68,.1); border: 1px solid #f87171; border-radius: var(--radius-md); font-weight: 700; font-size: 1rem; color: #fca5a5; }

/* ----------------------------------------------------------
   52. B+ Tree Navigator (.btree-nav)
   ---------------------------------------------------------- */
/* B+ Tree Navigator */
.btree-nav {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.btree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.btree-header i { opacity: 0.5; font-size: 0.7rem; }
.btree-search-info {
  font-size: 0.65rem;
  font-family: 'SF Mono','Cascadia Code',monospace;
  color: #fbbf24;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.15);
}
/* Narration bar */
.btree-narration {
  padding: 0.35rem 1.2rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid var(--border-color);
  font-family: 'SF Mono','Cascadia Code',monospace;
  min-height: 1.6em;
  transition: color 0.2s;
}
.btree-body {
  padding: 1.5rem 1.25rem 0.5rem;
  overflow-x: auto;
  position: relative;
}
/* SVG connector layer */
.btree-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.btree-svg line {
  stroke: rgba(255,255,255,0.07);
  stroke-width: 1;
  transition: stroke 0.3s, stroke-width 0.3s;
}
.btree-svg line.bt-active {
  stroke: #fbbf24;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(251,191,36,0.3));
}
.btree-svg line.bt-active-leaf {
  stroke: #34d399;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(52,211,153,0.3));
}
@keyframes btree-node-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.2); }
  50% { box-shadow: 0 0 18px rgba(251,191,36,0.4); }
}
@keyframes btree-leaf-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(52,211,153,0.2); }
  50% { box-shadow: 0 0 18px rgba(52,211,153,0.4); }
}
.btree-level {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 1;
}
.btree-level:last-of-type { margin-bottom: 0.5rem; }
/* Level label */
.btree-level-tag {
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  opacity: 0.3;
  white-space: nowrap;
}
.btree-node {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.3s ease, transform 0.15s;
  position: relative;
}
.btree-node:hover {
  border-color: rgba(var(--accent-primary-rgb),0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btree-node.bt-visited {
  border-color: #fbbf24;
  background: rgba(251,191,36,0.03);
  animation: btree-node-glow 2s ease-in-out infinite;
}
.btree-node.leaf { border-color: rgba(52,211,153,0.2); }
.btree-node.leaf.bt-visited {
  border-color: #34d399;
  background: rgba(52,211,153,0.03);
  animation: btree-leaf-glow 2s ease-in-out infinite;
}
.btree-node.bt-dim { opacity: 0.25; }
.btree-key {
  padding: 0.3rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-right: 1px solid rgba(255,255,255,0.06);
  font-family: 'SF Mono','Cascadia Code',monospace;
  transition: background 0.3s, color 0.3s;
}
.btree-key:last-child { border-right: none; }
.btree-key.bt-match {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}
.btree-node.leaf .btree-key.bt-match {
  background: rgba(52,211,153,0.15);
  color: #34d399;
}
/* Leaf link */
.btree-leaf-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.3;
  padding: 0.3rem 0 0.8rem;
  position: relative;
  z-index: 1;
}
/* Reset button */
.btree-reset {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.btree-header:hover .btree-reset { opacity: 0.6; }
.btree-reset:hover { opacity: 1 !important; color: var(--text-primary); }
.btree-leaf-link-arrow { color: var(--text-secondary); font-size: 0.8rem; }
.btree-node.leaf { border-color: #34d399; }

/* ----------------------------------------------------------
   53. Network Topology (.net-topology)
   ---------------------------------------------------------- */
.net-topology { display: flex; align-items: center; gap: 0; padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.net-hop { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 70px; text-align: center; }
.net-hop-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--bg-tertiary); border: 2px solid var(--border-color); }
.net-hop-label { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
.net-hop-location { font-size: 0.65rem; color: var(--text-secondary); }
.net-link { flex: 1; min-width: 50px; height: 2px; background: var(--border-color); position: relative; }
.net-link-latency { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 600; color: var(--accent-primary); white-space: nowrap; background: var(--bg-secondary); padding: 0 4px; }
.net-topology-total { margin-left: 1rem; padding: .5rem .85rem; background: rgba(37,99,235,.1); border: 1px solid #60a5fa; border-radius: var(--radius-md); font-weight: 700; font-size: 0.85rem; color: #93c5fd; white-space: nowrap; }

/* ----------------------------------------------------------
   54. DNS Resolution Trace (.dns-trace)
   ---------------------------------------------------------- */
.dns-trace { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.dns-trace-steps { display: flex; flex-direction: column; gap: .5rem; }
.dns-step { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border-color); transition: all 0.2s; }
.dns-step.cache-hit { border-left: 3px solid #34d399; }
.dns-step.cache-miss { border-left: 3px solid #f87171; }
.dns-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.dns-step-server { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); min-width: 100px; }
.dns-step-result { flex: 1; font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-mono); }
.dns-step-time { font-size: 0.75rem; font-weight: 600; color: var(--accent-primary); white-space: nowrap; }

/* ----------------------------------------------------------
   55. HTTP Request Lifecycle (.http-lifecycle)
   ---------------------------------------------------------- */
.http-lifecycle { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.http-phases { display: flex; gap: 0; border-radius: var(--radius-md); overflow: hidden; margin-bottom: .75rem; }
.http-phase { flex: 1; padding: .6rem .5rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: #fff; min-width: 60px; position: relative; }
.http-phase.phase-dns { background: #7c3aed; }
.http-phase.phase-tcp { background: #2563eb; }
.http-phase.phase-tls { background: #0891b2; }
.http-phase.phase-http { background: #059669; }
.http-phase.phase-resp { background: #d97706; }
.http-phase-dur { display: block; font-size: 0.65rem; opacity: .8; margin-top: 2px; }
.http-total { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--text-secondary); }
.http-total-val { font-weight: 700; color: var(--text-primary); font-size: 1rem; }

/* ----------------------------------------------------------
   56. Retry Pattern Viz (.retry-viz)
   ---------------------------------------------------------- */
.retry-viz { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.retry-timeline { display: flex; align-items: flex-end; gap: 0.35rem; min-width: 400px; height: 80px; padding-bottom: .5rem; border-bottom: 2px solid var(--border-color); position: relative; }
.retry-attempt { display: flex; flex-direction: column; align-items: center; gap: .3rem; position: relative; }
.retry-attempt-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; transition: transform 0.2s, box-shadow 0.2s; }
.retry-attempt-dot.fail { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.retry-attempt-dot.success { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.3); position: relative; }
.retry-attempt-dot.success::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.5rem; position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; background: #059669; border-radius: 50%; border: 1.5px solid var(--bg-secondary); color: #fff; }
.retry-attempt-label { font-size: 0.65rem; color: var(--text-secondary); }
.retry-gap { display: flex; align-items: center; justify-content: center; height: 3px; background: var(--border-color); position: relative; border-radius: 2px; min-width: 30px; }
.retry-gap-label { position: absolute; top: -20px; font-size: 0.7rem; font-weight: 600; color: #fbbf24; white-space: nowrap; }
.retry-viz-legend { display: flex; gap: 1rem; margin-top: .75rem; font-size: 0.78rem; color: var(--text-secondary); }

/* ----------------------------------------------------------
   57. Event Sourcing Timeline (.event-timeline)
   ---------------------------------------------------------- */
.event-timeline { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.event-timeline-track { display: flex; gap: 1rem; align-items: flex-start; min-width: 500px; padding-bottom: .5rem; }
.event-card { min-width: 140px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-tertiary); overflow: hidden; flex-shrink: 0; }
.event-card-header { padding: .4rem .6rem; font-size: 0.75rem; font-weight: 700; color: #fff; }
.event-card-header.create { background: #2563eb; }
.event-card-header.update { background: #d97706; }
.event-card-header.delete { background: #ef4444; }
.event-card-body { padding: .5rem .6rem; font-size: 0.75rem; color: var(--text-secondary); font-family: var(--font-mono); }
.event-state { margin-top: .35rem; padding: .35rem .6rem; background: rgba(16,185,129,.08); border-top: 1px solid var(--border-color); font-size: 0.7rem; color: #34d399; }
.event-replay-indicator { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: rgba(124,58,237,.12); color: #a78bfa; margin-top: .75rem; }

/* ----------------------------------------------------------
   58. CQRS Flow (.cqrs-flow)
   ---------------------------------------------------------- */
.cqrs-flow { display: flex; gap: 1rem; padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); flex-wrap: wrap; }
.cqrs-side { flex: 1; min-width: 200px; padding: 1rem; border-radius: var(--radius-md); }
.cqrs-side.write-side { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); }
.cqrs-side.read-side { background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.2); }
.cqrs-side-title { font-weight: 700; font-size: 0.85rem; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.cqrs-side.write-side .cqrs-side-title { color: #fca5a5; }
.cqrs-side.read-side .cqrs-side-title { color: #93c5fd; }
.cqrs-box { padding: .5rem .75rem; border-radius: 6px; background: var(--bg-tertiary); border: 1px solid var(--border-color); margin-bottom: .5rem; font-size: 0.8rem; color: var(--text-primary); text-align: center; font-weight: 600; }
.cqrs-arrow-down { text-align: center; color: var(--text-secondary); font-size: 1rem; margin: .25rem 0; }
.cqrs-event-store { padding: .6rem 1rem; border-radius: var(--radius-md); background: rgba(124,58,237,.1); border: 2px solid #a78bfa; text-align: center; font-weight: 700; font-size: 0.85rem; color: #c4b5fd; margin: .75rem 0; width: 100%; }

/* ----------------------------------------------------------
   59. Service Dependency Map (.service-map)
   ---------------------------------------------------------- */
.service-map { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.service-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.service-box { padding: .75rem; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 2px solid var(--border-color); text-align: center; transition: all 0.2s; position: relative; }
.service-box.healthy { border-color: #34d399; }
.service-box.degraded { border-color: #fbbf24; }
.service-box.down { border-color: #f87171; background: rgba(239,68,68,.06); }
.service-box-name { font-weight: 700; font-size: 0.82rem; color: var(--text-primary); }
.service-box-status { font-size: 0.7rem; margin-top: .25rem; }
.service-box.healthy .service-box-status { color: #34d399; }
.service-box.degraded .service-box-status { color: #fbbf24; }
.service-box.down .service-box-status { color: #f87171; }
.service-dep-arrow { stroke: var(--border-color); stroke-width: 2; fill: none; }
.service-dep-arrow.failing { stroke: #f87171; stroke-width: 3; }
.service-dep-arrow.heavy { stroke-width: 4; }

/* ----------------------------------------------------------
   60. Feature Flag Rollout (.feature-rollout)
   ---------------------------------------------------------- */
.feature-rollout { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.feature-rollout-bar { display: flex; height: 36px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-tertiary); margin-bottom: .75rem; }
.rollout-stage { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #fff; transition: all 0.3s; position: relative; }
.rollout-stage.canary { background: #7c3aed; }
.rollout-stage.partial { background: #2563eb; }
.rollout-stage.majority { background: #0891b2; }
.rollout-stage.full { background: #059669; }
.rollout-stage.current { box-shadow: inset 0 0 0 2px #fbbf24; }
.rollout-stage.inactive { background: var(--bg-tertiary); color: var(--text-secondary); }
.feature-rollout-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary); }
.feature-rollout-labels span.active-label { color: #fbbf24; font-weight: 700; }

/* ----------------------------------------------------------
   61. A/B Test Split (.ab-split)
   ---------------------------------------------------------- */
.ab-split { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.ab-split-groups { display: flex; gap: .5rem; margin-bottom: 1rem; }
.ab-group { flex: 1; padding: .75rem; border-radius: var(--radius-md); text-align: center; font-weight: 700; font-size: 0.9rem; }
.ab-group.control { background: rgba(37,99,235,.1); border: 2px solid #60a5fa; color: #93c5fd; }
.ab-group.variant { background: rgba(16,185,129,.1); border: 2px solid #34d399; color: #6ee7b7; }
.ab-group-pct { font-size: 1.5rem; display: block; margin-bottom: .25rem; }
.ab-group-label { font-size: 0.78rem; font-weight: 600; }
.ab-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.ab-metric { padding: .5rem; border-radius: 6px; background: var(--bg-tertiary); text-align: center; }
.ab-metric-name { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: .25rem; }
.ab-metric-val { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.ab-metric-val.winner { color: #34d399; }
.ab-metric-val.loser { color: #f87171; }
@media (max-width: 480px) { .ab-metrics { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------
   62. Merkle Tree Diff (.merkle-diff)
   ---------------------------------------------------------- */
.merkle-diff { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.merkle-level { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.merkle-node { padding: .4rem .75rem; border-radius: 6px; background: var(--bg-tertiary); border: 2px solid var(--border-color); font-size: 0.75rem; font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); text-align: center; transition: all 0.2s; }
.merkle-node.match { border-color: #34d399; color: #34d399; }
@keyframes merkle-mismatch-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(248,113,113,0.2); }
  50% { box-shadow: 0 0 18px rgba(248,113,113,0.5), 0 0 36px rgba(248,113,113,0.1); }
}
.merkle-node.mismatch { border-color: #f87171; color: #f87171; background: rgba(239,68,68,.08); animation: merkle-mismatch-glow 2s ease-in-out infinite; }
.merkle-node.path { border-color: #fbbf24; color: #fbbf24; }
.merkle-connector { text-align: center; color: transparent; font-size: 0; margin-bottom: 0; position: relative; height: 24px; display: flex; align-items: center; justify-content: center; }
.merkle-connector::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: linear-gradient(180deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-primary-rgb),0.08)); }
.merkle-connector::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(var(--accent-primary-rgb),0.3); }

/* ----------------------------------------------------------
   63. Docker Compose Viz (.compose-viz)
   ---------------------------------------------------------- */
.compose-viz { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.compose-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.compose-svc { padding: .85rem; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 2px solid var(--border-color); position: relative; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.compose-svc.db { border-color: rgba(96,165,250,0.35); }
.compose-svc.app { border-color: rgba(52,211,153,0.35); }
.compose-svc.cache { border-color: rgba(251,191,36,0.35); }
.compose-svc.queue { border-color: rgba(167,139,250,0.35); }
@media (hover: hover) {
  .compose-svc:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
  .compose-svc.db:hover { border-color: #60a5fa; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 12px rgba(96,165,250,.15); }
  .compose-svc.app:hover { border-color: #34d399; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 12px rgba(52,211,153,.15); }
  .compose-svc.cache:hover { border-color: #fbbf24; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 12px rgba(251,191,36,.15); }
  .compose-svc.queue:hover { border-color: #a78bfa; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 12px rgba(167,139,250,.15); }
}
.compose-svc-name { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.compose-svc-name::before { content: "\25A0"; font-size: 0.6rem; }
.compose-svc.db .compose-svc-name::before { color: #60a5fa; }
.compose-svc.app .compose-svc-name::before { color: #34d399; }
.compose-svc.cache .compose-svc-name::before { color: #fbbf24; }
.compose-svc.queue .compose-svc-name::before { color: #a78bfa; }
.compose-detail { font-size: 0.72rem; color: var(--text-secondary); margin-top: .2rem; display: flex; align-items: center; gap: .35rem; }
.compose-detail-label { font-weight: 600; color: var(--text-primary); min-width: 45px; }
.compose-dep-arrow { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-top: .5rem; font-weight: 600; padding: 0.2rem 0.5rem; background: rgba(var(--accent-primary-rgb),0.04); border-radius: var(--radius-sm); border: 1px dashed rgba(var(--accent-primary-rgb),0.15); }

/* ----------------------------------------------------------
   64. SLA Calculator (.sla-calc)
   ---------------------------------------------------------- */
.sla-calc { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.sla-calc table { width: 100%; border-collapse: collapse; }
.sla-calc th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: .5rem .75rem; text-align: left; border-bottom: 2px solid var(--border-color); }
.sla-calc td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-color); font-size: 0.82rem; color: var(--text-primary); }
.sla-calc tr:last-child td { border-bottom: none; }
.sla-nines { font-weight: 700; color: var(--accent-primary); font-family: var(--font-mono); }
.sla-pct { font-family: var(--font-mono); color: var(--text-secondary); }
.sla-downtime { font-weight: 600; }
.sla-downtime.safe { color: #34d399; }
.sla-downtime.warn { color: #fbbf24; }
.sla-downtime.danger { color: #f87171; }
.sla-calc-highlight { background: rgba(251,191,36,.06); }

/* ----------------------------------------------------------
   65. Capacity Planning Grid (.capacity-grid)
   ---------------------------------------------------------- */
.capacity-grid { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.capacity-inputs, .capacity-outputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.capacity-item { padding: .6rem .75rem; border-radius: var(--radius-md); text-align: center; }
.capacity-item.input { background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2); }
.capacity-item.output { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); }
.capacity-item-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: .25rem; }
.capacity-item-val { font-size: 1.1rem; font-weight: 700; }
.capacity-item.input .capacity-item-val { color: #93c5fd; }
.capacity-item.output .capacity-item-val { color: #6ee7b7; }
.capacity-divider { text-align: center; color: var(--text-secondary); font-size: 1.5rem; margin-bottom: 1rem; }

/* ----------------------------------------------------------
   66. Bandwidth Estimator (.bw-estimator)
   ---------------------------------------------------------- */
.bw-estimator { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.bw-inputs { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.bw-input { padding: .5rem .75rem; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border-color); text-align: center; }
.bw-input-label { font-size: 0.7rem; color: var(--text-secondary); }
.bw-input-val { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.bw-operator { font-size: 1.2rem; color: var(--text-secondary); font-weight: 700; }
.bw-result { padding: .75rem 1.25rem; border-radius: var(--radius-md); background: rgba(16,185,129,.1); border: 2px solid #34d399; text-align: center; margin-bottom: 1rem; }
.bw-result-val { font-size: 1.3rem; font-weight: 700; color: #6ee7b7; }
.bw-result-label { font-size: 0.75rem; color: var(--text-secondary); }
.bw-bar { height: 24px; border-radius: var(--radius-md); background: var(--bg-tertiary); overflow: hidden; position: relative; }
.bw-bar-fill { height: 100%; border-radius: var(--radius-md); transition: width 0.5s; }
.bw-bar-fill.low { background: #10b981; }
.bw-bar-fill.mid { background: #f59e0b; }
.bw-bar-fill.high { background: #ef4444; }
.bw-bar-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; font-weight: 600; color: var(--text-primary); }

/* ----------------------------------------------------------
   67. Key Insight Callout (.callout-insight)
   ---------------------------------------------------------- */
.callout-insight { padding: 1.25rem 1.5rem; border-radius: var(--radius-md); background: rgba(251,191,36,.06); border: 2px solid rgba(251,191,36,.25); border-left: 5px solid #fbbf24; position: relative; margin: 1rem 0; }
.callout-insight::before { content: "\1F4A1"; font-size: 1.3rem; position: absolute; top: 1rem; left: 1.25rem; }
.callout-insight { padding-left: 3.25rem; }
.callout-insight-title { font-weight: 700; font-size: 1rem; color: #fbbf24; margin-bottom: .35rem; }
.callout-insight p { font-size: 0.95rem; color: var(--text-primary); line-height: 1.7; margin: 0; }

/* ----------------------------------------------------------
   68. Formula Reference Float (.formula-float)
   ---------------------------------------------------------- */
.formula-float { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 280px; max-height: 320px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,.35); z-index: 900; overflow: hidden; transition: all 0.3s; }
.formula-float.collapsed { max-height: 42px; }
.formula-float-header { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; background: var(--bg-tertiary); cursor: pointer; border-bottom: 1px solid var(--border-color); }
.formula-float-title { font-weight: 700; font-size: 0.82rem; color: var(--text-primary); }
.formula-float-toggle { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; }
.formula-float-body { padding: .75rem .85rem; overflow-y: auto; max-height: 260px; }
.formula-item { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-color); }
.formula-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.formula-name { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; margin-bottom: .2rem; }
.formula-expr { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--accent-primary); }
@media (max-width: 600px) { .formula-float { width: calc(100% - 2rem); right: 1rem; bottom: 1rem; } }

/* ----------------------------------------------------------
   69. Prerequisite Checker (.prereq-check)
   ---------------------------------------------------------- */
.prereq-check { padding: 1rem 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.prereq-check-title { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); margin-bottom: .75rem; }
.prereq-list { display: flex; flex-direction: column; gap: .4rem; }
.prereq-item { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 6px; font-size: 0.82rem; transition: background 0.15s; }
.prereq-item:hover { background: var(--bg-tertiary); }
.prereq-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
.prereq-icon.done { background: rgba(16,185,129,.15); color: #34d399; }
.prereq-icon.todo { background: rgba(245,158,11,.15); color: #fbbf24; }
.prereq-item a { color: var(--accent-primary); text-decoration: none; font-weight: 600; }
.prereq-item a:hover { text-decoration: underline; }
.prereq-item span.checked { color: var(--text-secondary); text-decoration: line-through; opacity: .65; }

/* ----------------------------------------------------------
   70. Concept Map (.concept-map)
   ---------------------------------------------------------- */
.concept-map { padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; }
.concept-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; min-width: 400px; }
.concept-node { padding: .6rem .75rem; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 2px solid var(--border-color); text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; }
.concept-node:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.concept-node.current { border-color: #fbbf24; background: rgba(251,191,36,.08); color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.15); }
.concept-node.completed { border-color: #34d399; }
.concept-node.completed::after { content: " \2713"; color: #34d399; }
.concept-node.locked { opacity: .4; pointer-events: none; border-style: dashed; }
.concept-map-category { grid-column: 1 / -1; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); font-weight: 700; padding-top: .5rem; border-top: 1px solid var(--border-color); margin-top: .25rem; }
.concept-map-category:first-child { border-top: none; margin-top: 0; padding-top: 0; }

/* ============================================================
   LLD-SPECIFIC COMPONENTS (15 new)
   Built for Low-Level Design: classes, patterns, SOLID, UML
   ============================================================ */

/* ----------------------------------------------------------
   L1. Class Card (.class-card)
   Show a class with fields + methods in clean visual
   ---------------------------------------------------------- */
.class-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
  transition: border-color 0.3s, box-shadow 0.3s;
  min-width: 220px;
}
.class-card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.class-card-header {
  background: rgba(var(--accent-primary-rgb), 0.1);
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-primary);
  text-align: center;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.class-card-header .class-stereotype {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
}
.class-card-section {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.08);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.class-card-section:last-child { border-bottom: none; }
.class-card-section .field { display: flex; gap: 0.35rem; padding: 0.15rem 0; }
.class-card-section .field .access { color: #f87171; font-weight: 600; width: 1ch; }
.class-card-section .field .type { color: #e5c07b; }
.class-card-section .field .name { color: var(--text-primary); }
.class-card-section .method { display: flex; gap: 0.35rem; padding: 0.15rem 0; }
.class-card-section .method .access { color: #4ade80; font-weight: 600; width: 1ch; }
.class-card-section .method .return-type { color: #e5c07b; }
.class-card-section .method .name { color: #61afef; }
.class-card.abstract .class-card-header { font-style: italic; }
.class-card.interface .class-card-header { background: rgba(96, 165, 250, 0.1); color: #60a5fa; }

/* ----------------------------------------------------------
   L2. Interface Contract (.interface-contract)
   ---------------------------------------------------------- */
.interface-contract {
  border: 2px dashed rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
  background: rgba(96, 165, 250, 0.03);
}
.interface-contract-header {
  background: rgba(96, 165, 250, 0.08);
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #60a5fa;
  text-align: center;
  border-bottom: 1px dashed rgba(96, 165, 250, 0.2);
}
.interface-contract-header::before {
  content: '\AB\AB interface \BB\BB';
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.15rem;
}
.interface-method {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(96, 165, 250, 0.06);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.interface-method:last-child { border-bottom: none; }
.interface-method .im-return { color: #e5c07b; }
.interface-method .im-name { color: #61afef; font-weight: 600; }
.interface-method .im-params { color: var(--text-muted); }
.interface-method .im-desc {
  margin-left: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ----------------------------------------------------------
   L3. Inheritance Tree (.inheritance-tree)
   ---------------------------------------------------------- */
.inheritance-tree {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
}
.inh-level {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 0;
  position: relative;
}
.inh-level + .inh-level { padding-top: 1.5rem; }
.inh-level + .inh-level::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1rem;
  background: rgba(var(--accent-primary-rgb), 0.25);
}
.inh-node {
  padding: 0.45rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  text-align: center;
  transition: all 0.2s;
  position: relative;
}
.inh-node:hover { border-color: var(--accent-primary); transform: translateY(-1px); }
.inh-node.parent { border-color: rgba(var(--accent-primary-rgb), 0.4); color: var(--accent-primary); }
.inh-node.abstract { font-style: italic; border-style: dashed; }
.inh-node.interface { color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); border-style: dashed; }
.inh-node.current { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.2); color: #fbbf24; }
.inh-arrow { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 0.2rem 0; }

/* ----------------------------------------------------------
   L4. Composition Viz (.composition-viz)
   ---------------------------------------------------------- */
.composition-viz {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  flex-wrap: wrap;
}
.comp-owner {
  padding: 0.6rem 1rem;
  border: 2px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.06);
}
.comp-diamond {
  width: 12px;
  height: 12px;
  background: var(--accent-primary);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.comp-diamond.hollow {
  background: transparent;
  border: 2px solid var(--accent-primary);
}
.comp-line { flex: 0 0 24px; height: 2px; background: var(--border-color); }
.comp-children {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.comp-child {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  transition: border-color 0.2s;
}
.comp-child:hover { border-color: rgba(var(--accent-primary-rgb), 0.4); }
.comp-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: absolute;
  top: -0.6rem;
}

/* ----------------------------------------------------------
   L5. State Machine (.state-machine)
   ---------------------------------------------------------- */
.state-machine {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.sm-state {
  padding: 0.55rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  transition: all 0.25s;
  text-align: center;
  min-width: 70px;
}
.sm-state.initial { border-color: #60a5fa; color: #60a5fa; background: rgba(96, 165, 250, 0.06); }
.sm-state.active { border-color: #34d399; color: #34d399; background: rgba(52, 211, 153, 0.06); box-shadow: 0 0 12px rgba(52, 211, 153, 0.15); }
.sm-state.final { border-color: #f87171; color: #f87171; background: rgba(248, 113, 113, 0.06); border-width: 3px; }
.sm-state.current { border-color: #fbbf24; color: #fbbf24; box-shadow: 0 0 14px rgba(251, 191, 36, 0.2); }
.sm-transition {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.sm-transition::before { content: ''; width: 20px; height: 2px; background: var(--border-color); }
.sm-transition::after { content: '\25B6'; font-size: 0.5rem; color: var(--text-muted); }
.sm-transition .sm-trigger {
  font-size: 0.68rem;
  color: var(--accent-primary);
  font-weight: 600;
  font-style: italic;
}

/* ----------------------------------------------------------
   L6. Method Call Chain (.call-chain)
   ---------------------------------------------------------- */
.call-chain {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  overflow-x: auto;
}
.call-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.call-depth {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.call-depth-1 { background: #2563eb; }
.call-depth-2 { background: #7c3aed; }
.call-depth-3 { background: #db2777; }
.call-depth-4 { background: #ea580c; }
.call-caller { color: #e5c07b; font-weight: 600; }
.call-dot { color: var(--text-muted); }
.call-method { color: #61afef; }
.call-args { color: var(--text-muted); }
.call-return { color: #98c379; font-style: italic; margin-left: auto; font-size: 0.75rem; }
.call-indent { padding-left: 1.5rem; border-left: 2px solid rgba(var(--accent-primary-rgb), 0.1); margin-left: 0.7rem; }
.call-indent .call-indent { border-left-color: rgba(139, 92, 246, 0.15); }

/* ----------------------------------------------------------
   L7. Pattern Card (.pattern-card)
   ---------------------------------------------------------- */
.pattern-card {
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
  background: var(--bg-secondary);
}
.pattern-card-header {
  padding: 1rem 1.25rem;
  background: rgba(var(--accent-primary-rgb), 0.04);
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.08);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pattern-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pattern-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.pattern-card-category { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pattern-card-body { padding: 1rem 1.25rem; }
.pattern-card-body dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
}
.pattern-card-body dt:first-child { margin-top: 0; }
.pattern-card-body dd {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   L8. Refactoring Diff (.refactor-diff)
   ---------------------------------------------------------- */
.refactor-diff {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.refactor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.refactor-header i { opacity: 0.5; font-size: 0.7rem; }
.refactor-step-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: rgba(var(--accent-primary-rgb),0.1);
  color: rgb(var(--accent-primary-rgb));
}
.refactor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.refactor-before, .refactor-after {
  display: flex;
  flex-direction: column;
}
.refactor-before { border-right: 1px solid var(--border-color); }
.refactor-label {
  padding: 0.35rem 0.8rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.refactor-before .refactor-label {
  background: rgba(239,68,68,0.05);
  color: #f87171;
}
.refactor-after .refactor-label {
  background: rgba(16,185,129,0.05);
  color: #34d399;
}
.refactor-label i { font-size: 0.6rem; }
.refactor-code {
  flex: 1;
  margin: 0;
  padding: 0.6rem 0;
  font-family: 'SF Mono','Cascadia Code',monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-x: auto;
}
.refactor-before .refactor-code { background: rgba(239,68,68,0.025); }
.refactor-after .refactor-code { background: rgba(16,185,129,0.025); }
.refactor-code pre {
  margin: 0;
  padding: 0 0.8rem;
}
/* Stats row */
.refactor-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.4rem 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.62rem;
  color: var(--text-muted);
  font-family: 'SF Mono','Cascadia Code',monospace;
}
.refactor-stat--red { color: #f87171; }
.refactor-stat--green { color: #34d399; }
/* Hide old arrow */
.refactor-arrow { display: none; }
.refactor-step { display: none; }
@media (max-width: 600px) {
  .refactor-body { grid-template-columns: 1fr; }
  .refactor-before { border-right: none; border-bottom: 1px solid var(--border-color); }
}

/* ----------------------------------------------------------
   L9. SOLID Indicator (.solid-indicator)
   ---------------------------------------------------------- */
.solid-indicator {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.solid-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1.5px solid;
  transition: transform 0.2s, box-shadow 0.2s;
}
.solid-badge:hover { transform: translateY(-1px); }
.solid-badge.pass {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.solid-badge.pass::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.65rem; }
.solid-badge.fail {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.solid-badge.fail::before { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.65rem; }
.solid-badge.partial {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.solid-badge.partial::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.6rem; }
.solid-badge.pass:hover { box-shadow: 0 0 10px rgba(16, 185, 129, 0.15); }
.solid-badge.fail:hover { box-shadow: 0 0 10px rgba(239, 68, 68, 0.15); }

/* ----------------------------------------------------------
   L10. Responsibility Map (.responsibility-map)
   ---------------------------------------------------------- */
.responsibility-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.resp-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.resp-card:hover { border-color: rgba(var(--accent-primary-rgb), 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
.resp-card-class {
  padding: 0.5rem 0.85rem;
  background: rgba(var(--accent-primary-rgb), 0.06);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-primary);
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.08);
}
.resp-card-duties {
  padding: 0.5rem 0.85rem;
  list-style: none;
  margin: 0;
}
.resp-card-duties li {
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.resp-card-duties li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.55rem;
  color: #34d399;
}

/* ----------------------------------------------------------
   L11. Coupling Meter (.coupling-meter)
   ---------------------------------------------------------- */
.coupling-meter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
}
.coupling-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 70px;
}
.coupling-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.coupling-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}
.coupling-fill.low { background: #10b981; width: 25%; }
.coupling-fill.medium { background: #f59e0b; width: 55%; }
.coupling-fill.high { background: #ef4444; width: 85%; }
.coupling-value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 3rem;
  text-align: right;
}
.coupling-fill.low ~ .coupling-value, .coupling-meter.low .coupling-value { color: #34d399; }
.coupling-meter.medium .coupling-value { color: #fbbf24; }
.coupling-meter.high .coupling-value { color: #f87171; }

/* ----------------------------------------------------------
   L12. Object Lifecycle (.obj-lifecycle)
   ---------------------------------------------------------- */
.obj-lifecycle {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  overflow-x: auto;
}
.ol-phase {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  min-width: 70px;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: all 0.25s;
}
.ol-phase.created { border-color: #60a5fa; color: #60a5fa; background: rgba(96, 165, 250, 0.06); }
.ol-phase.active { border-color: #34d399; color: #34d399; background: rgba(52, 211, 153, 0.06); }
.ol-phase.disposed { border-color: #f87171; color: #f87171; background: rgba(248, 113, 113, 0.06); opacity: 0.7; }
.ol-arrow { width: 32px; height: 2px; background: var(--border-color); flex-shrink: 0; position: relative; }
.ol-arrow::after { content: '\25B6'; position: absolute; right: -4px; top: -7px; font-size: 0.6rem; color: var(--text-muted); }

/* ----------------------------------------------------------
   L13. DI Flow (.di-flow)
   ---------------------------------------------------------- */
.di-flow {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  text-align: center;
}
.di-container {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border: 2px solid #a78bfa;
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.06);
  font-weight: 700;
  font-size: 0.88rem;
  color: #a78bfa;
  margin-bottom: 0.75rem;
}
.di-registrations {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.di-reg {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.di-reg .di-interface { color: #60a5fa; }
.di-reg .di-arrow { color: var(--text-muted); font-size: 0.6rem; }
.di-reg .di-impl { color: #34d399; }
.di-reg { background: var(--bg-tertiary); border: 1px solid var(--border-color); }
.di-resolved {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.di-instance {
  padding: 0.4rem 0.85rem;
  border: 2px solid #34d399;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: #34d399;
  background: rgba(52, 211, 153, 0.06);
}
.di-flow-arrow {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.35rem 0;
}

/* ----------------------------------------------------------
   L14. Test Case Card (.test-card)
   ---------------------------------------------------------- */
.test-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.test-card-header {
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.test-card.pass .test-card-header { background: rgba(16, 185, 129, 0.06); color: #34d399; }
.test-card.fail .test-card-header { background: rgba(239, 68, 68, 0.06); color: #f87171; }
.test-card.pass .test-card-header::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.test-card.fail .test-card-header::before { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.test-card-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.test-card-row:last-child { border-bottom: none; }
.test-card-label { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; font-weight: 600; }
.test-card-value { color: var(--text-secondary); }
.test-card.fail .test-card-row:last-child .test-card-value { color: #f87171; }

/* ----------------------------------------------------------
   L15. Code Evolution Stepper (.code-evo)
   ---------------------------------------------------------- */
.code-evo {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 1.25rem 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.code-evo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(var(--accent-primary-rgb),0.02));
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.code-evo-header i { opacity: 0.5; font-size: 0.7rem; }
.code-evo-versions {
  font-size: 0.6rem;
  color: var(--text-muted);
}
/* Progress timeline — segmented bar */
.code-evo-timeline {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.2rem;
  gap: 3px;
  border-bottom: 1px solid var(--border-color);
}
.evo-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  position: relative;
}
.evo-seg:hover { transform: scaleY(2); filter: brightness(1.3); }
.evo-seg.evo-past { opacity: 1; }
.evo-seg.evo-future { opacity: 0.2; }
.evo-seg.evo-current { transform: scaleY(2.5); filter: brightness(1.2); }
/* Version label tooltip on segment hover */
.evo-seg::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-primary);
  background: #1a2236;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.evo-seg:hover::after { opacity: 1; }
/* Slide container — crossfade with height morph */
.code-evo-slides {
  position: relative;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.code-evo-step {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.code-evo-step.evo-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
}
/* Outgoing slide */
.code-evo-step.evo-leaving {
  opacity: 0;
  transform: translateY(-6px);
  z-index: 0;
}
/* Step info bar */
.code-evo-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.code-evo-info-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.code-evo-label-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.code-evo-label-text {
  font-size: 0.82rem;
  font-weight: 700;
}
.code-evo-why {
  font-size: 0.68rem;
  color: var(--text-secondary);
  opacity: 0.7;
  font-style: italic;
  margin-left: 0.3rem;
}
.code-evo-info-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.code-evo-lines {
  font-size: 0.62rem;
  font-family: 'SF Mono','Cascadia Code',monospace;
  color: var(--text-muted);
}
.code-evo-delta {
  font-size: 0.6rem;
  font-family: 'SF Mono','Cascadia Code',monospace;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.code-evo-delta--less { color: #34d399; background: rgba(16,185,129,0.1); }
.code-evo-delta--more { color: #f87171; background: rgba(239,68,68,0.1); }
.code-evo-delta--same { color: var(--text-muted); background: rgba(255,255,255,0.04); }
/* Code panel — macOS style */
.code-evo-code-wrap {
  position: relative;
}
.code-evo-dots {
  display: flex;
  gap: 5px;
  padding: 0.4rem 0.7rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.code-evo-dots span { width: 8px; height: 8px; border-radius: 50%; }
.code-evo-dots .ed-red { background: #ff5f57; }
.code-evo-dots .ed-yel { background: #febc2e; }
.code-evo-dots .ed-grn { background: #28c840; }
.code-evo-code {
  padding: 0.5rem 0;
  font-family: 'SF Mono','Cascadia Code',monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}
.code-evo-code::-webkit-scrollbar { width: 5px; height: 5px; }
.code-evo-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.code-evo-code pre { margin: 0; padding: 0 1rem; }
/* Navigation — player style */
.code-evo-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.45rem 1rem;
  border-top: 1px solid var(--border-color);
  background: rgba(0,0,0,0.08);
}
.evo-nav-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.evo-nav-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.evo-nav-btn:disabled { opacity: 0.2; cursor: default; }
.evo-nav-progress {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: 'SF Mono','Cascadia Code',monospace;
  min-width: 3rem;
  text-align: center;
}
.code-evo-connector {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   L16. Decorator / Wrapper Viz (.decorator-viz)
   ---------------------------------------------------------- */
.decorator-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
}
.dec-layer {
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  transition: all 0.25s;
  width: 100%;
  max-width: 400px;
}
.dec-layer:hover { border-color: rgba(var(--accent-primary-rgb), 0.4); }
.dec-layer.core { background: rgba(var(--accent-primary-rgb), 0.1); border-color: var(--accent-primary); color: var(--accent-primary); }
.dec-layer.wrap-1 { background: rgba(139, 92, 246, 0.06); border-color: rgba(139, 92, 246, 0.3); color: #a78bfa; padding: 0.8rem 2rem; }
.dec-layer.wrap-2 { background: rgba(236, 72, 153, 0.06); border-color: rgba(236, 72, 153, 0.3); color: #f472b6; padding: 1rem 2.5rem; }
.dec-layer.wrap-3 { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; padding: 1.2rem 3rem; }
.dec-wrap-arrow { color: var(--text-muted); font-size: 0.7rem; padding: 0.15rem 0; }

/* ----------------------------------------------------------
   L17. Observer Event Flow (.observer-flow)
   ---------------------------------------------------------- */
.observer-flow {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  text-align: center;
}
.obs-publisher {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.06);
  margin-bottom: 0.5rem;
}
.obs-event {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.4rem 0;
}
.obs-arrow-down { color: var(--text-muted); font-size: 0.8rem; margin: 0.2rem 0; }
.obs-subscribers {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.obs-subscriber {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  transition: border-color 0.2s;
}
.obs-subscriber:hover { border-color: rgba(var(--accent-primary-rgb), 0.4); }

/* ----------------------------------------------------------
   L18. Factory Output Viz (.factory-viz)
   ---------------------------------------------------------- */
.factory-viz {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  flex-wrap: wrap;
  justify-content: center;
}
.factory-input {
  padding: 0.5rem 0.85rem;
  border: 1px dashed rgba(var(--accent-primary-rgb), 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}
.factory-box {
  padding: 0.6rem 1.25rem;
  border: 2px solid #a78bfa;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.88rem;
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.06);
  text-align: center;
}
.factory-arrow { color: var(--text-muted); font-size: 1rem; }
.factory-outputs { display: flex; flex-direction: column; gap: 0.35rem; }
.factory-product {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
}

/* ----------------------------------------------------------
   L19. Design Decision Card (.decision-card)
   ---------------------------------------------------------- */
.decision-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
}
.decision-card-question {
  padding: 0.85rem 1.25rem;
  background: rgba(var(--accent-primary-rgb), 0.05);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}
.decision-options { display: grid; grid-template-columns: 1fr 1fr; }
.decision-option {
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--border-color);
}
.decision-option:last-child { border-right: none; }
.decision-option-title { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.decision-pro, .decision-con {
  font-size: 0.78rem;
  padding: 0.15rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.decision-pro::before { content: '+'; color: #34d399; font-weight: 700; }
.decision-con::before { content: '\2212'; color: #f87171; font-weight: 700; }
.decision-verdict {
  padding: 0.6rem 1.25rem;
  background: rgba(16, 185, 129, 0.05);
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
  color: #34d399;
  font-weight: 600;
}
.decision-verdict::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 0.4rem; font-size: 0.7rem; }
@media (max-width: 600px) { .decision-options { grid-template-columns: 1fr; } .decision-option { border-right: none; border-bottom: 1px solid var(--border-color); } }

/* ----------------------------------------------------------
   L20. Complexity Badge (.complexity-badge)
   ---------------------------------------------------------- */
.complexity-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.complexity-badge {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1.5px solid;
}
.complexity-badge.o1 { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); color: #34d399; }
.complexity-badge.ologn { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.3); color: #60a5fa; }
.complexity-badge.on { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; }
.complexity-badge.onlogn { background: rgba(251, 146, 60, 0.08); border-color: rgba(251, 146, 60, 0.3); color: #fb923c; }
.complexity-badge.on2 { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #f87171; }
.complexity-badge.on3 { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); color: #fca5a5; }

/* ----------------------------------------------------------
   L21. Interview Tip (.interview-tip)
   ---------------------------------------------------------- */
.interview-tip {
  padding: 1rem 1.25rem 1rem 3.25rem;
  border-left: 4px solid #60a5fa;
  background: rgba(96, 165, 250, 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 1rem 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
  position: relative;
}
.interview-tip::before {
  content: '\f130';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.95rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: #60a5fa;
}
.interview-tip strong { color: #93c5fd; }

/* ----------------------------------------------------------
   L22. Rule Card (.rule-card)
   ---------------------------------------------------------- */
.rule-card {
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  background: rgba(var(--accent-primary-rgb), 0.03);
}
.rule-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-primary);
  margin-bottom: 0.35rem;
}
.rule-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   L23. Anti-Pattern Card (.antipattern-card)
   ---------------------------------------------------------- */
.antipattern-card {
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-left: 4px solid #f87171;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
}
.antipattern-header {
  padding: 0.75rem 1.25rem;
  background: rgba(239, 68, 68, 0.05);
  font-weight: 700;
  font-size: 0.95rem;
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.antipattern-header::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.85rem; }
.antipattern-body { padding: 0.85rem 1.25rem; }
.antipattern-body dt { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.5rem; }
.antipattern-body dt:first-child { margin-top: 0; }
.antipattern-body .ap-problem { color: #f87171; }
.antipattern-body .ap-why { color: #fbbf24; }
.antipattern-body .ap-fix { color: #34d399; }
.antipattern-body dd { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; }

/* ----------------------------------------------------------
   L24. Memory Layout (.memory-layout)
   ---------------------------------------------------------- */
.memory-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.mem-region {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mem-region-header {
  padding: 0.5rem 0.85rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
}
.mem-region.stack .mem-region-header { background: rgba(96, 165, 250, 0.08); color: #60a5fa; }
.mem-region.heap .mem-region-header { background: rgba(139, 92, 246, 0.08); color: #a78bfa; }
.mem-slot {
  padding: 0.35rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
}
.mem-slot:last-child { border-bottom: none; }
.mem-slot .mem-addr { color: var(--text-muted); font-size: 0.7rem; }
.mem-slot .mem-val { color: var(--text-primary); font-weight: 600; }
.mem-slot .mem-ref { color: #a78bfa; font-style: italic; }
@media (max-width: 600px) { .memory-layout { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------
   L25. Thread Safety Indicator (.thread-safety)
   ---------------------------------------------------------- */
.thread-safety { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.ts-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid;
}
.ts-badge.safe { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); color: #34d399; }
.ts-badge.safe::before { content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.6rem; }
.ts-badge.unsafe { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #f87171; }
.ts-badge.unsafe::before { content: '\f09c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.6rem; }
.ts-badge.conditional { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; }
.ts-badge.conditional::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.55rem; }

/* ----------------------------------------------------------
   L26. Version Comparison (.version-compare)
   ---------------------------------------------------------- */
.version-compare {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
}
.version-col {
  flex: 1;
  border-right: 1px solid var(--border-color);
}
.version-col:last-child { border-right: none; }
.version-col-header {
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.version-col-body { padding: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.version-col.current .version-col-header { background: rgba(var(--accent-primary-rgb), 0.08); color: var(--accent-primary); }
.version-new { color: #34d399; font-weight: 600; }
.version-removed { color: #f87171; text-decoration: line-through; }
@media (max-width: 600px) { .version-compare { flex-direction: column; } .version-col { border-right: none; border-bottom: 1px solid var(--border-color); } .version-col:last-child { border-bottom: none; } }

/* ----------------------------------------------------------
   L27. Dependency Direction (.dep-direction)
   ---------------------------------------------------------- */
.dep-direction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 1rem 0;
}
.dep-direction .dep-dir-layer {
  padding: 0.55rem 2rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  max-width: 300px;
  background: var(--bg-tertiary);
  transition: all 0.2s;
}
.dep-direction .dep-dir-layer:hover { border-color: rgba(var(--accent-primary-rgb), 0.4); }
.dep-dir-layer.presentation { border-color: rgba(96, 165, 250, 0.3); color: #60a5fa; }
.dep-dir-layer.application { border-color: rgba(52, 211, 153, 0.3); color: #34d399; }
.dep-dir-layer.domain { border-color: rgba(251, 191, 36, 0.3); color: #fbbf24; background: rgba(251, 191, 36, 0.04); }
.dep-dir-layer.infrastructure { border-color: rgba(248, 113, 113, 0.3); color: #f87171; }
.dep-dir-arrow { color: var(--text-muted); font-size: 0.7rem; padding: 0.15rem 0; }
.dep-dir-label { font-size: 0.65rem; color: var(--text-muted); font-style: italic; }

/* ----------------------------------------------------------
   L28. Code Review Comment (.code-review)
   GitHub PR-style inline annotation on code
   ---------------------------------------------------------- */
.code-review {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.cr-code-line {
  padding: 0.3rem 1rem;
  line-height: 1.3;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  background: var(--bg-code);
}
.cr-code-line.highlighted {
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid #f87171;
  padding-left: calc(1rem - 3px);
}
.cr-comment {
  padding: 0.75rem 1rem;
  background: rgba(96, 165, 250, 0.04);
  border-left: 3px solid #60a5fa;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.cr-avatar {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #60a5fa;
  flex-shrink: 0;
  font-weight: 700;
}
.cr-author { font-weight: 700; color: #60a5fa; font-size: 0.78rem; margin-bottom: 0.15rem; }
.cr-text { color: var(--text-secondary); }
.cr-suggestion {
  margin-top: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #34d399;
}

/* ----------------------------------------------------------
   L29. Pros/Cons Split (.pros-cons)
   ---------------------------------------------------------- */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}
.pros-col, .cons-col {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.pros-col { border-color: rgba(16, 185, 129, 0.2); }
.cons-col { border-color: rgba(239, 68, 68, 0.2); }
.pros-header, .cons-header {
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pros-header { background: rgba(16, 185, 129, 0.06); color: #34d399; }
.pros-header::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 0.35rem; font-size: 0.7rem; }
.cons-header { background: rgba(239, 68, 68, 0.06); color: #f87171; }
.cons-header::before { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 0.35rem; font-size: 0.7rem; }
.pros-list, .cons-list { list-style: none; margin: 0; padding: 0.5rem 0.85rem; }
.pros-list li, .cons-list li {
  padding: 0.25rem 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.pros-list li::before { content: '+'; color: #34d399; font-weight: 700; font-size: 0.9rem; }
.cons-list li::before { content: '\2212'; color: #f87171; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 600px) { .pros-cons { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------
   L30. Key Takeaway (.key-takeaway)
   ---------------------------------------------------------- */
.key-takeaway {
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(52, 211, 153, 0.02));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  position: relative;
}
.key-takeaway-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.key-takeaway-title::before {
  content: '\f005';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
}
.key-takeaway p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.65;
  font-weight: 500;
}

/* ----------------------------------------------------------
   L31. Enum Display (.enum-display)
   ---------------------------------------------------------- */
.enum-display {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1rem 0;
  font-family: var(--font-mono);
}
.enum-header {
  padding: 0.5rem 1rem;
  background: rgba(139, 92, 246, 0.06);
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.85rem;
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.enum-header::before {
  content: 'enum';
  font-size: 0.7rem;
  color: #c678dd;
  font-weight: 600;
}
.enum-values { padding: 0.35rem 0; }
.enum-value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  transition: background 0.15s;
}
.enum-value:hover { background: rgba(var(--accent-primary-rgb), 0.03); }
.enum-value-name { color: var(--text-primary); font-weight: 600; }
.enum-value-num {
  color: #d19a66;
  font-size: 0.75rem;
  margin-left: auto;
}
.enum-value-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================
   PREMIUM POLISH — Global hover/glow/transition upgrades
   Applied 2026-03-21
   ============================================================ */

/* --- Chat bubbles --- */
.chat-bubble { transition: box-shadow 0.25s, border-color 0.25s, background 0.25s, transform 0.2s; }
@media (hover:hover) {
  .chat-message--candidate .chat-bubble:hover { box-shadow: 0 4px 20px rgba(var(--accent-primary-rgb),0.12); border-color: rgba(var(--accent-primary-rgb),0.3); }
  .chat-message--interviewer .chat-bubble:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.1); }
}

/* --- API Viewer --- */
.api-viewer { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .api-viewer:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-primary-rgb),0.1); border-color: rgba(var(--accent-primary-rgb),0.2); }
}

/* --- Log entries --- */
.log-entry { transition: background 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .log-entry:hover { background: rgba(255,255,255,0.04); box-shadow: inset 3px 0 0 rgba(var(--accent-primary-rgb),0.4); }
}

/* --- Git diff lines --- */
.diff-line { transition: background 0.15s; }
@media (hover:hover) {
  .diff-line:hover { filter: brightness(1.15); }
}

/* --- Schema table --- */
.schema-table { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .schema-table:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 12px rgba(var(--accent-primary-rgb),0.08); border-color: rgba(var(--accent-primary-rgb),0.2); }
}

/* --- Cache sim entries --- */
.cache-sim-entry { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .cache-sim-entry:hover { transform: translateX(4px); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
}

/* --- Rate viz bucket --- */
.rate-viz-bucket { transition: box-shadow 0.2s; }
@media (hover:hover) {
  .rate-viz-bucket:hover { box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb),0.12); }
}

/* --- MQ viz --- */
.mq-viz { transition: box-shadow 0.25s; }
@media (hover:hover) {
  .mq-viz:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 12px rgba(var(--accent-primary-rgb),0.08); }
}
.mq-viz-msg { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .mq-viz-msg:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(var(--accent-primary-rgb),0.2); }
}

/* --- Shard map --- */
.shard { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .shard:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); border-color: rgba(var(--accent-primary-rgb),0.25); }
}

/* --- Cost calc rows --- */
.cost-calc tbody tr { transition: background 0.15s; }
@media (hover:hover) {
  .cost-calc tbody tr:hover { background: rgba(var(--accent-primary-rgb),0.04); }
}

/* --- Glossary panel items (hover handled in main block) --- */

/* --- Pattern card --- */
.pattern-card { transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s; }
@media (hover:hover) {
  .pattern-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 12px rgba(var(--accent-primary-rgb),0.1); border-color: rgba(var(--accent-primary-rgb),0.25); }
}

/* --- Decision card --- */
.decision-card { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .decision-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 12px rgba(var(--accent-primary-rgb),0.08); border-color: rgba(var(--accent-primary-rgb),0.2); }
}
.decision-option { transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
@media (hover:hover) {
  .decision-option:hover { border-color: rgba(var(--accent-primary-rgb),0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.2); transform: translateY(-1px); }
}

/* --- Rule card --- */
.rule-card { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .rule-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 8px rgba(var(--accent-primary-rgb),0.1); border-color: rgba(var(--accent-primary-rgb),0.2); }
}

/* --- Anti-pattern card --- */
.antipattern-card { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .antipattern-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 12px rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); }
}

/* --- Memory layout regions --- */
.mem-region { transition: box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .mem-region.stack:hover { box-shadow: 0 4px 20px rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.3); }
  .mem-region.heap:hover { box-shadow: 0 4px 20px rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.3); }
}

/* --- Call chain steps --- */
.call-step { transition: background 0.15s; }
@media (hover:hover) {
  .call-step:hover { background: rgba(var(--accent-primary-rgb),0.05); border-radius: var(--radius-sm); }
}

/* --- Responsibility card --- */
.resp-card { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .resp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: rgba(var(--accent-primary-rgb),0.3); }
}

/* --- Config diff panels --- */
.config-diff-before, .config-diff-after { transition: box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .config-diff-before:hover { box-shadow: 0 4px 16px rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
  .config-diff-after:hover { box-shadow: 0 4px 16px rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); }
}

/* --- Refactoring diff --- */
.refactor-before, .refactor-after { transition: box-shadow 0.2s, transform 0.15s; }
@media (hover:hover) {
  .refactor-before:hover { box-shadow: 0 4px 16px rgba(239,68,68,0.12); transform: translateY(-1px); }
  .refactor-after:hover { box-shadow: 0 4px 16px rgba(34,197,94,0.12); transform: translateY(-1px); }
}

/* --- Multi-file tabs (hover handled in main block) --- */

/* --- Learning progress segments --- */
.learning-progress-seg { transition: opacity 0.3s, transform 0.2s; }
@media (hover:hover) {
  .learning-progress:hover .learning-progress-seg--done { opacity: 0.9; }
  .learning-progress:hover .learning-progress-seg--current { transform: scaleY(1.3); }
}

/* --- Bloom filter bits --- */
.bloom-bit { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .bloom-bit:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 1; }
}

/* --- Consensus log entries --- */
.consensus-log-entry { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .consensus-log-entry:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 1; }
}

/* --- Connection pool slots --- */
.conn-slot { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .conn-slot:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 1; }
}

/* --- Cascade viz services --- */
.cascade-service { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .cascade-service:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
}

/* --- Service map boxes --- */
.service-box { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .service-box:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
}

/* --- Event timeline cards --- */
.event-card { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .event-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
}

/* --- CQRS boxes --- */
.cqrs-box { transition: border-color 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .cqrs-box:hover { border-color: rgba(var(--accent-primary-rgb),0.3); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
}

/* --- Compose viz services --- */
.compose-svc { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .compose-svc:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
}

/* --- Network topology hops --- */
.net-hop { transition: transform 0.2s; }
@media (hover:hover) {
  .net-hop:hover { transform: translateY(-3px); }
}

/* --- DNS trace steps --- */
.dns-step { transition: background 0.15s, transform 0.15s; }
@media (hover:hover) {
  .dns-step:hover { background: rgba(var(--accent-primary-rgb),0.05); transform: translateX(4px); }
}

/* --- HTTP lifecycle phases --- */
.http-phase { transition: transform 0.15s, filter 0.15s; }
@media (hover:hover) {
  .http-phase:hover { transform: scaleY(1.15); filter: brightness(1.15); z-index: 1; }
}

/* --- Retry attempt dots --- */
.retry-attempt-dot { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .retry-attempt-dot:hover { transform: scale(1.3); box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
}

/* --- A/B split groups --- */
.ab-group { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .ab-group:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
}

/* --- SLA calc rows --- */
.sla-calc tbody tr { transition: background 0.15s; }
@media (hover:hover) {
  .sla-calc tbody tr:hover { background: rgba(var(--accent-primary-rgb),0.05); }
}

/* --- Prereq items --- */
.prereq-item { transition: background 0.15s, transform 0.15s; }
@media (hover:hover) {
  .prereq-item:hover { background: rgba(var(--accent-primary-rgb),0.04); transform: translateX(4px); }
}

/* --- DI flow registrations --- */
.di-reg { transition: background 0.15s, transform 0.15s; }
@media (hover:hover) {
  .di-reg:hover { background: rgba(var(--accent-primary-rgb),0.06); transform: translateX(4px); }
}

/* --- Test case cards --- */
.test-card { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .test-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
}

/* --- Code evolution steps --- */
.code-evo-step { transition: box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .code-evo-step:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.3); border-color: rgba(var(--accent-primary-rgb),0.25); }
}

/* --- Pros/Cons columns --- */
.pros-col, .cons-col { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .pros-col:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,0.12); }
  .cons-col:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239,68,68,0.12); }
}

/* --- Key takeaway --- */
.key-takeaway { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .key-takeaway:hover { box-shadow: 0 6px 24px rgba(var(--accent-primary-rgb),0.12); border-color: rgba(var(--accent-primary-rgb),0.3); }
}

/* --- Enum display --- */
.enum-value { transition: background 0.15s; }
@media (hover:hover) {
  .enum-value:hover { background: rgba(var(--accent-primary-rgb),0.05); }
}

/* --- Interview tip --- */
.interview-tip { transition: box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .interview-tip:hover { box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb),0.1); border-color: rgba(var(--accent-primary-rgb),0.3); }
}

/* --- SOLID badges --- */
.solid-badge { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .solid-badge:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
}

/* --- Coupling meter bars --- */
.coupling-fill { transition: width 0.5s ease-out; }
.coupling-meter { transition: background 0.15s; }
@media (hover:hover) {
  .coupling-meter:hover { background: rgba(var(--accent-primary-rgb),0.03); }
}

/* --- Object lifecycle phases --- */
.ol-phase { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .ol-phase:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
}

/* --- Thread safety badges --- */
.ts-badge { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .ts-badge:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
}

/* --- Version compare columns --- */
.version-col { transition: box-shadow 0.2s, border-color 0.2s; }
@media (hover:hover) {
  .version-col:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.3); border-color: rgba(var(--accent-primary-rgb),0.25); }
}

/* --- Dep direction layers --- */
.dep-dir-layer { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .dep-dir-layer:hover { transform: translateX(6px); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
}

/* --- Comparison grid panels --- */
.comparison-panel { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .comparison-panel:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
}

/* --- Concept card --- */
.concept-card { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .concept-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 8px rgba(var(--accent-primary-rgb),0.1); border-color: rgba(var(--accent-primary-rgb),0.25); }
}

/* --- Before/After grid --- */
.before-panel, .after-panel { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover:hover) {
  .before-panel:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239,68,68,0.1); }
  .after-panel:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,0.1); }
}

/* --- Code review comment --- */
.cr-comment { transition: box-shadow 0.2s; }
@media (hover:hover) {
  .cr-comment:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
}

/* --- Capacity grid items --- */
.capacity-item { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .capacity-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
}

/* --- Scorecard rows --- */
.scorecard-row { transition: background 0.15s; }
@media (hover:hover) {
  .scorecard-row:hover { background: rgba(var(--accent-primary-rgb),0.04); }
}

/* --- Debug template steps --- */
.debug-step { transition: background 0.2s ease; border-radius: 8px; }
@media (hover:hover) {
  .debug-step:hover { background: rgba(255,255,255,0.02); }
}

/* --- Whatif card --- */
.whatif-card { transition: box-shadow 0.25s, border-color 0.25s; }
@media (hover:hover) {
  .whatif-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); }
}

/* --- Company card --- */
.company-card { transition: transform 0.2s, box-shadow 0.25s; }
@media (hover:hover) {
  .company-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 12px rgba(var(--accent-primary-rgb),0.08); }
}

/* --- Callout trap --- */
.callout-trap { transition: box-shadow 0.25s; }
@media (hover:hover) {
  .callout-trap:hover { box-shadow: 0 6px 24px rgba(239,68,68,0.1); }
}

/* --- Write amp outputs --- */
.write-amp-out { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .write-amp-out:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
}

/* --- Merkle tree nodes --- */
.merkle-node { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .merkle-node:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.35); z-index: 1; }
}

/* --- B+ tree nodes --- */
.btree-node { transition: transform 0.15s, box-shadow 0.15s; }
@media (hover:hover) {
  .btree-node:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.35); z-index: 1; }
}

/* --- Bandwidth estimator result --- */
.bw-result { transition: box-shadow 0.25s; }
@media (hover:hover) {
  .bw-result:hover { box-shadow: 0 4px 20px rgba(var(--accent-primary-rgb),0.15); }
}