/* CAT/EPT Verification Dashboard */

:root {
  --bg: #0f1117;
  --bg-card: #1a1d27;
  --bg-card-hover: #22263a;
  --bg-input: #262a3a;
  --border: #2e3348;
  --text: #e4e6f0;
  --text-dim: #8b8fa4;
  --text-muted: #5c6078;
  --accent: #6c7cf5;
  --accent-dim: #4a56b8;
  --green: #4caf7a;
  --green-bg: rgba(76,175,122,0.12);
  --yellow: #e0a830;
  --yellow-bg: rgba(224,168,48,0.12);
  --orange: #e07840;
  --orange-bg: rgba(224,120,64,0.12);
  --red: #e04848;
  --red-bg: rgba(224,72,72,0.12);
  --blue: #4a90d9;
  --blue-bg: rgba(74,144,217,0.12);
  --purple: #9b6cd9;
  --cyan: #4ac5d9;
  --cyan-bg: rgba(74,197,217,0.12);
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  scroll-behavior: smooth;
}

/* Layout */
.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
}

header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

header h1 span { color: var(--accent); }

nav {
  display: flex;
  gap: 4px;
}

nav button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

nav button:hover { background: var(--bg-card); color: var(--text); }
nav button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Hero introduction */
.hero-intro {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  line-height: 1.7;
}

.hero-intro p {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
}

.hero-intro p + p { margin-top: 10px; }

.hero-intro strong { color: var(--text); font-weight: 600; }
.hero-intro em { color: var(--accent); font-style: normal; }

.hero-wiki-link {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.hero-wiki-link:hover { opacity: 1; text-decoration: underline; }

/* Section intros */
.section-intro {
  margin-bottom: 16px;
}

.section-intro p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.section-intro strong { color: var(--text-dim); }
.section-intro em { color: var(--accent); font-style: normal; }

/* Page sections — only the active section is visible */
.page-section {
  padding-top: 16px;
  margin-bottom: 40px;
  display: none;
}

.page-section.active {
  display: block;
}

.section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Collapsible section headings */
.section-heading.section-collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-collapse-toggle {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}
.section-collapsible.open .section-collapse-toggle {
  transform: rotate(90deg);
}
.section-collapsible-body {
  display: none;
}
.section-collapsible-body.open {
  display: block;
}

/* Hero metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.metric-card .value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.metric-card .label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.metric-card.green .value { color: var(--green); }
.metric-card.yellow .value { color: var(--yellow); }
.metric-card.red .value { color: var(--red); }
.metric-card.purple .value { color: var(--purple); }

/* Charts row */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.chart-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Chart explainer */
.chart-explainer {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.chart-explainer strong { color: var(--text-dim); font-weight: 600; }

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  width: 100px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: right;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 24px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  min-width: fit-content;
}

.bar-fill.green { background: var(--green); }
.bar-fill.yellow { background: var(--yellow); }
.bar-fill.orange { background: var(--orange); }
.bar-fill.blue { background: var(--blue); }
.bar-fill.purple { background: var(--purple); }
.bar-fill.accent { background: var(--accent); }
.bar-fill.red { background: var(--red); }

.bar-count {
  font-size: 13px;
  color: var(--text-dim);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* Topic cards */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.topic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.topic-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.topic-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.topic-card .count {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.topic-card .depth-mini {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
}

.depth-mini .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  vertical-align: middle;
}

.depth-mini .dot.sub { background: var(--green); }
.depth-mini .dot.str { background: var(--yellow); }
.depth-mini .dot.tri { background: var(--orange); }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-bar input[type="text"] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  width: 240px;
}

.filter-bar input::placeholder { color: var(--text-muted); }

.filter-bar select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}

.filter-bar select option { background: var(--bg-card); }

.filter-count {
  font-size: 13px;
  color: var(--text-dim);
}

/* Equation table */
.eq-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
}

.eq-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.eq-table th {
  text-align: left;
  padding: 10px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

.eq-table th:hover { color: var(--text-dim); }
.eq-table th .sort-arrow { margin-left: 4px; font-size: 10px; }

.eq-table td {
  padding: 8px 6px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-table tr:hover td { background: var(--bg-card-hover); }
.eq-table tr { cursor: pointer; }

/* ── Column sizing (percentage of table width) ── */
.col-id       { width: 3.5%; white-space: nowrap; }
.col-eq       { /* auto — takes remaining space */ }
.col-topic    { width: 7%; }
.col-origin   { width: 6.5%; }
.col-scenario { width: 5.5%; }
.col-lean     { width: 7.5%; }
.col-wolfram  { width: 7.5%; }
.col-sage     { width: 7.5%; }
.col-files    { width: 7%; }
.col-status   { width: 6.5%; }
.col-log      { width: 3.5%; text-align: center; }

/* ── Responsive: hide low-priority columns on smaller screens ── */
@media (max-width: 1200px) {
  .col-scenario { display: none; }
  .col-origin   { display: none; }
  .col-files    { display: none; }
}
@media (max-width: 960px) {
  .col-topic    { display: none; }
  .col-sage     { display: none; }
}
@media (max-width: 768px) {
  .col-wolfram  { display: none; }
  .col-lean     { display: none; }
}

/* Collapsible table rows */
.eq-row-hidden { display: none; }
.eq-table-wrap.eq-table-collapsed {
  position: relative;
}
.eq-table-wrap.eq-table-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.eq-toggle-bar {
  text-align: center;
  padding: 10px 0;
}
.eq-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.eq-toggle-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-dim);
}
.eq-toggle-hint {
  color: var(--text-muted);
  font-weight: 400;
}
.eq-toggle-key {
  display: inline-block;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 1px 5px;
  margin-left: 4px;
  line-height: 1.4;
}

