/* =============================================================
   DATABASE INTERNALS — "Engine Room" design system
   Palette: 093C5D deep navy / 3B7597 steel / 6FD1D7 cyan / 5DF8D8 aqua
   ============================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* base palette */
  --navy-900: #04141f;
  --navy-850: #061d2c;
  --navy-800: #08263b;
  --navy-700: #093c5d;
  --navy-600: #0d4a70;
  --steel:    #3b7597;
  --steel-lt: #5a9bc4;
  --cyan:     #6fd1d7;
  --aqua:     #5df8d8;

  /* warm accents for diagram legibility */
  --amber:    #f5b454;
  --coral:    #f58a7c;
  --violet:   #b49bf5;

  /* semantic */
  --bg:           #051622;
  --bg-grid:      rgba(111, 209, 215, 0.05);
  --surface:      #0a2b40;
  --surface-2:    #0d3450;
  --surface-3:    #114060;
  --border:       rgba(111, 209, 215, 0.14);
  --border-str:   rgba(111, 209, 215, 0.30);
  --border-glow:  rgba(93, 248, 216, 0.45);

  --text:         #e4f4f6;
  --text-soft:    #b6d4dd;
  --text-muted:   #7fa8bd;
  --text-faint:   #557a90;

  --accent:       var(--aqua);
  --accent-cyan:  var(--cyan);

  /* actor colors (diagrams / flows / chats) */
  --actor-1: #5df8d8; /* aqua   — User / Page */
  --actor-2: #6fd1d7; /* cyan   — Database / Extent */
  --actor-3: #5a9bc4; /* steel  — Table */
  --actor-4: #f5b454; /* amber  — WAL (durability) */
  --actor-5: #b49bf5; /* violet — B+Tree */
  --actor-6: #f58a7c; /* coral  — extra */

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 34px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px var(--border-glow), 0 12px 40px rgba(8, 38, 59, 0.6);

  --maxw: 1180px;
  --readw: 760px;
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* engine-room ambient background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(59, 117, 151, 0.22), transparent 60%),
    radial-gradient(900px 600px at 98% 4%, rgba(93, 248, 216, 0.10), transparent 55%),
    radial-gradient(1000px 800px at 50% 120%, rgba(13, 74, 112, 0.30), transparent 60%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 90%);
  pointer-events: none;
}

::selection { background: rgba(93, 248, 216, 0.28); color: #fff; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: #fff; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1.1em; color: var(--text-soft); }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--aqua); }
strong { color: #fff; font-weight: 700; }
em { color: var(--cyan); font-style: italic; }
code { font-family: var(--font-mono); font-size: 0.92em; }
p code, li code {
  background: rgba(111, 209, 215, 0.10);
  border: 1px solid var(--border);
  color: var(--cyan);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  font-size: 0.85em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aqua);
  font-weight: 600;
  margin: 0 0 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--aqua);
  display: inline-block;
}

/* ---- Layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.readcol { max-width: var(--readw); margin-left: auto; margin-right: auto; }
section.block { padding: clamp(40px, 7vw, 84px) 0; }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-str), transparent); margin: 0 auto; max-width: var(--maxw); }

/* ---- Top progress + nav bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 80;
  backdrop-filter: blur(14px);
  background: rgba(5, 22, 34, 0.72);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 28px;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.02rem; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--aqua), var(--steel));
  display: grid; place-items: center;
  box-shadow: 0 0 18px rgba(93,248,216,0.35);
  position: relative;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand small { display:block; font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; }
.topbar-spacer { flex: 1; }
.topnav { display: flex; gap: 4px; align-items: center; }
.topnav a {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted);
  padding: 6px 11px; border-radius: 7px; transition: all 0.15s;
}
.topnav a:hover { color: var(--aqua); background: rgba(111,209,215,0.08); }
.topnav a.current { color: var(--navy-900); background: var(--aqua); font-weight: 600; }
.progress-rail { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--steel), var(--aqua)); box-shadow: 0 0 10px var(--aqua); transition: width 0.1s linear; }

.menu-toggle { display:none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 9px; cursor: pointer; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.96rem;
  padding: 13px 22px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; transition: all 0.18s;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--aqua), var(--cyan));
  color: var(--navy-900); box-shadow: 0 8px 26px rgba(93,248,216,0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(93,248,216,0.42); color: var(--navy-900); }
.btn-ghost { background: rgba(111,209,215,0.06); border-color: var(--border-str); color: var(--text); }
.btn-ghost:hover { background: rgba(111,209,215,0.12); border-color: var(--aqua); color: #fff; }

/* ---- Cards (generic) ---- */
.card {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}

/* ---- Reveal animation ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =============================================================
   GLOSSARY TOOLTIPS
   ============================================================= */
.term {
  border-bottom: 1.5px dotted var(--cyan);
  color: var(--cyan);
  cursor: help;
  font-weight: 600;
  white-space: nowrap;
}
.term:hover { color: var(--aqua); border-bottom-color: var(--aqua); }
.tooltip-pop {
  position: fixed; z-index: 200;
  max-width: 320px;
  background: var(--navy-850);
  border: 1px solid var(--border-str);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(93,248,216,0.18);
  font-size: 0.88rem; line-height: 1.55; color: var(--text-soft);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
}
.tooltip-pop.show { opacity: 1; transform: none; }
.tooltip-pop .tt-term { font-family: var(--font-mono); color: var(--aqua); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }

/* =============================================================
   CALLOUTS
   ============================================================= */
