/* ============================================================
   USACO C++ Guide — Premium Documentation Theme
   Inspired by: Linear, Stripe Docs, Vercel Docs, GitBook
   Version: 2.0 — Full Overhaul
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ── CSS Custom Properties (Design Tokens) ── */
:root {
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-grid: #fdfdff;
  --color-sidebar-bg: #0f0f17;
  --color-sidebar-bg2: #1a1a2e;
  --color-sidebar-text: #a8b4c8;
  --color-sidebar-text-hover: #d0d8ec;
  --color-sidebar-active: #ffffff;
  --color-sidebar-active-bg: rgba(74, 108, 247, 0.15);
  --color-sidebar-active-glow: rgba(74, 108, 247, 0.25);
  --color-sidebar-border: rgba(255, 255, 255, 0.06);
  --color-sidebar-section: #5a6580;
  --color-primary: #4A6CF7;
  --color-primary-light: #6d8ef8;
  --color-primary-dark: #3557e8;
  --color-accent: #10b981;
  --color-accent-purple: #a855f7;
  --color-text: #1a1d2e;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-code-bg: #0d1117;
  --color-code-border: #30363d;
  --color-code-text: #e6edf3;
  /* Light-mode overrides for code — applied via html.light selector below */
  --color-heading-grad-start: #4A6CF7;
  --color-heading-grad-end: #a855f7;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(74, 108, 247, 0.15);
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Body & Global ── */
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.book {
  font-family: var(--font-body);
}

/* ============================================================
   SIDEBAR — Dark Premium Look
   ============================================================ */

.book .book-summary {
  background: linear-gradient(180deg, var(--color-sidebar-bg) 0%, var(--color-sidebar-bg2) 50%, var(--color-sidebar-bg) 100%);
  border-right: 1px solid var(--color-sidebar-border);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient glow at top of sidebar */
.book .book-summary::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(74, 108, 247, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Sidebar inner container */
.book .book-summary ul.summary {
  padding: 8px 0 40px;
  position: relative;
  z-index: 1;
}

/* Sidebar dividers */
.book .book-summary ul.summary li.divider {
  height: 1px;
  background: var(--color-sidebar-border);
  margin: 10px 16px;
  border: none;
}

/* Sidebar section headers (Part labels) */
.book .book-summary ul.summary li.header {
  padding: 18px 20px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sidebar-section);
}

/* Sidebar navigation links */
.book .book-summary ul.summary li a {
  display: flex;
  align-items: center;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-sidebar-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  line-height: 1.4;
}

/* Hover state */
.book .book-summary ul.summary li a:hover {
  color: var(--color-sidebar-text-hover);
  background: rgba(255, 255, 255, 0.04);
  padding-left: 24px;
  border-left-color: rgba(74, 108, 247, 0.4);
}

/* Active / current page */
.book .book-summary ul.summary li.active > a {
  color: var(--color-sidebar-active);
  font-weight: 600;
  background: var(--color-sidebar-active-bg);
  border-left-color: var(--color-primary);
  box-shadow: inset 0 0 20px var(--color-sidebar-active-glow), var(--shadow-glow);
}

/* Nested nav items (sub-chapters) */
.book .book-summary ul.summary li ul li a {
  padding-left: 36px;
  font-size: 12.5px;
}

.book .book-summary ul.summary li ul li a:hover {
  padding-left: 40px;
}

.book .book-summary ul.summary li ul li.active > a {
  padding-left: 36px;
}

/* ── Sidebar Scrollbar Styling ── */
.book .book-summary::-webkit-scrollbar {
  width: 4px;
}

.book .book-summary::-webkit-scrollbar-track {
  background: transparent;
}

.book .book-summary::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.book .book-summary::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Sidebar search box ── */
.book .book-summary #book-search-input {
  padding: 10px 14px;
  margin: 8px 12px 4px;
}

.book .book-summary #book-search-input input {
  font-family: var(--font-body);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-sidebar-border);
  border-radius: var(--radius-sm);
  color: var(--color-sidebar-text);
  padding: 7px 12px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.book .book-summary #book-search-input input:focus {
  border-color: rgba(74, 108, 247, 0.5);
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.book .book-summary #book-search-input input::placeholder {
  color: rgba(168, 180, 200, 0.5);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.book .book-body {
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  position: relative;
}

/* Subtle dot-grid background pattern */
.book .book-body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle, rgba(74, 108, 247, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.book .book-body .page-wrapper {
  position: relative;
  z-index: 1;
}

/* Content width and padding */
.book .book-body .page-wrapper .page-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 52px 80px;
  position: relative;
}

/* Section (markdown content) */
.book .book-body .page-wrapper .page-inner section.normal {
  font-family: var(--font-body);
}

/* ============================================================
   TYPOGRAPHY HIERARCHY
   ============================================================ */

/* ── h1: Large, gradient text, border-bottom ── */
.book .book-body h1,
.book .book-body .page-wrapper .page-inner section.normal h1 {
  font-family: var(--font-body);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-heading-grad-start) 0%, var(--color-heading-grad-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  position: relative;
}

/* ── h2: Deep color, left accent bar ── */
.book .book-body h2,
.book .book-body .page-wrapper .page-inner section.normal h2 {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--color-text);
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  padding-left: 14px;
  border-left: 3px solid var(--color-primary);
  letter-spacing: -0.015em;
}

/* ── h3: Semi-bold, muted ── */
.book .book-body h3,
.book .book-body .page-wrapper .page-inner section.normal h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3561;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}

/* ── h4 ── */
.book .book-body h4,
.book .book-body .page-wrapper .page-inner section.normal h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

/* ── Paragraphs ── */
.book .book-body p,
.book .book-body .page-wrapper .page-inner section.normal p {
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 1.1em;
  color: var(--color-text);
}

/* ── Lists ── */
.book .book-body ul,
.book .book-body ol {
  padding-left: 1.6em;
  margin-bottom: 1.1em;
}

.book .book-body li {
  line-height: 1.8;
  margin-bottom: 0.3em;
}

.book .book-body li > p {
  margin-bottom: 0.4em;
}

/* ── Strong and Em ── */
.book .book-body strong {
  font-weight: 650;
  color: var(--color-text);
}

/* ============================================================
   LINKS
   ============================================================ */

.book .book-body a,
.book .book-body .page-wrapper .page-inner section.normal a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.book .book-body a:hover,
.book .book-body .page-wrapper .page-inner section.normal a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-light);
}

/* ============================================================
   CODE BLOCKS — GitHub Dark / VS Code Style
   ============================================================ */

.book .book-body .page-wrapper .page-inner section.normal pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
  padding: 44px 22px 20px;
  overflow-x: auto;
  margin: 24px 0;
  position: relative;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(74, 108, 247, 0.08);
  font-size: 0;
  /* Base text color for plain (non-hljs) code blocks — theme adaptive */
  color: var(--color-code-text);
}

/* Fake window chrome bar */
.book .book-body .page-wrapper .page-inner section.normal pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-code-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Traffic-light dots */
.book .book-body .page-wrapper .page-inner section.normal pre::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 14px;
  width: 52px;
  height: 14px;
  background:
    radial-gradient(circle 5px at 7px 7px, #ff5f57 0%, #ff5f57 70%, transparent 71%),
    radial-gradient(circle 5px at 26px 7px, #febc2e 0%, #febc2e 70%, transparent 71%),
    radial-gradient(circle 5px at 45px 7px, #28c840 0%, #28c840 70%, transparent 71%);
}

/* Language label badge */
.book .book-body .page-wrapper .page-inner section.normal pre[class*="language-"]::before,
.book .book-body .page-wrapper .page-inner section.normal pre code[class*="language-"]::before {
  content: attr(class);
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.book .book-body .page-wrapper .page-inner section.normal pre code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.72;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  /*
   * IMPORTANT: Do NOT set color here.
   * hljs applies .hljs-keyword/.hljs-string/etc to <span> children.
   * Setting color on <code> overrides all hljs spans via inheritance
   * and destroys syntax highlighting.
   * The base fallback color (for plain text code) comes from `pre` via
   * --color-code-text, which is theme-adaptive.
   */
  display: block;
  tab-size: 4;
}

/* Code block scrollbar */
.book .book-body .page-wrapper .page-inner section.normal pre::-webkit-scrollbar {
  height: 6px;
}

.book .book-body .page-wrapper .page-inner section.normal pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.book .book-body .page-wrapper .page-inner section.normal pre::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 3px;
}

.book .book-body .page-wrapper .page-inner section.normal pre::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

/* ── Prism Syntax Highlighting Tokens — GitHub Dark Theme ── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8b949e;
  font-style: italic;
}

.token.punctuation {
  color: #c9d1d9;
}

.token.namespace {
  opacity: 0.75;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #79c0ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a5d6ff;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #ff7b72;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #ff7b72;
}

.token.function,
.token.class-name {
  color: #d2a8ff;
}

.token.regex,
.token.important,
.token.variable {
  color: #ffa657;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* C++ specific token overrides */
.language-cpp .token.keyword,
.language-c .token.keyword {
  color: #ff7b72;
  font-weight: 500;
}

.language-cpp .token.function,
.language-c .token.function {
  color: #d2a8ff;
}

.language-cpp .token.number,
.language-c .token.number {
  color: #79c0ff;
}

.language-cpp .token.string,
.language-c .token.string {
  color: #a5d6ff;
}

.language-cpp .token.comment,
.language-c .token.comment {
  color: #8b949e;
}

.language-bash .token.function {
  color: #d2a8ff;
}

/* ── Inline Code ── */
.book .book-body code,
.book .book-body .page-wrapper .page-inner section.normal code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(74, 108, 247, 0.07);
  color: #c0392b;
  border: 1px solid rgba(74, 108, 247, 0.15);
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  white-space: nowrap;
}