/* Source file links in table */
.src-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.src-link {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: opacity 0.15s;
}
.src-link:hover { opacity: 0.8; }
.src-lean { background: rgba(155,108,217,0.2); color: var(--purple); }
.src-physlean { background: rgba(155,108,217,0.35); color: #c89ef5; }
.src-wolfram { background: var(--blue-bg); color: var(--blue); }
.src-python { background: var(--green-bg); color: var(--green); }
.src-xact { background: var(--orange-bg); color: var(--orange); }
.src-dir { background: rgba(255,255,255,0.08); font-size: 12px; padding: 1px 4px; }
.src-dir:hover { background: rgba(255,255,255,0.15); }

/* Scenario column: domain badge buttons (open in new tab) */
.scenario-btn {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.scenario-btn:hover { filter: brightness(1.3); text-decoration: none; }
.scenario-btn.example-qm     { background: var(--blue-bg);   color: var(--blue); }
.scenario-btn.example-gr      { background: rgba(155,108,217,0.12); color: var(--purple); }
.scenario-btn.example-thermo  { background: var(--yellow-bg); color: var(--yellow); }
.scenario-btn.example-em      { background: var(--green-bg);  color: var(--green); }
.scenario-btn.example-hydro   { background: var(--cyan-bg);   color: var(--cyan); }
.scenario-btn.example-qftcs   { background: rgba(155,108,217,0.25); color: #c89ef5; }
.scenario-btn.example-other   { background: var(--bg-card-hover); color: var(--text-dim); }

/* Wolfram execution status micro-dots in table */
.wl-exec-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 3px;
  vertical-align: middle;
}
.wl-exec-dot.wl-pass { background: var(--green); }
.wl-exec-dot.wl-fail { background: var(--red); }
.wl-exec-dot.wl-pending { background: var(--yellow); opacity: 0.7; }

/* Flag badges in table */
.flag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.flag-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.flag-badge.flag-warn {
  background: var(--red-bg);
  color: var(--red);
}
.flag-badge.flag-info {
  background: var(--yellow-bg);
  color: var(--yellow);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.sub { background: var(--green-bg); color: var(--green); }
.badge.str { background: var(--yellow-bg); color: var(--yellow); }
.badge.tri { background: var(--orange-bg); color: var(--orange); }
.badge.none { background: var(--red-bg); color: var(--red); }
.badge.symbolic { background: var(--blue-bg); color: var(--blue); }
.badge.mixed { background: rgba(155,108,217,0.12); color: var(--purple); }
.badge.definitional { background: var(--orange-bg); color: var(--orange); }
.badge.numerical { background: var(--green-bg); color: var(--green); }
.badge.sage-interactive { background: var(--cyan-bg); color: var(--cyan); }
.badge.sage-compatible { background: rgba(155,108,217,0.12); color: var(--purple); }
.badge.flag { background: var(--red-bg); color: var(--red); font-size: 10px; }

.badge-row { display: flex; gap: 4px; flex-wrap: wrap; }

/* Badge links (clickable badges in equation table) */
a.badge-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}
a.badge-link:hover {
  opacity: 0.85;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-verified { background: var(--green-bg); color: var(--green); }
.status-partial { background: var(--yellow-bg); color: var(--yellow); }
.status-none { background: var(--red-bg); color: var(--red); }

/* Status column header link */
.status-logic-link {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dashed var(--text-muted);
}
.status-logic-link:hover { color: var(--accent); }

/* Equation detail panel */
.detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
}

.detail-overlay.open { display: flex; justify-content: center; align-items: flex-start; padding-top: 40px; }

.detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 900px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 28px;
  box-shadow: var(--shadow);
}

.detail-panel .close-btn {
  float: right;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

.detail-panel .close-btn:hover { background: var(--bg-input); color: var(--text); }

.detail-header {
  margin-bottom: 20px;
}

.detail-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.detail-header .subtitle {
  font-size: 13px;
  color: var(--text-dim);
}

.detail-latex {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
  text-align: center;
  overflow-x: auto;
}

/* Accordion pattern for detail sections */
.detail-accordions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.detail-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.detail-accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  background: var(--bg-card);
  user-select: none;
  transition: background 0.15s;
  min-width: 0;
  overflow: hidden;
}
.detail-accordion-header:hover {
  background: var(--bg-card-hover);
}

.detail-accordion-toggle {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.detail-accordion.open .detail-accordion-toggle {
  transform: rotate(90deg);
}

.detail-accordion-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-accordion-summary {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.detail-accordion-body {
  display: none;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
}
.detail-accordion.open .detail-accordion-body {
  display: block;
}

/* Hide h3 inside accordion body — accordion header serves as title */
.detail-accordion-body .detail-section > h3 {
  display: none;
}
/* Remove margin from detail-section inside accordion */
.detail-accordion-body .detail-section {
  margin: 0;
}

/* Summary badges for accordion headers */
.acc-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.acc-badge.green  { color: var(--green);  background: var(--green-bg); }
.acc-badge.yellow { color: var(--yellow); background: var(--yellow-bg); }
.acc-badge.red    { color: var(--red);    background: var(--red-bg); }
.acc-badge.blue   { color: var(--blue);   background: var(--blue-bg); }
.acc-badge.purple { color: var(--purple); background: rgba(155,108,217,0.12); }
.acc-badge.dim    { color: var(--text-dim); background: var(--bg-card-hover); }

.detail-section {
  margin: 20px 0;
}

.detail-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.detail-section p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

.detail-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}

.detail-grid .key { color: var(--text-dim); }
.detail-grid .val { color: var(--text); }
.detail-grid .val a { color: var(--accent); text-decoration: none; }
.detail-grid .val a:hover { text-decoration: underline; }

/* Lean proof block */
.proof-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 8px 0;
  font-size: 13px;
}

.proof-info .tactic-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.proof-info .tactic {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 11px;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--accent);
}

/* Lean4 LaTeX annotation block (rendered math above code) */
.lean-latex-block {
  background: var(--bg);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin: 8px 0 4px 0;
}
.lean-latex-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.lean-latex-math {
  font-size: 15px;
  padding: 4px 0;
  overflow-x: auto;
}
.lean-latex-proves {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
}

/* Dependency graph */
#graph-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 500px;
}

/* Source code blocks */
.code-block-wrap {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}

.code-block-header .code-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-family: 'SF Mono', 'Menlo', monospace;
}

.code-block-header .code-toggle {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.code-block-header .code-toggle.open { transform: rotate(90deg); }

.code-block-header .copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  margin-left: 8px;
}

.code-block-header .copy-btn:hover { color: var(--text); background: var(--bg-card-hover); }

.code-block-body {
  display: none;
  max-height: 400px;
  overflow: auto;
}

.code-block-body.open { display: block; }

.code-block-body pre {
  margin: 0;
  padding: 12px 16px;
  background: var(--bg);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre;
  tab-size: 2;
}

/* Cross-verification status */
.xv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.xv-status .xv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.xv-status.xv-full { background: var(--green-bg); color: var(--green); }
.xv-status.xv-full .xv-dot { background: var(--green); }
.xv-status.xv-partial { background: var(--yellow-bg); color: var(--yellow); }
.xv-status.xv-partial .xv-dot { background: var(--yellow); }
.xv-status.xv-wolfram_only { background: var(--blue-bg); color: var(--blue); }
.xv-status.xv-wolfram_only .xv-dot { background: var(--blue); }
.xv-status.xv-lean_only { background: rgba(155,108,217,0.12); color: var(--purple); }
.xv-status.xv-lean_only .xv-dot { background: var(--purple); }
.xv-status.xv-lean_sorry { background: var(--orange-bg); color: var(--orange); }
.xv-status.xv-lean_sorry .xv-dot { background: var(--orange); }
.xv-status.xv-none { background: var(--red-bg); color: var(--red); }
.xv-status.xv-none .xv-dot { background: var(--red); }

.xv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.xv-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.xv-card h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.xv-card .xv-result {
  font-size: 13px;
  font-weight: 600;
}

.xv-card .xv-detail {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.xv-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; align-items: center; }
.xv-file-link { font-size: 11px; color: var(--blue); text-decoration: none; word-break: break-all; }
.xv-file-link:hover { text-decoration: underline; }
.xv-jump { margin-top: 6px; font-size: 11px; }
.xv-jump a { color: var(--text-muted); text-decoration: none; }
.xv-jump a:hover { color: var(--text); text-decoration: underline; }
.xv-exec { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 4px; }
.xv-exec-pass { color: var(--green); }
.xv-exec-fail { color: var(--red); }
.xv-exec-pending { color: var(--yellow); }
.xv-theorem-list { font-size: 11px; margin-top: 6px; }
.xv-theorem-item { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.xv-theorem-item .badge { line-height: 1; }

/* Bridge pipeline link */
.bridge-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

.bridge-link:hover { text-decoration: underline; }

.bridge-pipeline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.bridge-pipeline a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.bridge-pipeline a:hover { text-decoration: underline; }

/* Provenance trail — links to scripts and outputs for cross-checking */
.prov-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 8px 0;
  padding: 6px 10px;
  background: rgba(108,124,245,0.06);
  border: 1px solid rgba(108,124,245,0.15);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.prov-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  white-space: nowrap;
}
.prov-link {
  color: var(--accent);
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(108,124,245,0.1);
  white-space: nowrap;
}
.prov-link:hover {
  text-decoration: underline;
  background: rgba(108,124,245,0.18);
}
.prov-sep {
  color: var(--text-muted);
  font-size: 10px;
  margin: 0 1px;
}

/* ── Verification Files ───────────────────────────────────────────── */
.vf-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.vf-row {
  display: grid;
  grid-template-columns: 24px 1fr 1.2fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13px;
}
.vf-row:hover { background: var(--bg-card-hover); }
.vf-icon { font-size: 14px; text-align: center; }
.vf-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); word-break: break-all; }
.vf-role { color: var(--text-muted); font-size: 12px; }
.vf-meta { display: flex; gap: 4px; align-items: center; }
.vf-links { display: flex; gap: 8px; }
.vf-link {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
}
.vf-local { background: var(--bg-card-hover); color: var(--accent); }
.vf-github { background: var(--bg-card-hover); color: var(--text-dim); }
.vf-link:hover { text-decoration: underline; }
.vf-row.vf-pdf { border-left: 3px solid var(--green); }
.vf-row.vf-wolfram { border-left: 3px solid var(--blue); }
.vf-row.vf-tex { border-left: 3px solid var(--text-muted); }
.vf-row.vf-python { border-left: 3px solid var(--yellow); }
.vf-row.vf-lean { border-left: 3px solid var(--purple); }
.vf-dir-link {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--accent);
  text-decoration: none;
  margin-left: 8px;
}
.vf-dir-link:hover { text-decoration: underline; }