.callout {
  display: flex; gap: 15px;
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 26px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.callout .ic { flex: none; width: 26px; height: 26px; color: var(--accent); margin-top: 1px; }
.callout .ct { font-size: 0.97rem; }
.callout .ct p { margin: 0; color: var(--text-soft); }
.callout-accent  { border-left-color: var(--aqua); background: linear-gradient(100deg, rgba(93,248,216,0.08), var(--surface) 40%); }
.callout-accent .ic { color: var(--aqua); }
.callout-info    { border-left-color: var(--cyan); }
.callout-info .ic { color: var(--cyan); }
.callout-warning { border-left-color: var(--amber); background: linear-gradient(100deg, rgba(245,180,84,0.08), var(--surface) 40%); }
.callout-warning .ic { color: var(--amber); }

/* =============================================================
   CODE ↔ ENGLISH TRANSLATION BLOCKS
   ============================================================= */
.translate {
  margin: 30px 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--navy-900);
}
.translate-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: rgba(8,38,59,0.7);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted);
}
.translate-head .dots { display: flex; gap: 6px; }
.translate-head .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.translate-head .dots i:nth-child(1){ background:#f58a7c;}
.translate-head .dots i:nth-child(2){ background:#f5b454;}
.translate-head .dots i:nth-child(3){ background:#5df8d8;}
.translate-head .fname { margin-left: 6px; color: var(--text-soft); }
.translate-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.translate-code {
  margin: 0; padding: 18px 20px;
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7;
  overflow-x: auto; color: var(--text-soft);
  border-right: 1px solid var(--border);
  background:
    repeating-linear-gradient(transparent, transparent 1.7em, rgba(255,255,255,0.012) 1.7em, rgba(255,255,255,0.012) 3.4em);
}
.translate-code .ln { color: var(--text-faint); user-select: none; display:inline-block; width:2ch; text-align:right; margin-right: 14px; }
.translate-english { padding: 18px 20px; background: var(--surface); }
.translate-english h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua); margin: 0 0 10px; }
.translate-english p { font-size: 0.92rem; margin: 0 0 0.7em; color: var(--text-soft); }
.translate-english p:last-child { margin-bottom: 0; }
.translate-english .hl { color: var(--cyan); font-weight: 600; }

/* code token colors */
.tok-kw { color: #6fd1d7; }
.tok-type { color: #b49bf5; }
.tok-str { color: #5df8d8; }
.tok-num { color: #f5b454; }
.tok-com { color: #557a90; font-style: italic; }
.tok-fn { color: #f5d18a; }
.tok-pun { color: #8fb4c7; }

@media (max-width: 760px) {
  .translate-grid { grid-template-columns: 1fr; }
  .translate-code { border-right: none; border-bottom: 1px solid var(--border); }
}

/* standalone code block */
.codeblock {
  margin: 24px 0; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--navy-900); overflow: hidden;
}
.codeblock pre { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; overflow-x: auto; color: var(--text-soft); }

/* =============================================================
   PATTERN / FEATURE CARDS
   ============================================================= */
.cardgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 30px 0; }
.pcard {
  position: relative;
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.pcard::before { content:""; position:absolute; inset:0 0 auto 0; height: 3px; background: var(--accent, var(--aqua)); opacity: 0.85; }
.pcard:hover { transform: translateY(-4px); border-color: var(--border-str); box-shadow: var(--shadow-md); }
.pcard .pc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(93,248,216,0.10); color: var(--accent, var(--aqua)); margin-bottom: 14px; }
.pcard .pc-ic svg { width: 22px; height: 22px; }
.pcard h4 { color: #fff; margin: 0 0 7px; font-family: var(--font-display); }
.pcard .pc-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--aqua); display: block; margin-bottom: 8px; letter-spacing: 0.05em; }
.pcard p { font-size: 0.9rem; margin: 0; color: var(--text-muted); }

/* =============================================================
   ICON-LABEL ROWS / LAYER STACK
   ============================================================= */
.iconrows { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; }
.irow {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--ac, var(--aqua));
  transition: transform 0.15s, background 0.15s;
}
.irow:hover { transform: translateX(4px); background: var(--surface-2); }
.irow .ir-ic { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--ac, var(--aqua)) 16%, transparent); color: var(--ac, var(--aqua)); font-size: 1.3rem; }
.irow .ir-ic svg { width: 24px; height: 24px; }
.irow .ir-body h4 { margin: 0 0 2px; color: #fff; font-size: 1.02rem; }
.irow .ir-body p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.irow .ir-meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); text-align: right; flex: none; }

/* =============================================================
   NUMBERED STEP CARDS
   ============================================================= */
.steps { display: grid; gap: 16px; margin: 30px 0; counter-reset: step; }
.steps.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.step {
  position: relative; display: flex; gap: 16px;
  padding: 18px 20px 18px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.step .s-num {
  flex: none; counter-increment: step;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
  background: rgba(93,248,216,0.12); color: var(--aqua);
  border: 1px solid var(--border-str);
}
.step .s-num::before { content: counter(step); }
.step h4 { margin: 0 0 4px; font-size: 1rem; color: #fff; }
.step p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* =============================================================
   QUIZ
   ============================================================= */
.quiz { margin: 30px 0; display: flex; flex-direction: column; gap: 18px; }
.qcard {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px;
}
.qcard .q-kind { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aqua); font-weight: 600; }
.qcard .q-text { font-family: var(--font-display); font-size: 1.1rem; color: #fff; margin: 8px 0 16px; line-height: 1.4; }
.qcard .q-text code { font-size: 0.82em; }
.q-opts { display: flex; flex-direction: column; gap: 10px; }
.q-opt {
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left; width: 100%;
  padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--navy-850); border: 1px solid var(--border);
  color: var(--text-soft); font-family: var(--font-body); font-size: 0.94rem;
  cursor: pointer; transition: all 0.15s;
}
.q-opt:hover:not(:disabled) { border-color: var(--border-str); background: var(--surface-2); }
.q-opt .q-mark { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--text-faint); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); transition: all 0.15s; }
.q-opt.correct { border-color: var(--aqua); background: rgba(93,248,216,0.10); color: #fff; }
.q-opt.correct .q-mark { border-color: var(--aqua); background: var(--aqua); color: var(--navy-900); }
.q-opt.wrong { border-color: var(--coral); background: rgba(245,138,124,0.10); }
.q-opt.wrong .q-mark { border-color: var(--coral); background: var(--coral); color: var(--navy-900); }
.q-opt:disabled { cursor: default; }
.q-explain {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(93,248,216,0.07); border: 1px solid var(--border);
  font-size: 0.9rem; color: var(--text-soft);
  display: none;
}
.q-explain.show { display: block; }
.q-explain strong { color: var(--aqua); }

/* =============================================================
   DRAG & DROP
   ============================================================= */
.dnd { margin: 30px 0; }
.dnd-pool { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--navy-850); border: 1px dashed var(--border-str); margin-bottom: 18px; min-height: 60px; }
.dnd-pool .dnd-label { width: 100%; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.chip {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem;
  padding: 9px 14px; border-radius: 9px; cursor: grab;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-str); color: var(--cyan);
  user-select: none; transition: transform 0.12s, box-shadow 0.12s;
}
.chip:active { cursor: grabbing; }
.chip.dragging { opacity: 0.4; }
.chip.placed { color: #fff; border-color: var(--aqua); }
.dnd-zones { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.dnd-zone { border-radius: var(--r-md); border: 1.5px dashed var(--border); background: var(--surface); padding: 14px; min-height: 110px; transition: all 0.15s; }
.dnd-zone.over { border-color: var(--aqua); background: rgba(93,248,216,0.07); }
.dnd-zone .dz-title { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.dnd-zone .dz-drop { display: flex; flex-wrap: wrap; gap: 8px; }
.dnd-zone.correct { border-color: var(--aqua); border-style: solid; }
.dnd-zone.incorrect { border-color: var(--coral); }
.dnd-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.dnd-result { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.dnd-result.ok { color: var(--aqua); }
.dnd-result.bad { color: var(--coral); }

/* =============================================================
   GROUP CHAT ANIMATION
   ============================================================= */
.chat {
  margin: 30px 0; border-radius: var(--r-lg);
  border: 1px solid var(--border); overflow: hidden;
  background: var(--navy-900);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: rgba(8,38,59,0.7); border-bottom: 1px solid var(--border); }
.chat-head .ch-title { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 0.98rem; display:flex; align-items:center; gap:8px;}
.chat-head .ch-roster { display: flex; gap: 6px; flex-wrap: wrap; }
.roster-pill { font-family: var(--font-mono); font-size: 0.68rem; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--border); color: var(--c, var(--cyan)); }
.chat-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; min-height: 240px; max-height: 460px; overflow-y: auto; }
.bubble { display: flex; gap: 11px; max-width: 86%; opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; }
.bubble.in { opacity: 1; transform: none; }
.bubble .av { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; background: color-mix(in srgb, var(--c, var(--cyan)) 18%, transparent); color: var(--c, var(--cyan)); border: 1px solid color-mix(in srgb, var(--c, var(--cyan)) 40%, transparent); }
.bubble .msg { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 10px 14px; }
.bubble .who { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c, var(--cyan)); font-weight: 600; margin-bottom: 2px; }
.bubble .what { font-size: 0.92rem; color: var(--text); }
.bubble .what code { font-size: 0.86em; }
.bubble.narrator { max-width: 100%; justify-content: center; }
.bubble.narrator .msg { background: rgba(245,180,84,0.10); border-color: rgba(245,180,84,0.3); border-radius: 12px; text-align: center; }
.bubble.narrator .what { color: var(--amber); font-family: var(--font-mono); font-size: 0.85rem; }
.chat-foot { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.chat-foot .cf-status { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }

/* =============================================================
   DATA FLOW ANIMATION
   ============================================================= */
.flow { margin: 30px 0; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--navy-900); overflow: hidden; }
.flow-head { display:flex; align-items:center; justify-content: space-between; padding: 13px 18px; background: rgba(8,38,59,0.7); border-bottom: 1px solid var(--border); }
.flow-head .fh-title { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 0.98rem; }
.flow-stage { position: relative; padding: 26px 22px; }
.flow-actors { display: flex; justify-content: space-between; gap: 10px; position: relative; z-index: 2; }
.flow-actor { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; opacity: 0.5; transition: opacity 0.3s, transform 0.3s; }
.flow-actor.active { opacity: 1; transform: translateY(-3px); }
.flow-actor .fa-node {
  width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center;
  background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--c, var(--cyan)); transition: all 0.3s; position: relative;
}
.flow-actor.active .fa-node { border-color: var(--c, var(--cyan)); background: color-mix(in srgb, var(--c, var(--cyan)) 14%, var(--surface-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--cyan)) 18%, transparent), 0 0 24px color-mix(in srgb, var(--c, var(--cyan)) 40%, transparent); }
.flow-actor .fa-node svg { width: 26px; height: 26px; }
.flow-actor .fa-name { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.flow-actor.active .fa-name { color: var(--c, var(--cyan)); }
.flow-track { position: absolute; left: 11%; right: 11%; top: 51px; height: 2px; background: var(--border); z-index: 1; }
.flow-packet { position: absolute; top: 44px; width: 16px; height: 16px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 16px var(--aqua); z-index: 3; left: 0; opacity: 0; transition: left 0.6s cubic-bezier(.5,0,.5,1), opacity 0.3s; }
.flow-caption { margin-top: 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); min-height: 64px; display: flex; align-items: center; gap: 14px; }
.flow-caption .fc-step { flex: none; font-family: var(--font-mono); font-weight: 700; color: var(--navy-900); background: var(--aqua); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 0.85rem; }
.flow-caption .fc-text { font-size: 0.95rem; color: var(--text); }
.flow-caption .fc-text .durable { color: var(--amber); font-weight: 700; }
.flow-foot { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--border); }
.flow-dots { display: flex; gap: 6px; margin-left: auto; }
.flow-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-str); transition: all 0.2s; }
.flow-dots i.on { background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }

@media (max-width: 680px) {
  .flow-actor .fa-node { width: 46px; height: 46px; }
  .flow-actor .fa-name { font-size: 0.6rem; }
}

/* =============================================================
   SPOT THE BUG
   ============================================================= */
.spotbug { margin: 30px 0; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: var(--navy-900); }
.spotbug .sb-head { padding: 11px 16px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); background: rgba(8,38,59,0.7); border-bottom: 1px solid var(--border); display:flex; align-items:center; gap: 8px; }
.spotbug .sb-head b { color: var(--amber); }
.spotbug pre { margin: 0; padding: 14px 0; }
.sb-line { display: block; padding: 2px 18px; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75; color: var(--text-soft); white-space: pre; }
.sb-line.clickable { cursor: pointer; transition: background 0.12s; }
.sb-line.clickable:hover { background: rgba(111,209,215,0.07); }
.sb-line.miss { background: rgba(245,138,124,0.12); }
.sb-line.bug-found { background: rgba(245,180,84,0.16); box-shadow: inset 3px 0 0 var(--amber); }
.sb-line.locked { cursor: default; }
.sb-reveal { display: none; padding: 16px 18px; border-top: 1px solid var(--border); background: var(--surface); font-size: 0.92rem; color: var(--text-soft); }
.sb-reveal.show { display: block; }
.sb-reveal strong { color: var(--amber); }
.sb-hint { padding: 0 18px 12px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); }

/* =============================================================
   TABS / LAYER TOGGLE
   ============================================================= */
.tabs { margin: 30px 0; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: var(--navy-900); }
.tab-bar { display: flex; gap: 4px; padding: 8px; background: rgba(8,38,59,0.7); border-bottom: 1px solid var(--border); }
.tab-btn { font-family: var(--font-mono); font-size: 0.82rem; padding: 9px 16px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.tab-btn:hover { color: var(--text); background: rgba(111,209,215,0.07); }
.tab-btn.active { background: var(--aqua); color: var(--navy-900); font-weight: 600; }
.tab-panel { display: none; padding: 20px; }
.tab-panel.active { display: block; animation: fadein 0.3s ease; }
.tab-panel pre { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; overflow-x: auto; color: var(--text-soft); }
.tab-panel .tp-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =============================================================
   PILL CONTROLS (used by toys)
   ============================================================= */
.pillbtn { font-family: var(--font-mono); font-size: 0.82rem; padding: 9px 15px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-str); color: var(--text); cursor: pointer; transition: all 0.15s; }
.pillbtn:hover { border-color: var(--aqua); color: #fff; background: var(--surface-3); }
.pillbtn:disabled { opacity: 0.4; cursor: default; }
.pillbtn.primary { background: var(--aqua); color: var(--navy-900); border-color: var(--aqua); font-weight: 600; }
.pillbtn.primary:hover { box-shadow: 0 0 18px rgba(93,248,216,0.4); }
.field { font-family: var(--font-mono); font-size: 0.85rem; padding: 9px 13px; border-radius: 9px; background: var(--navy-900); border: 1px solid var(--border-str); color: var(--aqua); width: 90px; }
.field:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(93,248,216,0.15); }

/* =============================================================
   TOY: B+ TREE BUILDER
   ============================================================= */
.toy { margin: 32px 0; border-radius: var(--r-xl); border: 1px solid var(--border-str); background: linear-gradient(180deg, var(--navy-850), var(--navy-900)); overflow: hidden; box-shadow: var(--shadow-md); }
.toy-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.5); flex-wrap: wrap; }
.toy-head .th-title { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.02rem; display: flex; align-items: center; gap: 9px; }
.toy-head .th-title .live { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.toy-head .th-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.toy-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.toy-controls .ctl-group { display: flex; gap: 7px; align-items: center; }
.toy-controls .ctl-sep { width: 1px; height: 26px; background: var(--border); margin: 0 4px; }
.toy-controls label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }

.bpt-canvas { overflow-x: auto; padding: 10px 16px 20px; min-height: 220px; background:
  radial-gradient(circle at 50% 0, rgba(93,248,216,0.04), transparent 60%); }
.bpt-canvas svg { display: block; }
.bpt-status { padding: 14px 20px; font-size: 0.92rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 52px; display: flex; align-items: center; }
.bpt-status.ok { color: var(--aqua); }
.bpt-status.warn { color: var(--amber); }
.bpt-stats { display: flex; gap: 18px; padding: 12px 20px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.bpt-stats b { color: var(--cyan); font-size: 0.95rem; }
.bpt-legend { display:flex; gap:16px; flex-wrap:wrap; padding: 0 20px 14px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.bpt-legend span { display:inline-flex; align-items:center; gap:6px; }
.bpt-legend i { width: 12px; height: 12px; border-radius: 3px; display:inline-block; }

/* ---- guided explainer steppers (search / insert walkthroughs) ---- */
.bpw-canvas { overflow-x: auto; padding: 14px 16px 8px; min-height: 200px; display: flex; justify-content: center; background: radial-gradient(circle at 50% 0, rgba(93,248,216,0.04), transparent 60%); }
.bpw-canvas svg { display: block; }
.bpw-caption { padding: 16px 22px; font-size: 0.98rem; line-height: 1.6; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 86px; display: flex; align-items: center; }
.bpw-caption b { color: #fff; }
.bpw-caption code { font-size: 0.84em; }
.bpw-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.bpw-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.bpw-dots { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; max-width: 50%; justify-content: flex-end; }
.bpw-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-str); transition: all 0.2s; }
.bpw-dots i.done { background: var(--steel-lt); }
.bpw-dots i.on { background: var(--aqua); box-shadow: 0 0 8px var(--aqua); transform: scale(1.25); }

/* ---- anatomy diagram + rules ---- */
.anatomy-wrap { margin: 28px 0; }
.anatomy-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.arule { display: flex; gap: 13px; padding: 15px 17px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ac, var(--aqua)); }
.arule .ar-n { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; background: color-mix(in srgb, var(--ac, var(--aqua)) 18%, transparent); color: var(--ac, var(--aqua)); }
.arule h5 { margin: 0 0 3px; font-family: var(--font-display); font-size: 0.98rem; color: #fff; }
.arule p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
@media (max-width: 680px) { .anatomy-rules { grid-template-columns: 1fr; } }

/* ---- 3-panel split diagram ---- */
.splitpanels { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; margin: 28px 0; }
.sp-panel { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--navy-900); overflow: hidden; }
.sp-panel.danger { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245,180,84,0.3), 0 0 22px rgba(245,180,84,0.12); }
.sp-panel .sp-cap { padding: 10px 14px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.5); text-align: center; }
.sp-panel.danger .sp-cap { color: var(--amber); }
.sp-panel .bpw-canvas, .sp-panel > div[class^="sp-"] { min-height: 120px; padding: 14px 8px; }
.sp-canvas { overflow-x: auto; padding: 16px 8px; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.sp-arrow { display: grid; place-items: center; color: var(--aqua); padding: 0 12px; }
.sp-arrow svg { width: 26px; height: 26px; }
.sp-note { padding: 10px 14px; font-size: 0.8rem; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); background: var(--surface); }
@media (max-width: 820px) {
  .splitpanels { grid-template-columns: 1fr; }
  .sp-arrow { transform: rotate(90deg); padding: 8px 0; }
}