/* Override for code inside pre (already styled above) */
.book .book-body pre code,
.book .book-body .page-wrapper .page-inner section.normal pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit;
  white-space: pre;
  font-size: 13.5px;
}

/* ============================================================
   BLOCKQUOTES & CALLOUT BOXES
   ============================================================ */

/* Generic blockquote base */
.book .book-body blockquote,
.book .book-body .page-wrapper .page-inner section.normal blockquote {
  border-left: 4px solid var(--color-primary);
  background: linear-gradient(135deg, rgba(74, 108, 247, 0.06) 0%, rgba(74, 108, 247, 0.02) 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 20px 0;
  color: #2d3561;
  box-shadow: 0 2px 12px rgba(74, 108, 247, 0.08);
  position: relative;
  overflow: hidden;
}

.book .book-body blockquote::before,
.book .book-body .page-wrapper .page-inner section.normal blockquote::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(74, 108, 247, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.book .book-body blockquote p:last-child,
.book .book-body .page-wrapper .page-inner section.normal blockquote p:last-child {
  margin-bottom: 0;
}

/* ── hints plugin: Info (💡 blue) ── */
.book .book-body .alert-info,
.book .book-body .alert.alert-info {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 20px 0;
  color: #1e3a8a;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.10);
}

/* ── hints plugin: Tip/Success (🏆 gold) ── */
.book .book-body .alert-success,
.book .book-body .alert.alert-success {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 20px 0;
  color: #78350f;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.10);
}

/* ── hints plugin: Danger (⚠️ red) ── */
.book .book-body .alert-danger,
.book .book-body .alert.alert-danger {
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.03) 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 20px 0;
  color: #7f1d1d;
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.10);
}

/* ── hints plugin: Warning (📝 gray) ── */
.book .book-body .alert-warning,
.book .book-body .alert.alert-warning {
  border-left: 4px solid #64748b;
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(100, 116, 139, 0.03) 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 20px 0;
  color: #334155;
  box-shadow: 0 2px 12px rgba(100, 116, 139, 0.08);
}

/* Icon positioning in alert boxes */
.book .book-body .alert .fa {
  margin-right: 8px;
  font-size: 1.1em;
  vertical-align: middle;
}

/* ============================================================
   TABLES
   ============================================================ */

.book .book-body table,
.book .book-body .page-wrapper .page-inner section.normal table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 24px 0;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Table header — gradient */
.book .book-body table thead tr,
.book .book-body .page-wrapper .page-inner section.normal table thead tr {
  background: linear-gradient(135deg, #4A6CF7 0%, #6a5af9 100%);
}

.book .book-body table thead th,
.book .book-body .page-wrapper .page-inner section.normal table thead th {
  padding: 13px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #ffffff;
  border-bottom: 0;
}

/* Table body — zebra stripes */
.book .book-body table tbody tr:nth-child(odd),
.book .book-body .page-wrapper .page-inner section.normal table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.book .book-body table tbody tr:nth-child(even),
.book .book-body .page-wrapper .page-inner section.normal table tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Table row hover */
.book .book-body table tbody tr:hover,
.book .book-body .page-wrapper .page-inner section.normal table tbody tr:hover {
  background: #eff3ff;
  transition: background var(--transition-fast);
}

.book .book-body table tbody td,
.book .book-body .page-wrapper .page-inner section.normal table tbody td {
  padding: 11px 18px;
  border-top: 1px solid var(--color-border-subtle);
  vertical-align: top;
  line-height: 1.6;
}

/* Last column cells — no right overflow weirdness */
.book .book-body table tbody td:first-child,
.book .book-body .page-wrapper .page-inner section.normal table tbody td:first-child {
  font-weight: 500;
}

/* ============================================================
   IMAGES & SVGs
   ============================================================ */

.book .book-body img,
.book .book-body .page-wrapper .page-inner section.normal img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: block;
  margin: 24px auto;
  transition: box-shadow var(--transition-med), transform var(--transition-med);
}

.book .book-body img:hover,
.book .book-body .page-wrapper .page-inner section.normal img:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* Don't over-style inline badge images */
.book .book-body img[src*="shields.io"],
.book .book-body img[src*="badge"] {
  border: none;
  box-shadow: none;
  border-radius: 4px;
  margin: 2px 3px;
  display: inline;
  vertical-align: middle;
}

/* ============================================================
   HORIZONTAL RULES
   ============================================================ */

.book .book-body hr,
.book .book-body .page-wrapper .page-inner section.normal hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 25%, var(--color-accent-purple) 75%, transparent 100%);
  margin: 40px 0;
  opacity: 0.4;
}

/* ============================================================
   DETAILS / SUMMARY — Collapsible Hints
   ============================================================ */

.book .book-body details,
.book .book-body .page-wrapper .page-inner section.normal details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0;
  margin: 16px 0;
  background: var(--color-bg-subtle);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-med);
}

.book .book-body details:hover,
.book .book-body .page-wrapper .page-inner section.normal details:hover {
  box-shadow: var(--shadow-md);
}

.book .book-body details summary,
.book .book-body .page-wrapper .page-inner section.normal details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--color-primary);
  padding: 13px 18px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
  background: linear-gradient(135deg, rgba(74, 108, 247, 0.04) 0%, transparent 100%);
}

.book .book-body details summary::-webkit-details-marker {
  display: none;
}

.book .book-body details summary::before {
  content: '▶';
  font-size: 0.75em;
  transition: transform var(--transition-med);
  display: inline-block;
  color: var(--color-primary);
}

.book .book-body details[open] summary::before {
  transform: rotate(90deg);
}

.book .book-body details summary:hover {
  background: linear-gradient(135deg, rgba(74, 108, 247, 0.09) 0%, rgba(74, 108, 247, 0.03) 100%);
  color: var(--color-primary-dark);
}

.book .book-body details[open] {
  background: #ffffff;
  border-color: rgba(74, 108, 247, 0.25);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(74, 108, 247, 0.08);
}

.book .book-body details[open] summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.book .book-body details > *:not(summary) {
  padding: 14px 18px;
}

/* ============================================================
   CHAPTER NAVIGATION ARROWS
   ============================================================ */

.book .book-body .navigation {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.book .book-body .navigation-prev {
  left: 0;
}

.book .book-body .navigation-next {
  right: 0;
}

.book .book-body .navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  font-size: 18px;
}

.book .book-body .navigation a:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(74, 108, 247, 0.2);
  transform: scale(1.08);
}

/* Bottom page navigation */
.book .book-body .page-wrapper .page-inner .page-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  gap: 16px;
}

.book .book-body .page-wrapper .page-inner .page-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.book .book-body .page-wrapper .page-inner .page-footer a:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   SEARCH BOX
   ============================================================ */

.book-search-results {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

#book-search-results .search-results-item {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 14px 18px;
  transition: background var(--transition-fast);
}

#book-search-results .search-results-item:hover {
  background: rgba(74, 108, 247, 0.04);
}

#book-search-results .search-results-item a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   CARD-STYLE CONCEPT BOXES
   ============================================================ */

/* Difficulty badges */
.easy {
  color: #16a34a;
  font-weight: 600;
  background: #f0fdf4;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.82em;
  border: 1px solid rgba(22, 163, 74, 0.2);
  display: inline-block;
}

.medium {
  color: #d97706;
  font-weight: 600;
  background: #fffbeb;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.82em;
  border: 1px solid rgba(217, 119, 6, 0.2);
  display: inline-block;
}

.hard {
  color: #dc2626;
  font-weight: 600;
  background: #fff1f2;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.82em;
  border: 1px solid rgba(220, 38, 38, 0.2);
  display: inline-block;
}

/* ============================================================
   TOOLBAR (top bar)
   ============================================================ */

.book .book-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  height: 52px;
  z-index: 100;
}

.book .book-header h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background: none;
  -webkit-text-fill-color: unset;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 52px;
}

.book .book-header .btn {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.book .book-header .btn:hover {
  color: var(--color-primary);
}

/* ============================================================
   FONT STYLES (mono inside prose)
   ============================================================ */

.book .book-body kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  color: var(--color-text);
}

