/* ============================================================
   app.css — Circuit Designer Pro — Styles for all new UI
   Supplements the existing style.css with styles for:
   - Debug panel, Watch list, Error list
   - Command palette (Ctrl+K)
   - Mini-map
   - Breakpoint panel
   - Wire properties panel
   - Align/distribute toolbar
   - Project bar
   - Simulation status
   - Truth table generator
   ============================================================ */

/* ── Debug Panel ─────────────────────────────────────────── */
#debug-panel {
  position: fixed;
  right: 0;
  top: 56px;
  bottom: 0;
  width: 280px;
  background: #0a0e14;
  border-left: 1px solid #1e3a50;
  z-index: 150;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

#debug-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #1e3a50;
  color: #00d4ff;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
}

.debug-section-title {
  color: #4a6080;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 8px 12px 4px;
  border-bottom: 1px solid rgba(30,58,80,0.5);
  text-transform: uppercase;
}

#debug-section-watch,
#debug-section-errors,
#debug-section-trace,
#debug-section-truthtable {
  border-bottom: 1px solid #1a2a3a;
  padding-bottom: 8px;
}

#watch-actions, #trace-actions {
  display: flex;
  gap: 4px;
  padding: 4px 12px;
  flex-wrap: wrap;
}

/* ── Watch List Table ────────────────────────────────────── */
.watch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.watch-table th {
  color: #4a6080;
  font-weight: bold;
  padding: 3px 6px;
  text-align: left;
  border-bottom: 1px solid #1a2a3a;
}

.watch-table td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(26,42,58,0.3);
}

.watch-row.watch-changed {
  background: rgba(255,204,0,0.08);
}

.watch-label { color: #c8d8f0; }
.watch-val { font-weight: bold; }
.watch-prev { color: #4a6080; }

.watch-remove {
  background: none;
  border: none;
  color: #ff4444;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

/* ── Error List ──────────────────────────────────────────── */
.error-item {
  padding: 3px 12px;
  line-height: 1.4;
}

/* ── Truth Table Generator ───────────────────────────────── */
#truthtable-container {
  padding: 4px 12px;
  max-height: 300px;
  overflow-y: auto;
}

.truth-table-gen {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.truth-table-gen th {
  padding: 3px 8px;
  font-weight: bold;
  border-bottom: 1px solid #2a4060;
}

.truth-table-gen th.tt-input { color: #39ff14; }
.truth-table-gen th.tt-output { color: #00d4ff; }

.truth-table-gen td {
  padding: 2px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(26,42,58,0.3);
}

.truth-table-gen td.tt-high { color: #39ff14; font-weight: bold; }
.truth-table-gen td.tt-low { color: #ff4444; }
.truth-table-gen td.tt-null { color: #4a6080; }

/* ── Command Palette ─────────────────────────────────────── */
#command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

#command-palette-box {
  background: #0d1320;
  border: 1px solid #2a4060;
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  overflow: hidden;
}

#command-palette-input {
  width: 100%;
  padding: 12px 16px;
  background: #0a0e14;
  border: none;
  border-bottom: 1px solid #1e3a50;
  color: #c8d8f0;
  font: 14px 'JetBrains Mono', monospace;
  outline: none;
  box-sizing: border-box;
}

#command-palette-input::placeholder {
  color: #4a6080;
}

#command-palette-list {
  max-height: 350px;
  overflow-y: auto;
}

.cp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s;
}

.cp-item:hover, .cp-item.cp-selected {
  background: rgba(0, 212, 255, 0.08);
}

.cp-category {
  color: #4a6080;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  min-width: 70px;
  letter-spacing: 0.5px;
}

.cp-label {
  color: #c8d8f0;
  font-size: 12px;
  flex: 1;
}

.cp-shortcut {
  color: #4a6080;
  font-size: 9px;
  background: rgba(42,64,96,0.3);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #2a4060;
}

.cp-empty {
  padding: 16px;
  text-align: center;
  color: #4a6080;
  font-size: 11px;
}

/* ── Mini-map ────────────────────────────────────────────── */
#minimap-container {
  position: fixed;
  bottom: 50px;
  right: 8px;
  z-index: 100;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #1e3a50;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

#minimap-canvas {
  display: block;
}

/* ── Breakpoint Panel ────────────────────────────────────── */
#breakpoint-panel {
  border-top: 1px solid #1a2a3a;
  padding: 8px 0;
}

#breakpoint-title {
  color: #ff4444;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 0 12px 4px;
}

#breakpoint-list {
  padding: 0 12px;
}

#breakpoint-add-row {
  display: flex;
  gap: 4px;
  padding: 4px 12px;
}

.bp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 9px;
}

.bp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bp-label {
  color: #c8d8f0;
  flex: 1;
}

.bp-cond {
  color: #4a6080;
  font-size: 8px;
}

.bp-toggle, .bp-remove {
  background: none;
  border: 1px solid #2a4060;
  color: #4a6080;
  font-size: 8px;
  padding: 1px 4px;
  cursor: pointer;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
}

.bp-toggle:hover { color: #c8d8f0; }
.bp-remove:hover { color: #ff4444; border-color: #ff4444; }

/* ── Wire Properties Panel ───────────────────────────────── */
#wire-props {
  border-top: 1px solid #1a2a3a;
  padding: 8px 0;
}

#wire-props-title {
  color: #ffcc00;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 0 12px 4px;
}

#wire-props select {
  font-family: 'JetBrains Mono', monospace;
}

/* ── Align/Distribute Toolbar ────────────────────────────── */
.align-btn {
  background: #0a1520;
  border: 1px solid #2a4060;
  color: #c8d8f0;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  min-width: 28px;
  text-align: center;
}

.align-btn:hover {
  background: #1a2a3a;
  border-color: #00d4ff;
  color: #00d4ff;
}

/* ── Simulation Status Bar ───────────────────────────────── */
#sim-status {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(13, 19, 32, 0.95);
  border: 1px solid #2a4060;
  border-radius: 6px;
  padding: 6px 16px;
  font: bold 10px 'JetBrains Mono', monospace;
}

#sim-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* ── Project Bar ─────────────────────────────────────────── */
#project-bar .design-action {
  padding: 3px 8px;
}

/* ── Undo/Redo above palette ──────────────────────────────── */
#hud-right-top {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
}

.hud-action-btn {
  background: rgba(10, 20, 35, 0.7);
  border: 1px solid #2a4060;
  color: #4a6080;
  font-size: 16px;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1;
}

.hud-action-btn:hover {
  color: #c8d8f0;
  border-color: #00d4ff;
}

/* ── Palette Tabs (top-right) ─────────────────────────────── */
#palette-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 4px;
}

.palette-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #4a6080;
  font: bold 9px 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.palette-tab:hover {
  color: #c8d8f0;
}

.palette-tab.active {
  color: #00d4ff;
  border-bottom-color: #00d4ff;
}

#palette-tab-content {
  min-height: 32px;
  /* Cap the chip area so a chip-heavy tab (LOGIC: 15 chips) wraps onto
     a single extra row instead of stretching the whole header. */
  max-width: 420px;
  margin-left: auto;
}
/* LOGIC has the most chips (15) — give it the full cap width so it
   fits in exactly two rows. Slimmer tabs naturally use less. */
#palette-tab-content .palette-panel[data-panel="logic"] {
  max-width: 420px;
}

.palette-panel {
  display: none;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.palette-panel.active {
  display: flex;
}

/* ── Component Palette chips ─────────────────────────────── */

.palette-chip {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  font: bold 10px 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  letter-spacing: 0.4px;
}

.palette-chip:hover {
  box-shadow: 0 0 10px rgba(0,212,255,0.3);
}

.palette-chip.active {
  box-shadow: 0 0 14px rgba(0,212,255,0.5);
}

.palette-io {
  background: rgba(10, 42, 74, 0.6);
  border: 1.5px solid #1e6fa0;
  color: #39ff14;
}
.palette-io:hover, .palette-io.active {
  border-color: #39ff14;
  background: rgba(57, 255, 20, 0.08);
}

.palette-gate {
  background: rgba(14, 31, 51, 0.6);
  border: 1.5px solid #2a5a90;
  color: #a0c8ff;
}
.palette-gate:hover, .palette-gate.active {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.08);
}

.palette-ff {
  background: rgba(18, 13, 34, 0.6);
  border: 1.5px solid #5a2a9a;
  color: #c080ff;
}
.palette-ff:hover, .palette-ff.active {
  border-color: #a060ff;
  background: rgba(160, 96, 255, 0.08);
}

.palette-block {
  background: rgba(10, 26, 26, 0.6);
  border: 1.5px solid #1a8a6a;
  color: #20d4a0;
}
.palette-block:hover, .palette-block.active {
  border-color: #20d4a0;
  background: rgba(32, 212, 160, 0.08);
}

/* Memory tab chips — purple to match the rendered component colour. */
.palette-panel[data-panel="memory"] .palette-chip {
  border-color: #5a3d8a;
  color: #c0a0f0;
  background: rgba(40, 20, 70, 0.6);
}
.palette-panel[data-panel="memory"] .palette-chip:hover,
.palette-panel[data-panel="memory"] .palette-chip.active {
  border-color: #c0a0f0;
  background: rgba(192, 160, 240, 0.12);
}

.palette-tool {
  background: rgba(0, 40, 60, 0.6);
  border: 1.5px solid #0080c0;
  color: #00d4ff;
}
.palette-tool:hover, .palette-tool.active {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.12);
}

.palette-sep {
  width: 1px;
  height: 20px;
  background: #1e3a50;
  margin: 0 2px;
}

.palette-chip[draggable="true"] {
  cursor: grab;
}
.palette-chip[draggable="true"]:active {
  cursor: grabbing;
}

/* ── Quick Toolbar (below header, left of center) ────────── */
/* Quick placement chips at the top of the design sidebar.
   Two-by-two grid so IN/OUT and WIRE/CLK pair visually. */
#quick-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid #1a2a3a;
  margin-bottom: 6px;
}
#quick-toolbar .palette-chip {
  text-align: center;
  padding: 6px 0;
  font-size: 11px;
}

/* ── Design Tool Groups ──────────────────────────────────── */
.design-tool-separator {
  height: 1px;
  background: #1e3a50;
  margin: 6px 0 2px;
}

.design-tool-group-label {
  color: #4a6080;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 8px;
  text-transform: uppercase;
}

.design-tool-gate {
  color: #a0c8ff !important;
  border-color: #2a5a90 !important;
}

.design-tool-gate.active,
.design-tool-gate:hover {
  background: rgba(0, 100, 200, 0.15) !important;
  border-color: #00d4ff !important;
}

.design-tool-ff {
  color: #c080ff !important;
  border-color: #5a2a9a !important;
}

.design-tool-ff.active,
.design-tool-ff:hover {
  background: rgba(160, 96, 255, 0.15) !important;
  border-color: #a060ff !important;
}

/* ── Memory Inspector Panel ──────────────────────────────── */
/* Panel uses `top` positioning + flex column so the body scrolls internally
   and the resize grip stays anchored to the panel's visible bottom-right
   corner (not the scroll content bottom). */
#mem-inspector {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 340px;
  height: 45vh;
  min-width: 220px;
  min-height: 150px;
  max-width: 95vw;
  max-height: 95vh;
  background: #0a0e14;
  border: 1px solid #5a3d8a;
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 160;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

/* Minimal resize grip in the panel's top-right corner.
   Three soft diagonal dashes; subtle by default, glows on hover.
   Dragging: up → panel grows upward, right → panel widens. */
#mem-resize-grip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  cursor: nesw-resize;
  border-radius: 4px;
  background: transparent;
  z-index: 20;
  transition: background 0.15s ease-out;
}
#mem-resize-grip::before {
  content: '';
  position: absolute;
  inset: 4px;
  background-image:
    linear-gradient(45deg,
      transparent 0 28%,
      rgba(192,160,240,0.7) 28% 36%,
      transparent 36% 52%,
      rgba(192,160,240,0.7) 52% 60%,
      transparent 60% 76%,
      rgba(192,160,240,0.7) 76% 84%,
      transparent 84%);
  transition: background-image 0.15s ease-out;
  pointer-events: none;
}
#mem-resize-grip:hover {
  background: rgba(192,160,240,0.12);
}
#mem-resize-grip:hover::before {
  background-image:
    linear-gradient(45deg,
      transparent 0 28%,
      #e0c8ff 28% 36%,
      transparent 36% 52%,
      #e0c8ff 52% 60%,
      transparent 60% 76%,
      #e0c8ff 76% 84%,
      transparent 84%);
}

#mem-inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #3a2060;
  color: #c0a0f0;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  background: #0a0e14;
  flex: 0 0 auto;
}

#mem-inspector-header > div {
  display: flex;
  gap: 6px;
}

/* Readable header buttons — scales with panel tier. */
#mem-inspector-header button {
  font-size: 0.95em !important;
  padding: 0.35em 0.8em;
  letter-spacing: 0.5px;
  font-weight: bold;
  border-width: 1px;
}

#mem-inspector-body {
  padding: 4px 0;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* ── Pipeline Panel ──────────────────────────────────────── */
#pipeline-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 440px;
  height: 45vh;
  min-width: 320px;
  min-height: 150px;
  max-width: 95vw;
  max-height: 95vh;
  background: #0a0e14;
  border: 1px solid #2a6a8a;
  border-right: none;
  border-top-left-radius: 8px;
  z-index: 160;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;                /* base — modulated by _applyPipelineFontTier */
  color: #cfe6f0;
  display: flex;
  flex-direction: column;
}
#pipeline-panel.hidden { display: none; }

/* Fullscreen mode — overrides size/position so the panel fills the viewport.
   The resize grip is hidden; CLOSE / FULLSCREEN buttons remain accessible. */
#pipeline-panel.pipeline-fullscreen {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border: none;
  z-index: 9999;
}
#pipeline-panel.pipeline-fullscreen #pipeline-resize-grip { display: none; }

/* In fullscreen, lay sections out as a responsive grid so 2–3 fit side-by-side
   on wide screens. The PIPELINE DIAGRAM section keeps its own full-width row
   because the Gantt grid is much wider than other sections. */
#pipeline-panel.pipeline-fullscreen {
  font-size: 20px;       /* base bump — children using em/rem inherit */
}
/* When ANALYSIS is fullscreen, drop the global body{zoom:0.8} so the
   panel renders at the user's native browser scale (parallel to how
   #dft-panel handles its own zoom counter). The :has() selector lets
   the body itself opt out cleanly without JS book-keeping. */