/* =============================================================
   TOY: QUERY PLANNER
   ============================================================= */
.qp-queries { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.qp-pipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; padding: 22px 20px; }
.qp-stage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; transition: border-color 0.3s, box-shadow 0.3s; opacity: 0.6; }
.qp-stage.lit { opacity: 1; border-color: var(--border-str); box-shadow: 0 0 22px rgba(93,248,216,0.10); }
.qp-stage .qs-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 10px; }
.qp-arrow { display: grid; place-items: center; color: var(--text-faint); padding: 0 10px; font-size: 1.4rem; }
.qp-linq code, .qp-method code, .qp-under code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); white-space: pre-wrap; word-break: break-word; }
.qp-plan .qp-prow { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 0.74rem; margin-bottom: 6px; flex-wrap: wrap; }
.qp-plan .qp-prow span { color: var(--text-faint); min-width: 76px; }
.qp-plan .qp-prow code { color: var(--text-soft); font-size: 0.74rem; }
.qp-path { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 4px 0 8px; }
.qp-path.fast { color: var(--aqua); }
.qp-path.slow { color: var(--coral); }
.qp-under { margin-top: 8px; }
.qp-under code { color: var(--text-muted); font-size: 0.74rem; }
.qp-cost { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; padding: 4px 12px; border-radius: 8px; margin-top: 6px; }
.qp-cost.fast { background: rgba(93,248,216,0.14); color: var(--aqua); }
.qp-cost.slow { background: rgba(245,138,124,0.14); color: var(--coral); }
.qp-note { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface); font-size: 0.92rem; color: var(--text-soft); }
@media (max-width: 820px) { .qp-pipe { grid-template-columns: 1fr; gap: 12px; } .qp-arrow { transform: rotate(90deg); padding: 4px 0; } }

/* =============================================================
   TOY: METRICS DASHBOARD
   ============================================================= */
.dash-controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); align-items: center; }
.dash-top { display: grid; grid-template-columns: 1fr; gap: 0; }
.dash-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.dcounter { background: var(--navy-850); padding: 16px 16px; transition: background 0.2s; }
.dcounter.tick { background: rgba(93,248,216,0.10); }
.dcounter .dc-val { font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; color: var(--aqua); line-height: 1; }
.dcounter .dc-name { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 0.88rem; margin-top: 6px; }
.dcounter .dc-desc { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.dash-mid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.dash-logwrap { background: var(--navy-900); padding: 14px 16px; }
.dash-logwrap .dlw-head { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dash-log { height: 230px; overflow-y: auto; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7; }
.dlog-line { display: flex; gap: 9px; padding: 1px 0; white-space: nowrap; }
.dlog-line .dl-ts { color: var(--text-faint); flex: none; }
.dlog-line .dl-lvl { flex: none; font-weight: 700; }
.dlog-line.lvl-information .dl-lvl { color: var(--cyan); }
.dlog-line.lvl-warning .dl-lvl { color: var(--amber); }
.dlog-line .dl-json { color: var(--text-soft); }
.j-key { color: var(--steel-lt); }
.j-str { color: var(--aqua); }
.j-num { color: var(--amber); }
.dash-side { background: var(--navy-850); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.dash-side .ds-block .dsb-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.dash-spark { height: 56px; background: var(--navy-900); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; }
.dash-snapshot { display: none; }
.dash-snapshot.show { display: block; }
.dash-snapshot .ds-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--aqua); margin-bottom: 6px; }
.dash-snapshot pre { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-soft); background: var(--navy-900); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; max-height: 180px; overflow: auto; }
@media (max-width: 760px) { .dash-counters { grid-template-columns: repeat(2, 1fr); } .dash-mid { grid-template-columns: 1fr; } }

/* =============================================================
   TOY: EXTENT EXPLORER
   ============================================================= */