/* ── Infrastructure Section ───────────────────────────────────────── */

.infra-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.infra-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.infra-explainer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.infra-explainer strong { color: var(--text-dim); font-weight: 600; }
.infra-explainer code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-dim);
}

.infra-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.infra-card-header h4 { margin-bottom: 0; }

.infra-timestamp {
  font-size: 12px;
  color: var(--text-muted);
}

/* Pipeline summary stats */
.infra-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.infra-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.infra-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.infra-stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
}

.infra-stat.green .infra-stat-value { color: var(--green); }
.infra-stat.red .infra-stat-value { color: var(--red); }

/* Architecture stack diagram */
.arch-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
}

.arch-layer {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg);
}

.arch-layer-verify { border-left: 3px solid var(--green); }
.arch-layer-bridge { border-left: 3px solid var(--purple); }
.arch-layer-physics { border-left: 3px solid var(--cyan); }
.arch-layer-sim { border-left: 3px solid var(--yellow); }

.arch-layer-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.arch-layer-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arch-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.arch-node:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.arch-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--accent-dim);
  color: #fff;
}

.arch-layer-verify .arch-node-icon { background: var(--green); }
.arch-layer-bridge .arch-node-icon { background: var(--purple); }
.arch-layer-physics .arch-node-icon { background: var(--cyan); color: #111; }
.arch-layer-sim .arch-node-icon { background: var(--yellow); color: #111; }

.arch-node-name {
  font-weight: 500;
  white-space: nowrap;
}

.arch-node-stat {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.arch-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  position: relative;
}

.arch-connector::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.arch-connector-label {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  padding: 1px 10px;
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Architecture system badges */
.arch-sys-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.arch-sys-badge.arch-lean { background: var(--green-bg); color: var(--green); }
.arch-sys-badge.arch-wolfram { background: var(--orange-bg); color: var(--orange); }
.arch-sys-badge.arch-python { background: var(--blue-bg); color: var(--blue); }
.arch-sys-badge.arch-xact { background: rgba(155,108,217,0.12); color: var(--purple); }
.arch-sys-badge.arch-sage { background: var(--cyan-bg); color: var(--cyan); }

@media (max-width: 768px) {
  .arch-layer-nodes { gap: 6px; }
  .arch-node { padding: 4px 8px; font-size: 11px; }
  .arch-node-stat { display: none; }
}

/* Experiments & Digital Twins */
.exp-regime-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.exp-regime-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}

.exp-regime-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.exp-regime-params {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.exp-regime-eq {
  font-size: 12px;
  color: var(--text-dim);
}

.exp-regime-temp {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.exp-regime-example {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.exp-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.exp-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.exp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.exp-card-name {
  font-size: 14px;
  font-weight: 600;
}

.exp-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.exp-tag-enz { background: var(--cyan-bg); color: var(--cyan); }
.exp-tag-atomic { background: var(--orange-bg); color: var(--orange); }
.exp-tag-nuclear { background: var(--red-bg); color: var(--red); }
.exp-tag-bh { background: rgba(155,108,217,0.12); color: var(--purple); }

.exp-card-system {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}

.exp-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.exp-card-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.exp-card-label {
  flex-shrink: 0;
  width: 70px;
  color: var(--text-muted);
  font-weight: 500;
}

.exp-card-val {
  color: var(--text-dim);
}

.exp-card-val code {
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

.exp-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

@media (max-width: 960px) {
  .exp-regime-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .exp-regime-grid { grid-template-columns: 1fr; }
  .exp-card-row { flex-direction: column; gap: 2px; }
  .exp-card-label { width: auto; }
}

/* Pipeline flow diagram */
.pipeline-flow {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0;
}

.pipeline-node {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
  min-width: 140px;
}

.pipeline-node-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.pipeline-node-detail {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.pipeline-node.source {
  background: var(--blue-bg);
  border-color: var(--blue);
}
.pipeline-node.source .pipeline-node-title { color: var(--blue); }

.pipeline-node.script {
  background: rgba(155,108,217,0.12);
  border-color: var(--purple);
}
.pipeline-node.script .pipeline-node-title { color: var(--purple); }

.pipeline-node.data {
  background: var(--green-bg);
  border-color: var(--green);
}
.pipeline-node.data .pipeline-node-title { color: var(--green); }

.pipeline-node.intermediate {
  background: var(--cyan-bg);
  border-color: var(--cyan);
}
.pipeline-node.intermediate .pipeline-node-title { color: var(--cyan); }

.pipeline-node.output {
  background: var(--yellow-bg);
  border-color: var(--yellow);
}
.pipeline-node.output .pipeline-node-title { color: var(--yellow); }

/* Clickable pipeline nodes */
a.pipeline-node.clickable {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.pipeline-node.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
a.pipeline-node.clickable.source:hover { border-color: var(--blue); box-shadow: 0 4px 12px rgba(74,144,217,0.25); }
a.pipeline-node.clickable.script:hover { border-color: var(--purple); box-shadow: 0 4px 12px rgba(155,108,217,0.25); }
a.pipeline-node.clickable.data:hover { border-color: var(--green); box-shadow: 0 4px 12px rgba(76,175,122,0.25); }
a.pipeline-node.clickable.intermediate:hover { border-color: var(--cyan); box-shadow: 0 4px 12px rgba(74,197,217,0.25); }
a.pipeline-node.clickable.output:hover { border-color: var(--yellow); box-shadow: 0 4px 12px rgba(224,168,48,0.25); }

.pipeline-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 2px;
  background: var(--border);
  position: relative;
}

.pipeline-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Labeled arrow — wider to fit text */
.pipeline-arrow.pipeline-arrow-labeled {
  width: 80px;
}
.pipeline-arrow-label {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* Step badge in pipeline — links to log panel */
.pipeline-step-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  margin: 0 -4px;
  z-index: 1;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pipeline-step-badge:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(108,124,245,0.4);
}
.pipeline-step-num {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
/* Inline badge used in the explainer text */
.pipeline-step-badge-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
}

/* Pipeline convergence — shared merge point */
.pipeline-convergence {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px dashed var(--border);
  position: relative;
}
.pipeline-convergence .pipeline-flow {
  justify-content: center;
}
.pipeline-convergence-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}
.conv-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.conv-input {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: default;
}
.conv-input.conv-cyan {
  color: var(--cyan);
  background: var(--cyan-bg);
}
.conv-input.conv-blue {
  color: var(--blue);
  background: var(--blue-bg);
}
.conv-sep {
  color: var(--text-muted);
  font-size: 10px;
}

/* Collapsible infrastructure sections */
.infra-collapse-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

.infra-collapse-header h4 { margin-bottom: 0; }

.infra-collapse-toggle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

.infra-collapse-header.open .infra-collapse-toggle {
  transform: rotate(90deg);
}

.infra-collapse-body {
  display: none;
  margin-top: 12px;
}

.infra-collapse-body.open { display: block; }

/* Infrastructure tables */
.infra-table-wrap {
  overflow-x: auto;
}

.infra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.infra-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.infra-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

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

.infra-file-link {
  color: var(--accent);
  text-decoration: none;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
}

.infra-file-link:hover { text-decoration: underline; }

.infra-desc {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
  max-width: 400px;
}

.infra-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(108,124,245,0.12);
  color: var(--accent);
  white-space: nowrap;
}

.infra-cmd {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.infra-path {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  color: var(--text-dim);
}

.infra-dim { color: var(--text-muted); }

/* Reproduction steps */
.repro-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repro-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.repro-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.repro-cmd {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-input);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.repro-step-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  flex: 1;
}

.repro-desc {
  font-size: 12px;
  color: var(--text-dim);
}

/* Command log toggle button */
.cmd-log-toggle {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cmd-log-toggle:hover, .cmd-log-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Command log panel (expandable) */
.cmd-log-panel {
  display: none;
  margin: -4px 0 4px 36px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 12px;
}
.cmd-log-panel.open { display: block; }

.cmd-log-script {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.cmd-script-link {
  color: var(--accent);
  text-decoration: none;
}
.cmd-script-link:hover { text-decoration: underline; }

.cmd-log-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cmd-log-subtitle:first-child { margin-top: 0; }

/* Command log tables */
.cmd-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 8px;
}
.cmd-log-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  padding: 4px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.cmd-log-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(46,51,72,0.3);
  color: var(--text);
  vertical-align: top;
}
.cmd-log-table td.mono {
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--accent);
  font-weight: 600;
}
.cmd-log-table a {
  color: var(--accent);
  text-decoration: none;
}
.cmd-log-table a:hover { text-decoration: underline; }

/* Results grid */
.cmd-log-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 16px;
}
.cmd-result-item {
  display: flex;
  gap: 6px;
  padding: 3px 0;
}
.cmd-result-key {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.cmd-result-key::after { content: ":"; }
.cmd-result-val {
  color: var(--text);
  font-size: 11px;
  font-family: 'SF Mono', 'Menlo', monospace;
}

/* Collapsible log output */
.cmd-log-output-toggle {
  cursor: pointer;
  user-select: none;
}
.cmd-log-output-toggle:hover { color: var(--accent); }
.cmd-log-output-toggle .code-toggle {
  display: inline-block;
  transition: transform 0.15s;
  font-size: 10px;
  margin-right: 4px;
}
.cmd-log-output-toggle .code-toggle.open { transform: rotate(90deg); }

.cmd-log-output-body {
  display: none;
  margin-top: 6px;
  max-height: 400px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.cmd-log-output-body.open { display: block; }
.cmd-log-output-body pre {
  margin: 0;
  font-size: 11px;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Audit output */
.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.audit-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.audit-block h5 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.audit-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
}

.audit-kv-label { color: var(--text-dim); }
.audit-kv-value { color: var(--text); font-weight: 600; }

.audit-flags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-flag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.audit-flag-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* KaTeX overrides */
.katex { color: var(--text); }
.katex-display { margin: 0; }

/* Responsive */
@media (max-width: 768px) {
  .charts-row { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; }
  .filter-bar input[type="text"] { width: 100%; }
  .detail-panel { width: 96%; padding: 16px; }
  header { flex-direction: column; gap: 10px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .audit-grid { grid-template-columns: 1fr; }
  .pipeline-flow { flex-wrap: wrap; }
  .eval-pipeline { flex-direction: column; }
  .eval-pipeline-arrow { width: 2px; height: 12px; margin: 0 auto; }
  .eval-detail-grid { grid-template-columns: 1fr; }
}

/* ── Evaluation Log ─────────────────────────────────────────────────── */

.eval-log-section { border-top: 2px solid var(--accent-dim); }

.eval-log-intro {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Pipeline timeline */
.eval-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  overflow-x: auto;
}

.eval-pipeline-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: max-content;
}

.eval-pipeline-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.eval-pipeline-body { display: flex; flex-direction: column; gap: 2px; }
.eval-pipeline-action { font-size: 12px; font-weight: 500; }
.eval-pipeline-script { font-size: 11px; color: var(--accent); text-decoration: none; }
.eval-pipeline-script:hover { text-decoration: underline; }

.eval-pipeline-arrow {
  width: 20px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
}

/* Eval steps */
.eval-steps { display: flex; flex-direction: column; gap: 12px; }

.eval-step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg-card);
}
.eval-step-lean { border-left: 3px solid var(--blue); }
.eval-step-wolfram { border-left: 3px solid var(--orange); }
.eval-step-cross { border-left: 3px solid var(--green); }
.eval-step-flags { border-left: 3px solid var(--red); }

.eval-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.eval-phase-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.eval-phase-badge.lean { background: var(--blue-bg); color: var(--blue); }
.eval-phase-badge.wolfram { background: var(--orange-bg); color: var(--orange); }
.eval-phase-badge.cross { background: var(--green-bg); color: var(--green); }
.eval-phase-badge.flags { background: var(--red-bg); color: var(--red); }

.eval-step-result {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.eval-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  font-size: 12px;
}

.eval-meta-item { color: var(--text-dim); }
.eval-meta-item a { color: var(--accent); text-decoration: none; }
.eval-meta-item a:hover { text-decoration: underline; }
.eval-meta-item code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.eval-meta-label { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }

/* Lean scan detail cards */
.eval-detail-card {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.eval-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.eval-detail-header code { font-size: 12px; color: var(--accent); }

.eval-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12px;
  margin-bottom: 6px;
}
.eval-detail-grid a { color: var(--accent); text-decoration: none; }
.eval-detail-grid a:hover { text-decoration: underline; }
.eval-detail-grid .tactic {
  display: inline-block;
  padding: 1px 5px;
  background: var(--bg-card);
  border-radius: 3px;
  font-family: monospace;
  font-size: 10px;
  color: var(--text-dim);
}

.eval-reasoning {
  font-size: 12px;
  color: var(--green);
  font-style: italic;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Wolfram parse details */
.eval-detail-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.eval-detail-row:last-child { border-bottom: none; }

.eval-check-label { font-weight: 500; color: var(--text); margin-right: 8px; }

.eval-pattern {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-dim);
  margin-right: 6px;
}

.eval-matched { color: var(--yellow); font-weight: 500; }

.eval-ops { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Cross-verification checks */
.eval-xv-checks { display: flex; flex-direction: column; gap: 4px; }

.eval-xv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.eval-xv-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.eval-xv-icon.pass { background: var(--green-bg); color: var(--green); }
.eval-xv-icon.fail { background: var(--red-bg); color: var(--red); }

/* Flag generation details */
.eval-flag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.eval-flag-reason { color: var(--text-dim); }

.eval-empty { color: var(--text-muted); font-size: 12px; font-style: italic; }

.eval-raw {
  font-size: 11px;
  background: var(--bg);
  padding: 8px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  color: var(--text-dim);
}

/* ── Derivation / Explainer ─────────────────────────────────────────── */

.derivation-section { border-top: 2px solid var(--purple); }
.derivation-section h3 { display: flex; align-items: center; gap: 10px; }
.derivation-section h3 .badge { font-size: 10px; }

.deriv-source-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-sm);
}
.deriv-src-link {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: 'SF Mono', Menlo, monospace;
  text-decoration: none;
  transition: opacity 0.15s;
}
.deriv-src-link:hover { opacity: 0.8; text-decoration: underline; }
.deriv-src-wolfram  { background: var(--blue-bg); color: var(--blue); }
.deriv-src-lean     { background: rgba(155,108,217,0.2); color: var(--purple); }
.deriv-src-python   { background: var(--green-bg); color: var(--green); }
.deriv-src-pipeline { background: var(--yellow-bg); color: var(--yellow); }

/* Derivation LaTeX verification output */
.deriv-tex-output {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 3px solid var(--green);
  background: var(--bg-card-hover);
}
.deriv-tex-output.deriv-tex-fail { border-left-color: var(--red); }
.deriv-tex-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.deriv-tex-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.deriv-tex-pass .deriv-tex-badge { background: var(--green-bg); color: var(--green); }
.deriv-tex-fail .deriv-tex-badge { background: var(--red-bg); color: var(--red); }
.deriv-tex-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.deriv-tex-math {
  text-align: center;
  padding: 8px 0;
  overflow-x: auto;
}
.deriv-tex-msg {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
}

/* Derivation PDF viewer */
/* PDF action buttons (no inline embed) */
.deriv-pdf-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.deriv-pdf-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid rgba(96,165,250,0.25);
}
.deriv-pdf-btn:hover { opacity: 0.85; }
.deriv-pdf-btn-dl {
  background: var(--bg-card);
  color: var(--text-dim);
  border-color: var(--border);
}

/* === Interactive Visualization Section === */
.viz-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.viz-container.viz-single { grid-template-columns: 1fr; }
@media (max-width: 900px) { .viz-container { grid-template-columns: 1fr; } }

.viz-threejs-panel { min-width: 0; }
.viz-sagecell-panel { min-width: 0; }

.viz-canvas-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a0a12;
}
.viz-canvas {
  width: 100%;
  height: 400px;
  display: block;
}
.viz-canvas canvas { border-radius: var(--radius) var(--radius) 0 0; }

