/* ===========================================
   IoT Class Design Tokens
   ===========================================
   Single source of truth for all design values
   IEEE Professional Color Palette + Modern Typography
   =========================================== */

:root {
  /* ===== IEEE Professional Color Palette ===== */
  /* Primary Brand Colors */
  --ieee-navy: #2c3e50;
  --ieee-teal: #16a085;
  --ieee-orange: #e67e22;

  /* Semantic aliases */
  --color-primary: var(--ieee-navy);
  --color-secondary: var(--ieee-teal);
  --color-accent: var(--ieee-orange);

  /* Neutral Palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* ===== Typography Scale ===== */
  /* Base: 16px (1rem) - Modern 8pt grid aligned */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  /* Font Families */
  --font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-family-heading: var(--font-family-base);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ===== Spacing Scale (8pt grid) ===== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */

  /* ===== Border Radius ===== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px; /* Pills/circles */

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== Touch Targets (WCAG 2.1 AA) ===== */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-target-large: 56px;

  /* ===== Focus States ===== */
  --focus-ring-color: rgba(59, 130, 246, 0.5);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ===== Legacy Compatibility ===== */
  --primary-blue: var(--ieee-navy);
  --primary-dark: #1a252f;
  --accent-purple: #845ec2;
  --gradient-primary: linear-gradient(135deg, var(--ieee-navy) 0%, var(--ieee-teal) 100%);
  --gradient-dark: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
  --gradient-accent: linear-gradient(135deg, var(--ieee-teal) 0%, var(--ieee-orange) 100%);
}

/* ===== FOUC Prevention & Component Placeholders ===== */
/* Moved from per-module _quarto.yml <style> blocks to single source of truth */
#quarto-sidebar .sidebar-item a {
  transition: none !important;
}
iot-knowledge-check:not(:defined),
iot-matching-quiz:not(:defined),
iot-ordering-quiz:not(:defined),
iot-label-quiz:not(:defined),
iot-code-quiz:not(:defined),
iot-video:not(:defined),
iot-simulator:not(:defined),
iot-animation:not(:defined) {
  display: block;
  min-height: 100px;
  background: #f5f5f5;
  border-radius: 8px;
}

iot-knowledge-check,
iot-matching-quiz,
iot-ordering-quiz,
iot-label-quiz,
iot-code-quiz,
iot-video,
iot-simulator,
iot-animation,
.inline-knowledge-check,
.iot-quiz-matching,
.iot-quiz-ordering,
.iot-quiz-label,
.iot-quiz-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Display outputs should fill the available width instead of inheriting console-output chrome. */
.cell-output.cell-output-display {
  background: transparent;
  border-left: 0;
  padding: 0;
  margin: 1rem 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
}

/* Quarto wraps OJS outputs in anonymous divs that otherwise shrink to min-content. */
.cell-output.cell-output-display > div,
.cell-output.cell-output-display > div > [id^="ojs-cell-"],
.cell-output.cell-output-display .observablehq,
.cell-output.cell-output-display .observablehq--block,
.cell-output.cell-output-display .observablehq > form[class^="oi-"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* OJS controls need more room than Quarto's default 120px labels. */
.observablehq > form[class^="oi-"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.observablehq > form[class^="oi-"] > label {
  flex: 1 1 clamp(10rem, 20vw, 15rem);
  width: auto !important;
  max-width: 100%;
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.observablehq > form[class^="oi-"] > div[class$="-input"] {
  flex: 1 1 12rem;
  min-width: min(12rem, 100%);
  max-width: 100%;
}

.observablehq > form[class^="oi-"] input[type="range"],
.observablehq > form[class^="oi-"] select {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 700px) {
  .observablehq > form[class^="oi-"] {
    flex-direction: column;
  }

  .observablehq > form[class^="oi-"] > label,
  .observablehq > form[class^="oi-"] > div[class$="-input"] {
    width: 100% !important;
    flex-basis: auto;
    min-width: 0;
  }
}

/* ===== Landing Page: Book Grid & Hero ===== */
/* Moved from root _quarto.yml <style> block to single source of truth */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}
.book-card {
  border-radius: 12px;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  border-left: 5px solid var(--book-color, #2c3e50);
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.book-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--book-color, #2c3e50);
}
.book-card p {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 0.95rem;
}
.book-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #888;
}
.book-card .btn {
  background: var(--book-color, #2c3e50);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}
.book-card .btn:hover {
  opacity: 0.9;
}
.hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #2c3e50 0%, #16a085 100%);
  color: white;
  margin: -1rem -1rem 2rem -1rem;
  border-radius: 0 0 20px 20px;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}
.stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}
.stat {
  text-align: center;
}
.hero .stat-value {
  font-size: 2rem;
  font-weight: bold;
}
.hero .stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ===== Global Resets ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navigation links - no underline by default */
nav a,
.nav-link,
.sidebar a,
.breadcrumb a {
  text-decoration: none;
}

nav a:hover,
.nav-link:hover,
.sidebar a:hover,
.breadcrumb a:hover {
  text-decoration: none;
  color: var(--color-secondary);
}

/* =============================================
   IoT Class - Consolidated Theme
   Merged from: styles.css, components.css,
   educational-components.css, sidebar-optimizer.css,
   iot-simulator.css
   ============================================= */

/* ===== Skip Link (keyboard accessibility) ===== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #2c3e50;
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: bold;
}
.skip-link:focus {
  top: 0;
}

/* --- Section: Modern Theme (was styles.css) --- */

/*------------------------------------------------------------------------------
  IoT Class - Modern Tier-Based Theme
  Adapted from AI for Sensor Data Playbook styling principles
  12 Parts organized by learning tier with gradient color scheme
------------------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Code+Pro:wght@400;500&display=swap");

:root {
  /* Primary Palette - IoT Theme */
  --iot-midnight: #2c3e50;
  --iot-navy: #2e5cb8;
  --iot-ocean: #3498db;
  --iot-azure: #2e5cb8;
  --iot-sky: #00a3b4;
  --iot-electric: #00b878;
  --iot-mint: #27ae60;

  /* Neutral Palette */
  --iot-sand: #f5f5f5;
  --iot-cloud: #ececec;
  --iot-mist: #e0e0e0;
  --iot-foam: #ffffff;
  --iot-border: #bdbdbd;
  --iot-border-light: rgba(189, 189, 189, 0.5);
  --iot-muted: #757575;
  --iot-text-dark: #2c3e50;

  /* Accent Colors */
  --iot-accent-warning: #f7ca18;
  --iot-accent-error: #e74c3c;

  /* Effects */
  --iot-highlight: rgba(46, 92, 184, 0.12);
  --iot-shadow-md: 0 8px 24px rgba(44, 62, 80, 0.1);
  --iot-shadow-lg: 0 16px 48px rgba(44, 62, 80, 0.14);
  --iot-shadow-xl: 0 24px 64px rgba(44, 62, 80, 0.18);

  /* Gradients */
  --gradient-tech: linear-gradient(135deg, #2980b9 0%, #2e5cb8 35%, #00a3b4 65%, #27ae60 100%);
  --gradient-sky: linear-gradient(135deg, #00a3b4 0%, #27ae60 100%);
  --gradient-subtle: linear-gradient(
    135deg,
    rgba(46, 92, 184, 0.05) 0%,
    rgba(0, 163, 180, 0.05) 100%
  );

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family:
    "Source Sans 3",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--iot-text-dark);
  background: var(--iot-sand);
  margin: 0;
  padding: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main.content {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

#quarto-content {
  background: transparent;
  padding: 2rem 1rem 2.5rem;
  gap: 0.5rem;
  max-width: 100%;
}

.page-columns {
  max-width: 100%;
  gap: 0.5rem;
}

main.content > *:first-child {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--iot-midnight);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

h1 {
  font-size: 2.75rem;
  background: var(--gradient-subtle);
  border-left: 5px solid var(--iot-azure);
  border-bottom: 2px solid var(--iot-border-light);
  padding: 0.75rem 1.25rem 0.75rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  transition: border-left-color var(--transition-base);
}

h1:hover {
  border-left-color: var(--iot-electric);
}

h2 {
  font-size: 2.1rem;
  border-bottom: 2px solid var(--iot-mist);
  padding-bottom: 0.6rem;
  margin-top: 2.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  transition: color var(--transition-base);
}

h2::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-sky);
  border-radius: 2px;
}

h3 {
  font-size: 1.65rem;
  color: var(--iot-ocean);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--iot-sky);
  transition: all var(--transition-base);
}

h3:hover {
  color: var(--iot-azure);
  border-left-color: var(--iot-electric);
}

h4 {
  font-size: 1.35rem;
  color: var(--iot-navy);
  margin-top: 1.75rem;
  margin-bottom: 0.85rem;
}

/* Title block - minimal single colored bar */
#title-block-header.quarto-title-block {
  position: relative;
  background: var(--pc-main, var(--iot-azure));
  border-radius: 6px;
  border: none;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: none;
  overflow: hidden;
}

#title-block-header.quarto-title-block:hover {
  transform: none;
  box-shadow: none;
}

/* Remove all decorative elements */
#title-block-header.quarto-title-block::before,
#title-block-header.quarto-title-block::after {
  display: none;
}

/* Remove ALL borders from nested elements inside title block */
#title-block-header *,
#title-block-header *::before,
#title-block-header *::after {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Hide breadcrumbs in title block */
#title-block-header .quarto-title-breadcrumbs,
#title-block-header nav.quarto-title-breadcrumbs,
.quarto-title-breadcrumbs {
  display: none !important;
}

/* Title - white text on colored bar */
#title-block-header.quarto-title-block .title,
body #title-block-header .title {
  font-size: 1.4rem;
  color: #ffffff !important;
  margin: 0;
  padding: 0;
  border-bottom: none;
  line-height: 1.35;
  font-weight: 600;
}

/* Chapter number link in title - also white */
#title-block-header .title a,
#title-block-header .title .chapter-number,
#title-block-header .title a.chapter-number,
body #title-block-header .title a {
  color: #ffffff !important;
  text-decoration: none;
}

/* Hide subtitle, meta info */
#title-block-header.quarto-title-block .subtitle,
body #title-block-header .subtitle,
#title-block-header .quarto-title-meta,
#title-block-header .quarto-title-meta-author,
#title-block-header .quarto-title-meta-heading,
#title-block-header .quarto-title-meta-contents {
  display: none;
}

/* Navigation — hide Quarto's default header bars visually; module bar replaces them.
   Use clip instead of display:none so Quarto's sidebar toggle + search JS still work. */
#quarto-header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.quarto-secondary-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--iot-border-light);
  box-shadow: var(--iot-shadow-md);
  transition: box-shadow var(--transition-base);
}

.quarto-secondary-nav:hover {
  box-shadow: var(--iot-shadow-lg);
}

.quarto-secondary-nav .btn {
  color: var(--iot-midnight);
  transition: all var(--transition-base);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
}

.quarto-secondary-nav .btn:hover {
  color: var(--iot-azure);
  background: var(--iot-highlight);
}

/* Sidebar */
#quarto-sidebar {
  background: rgba(255, 255, 255, 0.97);
  border-right: 1px solid var(--iot-border-light);
  box-shadow: var(--iot-shadow-md);
  padding: 0.4rem 0.75rem 1rem 0.75rem;
  /* Ensure adequate width for chapter navigation */
  min-width: 280px;
  width: var(--bs-sidebar-width, 300px);
}

body.nav-sidebar .sidebar-navigation {
  overflow: visible !important;
  max-height: none;
}

body.nav-sidebar .sidebar-menu-container {
  max-height: none;
}

body.nav-sidebar .sidebar {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

body.nav-sidebar #quarto-sidebar {
  max-height: none !important;
  height: max-content !important;
  min-height: 0;
}

/* ==========================================
   SIDEBAR WIDTH FIX FOR MODULE PAGES
   Ensure sidebar has adequate width on all pages
   ========================================== */

/* Left sidebar - enforce minimum 280px width */
#quarto-sidebar,
.sidebar.sidebar-navigation,
nav.quarto-secondary-nav-title ~ #quarto-sidebar,
body.quarto-book #quarto-sidebar {
  min-width: 280px !important;
  flex-shrink: 0;
}

/* Let Quarto handle grid - don't override */
/* Grid settings come from _quarto.yml */

/* When margin sidebar is hidden, use two-column layout */
body.quarto-book .page-columns:not(:has(#quarto-margin-sidebar)) {
  grid-template-columns: minmax(280px, 300px) 1fr;
}

/* Ensure sidebar column doesn't shrink below minimum */
body.quarto-book #quarto-sidebar-glass-pane + .sidebar-menu-container,
body.quarto-book .sidebar-menu-container {
  width: 100%;
  min-width: 260px;
}

#quarto-sidebar .sidebar-title {
  font-weight: 700;
  color: var(--iot-midnight);
  letter-spacing: 0.02em;
  padding: 0.2rem 0.4rem;
  background: none;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 0.8rem;
  flex: 1;
  min-width: 0;
}

/* ==========================================
   COMPACT SIDEBAR STYLING FOR 200+ CHAPTERS
   ========================================== */

#quarto-sidebar .sidebar-item {
  margin: 0.05rem 0;
}

/* Make items more compact for better navigation with 200+ chapters */
#quarto-sidebar .sidebar-item-container {
  min-height: auto;
  padding: 0;
}

/* Force no capitalization on chapter links - increased specificity */
body #quarto-sidebar .sidebar-item a .sidebar-item-text,
body.quarto-document #quarto-sidebar .sidebar-item a .sidebar-item-text,
body .sidebar nav .sidebar-item a,
body .sidebar-item-text,
#quarto-sidebar .sidebar-item-text {
  text-transform: none;
}

#quarto-sidebar .sidebar-item a {
  color: var(--iot-text-dark);
  font-weight: 500;
  padding: 0.28rem 0.5rem;
  display: block;
  border-radius: 4px;
  transition: all var(--transition-fast);
  border-left: 2px solid transparent;
  font-size: 0.76rem;
  line-height: 1.25;
  text-transform: none;
}

#quarto-sidebar .sidebar-item a .sidebar-item-text,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-text {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hover will be handled by JavaScript for part-specific colors */
#quarto-sidebar .sidebar-item a:hover {
  transform: translateX(2px);
}

/* Active chapter - fallback style, JS will override with part color */
#quarto-sidebar .sidebar-item a.active {
  font-weight: 600;
}

#quarto-sidebar .sidebar-search {
  margin: 0.3rem 0 0.4rem;
}

/* Margin sidebar (Right TOC) - Clean base styling */
#quarto-margin-sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 1rem 0.5rem 0.5rem !important;
  overflow: visible;
}

#quarto-margin-sidebar:hover {
  box-shadow: none !important;
}

#TOC {
  position: sticky;
  top: 5rem;
  width: 100%;
}

#TOC .toc-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--iot-muted);
  margin-bottom: 0.75rem;
  font-weight: 600;
  padding-bottom: 0;
  border-bottom: none;
}

#TOC nav {
  font-size: 0.85rem;
  width: 100%;
}

#TOC ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

#TOC li {
  margin: 0;
  line-height: 1.25;
}

#TOC a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--iot-text-dark);
  transition: all var(--transition-base);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  line-height: 1.2;
  font-size: 0.85rem;
  width: 100%;
  text-decoration: none;
  white-space: normal;
}

#TOC a:hover {
  color: var(--iot-azure);
  background: var(--iot-highlight);
  font-weight: 600;
}

#TOC a.active {
  color: var(--iot-azure);
  font-weight: 700;
  position: relative;
}

#TOC a.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: var(--iot-azure);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--iot-azure);
}

#TOC a .header-section-number {
  font-weight: 600;
  min-width: 2.1rem;
  text-align: right;
  color: var(--iot-muted);
}

#TOC a .toc-short-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

/* Links */
a {
  color: var(--iot-azure);
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
}

a:hover,
a:focus {
  color: var(--iot-ocean);
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-sky);
  animation: linkUnderline 0.3s ease-out;
}

@keyframes linkUnderline {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

a:visited {
  color: var(--iot-navy);
}

/* Code and pre */
code,
pre {
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, "DejaVu Sans Mono", monospace;
  font-size: 0.95rem;
}

code {
  background: var(--iot-cloud);
  color: var(--iot-midnight);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--iot-border-light);
  font-weight: 500;
  transition: all var(--transition-fast);
}

code:hover {
  background: var(--iot-mist);
  border-color: var(--iot-border);
}

pre {
  background: var(--iot-cloud);
  border-left: 4px solid var(--iot-azure);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  overflow-x: auto;
  max-width: 100%;
  margin: 2rem 0;
  box-shadow: var(--iot-shadow-md);
  position: relative;
  transition: all var(--transition-base);
}

pre:hover {
  box-shadow: var(--iot-shadow-lg);
  border-left-color: var(--iot-electric);
}

pre::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.03));
  pointer-events: none;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.9rem;
}

.code-fold-btn,
.code-tools-button {
  background: var(--iot-azure);
  color: var(--iot-foam);
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.code-fold-btn:hover,
.code-tools-button:hover {
  background: var(--iot-electric);
}

/* Tables */
table {
  width: 100%;
  margin: 2.5rem 0;
  border-collapse: collapse;
  background: var(--iot-foam);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--iot-shadow-md);
  border: 1px solid var(--iot-border-light);
  transition: box-shadow var(--transition-base);
}

table:hover {
  box-shadow: var(--iot-shadow-lg);
}

table code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

thead {
  background: var(--gradient-tech);
  color: var(--iot-foam);
  position: relative;
}

thead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-sky);
}

thead th {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-align: left;
}

tbody td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--iot-mist);
  font-size: 0.95rem;
  transition: background-color var(--transition-fast);
}

tbody tr:nth-child(even) {
  background: var(--iot-sand);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--iot-highlight);
}

tbody tr:hover td {
  color: var(--iot-midnight);
}

/* Callouts */
div.callout {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  border-left: 5px solid;
  border-radius: 14px;
  background: var(--iot-foam);
  box-shadow: var(--iot-shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

div.callout::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}

div.callout:hover {
  box-shadow: var(--iot-shadow-lg);
  transform: translateY(-2px);
}

div.callout-note {
  border-left-color: var(--iot-azure);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
}

div.callout-note::before {
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent);
}

div.callout-tip {
  border-left-color: var(--iot-mint);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
}

div.callout-tip::before {
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.15), transparent);
}

div.callout-warning {
  border-left-color: var(--iot-accent-warning);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
}

div.callout-warning::before {
  background: radial-gradient(circle at top right, rgba(234, 179, 8, 0.15), transparent);
}

div.callout-important,
div.callout-caution {
  border-left-color: var(--iot-accent-error);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
}

div.callout-important::before,
div.callout-caution::before {
  background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.15), transparent);
}

.callout-title {
  font-weight: 700;
  color: var(--iot-midnight);
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Blockquotes */
blockquote {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem 1.75rem 2.25rem;
  border-left: 5px solid var(--iot-electric);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(6, 182, 212, 0.02));
  border-radius: 14px;
  color: var(--iot-text-dark);
  font-style: italic;
  box-shadow: var(--iot-shadow-md);
  position: relative;
  transition: all var(--transition-base);
}

blockquote:hover {
  box-shadow: var(--iot-shadow-lg);
  transform: translateX(4px);
  border-left-color: var(--iot-mint);
}

blockquote::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  color: var(--iot-electric);
  opacity: 0.2;
  font-style: normal;
  line-height: 1;
}

blockquote p {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Figures */
figure {
  margin: 3rem 0;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: var(--iot-shadow-lg);
  transition: all var(--transition-slow);
  border: 1px solid var(--iot-border-light);
}

/* Generated figures - preserve aspect ratio */
.cell-output-display img,
.quarto-figure img,
figure.quarto-float img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

img:hover {
  box-shadow: var(--iot-shadow-xl);
  transform: scale(1.02);
}

figcaption {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--iot-muted);
  font-style: italic;
  padding: 0.5rem 1rem;
  background: var(--iot-sand);
  border-radius: 8px;
  display: inline-block;
}