.ext-body { padding: 18px 20px; }
.ext-grid { display: flex; flex-direction: column; gap: 8px; }
.ext-row { display: flex; align-items: stretch; gap: 12px; padding: 6px; border-radius: var(--r-md); transition: background 0.2s; }
.ext-row.hit { background: rgba(245,180,84,0.07); }
.ext-tag { flex: none; width: 96px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--cyan); display: flex; flex-direction: column; justify-content: center; }
.ext-tag small { color: var(--text-faint); font-size: 0.68rem; }
.ext-row.hit .ext-tag { color: var(--amber); }
.ext-cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; flex: 1; }
.ext-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
.ext-cell:hover { border-color: var(--border-str); background: var(--surface-3); }
.ext-cell .ec-id { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; color: var(--text); }
.ext-cell .ec-slot { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); }
.ext-cell.hit { background: rgba(245,180,84,0.18); border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,180,84,0.18), 0 0 20px rgba(245,180,84,0.3); }
.ext-cell.hit .ec-id { color: var(--amber); }
.ext-controls { display: flex; gap: 10px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.ext-controls label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.ext-readout { padding: 16px 20px; background: var(--navy-900); display: flex; flex-direction: column; gap: 8px; }
.ext-readout .er-line { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 0.84rem; }
.ext-readout .er-line span { color: var(--text-faint); width: 84px; flex: none; text-align: right; }
.ext-readout .er-line code { color: var(--cyan); }
.ext-readout .er-line.big code { color: var(--amber); font-size: 0.95rem; font-weight: 600; }
.ext-readout .er-warn { color: var(--amber); font-family: var(--font-mono); font-size: 0.84rem; }
@media (max-width: 600px) { .ext-cell .ec-slot { display: none; } .ext-tag { width: 64px; } }

/* =============================================================
   TOY: READER-WRITER LOCK SIMULATOR
   ============================================================= */
.rw-diagram { display: flex; align-items: center; justify-content: center; gap: 0; padding: 30px 20px; flex-wrap: wrap; }
.rw-node { width: 150px; height: 110px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: all 0.25s; text-align: center; }
.rw-node .rn-title { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; color: var(--text-muted); }
.rw-node .rn-sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); }
.rw-node .rn-count { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--text); }
.rw-node.on { transform: translateY(-3px); }
.rw-idle.on { border-color: var(--steel-lt); background: rgba(90,155,196,0.12); box-shadow: 0 0 24px rgba(90,155,196,0.25); }
.rw-idle.on .rn-title { color: var(--steel-lt); }
.rw-readers.on { border-color: var(--aqua); background: rgba(93,248,216,0.12); box-shadow: 0 0 24px rgba(93,248,216,0.3); }
.rw-readers.on .rn-title, .rw-readers.on .rn-count { color: var(--aqua); }
.rw-writer.on { border-color: var(--amber); background: rgba(245,180,84,0.14); box-shadow: 0 0 24px rgba(245,180,84,0.3); }
.rw-writer.on .rn-title { color: var(--amber); }
.rw-link { width: 46px; height: 2px; background: var(--border); position: relative; flex: none; }
.rw-link::after { content: ""; position: absolute; right: -2px; top: -3px; border-left: 7px solid var(--border); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.rw-controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.rw-status { padding: 14px 20px; font-size: 0.92rem; color: var(--text-soft); min-height: 50px; display: flex; align-items: center; }
.rw-status.ok { color: var(--aqua); }
.rw-status.bad { color: var(--coral); }
@media (max-width: 620px) { .rw-link { width: 20px; transform: rotate(90deg); } .rw-diagram { flex-direction: column; } }

/* =============================================================
   TOY: MONEY DEMO  (module 5)
   ============================================================= */
.md-mode { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.md-stage { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px 20px 14px; flex-wrap: wrap; }
.md-acct { width: 190px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--surface-2); padding: 18px 20px; text-align: center; transition: all 0.3s; }
.md-acct .md-name { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.08em; }
.md-acct .md-bal { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: #fff; margin-top: 4px; transition: color 0.3s; }
.md-acct.md-debit { border-color: var(--coral); box-shadow: 0 0 24px rgba(245,138,124,0.25); }
.md-acct.md-debit .md-bal { color: var(--coral); }
.md-acct.md-credit { border-color: var(--aqua); box-shadow: 0 0 24px rgba(93,248,216,0.25); }
.md-acct.md-credit .md-bal { color: var(--aqua); }
.md-acct.md-crashed { border-color: var(--coral); animation: md-shake 0.4s; }
.md-acct.md-safe { border-color: var(--steel-lt); box-shadow: 0 0 24px rgba(90,155,196,0.3); }
@keyframes md-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.md-arrow { display: grid; place-items: center; color: var(--aqua); flex: none; }
.md-arrow svg { width: 30px; height: 30px; }
.md-arrow .md-amt { font-family: var(--font-mono); font-size: 0.72rem; color: var(--amber); margin-top: 2px; }
.md-total { text-align: center; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-soft); padding: 6px 20px 16px; }
.md-total b { color: #fff; font-size: 1.05rem; }
.md-ok { color: var(--aqua); }
.md-bad { color: var(--coral); }
.md-controls { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--border); background: rgba(8,38,59,0.4); flex-wrap: wrap; }
.md-check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); cursor: pointer; }
.md-check input { accent-color: var(--coral); width: 16px; height: 16px; }
.md-status { padding: 16px 20px; font-size: 0.94rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 60px; display: flex; align-items: center; line-height: 1.5; }
.md-status.ok { color: var(--aqua); }
.md-status.bad { color: var(--coral); }
.md-status b { color: #fff; }
.md-status.ok b, .md-status.bad b { color: inherit; }

/* =============================================================
   TOY: WAL CRASH LAB  (module 5)
   ============================================================= */
.wl-toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.wl-toolbar .ctl-sep { width: 1px; height: 26px; background: var(--border); margin: 0 3px; }
.wl-scenarios { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.wl-scenarios .wl-sc-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; }
.wl-buffer { padding: 11px 20px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--navy-900); }
.wl-active { color: var(--aqua); font-weight: 600; }
.wl-dim { color: var(--text-faint); }
.wl-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.wl-pane { background: var(--navy-900); display: flex; flex-direction: column; min-height: 230px; }
.wl-pane-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.wl-pane-head .wl-tag { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 0.68rem; }
.wl-pane-head .wl-disk { color: var(--amber); }
.wl-pane-head .wl-mem { color: var(--coral); }
.wl-wal, .wl-data { flex: 1; overflow-y: auto; padding: 10px 12px; max-height: 280px; }
.wl-empty { font-family: var(--font-body); font-size: 0.84rem; color: var(--text-faint); padding: 18px 8px; text-align: center; font-style: italic; line-height: 1.5; }
.wl-entry { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; font-family: var(--font-mono); font-size: 0.76rem; margin-bottom: 5px; border: 1px solid var(--border); background: var(--surface-2); transition: all 0.3s; }
.wl-entry .we-seq { color: var(--text-faint); flex: none; }
.wl-entry .we-txn { color: var(--steel-lt); flex: none; }
.wl-entry .we-op { font-weight: 700; flex: none; min-width: 52px; }
.wl-entry .we-d { color: var(--text-muted); margin-left: auto; }
.wl-entry.op-begin .we-op { color: var(--text-muted); }
.wl-entry.op-insert .we-op { color: var(--cyan); }
.wl-entry.op-insert { border-left: 2px solid var(--cyan); }
.wl-entry.op-commit .we-op { color: var(--aqua); }
.wl-entry.op-commit { border-left: 2px solid var(--aqua); background: rgba(93,248,216,0.07); }
.wl-entry.discarded { opacity: 0.34; text-decoration: line-through; text-decoration-color: var(--coral); }
.wl-entry.replaying { border-color: var(--amber); background: rgba(245,180,84,0.16); box-shadow: 0 0 16px rgba(245,180,84,0.25); transform: translateX(3px); }
.wl-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 6px; }
.wl-row .wr-k { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); }
.wl-row .wr-v { font-family: var(--font-display); font-weight: 600; color: var(--aqua); }
.wl-status { padding: 16px 20px; font-size: 0.94rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 64px; display: flex; align-items: center; line-height: 1.5; }
.wl-status.ok { color: var(--aqua); }
.wl-status.bad { color: var(--coral); }
.wl-status b { color: #fff; }
.wl-status.ok b, .wl-status.bad b { color: inherit; }
.pillbtn.danger { border-color: var(--coral); color: var(--coral); }
.pillbtn.danger:hover:not(:disabled) { background: rgba(245,138,124,0.12); border-color: var(--coral); color: #fff; }
@media (max-width: 680px) { .wl-panes { grid-template-columns: 1fr; } }

/* =============================================================
   TOY: SCAN vs INDEX RACE  (module 4)
   ============================================================= */
.sr-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.sr-group { display: flex; align-items: center; gap: 8px; }
.sr-group .sr-lbl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.sr-lanes { padding: 22px 20px 8px; display: flex; flex-direction: column; gap: 18px; }
.sr-lane { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--navy-900); padding: 14px 16px; transition: opacity 0.3s; }
.sr-lane.disabled { opacity: 0.5; }
.sr-lane-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sr-lane-head .sr-name { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1rem; }
.sr-lane-head .sr-bigo { font-family: var(--font-mono); font-size: 0.76rem; padding: 2px 8px; border-radius: 6px; }
.sr-full .sr-bigo { background: rgba(245,138,124,0.14); color: var(--coral); }
.sr-index .sr-bigo { background: rgba(93,248,216,0.14); color: var(--aqua); }
.sr-lane-head .sr-metric { margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.sr-lane-head .sr-count { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: #fff; }
.sr-track { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 10px; }
.sr-track i { width: 12px; height: 12px; border-radius: 2px; background: var(--surface-3); transition: background 0.1s, box-shadow 0.2s; }
.sr-track i.checked { background: var(--coral); }
.sr-index .sr-track i.checked { background: var(--coral); }
.sr-track i.probe { background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.sr-track i.target { outline: 2px solid var(--amber); outline-offset: 1px; }
.sr-progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.sr-progress .sr-fill { height: 100%; width: 0; border-radius: 3px; transition: width 0.05s linear; }
.sr-full .sr-fill { background: var(--coral); }
.sr-index .sr-fill { background: linear-gradient(90deg, var(--steel), var(--aqua)); }
.sr-result { padding: 16px 20px; font-size: 0.94rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 62px; display: flex; align-items: center; line-height: 1.5; }
.sr-result b { color: #fff; }
.sr-result.ok { color: var(--text-soft); border-top-color: var(--border-str); }
.sr-result.warn { color: var(--text-soft); }

/* =============================================================
   DECISION FLOW — how the planner picks an access path
   ============================================================= */
.qflow { margin: 28px 0; display: flex; flex-direction: column; align-items: center; gap: 0; }
.qf-q { width: 100%; max-width: 560px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-str); border-radius: var(--r-md); padding: 16px 20px; text-align: center; }
.qf-q .qf-ask { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.02rem; }
.qf-q .qf-ask code { font-size: 0.82em; }
.qf-branch { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 9px 0; font-family: var(--font-mono); font-size: 0.82rem; }
.qf-branch .qf-leg { color: var(--text-faint); }
.qf-out { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem; }
.qf-out .qf-cost { font-weight: 400; opacity: 0.85; }
.qf-out.full { background: rgba(245,138,124,0.12); border: 1px solid rgba(245,138,124,0.3); color: var(--coral); }
.qf-out.point { background: rgba(93,248,216,0.12); border: 1px solid var(--border-glow); color: var(--aqua); }
.qf-out.range { background: rgba(111,209,215,0.12); border: 1px solid var(--border-str); color: var(--cyan); }
.qf-down { display: flex; flex-direction: column; align-items: center; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.74rem; padding: 6px 0; }
.qf-down svg { width: 20px; height: 20px; }
.qf-no { margin-left: auto; }
@media (max-width: 560px){ .qf-branch { flex-direction: column; align-items: stretch; text-align: center; } .qf-no { margin-left: 0; } }

/* =============================================================
   TOY: RACE CONDITION LAB  (module 6)
   ============================================================= */
.rc-mode { display: flex; gap: 8px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.rc-lockbadge { margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-muted); }
.rc-lockbadge.on { border-color: var(--border-str); color: var(--cyan); }
.rc-lockbadge.held { border-color: var(--amber); color: var(--amber); }
.rc-balance { text-align: center; padding: 22px 20px 10px; }
.rc-balance .rc-lbl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.rc-balance .rc-num { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--aqua); line-height: 1.1; }
.rc-threads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 20px 18px; }
.rc-th { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--navy-900); padding: 15px 16px; transition: all 0.25s; }
.rc-th.holding { border-color: var(--border-str); box-shadow: 0 0 18px rgba(93,248,216,0.12); }
.rc-th.waiting { opacity: 0.6; border-style: dashed; }
.rc-th .rc-thname { font-family: var(--font-mono); font-weight: 700; font-size: 0.84rem; margin-bottom: 8px; }
.rc-a .rc-thname { color: var(--actor-1); }
.rc-b .rc-thname { color: var(--actor-2); }
.rc-state { font-family: var(--font-mono); font-size: 0.84rem; padding: 6px 10px; border-radius: 7px; background: var(--surface-2); color: var(--text-soft); display: inline-block; min-width: 130px; transition: all 0.2s; }
.rc-state.read { color: var(--cyan); }
.rc-state.compute { color: var(--violet); }
.rc-state.write { color: var(--amber); background: rgba(245,180,84,0.12); }
.rc-state.lock { color: var(--aqua); }
.rc-state.wait { color: var(--text-faint); }
.rc-state.done { color: var(--aqua); }
.rc-local { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-top: 9px; }
.rc-local b { color: #fff; }
.rc-controls { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.rc-status { padding: 16px 20px; font-size: 0.94rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 62px; display: flex; align-items: center; line-height: 1.5; }
.rc-status b { color: #fff; } .rc-status.ok, .rc-status.bad { } .rc-status.ok { color: var(--aqua); } .rc-status.bad { color: var(--coral); }
.rc-status.ok b, .rc-status.bad b { color: inherit; }
@media (max-width: 560px){ .rc-threads { grid-template-columns: 1fr; } }

/* =============================================================
   TOY: DEADLOCK LAB  (module 6)
   ============================================================= */
.dl-mode { display: flex; gap: 8px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); flex-wrap: wrap; }
.dl-mode .dl-mode-lbl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.dl-locks { display: flex; justify-content: center; gap: 18px; padding: 20px; }
.dl-lock { width: 150px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--navy-900); padding: 14px; text-align: center; }
.dl-lockname { font-family: var(--font-mono); font-weight: 700; color: #fff; font-size: 0.95rem; margin-bottom: 8px; }
.dl-lockowner { font-family: var(--font-mono); font-size: 0.78rem; padding: 5px 10px; border-radius: 20px; }
.dl-lockowner.free { background: var(--surface-2); color: var(--text-muted); }
.dl-lockowner.held-A { background: color-mix(in srgb, var(--actor-1) 20%, transparent); color: var(--actor-1); }
.dl-lockowner.held-B { background: color-mix(in srgb, var(--actor-2) 20%, transparent); color: var(--actor-2); }
.dl-threads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 20px 16px; }
.dl-th { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--navy-900); padding: 15px 16px; transition: all 0.25s; }
.dl-th.st-holding { border-color: var(--border-str); }
.dl-th.st-waiting { border-color: var(--amber); border-style: dashed; }
.dl-th.st-done { opacity: 0.65; }
.dl-th-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.dl-th-name { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; }
.dl-a .dl-th-name { color: var(--actor-1); } .dl-b .dl-th-name { color: var(--actor-2); }
.dl-badge { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.06em; }
.dl-badge.st-idle { background: var(--surface-2); color: var(--text-muted); }
.dl-badge.st-holding { background: rgba(93,248,216,0.16); color: var(--aqua); }
.dl-badge.st-waiting { background: rgba(245,180,84,0.16); color: var(--amber); }
.dl-badge.st-done { background: rgba(90,155,196,0.16); color: var(--steel-lt); }
.dl-th-line { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
.dl-th-line b { color: var(--text); }
.dl-graph { margin: 0 20px 16px; padding: 13px 16px; border-radius: var(--r-md); background: var(--navy-900); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.8rem; display: flex; flex-direction: column; gap: 6px; }
.dl-edge { color: var(--amber); } .dl-edge.dim { color: var(--text-faint); }
.dl-cycle { color: var(--coral); font-weight: 700; }
.dl-controls { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.dl-status { padding: 16px 20px; font-size: 0.92rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 66px; display: flex; align-items: center; line-height: 1.5; }
.dl-status b { color: #fff; } .dl-status.bad { color: var(--coral); } .dl-status.ok { color: var(--aqua); }
.dl-status.bad b, .dl-status.ok b { color: inherit; }
@media (max-width: 560px){ .dl-threads, .dl-locks { grid-template-columns: 1fr; } .dl-locks { flex-direction: column; align-items: center; } }

/* =============================================================
   TOY: ROW SERIALIZATION VISUALIZER  (module 1)
   ============================================================= */
.sz-row { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.sz-field { display: flex; flex-direction: column; gap: 5px; }
.sz-field label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.sz-field label .szf-type { color: var(--text-faint); }
.sz-field input { font-family: var(--font-mono); font-size: 0.9rem; padding: 9px 12px; border-radius: 9px; background: var(--navy-900); border: 1px solid var(--border-str); color: #fff; width: 150px; }
.sz-field input:focus { outline: none; border-color: var(--c, var(--aqua)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--aqua)) 18%, transparent); }
.sz-field.f-id { --c: var(--actor-1); } .sz-field.f-name { --c: var(--actor-5); } .sz-field.f-age { --c: var(--actor-4); }
.sz-field.f-id input:focus { border-color: var(--actor-1); }
.sz-arrow-down { text-align: center; padding: 14px; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.78rem; }
.sz-stripwrap { padding: 18px 20px 8px; overflow-x: auto; }
.sz-striplabel { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.sz-striplabel b { color: var(--aqua); }
.sz-strip { display: flex; gap: 8px; align-items: flex-start; min-width: min-content; }
.sz-group { display: flex; gap: 2px; padding: 5px; border-radius: 9px; background: color-mix(in srgb, var(--c) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.sz-byte { width: 42px; height: 50px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: default; transition: transform 0.12s, box-shadow 0.12s; background: var(--navy-900); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.sz-byte .szb-hex { font-family: var(--font-mono); font-weight: 700; font-size: 0.84rem; color: var(--c); }
.sz-byte .szb-off { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint); margin-top: 2px; }
.sz-byte.role-marker { opacity: 0.62; }
.sz-byte.role-len { opacity: 0.82; border-style: dashed; }
.sz-byte.hi { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--c), 0 6px 18px color-mix(in srgb, var(--c) 40%, transparent); }
.sz-hover { padding: 13px 20px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); min-height: 46px; display: flex; align-items: center; }
.sz-hover code { color: var(--cyan); }
.sz-breakdown { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.szk-row { display: grid; grid-template-columns: auto 64px 64px 70px 1fr; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; }
.szk-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.szk-name { color: #fff; font-weight: 700; }
.szk-type { color: var(--text-muted); }
.szk-bytes { color: var(--text-faint); }
.szk-hex { color: var(--c); letter-spacing: 0.5px; overflow-x: auto; }
.sz-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 20px 16px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.sz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sz-legend i { width: 22px; height: 14px; border-radius: 4px; border: 1px solid var(--border-str); display: inline-block; }
.sz-legend i.l-marker { opacity: 0.55; background: var(--surface-3); }
.sz-legend i.l-len { border-style: dashed; background: var(--surface-3); }
.sz-legend i.l-val { background: var(--surface-3); }
@media (max-width: 560px){ .szk-row { grid-template-columns: auto 1fr; } .szk-type, .szk-bytes { display: none; } }

/* =============================================================
   TOY: LRU PAGE CACHE SIMULATOR  (module 2)
   ============================================================= */
.lru-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.lru-controls label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }
.lru-stats { margin-left: auto; display: flex; gap: 16px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.lru-stats b { color: var(--cyan); font-size: 0.95rem; }
.lru-stage { padding: 26px 20px; overflow-x: auto; }
.lru-lane { display: flex; align-items: center; gap: 10px; min-width: min-content; justify-content: center; }
.lru-endtag { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-align: center; line-height: 1.3; flex: none; }
.lru-endtag small { display: block; font-weight: 400; color: var(--text-faint); font-size: 0.62rem; }
.lru-card { width: 76px; height: 76px; border-radius: var(--r-md); border: 1.5px solid var(--border-str); background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; transition: all 0.2s; }
.lru-card .lc-pid { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: #fff; }
.lru-card .lc-rank { font-family: var(--font-mono); font-size: 0.58rem; color: var(--aqua); letter-spacing: 0.08em; min-height: 0.7em; }
.lru-card.empty { border-style: dashed; border-color: var(--border); background: transparent; }
.lru-card.empty .lc-pid { color: var(--text-faint); }
.lru-card.flash { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(93,248,216,0.2), 0 0 22px rgba(93,248,216,0.35); transform: translateY(-4px); }
.lru-arrow { color: var(--text-faint); flex: none; }
.lru-evicted { font-family: var(--font-mono); font-size: 0.74rem; color: var(--coral); display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; margin-left: 6px; }
.lru-evicted .le-x { font-size: 1.4rem; }
.lru-status { padding: 15px 20px; font-size: 0.92rem; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 54px; display: flex; align-items: center; line-height: 1.5; }
.lru-status b { color: #fff; } .lru-status.ok { color: var(--aqua); } .lru-status.ok b { color: inherit; } .lru-status.bad { color: var(--coral); } .lru-status.bad b { color: inherit; } .lru-status.warn { color: var(--amber); }

/* =============================================================
   TOY: GREPPABLE LOG EXPLORER  (module 7)
   ============================================================= */
.lg-filters { padding: 16px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); display: flex; flex-direction: column; gap: 12px; }
.lg-frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-frow .lg-flabel { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; width: 52px; flex: none; }
.lg-events, .lg-levels { display: flex; gap: 7px; flex-wrap: wrap; }
.lg-chip { font-family: var(--font-mono); font-size: 0.74rem; padding: 6px 11px; border-radius: 20px; background: var(--navy-900); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.lg-chip:hover { border-color: var(--border-str); color: var(--text); }
.lg-chip.on { background: var(--aqua); color: var(--navy-900); border-color: var(--aqua); font-weight: 600; }
.lg-chip.lv-warning.on { background: var(--amber); border-color: var(--amber); }
.lg-chip.lv-error.on { background: var(--coral); border-color: var(--coral); }
.lg-text { font-family: var(--font-mono); font-size: 0.8rem; padding: 8px 12px; border-radius: 9px; background: var(--navy-900); border: 1px solid var(--border-str); color: var(--aqua); flex: 1; min-width: 160px; }
.lg-text:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(93,248,216,0.15); }
.lg-querybar { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--navy-900); }
.lg-query { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); flex: 1; overflow-x: auto; white-space: nowrap; }
.lg-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); flex: none; }
.lg-count b { color: var(--aqua); }
.lg-list { padding: 12px 16px; max-height: 320px; overflow-y: auto; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7; }
.lg-line { display: flex; gap: 9px; padding: 2px 0; white-space: nowrap; }
.lg-line .dl-ts { color: var(--text-faint); flex: none; }
.lg-line .dl-lvl { flex: none; font-weight: 700; }
.lg-line.lvl-information .dl-lvl { color: var(--cyan); }
.lg-line.lvl-warning .dl-lvl { color: var(--amber); }
.lg-line.lvl-error .dl-lvl { color: var(--coral); }
.lg-line .dl-json { color: var(--text-soft); }
.lg-empty { padding: 24px; text-align: center; color: var(--text-faint); font-style: italic; }

/* =============================================================
   TOY: MVCC SNAPSHOT VISUALIZER  (module 7 · isolation)
   ============================================================= */
.mvcc-iso { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: rgba(8,38,59,0.4); transition: background 0.2s; }
.mvcc-iso.active { background: rgba(93,248,216,0.06); }
.mvcc-iso .mi-lbl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.mvcc-stage { padding: 22px 20px; }
.mvcc-versions { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-bottom: 22px; }
.mvcc-ver { border-radius: var(--r-md); border: 1.5px solid var(--border-str); background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); padding: 13px 16px; min-width: 130px; transition: all 0.25s; }
.mvcc-ver.dim { opacity: 0.42; }
.mvcc-ver.uncommitted { border-style: dashed; border-color: var(--amber); }
.mvcc-ver.fresh { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(93,248,216,0.16); }
.mvcc-ver.seen { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(93,248,216,0.22), 0 0 22px rgba(93,248,216,0.28); }
.mvcc-ver .mv-val { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; }
.mvcc-ver .mv-meta { display: flex; gap: 12px; margin-top: 6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.mvcc-ver .mv-meta b { color: var(--cyan); }
.mvcc-ver .mv-state { margin-top: 8px; font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 8px; border-radius: 20px; display: inline-block; }
.mvcc-ver .mv-state.s-committed { background: rgba(93,248,216,0.14); color: var(--aqua); }
.mvcc-ver .mv-state.s-uncommitted { background: rgba(245,180,84,0.16); color: var(--amber); }
.mv-link { display: flex; align-items: center; padding: 0 12px; color: var(--text-faint); font-size: 1.2rem; }
.mvcc-txns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mvcc-txn { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--navy-900); padding: 14px 16px; }
.mvcc-txn .mvcc-thead { font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.mvcc-t1 .mvcc-thead { color: var(--actor-1); }
.mvcc-t2 .mvcc-thead { color: var(--actor-4); }
.mvcc-line { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); margin-bottom: 3px; }
.mvcc-line b { color: var(--text); }
.mvcc-line b.st-active { color: var(--amber); } .mvcc-line b.st-committed { color: var(--aqua); }
.mvcc-note { font-size: 0.84rem; color: var(--text-soft); margin-top: 7px; font-style: italic; }
.mvcc-caption { padding: 16px 20px; font-size: 0.96rem; line-height: 1.6; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface); min-height: 88px; display: flex; align-items: center; }
.mvcc-caption b { color: #fff; }
.mvcc-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: rgba(8,38,59,0.4); }
.mvcc-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.mvcc-dots { display: flex; gap: 6px; margin-left: auto; }
.mvcc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-str); transition: all 0.2s; }
.mvcc-dots i.done { background: var(--steel-lt); } .mvcc-dots i.on { background: var(--aqua); box-shadow: 0 0 8px var(--aqua); transform: scale(1.25); }
@media (max-width: 600px){ .mvcc-txns { grid-template-columns: 1fr; } .mvcc-versions { flex-direction: column; gap: 8px; } .mv-link { transform: rotate(90deg); padding: 4px 0; } }