body:has(#pipeline-panel.pipeline-fullscreen) {
  zoom: 1;
}
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(620px, 1fr));
  gap: 22px;
  align-items: start;
  padding: 24px 32px;
  font-size: 18px;
}
/* In fullscreen the summary is moved INTO the body as a grid item, sitting
   on the left half of the top row alongside the stages-area on the right. */
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body > #pipeline-panel-summary {
  grid-column: 1 / span 1;
  font-size: 19px;
  padding: 16px 22px;
  border-bottom: none;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-self: start;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid rgba(143, 212, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body > #pipeline-panel-summary .v {
  text-align: right;
}
/* Stages-area takes the rest of the top row — rows stacked vertically, each
   showing its delay bar so relative stage durations are visible at a glance. */
#pipeline-panel.pipeline-fullscreen #pipe-stages-area {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid rgba(143, 212, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Outside fullscreen the wrapper is a passthrough — children render full-width. */
.pipe-stages-area { display: block; }

/* Compact stage list in fullscreen — render rows as inline "chips" that wrap,
   with the timing shown right next to the stage label. Each stage takes the
   minimum it needs instead of an entire panel-wide row. */
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body { padding-bottom: 4px; }
/* Each stage is a full-width row inside the stages-area, with the relative-
   delay bar restored so the longest stage visually pops as the bottleneck. */
#pipeline-panel.pipeline-fullscreen .pipe-stage-row {
  display: flex;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(143, 212, 255, 0.10);
  border-radius: 5px;
  gap: 0.8em;
  background: rgba(143, 212, 255, 0.02);
  align-items: center;
}
#pipeline-panel.pipeline-fullscreen .pipe-stage-row.bottleneck {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.55);
}
#pipeline-panel.pipeline-fullscreen .pipe-stage-bar { display: block; height: 0.9em; }
/* Section "card": subtle dark surface, faint border, soft shadow for depth.
   Far more readable than the previous bright red boxes. The card uses the
   panel's existing cool palette so each section's own accent (its colored
   header text) reads cleanly against the neutral surface. */
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body > .pipe-section {
  min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid rgba(143, 212, 255, 0.14);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body > .pipe-section[data-section="diag"] {
  grid-column: 1 / -1;   /* PIPELINE DIAGRAM gets its own full-width row */
}
#pipeline-panel.pipeline-fullscreen .pipe-section-header {
  font-size: 1.1em;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
/* Drag-to-reorder visual states (fullscreen only). The drag is handle-only,
   so the section body keeps its normal cursor — only the handle shows grab. */
#pipeline-panel.pipeline-fullscreen #pipeline-panel-body > .pipe-section {
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* Drag handle — hidden by default, visible only in fullscreen. */
.pipe-section-drag-handle { display: none; }
#pipeline-panel.pipeline-fullscreen .pipe-section-drag-handle {
  display: inline-block;
  cursor: grab;
  user-select: none;
  margin-right: 10px;
  padding: 0 6px;
  color: rgba(143, 212, 255, 0.55);
  font-weight: 900;
  letter-spacing: -2px;
  font-size: 1.05em;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
#pipeline-panel.pipeline-fullscreen .pipe-section-drag-handle:hover {
  background: rgba(143, 212, 255, 0.12);
  color: #cfe6f0;
}
#pipeline-panel.pipeline-fullscreen .pipe-section-drag-handle:active { cursor: grabbing; }
#pipeline-panel.pipeline-fullscreen .pipe-section-dragging {
  opacity: 0.45;
  transform: scale(0.99);
}
#pipeline-panel.pipeline-fullscreen .pipe-section-drop-target {
  box-shadow: 0 0 0 2px rgba(143, 212, 255, 0.55), 0 4px 18px rgba(0, 0, 0, 0.45);
}
/* Don't let drag start from inputs / buttons inside a section. */
#pipeline-panel.pipeline-fullscreen .pipe-section input,
#pipeline-panel.pipeline-fullscreen .pipe-section select,
#pipeline-panel.pipeline-fullscreen .pipe-section button { cursor: auto; }

#pipeline-resize-grip {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  border-radius: 4px;
  background: transparent;
  z-index: 20;
  transition: background 0.15s ease-out;
}
#pipeline-resize-grip::before {
  content: '';
  position: absolute;
  inset: 4px;
  background-image:
    linear-gradient(135deg,
      transparent 0 28%,
      rgba(143,212,255,0.7) 28% 36%,
      transparent 36% 52%,
      rgba(143,212,255,0.7) 52% 60%,
      transparent 60% 76%,
      rgba(143,212,255,0.7) 76% 84%,
      transparent 84%);
}
#pipeline-resize-grip:hover { background: rgba(143,212,255,0.12); }
#pipeline-resize-grip:hover::before {
  background-image:
    linear-gradient(135deg,
      transparent 0 28%,
      #cfe6f0 28% 36%,
      transparent 36% 52%,
      #cfe6f0 52% 60%,
      transparent 60% 76%,
      #cfe6f0 76% 84%,
      transparent 84%);
}

#pipeline-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em 1.2em 0.8em 2.6em; /* left pad clears the grip */
  border-bottom: 1px solid #2a4060;
  color: #8fd4ff;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 1px;
  flex: 0 0 auto;
}
#pipeline-panel-header > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Override the tiny inline font-size on header buttons — scales with panel tier. */
#pipeline-panel-header button {
  font-size: 0.95em !important;
  padding: 0.35em 0.8em;
  letter-spacing: 0.5px;
  font-weight: bold;
  border-width: 1px;
}
#pipeline-panel-header #btn-stageview-toggle {
  background: #0d2030;
  border-color: #2a6a8a;
  color: #8fd4ff;
}
#pipeline-panel-header #btn-stageview-toggle.active {
  background: #163a5a;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(143,212,255,0.6);
}

#pipeline-panel-summary {
  padding: 0.8em 1.2em;
  border-bottom: 1px solid #1a3040;
  font-size: 1em;
  color: #8fd4ff;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.3em 1.2em;
}
#pipeline-panel-summary .k { color: #567; }
#pipeline-panel-summary .v { color: #cfe6f0; text-align: right; font-weight: bold; }
#pipeline-panel-summary .warn { color: #ffa028; }