/* ============================================================
   FOOTNOTES & FOOTER
   ============================================================ */

.book .book-body .page-wrapper .page-inner .gitbook-markdown-body {
  line-height: 1.85;
}

/* tbfed-pagefooter plugin styling */
.book .book-body .page-wrapper .page-inner .gitbook-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================================
   BACK-TO-TOP BUTTON
   ============================================================ */

#back-to-top {
  background: var(--color-primary) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(74, 108, 247, 0.15) !important;
  transition: all var(--transition-fast) !important;
}

#back-to-top:hover {
  background: var(--color-primary-dark) !important;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(74, 108, 247, 0.25) !important;
  transform: translateY(-2px);
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .book .book-body .page-wrapper .page-inner {
    padding: 28px 32px 60px;
  }

  .book .book-body h1,
  .book .book-body .page-wrapper .page-inner section.normal h1 {
    font-size: 2rem;
  }

  .book .book-body h2,
  .book .book-body .page-wrapper .page-inner section.normal h2 {
    font-size: 1.45rem;
  }
}

@media (max-width: 768px) {
  .book .book-body .page-wrapper .page-inner {
    padding: 20px 20px 48px;
    max-width: 100%;
  }

  .book .book-body h1,
  .book .book-body .page-wrapper .page-inner section.normal h1 {
    font-size: 1.75rem;
  }

  .book .book-body h2,
  .book .book-body .page-wrapper .page-inner section.normal h2 {
    font-size: 1.3rem;
  }

  .book .book-body .page-wrapper .page-inner section.normal pre {
    padding: 42px 14px 16px;
    font-size: 12px;
  }

  .book .book-body .page-wrapper .page-inner section.normal pre code {
    font-size: 12px;
  }

  .book .book-body table,
  .book .book-body .page-wrapper .page-inner section.normal table {
    font-size: 12.5px;
  }

  .book .book-body table thead th,
  .book .book-body .page-wrapper .page-inner section.normal table thead th {
    padding: 10px 12px;
  }

  .book .book-body table tbody td,
  .book .book-body .page-wrapper .page-inner section.normal table tbody td {
    padding: 8px 12px;
  }

  /* Sidebar adjustments */
  .book.with-summary .book-summary {
    left: 0;
  }
}

@media (max-width: 600px) {
  .book .book-body .page-wrapper .page-inner {
    padding: 16px 16px 40px;
  }

  .book .book-body h1,
  .book .book-body .page-wrapper .page-inner section.normal h1 {
    font-size: 1.55rem;
    letter-spacing: -0.015em;
  }

  .book .book-body .page-wrapper .page-inner section.normal pre {
    border-radius: var(--radius-sm);
    margin-left: -4px;
    margin-right: -4px;
  }
}

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

@media print {
  .book .book-summary,
  .book .book-header,
  .book .navigation,
  #back-to-top {
    display: none !important;
  }

  .book .book-body {
    margin-left: 0 !important;
    background: white;
  }

  .book .book-body::before {
    display: none;
  }

  .book .book-body .page-wrapper .page-inner {
    max-width: 100%;
    padding: 20px;
  }

  .book .book-body h1,
  .book .book-body .page-wrapper .page-inner section.normal h1 {
    -webkit-text-fill-color: #1a1d2e;
    background: none;
    color: #1a1d2e;
    font-size: 1.8rem;
  }

  .book .book-body h2,
  .book .book-body .page-wrapper .page-inner section.normal h2 {
    border-left: 3px solid #4A6CF7;
  }

  .book .book-body .page-wrapper .page-inner section.normal pre {
    border: 1px solid #ccc;
    background: #f8f8f8;
    color: #333;
    box-shadow: none;
    padding: 14px;
  }

  .book .book-body .page-wrapper .page-inner section.normal pre::before,
  .book .book-body .page-wrapper .page-inner section.normal pre::after {
    display: none;
  }

  .book .book-body .page-wrapper .page-inner section.normal pre code {
    color: #333;
    font-size: 12px;
  }

  .book .book-body table {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .book .book-body img {
    box-shadow: none;
    border: 1px solid #eee;
  }

  .book .book-body a {
    color: #1a1d2e;
    border-bottom: none;
  }

  .book .book-body hr {
    background: #ccc;
    opacity: 1;
  }
}

/* ============================================================
   ANIMATION & POLISH
   ============================================================ */

/* Page load fade-in */
.book .book-body .page-wrapper {
  animation: fadeInUp 0.35s ease forwards;
}

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

/* Smooth transitions for interactive elements */
.book .book-body .page-wrapper .page-inner section.normal pre,
.book .book-body table,
.book .book-body blockquote,
.book .book-body details {
  transition: box-shadow var(--transition-med);
}

.book .book-body .page-wrapper .page-inner section.normal pre:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(74, 108, 247, 0.12);
}

/* Selection color */
::selection {
  background: rgba(74, 108, 247, 0.18);
  color: var(--color-text);
}

/* Focus ring for accessibility */
.book .book-body a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Smooth font rendering */
.book .book-body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   ENHANCED THEME — v2.1 Additions
   Progress Tracking, Code Annotations, Knowledge Graph,
   Animations, Code Comparison, Math Formulas
   ============================================================ */

/* ── Progress Bar ── */
.progress-bar {
  position: relative;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  height: 10px;
  margin: 12px 0 4px;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: var(--radius-xl);
  transition: width 0.6s ease;
}

/* ── Chapter Stats Box ── */
.chapter-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
  border: 1px solid rgba(74, 108, 247, 0.15);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}

.chapter-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 8px 16px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.chapter-stats .stat-value {
  font-size: 1.6em;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.chapter-stats .stat-label {
  font-size: 0.72em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
}

/* ── Prerequisite Box ── */
.prerequisite-box {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(74, 108, 247, 0.05) 100%);
  border: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-lg);
  padding: 16px 20px 16px 52px;
  margin: 24px 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.10);
}

.prerequisite-box::before {
  content: '🔑';
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 1.4em;
  line-height: 1;
}