.viz-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.viz-toolbar button {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.viz-toolbar button:hover { color: var(--text); border-color: var(--accent); }
.viz-toolbar button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.viz-legend {
  font-size: 11px;
  padding: 6px 10px;
  color: var(--text-muted);
  line-height: 1.5;
}

.sage-cell-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sage-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.sage-cell-label { font-weight: 600; color: var(--text); }
.sage-cell-hint { color: var(--text-dim); font-style: italic; }

.sage-cell-container { padding: 0; }
.sage-cell-container .sagecell_editor { font-size: 12px !important; }
.sage-cell-container .sagecell_evalButton {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 16px !important;
  margin: 8px !important;
  cursor: pointer !important;
  font-size: 12px !important;
}
.sage-cell-container .sagecell_evalButton:hover { opacity: 0.9; }
.sage-cell-container .sagecell_output_area {
  max-height: 450px;
  overflow: auto;
  background: var(--bg-card);
  padding: 8px;
}
/* Override SageCell's CodeMirror theme for dark mode */
.sage-cell-container .CodeMirror {
  background: #1a1d27 !important;
  color: #e4e6f0 !important;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace !important;
}

/* WolframScript evaluation widget */
.wls-widget {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.wls-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.wls-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-right: auto;
}
/* Evaluation widget tabs */
.wls-tabs { display: flex; gap: 2px; }
.wls-tab-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.wls-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wls-tab-btn:hover:not(.active) { background: var(--bg-input); }
.wls-tab-panel { display: none; }
.wls-tab-panel.active { display: block; }
.wls-status-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.wls-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 10px 0 4px 0;
}
/* Wolfram Cloud button */
.wls-cloud-row { position: relative; margin-bottom: 8px; }
.wls-cloud-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,143,0,0.4);
  background: rgba(255,143,0,0.12);
  color: var(--orange);
  cursor: pointer;
}
.wls-cloud-btn:hover { background: rgba(255,143,0,0.2); }
.wls-cloud-code {
  display: none;
  width: 100%;
  height: 80px;
  margin-top: 6px;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  resize: vertical;
}
.wls-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.wls-pass { background: var(--green-bg); color: var(--green); }
.wls-fail { background: var(--red-bg); color: var(--red); }
.wls-pending { background: var(--yellow-bg); color: var(--yellow); }
.wls-body { padding: 12px 14px; }
.wls-info { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.5; }
.wls-pipeline { margin-bottom: 12px; }
.wls-pipeline-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.wls-pipeline-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}
.wls-step-num {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.wls-step-icon { font-size: 12px; flex-shrink: 0; width: 14px; text-align: center; }
.wls-step-label { color: var(--text-dim); }
.wls-op {
  font-size: 10px;
  background: rgba(96,165,250,0.12);
  color: var(--blue);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.wls-cmd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 4px;
  font-size: 12px;
  overflow-x: auto;
}
.wls-cmd code { color: var(--accent); }
.wls-run-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.wls-run-note a { color: var(--blue); }
.wls-actions { display: flex; gap: 8px; margin-top: 10px; }

.derivation-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.derivation-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.derivation-step.rich { border-left: 3px solid var(--purple); }
.derivation-step.comment { border-left: 3px solid var(--text-muted); }

.derivation-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.derivation-step-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  margin-top: 1px;
}