/* ==========================================
   PART HEADERS IN SIDEBAR - COMPACT
   Uses --pc-main from part-colors JS system
   ========================================== */

.sidebar-item.sidebar-item-section {
  margin-top: 0.6rem;
  margin-bottom: 0.25rem;
}

/* Part header container - unified bar layout */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container {
  display: flex;
  align-items: center;
  background: var(--pc-main, #2c3e50);
  border-radius: 5px;
  overflow: hidden;
  transition: all var(--transition-fast);
}

/* Part header text - uses module's assigned color */
/* Using #quarto-sidebar prefix for higher specificity to override link color rules */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-text,
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  border-radius: 0;
  display: block;
  flex: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  /* No separate background - container handles it */
  background: transparent;
  color: var(--pc-text, #ffffff);
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

/* Part div inside (contains the part name) */
.sidebar-item.sidebar-item-section .part {
  font-weight: 700;
  color: inherit;
}

/* Toggle button - unified with container */
#quarto-sidebar .sidebar-item.sidebar-item-section .sidebar-item-toggle {
  padding: 0.4rem 0.5rem;
  background: transparent;
  color: var(--pc-text, #ffffff);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover state for part headers - apply to container */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   CHAPTER ITEMS - STYLED BY JAVASCRIPT
   JavaScript handles all part-specific colors
   ========================================== */

/* Nested chapters under parts */
ul.sidebar-section {
  margin-top: 0.25rem;
  padding-left: 0.5rem;
}

ul.sidebar-section li.sidebar-item {
  margin: 0.05rem 0;
}

/* Base chapter link styling - JS will apply colors */
/* Increased specificity to avoid !important */
body ul.sidebar-section .sidebar-item a,
#quarto-sidebar ul.sidebar-section .sidebar-item a {
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.25rem 0.45rem;
  border-left: 2px solid transparent;
  color: #2c3e50;
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: block;
}

/* Mermaid diagram styling */
.mermaid {
  font-size: 16px !important;
  background: var(--iot-foam);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--iot-shadow-md);
  margin: 2rem 0;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  min-height: 300px;
}

.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .label,
.mermaid text {
  font-size: 14px !important;
  font-family:
    "Source Sans 3",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  fill: var(--iot-text-dark) !important;
}

.mermaid .cluster-label text,
.mermaid .cluster text {
  font-size: 16px !important;
  font-weight: 600 !important;
  fill: var(--iot-midnight) !important;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  fill: var(--iot-cloud) !important;
  stroke: var(--iot-azure) !important;
  stroke-width: 2px !important;
}

.mermaid .cluster rect {
  fill: var(--iot-sand) !important;
  stroke: var(--iot-border) !important;
  stroke-width: 1px !important;
  rx: 8px;
  ry: 8px;
}

.mermaid .edgePath .path {
  stroke: var(--iot-navy) !important;
  stroke-width: 2px !important;
}

.mermaid .arrowheadPath {
  fill: var(--iot-navy) !important;
}

/* Responsive tweaks */
@media (max-width: 1200px) {
  #quarto-content {
    padding: 2.25rem 1.5rem 3rem;
    gap: 1rem;
  }

  #title-block-header.quarto-title-block {
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 992px) {
  #quarto-content {
    padding: 2rem 1.5rem 2.75rem;
  }

  #quarto-margin-sidebar {
    position: static;
    margin-top: 1rem;
    padding: 0.5rem 0.25rem;
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
  }

  #quarto-sidebar {
    box-shadow: none;
    padding: 0.75rem 0.5rem;
    /* Maintain minimum width even on medium screens when sidebar is visible */
    min-width: 260px !important;
  }

  .sidebar-item.sidebar-item-section > .sidebar-item-text,
  .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    /* Inherit module color from base styles */
  }

  /* Book layout on medium screens - stack TOC below content */
  body.quarto-book .page-columns {
    grid-template-columns: minmax(260px, 280px) 1fr;
  }
}

/* Large screens - ensure proper three-column layout */
@media (min-width: 1200px) {
  /* Enforce sidebar widths on large screens */
  #quarto-sidebar {
    min-width: 280px;
    width: 300px;
    max-width: 320px;
    flex-shrink: 0;
  }

  #quarto-margin-sidebar {
    min-width: 330px;
    width: clamp(330px, 30vw, 420px);
  }

  /* Three-column grid for book pages */
  body.quarto-book .page-columns {
    display: grid;
    grid-template-columns: 300px 1fr minmax(330px, 420px);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  #quarto-content {
    padding: 1.65rem 1.25rem 2.5rem;
  }

  #title-block-header.quarto-title-block {
    padding: 0.5rem 0.85rem;
  }

  #title-block-header.quarto-title-block .title,
  body #title-block-header .title {
    font-size: 1.2rem;
  }

  .sidebar-item.sidebar-item-section > .sidebar-item-text,
  .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
    font-size: 0.68rem;
    padding: 0.3rem 0.45rem;
    letter-spacing: 0.04em;
    /* Inherit module color from base styles */
  }

  ul.sidebar-section .sidebar-item a {
    font-size: 0.72rem;
    padding: 0.22rem 0.4rem;
  }

  #quarto-margin-sidebar {
    padding: 1rem 0.85rem;
  }

  #TOC .toc-title {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  #TOC a {
    font-size: 0.82rem;
  }

  #TOC li {
    margin-bottom: 0.3rem;
  }
}

/* Lists */
ul,
ol {
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.35rem;
}

/* Selection / focus */
::selection {
  background: rgba(59, 130, 246, 0.35);
  color: var(--iot-midnight);
}

:focus-visible {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: 3px;
}

/* Print styles */
@media print {
  body {
    background: white;
  }

  .quarto-secondary-nav,
  #quarto-sidebar,
  #quarto-margin-sidebar,
  .nav-footer {
    display: none;
  }

  #quarto-content {
    max-width: 100%;
  }
}

/* --- Section: Components (was components.css) --- */

/*-- scss:rules --*/

/*=====================================
  COMPONENT STYLES
  Code blocks, callouts, tables, images, nav
=====================================*/

/* ===== CODE BLOCKS ===== */
.sourceCode,
pre.sourceCode {
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 204, 0.15);
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow-x: auto;
}

pre {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

code {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 0.9em;
}

/* Inline code */
p code,
li code {
  background: rgba(0, 102, 204, 0.08);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  color: var(--primary-dark);
  font-size: 0.875em;
  border: 1px solid rgba(0, 102, 204, 0.15);
}

/* Code language badge */
div.sourceCode::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--primary-blue);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-family-base);
}

div.sourceCode[data-lang="python"]::before {
  content: "Python";
  background: #3776ab;
}
div.sourceCode[data-lang="javascript"]::before {
  content: "JavaScript";
  background: #f7df1e;
  color: #000;
}
div.sourceCode[data-lang="bash"]::before {
  content: "Bash";
  background: #4eaa25;
}
div.sourceCode[data-lang="json"]::before {
  content: "JSON";
  background: #000000;
}
div.sourceCode[data-lang="yaml"]::before {
  content: "YAML";
  background: #cb171e;
}

/* Code block output */
.cell-output:not(.cell-output-display) {
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
  border-left: 4px solid var(--success);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
}

/* ===== CALLOUT BOXES - Clean nbdev-inspired design ===== */
.callout {
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border: 1px solid;
  border-left-width: 3px;
  background: #ffffff;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}

.callout:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* Collapsible callouts - smooth transitions */
.callout.callout-collapse {
  overflow: hidden;
}

.callout.callout-collapse .callout-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.callout.callout-collapse .callout-title::after {
  content: "▼";
  font-size: 0.75em;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.callout.callout-collapse.collapsed .callout-title::after {
  transform: rotate(-90deg);
}

.callout.callout-collapse .callout-body-container {
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;
  overflow: hidden;
}

/* "For Beginners" specific styling */
.callout-tip[data-title*="Beginners"],
.callout-tip[data-title*="beginner"] {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #bbf7d0;
  border-left-color: #10b981;
}

.callout-tip[data-title*="Beginners"] .callout-title,
.callout-tip[data-title*="beginner"] .callout-title {
  color: #047857;
  font-weight: 600;
}

/* Note - Blue theme */
.callout-note {
  background: #f0f9ff;
  border-color: #e0f2fe;
  border-left-color: #38bdf8;
}

.callout-note .callout-title {
  color: #0369a1;
}

/* Tip - Green theme */
.callout-tip {
  background: #f0fdf4;
  border-color: #dcfce7;
  border-left-color: #22c55e;
}

.callout-tip .callout-title {
  color: #15803d;
}

/* Warning - Amber theme */
.callout-warning {
  background: #fffbeb;
  border-color: #fef3c7;
  border-left-color: #f59e0b;
}

.callout-warning .callout-title {
  color: #b45309;
}

/* Important/Caution - Rose theme */
.callout-important,
.callout-caution {
  background: #fff1f2;
  border-color: #ffe4e6;
  border-left-color: #f43f5e;
}

.callout-important .callout-title,
.callout-caution .callout-title {
  color: #be123c;
}

/* Callout title styling */
.callout-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

/* Callout body */
.callout-body {
  color: #374151;
  line-height: 1.7;
  font-size: 0.9375rem;
}

.callout-body p {
  margin: 0.5rem 0;
}

.callout-body p:first-child {
  margin-top: 0;
}

.callout-body p:last-child {
  margin-bottom: 0;
}

.callout-body ul,
.callout-body ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.callout-body li {
  margin: 0.375rem 0;
}

/* Code blocks within callouts */
.callout-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.875em;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.callout-body pre {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1rem;
  margin: 0.75rem 0;
  overflow-x: auto;
}

/* ===== TABLES ===== */
table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.95rem;
}

thead {
  background: var(--gradient-dark);
  color: white;
}

thead th {
  padding: 1rem 1.25rem;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

tbody tr {
  background: white;
  transition: all 0.2s ease;
}

tbody tr:nth-child(even) {
  background: var(--gray-50);
}

tbody tr:hover {
  background: rgba(0, 102, 204, 0.05);
  transform: scale(1.01);
}

tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Compact tables */
table.compact {
  font-size: 0.875rem;
}

table.compact th,
table.compact td {
  padding: 0.75rem 1rem;
}

/* ===== IMAGES & FIGURES ===== */
figure {
  margin: 2.5rem 0;
  text-align: center;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}

figure img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

figcaption,
.figure-caption {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  font-style: italic;
  text-align: center;
}

/* ===== BLOCKQUOTES ===== */
blockquote {
  background: linear-gradient(135deg, rgba(132, 94, 194, 0.05) 0%, rgba(0, 102, 204, 0.05) 100%);
  border-left: 4px solid var(--accent-purple);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-style: italic;
  color: var(--gray-700);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ===== LISTS ===== */
ul,
ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

li {
  margin: 0.5rem 0;
  line-height: 1.7;
}

ul li::marker {
  color: var(--primary-blue);
}

ol li::marker {
  color: var(--primary-blue);
  font-weight: 600;
}

/* ===== SIDEBAR & NAVIGATION ===== */
.sidebar {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-right: 1px solid var(--gray-200);
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  padding: 1rem;
  margin-bottom: 0.5rem;
}

/* Remove panel styling from sidebar header/logo area - make header blend with sidebar */
.sidebar-logo,
#quarto-sidebar .sidebar-logo,
.sidebar-header,
#quarto-sidebar .sidebar-header,
.sidebar-header-stacked,
#quarto-sidebar .sidebar-header-stacked,
#quarto-sidebar > nav > div:first-child {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0.25rem !important;
  margin: 0 !important;
}

/* Override Bootstrap spacing on sidebar header */
#quarto-sidebar .sidebar-header.pt-lg-2 {
  padding-top: 0 !important;
}
#quarto-sidebar .sidebar-header.mt-2,
#quarto-sidebar .mt-2.flex-shrink-0 {
  margin-top: 0.15rem !important;
}

/* Override Quarto sidebar-header wrapper padding */
#quarto-sidebar .quarto-sidebar-header,
#quarto-sidebar > div {
  padding: 0 !important;
}

/* Make entire sidebar uniform - no panel effect */
#quarto-sidebar,
.sidebar-navigation,
#quarto-sidebar .sidebar-navigation,
nav.sidebar,
.sidebar.collapse.show {
  background: white !important;
}

img.sidebar-logo,
.sidebar-logo img,
.sidebar .sidebar-logo img,
#quarto-sidebar img.sidebar-logo {
  max-width: 56px !important;
  width: 56px !important;
  height: auto !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Hide dark-mode logo variant — project uses light theme only.
   Quarto generates both light-content and dark-content img tags but
   does not include CSS to hide the inactive variant for single-theme builds. */
.sidebar-logo.dark-content {
  display: none !important;
}

/* Remove card/panel effects from sidebar title block */
.sidebar-title,
.sidebar-title-block,
#quarto-sidebar .sidebar-title,
#quarto-sidebar .sidebar-title-block,
.sidebar nav > div:first-child,
#quarto-sidebar nav > div:first-child,
.sidebar-title a,
#quarto-sidebar .sidebar-title a,
.sidebar-logo-link,
#quarto-sidebar .sidebar-logo-link {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Sidebar header: logo + title side-by-side */
#quarto-sidebar .sidebar-header-stacked,
#quarto-sidebar .sidebar-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem;
  flex-wrap: nowrap !important;
}

/* Keep sidebar logo link compact */
.sidebar-logo-link {
  min-height: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

/* Tools inline after title text */
#quarto-sidebar .sidebar-tools-main {
  display: inline-flex !important;
  gap: 0.15rem;
  margin: 0;
  vertical-align: middle;
}
#quarto-sidebar .sidebar-tools-main .quarto-navigation-tool {
  font-size: 0.75rem;
  padding: 0.1rem !important;
}

/* Hide sidebar header elements — replaced by module info bar */
#quarto-sidebar .quarto-sidebar-header,
#quarto-sidebar .sidebar-header-stacked,
#quarto-sidebar .sidebar-header,
#quarto-sidebar .sidebar-logo-link {
  display: none !important;
}