.prerequisite-box strong {
  color: #6b21a8;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}

.prerequisite-box p:last-child {
  margin-bottom: 0;
}

/* ── Algorithm Complexity Card ── */
.algorithm-complexity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.algorithm-complexity .complexity-item {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.algorithm-complexity .complexity-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.algorithm-complexity .complexity-item .op-name {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.algorithm-complexity .complexity-item .op-complexity {
  font-family: var(--font-mono);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-primary);
}

.complexity-green  { border-top: 3px solid #10b981; }
.complexity-yellow { border-top: 3px solid #f59e0b; }
.complexity-red    { border-top: 3px solid #ef4444; }
.complexity-blue   { border-top: 3px solid #3b82f6; }
.complexity-purple { border-top: 3px solid #a855f7; }

/* ── Key Line Highlight ── */
.key-line {
  display: block;
  background: rgba(253, 224, 71, 0.12);
  border-left: 3px solid #f59e0b;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  margin: 2px -22px 2px -22px;
  padding: 0 22px;
  position: relative;
}

.key-line::after {
  content: '★';
  position: absolute;
  right: 8px;
  top: 0;
  font-size: 0.7em;
  color: #f59e0b;
  opacity: 0.7;
}

/* ── Step Comment ── */
.step-comment {
  background: rgba(74, 108, 247, 0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 16px 10px 44px;
  margin: 12px 0;
  font-size: 0.9em;
  color: var(--color-text-muted);
  position: relative;
  counter-increment: step-counter;
}

.step-comment::before {
  content: counter(step-counter);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.step-list {
  counter-reset: step-counter;
}

/* ── Concept Card ── */
.concept-card {
  display: flex;
  gap: 16px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-med), transform var(--transition-med);
  align-items: flex-start;
}

.concept-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.concept-card .card-icon {
  font-size: 2em;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(74, 108, 247, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-radius: var(--radius-md);
}

.concept-card .card-body {}

.concept-card .card-title {
  font-size: 1em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.concept-card .card-desc {
  font-size: 0.875em;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.concept-card .card-complexity {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--color-primary);
  background: rgba(74, 108, 247, 0.08);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  margin-top: 6px;
  display: inline-block;
}

/* ── Connection Box ── */
.connection-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.02) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px 12px 44px;
  margin: 16px 0;
  font-size: 0.9em;
  color: #065f46;
  position: relative;
}

.connection-box::before {
  content: '🔗';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
}

.connection-box a {
  color: #059669 !important;
  font-weight: 600;
}

.connection-box p:last-child {
  margin-bottom: 0;
}

/* ── Copy Hint on Code Block Hover ── */
.book .book-body .page-wrapper .page-inner section.normal pre:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--color-code-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ── Table Row Smooth Transition ── */
.book .book-body table tbody tr {
  transition: background var(--transition-med), box-shadow var(--transition-med);
}

.book .book-body table tbody tr:hover {
  background: #eff3ff !important;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* ── Highlight Animation ── */
@keyframes highlightPulse {
  0%   { background-color: rgba(74, 108, 247, 0.0); }
  30%  { background-color: rgba(74, 108, 247, 0.18); }
  100% { background-color: rgba(74, 108, 247, 0.0); }
}

@keyframes fadeInScale {
  0%   { opacity: 0; transform: scale(0.97) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}

.highlight-animation {
  animation: highlightPulse 1.8s ease forwards;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
}

.fade-in-scale {
  animation: fadeInScale 0.4s ease forwards;
}

.slide-in-left {
  animation: slideInLeft 0.35s ease forwards;
}

/* ── Code Comparison: Wrong vs Right ── */
.code-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

@media (max-width: 720px) {
  .code-comparison {
    grid-template-columns: 1fr;
  }
}

.code-bad {
  border-left: 4px solid #ef4444;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow: hidden;
}

.code-bad .comparison-label {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  font-size: 0.8em;
  font-weight: 700;
  padding: 6px 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.code-bad .comparison-label::before { content: '✗ '; }

.code-good {
  border-left: 4px solid #10b981;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow: hidden;
}

.code-good .comparison-label {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  font-size: 0.8em;
  font-weight: 700;
  padding: 6px 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.code-good .comparison-label::before { content: '✓ '; }

.code-bad pre,
.code-good pre {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
}

/* ── Math Formula ── */
.math-formula {
  font-family: 'KaTeX', 'Times New Roman', serif;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  text-align: center;
  font-size: 1.1em;
  margin: 20px 0;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.math-formula::before {
  content: '∑';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.75em;
  color: var(--color-text-light);
  opacity: 0.5;
}

/* ── USACO Badge Tags ── */
.usaco-bronze {
  color: #92400e;
  font-weight: 600;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.82em;
  border: 1px solid rgba(180, 83, 9, 0.3);
  display: inline-block;
}

.usaco-silver {
  color: #475569;
  font-weight: 600;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.82em;
  border: 1px solid rgba(100, 116, 139, 0.35);
  display: inline-block;
}

.usaco-gold {
  color: #78350f;
  font-weight: 600;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.82em;
  border: 1px solid rgba(217, 119, 6, 0.4);
  display: inline-block;
}

/* ── Chapter progress indicator (top of page) ── */
.chapter-progress-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 0.82em;
  color: var(--color-text-muted);
}

.chapter-progress-indicator .progress-track {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
}

.chapter-progress-indicator .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: 99px;
  transition: width 0.6s ease;
}

/* ── Algorithm Tag Pills ── */
.algo-tag {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  margin: 2px 3px;
  letter-spacing: 0.03em;
}

.algo-tag-dp      { color: #6d28d9; background: rgba(109,40,217,0.10); border: 1px solid rgba(109,40,217,0.2); }
.algo-tag-graph   { color: #0369a1; background: rgba(3,105,161,0.10); border: 1px solid rgba(3,105,161,0.2); }
.algo-tag-greedy  { color: #065f46; background: rgba(6,95,70,0.10); border: 1px solid rgba(6,95,70,0.2); }
.algo-tag-tree    { color: #7c2d12; background: rgba(124,45,18,0.10); border: 1px solid rgba(124,45,18,0.2); }
.algo-tag-sort    { color: #be185d; background: rgba(190,24,93,0.10); border: 1px solid rgba(190,24,93,0.2); }
.algo-tag-math    { color: #1d4ed8; background: rgba(29,78,216,0.10); border: 1px solid rgba(29,78,216,0.2); }

/* ============================================================
   algo-visualizer.css — Interactive Algorithm Visualizer Styles
   Appended to website.css for auto-loading in GitBook
   ============================================================ */

.algo-viz {
  font-family: 'Inter', -apple-system, sans-serif;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin: 28px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  background: #ffffff;
}

.algo-viz-header {
  background: linear-gradient(135deg, #0f0f17 0%, #1a1a2e 100%);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.algo-viz-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.algo-viz-step-counter {
  color: #a8b4c8;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
}

.algo-viz-canvas {
  padding: 24px;
  min-height: 200px;
  background: #fafbff;
  position: relative;
}

.algo-viz-explanation {
  padding: 12px 20px;
  background: #f0f4ff;
  border-top: 1px solid #e2e8f0;
  font-size: 13.5px;
  color: #1e293b;
  min-height: 44px;
  line-height: 1.6;
}

.algo-viz-explanation .step-label {
  color: #4A6CF7;
  font-weight: 700;
  margin-right: 6px;
}

.algo-viz-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.viz-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.viz-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.viz-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.viz-btn-primary {
  background: #4A6CF7;
  color: #ffffff;
  border-color: #4A6CF7;
}

.viz-btn-primary:hover:not(:disabled) {
  background: #3557e8;
  border-color: #3557e8;
}

.viz-progress {
  flex: 1;
  min-width: 60px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.viz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4A6CF7, #a855f7);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Array element styles */
.viz-array-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 52px;
  height: 52px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Fira Code', monospace;
  background: #ffffff;
  color: #1e293b;
  transition: all 0.3s ease;
  position: relative;
  box-sizing: border-box;
}

.viz-array-cell.active {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}

.viz-array-cell.visited {
  border-color: #10b981;
  background: #f0fdf4;
  color: #065f46;
}

.viz-array-cell.highlight {
  border-color: #4A6CF7;
  background: #eff3ff;
  color: #1e40af;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(74,108,247,0.3);
}

.viz-array-cell.comparing {
  border-color: #a855f7;
  background: #faf5ff;
  color: #581c87;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(168,85,247,0.3);
}

.viz-array-cell.sorted {
  border-color: #10b981;
  background: #dcfce7;
  color: #065f46;
}

/* Graph node styles (SVG) */
.viz-code-panel {
  background: #0d1117;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.8;
  margin-top: 12px;
  overflow-x: auto;
}

.viz-code-line {
  padding: 1px 6px;
  border-radius: 3px;
  color: #8b949e;
  transition: all 0.2s ease;
  white-space: pre;
}

.viz-code-line.active-line {
  background: rgba(74,108,247,0.2);
  color: #e6edf3;
  border-left: 2px solid #4A6CF7;
  padding-left: 4px;
}

/* ============================================================
   ALGO VISUALIZER V2 — Three-Panel Layout
   ============================================================ */

/* Main container */
.algo-viz-v2 {
  font-family: 'Inter', -apple-system, sans-serif;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin: 32px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  background: #ffffff;
}

/* Header bar */
.avv2-header {
  background: linear-gradient(135deg, #0f0f17 0%, #1a1a2e 100%);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.avv2-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.avv2-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}
.avv2-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15);
  color: #a8b4c8;
  background: rgba(255,255,255,0.07);
}
.avv2-badge.step-badge {
  color: #4A6CF7;
  border-color: rgba(74,108,247,0.4);
  background: rgba(74,108,247,0.12);
}
button.avv2-expand-btns {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

/* Three-panel body */
.avv2-body {
  display: grid;
  grid-template-columns: 1fr 220px 280px;
  min-height: 340px;
  border-bottom: 1px solid #e2e8f0;
}

/* Panel 1: Graph/Array visualization */
.avv2-graph-panel {
  padding: 20px;
  background: #fafbff;
  border-right: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}
.avv2-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 12px;
}

/* Panel 2: Data structure state */
.avv2-ds-panel {
  padding: 16px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
}

/* Panel 3: Code panel */
.avv2-code-panel {
  background: #0d1117;
  padding: 14px 16px;
  overflow-y: auto;
}
.avv2-code-panel .avv2-panel-label {
  color: #4a5568;
  margin-bottom: 8px;
}

/* Code lines */
.avv2-code-line {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 11.5px;
  line-height: 1.9;
  padding: 0 6px;
  border-radius: 3px;
  color: #6e7681;
  transition: all 0.2s ease;
  white-space: pre;
  border-left: 2px solid transparent;
}
.avv2-code-line.hl {
  background: rgba(74,108,247,0.18);
  color: #e6edf3;
  border-left-color: #4A6CF7;
}
.avv2-code-line.hl-return {
  background: rgba(16,185,129,0.15);
  color: #6ee7b7;
  border-left-color: #10b981;
}
.avv2-code-line.hl-warn {
  background: rgba(245,158,11,0.15);
  color: #fcd34d;
  border-left-color: #f59e0b;
}

/* Data structure items */
.ds-queue-container, .ds-stack-container, .ds-dist-table, .ds-array-row {
  margin-bottom: 14px;
}
.ds-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 6px;
}

/* Queue visualization */
.ds-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  transition: all 0.25s ease;
}
.ds-queue-item.front {
  border-color: #4A6CF7;
  background: #eff3ff;
  color: #4A6CF7;
}
.ds-queue-item.new-item {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

/* Stack visualization */
.ds-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}
.ds-stack-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  transition: all 0.25s ease;
}
.ds-stack-item.top {
  border-color: #4A6CF7;
  background: #eff3ff;
  color: #4A6CF7;
}

/* Distance table */
.ds-dist-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}
.ds-dist-row:last-child { border-bottom: none; }
.ds-dist-node {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: #f1f5f9; color: #475569;
  border: 1.5px solid #cbd5e1;
  flex-shrink: 0;
}
.ds-dist-node.current { background: #dbeafe; color: #1e40af; border-color: #4A6CF7; }
.ds-dist-node.settled { background: #bbf7d0; color: #065f46; border-color: #10b981; }
.ds-dist-value {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: #1e293b;
  font-weight: 600;
}
.ds-dist-value.updated { color: #10b981; }
.ds-dist-value.inf { color: #94a3b8; }
.ds-dist-arrow { color: #94a3b8; font-size: 10px; }

/* Visited set */
.ds-visited-set {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ds-visited-chip {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  background: #bbf7d0;
  color: #065f46;
  border: 1px solid #10b981;
}

/* Complexity badge */
.ds-complexity {
  margin-top: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  color: #64748b;
}
.ds-complexity code {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: #4A6CF7;
  background: none;
  border: none;
  padding: 0;
}

/* Explanation row */
.avv2-explain {
  padding: 12px 20px;
  background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%);
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  line-height: 1.65;
  color: #1e293b;
  min-height: 52px;
}
.avv2-explain .step-tag {
  display: inline-block;
  background: #4A6CF7;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Controls row */
.avv2-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  flex-wrap: wrap;
}
.avv2-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  transition: all 0.15s ease;
  font-family: inherit;
}
.avv2-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.avv2-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.avv2-btn-primary {
  background: linear-gradient(135deg, #4A6CF7 0%, #6d8ef8 100%);
  color: #fff;
  border-color: #4A6CF7;
  font-weight: 600;
  padding: 6px 18px;
}
.avv2-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3557e8 0%, #4A6CF7 100%);
  border-color: #3557e8;
}
.avv2-spacer { flex: 1; }
.avv2-progress-wrap { display: flex; align-items: center; gap: 8px; }
.avv2-progress {
  width: 120px; height: 4px;
  background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.avv2-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4A6CF7, #a855f7);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.avv2-progress-text {
  font-size: 11px;
  color: #94a3b8;
  font-family: 'Fira Code', monospace;
  white-space: nowrap;
}

/* Responsive: stack panels on small screens */
@media (max-width: 768px) {
  .avv2-body {
    grid-template-columns: 1fr;
  }
  .avv2-graph-panel, .avv2-ds-panel, .avv2-code-panel {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .avv2-progress { width: 80px; }
}

/* ============================================================
   ALGO VIZ — Lightbox / Expand Support
   ============================================================ */

/* Expand button group in header */
.avv2-expand-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.avv2-expand-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #a8b4c8;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
  font-family: inherit;
}
.avv2-expand-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  border-color: rgba(255,255,255,0.35);
}

/* Lightbox overlay */
.avv2-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.avv2-lightbox-overlay.open {
  display: flex;
}

.avv2-lightbox-inner {
  background: #ffffff;
  border-radius: 14px;
  width: 92vw;
  max-width: 1300px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  position: relative;
  display: flex;
  flex-direction: column;
}

.avv2-lightbox-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.avv2-lightbox-close:hover {
  background: rgba(239,68,68,0.7);
  border-color: transparent;
  color: #fff;
}

/* Inside lightbox, override grid to give more room */
.avv2-lightbox-inner .avv2-body {
  grid-template-columns: 1fr 260px 320px;
  min-height: 420px;
}
.avv2-lightbox-inner .avv2-graph-panel svg {
  min-height: 360px;
}
.avv2-lightbox-inner .avv2-code-line {
  font-size: 13px;
  line-height: 2.0;
}
.avv2-lightbox-inner .avv2-explain {
  font-size: 14px;
}


/* ============================================================
   UI/UX Comprehensive optimization & extension — USACO C++ Guide v2.1
   Added: dark mode, progress bar, tags,callout, code enhancement, badges,
         related cards, responsive, print styles, collapsible exercises
   ============================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. Dark mode support (prefers-color-scheme: dark)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Background */
    --color-bg:           #0f0f17;
    --color-bg-subtle:    #161622;
    --color-bg-grid:      #12121e;

    /* Sidebar */
    --color-sidebar-bg:   #09090f;
    --color-sidebar-bg2:  #0d0d18;
    --color-sidebar-text: #8892a8;
    --color-sidebar-text-hover: #c0c8dc;
    --color-sidebar-active: #e6edf3;
    --color-sidebar-active-bg:  rgba(74, 108, 247, 0.20);
    --color-sidebar-active-glow: rgba(74, 108, 247, 0.30);
    --color-sidebar-border: rgba(255, 255, 255, 0.05);
    --color-sidebar-section: #4a5470;

    /* Primary color */
    --color-primary:       #4A6CF7;
    --color-primary-light: #6d8ef8;
    --color-primary-dark:  #3557e8;
    --color-accent:        #10b981;
    --color-accent-purple: #a855f7;

    /* Text */
    --color-text:          #e6edf3;
    --color-text-muted:    #8b949e;
    --color-text-light:    #6e7681;

    /* Border */
    --color-border:        #30363d;
    --color-border-subtle: #21262d;

    /* Code block */
    --color-code-bg:       #0d1117;
    --color-code-border:   #30363d;
    --color-code-text:     #e6edf3;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 20px rgba(74, 108, 247, 0.25);
  }

  /* Body area background */
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  /* Main content area */
  .main-content,
  .content-area,
  article,
  .chapter-content {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  /* Card / Box */
  .card,
  .concept-card,
  .info-box,
  .algo-box {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
  }

  /* Table */
  table {
    border-color: var(--color-border);
  }
  th {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border-color: var(--color-border);
  }
  td {
    border-color: var(--color-border);
    color: var(--color-text);
  }
  tr:hover {
    background: rgba(74, 108, 247, 0.06);
  }

  /* Link */
  a {
    color: #4A6CF7;
  }
  a:hover {
    color: #6d8ef8;
  }

  /* Inline code */
  code:not([class*="language-"]) {
    background: rgba(13, 17, 23, 0.8);
    color: #e6edf3;
    border-color: var(--color-border);
  }

  /* Code highlight container */
  pre,
  .code-block,
  .highlight {
    background: var(--color-code-bg) !important;
    border-color: var(--color-code-border) !important;
  }

  /* Input field */
  input, textarea, select {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border-color: var(--color-border);
  }

  /* Divider */
  hr {
    border-color: var(--color-border);
  }

  /* blockquote */
  blockquote {
    border-left-color: var(--color-primary);
    background: rgba(74, 108, 247, 0.06);
    color: var(--color-text-muted);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. Chapter progress tracking UI — .chapter-progress
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.chapter-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}

.chapter-progress::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary, #4A6CF7), var(--color-accent-purple, #a855f7));
}

.chapter-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chapter-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chapter-progress-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #4A6CF7);
  white-space: nowrap;
}

.chapter-progress-count .current {
  font-size: 18px;
  color: var(--color-text, #1a1d2e);
}

.chapter-progress-count .total {
  font-size: 13px;
  color: var(--color-text-muted, #64748b);
}

.chapter-progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--color-border-subtle, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
}

.chapter-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary, #4A6CF7) 0%, var(--color-accent, #10b981) 100%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 4px;
}

.chapter-progress-steps {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.chapter-progress-step {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-subtle, #f1f5f9);
  transition: background 0.3s ease;
}

.chapter-progress-step.done {
  background: var(--color-primary, #4A6CF7);
}

.chapter-progress-step.current {
  background: var(--color-accent, #10b981);
  animation: progress-pulse 1.5s ease-in-out infinite;
}

@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-color-scheme: dark) {
  .chapter-progress {
    background: var(--color-bg-subtle, #161622);
    border-color: var(--color-border, #30363d);
  }
  .chapter-progress-bar-wrap {
    background: var(--color-border, #30363d);
  }
  .chapter-progress-step {
    background: var(--color-border, #30363d);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. Knowledge tag enhancement — .algo-tag Multi-color version
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base algo-tag */
.algo-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Default color */
  background: rgba(74, 108, 247, 0.12);
  color: #4A6CF7;
  border: 1px solid rgba(74, 108, 247, 0.25);
}
.algo-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* array — Teal */
.algo-tag.array,
.algo-tag[data-type="array"] {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.30);
}

/* graph — Purple */
.algo-tag.graph,
.algo-tag[data-type="graph"] {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.30);
}

/* dp — Orange */
.algo-tag.dp,
.algo-tag[data-type="dp"] {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.30);
}

/* greedy — Green */
.algo-tag.greedy,
.algo-tag[data-type="greedy"] {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.30);
}

/* tree — Brown-yellow */
.algo-tag.tree,
.algo-tag[data-type="tree"] {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.30);
}

/* string — Rose */
.algo-tag.string,
.algo-tag[data-type="string"] {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.30);
}

/* binary-search — Indigo */
.algo-tag.binary-search,
.algo-tag[data-type="binary-search"] {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.30);
}

/* math — Red */
.algo-tag.math,
.algo-tag[data-type="math"] {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.30);
}

/* Tags Container */
.algo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

@media (prefers-color-scheme: dark) {
  .algo-tag { border-width: 1px; }
  .algo-tag.array, .algo-tag[data-type="array"] { background: rgba(6,182,212,0.18); }
  .algo-tag.graph, .algo-tag[data-type="graph"] { background: rgba(168,85,247,0.18); }
  .algo-tag.dp,    .algo-tag[data-type="dp"]    { background: rgba(249,115,22,0.18); }
  .algo-tag.greedy,.algo-tag[data-type="greedy"]{ background: rgba(16,185,129,0.18); }
  .algo-tag.tree,  .algo-tag[data-type="tree"]  { background: rgba(217,119,6,0.18); }
  .algo-tag.string,.algo-tag[data-type="string"]{ background: rgba(236,72,153,0.18); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. Callout Component
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Base callout ── */
.callout-tip,
.callout-warning,
.callout-danger,
.callout-success,
.callout-example {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 16px 52px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid transparent;
  margin: 20px 0;
  font-size: 14.5px;
  line-height: 1.65;
}

/* icon Use ::before Pseudo-element */
.callout-tip::before,
.callout-warning::before,
.callout-danger::before,
.callout-success::before,
.callout-example::before {
  position: absolute;
  left: 16px;
  top: 15px;
  font-size: 20px;
  line-height: 1;
}

/* Left vertical line using ::after */
.callout-tip::after,
.callout-warning::after,
.callout-danger::after,
.callout-success::after,
.callout-example::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius-md, 10px) 0 0 var(--radius-md, 10px);
}

/* callout Title */
.callout-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* callout Content */
.callout-body {
  color: var(--color-text, #1a1d2e);
  line-height: 1.7;
}
.callout-body p:last-child { margin-bottom: 0; }

/* ── 💡 TIP — Blue ── */
.callout-tip {
  background: rgba(74, 108, 247, 0.07);
  border-color: rgba(74, 108, 247, 0.25);
}
.callout-tip::before { content: '💡'; }
.callout-tip::after  { background: #4A6CF7; }
.callout-tip .callout-title { color: #4A6CF7; }

/* ── ⚠️ WARNING — Orange ── */
.callout-warning {
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.30);
}
.callout-warning::before { content: '⚠️'; }
.callout-warning::after  { background: #f59e0b; }
.callout-warning .callout-title { color: #d97706; }

/* ── 🚨 DANGER — Red ── */
.callout-danger {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.28);
}
.callout-danger::before { content: '🚨'; }
.callout-danger::after  { background: #ef4444; }
.callout-danger .callout-title { color: #ef4444; }

/* ── ✅ SUCCESS — Green ── */
.callout-success {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.28);
}
.callout-success::before { content: '✅'; }
.callout-success::after  { background: #10b981; }
.callout-success .callout-title { color: #059669; }

/* ── 📝 EXAMPLE — Purple ── */
.callout-example {
  background: rgba(168, 85, 247, 0.07);
  border-color: rgba(168, 85, 247, 0.25);
}
.callout-example::before { content: '📝'; }
.callout-example::after  { background: #a855f7; }
.callout-example .callout-title { color: #a855f7; }

/* Dark mode callout Adjustment */
@media (prefers-color-scheme: dark) {
  .callout-tip     { background: rgba(74,108,247,0.12);  border-color: rgba(74,108,247,0.30); }
  .callout-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
  .callout-danger  { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.32); }
  .callout-success { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.32); }
  .callout-example { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.30); }
  .callout-body    { color: var(--color-text, #e6edf3); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. Code block enhancement — Language label / Copy button / Line number
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Outer container (use .code-wrapper in HTML */
.code-wrapper {
  position: relative;
  margin: 20px 0;
  border-radius: var(--radius-md, 10px);
  background: var(--color-code-bg, #0d1117);
  border: 1px solid var(--color-code-border, #30363d);
  overflow: hidden;
}

/* Code block top toolbar */
.code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--color-code-border, #30363d);
  gap: 10px;
}

/* Three-dot decoration */
.code-toolbar-dots {
  display: flex;
  gap: 6px;
}
.code-toolbar-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.code-toolbar-dots .dot-red   { background: #ff5f57; }
.code-toolbar-dots .dot-yellow{ background: #ffbd2e; }
.code-toolbar-dots .dot-green { background: #28c840; }

/* Language label */
.code-lang-tag {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-xs, 4px);
  background: rgba(74, 108, 247, 0.18);
  color: #6d8ef8;
  border: 1px solid rgba(74, 108, 247, 0.30);
  pointer-events: none;
  user-select: none;
}

/* Legacy pre[data-lang] Support */
pre[data-lang]::before,
.code-wrapper[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  right: 52px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-xs, 4px);
  background: rgba(74, 108, 247, 0.18);
  color: #6d8ef8;
  border: 1px solid rgba(74, 108, 247, 0.30);
  pointer-events: none;
  z-index: 2;
}

/* Copy button */
.code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-xs, 4px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8b949e;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}
.code-copy-btn:hover {
  background: rgba(74, 108, 247, 0.18);
  border-color: rgba(74, 108, 247, 0.40);
  color: #6d8ef8;
}
.code-copy-btn:active {
  transform: scale(0.96);
}
.code-copy-btn.copied {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.40);
  color: #10b981;
}
.code-copy-btn svg,
.code-copy-btn .icon {
  width: 12px; height: 12px;
  flex-shrink: 0;
}

/* Standalone copy button (legacy, floating at pre top-right */
pre .copy-btn,
.highlight .copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-xs, 4px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8b949e;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 3;
}
pre .copy-btn:hover,
.highlight .copy-btn:hover {
  background: rgba(74, 108, 247, 0.20);
  color: #6d8ef8;
}

/* Line numberSupport */
.code-wrapper pre,
pre.line-numbers {
  counter-reset: line;
  padding-left: 52px;
}

.code-line-num,
.line-number::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  min-width: 32px;
  padding-right: 16px;
  margin-left: -52px;
  text-align: right;
  color: #484f58;
  user-select: none;
  font-size: 12px;
  border-right: 1px solid #21262d;
  margin-right: 16px;
}

/* Line highlight */
.code-line-highlight,
.line-highlight {
  background: rgba(74, 108, 247, 0.10);
  display: block;
  margin: 0 -18px;
  padding: 0 18px;
  border-left: 3px solid #4A6CF7;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. Algorithm complexity badge — .complexity-badge
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.complexity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
  cursor: default;
  /* Default: medium */
  background: rgba(234, 179, 8, 0.12);
  color: #ca8a04;
  border: 1px solid rgba(234, 179, 8, 0.30);
}

/* Excellent:O(1), O(log N), O(N), O(N log N) */
.complexity-badge.excellent,
.complexity-badge[data-level="excellent"],
.complexity-badge.fast {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.30);
}

/* Good:O(N log N), O(N²) SmallN */
.complexity-badge.good,
.complexity-badge[data-level="good"] {
  background: rgba(234, 179, 8, 0.12);
  color: #ca8a04;
  border-color: rgba(234, 179, 8, 0.30);
}

/* Slow:O(N²) LargeN and above, O(2^N), O(N!) */
.complexity-badge.slow,
.complexity-badge[data-level="slow"],
.complexity-badge.bad {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.30);
}

/* Prefix dot */
.complexity-badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .complexity-badge.excellent { background: rgba(16,185,129,0.18); }
  .complexity-badge.good      { background: rgba(234,179,8,0.18); }
  .complexity-badge.slow      { background: rgba(239,68,68,0.18); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. Knowledge related card — .prereq-box / .next-chapter-box
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Prerequisite box */
.prereq-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: var(--radius-md, 10px);
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.prereq-box::before {
  content: '📚 Prerequisites';
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6366f1;
  margin-bottom: 4px;
}

.prereq-box-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prereq-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #6366f1;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.prereq-item::before {
  content: '→';
  font-size: 11px;
  opacity: 0.7;
}

.prereq-item:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateX(2px);
  text-decoration: none;
  color: #6366f1;
}

.prereq-item.completed {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
  color: #059669;
}
.prereq-item.completed::before { content: '✓'; }

/* Next chapter preview box */
.next-chapter-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(74,108,247,0.07) 0%, rgba(168,85,247,0.07) 100%);
  border: 1px solid rgba(74, 108, 247, 0.22);
  border-radius: var(--radius-md, 10px);
  margin: 28px 0 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.next-chapter-box::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #4A6CF7, #a855f7);
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
}

.next-chapter-box:hover {
  background: linear-gradient(135deg, rgba(74,108,247,0.12) 0%, rgba(168,85,247,0.12) 100%);
  border-color: rgba(74, 108, 247, 0.40);
  transform: translateX(4px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.10));
}

.next-chapter-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  background: linear-gradient(135deg, #4A6CF7, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(74,108,247,0.30);
}

.next-chapter-content {
  flex: 1;
  min-width: 0;
}

.next-chapter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #4A6CF7);
  margin-bottom: 3px;
}

.next-chapter-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #1a1d2e);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next-chapter-desc {
  font-size: 12.5px;
  color: var(--color-text-muted, #64748b);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next-chapter-arrow {
  font-size: 20px;
  color: var(--color-primary, #4A6CF7);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.next-chapter-box:hover .next-chapter-arrow {
  transform: translateX(4px);
}

/* Dark */
@media (prefers-color-scheme: dark) {
  .prereq-box {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.25);
  }
  .next-chapter-box {
    background: linear-gradient(135deg, rgba(74,108,247,0.12) 0%, rgba(168,85,247,0.12) 100%);
    border-color: rgba(74,108,247,0.28);
  }
  .next-chapter-title { color: #e6edf3; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. Responsive optimization
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Tablet 768–1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Sidebar narrowed */
  .sidebar,
  .left-sidebar,
  nav.sidebar {
    width: 220px !important;
    min-width: 220px !important;
  }

  /* Main content area padding tightened */
  .main-content,
  .content-area,
  article.chapter-content {
    padding: 28px 32px !important;
  }

  /* Title font size reduced */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }

  /* Progress barTitle */
  .chapter-progress { padding: 12px 16px; }

  /* callout Padding */
  .callout-tip,
  .callout-warning,
  .callout-danger,
  .callout-success,
  .callout-example {
    padding: 14px 16px 14px 48px;
  }
}

/* ── Mobile < 768px ── */
@media (max-width: 767px) {
  /* Overall layout:stack vertical */
  .layout,
  .page-layout,
  .doc-layout {
    flex-direction: column !important;
  }

  /* Sidebar collapsed/hidden */
  .sidebar,
  .left-sidebar,
  nav.sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    width: 270px !important;
    height: 100% !important;
    z-index: 1000 !important;
    transition: left 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    overflow-y: auto !important;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open,
  .left-sidebar.open,
  nav.sidebar.open {
    left: 0 !important;
  }

  /* Overlay (JS controls display */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
  }
  .sidebar-overlay.active { display: block; }

  /* Hamburger menu button */
  .menu-toggle,
  .sidebar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-subtle, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    cursor: pointer;
    color: var(--color-text, #1a1d2e);
    font-size: 18px;
  }

  /* Main content */
  .main-content,
  .content-area,
  article.chapter-content {
    padding: 16px 18px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Title */
  h1 { font-size: 1.6rem !important; line-height: 1.3; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Code block horizontal scroll */
  pre,
  .code-wrapper,
  .highlight {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  pre code {
    white-space: pre !important;
    word-break: normal !important;
    font-size: 12px !important;
  }

  /* Table horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }

  /* callout Adjustment */
  .callout-tip,
  .callout-warning,
  .callout-danger,
  .callout-success,
  .callout-example {
    padding: 14px 14px 14px 44px;
    font-size: 13.5px;
  }
  .callout-tip::before,
  .callout-warning::before,
  .callout-danger::before,
  .callout-success::before,
  .callout-example::before {
    font-size: 17px;
    left: 12px;
    top: 13px;
  }

  /* next-chapter-box Compact */
  .next-chapter-box { padding: 14px 16px; gap: 12px; }
  .next-chapter-icon { width: 36px; height: 36px; font-size: 16px; }
  .next-chapter-title { font-size: 13.5px; }

  /* Progress bar */
  .chapter-progress { padding: 12px 14px; }

  /* prereq Card */
  .prereq-item { font-size: 12px; padding: 4px 10px; }

  /* Complexity badge */
  .complexity-badge { font-size: 11px; }

  /* Hide secondary elements */
  .toc-sidebar,
  .right-sidebar {
    display: none !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. Print styles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {
  /* Hide navigation/Sidebar/interactive components */
  .sidebar,
  .left-sidebar,
  nav.sidebar,
  .toc-sidebar,
  .right-sidebar,
  .top-nav,
  .topbar,
  .nav-buttons,
  .prev-next-nav,
  .chapter-nav,
  .menu-toggle,
  .sidebar-toggle,
  .sidebar-overlay,
  .code-copy-btn,
  .copy-btn,
  .avv2-visualizer,
  .algo-visualizer,
  .interactive-demo,
  .run-button,
  .exercise-run-btn,
  .search-bar,
  .feedback-widget {
    display: none !important;
  }

  /* Reset layout */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  .layout,
  .page-layout,
  .doc-layout {
    display: block !important;
  }

  .main-content,
  .content-area,
  article {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Code block */
  pre,
  code,
  .code-wrapper,
  .highlight {
    background: #f4f4f4 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 9pt;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    page-break-inside: avoid;
  }

  pre {
    padding: 10pt 12pt !important;
    overflow: visible !important;
  }

  /* Language label (hidden pseudo-element when printing */
  pre[data-lang]::before,
  .code-wrapper[data-lang]::before {
    display: none !important;
  }

  /* Code toolbar */
  .code-toolbar { display: none !important; }

  /* Link display URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "" !important;
  }

  /* callout Print version */
  .callout-tip,
  .callout-warning,
  .callout-danger,
  .callout-success,
  .callout-example {
    background: #f9f9f9 !important;
    border: 1px solid #ccc !important;
    padding: 10pt 12pt 10pt 32pt !important;
    page-break-inside: avoid;
    color: #000 !important;
  }
  .callout-title { color: #000 !important; }
  .callout-body  { color: #111 !important; }

  /* Title print page break */
  h1, h2 {
    page-break-after: avoid;
    page-break-before: auto;
  }

  /* Progress bar hidden when printing */
  .chapter-progress { display: none !important; }

  /* Exercise expanded */
  details { display: block !important; }
  details > summary { display: list-item !important; }
  details[open] > * { display: block !important; }

  /* prereq / next-chapter Print simplified */
  .prereq-box,
  .next-chapter-box {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .next-chapter-box::before { display: none !important; }
  .next-chapter-icon { display: none !important; }

  /* Table */
  table {
    display: table !important;
    border-collapse: collapse;
    width: 100%;
    font-size: 10pt;
  }
  th, td {
    border: 1px solid #bbb !important;
    padding: 5pt 8pt;
    background: none !important;
    color: #000 !important;
  }
  th { background: #eee !important; }

  /* Complexity badge */
  .complexity-badge {
    background: none !important;
    border: 1px solid #999 !important;
    color: #000 !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. Collapsible exercise area — .exercise-section
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Outer container */
.exercise-section {
  margin: 28px 0;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  border: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-bg-subtle, #f8fafc);
  box-shadow: var(--shadow-sm);
}

/* details Element */
.exercise-section details,
details.exercise {
  background: var(--color-bg-subtle, #f8fafc);
}

.exercise-section details + details,
details.exercise + details.exercise {
  border-top: 1px solid var(--color-border, #e2e8f0);
}

/* summary Element */
.exercise-section details > summary,
details.exercise > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-text, #1a1d2e);
  background: var(--color-bg-subtle, #f8fafc);
  transition: background 0.15s ease, color 0.15s ease;
  list-style: none;
  position: relative;
}
/* Remove default disclosure triangle */
.exercise-section details > summary::-webkit-details-marker,
details.exercise > summary::-webkit-details-marker {
  display: none;
}
.exercise-section details > summary::marker,
details.exercise > summary::marker {
  display: none;
}

/* Custom collapse arrow */
.exercise-section details > summary::before,
details.exercise > summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-top: 1px;
}
.exercise-section details[open] > summary::before,
details.exercise[open] > summary::before {
  transform: rotate(90deg);
  color: var(--color-primary, #4A6CF7);
}

/* Problem number badge */
.exercise-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs, 4px);
  background: rgba(74, 108, 247, 0.12);
  color: var(--color-primary, #4A6CF7);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Difficulty badge (optional */
.exercise-diff {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.exercise-diff.easy   { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.exercise-diff.medium { background: rgba(234,179,8,0.12);  color: #ca8a04; border: 1px solid rgba(234,179,8,0.25); }
.exercise-diff.hard   { background: rgba(239,68,68,0.12);  color: #dc2626; border: 1px solid rgba(239,68,68,0.25); }

/* summary hover */
.exercise-section details > summary:hover,
details.exercise > summary:hover {
  background: rgba(74, 108, 247, 0.05);
  color: var(--color-primary, #4A6CF7);
}

/* When expanded summary Background */
.exercise-section details[open] > summary,
details.exercise[open] > summary {
  background: rgba(74, 108, 247, 0.07);
  color: var(--color-primary, #4A6CF7);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

/* Content area */
.exercise-section details > summary ~ *,
details.exercise > *:not(summary) {
  padding: 16px 20px;
  animation: exercise-expand 0.2s ease;
}

.exercise-body {
  padding: 18px 20px;
  color: var(--color-text, #1a1d2e);
  line-height: 1.75;
  animation: exercise-expand 0.2s ease;
}
.exercise-body p:last-child { margin-bottom: 0; }

@keyframes exercise-expand {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hint/solution area (nested */
.exercise-hint,
.exercise-solution {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13.5px;
}

.exercise-hint {
  background: rgba(74, 108, 247, 0.06);
  border: 1px solid rgba(74, 108, 247, 0.18);
  border-left: 3px solid #4A6CF7;
}

.exercise-solution {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-left: 3px solid #10b981;
}

/* Area top title */
.exercise-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(74,108,247,0.10), rgba(168,85,247,0.06));
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.exercise-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #4A6CF7);
}

.exercise-section-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  background: var(--color-border-subtle, #f1f5f9);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e2e8f0);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .exercise-section {
    background: var(--color-bg-subtle, #161622);
    border-color: var(--color-border, #30363d);
  }
  .exercise-section details > summary,
  details.exercise > summary {
    background: var(--color-bg-subtle, #161622);
    color: var(--color-text, #e6edf3);
  }
  .exercise-section details > summary:hover,
  details.exercise > summary:hover {
    background: rgba(74,108,247,0.10);
  }
  .exercise-section details[open] > summary,
  details.exercise[open] > summary {
    background: rgba(74,108,247,0.12);
    border-color: var(--color-border, #30363d);
  }
  .exercise-body { color: var(--color-text, #e6edf3); }
  .exercise-section-header {
    background: linear-gradient(90deg, rgba(74,108,247,0.14), rgba(168,85,247,0.10));
    border-color: var(--color-border, #30363d);
  }
  .exercise-section-count {
    background: rgba(255,255,255,0.05);
    border-color: var(--color-border, #30363d);
    color: var(--color-text-muted, #8b949e);
  }
  .exercise-hint {
    background: rgba(74,108,247,0.10);
    border-color: rgba(74,108,247,0.25);
  }
  .exercise-solution {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.25);
  }
}

/* ── END OF UI/UX Comprehensive optimization & extension ── */



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE COMPREHENSIVE FIX — v3.0 (FINAL)
   
   Override strategy: use html.light selector (mdBook light theme
   and @media (prefers-color-scheme: light) double guarantee
   
   Core principles:
   1. Code blocks in light mode use light background, dark text
   2. Do not interfere with hljs syntax highlighting (not on code set on color
   3. Decorative elements (traffic-light dots, fake bar) hidden in light mode
   4. All text elements must have sufficient contrast on their background
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Light mode CSS variables override ─── */
html.light {
  --color-code-bg:      #f6f8fa;
  --color-code-border:  #d0d7de;
  --color-code-text:    #24292f;
}

/* ─── Code block: light background + correct text ─── */
html.light .book .book-body .page-wrapper .page-inner section.normal pre {
  background: #f6f8fa !important;
  border-color: #d0d7de !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  color: #24292f !important;
}

/* ─── Remove dark-mode decorations that look wrong on light bg ─── */
html.light .book .book-body .page-wrapper .page-inner section.normal pre::before,
html.light .book .book-body .page-wrapper .page-inner section.normal pre::after {
  display: none !important;
}

/* ─── Inline code: light style ─── */
html.light .book .book-body code:not([class*="language-"]),
html.light .book .book-body .page-wrapper .page-inner section.normal code:not([class*="language-"]) {
  background: rgba(175, 184, 193, 0.2) !important;
  color: #24292f !important;
  border-color: rgba(31, 35, 40, 0.15) !important;
}

/* ─── hljs syntax colors on light background ─── */
/* The default highlight.css (Atelier Dune Light) is already a light theme.
   Just make sure our CSS doesn't override hljs spans' colors. */
html.light .hljs {
  background: #f6f8fa !important;
  color: #24292f !important;
}
/* Ensure hljs child spans are NOT overridden */
html.light pre code.hljs * {
  /* intentionally empty — let hljs control its own span colors */
}

/* ─── Language badge: light style ─── */
html.light .book .book-body .page-wrapper .page-inner section.normal pre[class*="language-"]::before,
html.light .book .book-body .page-wrapper .page-inner section.normal pre code[class*="language-"]::before {
  color: #57606a !important;
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* ─── Code copy button: light style ─── */
html.light .code-copy-btn,
html.light pre .copy-btn,
html.light .highlight .copy-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #57606a !important;
  filter: none !important;
}
html.light .code-copy-btn:hover {
  background: rgba(74,108,247,0.08) !important;
  border-color: rgba(74,108,247,0.25) !important;
  color: #4A6CF7 !important;
}

/* ─── Callout components: light style ─── */
html.light .callout-body,
html.light .callout-body p,
html.light .callout-body li,
html.light .callout-body ul,
html.light .callout-body ol {
  color: #1a1d2e !important;
}
html.light .callout-body code {
  background: rgba(0,0,0,0.06) !important;
  color: #c0392b !important;
}

/* ─── Next chapter box: light style ─── */
html.light .next-chapter-title {
  color: #1a1d2e !important;
}
html.light .next-chapter-desc {
  color: #57606a !important;
}

/* ─── Prereq box: light style ─── */
html.light .prereq-title {
  color: #3730a3 !important;
}
html.light .prereq-body,
html.light .prereq-body p {
  color: #374151 !important;
}

/* ─── Exercise / details: light style ─── */
html.light .exercise-body,
html.light .exercise-body p,
html.light .exercise-body li {
  color: #1a1d2e !important;
}
html.light details > summary {
  color: #1a1d2e !important;
}
html.light .exercise-section details > summary {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1a1d2e !important;
}

/* ─── Blockquote: light style ─── */
html.light .book .book-body blockquote,
html.light .book .book-body blockquote p {
  color: #374151 !important;
  background: #f1f8ff !important;
}

/* ─── Table: light style ─── */
html.light .book .book-body table thead th {
  color: #ffffff !important; /* on gradient blue bg — white is correct */
}
html.light .book .book-body table tbody td {
  color: #1a1d2e !important;
}

/* ─── algo-viz panels inside components ─── */
html.light .avv2-ds-panel,
html.light .avv2-explain {
  background: #ffffff !important;
  color: #1a1d2e !important;
}
html.light .avv2-explain p,
html.light .avv2-explain span {
  color: #374151 !important;
}
html.light .avv2-code-panel {
  background: #f6f8fa !important;
  color: #24292f !important;
}

/* ─── Chapter progress / text labels ─── */
html.light .chapter-progress-label,
html.light .chapter-progress-text {
  color: #57606a !important;
}

/* ─── complexity badges ─── */
html.light .complexity-badge {
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   Same fixes for system light mode users who haven't
   manually selected a theme (html class defaults to "light")
   ═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  html:not(.coal):not(.navy):not(.ayu) {
    --color-code-bg:     #f6f8fa;
    --color-code-border: #d0d7de;
    --color-code-text:   #24292f;
  }
  html:not(.coal):not(.navy):not(.ayu) .book .book-body .page-wrapper .page-inner section.normal pre {
    background: #f6f8fa !important;
    border-color: #d0d7de !important;
    color: #24292f !important;
  }
  html:not(.coal):not(.navy):not(.ayu) .book .book-body .page-wrapper .page-inner section.normal pre::before,
  html:not(.coal):not(.navy):not(.ayu) .book .book-body .page-wrapper .page-inner section.normal pre::after {
    display: none !important;
  }
  html:not(.coal):not(.navy):not(.ayu) .book .book-body code:not([class*="language-"]) {
    background: rgba(175,184,193,0.2) !important;
    color: #24292f !important;
  }
  html:not(.coal):not(.navy):not(.ayu) .hljs {
    background: #f6f8fa !important;
    color: #24292f !important;
  }
  html:not(.coal):not(.navy):not(.ayu) .callout-body,
  html:not(.coal):not(.navy):not(.ayu) .callout-body p {
    color: #1a1d2e !important;
  }
  html:not(.coal):not(.navy):not(.ayu) .next-chapter-title {
    color: #1a1d2e !important;
  }
  html:not(.coal):not(.navy):not(.ayu) blockquote,
  html:not(.coal):not(.navy):not(.ayu) blockquote p {
    color: #374151 !important;
  }
}

/* ─── END LIGHT MODE FIX v3.0 ─── */

/* ── Hide Print PDF button ── */
.book-header .btn[aria-label="Print"],
.book-header a[href*="print"],
.book-header .fa-print,
.book-header li[data-level="print"],
.book-header .dropdown-menu li a[href*="print"] {
  display: none !important;
}