.derivation-step-body { flex: 1; font-size: 13px; }

.derivation-label { font-weight: 500; }
.derivation-text { color: var(--text-dim); font-style: italic; margin-top: 2px; font-size: 12px; }
.derivation-op { color: var(--accent); font-family: monospace; font-size: 11px; }

.derivation-check { font-weight: 600; }
.derivation-check.pass { color: var(--green); }
.derivation-check.fail { color: var(--red); }

.badge.derivation { background: rgba(155,108,217,0.12); color: var(--purple); }

/* ── PhysLean ───────────────────────────────────────────────────────── */

.badge.physlean { background: rgba(155,108,217,0.12); color: var(--purple); }

@media (max-width: 900px) {
  .xv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .xv-grid { grid-template-columns: 1fr; }
}

/* ── xAct ───────────────────────────────────────────────────────────── */

.badge.xact-unit { background: var(--blue-bg); color: var(--blue); }
.badge.xact-intg { background: var(--green-bg); color: var(--green); }
.badge.xact-core { background: var(--orange-bg); color: var(--orange); }
.badge.xact-app { background: rgba(155,108,217,0.12); color: var(--purple); }

/* ── Execution Results ────────────────────────────────────────────── */

.execution-results { border-top: 2px solid var(--blue); }

.exec-subsection {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
}
.exec-subsection h4 {
  font-size: 13px;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.exec-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.exec-check {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.exec-check.pass {
  background: var(--green-bg, rgba(74,222,128,0.1));
  color: var(--green);
}
.exec-check.fail {
  background: var(--red-bg, rgba(248,113,113,0.1));
  color: var(--red);
}
.exec-simplified {
  font-size: 12px;
  margin: 6px 0;
  color: var(--text-dim);
}
.exec-simplified code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.exec-file {
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0;
}
.exec-file .key {
  color: var(--text-muted);
}
.exec-failure {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--red-bg, rgba(248,113,113,0.08));
  border-radius: var(--radius-sm);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.exec-error {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red);
  margin-top: 4px;
}
.exec-timestamp {
  font-size: 10px;
  color: var(--text-muted);
}
.exec-theorem-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exec-theorem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.exec-theorem-check {
  color: var(--green);
  font-weight: bold;
}
.exec-theorem code {
  font-size: 11px;
}
.exec-status-badge {
  font-weight: 600;
  font-size: 12px;
}

/* Lean build theorem annotations */
.exec-theorem-section {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 3px;
}
.exec-theorem-annotation {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.exec-theorem-math {
  font-size: 11px;
  color: var(--accent);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Python detailed checks */
.exec-checks-detailed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.exec-check-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.exec-check-row.pass {
  background: var(--green-bg);
}
.exec-check-row.fail {
  background: var(--red-bg);
}
.exec-check-icon {
  font-weight: bold;
  width: 14px;
  text-align: center;
}
.exec-check-row.pass .exec-check-icon { color: var(--green); }
.exec-check-row.fail .exec-check-icon { color: var(--red); }
.exec-check-name {
  font-weight: 600;
  min-width: 90px;
}
.exec-check-desc {
  color: var(--text-muted);
  font-size: 11px;
}
.exec-simplified-block {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
}
.exec-simplified-block .key {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.exec-sympy-expr {
  display: block;
  font-size: 13px;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 3px;
  color: var(--accent);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ── Section Explainers ────────────────────────────────────────────── */

.section-explainer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
}

.section-explainer strong {
  color: var(--text-dim);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   Verification Pillars
   ══════════════════════════════════════════════════════════════════ */

#pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  #pillars-grid { grid-template-columns: 1fr; }
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s;
}
.pillar-card:hover { border-color: var(--accent-dim); }

.pillar-card.lean4  { border-left: 3px solid var(--green); }
.pillar-card.wolfram { border-left: 3px solid var(--orange); }
.pillar-card.python  { border-left: 3px solid var(--blue); }
.pillar-card.xact    { border-left: 3px solid var(--purple); }

.pillar-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.pillar-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.pillar-header h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.pillar-stat {
  font-size: 12px;
  font-weight: 500;
}

.pillar-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}
.pillar-desc strong { color: var(--text); }
.pillar-desc code {
  font-size: 11px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
}

.pillar-how {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.pillar-how-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.pillar-how p { margin: 0; }
.pillar-how code {
  font-size: 11px;
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   Verification Flow Diagram
   ══════════════════════════════════════════════════════════════════ */

.vflow-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
}

.vflow-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}

.vflow-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
}

.vflow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.vflow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 110px;
  padding: 12px 8px;
}

.vflow-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 2px solid var(--border);
  padding: 6px;
}
.vflow-icon svg { width: 32px; height: 32px; }