/* Sidebar Part Title - Shows module/part name at top of sidebar */
#quarto-sidebar .quarto-sidebar-header:has(.sidebar-part-title) {
  display: block !important;
}
.sidebar-part-title {
  display: block !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  background: var(--pc-main, #2c3e50) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Navbar "← All Modules" link - white in header bar, always visible */
/* Note: font-weight: 700 causes brownish color rendering on green background */
/* Use same styling as .navbar-brand for consistent white appearance */
/* Include :visited to override global a:visited rule */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link:visited,
.navbar .navbar-nav .nav-link .menu-text,
.navbar .navbar-nav .nav-link:visited .menu-text,
.navbar .navbar-nav .nav-link span,
.navbar .navbar-nav .nav-link:visited span {
  color: #ccd1d5 !important; /* Same as navbar-brand: rgb(204, 209, 213) */
  font-weight: 500 !important; /* Medium weight - 700 causes color rendering issues */
  text-decoration: none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover .menu-text,
.navbar .navbar-nav .nav-link:hover span {
  color: #ffffff !important;
  text-decoration: none;
}
/* Make the navbar itself have the module color */
.navbar {
  background-color: var(--pc-main, #2c3e50) !important;
}
/* Always show navbar items (don't collapse into hamburger) */
.navbar .navbar-collapse {
  display: flex !important;
  flex-basis: auto !important;
}
.navbar .navbar-nav {
  flex-direction: row !important;
}
/* Hide hamburger menu toggle on all screens */
.navbar .navbar-toggler {
  display: none !important;
}
/* Position "← All Modules" link before the title */
.navbar .navbar-nav.me-auto {
  order: -1;
  margin-right: 1rem !important;
}

/* Keep old book-nav-header styles for backwards compatibility with stale HTML */
.book-nav-header {
  display: block !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  background: var(--pc-main, #2c3e50) !important;
}
.book-nav-header p {
  margin: 0 !important;
}
.book-nav-header a {
  color: #ffffff !important;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.book-nav-header a:hover {
  color: #e0e0e0 !important;
  text-decoration: none;
}

/* Remove any panel styling from sidebar tools */
.sidebar-tools-main,
#quarto-sidebar .sidebar-tools-main,
.quarto-navigation-tool {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.sidebar-navigation a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  margin: 0 0.25rem;
  transition: all 0.2s ease;
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
}

.sidebar-navigation a:hover {
  background: rgba(0, 102, 204, 0.08);
  color: var(--primary-blue);
  transform: translateX(4px);
}

.sidebar-navigation a.active {
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* ===== PART HEADERS - Color-coded by section ===== */
.part {
  color: white;
  padding: 0.85rem 1.35rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1.2rem 0.3rem 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  border-left: 6px solid rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Add subtle gradient overlay for depth */
.part::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

.part:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateX(5px) scale(1.02);
  letter-spacing: 0.12em;
}

/* Hide chapter numbers for legal pages everywhere */
/* Sidebar */
.sidebar-item a[href*="/legal/"] .chapter-number,
/* Breadcrumb */
.breadcrumb a[href*="/legal/"] .chapter-number,
/* Prev/next navigation */
nav a[href*="/legal/"] .chapter-number,
/* Any link to legal pages */
a[href*="/legal/"] .chapter-number {
  display: none !important;
}

/* ===== BADGES & LABELS ===== */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-primary {
  background: var(--primary-blue);
  color: white;
}

.badge-success {
  background: var(--success);
  color: white;
}

.badge-warning {
  background: var(--warning);
  color: var(--gray-900);
}

.badge-danger {
  background: var(--danger);
  color: white;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-outline:hover {
  background: var(--primary-blue);
  color: white;
}

/* ===== NAVIGATION BREADCRUMBS ===== */
.breadcrumb {
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.breadcrumb a {
  color: var(--gray-700);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--primary-blue);
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: var(--gray-700);
}

/* Hierarchical breadcrumb styling */
.breadcrumb-item {
  display: inline-block;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 0.5rem;
  color: var(--gray-500);
  font-weight: 600;
}

/* Part-level breadcrumb (e.g., "Sensing & Actuation") */
.breadcrumb-part {
  font-weight: 700;
  color: var(--primary-dark);
}

/* Section-level breadcrumb (e.g., "Sensor Types") */
.breadcrumb-section {
  font-weight: 600;
  color: var(--gray-700);
}

/* Subsection-level breadcrumb */
.breadcrumb-subsection {
  font-weight: 500;
  color: var(--gray-600);
}

/* Current chapter (active) */
.breadcrumb-chapter {
  font-weight: 500;
  color: var(--gray-700);
}

.breadcrumb-chapter.active {
  color: var(--gray-900);
  font-weight: 600;
}

/* Hide chapter numbers in breadcrumbs (handled by JS) */
.breadcrumb .chapter-number {
  display: none;
}

/* ==========================================================================
   CROSS-BOOK NAVIGATION
   Module switcher, prev/next navigation, back-to-all-modules button
   Moved from cross-book-navigation.js to prevent style flash (FOUC)
   ========================================================================== */

/* Module Switcher */
.module-switcher {
  margin: 1rem 0;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.module-switcher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  cursor: pointer;
}

.current-module-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.module-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.module-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.switcher-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #6b7280;
  transition: color 0.2s;
}

.switcher-toggle:hover {
  color: #111827;
}

.module-switcher-menu {
  border-top: 1px solid #e5e7eb;
}

.switcher-modules {
  max-height: 400px;
  overflow-y: auto;
}

.switcher-module {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  color: #111827;
  transition: all 0.2s;
}

.switcher-module:hover {
  background: #f9fafb;
}

.switcher-module.active {
  background: #f0f9ff;
  font-weight: 600;
}

.module-number {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 500;
}

.module-title {
  font-size: 0.9rem;
}

.module-chapters {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Back to All Modules Button */
.back-to-all-modules {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.back-to-all-modules:hover {
  background: #f0f9ff;
  border-color: #2563eb;
  transform: translateX(-2px);
}

/* Module Navigation (Prev/Next) */
.module-navigation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 4rem 0 2rem;
  padding: 2rem 0;
  border-top: 2px solid #e5e7eb;
}

.module-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-left: 5px solid;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
}

.module-nav-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.nav-direction {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.nav-module-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.nav-module-desc {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}

.module-nav-prev {
  text-align: left;
}

.module-nav-next {
  text-align: right;
}

/* Breadcrumb enhancements for cross-book navigation */
.breadcrumb-module a {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

/* Responsive cross-book navigation */
@media (max-width: 768px) {
  .module-navigation {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .module-nav-next {
    text-align: left;
  }
}

/* ==========================================================================
   LANDING PAGE STATS & FILTERS
   Module cards, filter bar, scroll animations
   Moved from landing-stats.js to prevent style flash (FOUC)
   ========================================================================== */

/* Ripple effect for module cards */
.module-card {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Filter bar */
.module-filter-bar {
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-width: 1200px;
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.filter-container label {
  font-weight: 600;
  color: #374151;
}

.filter-container select {
  padding: 0.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-container select:hover {
  border-color: #2563eb;
}

.filter-container select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Scroll animations */
.animate-ready {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth stat counter transitions */
#stat-modules,
#stat-parts,
#stat-chapters,
#stat-quizzes {
  display: inline-block;
  min-width: 3ch;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-container select {
    width: 100%;
  }
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--gradient-primary);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ===== SEARCH BOX ===== */
.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ===== HORIZONTAL RULES ===== */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
  margin: 3rem 0;
}

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.mb-1 {
  margin-bottom: var(--spacing-xs);
}
.mb-2 {
  margin-bottom: var(--spacing-sm);
}
.mb-3 {
  margin-bottom: var(--spacing-md);
}
.mb-4 {
  margin-bottom: var(--spacing-lg);
}

/* ===== EMBED WRAPPERS (Wokwi, CircuitJS, YouTube) ===== */
.embed {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  margin: 1.5rem 0;
  overflow: hidden;
}

.embed-header {
  background: var(--gradient-primary);
  color: #fff;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.embed-frame {
  display: block;
  width: 100%;
  border: 0;
}

.embed-caption {
  padding: 0.5rem 0.75rem 0.9rem;
  color: var(--gray-700);
  font-style: italic;
  background: #fafafa;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ===== QUIZ (Lightweight MCQ pattern) ===== */
.quiz,
.mcq {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  background: #fff;
  margin: 1.25rem 0;
}

/* ===== KNOWLEDGE CHECK (Collapsible inline concept checks) ===== */
.knowledge-check {
  border: 2px solid #e0f2fe;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
  transition: all 0.3s ease;
}

.knowledge-check.hidden {
  display: none;
}

.knowledge-check summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: all 0.2s ease;
  border-radius: 10px;
}

.knowledge-check summary:hover {
  background: rgba(14, 165, 233, 0.05);
}

.knowledge-check summary::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.knowledge-check summary::marker {
  content: "";
}

.knowledge-check[open] summary::before {
  transform: rotate(180deg);
  content: "▼";
  font-size: 0.625rem;
}

.knowledge-check-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--gray-700);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.knowledge-check .mcq {
  margin: 0.75rem 0;
  border: 1px solid #e0f2fe;
  background: white;
}

.knowledge-check-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-left: auto;
}

/* ===== KNOWLEDGE CHECK TOGGLE BUTTON ===== */
#knowledge-check-toggle {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 999;
  font-weight: 700;
}

#knowledge-check-toggle:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

#knowledge-check-toggle:active {
  transform: translateY(-2px) scale(1.02);
}

#knowledge-check-toggle.hidden-mode {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

#knowledge-check-toggle.hidden-mode:hover {
  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
}

/* Tooltip for toggle button */
#knowledge-check-toggle::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  margin-right: 0.75rem;
}

#knowledge-check-toggle:hover::after {
  opacity: 1;
}
.mb-5 {
  margin-bottom: var(--spacing-xl);
}

.mt-1 {
  margin-top: var(--spacing-xs);
}
.mt-2 {
  margin-top: var(--spacing-sm);
}
.mt-3 {
  margin-top: var(--spacing-md);
}
.mt-4 {
  margin-top: var(--spacing-lg);
}
.mt-5 {
  margin-top: var(--spacing-xl);
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
  }

  table {
    font-size: 0.875rem;
  }

  thead th,
  tbody td {
    padding: 0.75rem;
  }

  /* Mobile callout improvements */
  .callout {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-radius: 6px;
  }

  .callout-title {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
  }

  .callout-body {
    font-size: 0.875rem;
    line-height: 1.65;
  }

  /* Collapsible callouts - better touch targets */
  .callout[data-bs-toggle="collapse"] .callout-title {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* Mobile code blocks */
  .sourceCode,
  pre.sourceCode {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    font-size: 0.8125rem;
  }

  div.sourceCode::before {
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  /* Mobile figure/image handling */
  figure {
    margin: 1rem 0;
  }

  figure img {
    max-width: 100%;
    height: auto;
  }

  figcaption {
    font-size: 0.8125rem;
    padding: 0.5rem;
  }

  /* Mobile Mermaid diagrams */
  .mermaid {
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.75rem;
  }

  /* Navigation touch targets */
  .sidebar-item a {
    min-height: 44px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
  }

  /* Table horizontal scroll */
  .table-responsive,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .callout {
    padding: 0.875rem 1rem;
    margin: 0.75rem 0;
  }

  .callout-title {
    font-size: 0.875rem;
  }

  .callout-body {
    font-size: 0.8125rem;
  }

  .sourceCode,
  pre.sourceCode {
    padding: 0.75rem;
    font-size: 0.75rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.375rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  /* Touch targets - still need 44px minimum */
  .back-to-top {
    width: 48px;
    height: 48px;
  }

  #knowledge-check-toggle {
    width: 52px;
    height: 52px;
  }
}

/* ===== RIGHT SIDEBAR (TABLE OF CONTENTS) STYLING ===== */
/* Base styling for right sidebar with part-aware accents */
#quarto-margin-sidebar {
  --toc-accent: #2f4f4f;
  --toc-accent-border: #2f4f4f;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  /* Allow vertical scroll, allow horizontal overflow for text wrapping */
  overflow-x: visible;
  overflow-y: auto;
  /* Ensure content stays within bounds */
  box-sizing: border-box;
  max-width: 100%;
}

/* TOC navigation styling */
nav#TOC {
  font-size: 0.82rem;
  line-height: 1.5;
  /* Allow TOC text to wrap properly */
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

nav#TOC .toc-title {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--toc-accent);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--toc-accent);
}

nav#TOC ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

nav#TOC li {
  margin: 0;
}

#quarto-margin-sidebar nav#TOC a,
nav#TOC a {
  display: block;
  position: relative;
  padding: 0.15rem 0.75rem 0.15rem 0.5rem;
  color: #495057 !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-radius: 3px;
  transition: none !important;
  line-height: 1.3;
  background: none !important;
  /* Allow text to wrap - prevent cutoff */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: 0.78rem;
  min-height: 0;
  /* Constrain to parent width with safety margin */
  max-width: calc(100% - 0.5rem);
  box-sizing: border-box;
}

/* Ensure TOC text wraps properly within container bounds */
#quarto-margin-sidebar nav#TOC ul,
nav#TOC ul {
  padding-right: 1rem;
}

nav#TOC li {
  /* Allow text to wrap instead of truncating */
  overflow: visible;
}

#quarto-margin-sidebar nav#TOC a:hover,
nav#TOC a:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #212529 !important;
}

/* Active section highlighting */
#quarto-margin-sidebar nav#TOC a.active,
nav#TOC a.active {
  background: rgba(0, 0, 0, 0.06) !important;
  border-left-color: var(--toc-accent-border);
  border-left-width: 3px;
  font-weight: 600;
  color: #2c3e50 !important;
}

/* Nested items */
nav#TOC ul ul {
  padding-left: 0.75rem;
  margin: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

nav#TOC ul ul a {
  font-size: 0.75rem;
  padding: 0.2rem 0.3rem 0.2rem 0.5rem;
}

/* TOC actions (Edit this page, Report issue) */
nav#TOC .toc-actions,
#quarto-margin-sidebar .toc-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e0e0e0;
}

nav#TOC .toc-actions a,
#quarto-margin-sidebar .toc-actions a {
  font-size: 0.78rem;
  color: #6c757d;
  padding: 0.3rem 0.5rem;
  border-left: none;
}

nav#TOC .toc-actions a:hover,
#quarto-margin-sidebar .toc-actions a:hover {
  color: var(--toc-accent);
  background: var(--toc-accent-hover, rgba(0, 0, 0, 0.04));
}

/* Responsive adjustments */
@media (max-width: 1399px) {
  #quarto-margin-sidebar {
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 991px) {
  #quarto-margin-sidebar {
    border-left: none;
    box-shadow: none;
  }
}

/* Sidebar color indicators for collapsed sections */
.sidebar-item-container .collapse-indicator {
  color: inherit;
  transition: transform 0.3s ease;
}

.sidebar-item-container[aria-expanded="true"] .collapse-indicator {
  transform: rotate(90deg);
}

/* Sidebar chapter indicators - disabled to prevent visual issues */
/* .sidebar-item a::before { content: "•"; ... } - removed */

/* ===== SIDEBAR STYLING & LAYOUT ===== */
.sidebar {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

/* Sidebar layout - fixed sidebars, adaptive content */
@media (min-width: 1100px) {
  /* Three-column: sidebar (left) | content (fill) | TOC (right) */
  body.docked .page-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    grid-template-columns:
      [screen-start] 0px
      [screen-start-inset page-start] 325px
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] 1.5rem
      [body-content-start] 1fr
      [body-content-end] 1.5rem
      [body-end] 200px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1rem
      [screen-end] !important;
  }
}

/* Two-column below 1100px: sidebar + content, TOC hidden */
@media (min-width: 992px) and (max-width: 1099px) {
  body.docked .page-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    grid-template-columns:
      [screen-start] 0px
      [screen-start-inset page-start] 325px
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] 1.5rem
      [body-content-start] 1fr
      [body-content-end] 0px
      [body-end] 0px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1.5rem
      [screen-end] !important;
  }

  #quarto-margin-sidebar {
    display: none !important;
  }
}

@media (min-width: 992px) {
  /* Left sidebar - fixed at 325px, flush left */
  #quarto-sidebar,
  #quarto-sidebar .sidebar-navigation {
    width: 325px !important;
    min-width: 0 !important;
    max-width: 325px !important;
  }

  /* Right sidebar (TOC) - sticky, right-aligned */
  #quarto-margin-sidebar {
    position: sticky !important;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0.75rem;
  }
}

/* Prevent horizontal overflow */
html {
  overflow-x: hidden;
}

/* ===== MEDIA VERSIONING PICKER ===== */
/* Version indicator on images and diagrams with alternatives */
.media-version-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(44, 62, 80, 0.85);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.media-version-container:hover .media-version-indicator,
figure:hover .media-version-indicator,
[id^="fig-"]:hover .media-version-indicator {
  opacity: 1;
}

.media-version-indicator:hover {
  transform: scale(1.1);
  background: rgba(22, 160, 133, 0.95);
}

.media-version-indicator .version-icon {
  font-size: 14px;
}

.media-version-indicator .version-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

/* Container for images with version indicators */
.media-version-container {
  position: relative;
  display: inline-block;
}