#pipeline-panel-body {
  padding: 0.4em 0;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.pipe-stage-row {
  display: flex;
  align-items: center;
  padding: 0.6em 1.2em;
  border-bottom: 1px solid #10202c;
  font-size: 1em;
  gap: 0.8em;
  cursor: default;
}
.pipe-stage-row.bottleneck {
  background: #2a1010;
  border-left: 3px solid #ff5050;
}
.pipe-stage-idx {
  font-weight: bold;
  color: #8fd4ff;
  min-width: 3.6em;
}
.pipe-stage-row.bottleneck .pipe-stage-idx { color: #ff8080; }
.pipe-stage-depth { min-width: 5.6em; color: #cfe6f0; }
.pipe-stage-count { min-width: 6em; color: #678; }
.pipe-stage-badges { display: inline-flex; gap: 3px; min-width: 2.6em; }
.pipe-badge {
  display: inline-block;
  width: 1.2em; height: 1.2em;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1.2em;
}
.pipe-badge-stall { background: #2a3a10; color: #c0ff50; border: 1px solid #5a7a20; }
.pipe-badge-flush { background: #2a1020; color: #ff80c0; border: 1px solid #7a2060; }
.pipe-badge-elastic { background: #2a2010; color: #ffc070; border: 1px solid #7a6020; }
.pipe-stage-bar {
  flex: 1 1 auto;
  height: 0.8em;
  background: #0d1820;
  border-radius: 2px;
  overflow: hidden;
}
.pipe-stage-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #2a6a8a, #8fd4ff);
}
.pipe-stage-row.bottleneck .pipe-stage-bar > div {
  background: linear-gradient(90deg, #8a2a2a, #ff8080);
}
#btn-stageview-toggle.active, #btn-pipeline-toggle.active {
  background: #163a5a !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px rgba(143,212,255,0.6);
}
.pipe-stage-row { cursor: pointer; }
.pipe-stage-row:hover { background: #0e1820; }
.pipe-stage-row.active-hl { outline: 1px solid #8fd4ff; background: #0a1a28; }
.pipe-empty { padding: 2em 1.2em; color: #567; text-align: center; font-size: 1em; }

.pipe-violations-header {
  margin-top: 0.6em;
  padding: 0.5em 1.2em;
  font-weight: bold;
  color: #ff8080;
  border-top: 1px solid #2a0a0a;
  border-bottom: 1px solid #2a0a0a;
  background: #1a0808;
  font-size: 0.95em;
  letter-spacing: 1px;
}
.pipe-violation-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6em;
  padding: 0.5em 1.2em;
  border-bottom: 1px solid #180505;
  cursor: pointer;
  font-size: 0.9em;
  color: #ffb0b0;
  transition: background 0.15s;
}
.pipe-violation-row:hover { background: #2a1010; }
.pvi-stages { font-weight: bold; color: #ff8080; }
.pvi-names { color: #cfe6f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvi-missing { color: #ff5050; font-size: 0.85em; }

.pipe-hazards-header {
  margin-top: 0.6em;
  padding: 0.5em 1.2em;
  font-weight: bold;
  color: #ffc080;
  border-top: 1px solid #2a1a08;
  border-bottom: 1px solid #2a1a08;
  background: #1a1008;
  font-size: 0.95em;
  letter-spacing: 1px;
}
.pipe-hazard-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 1.2em 0.3em 1.2em;
  cursor: pointer;
  font-size: 1em;
  color: #ffd8a0;
  transition: background 0.15s;
}
.pipe-hazard-row:hover { background: #2a1a08; }
.pipe-hazard-fix {
  padding: 0 1.2em 0.7em 2.6em;
  border-bottom: 1px solid #1a1208;
  color: #c4b48c;
  font-size: 0.95em;
  line-height: 1.35;
  font-style: italic;
}
.pipe-hz-type {
  display: inline-block;
  min-width: 3em;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.95em;
  letter-spacing: 0.6px;
  text-align: center;
  background: #2a1a08;
  color: #ffd8a0;
  border: 1px solid #4a3010;
}
.pipe-hz-type.hz-raw      { background: #2a1a08; color: #ff9028; border-color: #5a3010; }
.pipe-hz-type.hz-war      { background: #2a2008; color: #ffc840; border-color: #5a4010; }
.pipe-hz-type.hz-waw      { background: #2a0a20; color: #ff5fb0; border-color: #5a1060; }
.pipe-hz-type.hz-loop     { background: #2a0808; color: #ff5050; border-color: #5a1010; }
.pipe-hz-type.hz-loaduse  { background: #201a2a; color: #b090ff; border-color: #40306a; margin-left: 4px; }

.pipe-prog-header {
  margin-top: 0.6em;
  padding: 0.5em 1.2em;
  font-weight: bold;
  color: #b090ff;
  border-top: 1px solid #1a1230;
  border-bottom: 1px solid #1a1230;
  background: #10081a;
  font-size: 0.95em;
  letter-spacing: 1px;
}
.pipe-prog-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.2em;
  border-bottom: 1px solid #100818;
  font-size: 0.95em;
  color: #d0c0ff;
}
.pipe-prog-names   { color: #cfe6f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 0.92em; }
.pipe-prog-pc      { color: #7088a0; font-size: 0.85em; margin-right: 3px; }
.pipe-prog-arrow   { color: #b090ff; margin: 0 4px; font-weight: bold; }
.pipe-prog-reg     { color: #ffa028; font-weight: bold; font-size: 0.9em; padding: 1px 6px; border-radius: 3px; background: #2a1a08; border: 1px solid #4a3010; }
.pipe-prog-bubbles { color: #ff8080; font-size: 0.88em; font-style: italic; min-width: 4.5em; text-align: right; }
.pipe-prog-bubbles.ok   { color: #6a9a70; font-style: normal; }
.pipe-prog-bubbles.info { color: #7088a0; font-style: normal; font-size: 0.82em; }
.pipe-prog-clean   { padding: 0.8em 1.2em; color: #6a9a70; font-size: 0.92em; font-style: italic; }

/* Phase 14c: resolved-by-forwarding styling. */
.pipe-prog-row.resolved { opacity: 0.62; }
.pipe-prog-row.resolved .pipe-prog-reg { background: #081a10; color: #6a9a70; border-color: #103020; }
.pipe-prog-bubbles.pipe-prog-resolved { color: #6adf9a; font-weight: 500; font-style: normal; background: #081a12; border-radius: 3px; padding: 1px 6px; }
.pipe-prog-resolved-note { color: #6adf9a; font-size: 0.78em; font-weight: normal; letter-spacing: 0; margin-left: 6px; }
.pipe-prog-hidden { color: #b090ff; font-size: 0.78em; font-weight: normal; letter-spacing: 0; margin-left: 6px; font-style: italic; }

/* Phase 14c: Forwarding Paths section, styled like the hazards/program-hazards sections. */
.pipe-forwards-header {
  margin-top: 0.6em;
  padding: 0.5em 1.2em;
  font-weight: bold;
  color: #6adf9a;
  border-top: 1px solid #0a2018;
  border-bottom: 1px solid #0a2018;
  background: #06120e;
  font-size: 0.95em;
  letter-spacing: 1px;
}
.pipe-forward-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.2em;
  border-bottom: 1px solid #081a12;
  font-size: 0.92em;
  color: #c0e8cc;
}
.pipe-forward-path { color: #6adf9a; font-weight: bold; font-size: 0.88em; padding: 1px 8px; border-radius: 3px; background: #081a12; border: 1px solid #103020; letter-spacing: 0.5px; }
.pipe-forward-reg  { color: #ffa028; font-weight: bold; font-size: 0.88em; padding: 1px 6px; border-radius: 3px; background: #2a1a08; border: 1px solid #4a3010; }
.pipe-forward-names { color: #cfe6f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 0.90em; }

/* Phase 14 — loop analysis, steady-state hazards, multi-cycle latency, coverage summary. */
.pipe-loops-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #ffd060; border-top: 1px solid #2a2208; border-bottom: 1px solid #2a2208; background: #14100a; font-size: 0.95em; letter-spacing: 1px; }
.pipe-loop-row { display: grid; grid-template-columns: auto auto 1fr; gap: 0.6em; align-items: center; padding: 0.5em 1.2em; border-bottom: 1px solid #201a08; font-size: 0.92em; color: #e8dcb0; }
.pipe-loop-range { color: #ffd060; font-family: 'JetBrains Mono', monospace; font-weight: bold; }
.pipe-loop-body  { color: #c0b080; font-size: 0.88em; }
.pipe-loop-iv    { color: #ffa028; font-family: 'JetBrains Mono', monospace; font-size: 0.90em; }
.pipe-loop-noiv  { color: #806030; font-style: italic; }
.pipe-hz-type.hz-steady     { background: #2a2008; color: #ffd060; border-color: #5a4010; margin-left: 4px; }
.pipe-hz-type.hz-multicycle { background: #1a1a2a; color: #90c0ff; border-color: #303060; margin-left: 4px; }
.pipe-cov-row { padding: 0.45em 1.2em; font-size: 0.86em; color: #9ab0c0; background: #06120e; border-bottom: 1px solid #0a2018; letter-spacing: 0.5px; }
.pipe-cov-ok   { color: #6adf9a; font-weight: bold; margin-right: 4px; }
.pipe-cov-miss { color: #805060; margin-right: 4px; }

/* Phase 13 stretch — CDC crossings. */
.pipe-cdc-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #ff8050; border-top: 1px solid #2a1408; border-bottom: 1px solid #2a1408; background: #140a06; font-size: 0.95em; letter-spacing: 1px; }
.pipe-cdc-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6em; align-items: center; padding: 0.5em 1.2em; border-bottom: 1px solid #201008; font-size: 0.92em; color: #e8cfc0; }
.pipe-cdc-clocks { color: #ff8050; font-weight: bold; font-family: 'JetBrains Mono', monospace; font-size: 0.88em; padding: 1px 6px; background: #201008; border-radius: 3px; border: 1px solid #402010; }
.pipe-cdc-names  { color: #cfe6f0; font-family: 'JetBrains Mono', monospace; font-size: 0.90em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-cdc-ok   { color: #6adf9a; font-weight: bold; }
.pipe-cdc-miss { color: #ff5050; font-weight: bold; }

/* Phase 13 stretch — LIP (latency-insensitive protocol) checker. */
.pipe-lip-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #b090ff; border-top: 1px solid #1a1028; border-bottom: 1px solid #1a1028; background: #0a0614; font-size: 0.95em; letter-spacing: 1px; }
.pipe-lip-row { display: grid; grid-template-columns: auto auto 1fr; gap: 0.6em; align-items: center; padding: 0.5em 1.2em; border-bottom: 1px solid #140a20; font-size: 0.92em; color: #d0c0e8; }
.pipe-lip-rule { font-weight: bold; font-family: 'JetBrains Mono', monospace; font-size: 0.82em; padding: 1px 6px; border-radius: 3px; border: 1px solid #333; letter-spacing: 0.5px; }
.pipe-lip-rule.pipe-lip-err  { color: #ff5050; background: #1a0808; border-color: #402020; }
.pipe-lip-rule.pipe-lip-warn { color: #ffd060; background: #1a1408; border-color: #403020; }
.pipe-lip-hs  { color: #b090ff; font-family: 'JetBrains Mono', monospace; font-size: 0.88em; }
.pipe-lip-msg { color: #cfe6f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Performance metrics panel — CPI / IPC / throughput. */
.pipe-perf-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #6adfff; border-top: 1px solid #082030; border-bottom: 1px solid #082030; background: #051218; font-size: 0.95em; letter-spacing: 1px; }
/* Runtime telemetry — live counters straight from the engine. Greener
 * tint to distinguish from the cyan static-analysis PERFORMANCE block. */
.pipe-runtime-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #80ffa0; border-top: 1px solid #08301a; border-bottom: 1px solid #08301a; background: #051810; font-size: 0.95em; letter-spacing: 1px; }
.pipe-perf-grid { padding: 0.5em 1.2em 0.6em 1.2em; display: grid; grid-template-columns: 1fr; gap: 0.25em; background: #040e12; }
.pipe-perf-row { display: grid; grid-template-columns: 110px 1fr; gap: 0.6em; font-size: 0.90em; color: #cfe6f0; font-family: 'JetBrains Mono', monospace; }
.pipe-perf-row .k { color: #6adfff; font-size: 0.85em; letter-spacing: 0.5px; }
.pipe-perf-row .v { color: #e0f0ff; }

/* Pipeline Diagram (Gantt — instruction × cycle). Horizontally scrollable
   grid with a sticky left label column and a sticky top cycle-number row.
   Stage cells use the colorblind-friendly hue palette already established
   by the hazard tags (cyan/green/yellow/orange/magenta). */
.pipe-diag-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #ffc070; border-top: 1px solid #2a1a08; border-bottom: 1px solid #2a1a08; background: #180e04; font-size: 0.95em; letter-spacing: 1px; }
.pipe-diag-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.4em 1.2em; background: #0a0806; font-size: 0.82em; align-items: center; }
.pdl-cell { padding: 2px 8px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.82em; border: 1px solid transparent; }

.pipe-diag-grid { overflow-x: auto; padding: 0.5em 0.6em 0.8em 0.6em; background: #040608; font-family: 'JetBrains Mono', monospace; }
.pipe-diag-row { display: grid; grid-template-columns: 180px repeat(var(--pdg-cols), 30px); gap: 2px; align-items: stretch; margin-bottom: 2px; border-bottom: 1px solid rgba(143, 212, 255, 0.06); padding-bottom: 2px; }
.pipe-diag-row:nth-child(even):not(.pipe-diag-cyc-header) { background: rgba(143, 212, 255, 0.025); }
.pipe-diag-row:hover:not(.pipe-diag-cyc-header) { background: rgba(143, 212, 255, 0.07); }
.pipe-diag-row .pdr-label { border-right: 1px solid rgba(143, 212, 255, 0.10); padding-right: 8px; }
/* Cycle gridlines every 5 cycles — drawn into the row gap via outside box-shadow
   so the colored cells aren't cut into. Children are [label, cell0, cell1, ...],
   so :nth-child(5n+7) targets cycles 5, 10, 15, ... (skipping cycle 0). */
.pipe-diag-row > :nth-child(5n+7) { box-shadow: -1px 0 0 rgba(143, 212, 255, 0.18); }
/* Bolder, brighter cycle labels at every 5th tick — easy visual anchor. */
.pipe-diag-row.pipe-diag-cyc-header > .pdr-cyc:nth-child(5n+7),
.pipe-diag-row.pipe-diag-cyc-header > .pdr-cyc:nth-child(2)        { color: #a8d8f0; font-weight: 700; }
.pipe-diag-row.pipe-diag-cyc-header { position: sticky; top: 0; z-index: 2; background: #040608; padding-bottom: 3px; border-bottom: 1px solid #1a1a20; }
.pipe-diag-row.pipe-diag-cyc-header .pdr-cyc { color: #6088a0; font-size: 0.72em; text-align: center; padding: 2px 0; }

.pdr-label { position: sticky; left: 0; z-index: 1; background: #040608; padding: 2px 6px; font-size: 0.80em; color: #cfe6f0; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #1a1a20; }
.pdr-pc   { color: #7088a0; font-size: 0.78em; }
.pdr-name { color: #e0f0ff; }
.pdr-badge { padding: 0 4px; border-radius: 2px; font-size: 0.68em; font-weight: 600; letter-spacing: 0.5px; }
.pdr-b-load   { background: #081a10; color: #6adf9a; border: 1px solid #103020; }
.pdr-b-branch { background: #2a2008; color: #ffc840; border: 1px solid #5a4010; }
.pdr-b-spec   { background: #201a2a; color: #b090ff; border: 1px solid #40306a; }
.pdr-b-halt   { background: #2a0808; color: #ff5050; border: 1px solid #5a1010; }

.pdr-cell { text-align: center; font-size: 0.74em; font-weight: 600; padding: 4px 0; border-radius: 2px; color: #040608; letter-spacing: 0.3px; }
.pdc-empty { background: transparent; }
.pdc-IF    { background: #6adfff; color: #041820; }
.pdc-ID    { background: #c0ff50; color: #0a1808; }
.pdc-EX    { background: #ffc840; color: #1a1204; }
.pdc-MEM   { background: #ff9028; color: #1a0a04; }
.pdc-WB    { background: #b090ff; color: #140a24; }
.pdc-STALL { background: #3a1010; color: #ff8080; border: 1px dashed #7a2020; padding: 3px 0; }
.pdc-FLUSH { background: #181820; color: #707080; border: 1px solid #303040; }

/* Hazard heatmap — color-coded stall/flush cells by hazard kind. Override
   the base .pdc-STALL / .pdc-FLUSH backgrounds; same dashed/solid borders
   are kept so the cell shape still reads as a bubble. */
.pdc-haz-raw     { background: #ff8c42; color: #1a0a00; border-color: #c0601a; }
.pdc-haz-loaduse { background: #ffd23f; color: #1a1400; border-color: #b89010; }
.pdc-haz-war     { background: #a06a3f; color: #f0e0c8; border-color: #604018; }
.pdc-haz-waw     { background: #b85cd9; color: #140020; border-color: #7030a0; }
.pdc-haz-control { background: #e63946; color: #ffe0e0; border-color: #901820; }
/* Phase 15 Phase 2 — mispredict gets a brighter hot-red with a thicker border
   so it stands out from regular control flush even at small cell sizes. */
.pdc-haz-mispred { background: #ff2050; color: #fff0f0; border: 2px solid #ff90a0; box-shadow: 0 0 4px #ff4060 inset; }

/* Speculative cells — IF / ID fetched before the previous branch resolved
   at EX, on a correctly-predicted branch. Diagonal lime hatch overlay so
   the underlying IF/ID stage colour still shows through. */
.pdc-speculative {
  background-image: repeating-linear-gradient(45deg,
    transparent 0, transparent 3px,
    rgba(80, 255, 160, 0.70) 3px, rgba(80, 255, 160, 0.70) 6px) !important;
  outline: 2px dashed #50ffa0;
  outline-offset: -2px;
  position: relative;
}
.pdc-speculative::after {
  content: '';
  position: absolute; top: 1px; right: 1px;
  width: 5px; height: 5px;
  background: #50ffa0;
  border-radius: 50%;
  box-shadow: 0 0 3px #50ffa0;
}

/* Iteration + per-branch prediction badges shown on the row label. */
.pdr-b-iter      { background: #051820; color: #6adfff; border: 1px solid #103848; font-weight: 700; }
.pdr-b-pred      { background: #081a10; color: #50d090; border: 1px solid #103820; font-weight: 700; }
.pdr-b-pred-miss { background: #2a0410; color: #ff6080; border: 1px solid #5a1020; }

/* Branch Predictor panel (Phase 15) — dropdown + per-PC state table. */
.pipe-pred-header { margin-top: 0.6em; padding: 0.5em 1.2em; font-weight: bold; color: #b090ff; border-top: 1px solid #1a1430; border-bottom: 1px solid #1a1430; background: #0c0820; font-size: 0.95em; letter-spacing: 1px; }
.pred-controls    { display: flex; gap: 10px; align-items: center; padding: 0.5em 1.2em; background: #08061a; font-size: 0.85em; color: #cfe6f0; }
.pred-label       { color: #9080d0; font-size: 0.82em; letter-spacing: 0.5px; }
.pred-select      { background: #14102a; color: #e0d0ff; border: 1px solid #3a2868; border-radius: 3px; padding: 3px 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.88em; cursor: pointer; }
.pred-select:hover { border-color: #5a4090; }
.pred-summary     { margin-left: auto; color: #b090ff; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
.pred-summary b   { color: #d0a8ff; }
.pred-table       { padding: 0.3em 1.2em 0.6em 1.2em; background: #050410; font-family: 'JetBrains Mono', monospace; font-size: 1.05em; }
.pred-row         { display: grid; grid-template-columns: 70px 1.8fr 60px 70px 50px 70px; gap: 10px; padding: 5px 0; align-items: center; border-bottom: 1px solid #14102a; }
.pred-row-head    { color: #9080d0; font-size: 0.92em; letter-spacing: 0.5px; border-bottom: 1px solid #3a2868; padding-bottom: 6px; }
.pred-pc          { color: #7088a0; }
.pred-state       { color: #e0d0ff; }
.pred-pred        { color: #b090ff; text-align: center; }
.pred-actual      { color: #ffc840; text-align: center; }
.pred-hit         { text-align: center; }
.pred-ok          { color: #50d090; }
.pred-miss        { color: #ff6080; }
.pred-rate        { color: #80a0c0; text-align: right; font-size: 0.82em; }
.pred-empty       { padding: 0.5em 0; color: #707080; font-style: italic; }

/* Compare-predictors button + result table (Phase 15 Phase 3). */
.pred-btn          { background: #1a1430; color: #d0a8ff; border: 1px solid #3a2868; border-radius: 3px; padding: 4px 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.78em; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; }
.pred-btn:hover    { background: #2a1a48; border-color: #5a4090; color: #e8d0ff; }
.pred-cmp-header   { padding: 0.5em 1.2em 0.3em 1.2em; color: #b090ff; font-weight: bold; font-size: 0.85em; letter-spacing: 1px; background: #050410; border-top: 1px solid #1a1430; }
.pred-cmp-row      { display: grid; grid-template-columns: 2fr 80px 80px 80px 60px 1.2fr; gap: 8px; padding: 4px 1.2em; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: #050410; border-bottom: 1px solid #14102a; }
.pred-cmp-row-head { color: #9080d0; font-size: 0.78em; letter-spacing: 0.5px; border-bottom: 1px solid #3a2868; padding-bottom: 6px; }
.pred-cmp-winner   { background: #0a1a14; border-left: 3px solid #50d090; }
.pred-cmp-name     { color: #e0d0ff; }
.pred-cmp-rate     { color: #6adfff; text-align: right; }
.pred-cmp-mp       { color: #ffc840; text-align: right; }
.pred-cmp-cyc      { color: #e0f0ff; text-align: right; font-weight: 700; }
.pred-cmp-cpi      { color: #80a0c0; text-align: right; }
.pred-cmp-delta    { text-align: right; }
.pred-cmp-base     { color: #80a0c0; font-style: italic; }
.pred-cmp-good     { color: #50d090; font-weight: 700; }
.pred-cmp-bad      { color: #ff6080; }

/* Collapsible sections — wraps each PIP-panel section. Header is clickable;
   chevron rotates 90° when the section is collapsed; body is display:none. */
.pipe-section                    { display: block; }
.pipe-section-header             { cursor: pointer; user-select: none; }
.pipe-section-header:hover       { filter: brightness(1.2); }
.pipe-section-header:hover .pipe-section-toggle { background: currentColor; color: #050410; }
.pipe-section-toggle             {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  margin-right: 8px;
  border: 1.5px solid currentColor; border-radius: 4px;
  font-size: 0.92em; font-weight: 900; line-height: 1;
  transition: transform 0.15s ease-out, background 0.12s, color 0.12s;
  vertical-align: middle;
}
.pipe-section-collapsed > .pipe-section-header > .pipe-section-toggle { transform: rotate(-90deg); }
.pipe-section-collapsed > .pipe-section-body { display: none; }

.mem-row {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid #1a1228;
  cursor: pointer;
  transition: background 0.15s;
}

.mem-row:hover {
  background: #1a1430;
}

.mem-row-label {
  color: #c0a0f0;
  font-weight: bold;
  min-width: 60px;
}

.mem-row-type {
  color: #9880c8;
  font-size: 0.8em;
  min-width: 40px;
}

.mem-row-size {
  color: #a088d0;
  font-size: 0.9em;
  min-width: 36px;
}

.mem-row-value {
  color: #39ff14;
  font-weight: bold;
  margin-left: auto;
  font-size: 1.1em;
}

.mem-row-binary {
  color: #8098b8;
  font-size: 0.9em;
  margin-left: 8px;
  min-width: 50px;
  text-align: right;
}

.mem-row-edit {
  width: 50px;
  padding: 1px 4px;
  background: #161e2e;
  border: 1px solid #3a4a60;
  border-radius: 3px;
  color: #39ff14;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  margin-left: 6px;
}

.mem-row-edit:focus {
  border-color: #a078e0;
  outline: none;
}

.mem-comp-header {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #2a1a40;
  cursor: pointer;
  background: #0e0a18;
  transition: background 0.15s;
}

.mem-comp-header:hover {
  background: #1a1430;
}

.mem-bits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 5px 12px 8px;
  border-bottom: 1px solid #1a1228;
}

.mem-bit-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}

.mem-bit-cell:hover {
  border-color: #a078e0;
}

.mem-bit-on {
  background: #1a2a10;
  border-color: #2a4a18;
}

.mem-bit-off {
  background: #10101a;
  border-color: #1a1a28;
}

.mem-bit-label {
  font-size: 0.7em;
  color: #9880c8;
  font-weight: bold;
}

.mem-bit-val {
  font-size: 1.2em;
  font-weight: bold;
}

.mem-bit-on .mem-bit-val {
  color: #39ff14;
}

.mem-bit-off .mem-bit-val {
  color: #666;
}

.mem-empty {
  color: #3a2060;
  text-align: center;
  padding: 20px 12px;
  font-style: italic;
}

.mem-ram-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 2px;
  padding: 4px 12px 8px;
}

.mem-ram-cell {
  background: #161228;
  border: 1px solid #2a1a40;
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 0.8em;
  text-align: center;
  color: #a088d0;
}

.mem-ram-cell-active {
  color: #39ff14;
  border-color: #5a3d8a;
}

.mem-ram-addr {
  color: #8060b8;
  font-size: 0.7em;
  display: block;
}

.mem-regfile-table {
  padding: 4px 12px 8px;
  border-bottom: 1px solid #1a1228;
}

.mem-regfile-row {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 1px;
  background: #10101a;
  cursor: pointer;
  transition: background 0.15s;
}

.mem-regfile-row:hover {
  background: #1a1430;
}

.mem-regfile-active {
  background: #14200e;
}

.mem-regfile-name {
  color: #b098e0;
  font-weight: bold;
  font-size: 0.9em;
  min-width: 28px;
}

.mem-regfile-val {
  color: #39ff14;
  font-weight: bold;
  font-size: 1em;
  min-width: 50px;
}

.mem-regfile-bin {
  color: #8098b8;
  font-size: 0.9em;
  margin-left: auto;
}

#mem-inspector::-webkit-scrollbar { width: 6px; }
#mem-inspector::-webkit-scrollbar-track { background: #0a0e14; }
#mem-inspector::-webkit-scrollbar-thumb { background: #3a2060; border-radius: 3px; }

/* ── Context Menu ───────────────────────────────────────── */
#context-menu {
  position: fixed;
  z-index: 400;
  background: #0d1320;
  border: 1px solid #2a4060;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 150px;
  font: 11px 'JetBrains Mono', monospace;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.ctx-item {
  padding: 6px 14px;
  color: #c8d8f0;
  cursor: pointer;
  transition: background 0.1s;
}

.ctx-item:hover {
  background: #1a2a40;
}

.ctx-danger {
  color: #ff4444;
}

.ctx-danger:hover {
  background: #2a1010;
}

.ctx-sep {
  height: 1px;
  background: #1e3a50;
  margin: 3px 8px;
}

/* ── Keyboard Shortcuts Panel ───────────────────────────── */
#shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#shortcuts-modal {
  background: #0a0e14;
  border: 1px solid #2a4060;
  border-radius: 10px;
  width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
}

#shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #1e3a50;
  color: #00d4ff;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
}

#shortcuts-body {
  overflow-y: auto;
  padding: 8px 16px 16px;
}

.sc-group-title {
  color: #4a6080;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 12px 0 4px;
  text-transform: uppercase;
}

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.sc-action {
  color: #c8d8f0;
  font-size: 11px;
}

.sc-key {
  background: #161e2e;
  border: 1px solid #2a3a50;
  border-radius: 3px;
  padding: 2px 8px;
  color: #00d4ff;
  font-size: 10px;
  font-weight: bold;
  min-width: 30px;
  text-align: center;
}

.sc-edit-btn {
  background: none;
  border: 1px solid #2a3a50;
  color: #4a6080;
  font: 8px 'JetBrains Mono', monospace;
  padding: 1px 5px;
  border-radius: 2px;
  cursor: pointer;
}

.sc-edit-btn:hover { color: #ffa028; border-color: #ffa028; }

.sc-reset-btn {
  background: none;
  border: 1px solid #3a2020;
  color: #ff6666;
  font: 8px 'JetBrains Mono', monospace;
  padding: 1px 5px;
  border-radius: 2px;
  cursor: pointer;
}

.sc-reset-btn:hover { background: #2a1010; }

/* ── Palette Search ─────────────────────────────────────── */
#palette-search {
  width: 90px;
  margin: 0;
  padding: 2px 6px;
  background: #0a1520;
  border: 1px solid #1e3040;
  border-radius: 3px;
  color: #c8d8f0;
  font: 10px 'JetBrains Mono', monospace;
  outline: none;
  transition: width 0.2s, border-color 0.2s;
}

#palette-search:focus {
  width: 160px;
  border-color: #00d4ff;
}

#palette-search::placeholder {
  color: #2a4060;
}

/* ── Wire Tooltip ───────────────────────────────────────── */
#wire-tooltip {
  position: fixed;
  z-index: 300;
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid #e0a030;
  border-radius: 5px;
  padding: 6px 12px;
  font: bold 13px 'JetBrains Mono', monospace;
  color: #e0a030;
  pointer-events: none;
  white-space: nowrap;
  max-width: 350px;
}

/* ── CU Editor Modal ────────────────────────────────────── */
#cu-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#cu-editor-modal {
  background: #0a0e14;
  border: 2px solid #ffa028;
  border-radius: 12px;
  width: min(1400px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
}

#cu-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 2px solid #4a3020;
  color: #ffa028;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1.6px;
}

#cu-editor-header > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

#cu-opcount-select {
  font: bold 12px 'JetBrains Mono', monospace !important;
  background: #1a1410 !important;
  border: 2px solid #ffa028 !important;
  color: #ffa028 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  cursor: pointer;
}

#cu-editor-table-wrap {
  overflow-y: auto;
  flex: 1;
  max-height: 70vh;
}

#cu-editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#cu-editor-table th {
  color: #8a6830;
  font-size: 12px;
  font-weight: bold;
  padding: 10px 10px;
  text-align: center;
  border-bottom: 2px solid #3a2010;
  position: sticky;
  top: 0;
  background: #0a0e14;
}

#cu-editor-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #1a1208;
  text-align: center;
}

.cu-op {
  color: #8a6020;
  font-weight: bold;
  width: 50px;
  font-size: 13px;
  white-space: nowrap;
}

.cu-drag-handle {
  cursor: grab;
  color: #3a2818;
  font-size: 14px;
  margin-right: 4px;
  transition: color 0.15s;
  user-select: none;
}

.cu-drag-handle:hover {
  color: #ffa028;
}

#cu-editor-table tr[draggable] {
  transition: opacity 0.15s, background 0.15s;
}

.cu-row-dragging {
  opacity: 0.3;
}

.cu-row-dragover {
  background: #2a1a08 !important;
  box-shadow: 0 -2px 0 #ffa028 inset;
}

.cu-name-input {
  width: 75px;
  padding: 4px 6px;
  background: #161210;
  border: 1px solid #3a2818;
  border-radius: 3px;
  color: #ffa028;
  font: bold 13px 'JetBrains Mono', monospace;
  text-align: center;
}

.cu-aluop-input {
  width: 42px;
  padding: 4px 6px;
  background: #161210;
  border: 1px solid #3a2818;
  border-radius: 3px;
  color: #c8d8f0;
  font: 13px 'JetBrains Mono', monospace;
  text-align: center;
}

.cu-check {
  width: 20px;
  height: 20px;
  accent-color: #ffa028;
  cursor: pointer;
}

.cu-hex {
  color: #5a7090;
  font-size: 12px;
}

/* ── ROM View Tabs ──────────────────────────────────────── */
.rom-tab {
  font: bold 9px 'JetBrains Mono', monospace;
  padding: 3px 10px;
  background: #0a1520;
  border: 1px solid #2a4060;
  color: #4a6080;
  cursor: pointer;
  transition: all 0.15s;
}

.rom-tab:first-child { border-radius: 3px 0 0 3px; }
.rom-tab:last-child { border-radius: 0 3px 3px 0; }
.rom-tab:not(:first-child) { border-left: none; }

.rom-tab.active {
  background: #1a2a40;
  color: #00d4ff;
  border-color: #00d4ff;
}

.rom-tab:hover:not(.active) {
  color: #8090a8;
}

/* ── ROM Code View ──────────────────────────────────────── */
#rom-code-view {
  flex: 1;
  width: 100%;
  min-height: 350px;
  background: #0a0e14;
  border: none;
  border-top: 1px solid #1e3a50;
  color: #c8d8f0;
  font: 14px 'JetBrains Mono', monospace;
  padding: 16px 20px;
  resize: none;
  outline: none;
  line-height: 1.7;
  tab-size: 4;
}

#rom-error-bar {
  background: #1a0808;
  border-top: 1px solid #4a1010;
  color: #ff4444;
  font: 11px 'JetBrains Mono', monospace;
  padding: 6px 16px;
  max-height: 80px;
  overflow-y: auto;
  white-space: pre-wrap;
}

#rom-code-view::selection {
  background: rgba(0, 212, 255, 0.2);
}

/* ── ROM Editor Modal ───────────────────────────────────── */
#rom-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#rom-editor-modal {
  background: #0a0e14;
  border: 1px solid #5a3d8a;
  border-radius: 10px;
  width: 90vw;
  max-width: 1200px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
}

#rom-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #3a2060;
  color: #c0a0f0;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
}

#rom-editor-header > div { display: flex; gap: 6px; }

#rom-editor-table-wrap {
  overflow-y: auto;
  flex: 1;
  max-height: 50vh;
}

#rom-editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

#rom-editor-table th {
  color: #4a6080;
  font-size: 8px;
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #1a1228;
  position: sticky;
  top: 0;
  background: #0a0e14;
}

#rom-editor-table td {
  padding: 3px 8px;
  border-bottom: 1px solid #0e0a18;
}

.rom-addr { color: #5a4080; font-weight: bold; width: 40px; }
.rom-hex { color: #39ff14; font-weight: bold; }
.rom-asm { color: #c8d8f0; }

.rom-hex-input, .rom-asm-input {
  width: 70px;
  padding: 1px 4px;
  background: #161e2e;
  border: 1px solid #2a3a50;
  border-radius: 2px;
  color: #39ff14;
  font: 10px 'JetBrains Mono', monospace;
}

.rom-asm-input {
  width: 140px;
  color: #c8d8f0;
}

.rom-del-btn {
  background: none;
  border: 1px solid #3a2020;
  color: #ff4444;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  cursor: pointer;
}

.rom-del-btn:hover { background: #2a1010; }

#rom-editor-builder {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  border-top: 1px solid #3a2060;
  align-items: center;
}

#rom-editor-builder select {
  font: 10px 'JetBrains Mono', monospace;
  background: #161e2e;
  border: 1px solid #2a3a50;
  color: #c8d8f0;
  padding: 2px 4px;
  border-radius: 2px;
}

/* ── Retime Suggestion Banner (top, prominent) ────────────── */
#retime-banner {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #0d1820 0%, #0a0e14 100%);
  border: 2px solid #5a8a3d;
  border-radius: 10px;
  padding: 18px 26px;
  min-width: 560px;
  max-width: 860px;
  z-index: 400;
  font-family: 'JetBrains Mono', monospace;
  color: #c0f0a0;
  box-shadow: 0 6px 28px rgba(0,255,120,0.22), 0 0 0 4px rgba(90,138,61,0.12);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: 'title actions' 'body actions';
  gap: 8px 24px;
}
#retime-banner.hidden { display: none; }
#retime-banner-title {
  grid-area: title;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #8ad44a;
}
#retime-banner-body {
  grid-area: body;
  font-size: 16px;
  line-height: 1.6;
  color: #cfe6f0;
}
#retime-banner-body .r-desc   { color: #fff; font-weight: bold; font-size: 18px; margin-bottom: 6px; letter-spacing: 0.3px; }
#retime-banner-body .r-metric { color: #8ad44a; font-weight: bold; }
#retime-banner-body .r-before { color: #ff8080; text-decoration: line-through; }
#retime-banner-body .r-arrow  { color: #8fd4ff; margin: 0 6px; font-weight: bold; }
#retime-banner-actions {
  grid-area: actions;
  align-self: center;
  display: flex;
  gap: 10px;
}
#retime-banner-actions button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 22px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.8px;
}
#btn-retime-accept {
  background: #1a3a10;
  border: 1px solid #5a8a3d;
  color: #c0f0a0;
}
#btn-retime-accept:hover { background: #2a5a20; box-shadow: 0 0 10px rgba(90,138,61,0.5); }
#btn-retime-reject {
  background: #2a1010;
  border: 1px solid #5a3030;
  color: #f0a0a0;
}
#btn-retime-reject:hover { background: #3a1818; }

/* ── Retime Applied Banner (bottom, success) ───────────────── */
#retime-applied-banner {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: linear-gradient(180deg, #1a3a10 0%, #122a08 100%);
  border: 2px solid #8ad44a;
  border-radius: 10px;
  padding: 18px 32px;
  min-width: 480px;
  z-index: 600;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 6px 30px rgba(138,212,74,0.35), 0 0 0 5px rgba(138,212,74,0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
#retime-applied-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#retime-applied-banner .r-text {
  font-size: 17px;
  color: #e8ffd0;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
#retime-applied-banner .r-text .r-hint {
  display: block;
  font-size: 13px;
  color: #8ad44a;
  font-weight: normal;
  margin-top: 3px;
  letter-spacing: 0.5px;
}
#retime-applied-banner.failed {
  background: linear-gradient(180deg, #3a1010 0%, #2a0808 100%);
  border-color: #d47070;
  box-shadow: 0 6px 30px rgba(212,80,80,0.35), 0 0 0 5px rgba(212,80,80,0.1);
}
#retime-applied-banner.failed .r-text   { color: #ffd0d0; }
#retime-applied-banner.failed .r-hint   { color: #ff8080; }

/* ── Examples Modal ──────────────────────────────────────── */
#examples-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Verilog preview modal — DFT-orange accents to match the bottom-bar
   VERILOG button. Phase-7 will replace the body with a syntax-highlit
   editor; for now plain monospace text is enough. */
#verilog-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 510;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
#verilog-preview-overlay.hidden { display: none; }
#verilog-preview-modal {
  background: #0a0e14;
  border: 1px solid #aa6a2a;
  border-radius: 10px;
  width: 90vw;
  max-width: 1100px;
  height: 86vh;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
}
#verilog-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #6a4020;
  color: #ffb878;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
}
#verilog-preview-header > div { display: flex; gap: 6px; }
#verilog-preview-body {
  flex: 1 1 auto;
  margin: 0;
  padding: 14px 0;
  overflow: auto;
  background: #07090d;
  color: #d0d8e4;
  font: 12px/1.5 'JetBrains Mono', monospace;
  white-space: pre;
  counter-reset: vlineno;
}
/* Line numbers: each top-level line is a row that puts its index in
   a fixed-width gutter via CSS counter. Stays clickable-friendly and
   doesn't interfere with text selection of the code itself. */
#verilog-preview-body .vp-line { display: block; counter-increment: vlineno; }
#verilog-preview-body .vp-line::before {
  content: counter(vlineno);
  display: inline-block;
  width: 38px; padding-right: 12px;
  text-align: right;
  color: #455060;
  user-select: none;
}
/* Verilog syntax-highlight tokens. Subtle palette tuned to the rest
   of the app's dark amber/teal scheme so it doesn't fight the chrome. */
#verilog-preview-body .tok-kw  { color: #ffb878; font-weight: 600; }
#verilog-preview-body .tok-ty  { color: #80c0ff; }
#verilog-preview-body .tok-num { color: #f0a060; }
#verilog-preview-body .tok-cmt { color: #5a6a78; font-style: italic; }
#verilog-preview-body .tok-op  { color: #d090c0; }
#verilog-preview-body .tok-todo{ color: #ff6060; font-weight: 600; }
#verilog-preview-body .tok-sys { color: #80e0c0; }
#verilog-preview-tabs {
  display: flex; gap: 1px; padding: 0 12px; background: #050709;
  border-bottom: 1px solid #1a2230; min-height: 26px;
}
#verilog-preview-tabs .vp-tab {
  padding: 5px 14px; cursor: pointer; user-select: none;
  font: 10px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.4px;
  color: #6a7a8a; background: #0a0e14;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 3px 3px 0 0; margin-top: 4px;
}
#verilog-preview-tabs .vp-tab:hover { color: #c8b89a; background: #0c1118; }
#verilog-preview-tabs .vp-tab.active {
  color: #ffb878; background: #07090d;
  border-color: #aa6a2a; border-bottom: 1px solid #07090d;
  margin-bottom: -1px;
}
#verilog-preview-tabs .vp-tab .vp-tab-icon {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 1px; margin-right: 6px; vertical-align: middle;
}
#verilog-preview-tabs .vp-tab[data-lang="verilog"]  .vp-tab-icon { background: #ffb878; }
#verilog-preview-tabs .vp-tab[data-lang="tb"]       .vp-tab-icon { background: #c0a8ff; }
#verilog-preview-tabs .vp-tab[data-lang="markdown"] .vp-tab-icon { background: #80c0ff; }
#verilog-preview-headeropt,
#verilog-preview-topopt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; color: #c8b89a; letter-spacing: 0.5px;
  padding: 2px 6px; cursor: pointer; user-select: none;
}
#verilog-preview-headeropt input { margin: 0; cursor: pointer; }
#txt-verilog-topname {
  width: 90px; background: #1a2030; color: #ffb878;
  border: 1px solid #3a4658; border-radius: 3px;
  padding: 2px 6px; font: 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}
#txt-verilog-topname:focus { outline: none; border-color: #aa6a2a; }
#verilog-preview-stats {
  display: flex; gap: 14px; align-items: center;
  padding: 6px 18px; background: #0c1118; border-bottom: 1px solid #1a2230;
  font: 10px/1 'JetBrains Mono', monospace; color: #8898a8; letter-spacing: 0.5px;
}
#verilog-preview-stats b { color: #d8e4f0; font-weight: 600; margin-right: 3px; }
#verilog-preview-stats .hidden { display: none; }
#vp-stat-todo b { color: #ff8080; }
#verilog-preview-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; background: #0c1118; border-bottom: 1px solid #1a2230;
  font: 10px/1 'JetBrains Mono', monospace; color: #c8b89a; letter-spacing: 0.5px;
}
#verilog-preview-progress.hidden { display: none; }
#verilog-preview-progress .vp-progress-bar {
  flex: 1 1 auto; height: 4px; background: #1a2030; border-radius: 2px; overflow: hidden;
}
#verilog-preview-progress .vp-progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, #aa6a2a, #ffb878);
  transition: width 0.12s linear;
}
#verilog-preview-violations {
  padding: 8px 18px; background: #281418; border-bottom: 1px solid #5a2030;
  font: 10px/1.5 'JetBrains Mono', monospace; color: #ff9a98;
  max-height: 140px; overflow-y: auto;
}
#verilog-preview-violations.hidden { display: none; }
#verilog-preview-violations .vp-viol-title {
  font-weight: 600; color: #ff5050; letter-spacing: 0.5px; margin-right: 8px;
}
#verilog-preview-violations ul { margin: 4px 0 4px 16px; padding: 0; }
#verilog-preview-violations li { color: #e8c0c0; }
#verilog-preview-violations li code {
  color: #ffd0d0; background: #2a0a14; padding: 0 4px; border-radius: 2px;
}
#verilog-preview-violations label {
  display: inline-block; margin-top: 4px; cursor: pointer;
  color: #ffb878; user-select: none;
}
#verilog-preview-violations label input { margin-right: 4px; vertical-align: middle; }
#verilog-preview-warnings {
  padding: 8px 18px; background: #2a1a08; border-bottom: 1px solid #5a3a18;
  font: 10px/1.5 'JetBrains Mono', monospace; color: #ffb878;
  max-height: 100px; overflow-y: auto;
}
#verilog-preview-warnings.hidden { display: none; }
#verilog-preview-warnings .vp-warn-title {
  font-weight: 600; color: #ff8060; letter-spacing: 0.5px; margin-right: 8px;
}
#verilog-preview-warnings ul { margin: 4px 0 0 16px; padding: 0; }
#verilog-preview-warnings li { color: #d8c8a0; }
#verilog-preview-warnings li code {
  color: #ffd0a0; background: #1a1208; padding: 0 4px; border-radius: 2px;
}
#verilog-preview-hint {
  padding: 8px 18px; background: #0c1118; border-top: 1px solid #1a2230;
  font: 10px/1.4 'JetBrains Mono', monospace; color: #6a7a8a;
}
#verilog-preview-hint code {
  color: #c8b89a; background: #1a2030; padding: 1px 5px; border-radius: 3px;
}

#examples-modal {
  background: #0a0e14;
  border: 1px solid #5a3d8a;
  border-radius: 10px;
  width: 96vw;
  max-width: 1700px;
  height: 92vh;
  max-height: 94vh;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
}

#examples-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #3a2060;
  color: #c0a0f0;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  position: sticky;
  top: 0;
  background: #0a0e14;
  z-index: 1;
}

#examples-list {
  padding: 8px;
}

.example-card {
  padding: 14px 16px;
  margin: 0;
  border: 1px solid #1a1228;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.example-card:hover {
  background: #1a1430;
  border-color: #5a3d8a;
}

.example-card-title {
  color: #c0a0f0;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.example-card-desc {
  color: #8a9ab0;
  font-size: 11px;
  line-height: 1.5;
}

.example-card-tags {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.example-tag {
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.example-tag-beginner {
  background: #0a2a1a;
  color: #39ff14;
  border: 1px solid #1a4a2a;
}

.example-tag-intermediate {
  background: #1a1a30;
  color: #6a8aff;
  border: 1px solid #2a2a50;
}

.example-tag-advanced {
  background: #2a1a10;
  color: #ffa028;
  border: 1px solid #4a3020;
}

.example-tag-component {
  background: #10101a;
  color: #5a6a80;
  border: 1px solid #1a1a28;
}

.examples-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0 8px;
  border-bottom: 1px solid #2a1a40;
  position: sticky;
  top: 38px;
  background: #0a0e14;
  z-index: 1;
}
.examples-tab {
  flex: 1;
  background: transparent;
  color: #6a7a90;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.examples-tab:hover {
  color: #c0a0f0;
  background: #140a28;
}
.examples-tab.active {
  color: #c0a0f0;
  background: #1a1430;
  border-color: #3a2060;
  border-bottom-color: #1a1430;
  margin-bottom: -1px;
}
.examples-tab-count {
  background: #2a1a40;
  color: #a080d0;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: bold;
}
.examples-tab.active .examples-tab-count {
  background: #3a2060;
  color: #d8b8ff;
}
.examples-cards {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .examples-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .examples-cards { grid-template-columns: 1fr; }
}
.examples-empty {
  padding: 40px 20px;
  text-align: center;
  color: #5a6a80;
  font-size: 11px;
}

/* ── General Fixes ───────────────────────────────────────── */
.hidden {
  display: none !important;
}

/* Scrollbar styling for dark theme */
#debug-panel::-webkit-scrollbar,
#command-palette-list::-webkit-scrollbar,
#truthtable-container::-webkit-scrollbar {
  width: 6px;
}

#debug-panel::-webkit-scrollbar-track,
#command-palette-list::-webkit-scrollbar-track,
#truthtable-container::-webkit-scrollbar-track {
  background: #0a0e14;
}

#debug-panel::-webkit-scrollbar-thumb,
#command-palette-list::-webkit-scrollbar-thumb,
#truthtable-container::-webkit-scrollbar-thumb {
  background: #2a4060;
  border-radius: 3px;
}

/* Export menu — popup attached to the EXPORT button in the ANALYSIS panel header. */
.pipe-export-wrap { position: relative; display: inline-block; }
.pipe-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #0a0818;
  border: 1px solid #2a6a8a;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  padding: 4px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pipe-export-menu.hidden { display: none; }
.pipe-export-menu button {
  background: transparent;
  border: 1px solid transparent;
  color: #c0d8f0;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px;
}
.pipe-export-menu button:hover {
  background: #142838;
  border-color: #2a6a8a;
  color: #8fd4ff;
}

/* Preset view bar — quick-switch profiles for the ANALYSIS panel. */
.pipe-preset-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px;
  border-bottom: 1px solid #1a3040;
  background: rgba(143, 212, 255, 0.025);
  font-size: 11px;
}
.pipe-preset-label {
  color: #8fd4ff;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.pipe-preset-hint {
  color: #567;
  font-style: italic;
  flex: 1 1 auto;
  min-width: 120px;
}
.pipe-preset-buttons {
  display: inline-flex;
  gap: 4px;
}
.pipe-preset-status {
  color: #678;
  font-size: 0.92em;
  white-space: nowrap;
}
.pipe-preset-btn {
  background: rgba(143, 212, 255, 0.06);
  border: 1px solid rgba(143, 212, 255, 0.22);
  color: #8fd4ff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pipe-preset-btn:hover { background: rgba(143, 212, 255, 0.14); color: #cfe6f0; }
.pipe-preset-btn.active {
  background: #163a5a;
  border-color: #8fd4ff;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(143, 212, 255, 0.45) inset;
}
#pipeline-panel.pipeline-fullscreen .pipe-preset-bar {
  font-size: 14px;
  padding: 12px 24px;
  gap: 14px;
}
#pipeline-panel.pipeline-fullscreen .pipe-preset-btn { font-size: 13px; padding: 6px 14px; }

/* Hide / fade animations for preset transitions. The fade runs 200 ms;
   afterwards `.pipe-section-hidden` removes the section from layout entirely. */
.pipe-section { transition: opacity 0.2s ease-out; }
.pipe-section-fading { opacity: 0; }
.pipe-section-hidden { display: none !important; }

/* Inline SAVE button next to the BRANCH PREDICTOR header — appears only when
   the user has staged a predictor change that hasn't been committed to the
   CU yet. Glow + green to signal "click me to persist". */
.pred-save-btn {
  margin-left: 12px;
  padding: 3px 12px;
  background: linear-gradient(180deg, #1a4a2a, #0f3a20);
  border: 1.5px solid #39ff14;
  border-radius: 999px;
  color: #c0ff9a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.45);
  animation: pred-save-pulse 1.4s ease-in-out infinite;
  transition: transform 0.1s, box-shadow 0.1s;
}
.pred-save-btn:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(57, 255, 20, 0.75); }
.pred-save-btn.hidden { display: none; }
@keyframes pred-save-pulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(57, 255, 20, 0.4); }
  50%      { box-shadow: 0 0 16px rgba(57, 255, 20, 0.85); }
}

/* CU editor — Branch Predictor control. Bold red-pill chip with glow.
   Larger text, fully tinted dropdown (no white default styling). */
.cu-bp-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  margin-right: 16px;
  background: linear-gradient(180deg, rgba(255, 80, 100, 0.22), rgba(160, 30, 40, 0.12));
  border: 2px solid #ff5060;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255, 80, 96, 0.30),
    0 0 18px rgba(255, 80, 96, 0.55),
    inset 0 0 10px rgba(255, 80, 96, 0.14);
  vertical-align: middle;
}
.cu-bp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.8px;
  color: #ffd0a0;
  text-shadow: 0 0 7px rgba(255, 130, 110, 0.55);
}
.cu-bp-select {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 40px 8px 18px;
  /* Cream background so the BLACK text reads at high contrast. */
  background:
    linear-gradient(180deg, #ffe8c8, #ffd49a)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><path d='M1 1l6 8 6-8' stroke='%23202020' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 14px center;
  border: 2px solid #ff8090;
  border-radius: 999px;
  color: #1a0810;          /* deep black-burgundy — high contrast on cream */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  min-width: 240px;
  letter-spacing: 0.5px;
  /* Pulsing highlight to signal "this is interactive — pick one". Pauses on
     hover/focus so the user isn't distracted while reading the choices. */
  animation: cu-bp-pulse 1.6s ease-in-out infinite;
}
@keyframes cu-bp-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255, 224, 128, 0.0),  0 0 8px  rgba(255, 100, 100, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 224, 128, 0.35), 0 0 18px rgba(255, 160, 100, 0.7); }
}
.cu-bp-select:hover,
.cu-bp-select:focus {
  animation: none;
  border-color: #ffd080;
  box-shadow: 0 0 0 3px rgba(255, 200, 120, 0.45), 0 0 16px rgba(255, 160, 100, 0.55);
  outline: none;
}
/* Options — cream background, BLACK text, clearly highlighted on hover. */
.cu-bp-select option {
  background: #fff2dc;
  color: #1a0810;
  font-weight: 700;
  padding: 6px 12px;
}
.cu-bp-select option:checked,
.cu-bp-select option:hover {
  background: #ffb060 !important;
  color: #1a0810 !important;
}

/* ─── Tutorial / Learn Mode ────────────────────────────────── */
#btn-tutorial {
  font-size: 9px;
  padding: 2px 8px;
  background: #102a1a;
  border: 1px solid #2a8a4a;
  color: #80f0a0;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
}
#btn-tutorial:hover { background: #154028; border-color: #39ff80; color: #aaffc8; }

#tutorial-panel {
  position: fixed;
  top: 180px;
  right: 8px;
  width: 520px;
  max-height: calc(100vh - 200px);
  background: #0d1320;
  border: 1px solid #2a8a4a;
  border-radius: 8px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
  color: #c8d8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
#tutorial-panel.hidden { display: none; }

#tutorial-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #102a1a;
  border-bottom: 1px solid #2a8a4a;
  color: #80f0a0;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
}
#tutorial-panel-header .tut-x {
  background: #2a1010;
  border: 1px solid #4a2020;
  color: #ff6666;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
}
#tutorial-panel-header .tut-x:hover { background: #3a1818; }

#tutorial-panel-body {
  padding: 14px 18px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
}

.tut-catalog-intro {
  color: #a0c0e0;
  font-size: 13px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #0a1520;
  border-left: 3px solid #2a8a4a;
  border-radius: 3px;
}

.tut-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2a4060;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.tut-tab {
  background: #0a1520;
  border: 1px solid #2a4060;
  border-bottom: none;
  color: #80a0c0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 7px 12px 6px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.tut-tab:hover { background: #102018; color: #c0e0f0; }
.tut-tab-active {
  background: #102a1a;
  border-color: #2a8a4a;
  color: #80f0a0;
}
.tut-tab-count {
  font-size: 9px;
  background: #1a2030;
  border: 1px solid #2a4060;
  color: #6080a0;
  padding: 1px 6px;
  border-radius: 8px;
}
.tut-tab-active .tut-tab-count {
  background: #0a2018;
  border-color: #39ff80;
  color: #80f0a0;
}
.tut-catalog-empty {
  color: #6080a0;
  font-size: 12px;
  font-style: italic;
  padding: 16px;
  text-align: center;
  background: #0a1520;
  border: 1px dashed #2a4060;
  border-radius: 4px;
}

.tut-cards { display: flex; flex-direction: column; gap: 10px; }
.tut-card {
  background: #0a1520;
  border: 1px solid #2a4060;
  border-radius: 5px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.tut-card:hover { border-color: #2a8a4a; background: #102018; }
.tut-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tut-card-title { color: #80f0a0; font-weight: bold; font-size: 14px; }
.tut-card-summary { color: #b0c0d8; font-size: 12px; margin-top: 6px; line-height: 1.55; }

.tut-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #1a2030;
  border: 1px solid #2a4060;
  color: #6080a0;
  white-space: nowrap;
  font-weight: bold;
}
.tut-badge-done {
  background: #102a1a;
  border-color: #39ff80;
  color: #80f0a0;
}
.tut-badge-progress {
  background: #1a2030;
  border-color: #ffb060;
  color: #ffb060;
}

.tut-lesson-head { margin-bottom: 12px; }
.tut-link {
  background: none;
  border: none;
  color: #6090c0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}
.tut-link:hover { color: #80c0e0; }
.tut-lesson-title { color: #80f0a0; font-weight: bold; font-size: 16px; margin: 6px 0 4px; }
.tut-lesson-progress { color: #80a0c0; font-size: 11px; }

.tut-instruction {
  background: #0a1520;
  border: 1px solid #2a4060;
  border-left: 4px solid #2a8a4a;
  border-radius: 4px;
  padding: 12px 14px;
  margin: 12px 0;
  color: #d8f0e0;
  font-size: 14px;
  line-height: 1.65;
  /* Preserve newlines in author text so multi-step instructions
     render as a visual list. Existing single-paragraph instructions
     are unaffected. */
  white-space: pre-wrap;
}

.tut-code {
  background: #06101a;
  border: 1px solid #2a4060;
  border-left: 4px solid #00d4ff;
  border-radius: 4px;
  margin: 10px 0;
  overflow: hidden;
}
.tut-code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #0a1828;
  border-bottom: 1px solid #2a4060;
  font-size: 10px;
  color: #80a0c0;
}
.tut-code-lang {
  background: #00d4ff;
  color: #001828;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.tut-code-title { flex: 1; color: #80c0e0; font-size: 11px; }
.tut-code-copy {
  background: #102a3a;
  border: 1px solid #2a6080;
  color: #80d0f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: auto;
}
.tut-code-copy:hover { background: #154058; border-color: #4a90c0; }
.tut-code-text {
  margin: 0;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #d0e8f8;
  white-space: pre;
  overflow-x: auto;
  background: transparent;
}

.tut-hint {
  background: #1a1a08;
  border: 1px solid #4a4020;
  border-left: 4px solid #ffb060;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 6px 0;
  color: #f0d090;
  font-size: 13px;
  line-height: 1.6;
}

.tut-result {
  padding: 11px 14px;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  border: 1px solid;
  line-height: 1.5;
}
.tut-result-ok  { background: #0a2018; border-color: #39ff80; color: #80f0a0; }
.tut-result-bad { background: #2a1010; border-color: #ff6666; color: #ffa0a0; }

.tut-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #2a4060;
}
.tut-btn {
  background: #1a2030;
  border: 1px solid #2a4060;
  color: #c8d8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}
.tut-btn:hover:not(:disabled) { background: #243048; border-color: #4060a0; }
.tut-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tut-btn-primary {
  background: #102a1a;
  border-color: #39ff80;
  color: #80f0a0;
}
.tut-btn-primary:hover { background: #154028; }

.tut-btn-warn {
  background: #2a2010;
  border-color: #ffb060;
  color: #ffb060;
}
.tut-btn-warn:hover { background: #3a2818; }

.tut-btn-danger {
  background: #2a1010;
  border-color: #ff6666;
  color: #ffa0a0;
}
.tut-btn-danger:hover { background: #3a1818; }

#tut-confirm {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
}
#tut-confirm.hidden { display: none; }
.tut-confirm-box {
  background: #0d1320;
  border: 2px solid #ffb060;
  border-radius: 6px;
  padding: 18px 20px;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
.tut-confirm-title {
  color: #ffb060;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.tut-confirm-text {
  color: #c8d8f0;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.tut-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#tut-completion {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
}
#tut-completion.hidden { display: none; }
.tut-completion-box {
  background: #0d1320;
  border: 2px solid #6cd06c;
  border-radius: 6px;
  padding: 20px 24px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.8), 0 0 24px rgba(108, 208, 108, 0.18);
}
.tut-completion-title {
  color: #6cd06c;
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 12px;
  letter-spacing: 0.4px;
}
.tut-completion-text {
  color: #c8d8f0;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.tut-completion-text p { margin: 0 0 10px 0; }
.tut-completion-text ul { margin: 4px 0 12px 18px; padding: 0; }
.tut-completion-text li { margin-bottom: 6px; }
.tut-completion-text code {
  background: #1a2335;
  color: #ffb060;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.tut-completion-text strong { color: #ffd890; }

/* ── DFT (Design For Test) Panel ──────────────────────────────
   Parallel architecture to #pipeline-panel. Same slot (bottom-right)
   but warmer orange accent so the user can tell at a glance which
   panel is open. Pipeline panel and DFT panel are mutually exclusive
   — opening one closes the other (handled in DFTPanel.show / hide).  */
#dft-panel {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 440px;
  height: 45vh;
  min-width: 320px;
  min-height: 150px;
  max-width: 95vw;
  max-height: 95vh;
  background: #14100a;
  border: 1px solid #aa6a2a;
  border-left: none;
  border-top-right-radius: 8px;
  z-index: 160;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #f0e2cf;
  display: flex;
  flex-direction: column;
}
#dft-panel.hidden { display: none; }

#dft-resize-grip {
  position: absolute;
  right: 0; top: 0;
  width: 18px; height: 100%;
  cursor: ew-resize;
  background: rgba(255,160,40,0.04);
  border-left: 1px dashed rgba(255,160,40,0.18);
  z-index: 1;
}
#dft-resize-grip:hover { background: rgba(255,160,40,0.12); }

#dft-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em 2.6em 0.8em 1.2em;
  border-bottom: 1px solid #6a4020;
  color: #ffb878;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 1px;
  flex: 0 0 auto;
}
#dft-panel-header > div { display: flex; gap: 6px; }
#dft-panel-header button {
  font-size: 0.95em !important;
  padding: 0.35em 0.8em;
  letter-spacing: 0.5px;
  font-weight: bold;
  border-width: 1px;
}

#dft-panel-summary {
  padding: 0.8em 1.2em;
  border-bottom: 1px solid #401a00;
  font-size: 1em;
  color: #ffb878;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.3em 1.2em;
}
#dft-panel-summary .k { color: #876; }
#dft-panel-summary .v { color: #f0e2cf; text-align: right; font-weight: bold; }

#dft-panel-body {
  padding: 0.4em 0;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* Section headers (mirror .pipe-section-header) — collapsible groups
   are added by DFTPanel._applyCollapsibleSections. */
.dft-section { margin: 0; }
.dft-section-header {
  padding: 0.5em 1.2em;
  background: rgba(255,160,40,0.06);
  color: #ffb878;
  font-weight: bold;
  font-size: 0.95em;
  letter-spacing: 0.5px;
  border-top: 1px solid #401a00;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dft-section-header:hover { background: rgba(255,160,40,0.12); }
.dft-section-toggle { color: #aa6a2a; font-size: 0.9em; }
.dft-section-collapsed > *:not(.dft-section-header) { display: none; }

/* Generic key/value row for sections like TESTABILITY OVERVIEW. */
.dft-perf-row {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 1em;
  row-gap: 0.3em;
  padding: 0.5em 1.2em;
  font-size: 0.95em;
  align-items: center;
}
.dft-perf-row .k { color: #876;     white-space: nowrap; }
.dft-perf-row .v { color: #f0e2cf;  font-weight: bold; }

/* Per-chain block: a horizontal flow diagram that reads like a real
   scan-chain whiteboard sketch — rounded pads at the ends, square
   cells in the middle, arrows between, and a TE bar running underneath
   the whole thing. Status chip in the header turns colour based on
   chain health (healthy / orphan / unwired). */
.dft-chain-block {
  margin: 8px 1.2em 12px;
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, rgba(255,160,40,0.05), rgba(255,160,40,0.02));
  border: 1px solid #3a2818;
  border-left: 2px solid #aa6a2a;
  border-radius: 4px;
  font: 11px/1.4 'JetBrains Mono', monospace;
}

.dft-chain-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a1a08;
  cursor: pointer; user-select: none;
}
.dft-chain-header:hover { background: rgba(255,160,40,0.06); }
.dft-chain-toggle {
  color: #aa6a2a; font-size: 10px; line-height: 1;
  width: 10px; text-align: center;
}
/* Collapsed chain — only the title row is visible. Margin/padding of
   the block itself shrink so a column of folded chains stays compact. */
.dft-chain-block.collapsed {
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.dft-chain-block.collapsed .dft-chain-header {
  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}
/* Collapsed blocks hide every direct child except the clickable
   header. Generic so the same rule serves chain blocks AND the
   LFSR pattern-generator blocks (and any future per-item block
   that wants to fold). */
.dft-chain-block.collapsed > *:not(.dft-chain-header) { display: none; }
.dft-chain-title {
  color: #ffb878; font-weight: 600; letter-spacing: 0.5px;
}
.dft-chain-len { color: #876; font-size: 10px; }
.dft-chain-status {
  margin-left: auto;
  padding: 2px 8px; border-radius: 10px;
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.7px;
}
.dft-chain-status.ok    { background: #0e2a18; color: #80f0a0; border: 1px solid #2a6a4a; }
.dft-chain-status.warn  { background: #2a1a08; color: #ffb878; border: 1px solid #6a4a2a; }
.dft-chain-status.bad   { background: #2a0a14; color: #ff8060; border: 1px solid #6a2030; }

/* Horizontal flow row: pad → cells → pad. Wraps cleanly when the
   chain is long; the gap keeps everything breathable. */
.dft-chain-flow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  padding: 4px 0 8px;
}
.dft-chain-pad, .dft-chain-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 10px;
  background: #1a1208;
  border: 1px solid #4a3018;
  font-size: 10px;
  min-width: 56px;
}
.dft-chain-pad {
  border-radius: 14px;
  border-color: #6a4a2a;
  background: linear-gradient(180deg, #1f1408, #15100a);
}
.dft-chain-pad strong { color: #ffd0a0; font-weight: 600; }
.dft-chain-pad small  { color: #876; font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; }
.dft-chain-cell {
  border-radius: 3px;
  border-color: #5a4028;
}
.dft-chain-cell strong { color: #f0e2cf; font-weight: 600; }
/* Empty pad — the chain has no scan-in or no scan-out wired. We still
   keep the pad shape so the diagram's symmetry survives, but mark it
   in red so it visibly fails the eye test. */
.dft-chain-pad.empty {
  background: rgba(255,80,80,0.08);
  border-color: #8a2030;
  border-style: dashed;
}
.dft-chain-pad.empty strong { color: #ff8060; font-style: italic; font-size: 9px; }
.dft-chain-arrow {
  color: #aa6a2a; font-size: 14px; line-height: 1;
  user-select: none;
}

/* TE bar — a horizontal line under the flow that visually carries
   the test-enable across every cell. The label sits at the left,
   the source description at the right, the line itself stretches. */
.dft-chain-te {
  display: flex; align-items: center; gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed #2a1a08;
  font-size: 10px;
}
.dft-chain-te-label {
  color: #876; text-transform: uppercase; letter-spacing: 0.7px;
  min-width: 28px;
}
.dft-chain-te-bar {
  flex: 1 1 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #aa6a2a, transparent);
}
.dft-chain-te-bar.split  { background: repeating-linear-gradient(90deg, #6a4a2a 0 6px, transparent 6px 12px); }
.dft-chain-te-bar.absent { background: repeating-linear-gradient(90deg, #8a2030 0 4px, transparent 4px 10px); }
.dft-chain-te-source { color: #ffd0a0; }
.dft-chain-te-source.warn { color: #ff8060; font-style: italic; }

/* Pattern Generators (LFSR) — uses the same chain-block frame so the
   panel stays visually consistent. The 4-row inner grid lays out
   key/value pairs (seed, poly, period, drives) in a tidy column. */
.dft-lfsr-grid {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 10px; row-gap: 4px;
  align-items: center;
  font-size: 11px;
}
.dft-lfsr-k {
  color: #876; text-align: right;
  text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px;
}
.dft-lfsr-v { color: #f0e2cf; }
.dft-lfsr-v code { color: #ffd0a0; }
.dft-lfsr-v small { color: #876; font-size: 9px; margin-left: 6px; }
/* Sink chip — green when it lands on a scan-in (this LFSR is acting
   as a real BIST source); plain text otherwise. */
.dft-lfsr-sink-scan {
  color: #80f0a0;
  background: rgba(40,160,80,0.10);
  padding: 1px 6px; border-radius: 3px;
  border: 1px solid #2a6a4a;
}
.dft-lfsr-sink-scan small { color: #6ac08a; }
.dft-lfsr-sink small { color: #876; }

/* MISR section toolbar — sits right under the section header, right-
   aligned so it reads as a quiet sub-control instead of competing
   with the perf-row data. */
.dft-misr-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  padding: 4px 1.4em 0;
}
.dft-misr-toolbar-label {
  color: #6a5a4a;
  font: 8px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
/* Segmented control: three pills (BIN/DEC/HEX) joined into one
   capsule. Active pill highlighted amber; idle pills sit quietly. */
.dft-misr-radix {
  display: inline-flex;
  background: #0a0e14;
  border: 1px solid #3a2818;
  border-radius: 999px;
  overflow: hidden;
  padding: 1px;
}
.dft-misr-radix-btn {
  background: transparent;
  border: none;
  padding: 1px 7px;
  font: 600 8px/1 'JetBrains Mono', monospace;
  color: #6a5a4a;
  cursor: pointer;
  letter-spacing: 0.5px;
  border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.dft-misr-radix-btn:hover { color: #c8b89a; background: rgba(255,160,40,0.06); }
.dft-misr-radix-btn.active {
  color: #1a1208;
  background: linear-gradient(180deg, #ffc890, #cc7a30);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4),
              0 0 4px rgba(255,160,40,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 700;
}

/* Inline-edit inputs (only visible while a field is in edit mode). */
.dft-lfsr-input {
  background: #1a1208; color: #ffd0a0;
  border: 1px solid #6a4a2a; border-radius: 3px;
  padding: 2px 6px; margin: 0;
  font: 11px 'JetBrains Mono', monospace;
  width: 130px;
  outline: none;
}
.dft-lfsr-input:focus { border-color: #aa6a2a; background: #1f1408; color: #ffe6c4; }
.dft-lfsr-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Tiny pencil / save / cancel buttons next to each LFSR field.
   In view mode only the pencil shows; in edit mode it's swapped
   for the save + cancel pair. All three share the same chrome
   so the row height stays stable when toggling. */
.dft-lfsr-edit, .dft-lfsr-save, .dft-lfsr-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 4px; padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  vertical-align: middle;
  transition: background 0.1s, border-color 0.1s;
}
.dft-lfsr-edit   { color: #876; }
.dft-lfsr-save   { color: #80f0a0; border-color: #2a6a4a; background: rgba(40,160,80,0.08); }
.dft-lfsr-cancel { color: #ff8060; border-color: #6a2030; background: rgba(160,40,40,0.08); }
.dft-lfsr-edit:hover   { color: #ffb878; border-color: #6a4a2a; background: rgba(255,160,40,0.10); }
.dft-lfsr-save:hover   { background: rgba(40,160,80,0.20); border-color: #4a8a6a; }
.dft-lfsr-cancel:hover { background: rgba(160,40,40,0.20); border-color: #8a4a4a; }
.dft-lfsr-hint {
  display: block; margin-top: 2px;
  color: #6a5a4a; font-size: 9px; font-style: italic;
}

/* Wraps the section title text + the ⓘ button into a single flex
   item so the parent header's `space-between` keeps the toggle on
   the right and the title group on the left. */
.dft-section-title { display: inline-flex; align-items: center; gap: 6px; }
/* Tiny info button — circular, hugs the title text. text-transform
   override is essential because the section header is uppercase
   styled and would otherwise capitalise the lowercase `i`. */
.dft-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 10px; padding: 0;
  background: transparent;
  border: 1.5px solid #4a6a8a;
  border-radius: 50%;
  color: #80c0ff;
  cursor: pointer;
  font: 600 11px/1 'JetBrains Mono', monospace;
  text-transform: none;          /* keep `i` lowercase */
  letter-spacing: 0;
  vertical-align: middle;
}
.dft-info-btn:hover {
  color: #c0e0ff; border-color: #80b0d0; background: rgba(80,160,255,0.18);
}
/* Inline info panel — sits under the section header, same band as
   the LFSR cards. Compact: 4 short rows + a left amber accent. */
.dft-info-panel {
  margin: 6px 1.2em 10px;
  padding: 10px 14px;
  background: #0e1218;
  border: 1px solid #3a2818;
  border-left: 3px solid #aa6a2a;
  border-radius: 4px;
  font: 12px/1.55 'JetBrains Mono', monospace;
  color: #d0d8e4;
  text-transform: none; letter-spacing: 0;
}
.dft-info-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 12px;
  margin: 6px 0;
  align-items: center;
}
.dft-info-row .dft-chain-status {
  margin-left: 0;
  justify-self: start;
  font-size: 10px;
  padding: 2px 8px;
}
.dft-info-text { color: #c8d0dc; }
/* Lead-in line at the top of every info popover — short context
   sentence before the legend rows. Italic + dimmer than the rows
   so the eye lands on the legend, but reads it on the way down. */
.dft-info-lead {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #2a1a08;
  color: #c8b89a;
  font-style: italic;
  line-height: 1.55;
}
/* No rows under the lead → drop the separator so the popover doesn't
   show a dangling line. */
.dft-info-lead:last-child {
  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}

/* Empty-state hint shown when no DFT components exist in the scene. */
.dft-empty {
  padding: 1.5em 1.2em;
  color: #876;
  font-style: italic;
  text-align: center;
}

/* Fullscreen mode — fills viewport. */
#dft-panel.dft-fullscreen {
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none;
  max-height: none;
  border: none;
  border-radius: 0;
  z-index: 1000;
}
#dft-panel.dft-fullscreen #dft-resize-grip { display: none; }


/* ── Interview Prep panel — green, mirrors #tutorial-panel palette ──── */
#interview-panel {
  position: fixed;
  top: 200px;                    /* clear the HUD + clock-controls row,
                                    with a small gap below them. */
  right: 16px;
  bottom: 24px;                  /* anchor both vertical edges → default
                                    spans almost top-to-bottom; resize-grip
                                    at the top-left modifies `top` + `width`. */
  width: 540px;
  min-width: 360px;
  max-width: 95vw;
  background: #0d1320;
  border: 1px solid #2a8a4a;
  border-radius: 8px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
  color: #c8d8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
#interview-panel.hidden { display: none; }

/* Custom resize grip in the top-left corner. Dragging it moves the
   panel's top edge (smaller `top`) and grows its width (`width`).
   Bottom + right edges stay anchored so the panel always reaches them. */
.iv-resize-grip {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 2;
  /* Two diagonal lines drawn with linear-gradients for a subtle ⤡ glyph. */
  background:
    linear-gradient(135deg, transparent 5px, #80f0a0 5px, #80f0a0 6px, transparent 6px) no-repeat,
    linear-gradient(135deg, transparent 9px, #80f0a0 9px, #80f0a0 10px, transparent 10px) no-repeat;
  background-size: 16px 16px;
  opacity: 0.5;
  transition: opacity 0.1s;
  border-top-left-radius: 8px;
}
.iv-resize-grip:hover { opacity: 1; }
.iv-resize-grip:active { opacity: 1; }

#interview-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #102a1a;
  border-bottom: 1px solid #2a8a4a;
  color: #80f0a0;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
}
#interview-panel-header .iv-x {
  background: #2a1010;
  border: 1px solid #4a2020;
  color: #ff6666;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
}
#interview-panel-header .iv-x:hover { background: #3a1818; }

#interview-panel-body {
  flex: 1;                       /* fill space remaining after header */
  padding: 14px 18px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
}

.iv-catalog-intro {
  color: #a0d0b0;
  font-size: 13px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #0a1520;
  border-right: 3px solid #2a8a4a;
  border-radius: 3px;
}
.iv-catalog-intro code {
  background: #102a1a;
  border: 1px solid #2a8a4a;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  color: #80f0a0;
}

.iv-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2a4060;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.iv-tab {
  background: #0a1520;
  border: 1px solid #2a4060;
  border-bottom: none;
  color: #80a0c0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 7px 12px 6px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.iv-tab:hover { background: #102018; color: #c0e0f0; }
.iv-tab-active {
  background: #102a1a;
  border-color: #2a8a4a;
  color: #80f0a0;
}
.iv-tab-icon { font-size: 12px; opacity: 0.85; }
.iv-tab-count {
  font-size: 9px;
  background: #1a2030;
  border: 1px solid #2a4060;
  color: #6080a0;
  padding: 1px 6px;
  border-radius: 8px;
}
.iv-tab-active .iv-tab-count {
  background: #0a2018;
  border-color: #39ff80;
  color: #80f0a0;
}
.iv-tab-num {
  display: inline-block;
  min-width: 16px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  background: #0a1520;
  border: 1px solid #2a4060;
  color: #80a0c0;
  padding: 1px 5px;
  border-radius: 3px;
}
.iv-tab-active .iv-tab-num {
  background: #0a2018;
  border-color: #39ff80;
  color: #80f0a0;
}
.iv-card-serial,
.iv-question-serial {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #0a1520;
  background: linear-gradient(180deg, #ffd860 0%, #f0b030 100%);
  border: 1px solid #c08020;
  border-radius: 4px;
  padding: 3px 9px;
  letter-spacing: 1.2px;
  box-shadow: 0 0 6px rgba(240, 176, 48, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.iv-question-serial {
  font-size: 16px;
  padding: 4px 11px;
  margin-inline-end: 10px;
  vertical-align: middle;
}

/* ── Verilog editor (CodeMirror 6) ───────────────────────────────── */
.iv-check-wrap-code {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 8px;
}
.iv-code-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}
.iv-code-label {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.2px;
  background: #102a1a;
  border: 1px solid #2a8a4a;
  color: #80f0a0;
  padding: 2px 8px;
  border-radius: 3px;
}
.iv-code-hint {
  font-size: 11px;
  color: #8090b0;
}
.iv-code-host {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #2a8a4a;
  border-radius: 5px;
  overflow: hidden;
  background: #181c24;
  box-shadow: 0 0 0 1px rgba(57, 255, 128, 0.08) inset, 0 2px 8px rgba(0, 0, 0, 0.3);
}
.iv-code-host .cm-editor { width: 100%; height: var(--cm-h, 320px); }
.iv-code-host .cm-editor,
.iv-code-host .cm-editor.cm-focused { outline: none; }
.iv-code-host .cm-content { padding: 8px 4px; }
.iv-code-host .cm-scroller { direction: ltr; }
.iv-code-resize-grip {
  height: 8px;
  margin-top: -4px;
  cursor: ns-resize;
  background: linear-gradient(180deg, transparent 0%, rgba(57, 255, 128, 0.12) 50%, transparent 100%);
  border-radius: 3px;
  position: relative;
}
.iv-code-resize-grip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 2px;
  background: #2a8a4a;
  border-radius: 1px;
}
.iv-code-resize-grip:hover::after { background: #80f0a0; }
.iv-code-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;  /* RTL: button hugs the right edge */
  flex-wrap: wrap;
}
.iv-btn-check {
  font-size: 13px;
  padding: 8px 18px;
  min-width: 140px;
}
/* When result lives inside the code-wrap, give it room to breathe. */
.iv-check-wrap-code .iv-check-result {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  text-align: start;
}

.iv-topic-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #2a4060;
}
.iv-topic-title {
  color: #80f0a0;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.iv-topic-desc {
  color: #8090b0;
  font-size: 11px;
  line-height: 1.5;
}
.iv-empty {
  color: #6080a0;
  font-size: 12px;
  font-style: italic;
  padding: 24px 16px;
  text-align: center;
  background: #0a1520;
  border: 1px dashed #2a4060;
  border-radius: 4px;
}
.iv-empty code {
  background: #102a1a;
  border: 1px solid #2a8a4a;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  color: #80f0a0;
  font-style: normal;
}

/* ── Interview Prep — question cards, hints, answer reveal ───────────── */
.iv-cards { display: flex; flex-direction: column; gap: 10px; }
.iv-card {
  background: #0a1520;
  border: 1px solid #2a4060;
  border-radius: 5px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.iv-card:hover { border-color: #2a8a4a; background: #102018; }
.iv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.iv-card-title { color: #80f0a0; font-weight: bold; font-size: 14px; flex: 1; }
.iv-card-meta { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.iv-card-parts { font-size: 10px; color: #80a0c0; }

.iv-badge {
  font-size: 9px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 8px;
  background: #1a2030;
  border: 1px solid #2a4060;
  color: #80a0c0;
  letter-spacing: 1px;
}
.iv-badge-seen     { background: #1a2030; border-color: #4060a0; color: #80b0e0; }
.iv-badge-mastered { background: #0a2018; border-color: #39ff80; color: #80f0a0; }

.iv-diff {
  font-size: 9px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.iv-diff-easy    { background: #0a2018; border: 1px solid #2a8a4a; color: #80f0a0; }
.iv-diff-medium  { background: #2a2010; border: 1px solid #aa8a3a; color: #f0d080; }
.iv-diff-hard    { background: #2a1010; border: 1px solid #aa3a3a; color: #f08080; }

/* ── Question view ────────────────────────────────────────────────── */
.iv-question-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #2a4060;
}
.iv-question-title {
  color: #80f0a0;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.iv-question-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iv-part-label {
  font-size: 11px;
  font-weight: bold;
  background: #102a1a;
  border: 1px solid #2a8a4a;
  color: #80f0a0;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 1px;
}
.iv-part-progress {
  font-size: 10px;
  color: #80a0c0;
  font-weight: bold;
}

.iv-intro {
  background: #0a1520;
  border-right: 3px solid #2a8a4a;
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #b0c8d0;
  font-size: 12px;
  line-height: 1.6;
}
.iv-intro p { margin: 0 0 8px 0; }
.iv-intro p:last-child { margin-bottom: 0; }
.iv-intro code,
.iv-prompt code,
.iv-hint code,
.iv-answer code {
  background: #102a1a;
  border: 1px solid #2a4060;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  color: #80f0a0;
  direction: ltr;
  unicode-bidi: isolate;
}
.iv-intro strong, .iv-prompt strong, .iv-hint strong, .iv-answer strong {
  color: #c0e0d0;
}

.iv-image-wrap {
  text-align: center;
  margin: 8px 0 14px;
  padding: 8px;
  background: #f5f5ee;
  border: 1px solid #2a4060;
  border-radius: 4px;
}
.iv-image {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.iv-part-body { margin-bottom: 12px; }

.iv-prompt {
  font-size: 14px;
  line-height: 1.7;
  color: #c8d8f0;
  background: #0d1830;
  border: 1px solid #2a4060;
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.iv-prompt p { margin: 0 0 8px 0; }
.iv-prompt p:last-child { margin-bottom: 0; }

.iv-hint {
  font-size: 12px;
  line-height: 1.6;
  color: #d0e0c0;
  background: #15281a;
  border-right: 3px solid #80a060;
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 6px;
}

.iv-answer {
  margin-top: 10px;
  background: #0a2018;
  border: 1px solid #2a8a4a;
  border-radius: 4px;
  padding: 12px 14px;
}
.iv-answer-head {
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  color: #80f0a0;
  margin-bottom: 8px;
}
.iv-answer-body {
  font-size: 13px;
  line-height: 1.7;
  color: #c8d8f0;
}
.iv-answer-body p { margin: 0 0 8px 0; }
.iv-answer-body p:last-child { margin-bottom: 0; }

/* ── Interviewer-mindset reveal (🎯 ראש המראיין) ─────────────── */
.iv-mindset {
  margin-top: 10px;
  background: #1a1408;
  border: 1px solid #c08020;
  border-left: 3px solid #f0a040;
  border-radius: 4px;
  padding: 10px 14px;
}
.iv-mindset-head {
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  color: #f0c060;
  margin-bottom: 6px;
}
.iv-mindset-body {
  font-size: 12px;
  line-height: 1.65;
  color: #e0d0a0;
}
.iv-mindset-body p { margin: 0 0 6px 0; }
.iv-mindset-body p:last-child { margin-bottom: 0; }
.iv-btn-mindset {
  background: #1a1408 !important;
  border-color: #c08020 !important;
  color: #f0c060 !important;
}
.iv-btn-mindset:hover {
  background: #2a1c10 !important;
  border-color: #f0a040 !important;
}

/* ── Mindset index view (🎯 כפתור בכותרת) ────────────────────── */
.iv-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.iv-btn-mindset-index {
  font-size: 10px;
  font-weight: bold;
  background: #1a1408;
  border: 1px solid #c08020;
  color: #f0c060;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.1s, border-color 0.1s;
}
.iv-btn-mindset-index:hover {
  background: #2a1c10;
  border-color: #f0a040;
}
.iv-mindset-index-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #c08020;
}
.iv-mindset-index-title {
  color: #f0c060;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.iv-mindset-index-sub {
  color: #a09070;
  font-size: 11px;
  margin-top: 2px;
}
.iv-mindset-topic {
  margin-bottom: 18px;
}
.iv-mindset-topic-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 8px;
  border-bottom: 1px dashed #806040;
}
.iv-mindset-topic-name {
  color: #f0c060;
  font-weight: bold;
  font-size: 13px;
}
.iv-mindset-card {
  background: #1a1408;
  border: 1px solid #806040;
  border-left: 3px solid #f0a040;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.iv-mindset-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.iv-mindset-card-title {
  color: #f0c060;
  font-weight: bold;
  font-size: 12px;
  flex: 1;
}

.iv-table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.iv-table th, .iv-table td {
  border: 1px solid #2a4060;
  padding: 4px 8px;
  text-align: right;
}
.iv-table th {
  background: #102a1a;
  color: #80f0a0;
  font-weight: bold;
}

/* Action buttons row */
.iv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2a4060;
}
.iv-btn {
  background: #0a1520;
  border: 1px solid #2a4060;
  color: #c0d0e0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.iv-btn:hover:not(:disabled) { background: #102018; color: #c0e0f0; border-color: #4080a0; }
.iv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.iv-btn-primary { background: #102a1a; border-color: #2a8a4a; color: #80f0a0; }
.iv-btn-primary:hover:not(:disabled) { background: #163a22; border-color: #39ff80; }
.iv-btn-warn { background: #2a2010; border-color: #aa8a3a; color: #f0d080; }
.iv-btn-warn:hover:not(:disabled) { background: #3a2818; border-color: #d0a040; }
.iv-btn-link {
  background: transparent;
  border: none;
  color: #80a0c0;
  text-decoration: underline;
  padding: 4px 6px;
  margin-top: 6px;
}
.iv-btn-link:hover { color: #c0e0f0; }
.iv-btn-mastered { background: #0a2018; border-color: #39ff80; color: #80f0a0; }

/* Schematic SVG container — light bg behind dark-stroke schematics */
.iv-schematic {
  background: #0a1830;
  border: 1px solid #2a4060;
  border-radius: 4px;
  padding: 12px;
  margin: 8px 0 14px;
  text-align: center;
  overflow-x: auto;
}
.iv-schematic svg {
  max-width: 100%;
  height: auto;
}

/* Answer-check input row (parts that carry expectedAnswers[]) */
.iv-check-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.iv-answer-input {
  flex: 1;
  min-width: 200px;
  background: #0a1520;
  border: 1px solid #2a4060;
  color: #c8e0f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  outline: none;
}
.iv-answer-input:focus {
  border-color: #2a8a4a;
  background: #0d1830;
}
.iv-check-result {
  flex: 1 1 100%;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 3px;
}
.iv-check-ok {
  background: #0a2018;
  border: 1px solid #2a8a4a;
  color: #80f0a0;
}
.iv-check-bad {
  background: #2a1010;
  border: 1px solid #aa3a3a;
  color: #f08080;
}

/* Load-circuit / Restore-work bar shown under the schematic */
.iv-circuit-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: #102a1a;
  border: 1px solid #2a8a4a;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 12px;
  color: #c0e0c8;
}
.iv-circuit-hint  { flex: 1; min-width: 200px; }
.iv-circuit-status {
  flex: 1;
  min-width: 200px;
  color: #80f0a0;
  font-weight: bold;
}

/* Bullet lists in answers / intros / hints */
.iv-list {
  margin: 0 0 8px 0;
  padding-right: 22px;   /* RTL indent */
  padding-left: 0;
  list-style-position: outside;
}
.iv-list li {
  margin-bottom: 6px;
  line-height: 1.75;
}
.iv-list li::marker { color: #80a0c0; }

/* Slightly more breathing room around inline code so Hebrew + LTR code
   don't visually crowd each other. */
.iv-intro code,
.iv-prompt code,
.iv-hint code,
.iv-answer code {
  margin: 0 3px;
  padding: 1px 6px;
}

/* Bump line-height in dense answer/intro bodies for easier RTL reading. */
.iv-intro      { line-height: 1.75; }
.iv-prompt     { line-height: 1.8; }
.iv-answer-body { line-height: 1.8; }
.iv-hint       { line-height: 1.7; padding: 9px 12px; }

/* Word spacing helps mixed Hebrew + English text breathe. */
.iv-intro,
.iv-prompt,
.iv-answer-body,
.iv-hint {
  word-spacing: 0.5px;
}

/* ── Readability — prose in sans-serif, code stays mono ──────────────── */

/*
 * The panel chrome (header, tabs, buttons) stays in JetBrains Mono for the
 * engineering aesthetic. Prose blocks (intro, prompt, answer body, hints,
 * card / question titles) switch to the OS's native sans-serif so mixed
 * Hebrew + English reads cleanly — JetBrains Mono Hebrew falls back to
 * generic monospace, which is genuinely hard on the eyes.
 */
.iv-intro,
.iv-prompt,
.iv-answer-body,
.iv-hint,
.iv-card-title,
.iv-question-title,
.iv-circuit-bar,
.iv-empty,
.iv-list,
.iv-table td {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.1px;
}

/* Code stays in mono regardless of where it's nested. */
.iv-intro code,
.iv-prompt code,
.iv-hint code,
.iv-answer code,
.iv-list code,
.iv-table code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Slightly larger prose for easier reading; keep code its native size. */
.iv-prompt,
.iv-answer-body { font-size: 14px; }
.iv-intro       { font-size: 13.5px; }
.iv-hint        { font-size: 13px; }

/* Better paragraph spacing in dense answers. */
.iv-answer-body p,
.iv-intro p { margin: 0 0 12px 0; }
.iv-answer-body p:last-child,
.iv-intro p:last-child { margin-bottom: 0; }

/* Bold — softer color so it stands out without the heavy mono weight. */
.iv-intro strong,
.iv-prompt strong,
.iv-hint strong,
.iv-answer-body strong { color: #e8f0e0; font-weight: 700; }

/* Headings inside the answer comparison table */
.iv-table th { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ── Font smoothing + GPU compositing — kills subpixel jitter ───────── */

#interview-panel,
#interview-panel * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Promote the panel to its own composite layer so internal repaints
   (innerHTML swap, transitions) don't ripple through the page. */
#interview-panel {
  transform: translateZ(0);
  will-change: contents;
  contain: layout style;
}

/* Stable scrollbar gutter — prevents the body from "jumping" left↔right
   when answer/hints toggle and the content height crosses the threshold
   that adds/removes the vertical scrollbar. */
#interview-panel-body {
  scrollbar-gutter: stable;
}

/* ── Type-scale bump + clearer hierarchy ────────────────────────────── */

/* Bigger prose text — keeps Hebrew comfortable to read on a dark bg. */
.iv-prompt        { font-size: 15px; }
.iv-answer-body   { font-size: 14.5px; }
.iv-intro         { font-size: 14px; }
.iv-hint          { font-size: 13.5px; }

/* Question title — make the *primary* heading visibly primary so the
   eye instantly knows what to read first. */
.iv-question-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: #c8f0d0;        /* slightly warmer than body green */
}

/* Card titles in the catalog get the same boost so they read like
   "items" rather than "fine print". */
.iv-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

/* Slightly heavier separation between the schematic / circuit-bar /
   prompt block — so each "section" feels like its own thing. */
.iv-schematic    { margin-bottom: 16px; }
.iv-circuit-bar  { margin-bottom: 16px; padding: 10px 14px; }
.iv-intro        { margin-bottom: 16px; padding: 12px 16px; }

/* Inline code inside prose — slightly larger and less saturated so it
   blends with the text instead of shouting. */
.iv-intro code,
.iv-prompt code,
.iv-hint code,
.iv-answer code,
.iv-list code {
  font-size: 12.5px;
  background: #0a2018;
  border-color: #1a4030;
  color: #a8e0b8;
}

/* Fenced code blocks (e.g., ```verilog … ```) inside answers */
.iv-code {
  background: #0a1020;
  border: 1px solid #2a4060;
  border-radius: 4px;
  padding: 12px 14px;
  margin: 10px 0;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
.iv-code code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #c8e0d8;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  white-space: pre;
  word-spacing: normal;
  letter-spacing: 0;
}
.iv-code[data-lang]::before {
  content: attr(data-lang);
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #80a0c0;
  margin-bottom: 8px;
  padding: 2px 6px;
  background: #1a2030;
  border-radius: 2px;
}

/* Schematic shown inside an answer block — slight padding-bottom so
   the answer text below has breathing room. */
.iv-schematic-answer {
  margin: 6px 0 14px;
}