.vflow-stage.source .vflow-icon { color: var(--text-dim); border-color: var(--text-muted); }
.vflow-stage.parse .vflow-icon  { color: var(--accent); border-color: var(--accent-dim); }
.vflow-stage.verify .vflow-icon { color: var(--yellow); border-color: var(--yellow); }
.vflow-stage.cross .vflow-icon  { color: var(--green); border-color: var(--green); background: var(--green-bg); }

.vflow-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.vflow-detail {
  font-size: 11px;
  color: var(--text-muted);
}

.vflow-arrow {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vflow-arrow svg { width: 40px; height: 20px; }

@media (max-width: 700px) {
  .vflow-diagram { flex-direction: column; }
  .vflow-arrow { transform: rotate(90deg); width: 40px; height: 30px; }
}

/* ══════════════════════════════════════════════════════════════════
   Automatic Theorem Proving Explainer
   ══════════════════════════════════════════════════════════════════ */

.atp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}

.atp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .atp-columns { grid-template-columns: 1fr; }
}

.atp-text h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
}

.atp-text p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 10px;
}
.atp-text p:last-child { margin-bottom: 0; }
.atp-text strong { color: var(--text); }
.atp-text em { color: var(--accent); font-style: normal; }
.atp-text code {
  font-size: 11px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
}

/* Lean proof demo */
.atp-visual {
  display: flex;
  align-items: flex-start;
}

.atp-demo {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}

.atp-demo-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.atp-code {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  padding: 14px;
  margin: 0;
  color: var(--text-dim);
  overflow-x: auto;
}

.atp-kw { color: var(--purple); font-weight: 600; }
.atp-name { color: var(--green); }
.atp-type { color: var(--blue); }
.atp-tactic { color: var(--yellow); }

.atp-demo-steps {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
}

.atp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.atp-step:last-child { margin-bottom: 0; }
.atp-step strong { color: var(--text); }
.atp-step code {
  font-size: 11px;
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent);
}

.atp-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Comparison grid */
.atp-comparison {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.atp-comparison h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}

.atp-comparison > p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}
.atp-comparison > p strong { color: var(--text); }

.atp-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 800px) {
  .atp-compare-grid { grid-template-columns: repeat(2, 1fr); }
}

.atp-compare-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.atp-compare-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

.atp-compare-strength {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.atp-compare-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   EPT Definition Card
   ══════════════════════════════════════════════════════════════════ */

.ept-definition { margin-bottom: 28px; }

.ept-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  border-top: 3px solid var(--accent);
}

.ept-columns {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
}
@media (max-width: 900px) { .ept-columns { grid-template-columns: 1fr; } }

.ept-main h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.ept-tagline {
  font-size: 15px;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 20px;
}

.ept-eq-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.ept-eq {
  font-size: 20px;
  margin-bottom: 6px;
}

.ept-eq-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ept-main p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 10px;
}
.ept-main p:last-child { margin-bottom: 0; }
.ept-main strong { color: var(--text); }
.ept-main em { color: var(--accent); font-style: normal; }

/* EPT Sidebar: Key Results */
.ept-key-results {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.ept-key-results h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 12px;
  font-weight: 600;
}

.ept-result {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ept-result:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.ept-result-eq {
  font-size: 14px;
  margin-bottom: 4px;
}

.ept-result-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════
   Verification Pipeline (merged flow + failure modes)
   ══════════════════════════════════════════════════════════════════ */

.vpipe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}

.vpipe-card > h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.vpipe-intro {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 24px;
}
.vpipe-intro strong { color: var(--text); }

.vpipe-flow { margin-bottom: 28px; }

.vpipe-stage {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.vpipe-stage:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.vpipe-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.vpipe-stage-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vpipe-stage-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.vpipe-stage-desc strong { color: var(--text); }
.vpipe-stage-desc code {
  font-size: 11px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
}

.vpipe-example {
  margin-top: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vpipe-code {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 14px;
  margin: 0;
  color: var(--text-dim);
  overflow-x: auto;
}

.vpipe-example-note {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  line-height: 1.4;
}
.vpipe-example-note code {
  font-size: 11px;
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent);
}

.vpipe-data-flow {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.vpipe-data-flow h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.vpipe-flow-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   Paper Web Viewer
   ══════════════════════════════════════════════════════════════════ */

.paper-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.paper-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.paper-header h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.4;
}

.paper-author {
  font-size: 14px;
  color: var(--text);
}

.paper-affiliation {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.paper-abstract {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}

.paper-abstract h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 600;
}

.paper-abstract p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* Table of contents */
.paper-toc {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.paper-toc h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 12px;
  font-weight: 600;
}

.paper-toc-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (max-width: 800px) { .paper-toc-list { grid-template-columns: 1fr; } }

.paper-toc-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-dim);
  font-size: 12px;
  transition: background 0.15s;
}
.paper-toc-item:hover { background: var(--bg-card); color: var(--text); }

.paper-toc-num {
  color: var(--accent);
  font-weight: 700;
  min-width: 20px;
}

.paper-toc-title { flex: 1; }

.paper-toc-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Sections with equation cards */
.paper-sections { padding: 20px 28px; }

.paper-section {
  margin-bottom: 28px;
}
.paper-section:last-child { margin-bottom: 0; }

.paper-section h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.paper-sec-num {
  color: var(--accent);
  margin-right: 4px;
}

.paper-eq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 900px) { .paper-eq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .paper-eq-grid { grid-template-columns: 1fr; } }

.paper-eq-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.paper-eq-card:hover { border-color: var(--accent-dim); background: var(--bg-card-hover); }

.paper-eq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.paper-eq-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

.paper-eq-latex {
  font-size: 12px;
  overflow: hidden;
  margin-bottom: 4px;
  max-height: 60px;
}
.paper-eq-latex .katex { font-size: 0.85em; }