/* =============================================================
   TOY: ISOLATION LEVELS MATRIX  (module 7)
   ============================================================= */
.im-grid { padding: 18px 20px; overflow-x: auto; }
.im-head, .im-rowwrap { display: grid; grid-template-columns: 168px repeat(4, 1fr); gap: 6px; min-width: 640px; }
.im-head { margin-bottom: 6px; }
.im-corner { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); display: flex; align-items: flex-end; padding: 4px; }
.im-col { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; padding: 9px 8px; border-radius: 8px; background: var(--navy-900); border: 1px solid var(--border); color: var(--text-soft); cursor: pointer; transition: all 0.15s; text-align: center; line-height: 1.3; }
.im-col:hover { border-color: var(--border-str); color: #fff; }
.im-col.active { background: var(--surface-3); border-color: var(--aqua); color: #fff; }
.im-rowwrap { margin-bottom: 6px; }
.im-row { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; padding: 12px 12px; border-radius: 8px; background: var(--navy-900); border: 1px solid var(--border); color: var(--text-soft); cursor: pointer; transition: all 0.15s; text-align: left; }
.im-row:hover { border-color: var(--border-str); color: #fff; }
.im-row.active { background: var(--surface-3); border-color: var(--aqua); color: #fff; }
.im-cell { display: grid; place-items: center; border-radius: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 1rem; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; }
.im-cell.ok { background: rgba(93,248,216,0.12); color: var(--aqua); }
.im-cell.pg { background: rgba(111,209,215,0.10); color: var(--cyan); }
.im-cell.no { background: rgba(245,138,124,0.12); color: var(--coral); }
.im-cell:hover { filter: brightness(1.25); }
.im-cell.hl { box-shadow: 0 0 0 2px var(--aqua); }
.im-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 20px 14px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.im-legend span { display: inline-flex; align-items: center; gap: 6px; }
.im-legend b { font-size: 0.95rem; }
.im-legend b.ok { color: var(--aqua); } .im-legend b.no { color: var(--coral); } .im-legend b.pg { color: var(--cyan); }
.im-detail { margin: 0 20px 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--aqua); }
.im-dtitle { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.08rem; margin-bottom: 6px; }
.im-detail p { margin: 0 0 12px; font-size: 0.92rem; color: var(--text-soft); }
.im-tags { display: flex; flex-direction: column; gap: 7px; }
.im-tag { font-family: var(--font-mono); font-size: 0.78rem; padding: 6px 11px; border-radius: 8px; display: inline-block; }
.im-tag.ok { background: rgba(93,248,216,0.10); color: var(--aqua); }
.im-tag.no { background: rgba(245,138,124,0.10); color: var(--coral); }


/* =============================================================
   MODULE PAGE CHROME
   ============================================================= */
.mod-hero { padding: clamp(44px, 7vw, 86px) 0 28px; position: relative; }
.mod-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.mod-badge { font-family: var(--font-mono); font-size: 0.78rem; padding: 5px 12px; border-radius: 20px; background: rgba(93,248,216,0.10); border: 1px solid var(--border-str); color: var(--aqua); font-weight: 600; }
.mod-time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.mod-lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--text-soft); line-height: 1.6; max-width: 740px; }
.metaphor {
  margin: 30px 0; padding: 22px 24px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(59,117,151,0.16), rgba(93,248,216,0.05));
  border: 1px solid var(--border); position: relative;
}
.metaphor .mx-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); font-weight: 600; display: block; margin-bottom: 8px; }
.metaphor p { margin: 0; font-size: 1.05rem; color: var(--text); line-height: 1.6; }