/* Unified admin media indicator (same for images and diagrams) */
.admin-media-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(44, 62, 80, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Show indicator on hover - works for both images and diagrams */
.admin-media-container:hover .admin-media-indicator,
figure:hover .admin-media-indicator,
[id^="fig-"]:hover .admin-media-indicator,
.quarto-figure:hover .admin-media-indicator,
.cell-output-display:hover .admin-media-indicator {
  opacity: 1;
}

.admin-media-indicator:hover {
  transform: scale(1.1);
  background: rgba(22, 160, 133, 0.95);
}

/* Unified admin media container */
.admin-media-container {
  position: relative;
  display: inline-block;
}

/* Option badge in picker panel */
.option-badge {
  background: rgba(22, 160, 133, 0.2);
  color: #16a085;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
}

/* Toggle indicator on figures with alternatives (legacy) */
.media-toggle-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(44, 62, 80, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.media-toggle-indicator:hover {
  opacity: 1;
  transform: scale(1.05);
}

.media-toggle-indicator .toggle-icon {
  font-size: 14px;
}

.media-toggle-indicator .toggle-count {
  font-size: 10px;
  opacity: 0.85;
}

/* Media picker panel */
.media-picker-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  min-width: 350px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.media-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #2c3e50;
  color: white;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}

.media-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.media-panel-close:hover {
  opacity: 1;
}

.media-panel-body {
  padding: 16px;
}

.media-type-section {
  margin-bottom: 16px;
}

.media-type-section:last-of-type {
  margin-bottom: 0;
}

.media-type-section h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

.media-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.media-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.media-option:hover {
  background: #f5f5f5;
}

.media-option.selected {
  background: #e8f6f3;
  border-color: #16a085;
}

.media-option input {
  margin: 0;
  cursor: pointer;
}

.option-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.option-source,
.option-file {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.media-panel-actions {
  margin-top: 16px;
  text-align: right;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.apply-media-btn {
  background: #16a085;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.apply-media-btn:hover {
  background: #138d75;
}

/* Panel info section */
.media-panel-info {
  padding: 8px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #666;
}

/* Type badges */
.media-type-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.media-type-badge.image {
  background: #e8f6f3;
  color: #16a085;
}

.media-type-badge.diagram {
  background: #fdf2e9;
  color: #e67e22;
}

/* Admin preview section */
.media-preview-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.media-preview-section h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
}

.preview-container {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-placeholder {
  color: #999;
  font-size: 12px;
  font-style: italic;
}

/* Admin tools section */
.admin-tools-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.admin-tools-section h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 14px;
}

.admin-tool-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.apply-all-btn,
.reset-selection-btn {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}

.apply-all-btn {
  background: #e67e22;
  color: white;
}

.apply-all-btn:hover {
  background: #d35400;
}

.reset-selection-btn {
  background: #95a5a6;
  color: white;
}

.reset-selection-btn:hover {
  background: #7f8c8d;
}

/* Diagram indicator styling */
.diagram-indicator {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.diagram-indicator:hover {
  background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
}

/* Library browser section */
.library-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.library-source-group {
  margin-bottom: 12px;
}

.library-source-group h5 {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
}

.library-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Library option - increased specificity to avoid !important */
.library-images .library-option,
button.library-option,
.library-option {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 11px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.library-option:hover {
  background: #e9ecef;
}

.library-option.selected {
  background: #e8f6f3;
  border-color: #16a085;
}

/* Backdrop */
.media-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .media-picker-panel {
    min-width: 290px;
    max-width: calc(100vw - 40px);
  }

  .media-panel-header {
    padding: 10px 14px;
    font-size: 14px;
  }

  .media-panel-body {
    padding: 12px;
  }

  .media-option {
    padding: 6px;
    gap: 6px;
  }

  .option-source,
  .option-file {
    max-width: 80px;
  }
}

/* ===== PROGRESSIVE DISCLOSURE LAYER SYSTEM ===== */
/* Three-tier content disclosure: Core (always visible), Practical (togglable), Deep (collapsed by default) */

/* Layer Core - Always visible, base content with no special styling */
.layer-core {
  /* Standard content - no special styling needed */
}

/* Layer Practical - Visible by default, can be toggled */
/* Used for hands-on examples, code samples, implementation details */
.layer-practical {
  border-left: 3px solid #16a085;
  padding-left: 1rem;
  margin: 1rem 0;
  background: linear-gradient(90deg, rgba(22, 160, 133, 0.03) 0%, transparent 100%);
}

.layer-practical::before {
  content: "Practical";
  display: inline-block;
  background: #16a085;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* Layer Deep - Collapsed by default */
/* Used for advanced theory, edge cases, optimization details, mathematical proofs */
.layer-deep {
  background: #f8f9fa;
  border-left: 3px solid #7f8c8d;
  margin: 1rem 0;
}

/* Deep Dive callout styling - enhanced for progressive disclosure */
.callout-note[data-title*="Deep Dive"],
.callout-note[data-title*="deep dive"] {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-color: #e9ecef;
  border-left-color: #7f8c8d;
  border-left-width: 4px;
}

.callout-note[data-title*="Deep Dive"] .callout-title,
.callout-note[data-title*="deep dive"] .callout-title {
  color: #495057;
  font-weight: 600;
}

.callout-note[data-title*="Deep Dive"] .callout-title::before,
.callout-note[data-title*="deep dive"] .callout-title::before {
  content: "Advanced ";
  font-size: 0.7rem;
  background: #7f8c8d;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  vertical-align: middle;
}

/* Deep Dive callout body */
.callout-note[data-title*="Deep Dive"] .callout-body,
.callout-note[data-title*="deep dive"] .callout-body {
  color: #495057;
  font-size: 0.9rem;
}

/* Mathematical content within Deep Dive sections */
.callout-note[data-title*="Deep Dive"] .math,
.callout-note[data-title*="deep dive"] .math {
  background: white;
  padding: 0.5rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}

/* ===== PRINT STYLES ===== */
@media print {
  .hero-section,
  .features-section,
  .pathway-section,
  .testimonial-section,
  .cta-section,
  .sidebar,
  .back-to-top {
    display: none;
  }

  figure img {
    box-shadow: none;
  }
}

/* --- Section: Educational Components (was educational-components.css) --- */

/*=====================================
  EDUCATIONAL COMPONENTS v1.0
  Kids content, executive summaries, research papers, labs
  IEEE Color Palette: #2C3E50, #16A085, #E67E22, #7F8C8D
=====================================*/

/* ===== KIDS CONTENT - COMICS & ELI5 ===== */

/* Kids panel container - collapsible section for children's content */
.kids-panel {
  border: 3px solid #ffb347;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8e7 0%, #fffdf5 100%);
  margin: 2rem 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 179, 71, 0.2);
  transition: all 0.3s ease;
}

.kids-panel:hover {
  box-shadow: 0 6px 20px rgba(255, 179, 71, 0.3);
  transform: translateY(-2px);
}

.kids-panel-header {
  background: linear-gradient(135deg, #ffb347 0%, #ffcc80 100%);
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: background 0.2s ease;
}

.kids-panel-header:hover {
  background: linear-gradient(135deg, #ffa726 0%, #ffb74d 100%);
}

.kids-panel-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.kids-panel-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #5d4037;
  flex: 1;
}

.kids-panel-toggle {
  font-size: 0.875rem;
  color: #795548;
  transition: transform 0.3s ease;
}

.kids-panel.collapsed .kids-panel-toggle {
  transform: rotate(-90deg);
}

.kids-panel-body {
  padding: 1.5rem;
  animation: slideDown 0.3s ease;
}

.kids-panel.collapsed .kids-panel-body {
  display: none;
}

/* ELI5 (Explain Like I'm 5) styling */
.eli5-section {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border-left: 4px solid #4caf50;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}

.eli5-section::before {
  content: "Simple Explanation";
  position: absolute;
  top: -10px;
  left: 12px;
  background: #4caf50;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eli5-section h4 {
  color: #2e7d32;
  font-size: 1rem;
  margin: 0.5rem 0 0.75rem;
  font-weight: 600;
}

.eli5-section p {
  color: #33691e;
  line-height: 1.8;
  font-size: 1rem;
}

.eli5-section .analogy {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  font-style: italic;
}

.eli5-section .analogy::before {
  content: "Think of it like this:";
  display: block;
  font-weight: 600;
  font-style: normal;
  color: #388e3c;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Comic Panel Layout */
.comic-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.comic-panel {
  background: white;
  border: 3px solid #2c3e50;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 4px 4px 0 #2c3e50;
  transition: transform 0.2s ease;
}

.comic-panel:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #2c3e50;
}

.comic-panel-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 3px solid #2c3e50;
}

.comic-panel-content {
  padding: 1rem;
}

.comic-speech-bubble {
  background: #f5f5f5;
  border: 2px solid #333;
  border-radius: 20px;
  padding: 0.75rem 1rem;
  position: relative;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.comic-speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #333;
}

.comic-speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f5f5f5;
  z-index: 1;
}

.comic-character-name {
  font-weight: 700;
  color: #e67e22;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.comic-narrator {
  background: #fff9c4;
  border: 2px dashed #fbc02d;
  padding: 0.75rem;
  border-radius: 8px;
  font-style: italic;
  text-align: center;
  color: #f57f17;
  font-size: 0.9rem;
}

/* Character badges for comic characters */
.character-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.character-badge.temperature-terry {
  background: linear-gradient(135deg, #ff5722 0%, #ff7043 100%);
  color: white;
}

.character-badge.motion-marley {
  background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
  color: white;
}

.character-badge.light-lucy {
  background: linear-gradient(135deg, #ffeb3b 0%, #fff176 100%);
  color: #333;
}

.character-badge.pressure-pete {
  background: linear-gradient(135deg, #9c27b0 0%, #ab47bc 100%);
  color: white;
}

.character-badge.signal-sam {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
}

/* Age indicator */
.age-indicator {
  display: inline-block;
  background: #e3f2fd;
  color: #1565c0;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

/* ===== EXECUTIVE SUMMARY CARDS ===== */

.executive-summary {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border: 1px solid #e0e0e0;
  border-left: 5px solid #2c3e50;
  border-radius: 0 12px 12px 0;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.executive-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

.executive-summary-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.executive-summary-title::before {
  content: "📊";
  font-size: 1.25rem;
}

.executive-badge {
  background: #2c3e50;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.executive-summary h3 {
  color: #2c3e50;
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.executive-summary h3::before {
  content: "▸";
  color: #16a085;
}

.executive-summary p {
  color: #555;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Key metrics table in executive summary */
.executive-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.metric-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.2s ease;
}

.metric-card:hover {
  border-color: #16a085;
  box-shadow: 0 2px 8px rgba(22, 160, 133, 0.15);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #16a085;
  display: block;
}

.metric-label {
  font-size: 0.8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* Decision criteria in executive summary */
.decision-criteria {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.decision-criteria h4 {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #2c3e50;
}

.criteria-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.criteria-list li {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
  color: #555;
}

.criteria-list li.positive::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

.criteria-list li.negative::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #e74c3c;
  font-weight: bold;
}

.criteria-list li.neutral::before {
  content: "○";
  position: absolute;
  left: 0;
  color: #95a5a6;
}

/* Case study snapshot */
.case-study-snapshot {
  background: linear-gradient(135deg, #e8f6f3 0%, #f0faf8 100%);
  border: 1px solid #a3d9cc;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.case-study-snapshot h4 {
  color: #16a085;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.case-study-snapshot h4::before {
  content: "📋";
}

.case-study-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.case-stat {
  flex: 1;
  min-width: 100px;
}

.case-stat-label {
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
}

.case-stat-value {
  font-weight: 600;
  color: #2c3e50;
}

/* ===== RESEARCH PAPER REFERENCES ===== */

.scholarly-references {
  background: linear-gradient(135deg, #fff3e0 0%, #fffaf0 100%);
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.scholarly-references-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #ffe0b2;
}

.scholarly-references-header h3 {
  margin: 0;
  color: #e65100;
  font-size: 1.1rem;
  font-weight: 700;
}

.scholarly-references-header::before {
  content: "📚";
  font-size: 1.5rem;
}

.paper-category {
  margin: 1.25rem 0;
}

.paper-category h4 {
  color: #bf360c;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  padding-left: 0.5rem;
  border-left: 3px solid #ff5722;
}

.paper-card {
  background: white;
  border: 1px solid #ffccbc;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.paper-card:hover {
  border-color: #ff5722;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.15);
}

.paper-card:last-child {
  margin-bottom: 0;
}

.paper-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.paper-venue {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.paper-authors {
  color: #666;
  font-size: 0.85rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}

.paper-contribution {
  color: #555;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.paper-relevance {
  background: #f5f5f5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #666;
}

.paper-relevance strong {
  color: #e65100;
}

.paper-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.paper-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.paper-link.ieee {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.paper-link.ieee:hover {
  background: #1565c0;
  color: white;
}

.paper-link.acm {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.paper-link.acm:hover {
  background: #2e7d32;
  color: white;
}

.paper-link.arxiv {
  background: #f3e5f5;
  color: #7b1fa2;
  border: 1px solid #ce93d8;
}

.paper-link.arxiv:hover {
  background: #7b1fa2;
  color: white;
}

.paper-link.bibtex {
  background: #eceff1;
  color: #546e7a;
  border: 1px solid #b0bec5;
}

.paper-link.bibtex:hover {
  background: #546e7a;
  color: white;
}

/* Paper difficulty indicator */
.paper-difficulty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #666;
  margin-left: 0.5rem;
}

.paper-difficulty .star {
  color: #ffc107;
}

.paper-difficulty .star.empty {
  color: #e0e0e0;
}

/* Paper reading guide */
.paper-reading-guide {
  background: #fffde7;
  border: 1px solid #fff59d;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.paper-reading-guide h5 {
  color: #f57f17;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.paper-reading-guide h5::before {
  content: "📖";
}

.reading-time {
  display: inline-block;
  background: #fff9c4;
  color: #f57f17;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ===== PRACTICAL LAB EXERCISES ===== */

.practical-lab {
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
  border: 2px solid #90caf9;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
}

.practical-lab::before {
  content: "Hands-On Lab";
  position: absolute;
  top: -12px;
  left: 20px;
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  color: white;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.practical-lab-header {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #bbdefb;
}

.practical-lab h3 {
  color: #1565c0;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.lab-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.lab-meta-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #1976d2;
}

.lab-meta-item .icon {
  font-size: 1rem;
}

/* Lab difficulty stars */
.lab-difficulty {
  display: inline-flex;
  gap: 0.15rem;
}

.lab-difficulty .star {
  color: #ffc107;
  font-size: 0.9rem;
}

.lab-difficulty .star.empty {
  color: #e0e0e0;
}

/* Learning objectives */
.lab-objectives {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.lab-objectives h4 {
  color: #1565c0;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lab-objectives h4::before {
  content: "🎯";
}

.lab-objectives ul {
  margin: 0;
  padding-left: 1.5rem;
}

.lab-objectives li {
  color: #333;
  font-size: 0.9rem;
  margin: 0.4rem 0;
}

/* Lab steps */
.lab-step {
  background: white;
  border: 1px solid #bbdefb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 3.5rem;
}

.lab-step-number {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.lab-step h5 {
  color: #1565c0;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.lab-step p {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.lab-step .expected-outcome {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: #2e7d32;
}

.lab-step .expected-outcome::before {
  content: "Expected: ";
  font-weight: 600;
}

/* Lab checkpoints */
.lab-checkpoint {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.lab-checkpoint h4 {
  color: #2e7d32;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lab-checkpoint h4::before {
  content: "✓";
  background: #4caf50;
  color: white;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.lab-checkpoint ul {
  margin: 0;
  padding-left: 1.5rem;
}

.lab-checkpoint li {
  color: #33691e;
  font-size: 0.9rem;
  margin: 0.3rem 0;
}

/* Lab extensions/challenges */
.lab-extensions {
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.lab-extensions h4 {
  color: #e65100;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lab-extensions h4::before {
  content: "🚀";
}

.lab-extensions ul {
  margin: 0;
  padding-left: 1.5rem;
}

.lab-extensions li {
  color: #bf360c;
  font-size: 0.9rem;
  margin: 0.4rem 0;
}

/* Lab troubleshooting */
.lab-troubleshooting {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.lab-troubleshooting h4 {
  color: #c62828;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lab-troubleshooting h4::before {
  content: "🔧";
}

.troubleshoot-item {
  margin-bottom: 0.75rem;
}

.troubleshoot-item:last-child {
  margin-bottom: 0;
}

.troubleshoot-problem {
  font-weight: 600;
  color: #b71c1c;
  font-size: 0.9rem;
}

.troubleshoot-solution {
  color: #555;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  padding-left: 1rem;
}

/* Lab equipment list */
.lab-equipment {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.lab-equipment::before {
  content: "Equipment:";
  font-weight: 600;
  color: #666;
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

.equipment-tag {
  background: white;
  border: 1px solid #ddd;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #555;
}

/* ===== CAPSTONE PROJECT CARDS ===== */

.capstone-project {
  background: linear-gradient(135deg, #f3e5f5 0%, #fcf5ff 100%);
  border: 2px solid #ce93d8;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

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

.capstone-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.capstone-project h3 {
  color: #7b1fa2;
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.capstone-subtitle {
  color: #9c27b0;
  font-size: 0.9rem;
}

.capstone-project-body {
  background: white;
  border-radius: 8px;
  padding: 1rem;
}

.capstone-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.capstone-chapter-tag {
  background: #f3e5f5;
  color: #7b1fa2;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.capstone-deliverable {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
  padding: 0.75rem 1rem;
  border-radius: 0 8px 8px 0;
}

.capstone-deliverable h4 {
  color: #2e7d32;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}

.capstone-deliverable p {
  color: #33691e;
  font-size: 0.9rem;
  margin: 0;
}

/* ===== COMPARISON TABLES (Enhanced) ===== */

.comparison-table-wrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.comparison-table thead {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.comparison-table th {
  color: white;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.comparison-table th:first-child {
  border-top-left-radius: 12px;
}

.comparison-table th:last-child {
  border-top-right-radius: 12px;
}

.comparison-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.9rem;
  vertical-align: top;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

.comparison-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.comparison-table tbody tr:hover {
  background: #f0f7ff;
}

/* Comparison indicators */
.comparison-good {
  color: #27ae60;
  font-weight: 500;
}

.comparison-good::before {
  content: "✓ ";
}

.comparison-bad {
  color: #e74c3c;
  font-weight: 500;
}

.comparison-bad::before {
  content: "✗ ";
}

.comparison-neutral {
  color: #7f8c8d;
}

.comparison-neutral::before {
  content: "○ ";
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .comic-strip {
    grid-template-columns: 1fr;
  }

  .executive-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .lab-step {
    padding-left: 1rem;
    padding-top: 3rem;
  }

  .lab-step-number {
    left: 1rem;
    top: 0.75rem;
  }

  .paper-links {
    flex-direction: column;
  }

  .paper-link {
    justify-content: center;
  }

  .capstone-project-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .case-study-stats {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .kids-panel-header {
    padding: 0.875rem 1rem;
  }

  .kids-panel-body {
    padding: 1rem;
  }

  .executive-summary {
    padding: 1rem;
  }

  .practical-lab {
    padding: 1rem;
  }

  .scholarly-references {
    padding: 1rem;
  }

  .executive-metrics {
    grid-template-columns: 1fr;
  }

  .lab-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .kids-panel,
  .executive-summary,
  .practical-lab,
  .scholarly-references,
  .capstone-project {
    break-inside: avoid;
    box-shadow: none;
    border-width: 1px;
  }

  .kids-panel.collapsed .kids-panel-body {
    display: block;
  }

  .paper-links {
    display: none;
  }
}

/* =============================================
   IoT Class - Interactive Features
   Merged from: image-versions.css, glossary-tooltips.css,
   progress-tracker.css, chapter-quiz.css
   ============================================= */

/* --- Section: Image Version Switcher (was image-versions.css) --- */
/*=====================================
  IMAGE VERSION SWITCHER STYLES
  For selecting between different image versions/sources

  IEEE Color Palette:
  - Navy:   #2C3E50
  - Teal:   #16A085
  - Orange: #E67E22
  - Gray:   #7F8C8D
=====================================*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* IEEE Color Palette */
  --vs-navy: #2c3e50;
  --vs-teal: #16a085;
  --vs-orange: #e67e22;
  --vs-gray: #7f8c8d;

  /* Derived colors */
  --vs-teal-light: #1abc9c;
  --vs-gray-light: #95a5a6;

  /* UI colors */
  --vs-bg: #ffffff;
  --vs-bg-hover: #f8f9fa;
  --vs-border: #e0e0e0;
  --vs-text: #333333;
  --vs-text-muted: #666666;
  --vs-shadow: rgba(0, 0, 0, 0.15);
  --vs-shadow-lg: rgba(0, 0, 0, 0.25);

  /* Animation timing */
  --vs-transition-fast: 0.15s ease;
  --vs-transition: 0.25s ease;
}

/* ===== VERSION SWITCHER BUTTON/ICON ===== */
.version-switcher {
  position: relative;
  display: inline-block;
}

/* Container class used by iotclass-versions.js */
.version-switcher-container {
  position: relative;
}

.version-switcher-trigger {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;

  /* Button styling */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-width: 32px;
  height: 32px;
  padding: 4px 8px;

  background: var(--vs-navy);
  color: #ffffff;
  border: none;
  border-radius: 6px;

  font-size: 14px;
  font-weight: 500;
  cursor: pointer;

  /* Initially hidden, shown on hover */
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--vs-transition),
    transform var(--vs-transition),
    background var(--vs-transition-fast);

  box-shadow: 0 2px 8px var(--vs-shadow);
}

/* Show button on figure hover */
.version-switcher:hover .version-switcher-trigger,
figure:hover .version-switcher-trigger,
.quarto-figure:hover .version-switcher-trigger,
[id^="fig-"]:hover .version-switcher-trigger,
.version-switcher:hover .version-switcher-btn,
figure:hover .version-switcher-btn,
.quarto-figure:hover .version-switcher-btn,
[id^="fig-"]:hover .version-switcher-btn {
  opacity: 1;
  transform: scale(1);
}

/* Alias for version-switcher-btn (used by iotclass-versions.js) */
.version-switcher-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 4px 8px;
  background: var(--vs-navy);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--vs-transition),
    transform var(--vs-transition),
    background var(--vs-transition-fast);
  box-shadow: 0 2px 8px var(--vs-shadow);
}

.version-switcher-btn:hover {
  background: var(--vs-teal);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--vs-shadow-lg);
}

.version-switcher-btn:active {
  transform: scale(0.98);
}

.version-switcher-btn:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 160, 133, 0.4),
    0 2px 8px var(--vs-shadow);
}

.version-switcher-btn .version-icon {
  font-size: 14px;
}

.version-switcher-btn .version-count {
  font-size: 11px;
  background: var(--vs-teal);
  padding: 1px 5px;
  border-radius: 10px;
}

/* Button hover state */
.version-switcher-trigger:hover {
  background: var(--vs-teal);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--vs-shadow-lg);
}

/* Button active/pressed state */
.version-switcher-trigger:active {
  transform: scale(0.98);
}

/* Button focus state for accessibility */
.version-switcher-trigger:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 160, 133, 0.4),
    0 2px 8px var(--vs-shadow);
}

/* Version switcher icon (layers/stack icon using CSS) */
.version-switcher-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 14px;
  height: 12px;
}

.version-switcher-icon::before,
.version-switcher-icon::after {
  content: "";
  display: block;
  height: 3px;
  background: currentColor;
  border-radius: 1px;
}

.version-switcher-icon::before {
  width: 100%;
}

.version-switcher-icon::after {
  width: 80%;
  margin-left: auto;
  opacity: 0.7;
}

/* Alternative: Unicode icon */
.version-switcher-trigger[data-icon="layers"]::before {
  content: "\229E"; /* Squared plus */
  font-size: 16px;
  line-height: 1;
}

.version-switcher-trigger[data-icon="gear"]::before {
  content: "\2699"; /* Gear */
  font-size: 16px;
  line-height: 1;
}

/* Version count badge */
.version-switcher-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ===== VERSION DROPDOWN PANEL ===== */
.version-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;

  min-width: 280px;
  max-width: 380px;
  max-height: 400px;

  margin-top: 8px;

  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: 8px;

  box-shadow: 0 8px 24px var(--vs-shadow-lg);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--vs-transition),
    visibility var(--vs-transition),
    transform var(--vs-transition);

  overflow: hidden;
}

/* Show dropdown when active */
.version-switcher.is-open .version-switcher-dropdown,
.version-switcher-dropdown.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown header */
.version-switcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  background: var(--vs-navy);
  color: #ffffff;

  font-weight: 600;
  font-size: 14px;
}

.version-switcher-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.version-switcher-close {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  background: transparent;
  border: none;
  border-radius: 4px;

  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  opacity: 0.7;
  transition:
    opacity var(--vs-transition-fast),
    background var(--vs-transition-fast);
}

.version-switcher-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

/* Dropdown body/content */
.version-switcher-body {
  max-height: 320px;
  padding: 12px;
  overflow-y: auto;
}

/* Scrollbar styling for dropdown */
.version-switcher-body::-webkit-scrollbar {
  width: 6px;
}

.version-switcher-body::-webkit-scrollbar-track {
  background: transparent;
}

.version-switcher-body::-webkit-scrollbar-thumb {
  background: var(--vs-gray-light);
  border-radius: 3px;
}

.version-switcher-body::-webkit-scrollbar-thumb:hover {
  background: var(--vs-gray);
}

/* ===== VERSION LIST ===== */
.version-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 6px;

  list-style: none;
  margin: 0;
  padding: 0;
}

/* Version item */
.version-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;

  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: 6px;

  cursor: pointer;
  transition:
    background var(--vs-transition-fast),
    border-color var(--vs-transition-fast),
    transform var(--vs-transition-fast);
}

.version-switcher-item:hover {
  background: var(--vs-bg-hover);
  border-color: var(--vs-gray-light);
}

/* Selected/current version */
.version-switcher-item.is-current,
.version-switcher-item.is-selected {
  background: #e8f6f3;
  border-color: var(--vs-teal);
}

.version-switcher-item.is-current:hover,
.version-switcher-item.is-selected:hover {
  background: #d4ede8;
}

/* Radio input (hidden visually but accessible) */
.version-switcher-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom radio indicator */
.version-switcher-radio {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  flex-shrink: 0;

  background: #ffffff;
  border: 2px solid var(--vs-border);
  border-radius: 50%;

  transition:
    border-color var(--vs-transition-fast),
    background var(--vs-transition-fast);
}

.version-switcher-item.is-current .version-switcher-radio,
.version-switcher-item.is-selected .version-switcher-radio {
  border-color: var(--vs-teal);
  background: var(--vs-teal);
}

.version-switcher-radio::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--vs-transition-fast),
    transform var(--vs-transition-fast);
}

.version-switcher-item.is-current .version-switcher-radio::after,
.version-switcher-item.is-selected .version-switcher-radio::after {
  opacity: 1;
  transform: scale(1);
}

/* Version item content */
.version-switcher-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.version-switcher-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--vs-text);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.version-switcher-source {
  font-size: 11px;
  color: var(--vs-text-muted);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== VERSION TYPE BADGES ===== */
.version-switcher-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 3px 8px;

  border-radius: 4px;

  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  white-space: nowrap;
  flex-shrink: 0;
}

/* Original image badge - Navy */
.version-switcher-badge--original,
.version-switcher-badge[data-type="original"] {
  background: rgba(44, 62, 80, 0.15);
  color: var(--vs-navy);
}

/* Mermaid SVG badge - Teal */
.version-switcher-badge--mermaid,
.version-switcher-badge[data-type="mermaid"] {
  background: rgba(22, 160, 133, 0.15);
  color: var(--vs-teal);
}

/* DrawIO badge - Orange */
.version-switcher-badge--drawio,
.version-switcher-badge[data-type="drawio"] {
  background: rgba(230, 126, 34, 0.15);
  color: var(--vs-orange);
}

/* Academic source badge - Gray */
.version-switcher-badge--academic,
.version-switcher-badge[data-type="academic"] {
  background: rgba(127, 140, 141, 0.15);
  color: var(--vs-gray);
}

/* SVG badge */
.version-switcher-badge--svg,
.version-switcher-badge[data-type="svg"] {
  background: rgba(155, 89, 182, 0.15);
  color: #8e44ad;
}

/* PNG/JPG badge */
.version-switcher-badge--raster,
.version-switcher-badge[data-type="png"],
.version-switcher-badge[data-type="jpg"],
.version-switcher-badge[data-type="jpeg"] {
  background: rgba(52, 152, 219, 0.15);
  color: #2980b9;
}

/* Badge with icon */
.version-switcher-badge-icon {
  font-size: 11px;
  line-height: 1;
}

/* ===== VERSION SECTION GROUPS ===== */
.version-switcher-section {
  margin-bottom: 16px;
}

.version-switcher-section:last-child {
  margin-bottom: 0;
}

.version-switcher-section-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 8px 0;
  padding-bottom: 6px;

  color: var(--vs-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;

  border-bottom: 1px solid var(--vs-border);
}

/* ===== DROPDOWN FOOTER/ACTIONS ===== */
.version-switcher-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 12px 16px;

  border-top: 1px solid var(--vs-border);
  background: var(--vs-bg-hover);
}

.version-switcher-apply {
  padding: 8px 16px;

  background: var(--vs-teal);
  border: none;
  border-radius: 6px;

  color: #ffffff;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
  transition:
    background var(--vs-transition-fast),
    transform var(--vs-transition-fast);
}

.version-switcher-apply:hover {
  background: var(--vs-teal-light);
}

.version-switcher-apply:active {
  transform: scale(0.98);
}

.version-switcher-apply:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.3);
}

/* ===== CURRENT VERSION INDICATOR ===== */
.version-switcher-current {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;

  background: rgba(22, 160, 133, 0.1);
  border-radius: 4px;

  font-size: 11px;
  color: var(--vs-teal);
}

.version-switcher-current-label {
  font-weight: 500;
}

.version-switcher-current-check {
  font-size: 14px;
}

/* ===== BACKDROP FOR MODAL BEHAVIOR ===== */
.version-switcher-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 999;

  background: rgba(0, 0, 0, 0.3);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--vs-transition),
    visibility var(--vs-transition);
}

.version-switcher-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Version switcher animations */
@keyframes versionSwitcherFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes versionSwitcherSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Transition state for image switching */
.version-switcher-transition img {
  transition: opacity 300ms ease;
}

/* ===== PREVIEW THUMBNAIL ===== */
.version-switcher-preview {
  width: 48px;
  height: 36px;
  flex-shrink: 0;

  border-radius: 4px;
  overflow: hidden;

  background: var(--vs-bg-hover);
  border: 1px solid var(--vs-border);
}

.version-switcher-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.version-switcher-preview--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--vs-gray-light);
  font-size: 16px;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet and below */
@media (max-width: 768px) {
  .version-switcher-trigger {
    min-width: 40px;
    height: 40px;
    padding: 8px 10px;

    /* Always visible on mobile for better discoverability */
    opacity: 0.85;
    transform: scale(1);
  }

  .version-switcher-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;

    min-width: 100%;
    max-width: 100%;
    max-height: 70vh;

    margin-top: 0;
    border-radius: 16px 16px 0 0;

    transform: translateY(100%);
  }

  .version-switcher.is-open .version-switcher-dropdown,
  .version-switcher-dropdown.is-visible {
    transform: translateY(0);
  }

  .version-switcher-header {
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
  }

  .version-switcher-body {
    padding: 16px;
    max-height: calc(70vh - 140px);
  }

  .version-switcher-item {
    padding: 14px 16px;

    /* Touch-friendly target size (44px minimum) */
    min-height: 54px;
  }

  .version-switcher-footer {
    padding: 16px 20px;
  }

  .version-switcher-apply {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .version-switcher-trigger {
    top: 4px;
    right: 4px;
    min-width: 36px;
    height: 36px;
  }

  .version-switcher-count {
    display: none;
  }

  .version-switcher-dropdown {
    max-height: 80vh;
  }

  .version-switcher-item {
    gap: 8px;
  }

  .version-switcher-preview {
    width: 40px;
    height: 30px;
  }

  .version-switcher-badge {
    padding: 2px 6px;
    font-size: 9px;
  }
}

/* ===== INTEGRATION WITH QUARTO FIGURES ===== */

/* Ensure figure container can hold positioned elements */
figure.version-switcher,
.quarto-figure.version-switcher,
[id^="fig-"].version-switcher {
  position: relative;
}

/* Style adjustments for figures with version switcher */
figure.version-switcher img,
.quarto-figure.version-switcher img {
  transition: opacity var(--vs-transition);
}

figure.version-switcher.is-loading img,
.quarto-figure.version-switcher.is-loading img {
  opacity: 0.6;
}

/* Loading spinner overlay */
.version-switcher-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: none;

  width: 32px;
  height: 32px;

  border: 3px solid var(--vs-border);
  border-top-color: var(--vs-teal);
  border-radius: 50%;

  animation: vs-spin 0.8s linear infinite;
}

figure.version-switcher.is-loading .version-switcher-loading {
  display: block;
}

@keyframes vs-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .version-switcher-trigger,
  .version-switcher-dropdown,
  .version-switcher-backdrop {
    display: none !important;
  }
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes vs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vs-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== UTILITY CLASSES ===== */
.version-switcher--compact .version-switcher-trigger {
  min-width: 28px;
  height: 28px;
  padding: 4px 6px;
  font-size: 12px;
}

.version-switcher--compact .version-switcher-count {
  min-width: 14px;
  height: 14px;
  font-size: 9px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .version-switcher-trigger {
    border: 2px solid #ffffff;
  }

  .version-switcher-item {
    border-width: 2px;
  }

  .version-switcher-item.is-current,
  .version-switcher-item.is-selected {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .version-switcher-trigger,
  .version-switcher-dropdown,
  .version-switcher-item,
  .version-switcher-backdrop,
  .version-switcher-radio::after {
    transition: none;
  }

  .version-switcher-loading {
    animation: none;
  }
}

/* ===== VERSION SWITCHER PANEL (used by iotclass-versions.js) ===== */
.version-switcher-panel {
  position: fixed;
  z-index: 10000;
  min-width: 280px;
  max-width: 380px;
  max-height: 70vh;
  background: var(--vs-bg, #ffffff);
  border: 1px solid var(--vs-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

.version-switcher-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--vs-navy, #2c3e50);
  color: #ffffff;
}

.version-switcher-panel .panel-title {
  font-weight: 600;
  font-size: 14px;
}

.version-switcher-panel .panel-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.version-switcher-panel .panel-close:hover {
  opacity: 1;
}

.version-switcher-panel .panel-info {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vs-border, #e0e0e0);
  font-size: 12px;
  color: var(--vs-text-muted, #666666);
}

.version-switcher-panel .panel-info strong {
  color: var(--vs-text, #333333);
  word-break: break-word;
}

.version-switcher-panel .panel-options {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.version-switcher-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border: 2px solid transparent;
}

.version-switcher-option:hover {
  background: var(--vs-bg-hover, #f8f9fa);
}

.version-switcher-option--selected {
  background: rgba(22, 160, 133, 0.1);
  border-color: var(--vs-teal, #16a085);
}

.version-switcher-option .option-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.version-switcher-option .option-content {
  flex: 1;
  min-width: 0;
}

.version-switcher-option .option-label {
  font-weight: 500;
  font-size: 13px;
  color: var(--vs-text, #333333);
  display: block;
}

.version-switcher-option .option-description {
  font-size: 11px;
  color: var(--vs-text-muted, #666666);
  display: block;
  margin-top: 2px;
}

.version-switcher-option .option-preview {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--vs-border, #e0e0e0);
  flex-shrink: 0;
}

.version-switcher-option .option-check {
  color: var(--vs-teal, #16a085);
  font-size: 16px;
  flex-shrink: 0;
}

.version-switcher-panel .panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--vs-border, #e0e0e0);
  display: flex;
  justify-content: flex-end;
}

.version-switcher-panel .panel-reset {
  background: transparent;
  border: 1px solid var(--vs-border, #e0e0e0);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--vs-text-muted, #666666);
  transition: all 0.15s;
}

.version-switcher-panel .panel-reset:hover {
  background: var(--vs-bg-hover, #f8f9fa);
  color: var(--vs-text, #333333);
}

/* Backdrop for modal-like behavior */
.version-switcher-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

/* --- Section: Glossary Tooltips (was glossary-tooltips.css) --- */
/**
 * Glossary Tooltip Styles
 * Interactive hover definitions for IoT terminology
 */

/* Glossary term styling - underline indicates clickable/hoverable */
.glossary-term {
  border-bottom: 1px dotted #16a085;
  cursor: help;
  color: inherit;
  transition: border-color 0.2s ease;
}

.glossary-term:hover,
.glossary-term:focus {
  border-bottom-color: #e67e22;
  outline: none;
}

/* Tooltip container */
.glossary-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  padding: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e5e5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
}

.glossary-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tooltip header */
.glossary-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px 8px 0 0;
}

.glossary-tooltip-term {
  font-weight: bold;
  color: white;
  font-size: 14px;
}

.glossary-tooltip-link {
  font-size: 11px;
  color: #85c1e9;
  text-decoration: none;
  transition: color 0.2s ease;
}

.glossary-tooltip-link:hover {
  color: white;
  text-decoration: underline;
}

/* Tooltip content */
.glossary-tooltip-definition {
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2c3e50;
  border-bottom: 1px solid #e5e5e5;
}

.glossary-tooltip-simple {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
  background: #f8f9fa;
  border-radius: 0 0 8px 8px;
}

.glossary-tooltip-simple::before {
  content: "In simple terms: ";
  font-weight: 600;
  color: #16a085;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .glossary-tooltip {
    max-width: 280px;
    left: 10px !important;
    right: 10px;
  }
}

/* Print - hide tooltips */
@media print {
  .glossary-tooltip {
    display: none !important;
  }

  .glossary-term {
    border-bottom: none;
  }
}

/* --- Section: Progress Tracker (was progress-tracker.css) --- */
/**
 * Progress Tracker Styles
 * Styling for learning progress, milestones, and achievements
 */

/* Progress Badge */
.progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #27ae60 0%, #16a085 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  margin-left: 10px;
}

.progress-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);
}

.progress-score {
  font-size: 14px;
}

.progress-label {
  font-size: 10px;
  opacity: 0.9;
}

/* Milestone Notification */
.milestone-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 10000;
}

.milestone-notification.show {
  transform: translateX(0);
}

.milestone-icon {
  font-size: 32px;
}

.milestone-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.milestone-name {
  font-size: 16px;
  font-weight: bold;
  margin: 3px 0;
}

.milestone-desc {
  font-size: 12px;
  opacity: 0.9;
}

/* Progress Modal */
.progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.2s ease;
}

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

.progress-modal-content {
  background: white;
  border-radius: 16px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.3s ease;
}

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

.progress-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #7f8c8d;
  transition: color 0.2s ease;
}

.progress-modal-close:hover {
  color: #2c3e50;
}

.progress-modal h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 22px;
}

.progress-modal h4 {
  margin: 20px 0 15px 0;
  color: #2c3e50;
  font-size: 16px;
}

/* Progress Stats Grid */
.progress-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.progress-stat {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #16a085;
}

.stat-label {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 5px;
}

/* Milestone List */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fef5e7 0%, #fcf3cf 100%);
  padding: 12px 15px;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
}

.milestone-badge {
  font-size: 24px;
}

.milestone-info {
  flex: 1;
}

.milestone-info strong {
  color: #2c3e50;
}

.milestone-info small {
  color: #7f8c8d;
}

/* Progress Footer */
.progress-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-footer small {
  color: #7f8c8d;
}

.progress-reset {
  background: none;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.progress-reset:hover {
  background: #e74c3c;
  color: white;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .progress-badge {
    padding: 3px 8px;
    font-size: 11px;
  }

  .milestone-notification {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .progress-modal-content {
    padding: 20px;
    margin: 10px;
  }

  .progress-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-value {
    font-size: 24px;
  }
}

/* --- Section: Chapter Quiz (was chapter-quiz.css) --- */
/**
 * Chapter Quiz Styles
 * Comprehensive styling for multi-question chapter quizzes
 */

/* Main Container */
.chapter-quiz {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Header */
.cq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 12px;
  color: white;
  margin-bottom: 30px;
}

.cq-title h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
}

.cq-description {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.cq-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  min-width: 100px;
  justify-content: center;
}

.cq-timer-warning {
  animation: pulse-timer 1s ease-in-out infinite;
}

@keyframes pulse-timer {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.cq-timer-icon {
  font-size: 24px;
}

/* Progress Bar */
.cq-progress-container {
  margin-bottom: 30px;
}

.cq-progress-bar {
  width: 100%;
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.cq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a085 0%, #27ae60 100%);
  transition: width 0.3s ease;
}

.cq-progress-text {
  text-align: center;
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 600;
}

/* Question Container */
.cq-question-container {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.cq-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
}

.cq-question-number {
  font-size: 14px;
  font-weight: 600;
  color: #16a085;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cq-flag-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid #ecf0f1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #7f8c8d;
  transition: all 0.2s;
}

.cq-flag-button:hover {
  border-color: #3498db;
  color: #3498db;
}

.cq-flag-icon {
  font-size: 16px;
}

.cq-question-text {
  font-size: 18px;
  color: #2c3e50;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Options */
.cq-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cq-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 16px;
  position: relative;
}

.cq-option:hover {
  border-color: #16a085;
  background: #e8f6f3;
}

.cq-option.cq-selected {
  border-color: #16a085;
  background: #d5f4e6;
}

.cq-option-letter {
  width: 36px;
  height: 36px;
  background: #ecf0f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #2c3e50;
  flex-shrink: 0;
}

.cq-selected .cq-option-letter {
  background: #16a085;
  color: white;
}

.cq-option-text {
  flex: 1;
}

.cq-option-check {
  opacity: 0;
  color: #16a085;
  font-size: 20px;
  transition: opacity 0.2s;
}

.cq-selected .cq-option-check {
  opacity: 1;
}

/* Navigation */
.cq-navigation {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.cq-nav-button {
  padding: 12px 30px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s;
}

.cq-nav-button:hover:not(:disabled) {
  background: #1a252f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cq-nav-button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.5;
}

.cq-nav-button.cq-submit {
  background: #27ae60;
}

.cq-nav-button.cq-submit:hover {
  background: #229954;
}

.cq-nav-button.cq-review {
  background: #3498db;
}

.cq-nav-button.cq-review:hover {
  background: #2874a6;
}

.cq-nav-button.cq-retry {
  background: #e67e22;
}

.cq-nav-button.cq-retry:hover {
  background: #d68910;
}

/* Question Navigator */
.cq-question-navigator {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cq-nav-title {
  font-size: 14px;
  font-weight: 600;
  color: #7f8c8d;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cq-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  gap: 10px;
}

.cq-nav-number {
  width: 45px;
  height: 45px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #7f8c8d;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.cq-nav-number:hover {
  border-color: #16a085;
  background: #e8f6f3;
}

.cq-nav-number.cq-current {
  border-color: #2c3e50;
  background: #2c3e50;
  color: white;
}

.cq-nav-number.cq-answered {
  border-color: #16a085;
  background: #d5f4e6;
  color: #16a085;
}

.cq-nav-number.cq-flagged {
  position: relative;
}

.cq-nav-number.cq-flagged::after {
  content: "🚩";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
}

/* Review Screen */
.cq-review {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cq-review h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.cq-review p {
  color: #7f8c8d;
  margin-bottom: 30px;
}

.cq-review-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.cq-review-stat {
  text-align: center;
}

.cq-review-stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #16a085;
  margin-bottom: 5px;
}

.cq-review-stat-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cq-review-warning {
  padding: 15px 20px;
  background: #fef5e7;
  border-left: 4px solid #e67e22;
  border-radius: 4px;
  margin-bottom: 25px;
  color: #a04000;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cq-warning-icon {
  font-size: 24px;
}

.cq-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.cq-review-item {
  padding: 20px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.cq-review-item:hover {
  border-color: #16a085;
  background: #e8f6f3;
}

.cq-review-item.cq-unanswered {
  border-color: #e67e22;
  background: #fef5e7;
}

.cq-review-item.cq-flagged {
  border-color: #3498db;
  background: #ebf5fb;
}

.cq-review-item-number {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}

.cq-review-item-status {
  font-size: 14px;
  color: #7f8c8d;
}

.cq-review-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* Results */
.cq-results {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.cq-results-header {
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
}

.cq-results-header.cq-passed {
  background: linear-gradient(135deg, #d5f4e6 0%, #a9dfbf 100%);
}

.cq-results-header.cq-failed {
  background: linear-gradient(135deg, #fef5e7 0%, #fad7a0 100%);
}

.cq-results-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.cq-results-header h2 {
  margin: 0 0 10px 0;
  font-size: 32px;
  color: #2c3e50;
}

.cq-results-header p {
  margin: 0;
  font-size: 16px;
  color: #7f8c8d;
}

.cq-results-score {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

.cq-results-score-circle {
  position: relative;
  width: 200px;
  height: 200px;
}

.cq-results-score-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cq-results-score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cq-results-percentage {
  font-size: 48px;
  font-weight: bold;
  color: #2c3e50;
}

.cq-results-fraction {
  font-size: 18px;
  color: #7f8c8d;
}

.cq-results-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.cq-results-stat {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.cq-results-stat-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cq-results-stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.cq-results-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Detailed Review */
.cq-detailed-review {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cq-detailed-review h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.cq-detailed-review p {
  color: #7f8c8d;
  margin-bottom: 30px;
}

.cq-review-questions {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}

.cq-review-question {
  padding: 25px;
  border-radius: 12px;
  border: 2px solid #ecf0f1;
}

.cq-review-question.cq-correct {
  border-color: #27ae60;
  background: #d5f4e6;
}

.cq-review-question.cq-incorrect {
  border-color: #e74c3c;
  background: #fadbd8;
}

.cq-review-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.cq-review-question-number {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cq-review-question-result {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

.cq-review-question-result.cq-correct {
  background: #27ae60;
  color: white;
}

.cq-review-question-result.cq-incorrect {
  background: #e74c3c;
  color: white;
}

.cq-review-question-text {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 20px;
  line-height: 1.6;
}

.cq-review-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.cq-review-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
}

.cq-review-option.cq-correct-answer {
  border-color: #27ae60;
  background: #d5f4e6;
}

.cq-review-option.cq-user-answer:not(.cq-correct-answer) {
  border-color: #e74c3c;
  background: #fadbd8;
}

.cq-option-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.cq-option-badge.cq-right {
  background: #27ae60;
  color: white;
}

.cq-option-badge.cq-wrong {
  background: #e74c3c;
  color: white;
}

.cq-review-explanation {
  padding: 15px;
  background: #fef9e7;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
  font-size: 14px;
  color: #5d4037;
  line-height: 1.6;
}

/* Max Attempts */
.cq-max-attempts {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.cq-max-attempts-icon {
  font-size: 72px;
  margin-bottom: 20px;
}

.cq-max-attempts h2 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.cq-max-attempts p {
  color: #7f8c8d;
  margin-bottom: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .chapter-quiz {
    padding: 10px;
  }

  .cq-header {
    flex-direction: column;
    gap: 20px;
  }

  .cq-timer {
    width: 100%;
  }

  .cq-question-container {
    padding: 20px;
  }

  .cq-navigation {
    flex-direction: column;
  }

  .cq-nav-button {
    width: 100%;
  }

  .cq-nav-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
  }

  .cq-nav-number {
    width: 40px;
    height: 40px;
  }

  .cq-results-stats,
  .cq-review-stats {
    grid-template-columns: 1fr 1fr;
  }

  .cq-results-actions,
  .cq-review-actions {
    flex-direction: column;
  }

  .cq-results-actions .cq-nav-button,
  .cq-review-actions .cq-nav-button {
    width: 100%;
  }
}

/* Print Styles */
@media print {
  .cq-timer,
  .cq-navigation,
  .cq-question-navigator,
  .cq-flag-button,
  .cq-results-actions,
  .cq-review-actions {
    display: none !important;
  }

  .chapter-quiz {
    max-width: 100%;
  }

  .cq-header {
    background: white;
    color: black;
    border: 1px solid #ecf0f1;
  }
}

/**
 * IoT Class Feedback & Progress Tracking Styles
 */

/* === FEEDBACK SECTION === */

.iotclass-feedback-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}

.feedback-container h4 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
  text-align: center;
}

.feedback-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.feedback-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.feedback-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feedback-btn.feedback-up:hover,
.feedback-btn.feedback-up.selected {
  border-color: #16a085;
  background: #e8f8f5;
}

.feedback-btn.feedback-down:hover,
.feedback-btn.feedback-down.selected {
  border-color: #e67e22;
  background: #fef5e7;
}

.feedback-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.feedback-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.feedback-label {
  font-size: 0.85rem;
  color: #666;
}

.feedback-comment-section {
  margin-top: 1rem;
}

.feedback-comment-section textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}

.feedback-comment-section textarea:focus {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}

.feedback-submit-btn {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.feedback-submit-btn:hover {
  background: #138d75;
}

.feedback-thanks {
  text-align: center;
  color: #16a085;
  font-weight: 500;
  padding: 1rem;
  background: #e8f8f5;
  border-radius: 8px;
}

/* === PROGRESS TRACKING (now at bottom of page) === */

.iotclass-progress-check {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.progress-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.2s;
}

.progress-checkbox-label:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.progress-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #16a085;
}

.progress-checkbox:checked + .progress-checkbox-text {
  color: #16a085;
  font-weight: 500;
}

.iotclass-progress-check.progress-saved .progress-checkbox-label {
  background: #e8f8f5;
  border-color: #16a085;
}

/* === ADMIN LINK === */

.iotclass-admin-link {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.admin-link-btn,
.admin-logout-btn {
  font-size: 0.85rem;
  color: #666;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.admin-link-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

.admin-logout-btn:hover {
  background: #fee;
  color: #c00;
}

/* === ADMIN MODAL === */

.iotclass-admin-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.admin-modal-content {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #2c3e50;
  color: white;
}

.admin-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.admin-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.admin-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}

.admin-loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stats-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-card {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.stats-grid-wide .stat-card {
  text-align: left;
}

.stats-grid-wide .stat-card h3 {
  margin-top: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stat-card.stat-up {
  background: #e8f8f5;
}

.stat-card.stat-down {
  background: #fef5e7;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 0.85rem;
  color: #666;
}

/* Feedback List */
.admin-feedback-list,
.admin-comments-list {
  margin-top: 1.5rem;
}

.admin-feedback-list h3,
.admin-comments-list h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

.feedback-item,
.comment-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.feedback-item.up {
  border-left: 3px solid #16a085;
}

.feedback-item.down {
  border-left: 3px solid #e67e22;
}

.feedback-vote {
  font-size: 1.2rem;
}

.feedback-chapter,
.comment-chapter {
  font-weight: 500;
  color: #2c3e50;
}

.feedback-comment,
.comment-text {
  flex: 1;
  color: #666;
  font-style: italic;
}

.feedback-time,
.comment-time {
  font-size: 0.8rem;
  color: #999;
}

.comment-status {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: #ffc107;
  color: #333;
  border-radius: 4px;
}

.comment-status.status-pending {
  background: #ffc107;
}

.comment-status.status-resolved {
  background: #28a745;
  color: white;
}

/* Error message */
.feedback-error {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  text-align: center;
}

/* Feedback actions row */
.feedback-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.feedback-cancel-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.feedback-cancel-btn:hover {
  background: #5a6268;
}

/* Admin login form */
.admin-login-form {
  text-align: center;
}

.admin-login-form p {
  margin-bottom: 1rem;
  color: #666;
}

.admin-username-input,
.admin-password-input {
  width: 100%;
  max-width: 300px;
  padding: 0.75rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.admin-username-input:focus,
.admin-password-input:focus {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}

.admin-login-actions {
  margin-top: 1rem;
}

.admin-login-submit {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.admin-login-submit:hover {
  background: #138d75;
}

.admin-login-submit:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

/* Admin error */
.admin-error {
  text-align: center;
  padding: 2rem;
  color: #721c24;
}

/* Empty message */
.empty-message {
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* Admin footer */
.admin-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  text-align: center;
  color: #999;
}

/* === RESPONSIVE === */

@media (max-width: 600px) {
  .feedback-buttons {
    flex-direction: column;
    align-items: center;
  }

  .feedback-btn {
    width: 100%;
    max-width: 200px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-modal-content {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* === SECTION-LEVEL FEEDBACK (Hover Popup System) === */

/* Trigger icon that appears on section headers */
.section-feedback-trigger {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  vertical-align: middle;
}

/* Show trigger on header hover */
h2:hover .section-feedback-trigger,
h3:hover .section-feedback-trigger,
h4:hover .section-feedback-trigger,
h5:hover .section-feedback-trigger,
.section-feedback-trigger:hover {
  opacity: 1;
}

.trigger-icon {
  font-size: 0.85em;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  transition: all 0.15s ease;
}

.trigger-icon:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.trigger-icon.trigger-done {
  background: #e8f8f5;
  border-color: #16a085;
  color: #16a085;
  opacity: 0.7;
}

/* Feedback popup panel */
.section-feedback-popup {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  z-index: 10000;
  min-width: 160px;
}

.popup-header {
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #eee;
}

.popup-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.popup-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1;
}

.popup-btn:hover {
  background: #f0f0f0;
  border-color: #ddd;
  transform: scale(1.1);
}

.popup-up:hover {
  background: #e8f8f5;
  border-color: #16a085;
}

.popup-down:hover {
  background: #fef5e7;
  border-color: #e67e22;
}

.popup-star:hover {
  background: #fff8e1;
  border-color: #f9a825;
}

.popup-comment:hover {
  background: #e3f2fd;
  border-color: #2196f3;
}

/* Star rating popup */
.star-rating-popup {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  z-index: 1000;
  min-width: 250px;
  margin-top: 0.5rem;
}

.star-rating-popup::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: white;
  border-left: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6;
  transform: rotate(45deg);
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.rating-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.rating-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #555;
}

.rating-label-icon {
  font-size: 1rem;
}

.star-rating {
  display: flex;
  gap: 0.15rem;
}

.star-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #ddd;
  transition:
    color 0.1s,
    transform 0.1s;
  padding: 0;
  line-height: 1;
}

.star-btn:hover {
  transform: scale(1.2);
}

.star-btn.active,
.star-btn:hover,
.star-rating:hover .star-btn {
  color: #f9a825;
}

.star-rating .star-btn:hover ~ .star-btn {
  color: #ddd;
}

.rating-submit-btn {
  width: 100%;
  background: #16a085;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.rating-submit-btn:hover {
  background: #138d75;
}

.rating-submit-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

/* Section comment modal */
.section-comment-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.section-comment-modal {
  background: white;
  border-radius: 12px;
  max-width: 450px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.section-comment-modal h4 {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.section-comment-modal .section-name {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.section-comment-modal textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 100px;
  margin-bottom: 1rem;
}

.section-comment-modal textarea:focus {
  outline: none;
  border-color: #e67e22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}

.section-comment-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.section-comment-cancel {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.section-comment-cancel:hover {
  background: #5a6268;
}

.section-comment-submit {
  background: #e67e22;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.section-comment-submit:hover {
  background: #d35400;
}

.section-comment-submit:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

/* Vote count badges */
.vote-count {
  font-size: 0.75rem;
  color: #999;
  margin-left: -0.2rem;
}

/* Section feedback submitted state */
.section-feedback.submitted {
  opacity: 0.8;
}

.section-feedback.submitted .section-vote-btn,
.section-feedback.submitted .section-rate-btn {
  pointer-events: none;
}

/* === CHAPTER RATING GRID === */

.chapter-rating-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.chapter-rating-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.chapter-rating-item .rating-label {
  font-size: 0.9rem;
  color: #555;
}

.chapter-star-rating {
  display: flex;
  gap: 0.25rem;
}

.chapter-star-rating .star-btn {
  font-size: 1.5rem;
}

/* === MODAL ACTION BUTTONS === */

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.btn-primary {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #138d75;
}

.btn-primary:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: #5a6268;
}

/* Section feedback done state */
.section-feedback-done {
  color: #16a085;
  font-size: 0.9rem;
  font-weight: bold;
}

/* Rating comment in modal */
.rating-comment {
  margin-top: 0.75rem;
}

.rating-comment-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.rating-comment-input:focus {
  outline: none;
  border-color: #16a085;
}

/* Section comment form in modal */
.section-comment-form p {
  margin: 0 0 0.75rem 0;
  color: #555;
}

.section-comment-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}

.section-comment-input:focus {
  outline: none;
  border-color: #e67e22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}

/* Admin login error */
.admin-login-error {
  color: #dc3545;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem;
  margin: 0.5rem 0;
}

/* Admin stats section */
.admin-stats h3,
.admin-feedback-list h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

.feedback-section {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
}

/* === MODULE INFO BAR (replaces user status bar) === */

.iotclass-user-status {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #2c3e50;
  color: white;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-status-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

/* Left side: home link + logo + module name */
.module-bar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.module-bar-home {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s;
}

.module-bar-home:hover {
  opacity: 0.85;
  color: #ffffff !important;
  text-decoration: none;
}

/* Sidebar toggle button in the module bar */
.module-bar-sidebar-toggle {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
}

.module-bar-sidebar-toggle:hover {
  opacity: 1;
}

/* Search button in the module bar */
.module-bar-search {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  padding: 0.25rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.module-bar-search:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.module-bar-search kbd {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.9);
}

.module-bar-search .bi {
  font-size: 0.85rem;
}

.module-bar-separator {
  opacity: 0.35;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.module-bar-logo {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.module-bar-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right side: user badge + actions */
.module-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.user-status-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.status-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.status-text {
  color: inherit;
  opacity: 0.9;
}

.status-text strong {
  color: #f1c40f;
}

.user-id {
  font-family: monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.admin-badge .status-text {
  color: #f1c40f;
}

.admin-badge .status-text strong {
  color: #f1c40f;
}

.reader-badge .status-text {
  opacity: 0.85;
}

.guest-badge .status-text {
  opacity: 0.7;
  font-style: italic;
}

@media (max-width: 640px) {
  .iotclass-user-status {
    padding: 0.4rem 0.75rem;
  }

  .user-status-content {
    gap: 0.5rem;
  }

  .module-bar-right {
    gap: 0.35rem;
  }

  .module-bar-search {
    padding: 0.25rem 0.5rem;
    gap: 0.3rem;
  }

  .module-bar-search kbd {
    display: none;
  }
}

@media (max-width: 480px) {
  .module-bar-home {
    font-size: 0.8rem;
  }

  .guest-badge .status-text {
    display: none;
  }
}

.user-status-actions {
  display: flex;
  gap: 0.5rem;
}

.status-btn {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s;
}

.status-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.status-dashboard-btn {
  background: rgba(22, 160, 133, 0.3);
  border-color: #16a085;
}

.status-dashboard-btn:hover {
  background: rgba(22, 160, 133, 0.5);
}

.status-logout-btn {
  background: rgba(231, 76, 60, 0.2);
  border-color: rgba(231, 76, 60, 0.5);
}

.status-logout-btn:hover {
  background: rgba(231, 76, 60, 0.4);
}

.status-login-btn {
  background: rgba(52, 152, 219, 0.2);
  border-color: rgba(52, 152, 219, 0.5);
}

.status-login-btn:hover {
  background: rgba(52, 152, 219, 0.4);
}

/* Tablet: hide logo, keep module name */
@media (max-width: 767px) {
  .module-bar-logo {
    display: none;
  }

  .module-bar-separator {
    display: none;
  }

  .module-bar-name {
    max-width: 200px;
    font-size: 0.82rem;
  }

  .iotclass-user-status {
    padding: 0.35rem 0.75rem;
  }
}

/* Small mobile: hide module name, keep just home link + badge */
@media (max-width: 480px) {
  .module-bar-name {
    display: none;
  }

  .status-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
  }
}

/* === ADMIN IMAGE VERSION MANAGEMENT === */

.admin-image-container {
  position: relative;
  display: inline-block;
}

.admin-image-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(44, 62, 80, 0.9);
  border: 2px solid #f1c40f;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  opacity: 0.6;
  z-index: 100;
}

.admin-image-container:hover .admin-image-indicator {
  opacity: 1;
}

.admin-image-indicator:hover {
  transform: scale(1.1);
  background: #2c3e50;
}

/* Image Version Panel */
.admin-image-panel {
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 280px;
  max-width: 350px;
  z-index: 10001;
  overflow: hidden;
}

.image-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #2c3e50;
  color: white;
  font-weight: 500;
}

.image-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.image-panel-body {
  padding: 1rem;
}

.current-image {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.image-path {
  font-size: 0.75rem;
  background: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.version-list {
  max-height: 250px;
  overflow-y: auto;
}

.version-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  transition: all 0.15s ease;
}

.version-item:hover {
  background: #f8f9fa;
  border-color: #dee2e6;
}

.version-item.selected {
  background: #e8f8f5;
  border-color: #16a085;
}

.version-preview {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
}

.version-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.version-info {
  flex: 1;
  min-width: 0;
}

.version-name {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.version-type {
  display: block;
  font-size: 0.75rem;
  color: #888;
  text-transform: capitalize;
}

.version-actions {
  display: flex;
  gap: 0.25rem;
}

.version-select-btn,
.version-delete-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.version-select-btn:hover {
  background: #e8f8f5;
  border-color: #16a085;
  color: #16a085;
}

.version-delete-btn:hover {
  background: #fee;
  border-color: #e74c3c;
  color: #e74c3c;
}

.no-versions {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 1rem 0;
}

.add-version-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}

.add-version-btn {
  width: 100%;
  padding: 0.6rem;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 6px;
  color: #666;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-version-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #333;
}

/* Add Version Modal Form */
.add-version-form .form-group {
  margin-bottom: 1rem;
}

.add-version-form label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.35rem;
}

.add-version-form input[type="text"],
.add-version-form select,
.add-version-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

.add-version-form input:focus,
.add-version-form select:focus,
.add-version-form textarea:focus {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}

/* === ADMIN SOURCE TAGGING === */

.admin-source-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  font-size: 0.85em;
  padding: 0.15rem 0.3rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  vertical-align: middle;
}

h2:hover .admin-source-indicator,
h3:hover .admin-source-indicator,
h4:hover .admin-source-indicator,
h5:hover .admin-source-indicator,
.admin-source-indicator:hover {
  opacity: 1;
}

.admin-source-indicator:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

/* Source Tag Panel */
.admin-source-panel {
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 260px;
  max-width: 320px;
  z-index: 10001;
  overflow: hidden;
}

.source-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: #34495e;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
}

.source-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.source-panel-body {
  padding: 0.75rem;
}

.source-list {
  max-height: 200px;
  overflow-y: auto;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  transition: all 0.15s ease;
}

.source-item:hover {
  background: #f8f9fa;
}

.source-item.tagged {
  background: #e8f8f5;
  border-color: #16a085;
}

.source-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.source-name {
  flex: 1;
  font-size: 0.9rem;
  color: #333;
}

.source-toggle-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.source-item.tagged .source-toggle-btn {
  background: #16a085;
  border-color: #16a085;
  color: white;
}

.source-toggle-btn:hover {
  background: #e9ecef;
}

.source-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}

.manage-sources-btn {
  width: 100%;
  padding: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.manage-sources-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.no-sources {
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.75rem 0;
}

/* Source Tag Bar (displayed on sections) */
.source-tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.source-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Quick Source Menu (right-click context menu) */
.quick-source-menu {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  z-index: 10002;
  overflow: hidden;
}

.source-menu-header {
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #eee;
}

.source-menu-item {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.source-menu-item:hover {
  background: #f0f0f0;
}

.source-menu-cancel {
  color: #888;
  border-top: 1px solid #eee;
  text-align: center;
}

/* Source Management Modal */
.source-management {
  max-height: 60vh;
  overflow-y: auto;
}

.source-list-manage {
  margin-bottom: 1.5rem;
}

.source-manage-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.source-color-block {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.source-manage-item .source-name {
  flex: 1;
  font-weight: 500;
}

.source-type {
  font-size: 0.8rem;
  color: #888;
  text-transform: capitalize;
}

.source-edit-btn,
.source-delete-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

.source-edit-btn:hover {
  background: #e8f8f5;
  border-color: #16a085;
}

.source-delete-btn:hover {
  background: #fee;
  border-color: #e74c3c;
  color: #e74c3c;
}

.add-source-section {
  padding-top: 1rem;
  border-top: 2px solid #eee;
}

.add-source-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: #333;
}

.form-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.form-row input,
.form-row select {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
}

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: #16a085;
}

.source-color-input {
  width: 50px !important;
  flex: 0 0 50px !important;
  padding: 0.25rem !important;
  cursor: pointer;
}

.source-desc-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.75rem;
}

.add-source-btn {
  width: 100%;
  padding: 0.6rem;
  background: #16a085;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.add-source-btn:hover {
  background: #138d75;
}

/* === TRANSFER LOG DASHBOARD === */

.transfer-log-container {
  max-height: 60vh;
  overflow-y: auto;
}

.transfer-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #eee;
}

.transfer-log-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.transfer-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.transfer-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  min-width: 80px;
}

.transfer-stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.transfer-stat-label {
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
}

.transfer-stat.stat-matched {
  background: #e8f8f5;
  border-left: 3px solid #16a085;
}

.transfer-stat.stat-inserted {
  background: #e3f2fd;
  border-left: 3px solid #2196f3;
}

.transfer-stat.stat-merged {
  background: #fff8e1;
  border-left: 3px solid #f9a825;
}

.transfer-stat.stat-skipped {
  background: #fce4ec;
  border-left: 3px solid #e91e63;
}

/* Transfer Filters */
.transfer-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.transfer-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.transfer-filter label {
  font-size: 0.75rem;
  color: #666;
  font-weight: 500;
}

.transfer-filter select,
.transfer-filter input {
  padding: 0.4rem 0.6rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 0.85rem;
  min-width: 120px;
}

.transfer-filter select:focus,
.transfer-filter input:focus {
  outline: none;
  border-color: #16a085;
}

/* Transfer List */
.transfer-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.transfer-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid transparent;
  font-size: 0.85rem;
}

.transfer-item.action-matched {
  border-left-color: #16a085;
}

.transfer-item.action-inserted {
  border-left-color: #2196f3;
}

.transfer-item.action-merged {
  border-left-color: #f9a825;
}

.transfer-item.action-skipped {
  border-left-color: #e91e63;
}

.transfer-source-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.transfer-source-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.transfer-source-name {
  font-weight: 500;
  color: #333;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.transfer-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: monospace;
  font-size: 0.8rem;
}

.transfer-path-source {
  color: #666;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-path-arrow {
  color: #16a085;
  font-weight: bold;
}

.transfer-path-target {
  color: #2c3e50;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-preview {
  font-size: 0.75rem;
  color: #888;
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-action {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.transfer-action.action-matched {
  background: #e8f8f5;
  color: #16a085;
}

.transfer-action.action-inserted {
  background: #e3f2fd;
  color: #1976d2;
}

.transfer-action.action-merged {
  background: #fff8e1;
  color: #f57c00;
}

.transfer-action.action-skipped {
  background: #fce4ec;
  color: #c2185b;
}

.transfer-time {
  font-size: 0.75rem;
  color: #999;
  white-space: nowrap;
}

/* Empty state */
.transfer-empty {
  text-align: center;
  padding: 2rem;
  color: #888;
  font-style: italic;
}

/* Transfer log actions */
.transfer-log-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.transfer-action-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #f8f9fa;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.transfer-action-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.transfer-action-btn.btn-danger {
  color: #dc3545;
}

.transfer-action-btn.btn-danger:hover {
  background: #fee;
  border-color: #dc3545;
}

/* Admin Modal Tabs */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
}

.admin-tab {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #666;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-tab:hover {
  color: #333;
  background: #f8f9fa;
}

.admin-tab.active {
  color: #16a085;
  border-bottom-color: #16a085;
  font-weight: 500;
}

.admin-tab-content {
  display: none;
}

.admin-tab-content.active {
  display: block;
}

/* =============================================
   Part-Colors: Sidebar Module Colors
   Uses CSS custom properties set by part-colors.js:
   --pc-main, --pc-light, --pc-border, --pc-text
   ============================================= */

/* --- Pre-JavaScript Fallback Styles ---
   These rules apply BEFORE part-colors.js adds data-pc attributes.
   They use CSS custom properties (set by inline CSS injected by serve.sh)
   so sidebar shows correct module colors IMMEDIATELY on page load.
   Fallback values (after comma) are used if no inline CSS is present. */

/* Fallback for sidebar section headers (before JS adds data-pc-header) */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container {
  background: var(--pc-main, #2c3e50);
  border-radius: 6px;
  margin: 0.5rem 0;
}

#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-text {
  color: var(--pc-text, #ffffff);
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.grid-container h3,
.path-container h3,
.quick-links-grid h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-toggle {
  color: var(--pc-text, #ffffff);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Fallback for sidebar links (before JS adds data-pc) */
#quarto-sidebar .sidebar-item a:not([data-pc]) {
  background: var(--pc-light, #f0f4f8);
  color: var(--pc-fg, #2c3e50);
  border-left: 2px solid var(--pc-border, #5a7a9a);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  /* NO transition here - prevents visible animation when JS adds [data-pc] */
  /* Match [data-pc] rules to prevent layout shift */
  display: block;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
}

#quarto-sidebar .sidebar-item a:not([data-pc]):hover {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff);
  transform: translateX(2px);
  font-weight: 600;
}

/* Fallback active state (before JS adds data-pc) - white text on dark background */
#quarto-sidebar .sidebar-item a:not([data-pc]).active {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff) !important;
  font-weight: 600;
}

#quarto-sidebar .sidebar-item a:not([data-pc]).active .menu-text,
#quarto-sidebar .sidebar-item a:not([data-pc]).active .chapter-number,
#quarto-sidebar .sidebar-item a:not([data-pc]).active .chapter-title,
#quarto-sidebar .sidebar-item a:not([data-pc]).active span {
  color: var(--pc-text, #ffffff) !important;
}

/* Fallback for sidebar list items (before JS adds data-pc) */
#quarto-sidebar .sidebar-item li:not([data-pc]) {
  margin: 0;
  padding: 0;
}

/* --- End Pre-JavaScript Fallback Styles --- */

/* Common styling for all part-colored sidebar links */
#quarto-sidebar .sidebar-item a[data-pc] {
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  margin: 0;
  border-radius: 3px;
  display: block;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.1s ease;
  background: var(--pc-light, #f0f4f8);
  color: var(--pc-fg, #2c3e50);
  border-left: 2px solid var(--pc-border, #5a7a9a);
}

#quarto-sidebar .sidebar-item a[data-pc]:hover {
  transform: translateX(2px);
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff);
  font-weight: 600;
}

#quarto-sidebar .sidebar-item a[data-pc].active {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff) !important;
  font-weight: 600;
}

/* Ensure nested spans in active links also get white text */
#quarto-sidebar .sidebar-item a[data-pc].active .menu-text,
#quarto-sidebar .sidebar-item a[data-pc].active .chapter-number,
#quarto-sidebar .sidebar-item a[data-pc].active .chapter-title,
#quarto-sidebar .sidebar-item a[data-pc].active span {
  color: var(--pc-text, #ffffff) !important;
}

#quarto-sidebar .sidebar-item a[data-pc] .menu-text,
#quarto-sidebar .sidebar-item a[data-pc] span {
  color: inherit;
}

#quarto-sidebar li[data-pc] {
  margin: 0;
  padding: 0;
}

/* Part section containers - unified bar design */
#quarto-sidebar .sidebar-item-section[data-pc-section] {
  margin: 0.5rem 0;
  padding: 0;
}

#quarto-sidebar .sidebar-item-section[data-pc-section] > .sidebar-item-container {
  display: flex;
  align-items: center;
  background: var(--pc-main, #2c3e50);
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Part section headers - NO separate background, uses container */
#quarto-sidebar [data-pc-header] {
  padding: 0.5rem 0.75rem;
  display: block;
  flex: 1;
  min-width: 0;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  text-decoration: none;
  background: transparent;
  color: var(--pc-text, #ffffff);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

#quarto-sidebar [data-pc-header] .menu-text {
  color: inherit;
}

/* Part toggle buttons - NO separate background, uses container */
#quarto-sidebar [data-pc-toggle] {
  background: transparent;
  color: var(--pc-text, #ffffff);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.6rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect on the container */
#quarto-sidebar .sidebar-item-section[data-pc-section] > .sidebar-item-container:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   INLINE KNOWLEDGE CHECKS
   Moved from inline-knowledge-checks.js to prevent style flash (FOUC)
   ========================================================================== */

.inline-knowledge-check {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 20px;
  margin: 25px 0;
  transition: border-color 0.3s;
}

.inline-knowledge-check:hover {
  border-color: #16a085;
}

.ikc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6;
}

.ikc-icon {
  font-size: 24px;
}

.ikc-title {
  font-weight: bold;
  color: #2c3e50;
  flex: 1;
}

.ikc-xp {
  background: #16a085;
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.ikc-xp-earned {
  background: #27ae60 !important;
  animation: ikc-pulse 0.5s ease;
}

.ikc-xp-missed {
  background: #95a5a6 !important;
}

@keyframes ikc-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.ikc-attempts {
  background: #3498db;
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  margin-right: auto;
}

.ikc-mode-quiz .ikc-header {
  background: linear-gradient(90deg, #3498db 0%, #2874a6 100%);
  margin: -20px -20px 15px -20px;
  padding: 15px 20px;
  border-radius: 12px 12px 0 0;
  color: white;
}

.ikc-mode-quiz .ikc-title,
.ikc-mode-quiz .ikc-attempts {
  color: white !important;
}

.ikc-incorrect-attempt {
  animation: ikc-shake 0.5s ease;
  border-color: #e74c3c !important;
}

@keyframes ikc-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-10px);
  }
  40%,
  80% {
    transform: translateX(10px);
  }
}

.ikc-question {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 15px;
  line-height: 1.5;
}

.ikc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ikc-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: white;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 14px;
}

.ikc-option:hover:not(.ikc-disabled) {
  border-color: #16a085;
  background: #e8f6f3;
}

.ikc-option-letter {
  width: 28px;
  height: 28px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #666;
  flex-shrink: 0;
}

.ikc-option-text {
  flex: 1;
}

.ikc-disabled {
  cursor: default;
  opacity: 0.8;
}

.ikc-correct {
  border-color: #27ae60 !important;
  background: #d5f4e6 !important;
}

.ikc-correct .ikc-option-letter {
  background: #27ae60;
  color: white;
}

.ikc-incorrect {
  border-color: #e74c3c !important;
  background: #fadbd8 !important;
}

.ikc-incorrect .ikc-option-letter {
  background: #e74c3c;
  color: white;
}

.ikc-feedback {
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 14px;
}

.ikc-result-correct {
  color: #27ae60;
  font-weight: bold;
}

.ikc-result-incorrect {
  color: #e74c3c;
  font-weight: bold;
}

.ikc-explanation {
  margin-top: 15px;
  padding: 15px;
  background: #fef9e7;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
  font-size: 14px;
  color: #5d4037;
}

.ikc-celebration {
  position: absolute;
  font-size: 48px;
  animation: ikc-celebrate 1.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ikc-celebrate {
  0% {
    opacity: 1;
    transform: scale(0.5) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) translateY(-30px);
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-60px);
  }
}

.ikc-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* IKC Multi-select mode */
.ikc-instruction {
  font-size: 13px;
  color: #6c757d;
  font-style: italic;
  margin-bottom: 10px;
}

.ikc-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #adb5bd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  font-size: 12px;
  color: white;
}

.ikc-option.ikc-selected .ikc-checkbox {
  background: #16a085;
  border-color: #16a085;
}

.ikc-option.ikc-selected .ikc-checkbox::after {
  content: "\2713";
}

.ikc-option.ikc-selected {
  border-color: #16a085;
  background: #e8f6f3;
}

.ikc-option.ikc-disabled.ikc-correct .ikc-checkbox {
  background: #27ae60;
  border-color: #27ae60;
}

.ikc-option.ikc-disabled.ikc-correct .ikc-checkbox::after {
  content: "\2713";
}

.ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox {
  background: #e74c3c;
  border-color: #e74c3c;
}

.ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox::after {
  content: "\2717";
}

.ikc-option.ikc-missed {
  border-color: #f39c12 !important;
  background: #fef9e7 !important;
}

.ikc-option.ikc-missed .ikc-checkbox {
  background: #f39c12;
  border-color: #f39c12;
}

.ikc-option.ikc-missed .ikc-checkbox::after {
  content: "!";
  font-weight: bold;
}

.ikc-submit-btn {
  margin-top: 10px;
  padding: 10px 24px;
  background: #16a085;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-start;
}

.ikc-submit-btn:hover:not(:disabled) {
  background: #138d75;
}

.ikc-submit-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
}

/* IKC Dark mode support */
@media (prefers-color-scheme: dark) {
  .inline-knowledge-check {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-color: #4a5568;
  }

  .ikc-header {
    border-bottom-color: #4a5568;
  }

  .ikc-title,
  .ikc-question {
    color: #ecf0f1;
  }

  .ikc-option {
    background: #34495e;
    border-color: #4a5568;
    color: #ecf0f1;
  }

  .ikc-option:hover:not(.ikc-disabled) {
    background: #3d566e;
  }

  .ikc-option-letter {
    background: #4a5568;
    color: #ecf0f1;
  }

  .ikc-checkbox {
    border-color: #6b7280;
  }

  .ikc-option.ikc-selected {
    background: #1a3a35;
    border-color: #16a085;
  }

  .ikc-instruction {
    color: #9ca3af;
  }

  .ikc-submit-btn {
    background: #16a085;
  }

  .ikc-submit-btn:disabled {
    background: #4a5568;
  }

  .ikc-correct {
    border-color: #27ae60 !important;
    background: #1a3d2a !important;
  }

  .ikc-correct .ikc-option-letter {
    background: #27ae60;
    color: white;
  }

  .ikc-incorrect {
    border-color: #e74c3c !important;
    background: #3d1a1a !important;
  }

  .ikc-incorrect .ikc-option-letter {
    background: #e74c3c;
    color: white;
  }

  .ikc-option.ikc-missed {
    border-color: #f39c12 !important;
    background: #3d3015 !important;
  }

  .ikc-option.ikc-missed .ikc-checkbox {
    background: #f39c12;
    border-color: #f39c12;
  }

  .ikc-result-correct {
    color: #2ecc71;
  }

  .ikc-result-incorrect {
    color: #e74c3c;
  }

  .ikc-explanation {
    background: #3d3015;
    border-left-color: #f39c12;
    color: #ecf0f1;
  }

  .ikc-option.ikc-disabled.ikc-correct .ikc-checkbox {
    background: #27ae60;
    border-color: #27ae60;
  }

  .ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox {
    background: #e74c3c;
    border-color: #e74c3c;
  }
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   Error handler toast animations
   Moved from error-handler.js to prevent style flash (FOUC)
   ========================================================================== */

@keyframes iotclass-toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes iotclass-toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Export toast animation (from export-utils.js) */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

/* Badge notification animations (from badge-system.js) */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ==========================================================================
   GAMIFICATION STYLES
   Moved from gamification.js to prevent style flash (FOUC)
   ========================================================================== */

.streak-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: bold;
  margin-left: 10px;
  cursor: pointer;
}

.streak-flame {
  font-size: 16px;
}

.gamification-notification {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 10001;
}

.gamification-notification.show {
  transform: translateX(0);
}

.badge-notification {
  background: linear-gradient(135deg, #fef5e7 0%, #fcf3cf 100%);
  border: 2px solid #f39c12;
}

.xp-notification {
  background: linear-gradient(135deg, #e8f6f3 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
  padding: 10px 20px;
}

.xp-amount {
  font-size: 20px;
  font-weight: bold;
  color: #27ae60;
}

.xp-reason {
  color: #666;
  font-size: 13px;
  margin-left: 10px;
}

.challenge-notification {
  background: linear-gradient(135deg, #e8f6f3 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
}

.level-notification {
  background: linear-gradient(135deg, #e8daef 0%, #d2b4de 100%);
  border: 2px solid #9b59b6;
}

.gn-icon {
  font-size: 36px;
}

.gn-title {
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 1px;
}

.gn-name {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.gn-desc {
  font-size: 12px;
  color: #666;
}

.gn-xp {
  font-size: 14px;
  font-weight: bold;
  color: #27ae60;
  margin-top: 5px;
}

.daily-challenge-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 280px;
  z-index: 1000;
  overflow: hidden;
}

.daily-challenge-widget.collapsed .dcw-content {
  display: none;
}

.daily-challenge-widget.completed {
  border: 2px solid #27ae60;
}

.dcw-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  cursor: pointer;
}

.dcw-icon {
  font-size: 20px;
}

.dcw-title {
  flex: 1;
  font-weight: bold;
}

.dcw-toggle {
  font-size: 12px;
  transition: transform 0.3s;
}

.collapsed .dcw-toggle {
  transform: rotate(-90deg);
}

.dcw-content {
  padding: 15px;
}

.dcw-name {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.dcw-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.dcw-progress-bar {
  background: #eee;
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}

.dcw-progress-fill {
  background: linear-gradient(90deg, #3498db, #2980b9);
  height: 100%;
  transition: width 0.5s ease;
}

.completed .dcw-progress-fill {
  background: linear-gradient(90deg, #27ae60, #1e8449);
}

.dcw-progress-text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

.dcw-reward {
  font-size: 13px;
  font-weight: bold;
  color: #f39c12;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .daily-challenge-widget {
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .gamification-notification {
    left: 10px;
    right: 10px;
    bottom: 100px;
  }
}

/* ==========================================================================
   KNOWLEDGE GRAPH SIDEBAR
   Styles for sidebar-panel.js knowledge map component
   Added Feb 2026 - these classes were missing, causing unstyled sidebar
   ========================================================================== */

.kg-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: width 0.3s ease;
}

.kg-sidebar-collapsed {
  width: 40px !important;
}

.kg-sidebar-collapsed .kg-sidebar-content {
  display: none;
}

.kg-sidebar-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #64748b;
  transition: all 0.2s;
  z-index: 10;
}

.kg-sidebar-toggle:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.kg-sidebar-toggle-icon {
  line-height: 1;
}

.kg-sidebar-content {
  padding: 50px 12px 12px;
  overflow-y: auto;
  flex: 1;
}

.kg-sidebar-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.kg-sidebar-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.kg-sidebar-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
}

.kg-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.kg-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.kg-search-input::placeholder {
  color: #94a3b8;
}

/* View Buttons */
.kg-view-buttons {
  display: flex;
  gap: 4px;
}

.kg-view-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 11px;
  color: #64748b;
  transition: all 0.2s;
}

.kg-view-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.kg-view-btn.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: white;
}

.kg-view-btn svg {
  width: 16px;
  height: 16px;
}

/* Collapsible Sections */
.kg-sidebar-collapsible .kg-section-content {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.kg-sidebar-collapsible.collapsed .kg-section-content {
  max-height: 0;
  padding: 0;
}

.kg-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: left;
}

.kg-section-header:hover {
  color: #1e3a5f;
}

.kg-section-toggle {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s;
}

.kg-section-content {
  padding-top: 8px;
}

/* Filter Items */
.kg-filter-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kg-filter-item:hover {
  color: #1e3a5f;
}

.kg-filter-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.kg-part-filter {
  padding: 4px 0;
}

.kg-part-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.kg-part-filters {
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 8px;
}

.kg-select-all-btn {
  padding: 4px 8px;
  margin-right: 4px;
  margin-top: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: white;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.kg-select-all-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* Difficulty Badges */
.kg-difficulty-badge {
  font-size: 10px;
}

.kg-difficulty-beginner {
  color: #16a085;
}

.kg-difficulty-intermediate {
  color: #e67e22;
}

.kg-difficulty-advanced {
  color: #8e44ad;
}

.kg-difficulty-filters,
.kg-feature-filters {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Zoom Controls */
.kg-zoom-controls {
  display: flex;
  gap: 4px;
}

.kg-zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 16px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.kg-zoom-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* Legend */
.kg-legend-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kg-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}

.kg-legend-shape {
  width: 14px;
  text-align: center;
}

.kg-legend-circle {
  color: #16a085;
}

.kg-legend-square {
  color: #e67e22;
}

.kg-legend-hexagon {
  color: #8e44ad;
}

.kg-legend-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

.kg-legend-line {
  width: 20px;
  font-size: 10px;
  letter-spacing: -1px;
}

.kg-legend-solid {
  color: #c0392b;
}

.kg-legend-dashed {
  color: #95a5a6;
}

.kg-legend-dotted {
  color: #3498db;
}

/* Stats */
.kg-stats {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px !important;
  border-bottom: none !important;
}

.kg-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.kg-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1e3a5f;
}

.kg-stat-label {
  font-size: 12px;
  color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
  .kg-sidebar {
    width: 100% !important;
    max-height: 40vh;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }

  .kg-sidebar-collapsed {
    max-height: 40px;
  }

  .kg-sidebar-toggle {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
  }

  .kg-sidebar-content {
    padding-top: 40px;
  }
}

/* =============================================
   Mobile TOC Toggle
   =============================================
   Floating toggle button and slide-out drawer
   for Table of Contents on mobile/tablet viewports
   ============================================= */

/* Toggle Button */
.toc-mobile-toggle {
  display: none; /* Hidden by default, shown via JS */
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ieee-navy, #2c3e50);
  color: white;
  border: none;
  border-radius: var(--radius-xl, 12px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.toc-mobile-toggle:hover {
  background: var(--ieee-teal, #16a085);
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15);
}

.toc-mobile-toggle:active {
  transform: translateY(0);
}

.toc-mobile-toggle.active {
  background: var(--ieee-teal, #16a085);
}

.toc-mobile-toggle .toc-icon {
  flex-shrink: 0;
}

.toc-mobile-toggle .toc-toggle-text {
  white-space: nowrap;
}

.toc-mobile-toggle-inline {
  position: static;
  bottom: auto;
  right: auto;
  z-index: auto;
  padding: 0.35rem 0.55rem;
  min-width: 34px;
  min-height: 34px;
  border-radius: 5px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.toc-mobile-toggle-inline:hover,
.toc-mobile-toggle-inline:active {
  background: rgba(255, 255, 255, 0.25);
  transform: none;
  box-shadow: none;
}

.toc-mobile-toggle-inline .toc-toggle-text {
  display: none;
}

/* Hide text on very small screens, show just icon */
@media (max-width: 400px) {
  .toc-mobile-toggle {
    padding: 14px;
    border-radius: 50%;
  }
  .toc-mobile-toggle .toc-toggle-text {
    display: none;
  }
}

/* Backdrop Overlay */
.toc-mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1045;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.toc-mobile-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

/* Drawer */
.toc-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  max-width: 360px;
  background: white;
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.toc-mobile-drawer.open {
  transform: translateX(0);
}

/* Drawer Header */
.toc-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
  background: var(--gray-50, #f8fafc);
  flex-shrink: 0;
}

.toc-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ieee-navy, #2c3e50);
}

.toc-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 6px);
  color: var(--gray-500, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
}

.toc-drawer-close:hover {
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-700, #334155);
}

.toc-drawer-close:focus-visible {
  outline: 2px solid var(--ieee-teal, #16a085);
  outline-offset: 2px;
}

/* Drawer Content */
.toc-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  -webkit-overflow-scrolling: touch;
}

/* Style the cloned TOC inside drawer */
.toc-drawer-content #toc-mobile-content {
  display: block !important;
  position: static !important;
  width: 100% !important;
  padding: 0 16px;
  background: transparent;
  box-shadow: none;
}

.toc-drawer-content #toc-mobile-content #TOC {
  padding: 0;
}

.toc-drawer-content #toc-mobile-content #TOC .toc-title {
  display: none; /* We have our own header */
}

.toc-drawer-content #toc-mobile-content #TOC ul {
  padding-left: 0;
  margin: 0;
}

.toc-drawer-content #toc-mobile-content #TOC ul ul {
  padding-left: 16px;
}

.toc-drawer-content #toc-mobile-content #TOC li {
  margin-bottom: 4px;
}

.toc-drawer-content #toc-mobile-content #TOC a {
  display: block;
  padding: 10px 12px;
  color: var(--gray-700, #334155);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-radius: var(--radius-md, 6px);
  transition: all 0.15s ease;
}

.toc-drawer-content #toc-mobile-content #TOC a:hover {
  background: var(--gray-100, #f1f5f9);
  color: var(--ieee-teal, #16a085);
}

.toc-drawer-content #toc-mobile-content #TOC a.active {
  background: rgba(22, 160, 133, 0.1);
  color: var(--ieee-teal, #16a085);
  font-weight: 500;
}

/* Responsive adjustments */
@media (min-width: 992px) {
  /* Hide mobile TOC elements on large screens */
  .toc-mobile-toggle,
  .toc-mobile-drawer,
  .toc-mobile-backdrop {
    display: none !important;
  }
}

/* Show toggle on medium/small screens */
@media (max-width: 991.98px) {
  /* Keep the original TOC hidden on smaller screens */
  #quarto-margin-sidebar {
    display: none !important;
  }

  /* Ensure toggle is visible when JS enables it */
  body.toc-mobile-ready .toc-mobile-toggle {
    display: flex;
  }
}

/* Safe area insets for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toc-mobile-toggle {
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: calc(24px + env(safe-area-inset-right));
  }

  .toc-mobile-drawer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================
   TOC Toggle Button - Collapsible Right Sidebar
   ============================================ */

/* TOC Toggle Button */
.toc-toggle-btn {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1050;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--pc-main, #2c3e50);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.toc-toggle-btn:hover {
  background: var(--pc-main, #2c3e50);
  filter: brightness(1.1);
  transform: scale(1.05);
}

.toc-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* ===========================================
   TOC Layout - Let Quarto handle it naturally
   Grid settings come from _quarto.yml
   =========================================== */

/* Hide custom toggle button - not needed */
.toc-toggle-btn {
  display: none !important;
}

/* Hide custom overlay - not needed */
.toc-overlay {
  display: none !important;
}

/* Hide toggle on small screens (TOC moves inline) */
@media (max-width: 991px) {
  .toc-toggle-btn {
    display: none;
  }
}

/* Overlay when TOC is expanded */
.toc-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1035;
}

.toc-overlay.active {
  display: block;
}

/* ==========================================================================
   IoT Quiz & Component Styles (Consolidated)
   All interactive component CSS in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Matching Quiz (.imq-)
   -------------------------------------------------------------------------- */
.iot-quiz-matching {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.imq-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}

.imq-icon {
  font-size: 1.3rem;
}

.imq-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}

.imq-xp {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.imq-xp-earned {
  background: #16a085 !important;
  color: white;
}

.imq-xp-missed {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}

.imq-question {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}

.imq-instruction {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
}

.imq-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px 12px;
}

.imq-left-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imq-right-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imq-left-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  min-height: 44px;
}

.imq-left-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
}

.imq-drop-zone {
  min-width: 100px;
  min-height: 36px;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 4px 8px;
  background: white;
}

.imq-drop-zone.imq-drag-over {
  border-color: #3498db;
  background: #ebf5fb;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.imq-drop-zone.imq-has-match {
  border-style: solid;
  border-color: #3498db;
  background: #ebf5fb;
}

.imq-drop-placeholder {
  font-size: 0.8rem;
  color: #9ca3af;
  font-style: italic;
}

.imq-drop-zone.imq-has-match .imq-drop-placeholder {
  display: none;
}

.imq-matched-text {
  font-size: 0.85rem;
  color: #2c3e50;
  font-weight: 500;
}

.imq-right-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f0f9ff;
  border: 2px solid #bae6fd;
  border-radius: 8px;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.3s ease;
  user-select: none;
  font-size: 0.9rem;
  color: #1e3a5f;
  min-height: 44px;
}

.imq-right-item:hover {
  border-color: #3498db;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
  transform: translateY(-1px);
}

.imq-right-item.imq-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  border-color: #3498db;
  background: #ebf5fb;
}

.imq-right-item.imq-selected {
  border-color: #e67e22;
  background: #fef9f3;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}

.imq-right-item.imq-correct {
  background: #f0fdf4;
  border-color: #16a085;
  cursor: default;
}

.imq-right-item.imq-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
  cursor: default;
}

.imq-left-item.imq-correct {
  background: #f0fdf4;
  border-color: #16a085;
}

.imq-left-item.imq-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
}

.imq-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}

.imq-check-btn,
.imq-reset-btn {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.imq-check-btn:hover:not(:disabled),
.imq-reset-btn:hover {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}

.imq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.imq-reset-btn {
  background: #6b7280;
}

.imq-reset-btn:hover {
  background: #4b5563;
}

.imq-feedback {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.imq-result-correct {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}

.imq-result-incorrect {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}

.imq-explanation {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}

.imq-explanation strong {
  color: #2c3e50;
}

.imq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  animation: imq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes imq-celebrate {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.imq-error {
  padding: 20px;
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
  text-align: center;
}

/* Dark mode */
.quarto-dark .iot-quiz-matching {
  background: #1f2937;
  border-color: #374151;
}

.quarto-dark .imq-question {
  color: #f3f4f6;
}

.quarto-dark .imq-instruction {
  color: #9ca3af;
}

.quarto-dark .imq-left-item {
  background: #111827;
  border-color: #374151;
}

.quarto-dark .imq-left-text {
  color: #f3f4f6;
}

.quarto-dark .imq-drop-zone {
  border-color: #4b5563;
  background: #1f2937;
}

.quarto-dark .imq-drop-zone.imq-drag-over {
  border-color: #3498db;
  background: #1e3a5f;
}

.quarto-dark .imq-right-item {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}

.quarto-dark .imq-right-item:hover {
  border-color: #3498db;
}

.quarto-dark .imq-right-item.imq-correct {
  background: #064e3b;
  border-color: #16a085;
}

.quarto-dark .imq-right-item.imq-incorrect {
  background: #4c1d1d;
  border-color: #e74c3c;
}

.quarto-dark .imq-left-item.imq-correct {
  background: #064e3b;
  border-color: #16a085;
}

.quarto-dark .imq-left-item.imq-incorrect {
  background: #4c1d1d;
  border-color: #e74c3c;
}

.quarto-dark .imq-matched-text {
  color: #bae6fd;
}

.quarto-dark .imq-check-btn {
  background: #3498db;
}

.quarto-dark .imq-check-btn:hover:not(:disabled) {
  background: #2980b9;
}

.quarto-dark .imq-result-correct {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}

.quarto-dark .imq-result-incorrect {
  background: #4c1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

.quarto-dark .imq-explanation {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}

.quarto-dark .imq-explanation strong {
  color: #93c5fd;
}

/* Responsive */
@media (max-width: 600px) {
  .imq-board {
    grid-template-columns: 1fr;
  }

  .imq-left-item {
    flex-wrap: wrap;
  }

  .imq-drop-zone {
    min-width: 80px;
    width: 100%;
  }

  .imq-right-item {
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   Ordering Quiz (.ioq-)
   -------------------------------------------------------------------------- */
.iot-quiz-ordering {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ioq-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}

.ioq-icon {
  font-size: 1.3rem;
}

.ioq-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}

.ioq-xp {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.ioq-xp-earned {
  background: #16a085 !important;
  color: white;
}

.ioq-xp-missed {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}

.ioq-question {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}

.ioq-instruction {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
}

.ioq-list {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ioq-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.3s ease;
  user-select: none;
  gap: 10px;
}

.ioq-item:hover {
  border-color: #3498db;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
}

.ioq-item.ioq-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  border-color: #3498db;
  background: #ebf5fb;
}

.ioq-item.ioq-drag-over {
  border-color: #e67e22;
  background: #fef9f3;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}

.ioq-item.ioq-touch-active {
  border-color: #3498db;
  background: #ebf5fb;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
  transform: scale(1.02);
  z-index: 10;
}

.ioq-item.ioq-correct {
  background: #f0fdf4;
  border-color: #16a085;
}

.ioq-item.ioq-correct .ioq-position {
  background: #16a085;
  color: white;
}

.ioq-item.ioq-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
}

.ioq-item.ioq-incorrect .ioq-position {
  background: #e74c3c;
  color: white;
}

.ioq-item.ioq-disabled {
  cursor: default;
  pointer-events: none;
}

.ioq-item.ioq-disabled .ioq-arrows,
.ioq-item.ioq-disabled .ioq-drag-handle {
  visibility: hidden;
}

.ioq-position {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #2c3e50;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ioq-item-text {
  flex: 1;
  font-size: 0.95rem;
  color: #1f2937;
  line-height: 1.4;
}

.ioq-correction {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.8rem;
  color: #16a085;
  font-weight: 600;
  font-style: italic;
}

.ioq-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.ioq-arrow-up,
.ioq-arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.6rem;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
}

.ioq-arrow-up:hover:not(:disabled),
.ioq-arrow-down:hover:not(:disabled) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.ioq-arrow-up:disabled,
.ioq-arrow-down:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ioq-drag-handle {
  color: #9ca3af;
  font-size: 1.1rem;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 2px;
}

.ioq-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}

.ioq-check-btn {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ioq-check-btn:hover {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}

.ioq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ioq-feedback {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ioq-result-correct {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}

.ioq-result-incorrect {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}

.ioq-explanation {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}

.ioq-explanation strong {
  color: #2c3e50;
}

.ioq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  animation: ioq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes ioq-celebrate {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Dark mode */
.quarto-dark .iot-quiz-ordering {
  background: #1f2937;
  border-color: #374151;
}

.quarto-dark .ioq-question {
  color: #f3f4f6;
}

.quarto-dark .ioq-instruction {
  color: #9ca3af;
}

.quarto-dark .ioq-item {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}

.quarto-dark .ioq-item:hover {
  border-color: #3498db;
}

.quarto-dark .ioq-item.ioq-dragging {
  background: #1e3a5f;
}

.quarto-dark .ioq-item.ioq-drag-over {
  background: #3b2a1a;
  border-color: #e67e22;
}

.quarto-dark .ioq-item.ioq-correct {
  background: #064e3b;
  border-color: #16a085;
}

.quarto-dark .ioq-item.ioq-incorrect {
  background: #4c1d1d;
  border-color: #e74c3c;
}

.quarto-dark .ioq-item-text {
  color: #f3f4f6;
}

.quarto-dark .ioq-correction {
  color: #34d399;
}

.quarto-dark .ioq-arrow-up,
.quarto-dark .ioq-arrow-down {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

.quarto-dark .ioq-arrow-up:hover:not(:disabled),
.quarto-dark .ioq-arrow-down:hover:not(:disabled) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.quarto-dark .ioq-drag-handle {
  color: #6b7280;
}

.quarto-dark .ioq-check-btn {
  background: #3498db;
}

.quarto-dark .ioq-check-btn:hover {
  background: #2980b9;
}

.quarto-dark .ioq-result-correct {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}

.quarto-dark .ioq-result-incorrect {
  background: #4c1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

.quarto-dark .ioq-explanation {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}

.quarto-dark .ioq-explanation strong {
  color: #93c5fd;
}

@media (max-width: 600px) {
  .ioq-item {
    padding: 8px 10px;
    gap: 6px;
  }

  .ioq-item-text {
    font-size: 0.85rem;
  }

  .ioq-position {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0.7rem;
  }

  .ioq-arrow-up,
  .ioq-arrow-down {
    width: 22px;
    height: 18px;
    font-size: 0.55rem;
  }

  .ioq-drag-handle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Code Quiz (.icq-)
   -------------------------------------------------------------------------- */
.iot-quiz-code {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin: 1.5em 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.icq-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

.icq-icon {
  font-size: 1.2rem;
}

.icq-title {
  flex-grow: 1;
}

.icq-lang {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.icq-xp {
  background: rgba(22, 160, 133, 0.3);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.icq-xp-earned {
  background: rgba(22, 160, 133, 0.8) !important;
  color: #ffffff;
}

.icq-xp-missed {
  background: rgba(231, 76, 60, 0.3) !important;
  color: #ffffff;
  text-decoration: line-through;
}

.icq-question {
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 1px solid #e5e7eb;
}

.icq-instruction {
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
  border-bottom: 1px solid #e5e7eb;
}

.icq-code-container {
  background: #1e1e2e;
  overflow-x: auto;
  margin: 0;
}

.icq-code-block {
  padding: 12px 0;
  min-width: 0;
}

.icq-line {
  display: flex;
  align-items: center;
  min-height: 28px;
  line-height: 1.6;
  padding: 0 16px 0 0;
  max-width: 100%;
  overflow-x: auto;
}

.icq-line-num {
  display: inline-block;
  width: 44px;
  min-width: 44px;
  text-align: right;
  padding-right: 16px;
  color: #6c7086;
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.8rem;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid #313244;
  margin-right: 16px;
}

.icq-line-content {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.9rem;
  color: #cdd6f4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
}

.icq-line-blank {
  background: rgba(22, 160, 133, 0.08);
}

.icq-blank-select {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.85rem;
  background: #313244;
  color: #f9e2af;
  border: 1px dashed #89b4fa;
  max-width: 100%;
  text-overflow: ellipsis;
  border-radius: 4px;
  padding: 2px 8px;
  min-width: min(200px, 100%);
  max-width: 100%;
  cursor: pointer;
  outline: none;
  appearance: auto;
}

.icq-blank-select:hover {
  border-color: #74c7ec;
  background: #45475a;
}

.icq-blank-select:focus {
  border-color: #89b4fa;
  box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
}

.icq-blank-select.icq-correct {
  background: rgba(22, 160, 133, 0.25);
  border-color: #16a085;
  color: #a6e3a1;
  border-style: solid;
}

.icq-blank-select.icq-incorrect {
  background: rgba(231, 76, 60, 0.25);
  border-color: #e74c3c;
  color: #f38ba8;
  border-style: solid;
}

.icq-correct-answer {
  display: block;
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.8rem;
  color: #a6e3a1;
  margin-top: 2px;
  padding-left: 4px;
}

.icq-actions {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #e5e7eb;
}

.icq-check-btn {
  background: #2c3e50;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    opacity 0.2s;
}

.icq-check-btn:hover:not(:disabled) {
  background: #16a085;
}

.icq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icq-feedback {
  padding: 12px 16px;
  font-size: 0.95rem;
  border-top: 1px solid #e5e7eb;
}

.icq-result-correct {
  color: #16a085;
  font-weight: 600;
}

.icq-result-incorrect {
  color: #e74c3c;
  font-weight: 600;
}

.icq-explanation {
  padding: 12px 16px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
  font-size: 0.9rem;
  color: #166534;
  line-height: 1.5;
}

.icq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: icq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes icq-celebrate {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}

.icq-error {
  padding: 20px;
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .iot-quiz-code {
    border-color: #374151;
    background: #1f2937;
  }
  .icq-question {
    color: #e5e7eb;
    border-bottom-color: #374151;
  }
  .icq-instruction {
    color: #9ca3af;
    border-bottom-color: #374151;
  }
  .icq-actions {
    border-top-color: #374151;
  }
  .icq-feedback {
    border-top-color: #374151;
  }
  .icq-explanation {
    background: #064e3b;
    border-top-color: #065f46;
    color: #a7f3d0;
  }
}

/* --------------------------------------------------------------------------
   Label Quiz (.ilq-)
   -------------------------------------------------------------------------- */
.iot-quiz-label {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ilq-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}

.ilq-icon {
  font-size: 1.3rem;
}

.ilq-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}

.ilq-xp {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.ilq-xp-earned {
  background: #16a085 !important;
  color: white;
}

.ilq-xp-missed {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}

.ilq-question {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}

.ilq-instruction {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
}

.ilq-diagram-container {
  position: relative;
  margin: 0 20px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

.ilq-diagram-image {
  display: block;
  width: 100%;
  height: auto;
}

.ilq-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e74c3c;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
  padding: 0;
}

.ilq-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 12px rgba(231, 76, 60, 0.5);
}

.ilq-hotspot-number {
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.ilq-hotspot-selected {
  background: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}

.ilq-hotspot-correct {
  background: #16a085 !important;
  box-shadow: 0 2px 8px rgba(22, 160, 133, 0.4) !important;
}

.ilq-hotspot-incorrect {
  background: #e74c3c !important;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5) !important;
}

.ilq-hotspot-disabled {
  cursor: default;
  pointer-events: none;
}

@keyframes ilq-pulse {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 2px 16px rgba(231, 76, 60, 0.7);
  }
}

.ilq-hotspot:not(.ilq-hotspot-selected):not(.ilq-hotspot-correct):not(.ilq-hotspot-incorrect):not(
    .ilq-hotspot-disabled
  ) {
  animation: ilq-pulse 2s infinite;
}

.ilq-selections {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ilq-selection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.ilq-row-correct {
  background: #f0fdf4;
  border-color: #16a085;
}

.ilq-row-incorrect {
  background: #fef2f2;
  border-color: #e74c3c;
}

.ilq-selection-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #e74c3c;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ilq-row-correct .ilq-selection-marker {
  background: #16a085;
}
.ilq-row-incorrect .ilq-selection-marker {
  background: #e74c3c;
}

.ilq-select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #1f2937;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.ilq-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.ilq-select:disabled {
  background: #f3f4f6;
  cursor: default;
  opacity: 0.8;
}

.ilq-selection-status {
  min-width: 80px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ilq-status-correct {
  color: #16a085;
  font-weight: 600;
}
.ilq-status-incorrect {
  color: #e74c3c;
  font-weight: 600;
}

.ilq-correct-answer {
  color: #16a085;
  font-size: 0.8rem;
  font-weight: 500;
  font-style: italic;
}

.ilq-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}

.ilq-check-btn {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ilq-check-btn:hover:not(:disabled) {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}

.ilq-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ilq-feedback {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ilq-result-correct {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}

.ilq-result-incorrect {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}

.ilq-explanation {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}

.ilq-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: ilq-celebrate 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes ilq-celebrate {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}

@media (max-width: 600px) {
  .ilq-hotspot {
    width: 26px;
    height: 26px;
  }
  .ilq-hotspot-number {
    font-size: 0.7rem;
  }
  .ilq-selection-row {
    flex-wrap: wrap;
  }
  .ilq-select {
    min-width: 0;
  }
  .ilq-selection-status {
    min-width: auto;
  }
}

/* --------------------------------------------------------------------------
   Video Component (.ivid-)
   -------------------------------------------------------------------------- */
.iot-video-embed {
  display: block;
  margin: 1.5em 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ivid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

.ivid-icon {
  font-size: 1.2rem;
}

.ivid-title {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivid-description {
  padding: 10px 16px;
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.5;
}

.ivid-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000000;
}

.ivid-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ivid-placeholder:focus {
  outline: 2px solid #16a085;
  outline-offset: -2px;
}

.ivid-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ivid-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.9;
  z-index: 1;
}

.ivid-placeholder:hover .ivid-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
}

.ivid-play-btn svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.ivid-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.ivid-fallback {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.85rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.ivid-fallback a {
  color: #16a085;
  text-decoration: underline;
  font-weight: 500;
}

.ivid-fallback a:hover {
  color: #0e7c61;
}

@media (max-width: 600px) {
  .ivid-header {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .ivid-description {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

@media (prefers-color-scheme: dark) {
  .iot-video-embed {
    border-color: #374151;
    background: #1f2937;
  }
  .ivid-description {
    color: #d1d5db;
    border-bottom-color: #374151;
  }
  .ivid-fallback {
    background: #1f2937;
    border-top-color: #374151;
  }
}