.paper-eq-name {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paper-eq-more {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

.paper-source {
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.paper-source a {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.paper-source a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   Inline Equation Detail Row
   ══════════════════════════════════════════════════════════════════ */

.eq-detail-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
}
.eq-detail-row:hover td {
  background: transparent !important;
}
.eq-table tr.eq-detail-row {
  cursor: default;
}
.eq-detail-inline {
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  max-width: min(100%, 1200px);
  box-sizing: border-box;
}
.eq-detail-inline .detail-header {
  margin-bottom: 10px;
}
.eq-detail-inline .detail-header h2 {
  font-size: 16px;
}
.eq-detail-inline .detail-latex {
  padding: 14px;
  margin: 8px 0 4px;
}
.eq-detail-inline .close-btn {
  float: right;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}
.eq-detail-inline .close-btn:hover {
  background: var(--bg-input);
  color: var(--text);
}
.eq-table tr.expanded td {
  background: var(--bg-card-hover) !important;
  border-bottom-color: var(--accent);
}

/* Log column link */
.log-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s;
}
.log-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(108,124,245,0.3);
}

/* Origin badges */
.origin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.origin-original {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(76,175,122,0.25);
}
.origin-modified {
  background: var(--yellow-bg);
  color: var(--yellow);
  border: 1px solid rgba(224,168,48,0.25);
}
.origin-referenced {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid rgba(74,144,217,0.25);
}

/* Kind badges */
.kind-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.kind-paper {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(76,175,122,0.25);
}
.kind-semantic {
  background: rgba(156,39,176,0.12);
  color: #ba68c8;
  border: 1px solid rgba(156,39,176,0.25);
}
.kind-infrastructure {
  background: rgba(255,152,0,0.12);
  color: #ffb74d;
  border: 1px solid rgba(255,152,0,0.25);
}
.col-kind { width: 70px; text-align: center; }

/* Paper reference entries */
.paper-refs {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.paper-ref-entry {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(46,51,72,0.4);
}
.paper-ref-entry:last-child { border-bottom: none; }
.paper-ref-key {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  min-width: 100px;
}
.paper-ref-body {
  color: var(--text-dim);
}
.paper-ref-body em {
  color: var(--text);
}
.ref-doi {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-dim);
  color: #fff;
  text-decoration: none;
  margin-left: 4px;
}
.ref-doi:hover {
  background: var(--accent);
}

/* Pipeline node: directory vs file distinction */
.pipeline-node.node-dir {
  border-style: dashed;
  border-width: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   Physics Examples — detail panel
   ══════════════════════════════════════════════════════════════════ */

.example-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.example-card:last-child { margin-bottom: 0; }

.example-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.example-header strong {
  font-size: 14px;
  color: var(--text);
}

.badge.example-qm     { background: var(--blue-bg);   color: var(--blue); }
.badge.example-gr      { background: rgba(155,108,217,0.12); color: var(--purple); }
.badge.example-thermo  { background: var(--yellow-bg); color: var(--yellow); }
.badge.example-em      { background: var(--green-bg);  color: var(--green); }
.badge.example-hydro   { background: var(--cyan-bg);   color: var(--cyan); }
.badge.example-qftcs   { background: rgba(155,108,217,0.25); color: #c89ef5; }

.example-paper {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.example-paper em { color: var(--text); font-style: italic; }
.example-paper-authors { color: var(--text); font-weight: 500; }

.example-sketch {
  margin-top: 10px;
  border-left: 3px solid var(--accent-dim);
  padding: 8px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-card-hover);
}
.example-sketch-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.example-sketch-body {
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  font-family: 'SF Mono', Menlo, monospace;
  white-space: pre-wrap;
}

/* ── Standalone Equation Page ────────────────────────────────────── */

.eq-page header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eq-page-home {
  color: inherit;
  text-decoration: none;
}
.eq-page-home:hover { opacity: 0.8; }
.eq-page-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.eq-page-nav a {
  color: var(--accent);
  text-decoration: none;
}
.eq-page-nav a:hover { text-decoration: underline; }
.eq-page-id {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.eq-page-prevnext {
  display: inline-flex;
  gap: 12px;
}
.eq-page-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 0 60px;
}
.eq-page-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.eq-page-detail .detail-header {
  margin-bottom: 16px;
}
.eq-page-detail .detail-accordions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   Interactive Simulations Section
   ═══════════════════════════════════════════════════════════════ */

/* Simulation navigation tabs */
.sims-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.sims-tab {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.sims-tab:hover { background: var(--bg-card-hover); color: var(--text); }
.sims-tab.active { background: var(--accent-dim); color: #fff; border-color: var(--accent); }

/* Simulation panel */
.sim-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.sim-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.sim-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.sim-wasm-badge {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card-hover);
  color: var(--text-dim);
  white-space: nowrap;
}
.sim-wasm-badge.js {
  border-color: #6c7cf5;
  color: #9aa4ff;
  background: rgba(108, 124, 245, 0.12);
}
.sim-wasm-badge.wasm {
  border-color: #4ac5d9;
  color: #7ee1f1;
  background: rgba(74, 197, 217, 0.15);
}
.sim-wasm-badge.loading {
  border-color: #e0a830;
  color: #e0a830;
  background: rgba(224, 168, 48, 0.15);
}
.sim-wasm-badge.error {
  border-color: #e07840;
  color: #e07840;
  background: rgba(224, 120, 64, 0.12);
}
.sim-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 900px;
}

/* View row: 3D + plots side by side */
.sim-view-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.sim-view-row-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* 3D canvas wrapper */
.sim-3d-wrap {
  min-width: 0;
  height: 420px;
  background: #0a0a12;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.sim-3d-wrap canvas {
  display: block;
  max-width: 100%;
}

/* Plot wrapper */
.sim-plot-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sim-plot-wrap canvas {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sim-plot-wide {
  min-height: 320px;
}

/* Controls row */
.sim-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.sim-toolbox {
  min-width: 240px;
  flex: 1 1 280px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--bg-card-hover);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sim-toolbox-title {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sim-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sim-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.sim-trace-log {
  margin: 4px 0 0;
  padding: 6px;
  max-height: 140px;
  overflow: auto;
  background: #0b0c12;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--text-dim);
  white-space: pre-wrap;
}
.sim-validation {
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* Slider */
.sim-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  flex: 1;
  max-width: 280px;
}
.sim-slider-label {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
}
.sim-slider-value {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sim-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
}
.sim-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
}

/* Transport buttons */
.sim-transport {
  display: flex;
  gap: 6px;
}
.sim-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.sim-btn:hover { color: var(--text); border-color: var(--accent); }
.sim-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .sim-view-row { grid-template-columns: 1fr; }
  .sim-view-row-triple { grid-template-columns: 1fr; }
  .sim-controls { flex-direction: column; }
  .sim-slider { max-width: 100%; }
  .sims-nav { gap: 4px; }
  .sims-tab { font-size: 11px; padding: 5px 10px; }
  .sim-script-editor { font-size: 11px; }
}

/* Script Automation Panel */
.sim-script-panel {
  background: #12121e;
  border: 1px solid #2a2a3e;
  border-radius: 6px;
  padding: 10px;
  margin-top: 6px;
}
.sim-script-editor {
  width: 100%;
  min-height: 180px;
  background: #0a0a14;
  color: #c8ccd4;
  border: 1px solid #2a2a3e;
  border-radius: 4px;
  padding: 8px;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
  margin: 6px 0;
  box-sizing: border-box;
}
.sim-script-editor:focus {
  outline: none;
  border-color: #4ac5d9;
}
.sim-script-editor::placeholder {
  color: #5a5e72;
}
.sim-script-output {
  background: #0a0a14;
  color: #a0a4b8;
  border: 1px solid #2a2a3e;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: auto;
  margin: 6px 0;
  min-height: 40px;
}
.sim-script-output div {
  white-space: pre-wrap;
  word-break: break-all;
}
.sim-script-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.sim-script-progress-bar {
  flex: 1;
  height: 6px;
  background: #1e1e2e;
  border-radius: 3px;
  overflow: hidden;
}
.sim-script-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ac5d9, #6c7cf5);
  border-radius: 3px;
  width: 0%;
  transition: width 0.15s ease;
}
.sim-script-progress-label {
  color: #8b8fa4;
  font-size: 11px;
  min-width: 80px;
  text-align: right;
}
.sim-script-mode-btn {
  font-size: 11px !important;
  padding: 3px 10px !important;
}

/* ── Fullscreen expand mode ─────────────────────────────────────────────── */
.sim-panel-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-card);
  padding: 24px 32px;
  box-sizing: border-box;
}
.sim-panel-fullscreen .sim-view-row {
  min-height: 45vh;
}
.sim-panel-fullscreen .sim-plot-wrap {
  min-height: 40vh;
}
.sim-panel-fullscreen .sim-3d-wrap {
  min-height: 50vh;
}
.sim-expand-btn {
  font-size: 14px !important;
  padding: 3px 8px !important;
  line-height: 1;
  min-width: 28px;
}

/* ── Python Shell widget ────────────────────────────────────────────────── */
.sim-shell-panel {
  background: #0c0c16;
  border: 1px solid #2a2a3e;
  border-radius: 6px;
  padding: 0;
  margin: 8px 0;
  overflow: hidden;
}
.sim-shell-output {
  background: #0a0a12;
  color: #c8ccd4;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  max-height: 320px;
  min-height: 60px;
  overflow-y: auto;
  border-bottom: 1px solid #1e1e2e;
}
.sim-shell-welcome {
  color: #6c7cf5;
  font-weight: 600;
  margin-bottom: 2px;
}
.sim-shell-help {
  color: #5a5e72;
  font-size: 11px;
  margin-bottom: 4px;
}
.sim-shell-line {
  white-space: pre-wrap;
  word-break: break-all;
}
.sim-shell-cmd {
  color: #e8e8f0;
}
.sim-shell-result {
  color: #4ac5d9;
}
.sim-shell-stdout {
  color: #a0a4b8;
}
.sim-shell-error {
  color: #e07840;
}
.sim-shell-info {
  color: #8b8fa4;
}
.sim-shell-pending {
  color: #5a5e72;
  font-style: italic;
}
.sim-shell-input-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 6px 10px;
  background: #0e0e1a;
}
.sim-shell-prompt {
  color: #4ac5d9;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding-top: 4px;
  flex-shrink: 0;
  user-select: none;
}
.sim-shell-input {
  flex: 1;
  background: transparent;
  color: #e8e8f0;
  border: none;
  outline: none;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 4px 0;
  resize: none;
  min-height: 22px;
}
.sim-shell-input::placeholder {
  color: #3a3e52;
}
.sim-shell-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-top: 1px solid #1e1e2e;
  background: #0c0c16;
}
.sim-shell-btn {
  font-size: 11px !important;
  padding: 3px 10px !important;
}