.keyinsight { margin: 30px 0; padding: 24px 26px; border-radius: var(--r-lg); background: var(--navy-900); border: 1px solid var(--border-str); box-shadow: inset 0 0 60px rgba(93,248,216,0.04); }
.keyinsight .ki-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua); font-weight: 700; display: flex; align-items:center; gap: 8px; margin-bottom: 10px; }
.keyinsight p { margin: 0; font-size: 1.12rem; color: #fff; line-height: 1.55; font-family: var(--font-display); }

/* prev/next footer nav */
.modnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 20px; }
.modnav a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.18s;
}
.modnav a:hover { border-color: var(--aqua); background: var(--surface-2); transform: translateY(-2px); }
.modnav a .mn-dir { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.modnav a .mn-title { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.05rem; }
.modnav a.next { text-align: right; align-items: flex-end; }
.modnav a.disabled { opacity: 0.35; pointer-events: none; }

/* section heading within module */
.shead { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.shead .sh-no { font-family: var(--font-mono); font-size: 0.8rem; color: var(--aqua); border: 1px solid var(--border-str); border-radius: 7px; padding: 3px 9px; }

/* "why care" box */
.whycare { margin: 26px 0; padding: 20px 22px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--border-str); }
.whycare h4 { font-size: 1rem; color: var(--cyan); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.whycare p { margin: 0; font-size: 0.96rem; }

/* two-col comparison (bad vs good) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.compare .cmp { border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; }
.compare .cmp-head { padding: 11px 16px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; display:flex; align-items:center; gap: 8px; }
.compare .cmp.bad .cmp-head { background: rgba(245,138,124,0.12); color: var(--coral); border-bottom: 1px solid rgba(245,138,124,0.25); }
.compare .cmp.good .cmp-head { background: rgba(93,248,216,0.10); color: var(--aqua); border-bottom: 1px solid var(--border-str); }
.compare .cmp pre { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.65; overflow-x: auto; color: var(--text-soft); background: var(--navy-900); }
.compare .cmp .cmp-note { padding: 12px 16px; font-size: 0.86rem; color: var(--text-muted); background: var(--surface); }
@media (max-width: 680px){ .compare { grid-template-columns: 1fr; } }

/* badge list */
.badgelist { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.evbadge { font-family: var(--font-mono); font-size: 0.8rem; padding: 8px 13px; border-radius: 9px; background: var(--navy-850); border: 1px solid var(--border); color: var(--cyan); display: inline-flex; align-items: center; gap: 8px; }
.evbadge b { color: #fff; font-weight: 600; }
.evbadge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }

/* footer */
.site-foot { border-top: 1px solid var(--border); padding: 40px 0; margin-top: 40px; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.site-foot p { margin: 0; font-size: 0.85rem; color: var(--text-faint); font-family: var(--font-mono); }

@media (max-width: 860px) {
  .topnav { display: none; }
  .topnav.open { display: flex; position: absolute; top: 100%; right: 16px; flex-direction: column; background: var(--navy-850); border: 1px solid var(--border-str); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-md); }
  .menu-toggle { display: block; }
  .modnav { grid-template-columns: 1fr; }
}