/* ── Equation Focus View ──────────────────────────────────────── */

.eq-focus-view {
  max-width: 1200px;
}

.eq-focus-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.eq-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.eq-focus-btn:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--accent-dim);
}
.eq-focus-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.eq-focus-position {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eq-focus-jump {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  max-width: 400px;
}

.eq-focus-counter {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.eq-focus-header {
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.eq-focus-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.eq-focus-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.eq-focus-fullpage {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 16px;
  padding: 4px;
}
.eq-focus-fullpage:hover { color: var(--accent); }

.eq-focus-section {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

.eq-focus-badges {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.eq-focus-latex {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 16px;
  overflow-x: auto;
}

.eq-focus-detail {
  border-left: 3px solid var(--accent);
  padding-left: 0;
}
.eq-focus-detail .close-btn { display: none; }
.eq-focus-detail .detail-header { display: none; }
.eq-focus-detail .detail-latex { display: none; }

.eq-focus-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: 14px;
}

/* ── View Mode Toggle Buttons ─────────────────────────────────── */

.eq-view-toggle {
  display: inline-flex;
  gap: 0;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.eq-view-btn {
  padding: 5px 12px;
  background: var(--bg-input);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.eq-view-btn:last-child { border-right: none; }
.eq-view-btn:hover { background: var(--bg-card-hover); }
.eq-view-btn.active {
  background: var(--accent);
  color: #fff;
}

.eq-view-icon {
  font-size: 14px;
}

/* ── Responsive: Focus View ───────────────────────────────────── */
@media (max-width: 768px) {
  .eq-focus-nav-bar {
    flex-direction: column;
    gap: 8px;
  }
  .eq-focus-jump {
    max-width: 100%;
    width: 100%;
  }
  .eq-focus-header {
    padding: 12px;
  }
}

/* ── DSL Section ──────────────────────────────────────────────── */

.dsl-metrics-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.dsl-metric {
  flex: 1;
  min-width: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.dsl-metric-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}
.dsl-metric-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Semantic layer cards */
.dsl-semantic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.dsl-semantic-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color 0.2s;
}
.dsl-semantic-card:hover {
  border-color: var(--accent-dim);
}
.dsl-semantic-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dsl-semantic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(108,124,245,0.15);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.dsl-semantic-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.dsl-semantic-name:hover { color: var(--accent); }
.dsl-semantic-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(155,108,217,0.15);
  color: var(--purple);
  white-space: nowrap;
}
.dsl-semantic-file {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dsl-semantic-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Gate status badges */
.gate-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.gate-proven {
  background: var(--green-bg);
  color: var(--green);
}
.gate-stub {
  background: var(--yellow-bg);
  color: var(--yellow);
}

/* PyDocs reference card */
.dsl-pydocs-card {
  border-left: 3px solid var(--cyan);
}
.dsl-pydocs-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dsl-pydocs-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dsl-pydocs-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
  min-width: 220px;
}
.dsl-pydocs-link:hover {
  border-color: var(--cyan);
  background: var(--bg-card-hover);
}
.dsl-pydocs-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.dsl-pydocs-github .dsl-pydocs-link-icon {
  background: rgba(74,144,217,0.15);
  color: var(--blue);
}
.dsl-pydocs-site .dsl-pydocs-link-icon {
  background: rgba(74,197,217,0.15);
  color: var(--cyan);
}
.dsl-pydocs-link-text {
  display: flex;
  flex-direction: column;
}
.dsl-pydocs-link-text strong {
  font-size: 13px;
}
.dsl-pydocs-link-text span {
  font-size: 11px;
  color: var(--text-dim);
}
.dsl-pydocs-topics h5,
.dsl-pydocs-stack h5 {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dsl-pydocs-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.dsl-pydocs-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s;
}
.dsl-pydocs-topic:hover {
  border-color: var(--cyan);
}
.dsl-pydocs-topic-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(74,197,217,0.12);
  color: var(--cyan);
  white-space: nowrap;
}
.dsl-pydocs-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dsl-pydocs-tech {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Documentation site navigation ───────────────────────────────────── */
.docs-site-card {
  border-left: 3px solid var(--accent, #60a5fa);
}
.docs-status-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: middle;
}
.docs-status-badge.docs-online {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.docs-status-badge.docs-offline {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.docs-base-label {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.docs-base-label code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.docs-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.docs-nav-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color 0.15s;
}
.docs-nav-card:hover {
  border-color: var(--accent, #60a5fa);
}
.docs-nav-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.docs-nav-card-header strong {
  font-size: 14px;
}
.docs-nav-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.4;
}
.docs-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.docs-nav-link {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  color: var(--accent, #60a5fa);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.docs-nav-link:hover {
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--accent, #60a5fa);
}
.docs-deep-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  color: var(--accent, #60a5fa);
  text-decoration: none;
  margin-left: 8px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.docs-deep-link:hover {
  opacity: 1;
  text-decoration: underline;
}
.docs-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Einstein Toolkit card ───────────────────────────────────────── */
.etk-card {
  border-left: 3px solid #f59e0b;
}
.etk-bridge-row {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.etk-bridge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .dsl-metrics-row { flex-direction: column; }
  .dsl-semantic-grid { grid-template-columns: 1fr; }
  .dsl-pydocs-links { flex-direction: column; }
  .dsl-pydocs-topic-grid { grid-template-columns: 1fr; }
  .docs-nav-grid { grid-template-columns: 1fr; }
  .etk-bridge-row { flex-direction: column; }
}

/* ── Unified Stack Architecture ──────────────────────────────────────────── */

/* Formal statement blockquote */
.stack-statement-card { border-left: 3px solid var(--accent); }

.stack-statement {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  font-style: italic;
}

.stack-statement strong { color: var(--accent); font-style: normal; }

/* Tables */
.stack-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.stack-table thead th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stack-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.stack-table tbody tr:hover { background: var(--bg-card-hover); }

.stack-table code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--cyan);
}

.stack-eq-id a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.stack-eq-id a:hover { text-decoration: underline; }

.stack-eq-math { white-space: nowrap; }

.stack-scale {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Coupling topology cards */
.stack-subsection {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 16px 0 10px;
}

.stack-coupling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stack-coupling-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  border-left: 3px solid var(--text-dim);
}

.stack-coupling-green  { border-left-color: var(--green); }
.stack-coupling-cyan   { border-left-color: var(--cyan); }
.stack-coupling-purple { border-left-color: var(--purple); }
.stack-coupling-yellow { border-left-color: var(--yellow); }
.stack-coupling-orange { border-left-color: var(--orange); }

.stack-coupling-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.stack-coupling-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.stack-coupling-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.stack-flow-row {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.stack-flow-dir {
  display: inline-block;
  width: 18px;
  color: var(--accent);
  font-weight: 700;
}

.stack-coupling-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.stack-file-link {
  font-size: 11px;
  color: var(--blue);
  text-decoration: none;
  font-family: 'SF Mono', 'Fira Code', monospace;
  word-break: break-all;
}

.stack-file-link:hover { text-decoration: underline; }

.stack-registry-tag {
  font-size: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ASCII coupling diagram */
.stack-ascii-diagram {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  overflow-x: auto;
  white-space: pre;
  margin-top: 8px;
}

/* SpacetimeCoupler formula */
.stack-formula-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 12px 0;
  text-align: center;
  font-size: 15px;
}

.stack-formula-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.stack-legend-item {
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.stack-legend-item strong { color: var(--text); }

.stack-design-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.stack-note {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.stack-note-label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  font-size: 11px;
}

/* Self-consistency protocol steps */
.stack-protocol-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.stack-step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--text);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stack-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Coupling mode badges */
.stack-mode-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stack-mode {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stack-mode-label {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  margin-right: 8px;
}

/* Config table compactness */
.stack-table-config tbody td:first-child {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .stack-coupling-grid { grid-template-columns: 1fr; }
  .stack-table { font-size: 11px; }
  .stack-ascii-diagram { font-size: 9px; }
}