/* ==============================================================================
   CipherVault Terminal & TUI Design System — High Legibility & Refined Motion
   Themes: Cyber (Neon Phosphor) | Dark (Minimal Slate) | Light (Clean Paper) | Mono (Stark B&W)
   ============================================================================== */

/* --- Theme 1: Cyber (Default Terminal Cyberdeck) --- */
:root,
html[data-theme="cyber"] {
  --term-bg: #06080d;
  --term-surface: #0b0e17;
  --term-surface-elev: #121824;
  --term-surface-card: #0e131f;
  --term-border: rgba(255, 255, 255, 0.08);
  --term-border-bright: rgba(255, 255, 255, 0.16);
  --term-border-focus: #00f0ff;

  --term-cyan: #00f0ff;
  --term-cyan-glow: rgba(0, 240, 255, 0.22);
  --term-gold: #ffb000;
  --term-gold-glow: rgba(255, 176, 0, 0.22);
  --term-mint: #00ff9d;
  --term-mint-glow: rgba(0, 255, 157, 0.22);
  --term-danger: #ff4d5e;
  --term-danger-subtle: rgba(255, 77, 94, 0.12);
  --term-warning: #ffaa00;
  --term-purple: #c084fc;

  /* Ultra-Crisp Whitening & High-Contrast Slates */
  --text-main: #ffffff;
  --text-secondary: #f1f5f9;
  /* Radiant Slate-100: effortlessly legible */
  --text-muted: #cbd5e1;
  /* Bright Slate-300: clear secondary metadata */
  --text-dim: #94a3b8;
  /* Slate-400: sharp timestamps & labels */

  --code-bg: #030407;
  --scanline-opacity: 0;
  /* Default OFF: razor-sharp typography */

  /* Muted Pastels (Desaturated for Dark Deck) */
  --pastel-red-bg: rgba(253, 235, 236, 0.12);
  --pastel-red-text: #fca5a5;
  --pastel-blue-bg: rgba(225, 243, 254, 0.12);
  --pastel-blue-text: #93c5fd;
  --pastel-green-bg: rgba(237, 243, 236, 0.12);
  --pastel-green-text: #86efac;
  --pastel-yellow-bg: rgba(251, 243, 219, 0.12);
  --pastel-yellow-text: #fde047;
  --pastel-purple-bg: rgba(243, 232, 255, 0.12);
  --pastel-purple-text: #d8b4fe;
}

/* --- Theme 2: Clean Minimal Dark (Slate / Charcoal) --- */
html[data-theme="dark"] {
  --term-bg: #0c1017;
  --term-surface: #151b23;
  --term-surface-elev: #1f2631;
  --term-surface-card: #151b23;
  --term-border: rgba(255, 255, 255, 0.08);
  --term-border-bright: rgba(255, 255, 255, 0.16);
  --term-border-focus: #60a5fa;

  --term-cyan: #60a5fa;
  --term-cyan-glow: rgba(96, 165, 250, 0.18);
  --term-gold: #f59e0b;
  --term-gold-glow: rgba(245, 158, 11, 0.18);
  --term-mint: #10b981;
  --term-mint-glow: rgba(16, 185, 129, 0.18);
  --term-danger: #ef4444;
  --term-danger-subtle: rgba(239, 68, 68, 0.10);
  --term-warning: #f59e0b;
  --term-purple: #a855f7;

  /* Pure White & Bright Slate */
  --text-main: #ffffff;
  --text-secondary: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;

  --code-bg: #090d13;
  --scanline-opacity: 0;

  --pastel-red-bg: rgba(253, 235, 236, 0.10);
  --pastel-red-text: #f87171;
  --pastel-blue-bg: rgba(225, 243, 254, 0.10);
  --pastel-blue-text: #60a5fa;
  --pastel-green-bg: rgba(237, 243, 236, 0.10);
  --pastel-green-text: #34d399;
  --pastel-yellow-bg: rgba(251, 243, 219, 0.10);
  --pastel-yellow-text: #fbbf24;
  --pastel-purple-bg: rgba(243, 232, 255, 0.10);
  --pastel-purple-text: #c084fc;
}

/* --- Theme 3: Crisp Paper Light (Warm Monochrome Editorial per protocol) --- */
html[data-theme="light"] {
  --term-bg: #F8F9FA;
  --term-surface: #FFFFFF;
  --term-surface-elev: #F1F3F5;
  --term-surface-card: #FFFFFF;
  --term-border: #E2E8F0;
  --term-border-bright: rgba(15, 23, 42, 0.16);
  --term-border-focus: #0F172A;

  --term-cyan: #026AA2;
  --term-cyan-glow: rgba(2, 106, 162, 0.08);
  --term-gold: #8C5800;
  --term-gold-glow: rgba(140, 88, 0, 0.08);
  --term-mint: #166534;
  --term-mint-glow: rgba(22, 101, 52, 0.08);
  --term-danger: #B42318;
  --term-danger-subtle: #FEE4E2;
  --term-warning: #B54708;
  --term-purple: #5925DC;

  /* High-Legibility Editorial Typography: Razor-sharp ink with WCAG AAA contrast */
  --text-main: #0F172A;
  /* Rich Slate-900 / Deep Ink */
  --text-secondary: #334155;
  /* Slate-700: High-contrast body copy */
  --text-muted: #475467;
  /* Slate-600: Crisp secondary metadata */
  --text-dim: #64748B;
  /* Slate-500: Clear legible labels & timestamps */

  --code-bg: #F8FAFC;
  --scanline-opacity: 0;

  /* Protocol Spot Pastels with WCAG AA compliant text */
  --pastel-red-bg: #FEE4E2;
  --pastel-red-text: #B42318;
  --pastel-blue-bg: #E0F2FE;
  --pastel-blue-text: #026AA2;
  --pastel-green-bg: #DCFCE7;
  --pastel-green-text: #166534;
  --pastel-yellow-bg: #FEF9C3;
  --pastel-yellow-text: #854D0E;
  --pastel-purple-bg: #F3E8FF;
  --pastel-purple-text: #6B21A8;
}

/* --- Theme 4: Monochrome (High-Contrast Pure Black & White) --- */
html[data-theme="mono"] {
  --term-bg: #000000;
  --term-surface: #0a0a0a;
  --term-surface-elev: #141414;
  --term-surface-card: #0a0a0a;
  --term-border: rgba(255, 255, 255, 0.12);
  --term-border-bright: rgba(255, 255, 255, 0.22);
  --term-border-focus: #ffffff;

  --term-cyan: #ffffff;
  --term-cyan-glow: rgba(255, 255, 255, 0.15);
  --term-gold: #e5e5e5;
  --term-gold-glow: rgba(229, 229, 229, 0.15);
  --term-mint: #d4d4d4;
  --term-mint-glow: rgba(212, 212, 212, 0.15);
  --term-danger: #ef4444;
  --term-danger-subtle: rgba(239, 68, 68, 0.12);
  --term-warning: #a3a3a3;
  --term-purple: #ffffff;

  --text-main: #ffffff;
  --text-secondary: #f4f4f5;
  --text-muted: #d4d4d8;
  --text-dim: #a1a1aa;

  --code-bg: #000000;
  --scanline-opacity: 0;

  --pastel-red-bg: rgba(255, 255, 255, 0.08);
  --pastel-red-text: #ffffff;
  --pastel-blue-bg: rgba(255, 255, 255, 0.08);
  --pastel-blue-text: #ffffff;
  --pastel-green-bg: rgba(255, 255, 255, 0.08);
  --pastel-green-text: #ffffff;
  --pastel-yellow-bg: rgba(255, 255, 255, 0.08);
  --pastel-yellow-text: #ffffff;
  --pastel-purple-bg: rgba(255, 255, 255, 0.08);
  --pastel-purple-text: #ffffff;
}

/* Common Variables & Protocol Typography */
:root {
  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
  --font-body: 'SF Pro Display', 'Geist', 'Helvetica Neue', 'Switzer', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Newsreader', 'Playfair Display', 'Lyon Text', 'Instrument Serif', Georgia, serif;

  --t-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ==============================================================================
   Reset & Base Typography Standards
   ============================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--term-bg);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-normal), color var(--t-normal);
}

body.tui-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--term-bg);
  background-image: radial-gradient(1200px 500px at 50% -60px, rgba(0, 240, 255, 0.04), transparent 70%);
  color: var(--text-main);
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--t-normal), color var(--t-normal);
}

html[data-theme="dark"] body.tui-body {
  background-image: radial-gradient(1200px 500px at 50% -60px, rgba(96, 165, 250, 0.04), transparent 70%);
}

html[data-theme="light"] body.tui-body {
  background-image: radial-gradient(1200px 500px at 50% -60px, rgba(2, 132, 199, 0.04), transparent 70%);
}

html[data-theme="mono"] body.tui-body {
  background-image: none;
}

/* Accessibility: Honor user motion preference */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Headings with clear contrast & editorial serif typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

p {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
}

/* Monospace overrides for all code & TUI elements */
code,
pre,
.tui-code,
.tui-prompt,
.install-cmd-code,
.spec-val,
.key-shortcut,
.tui-brand,
.tui-tabs-bar {
  font-family: var(--font-mono);
}

.crt-scanlines {
  display: none !important;
}

/* Terminal Shell Frame */
.terminal-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  border-left: 1px solid var(--term-border);
  border-right: 1px solid var(--term-border);
  background: var(--term-bg);
  position: relative;
  box-sizing: border-box;
  transition: border-color var(--t-normal), background-color var(--t-normal);
}

/* ==============================================================================
   Unified 2-Tier Terminal Masthead (Pristine Organization & Zero Text Clipping)
   ============================================================================== */
.tui-masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(11, 14, 23, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--term-border);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.3);
  transition: background-color var(--t-normal), border-color var(--t-normal);
}

html[data-theme="dark"] .tui-masthead {
  background: rgba(15, 21, 30, 0.85);
}

html[data-theme="light"] .tui-masthead {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

html[data-theme="mono"] .tui-masthead {
  background: rgba(10, 10, 10, 0.9);
}

/* --- Tier 1: Global Identity, Live Quorum Status & Utilities --- */
.tui-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 32px;
  background: transparent;
  border-bottom: 1px solid var(--term-border);
  gap: 16px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tui-brand {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.tui-brand:hover {
  opacity: 0.9;
}

.brand-bracket {
  display: none;
}

.brand-highlight {
  color: var(--text-main);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-title {
  color: var(--text-main);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-tag {
  font-size: 0.66rem;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tui-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

.tui-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  animation: pulse-dot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Minimalist Segmented Controls (View Mode & Theme) */
.view-mode-switcher-box,
.theme-switcher-box {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 2px;
  border-radius: 6px;
  gap: 1px;
  flex-shrink: 0;
}

.mode-pill-btn,
.theme-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.mode-pill-btn:hover,
.theme-pill-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.mode-pill-btn.active,
.theme-pill-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .view-mode-switcher-box,
html[data-theme="light"] .theme-switcher-box {
  background: rgba(0, 0, 0, 0.03);
  border-color: #EAEAEA;
}

html[data-theme="light"] .mode-pill-btn,
html[data-theme="light"] .theme-pill-btn {
  color: #64748b;
}

html[data-theme="light"] .mode-pill-btn:hover,
html[data-theme="light"] .theme-pill-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .mode-pill-btn.active,
html[data-theme="light"] .theme-pill-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Minimal Ghost Action Buttons */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tui-ext-btn,
.tui-git-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.tui-ext-btn:hover,
.tui-git-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.tui-ext-btn:active,
.tui-git-btn:active {
  transform: scale(0.98);
}

html[data-theme="light"] .tui-ext-btn,
html[data-theme="light"] .tui-git-btn {
  color: #64748b;
}

html[data-theme="light"] .tui-ext-btn:hover,
html[data-theme="light"] .tui-git-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

.tui-donate-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.tui-donate-btn:hover {
  color: #fca5a5;
  background: rgba(244, 63, 94, 0.08);
}

.tui-donate-btn:active {
  transform: scale(0.98);
}

html[data-theme="light"] .tui-donate-btn {
  color: #64748b;
}

html[data-theme="light"] .tui-donate-btn:hover {
  color: #9F2F2D;
  background: var(--pastel-red-bg);
}

.tui-donate-btn .donate-heart {
  color: #f43f5e;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tui-donate-btn:hover .donate-heart {
  transform: scale(1.15);
}

.ext-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}

/* Mobile Topbar Navigation Controls (Hidden on Desktop) */
.topbar-mobile-controls {
  display: none !important;
}

.tui-mobile-hamburger {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}

.tui-mobile-hamburger:hover {
  background: var(--term-surface-card);
  border-color: var(--term-border-bright);
}

.hamburger-box {
  width: 18px;
  height: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 18px;
  height: 2px;
  background-color: var(--term-cyan);
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.22s ease;
  position: absolute;
}

.hamburger-inner {
  top: 6px;
}

.hamburger-inner::before {
  content: '';
  top: -6px;
}

.hamburger-inner::after {
  content: '';
  bottom: -6px;
}

/* Morph to X when active */
.tui-mobile-hamburger.active .hamburger-inner {
  background-color: transparent;
}

.tui-mobile-hamburger.active .hamburger-inner::before {
  transform: translateY(6px) rotate(45deg);
}

.tui-mobile-hamburger.active .hamburger-inner::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==============================================================================
   Mobile Navigation Drawer (Clean, Minimalist & Grouped)
   ============================================================================== */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.mobile-nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(350px, 88vw);
  background: var(--term-bg);
  border-left: 1px solid var(--term-border-bright);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.drawer-scroller {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 18px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--term-border);
}

.drawer-brand {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
}

.btn-close-drawer {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-close-drawer:hover {
  color: var(--term-danger);
  border-color: var(--term-danger);
}

.drawer-status-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--term-mint);
}

.drawer-section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--term-gold);
  margin-bottom: 8px;
}

.drawer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-tab-btn {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: all var(--t-fast);
  width: 100%;
}

.drawer-tab-btn:hover {
  background: var(--term-surface-elev);
  border-color: var(--term-border-bright);
}

.drawer-tab-btn.active {
  background: var(--term-surface-elev);
  border-color: var(--term-cyan);
  box-shadow: 0 0 12px var(--term-cyan-glow);
}

.d-tab-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--term-gold);
}

.drawer-tab-btn.active .d-tab-num {
  color: var(--term-cyan);
}

.d-tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.d-tab-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.d-tab-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.d-tab-arrow {
  color: var(--text-dim);
  font-size: 0.8rem;
  transition: transform var(--t-fast);
}

.drawer-tab-btn.active .d-tab-arrow,
.drawer-tab-btn:hover .d-tab-arrow {
  color: var(--term-cyan);
  transform: translateX(3px);
}

.drawer-themes-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.drawer-theme-pill {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 6px 0;
  text-align: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.drawer-theme-pill.active {
  background: var(--term-surface-elev);
  border-color: var(--term-border-bright);
  color: var(--term-cyan);
  font-weight: 700;
}

.drawer-crt-btn {
  width: 100%;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: all var(--t-fast);
}

.drawer-crt-btn:hover {
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

.drawer-actions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-action-btn.primary-donate {
  width: 100%;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all var(--t-fast);
}

.drawer-action-btn.primary-donate:hover {
  background: rgba(244, 63, 94, 0.22);
  border-color: #f43f5e;
}

.drawer-links-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.drawer-link-btn {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--t-fast);
}

.drawer-link-btn:hover {
  background: var(--term-surface-elev);
  border-color: var(--term-border-bright);
  color: var(--text-main);
}

.drawer-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--term-border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  text-align: center;
}

/* --- Tier 2: Primary Navigation Deck --- */
.tui-navdeck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 32px;
  background: transparent;
  gap: 20px;
}

.tui-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}

.tui-tabs-bar::-webkit-scrollbar {
  display: none;
}

.tui-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--t-fast);
  position: relative;
}

.tui-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.tui-tab-btn:active {
  transform: scale(0.98);
}

.tui-tab-btn.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.09);
  font-weight: 600;
  border: none;
  box-shadow: none;
}

.tui-tab-btn.active .tab-label {
  color: #ffffff;
  font-weight: 600;
}

.key-shortcut {
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 400;
  font-family: var(--font-mono);
  opacity: 0.45;
}

.tui-tab-btn.active .key-shortcut {
  color: #ffffff;
  opacity: 0.75;
}

.tab-label {
  font-size: 0.80rem;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

html[data-theme="light"] .tui-tab-btn {
  color: #64748b;
}

html[data-theme="light"] .tui-tab-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .tui-tab-btn.active {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
  box-shadow: none;
}

html[data-theme="light"] .tui-tab-btn.active .tab-label {
  color: #0f172a;
}

html[data-theme="light"] .key-shortcut {
  color: #94a3b8;
}

html[data-theme="light"] .tui-tab-btn.active .key-shortcut {
  color: #0f172a;
  opacity: 0.85;
}

.navdeck-shortcuts-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

kbd,
.tui-kbd {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--term-cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] kbd,
html[data-theme="light"] .tui-kbd {
  background: #F7F6F3;
  border: 1px solid #EAEAEA;
  color: #111111;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.hint-sep {
  color: var(--term-border-bright);
}

/* ==============================================================================
   Workspace Layout (Centered, Minimal & Spacious 1200px Canvas)
   ============================================================================== */
.tui-workspace-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  align-items: center;
}

.tui-main-panel {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 40px 100px;
  transition: background-color var(--t-normal);
}

.tui-pane {
  display: none;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.tui-pane.active {
  display: block;
  animation: pane-fade-in 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Card Base with Generous Padding & Depth */
.tui-box {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  padding: 30px 32px;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color var(--t-fast), background-color var(--t-normal), transform var(--t-fast), box-shadow var(--t-fast);
}

.tui-box:hover {
  border-color: var(--term-border-bright);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .tui-box {
  background: #FFFFFF;
  border-color: #EAEAEA;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .tui-box:hover {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tui-box-title {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--term-gold);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--term-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tui-box-title .title-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: normal;
}


/* Engine Telemetry Grid & Stream */
.engine-telemetry-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  margin-top: 36px;
}

.sidebar-stream-box,
.engine-stream-box {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.stream-pulse {
  color: var(--term-mint);
  animation: pulse-dot 1.5s infinite;
}

.tui-stream-feed {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  line-height: 1.55;
  color: var(--text-secondary);
  max-height: 280px;
}

.stream-line {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--term-border);
  padding-left: 12px;
  transition: all var(--t-fast);
}

.stream-line.new {
  border-left-color: var(--term-cyan);
  background: var(--term-surface-elev);
  animation: stream-slide 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stream-slide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stream-time {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 500;
}

.stream-msg {
  color: var(--text-main);
  font-weight: 500;
}

/* Fleet Node List */
.fleet-node-item {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--term-border);
}

.fleet-node-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.node-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
}

.node-dot.active {
  color: var(--term-mint);
}

.node-id {
  flex: 1;
  margin-left: 10px;
  color: var(--text-main);
  font-weight: 600;
  font-family: var(--font-mono);
}

.node-ping {
  color: var(--term-gold);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.node-ping.down {
  color: var(--term-warning);
}

.node-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 20px;
  font-family: var(--font-body);
  margin-top: 2px;
}

/* Subtle cyber laser-line sweep when pane activates */
.tui-pane.active::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--term-cyan) 50%, transparent 100%);
  opacity: 0.85;
  animation: laser-sweep 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes laser-sweep {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* Staggered entrance for all pane children */
.tui-pane.active>* {
  animation: tui-element-enter 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.tui-pane.active>*:nth-child(1) {
  animation-delay: 20ms;
}

.tui-pane.active>*:nth-child(2) {
  animation-delay: 80ms;
}

.tui-pane.active>*:nth-child(3) {
  animation-delay: 160ms;
}

.tui-pane.active>*:nth-child(4) {
  animation-delay: 240ms;
}

.tui-pane.active>*:nth-child(5) {
  animation-delay: 320ms;
}

.tui-pane.active>*:nth-child(6) {
  animation-delay: 400ms;
}

@keyframes tui-element-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Minimal Hero Kicker Tag */
.hero-kicker-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--term-border);
  padding: 4px 14px;
  border-radius: 9999px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
  transition: border-color var(--t-fast);
}

.hero-kicker-strip:hover {
  border-color: var(--term-border-bright);
}

.hero-status-dot {
  color: var(--term-mint);
  font-size: 0.65rem;
  animation: pulse-dot 2s infinite ease-in-out;
  text-shadow: 0 0 6px var(--term-mint-glow);
}

.hero-kicker-title {
  color: var(--term-cyan);
  font-weight: 700;
}

.hero-kicker-divider {
  color: var(--term-border-bright);
  font-weight: normal;
}

.hero-kicker-lead {
  color: var(--text-dim);
  font-weight: 600;
}

/* Hero Thesis */
.hero-thesis-box {
  margin-bottom: 34px;
}

.hero-core-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
  color: var(--text-main);
}

.hero-core-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 800px;
}

.tui-code {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--term-border);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: var(--term-gold);
  font-size: 0.88em;
  font-weight: 600;
}

/* Quick Install Terminal Bar & Hero Deck */
.tui-quick-install {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 36px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.tui-quick-install:hover {
  border-color: var(--term-border-bright);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.install-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-target-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hero-target-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.hero-target-pill:hover {
  border-color: var(--term-border-bright);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
}

.hero-target-pill.active {
  background: rgba(255, 176, 0, 0.12);
  border-color: rgba(255, 176, 0, 0.35);
  color: var(--term-gold);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.install-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.os-label-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--term-mint);
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
}

.install-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
}

.install-bar-body {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast);
}

.tui-prompt {
  color: var(--term-cyan);
  font-weight: 700;
  font-size: 1.05rem;
  user-select: none;
}

.install-cmd-code {
  flex: 1;
  font-size: 0.96rem;
  color: var(--text-main);
  overflow-x: auto;
  white-space: nowrap;
  font-weight: 600;
  font-family: var(--font-mono);
}

.tui-btn-copy {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.tui-btn-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

.tui-btn-copy:active {
  transform: scale(0.98);
}

.tui-copy-alert {
  position: absolute;
  bottom: -28px;
  right: 28px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--term-mint);
  opacity: 0;
  transform: translateY(-4px);
  transition: all var(--t-fast);
  pointer-events: none;
}

.tui-copy-alert.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Fast-Action CTAs & Zero-Knowledge Trust Strip */
.hero-actions-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--term-border);
  flex-wrap: wrap;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tui-btn-action {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.tui-btn-action:active {
  transform: scale(0.98);
}

.tui-btn-action.secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
}

.tui-btn-action.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

.tui-btn-action.primary-gold {
  background: rgba(255, 176, 0, 0.12);
  border: 1px solid rgba(255, 176, 0, 0.4);
  color: var(--term-gold);
  font-weight: 700;
}

.tui-btn-action.primary-gold:hover {
  background: var(--term-gold);
  color: #06080d;
}

.tui-btn-action.primary-gold:active {
  transform: scale(0.98);
}

html[data-theme="light"] .tui-btn-action.primary-gold {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
  box-shadow: none;
}

html[data-theme="light"] .tui-btn-action.primary-gold:hover {
  background: #333333;
  color: #FFFFFF;
  border-color: #333333;
}

html[data-theme="light"] .tui-btn-action.secondary {
  background: #FFFFFF;
  border-color: #EAEAEA;
  color: #2F3437;
}

html[data-theme="light"] .tui-btn-action.secondary:hover {
  background: #F9F9F8;
  color: #111111;
  border-color: rgba(0, 0, 0, 0.15);
}

.hero-trust-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-dot {
  font-size: 0.65rem;
}

.badge-dot.green {
  color: var(--term-mint);
  text-shadow: 0 0 6px var(--term-mint-glow);
}

.badge-dot.cyan {
  color: var(--term-cyan);
  text-shadow: 0 0 6px var(--term-cyan-glow);
}

.badge-dot.gold {
  color: var(--term-gold);
  text-shadow: 0 0 6px var(--term-gold-glow);
}

/* Sequential Next Pane Walkthrough Bottom Pagers */
.pane-pager-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 40px;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast);
}

.pane-pager-bar:hover {
  border-color: var(--term-border-bright);
}

.pane-pager-bar.split {
  justify-content: space-between;
}

.pager-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pane-pager-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast);
}

.pane-pager-btn:active {
  transform: scale(0.98);
}

.pane-pager-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

.pane-pager-btn.next {
  border-color: rgba(255, 176, 0, 0.4);
  color: var(--term-gold);
  background: rgba(255, 176, 0, 0.08);
}

.pane-pager-btn.next:hover {
  background: rgba(255, 176, 0, 0.16);
  border-color: var(--term-gold);
  box-shadow: 0 0 10px var(--term-gold-glow);
}

.pane-pager-btn.prev {
  color: var(--text-muted);
}

.pane-pager-btn.top {
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--term-cyan);
  background: rgba(0, 240, 255, 0.08);
}

.pane-pager-btn.top:hover {
  background: rgba(0, 240, 255, 0.16);
  box-shadow: 0 0 10px var(--term-cyan-glow);
}

/* Four Minimalist Architectural Capability Pillars */
.tui-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}

@media (max-width: 1024px) {
  .tui-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .tui-pillars-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.pillar-card {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  user-select: none;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover {
  border-color: var(--term-border-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pillar-card:focus-visible {
  outline: 2px solid var(--term-gold);
  outline-offset: 2px;
}

.pillar-card.is-open {
  border-color: var(--term-border-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .pillar-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .pillar-card:hover {
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .pillar-card.is-open {
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.pillar-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 22px;
}

.pillar-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.pillar-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.badge-mint {
  background: var(--pastel-green-bg);
  border: 1px solid rgba(0, 255, 157, 0.25);
  color: var(--term-mint);
}

.badge-cyan {
  background: var(--pastel-blue-bg);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--term-cyan);
}

.badge-purple {
  background: var(--pastel-purple-bg);
  border: 1px solid rgba(192, 132, 252, 0.25);
  color: var(--term-purple);
}

.badge-gold {
  background: var(--pastel-yellow-bg);
  border: 1px solid rgba(255, 176, 0, 0.25);
  color: var(--term-gold);
}

html[data-theme="light"] .badge-mint {
  background: #EDF3EC;
  border: 1px solid rgba(52, 101, 56, 0.2);
  color: #2E6930;
}

html[data-theme="light"] .badge-cyan {
  background: #E1F3FE;
  border: 1px solid rgba(31, 108, 159, 0.2);
  color: #1F6C9F;
}

html[data-theme="light"] .badge-purple {
  background: #F3E8FF;
  border: 1px solid rgba(107, 33, 168, 0.2);
  color: #6B21A8;
}

html[data-theme="light"] .badge-gold {
  background: #FEF9C3;
  border: 1px solid rgba(161, 98, 7, 0.2);
  color: #854D0E;
}

.pillar-title {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  min-height: 1.4em;
}

.pillar-stat-line {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}

.pillar-val {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pillar-lbl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.35;
}

/* Pillar Interactive Toggle Bar */
.pillar-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 180ms ease, border-color 180ms ease;
}

.pillar-card:hover .pillar-toggle-bar {
  color: var(--text-main);
  border-top-color: var(--term-border-bright);
}

.pillar-card.is-open .pillar-toggle-bar {
  color: var(--term-gold);
  border-top-color: var(--term-border-bright);
}

html[data-theme="light"] .pillar-toggle-bar {
  border-top-color: #E2E8F0;
  color: #475467;
}

html[data-theme="light"] .pillar-card:hover .pillar-toggle-bar {
  color: #0F172A;
  border-top-color: #CBD5E1;
}

html[data-theme="light"] .pillar-card.is-open .pillar-toggle-bar {
  color: #0F172A;
  border-top-color: #CBD5E1;
}

.pillar-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: currentColor;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card.is-open .pillar-chevron {
  transform: rotate(180deg);
}

/* Dropdown Animation using CSS Grid 0fr -> 1fr with opacity */
.pillar-dropdown-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms ease,
    margin-top 240ms ease;
  opacity: 0;
  margin-top: 0;
}

.pillar-dropdown-inner {
  overflow: hidden;
  min-height: 0;
  cursor: default;
  user-select: text;
}

.pillar-card.is-open .pillar-dropdown-drawer {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

.pillar-card .pillar-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--term-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

html[data-theme="light"] .pillar-card .pillar-desc {
  background: #F8FAFC;
  border-left-color: #0F172A;
  color: #334155;
}

/* Compatibility Utilities */
.step-pill,
.term-out-line {
  display: inline-block;
}

/* ==============================================================================
   Pane 2: The Dilemma
   ============================================================================== */
.pane-header-wrap {
  margin-bottom: 36px;
}

.pane-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--term-gold);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.pane-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.pane-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.68;
  max-width: 880px;
}

/* ==============================================================================
   Pane 2: The Dilemma — Interactive 3D Flashcard Deck
   ============================================================================== */
.flashcards-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.flashcards-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flashcards-icon {
  color: var(--term-gold);
  font-weight: 700;
}

.flashcards-actions {
  display: flex;
  gap: 8px;
}

.flashcard-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.flashcard-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

.flashcard-action-btn:active {
  transform: scale(0.98);
}

html[data-theme="light"] .flashcard-action-btn {
  background: #FFFFFF;
  border-color: #EAEAEA;
  color: #2F3437;
}

html[data-theme="light"] .flashcard-action-btn:hover {
  background: #F9F9F8;
  color: #111111;
  border-color: rgba(0, 0, 0, 0.15);
}

/* 3D Flashcard Grid */
.dilemma-flashcard-deck,
.dilemma-tui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 800px) {

  .dilemma-flashcard-deck,
  .dilemma-tui-grid {
    grid-template-columns: 1fr;
  }
}

.flashcard-item {
  perspective: 1200px;
  min-height: 250px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  outline: none;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 250px;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: var(--radius-lg);
}

.flashcard-item.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--term-border);
  background: var(--term-surface);
  padding: 26px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.flashcard-face:hover {
  border-color: var(--term-border-bright);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .flashcard-face {
  background: #FFFFFF;
  border-color: #EAEAEA;
}

.flashcard-back {
  transform: rotateY(180deg);
  background: var(--term-surface-elev);
}

html[data-theme="light"] .flashcard-back {
  background: #F9F9F8;
}

.border-danger {
  border-top: 2px solid var(--term-danger);
}

.border-warning {
  border-top: 2px solid var(--term-warning);
}

.border-cyan {
  border-top: 2px solid var(--term-cyan);
}

.border-purple {
  border-top: 2px solid var(--term-purple);
}

.border-mint {
  border-top: 2px solid var(--term-mint);
}

.flashcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.flashcard-status-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.flashcard-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  margin-bottom: 10px;
}

.flashcard-body {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.flashcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--term-border);
  gap: 10px;
}

.flashcard-hint-text {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: var(--text-dim);
  font-weight: 500;
}

.flashcard-flip-prompt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--term-cyan);
  font-weight: 700;
  letter-spacing: 0.02em;
}

html[data-theme="light"] .flashcard-flip-prompt {
  color: #1F6C9F;
}

.dilemma-badge {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
}

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

.badge-warning {
  background: rgba(255, 170, 0, 0.12);
  color: var(--term-warning);
}

.badge-cyan {
  background: rgba(0, 240, 255, 0.12);
  color: var(--term-cyan);
}

.badge-purple {
  background: rgba(192, 132, 252, 0.12);
  color: var(--term-purple);
  display: block;
  margin-bottom: 4px;
}

.dilemma-fix p {
  color: var(--text-main);
  margin: 0;
}

/* Dual-Engine Architecture Selector / Bridge Banner */
.engine-dual-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-left: 4px solid var(--term-cyan);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all var(--t-fast);
}

.engine-dual-banner .dual-banner-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.engine-dual-banner .dual-banner-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.engine-dual-banner .dual-banner-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--term-cyan);
  letter-spacing: 0.05em;
}

.engine-dual-banner .dual-banner-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.engine-dual-banner .dual-banner-text strong {
  color: var(--text-main);
  font-weight: 700;
}

.engine-dual-banner .dual-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.engine-dual-banner .dual-banner-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.engine-dual-banner .dual-jump-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--term-gold);
  color: var(--term-gold);
  background: rgba(255, 176, 0, 0.08);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t-fast);
}

.engine-dual-banner .dual-jump-btn .jump-arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}

.engine-dual-banner .dual-jump-btn:hover {
  background: var(--term-gold);
  color: var(--term-bg);
  box-shadow: 0 0 12px var(--term-gold-glow);
  transform: translateY(-1px);
}

.engine-dual-banner .dual-jump-btn:hover .jump-arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .engine-dual-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .engine-dual-banner .dual-banner-right {
    align-items: flex-start;
    width: 100%;
  }

  .engine-dual-banner .dual-jump-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==============================================================================
   Pane 3: FastCDC Simulator (Interactive Slicer & Metadata Inspector)
   ============================================================================== */
.engine-fastcdc-demo {
  margin-bottom: 36px;
}

.engine-fastcdc-demo .box-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.engine-fastcdc-demo .box-title-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.analogy-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.28);
  color: var(--term-cyan);
  letter-spacing: 0.03em;
}

.cdc-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  color: var(--term-mint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
}

.pulse-dot-mini {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--term-mint);
  box-shadow: 0 0 6px var(--term-mint);
  animation: pulse-dot 1.8s infinite;
}

.fastcdc-sim-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Analogy Notice Box & Expandable Dropdown */
.analogy-notice-box {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-left: 3px solid var(--term-cyan);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  transition: all var(--t-fast);
}

.analogy-notice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.analogy-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.12);
  color: var(--term-cyan);
  border: 1px solid rgba(0, 240, 255, 0.25);
  white-space: nowrap;
}

.analogy-lead {
  flex: 1;
  min-width: 260px;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.analogy-toggle-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--term-gold);
  background: transparent;
  border: 1px solid var(--term-border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast);
}

.analogy-toggle-btn:hover {
  background: var(--term-surface-card);
  border-color: var(--term-gold);
}

.analogy-toggle-btn .toggle-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.analogy-expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.analogy-expandable-content.open {
  max-height: 300px;
  opacity: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--term-border);
}

.analogy-expl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.expl-col {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.expl-col-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--term-gold);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.expl-col p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.45;
}

/* Presets Strip */
.sim-presets-deck {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  padding: 12px 18px;
  border-radius: var(--radius-md);
}

.presets-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.presets-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.preset-pill {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.preset-pill:hover {
  background: var(--term-surface-card);
  color: var(--text-main);
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

.preset-pill.active {
  background: rgba(255, 176, 0, 0.12);
  border-color: var(--term-gold);
  color: var(--term-gold);
  box-shadow: 0 0 10px var(--term-gold-glow);
  font-weight: 700;
  transform: translateY(-1px);
}

/* Terminal Editor Shell */
.sim-editor-shell {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.editor-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--term-surface-elev);
  border-bottom: 1px solid var(--term-border);
}

.window-decor-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.window-decor-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red {
  background: #ff5f56;
}

.dot-yellow {
  background: #ffbd2e;
}

.dot-green {
  background: #27c93f;
}

.editor-file-path {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.editor-meta-tags {
  display: flex;
  gap: 8px;
}

.editor-tag-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  background: var(--term-surface-card);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--term-border);
  font-weight: 600;
}

.sim-editor-inner {
  display: flex;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.75;
}

.editor-gutter {
  display: flex;
  flex-direction: column;
  color: var(--text-dim);
  margin-right: 18px;
  padding-right: 14px;
  border-right: 1px solid var(--term-border);
  user-select: none;
  text-align: right;
  opacity: 0.7;
}

.editor-gutter .active-line {
  color: var(--term-gold);
  font-weight: 800;
  opacity: 1;
}

.editor-code-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.code-line-dim {
  color: var(--text-dim);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-line-active {
  display: flex;
  align-items: center;
  background: rgba(0, 240, 255, 0.07);
  border-left: 3px solid var(--term-cyan);
  padding: 4px 10px;
  margin: 4px -10px;
  border-radius: 4px;
  flex-wrap: wrap;
  gap: 4px;
}

.code-key {
  color: var(--term-mint);
  font-weight: 700;
  white-space: nowrap;
}

.sim-input {
  flex: 1;
  min-width: 200px;
  background: transparent;
  border: none;
  color: var(--term-cyan);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  outline: none;
  margin-left: 2px;
}

.code-cursor-blink {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: var(--term-cyan);
  animation: blink-block 1s infinite;
  margin-left: 2px;
  flex-shrink: 0;
}

.editor-live-badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--term-cyan);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: auto;
  user-select: none;
  white-space: nowrap;
}

/* Chunk Grid Header & Legend */
.chunk-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.grid-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--term-gold);
  letter-spacing: 0.04em;
}

.grid-sub-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: normal;
  letter-spacing: normal;
}

.chunk-legend {
  display: flex;
  gap: 16px;
  align-items: center;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-dot.green {
  background: var(--term-mint);
}

.legend-dot.amber {
  background: var(--term-gold);
}

/* Chunk Visual Grid */
.chunk-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  padding: 18px;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
}

.chunk-cell {
  height: 56px;
  background: rgba(0, 255, 157, 0.06);
  border: 1px solid rgba(0, 255, 157, 0.28);
  color: var(--term-mint);
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
  gap: 2px;
}

.chunk-cell .chunk-index {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.chunk-cell .chunk-size-tag {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 600;
}

.chunk-cell:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--term-mint);
  background: rgba(0, 255, 157, 0.16);
  box-shadow: 0 4px 14px var(--term-mint-glow);
}

.chunk-cell.modified {
  background: rgba(255, 176, 0, 0.18);
  border-color: var(--term-gold);
  color: var(--term-gold);
  box-shadow: 0 0 14px var(--term-gold-glow);
  animation: pulse-mod 1.5s infinite alternate;
}

.chunk-cell.modified .chunk-size-tag {
  color: var(--term-gold);
  font-weight: 700;
}

.chunk-cell.selected {
  outline: 2px solid var(--term-cyan);
  outline-offset: 2px;
}

.chunk-cell.ripple {
  animation: chunk-ripple 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Live Chunk Inspector Card */
.chunk-inspector-card {
  background: var(--term-surface);
  border: 1px solid var(--term-border-bright);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--term-border);
}

.inspector-chunk-id {
  display: flex;
  align-items: center;
  gap: 12px;
}

.insp-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.insp-pill.mod {
  background: rgba(255, 176, 0, 0.15);
  border: 1px solid var(--term-gold);
  color: var(--term-gold);
}

.insp-pill.cached {
  background: rgba(0, 255, 157, 0.12);
  border: 1px solid var(--term-mint);
  color: var(--term-mint);
}

.insp-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-main);
}

.insp-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.hash-code {
  color: var(--term-cyan);
  background: var(--code-bg);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--term-border);
  font-family: var(--font-mono);
}

.inspector-details-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.insp-detail-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insp-detail-cell .d-label {
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.insp-detail-cell .d-val {
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.82rem;
}

/* KPI Metric Cards Strip */
.chunk-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.chunk-kpi-card {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--t-fast);
}

.chunk-kpi-card:hover {
  border-color: var(--term-border-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.kpi-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.kpi-val {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.kpi-sub {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ==============================================================================
   Interactive Cryptographic Dataflow Pipeline Canvas & Deep-Dive Inspector
   ============================================================================== */
.engine-pipeline-box {
  margin-bottom: 40px;
  position: relative;
}

.engine-pipeline-box .tui-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--term-border);
}

.pipeline-main-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--term-gold);
}

.pipeline-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pipeline-status-text {
  font-size: 0.76rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#btn-run-pipeline-sim {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 176, 0, 0.08);
  border: 1px solid var(--term-gold);
  color: var(--term-gold);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#btn-run-pipeline-sim:hover {
  background: var(--term-gold);
  color: #000000;
  box-shadow: 0 0 14px var(--term-gold-glow);
  transform: translateY(-1px);
}

#btn-run-pipeline-sim:active {
  transform: scale(0.98);
}

#btn-run-pipeline-sim:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* The Visual Pipeline Canvas */
.pipeline-visual-canvas {
  background: var(--code-bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pipeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.pipeline-row-connector {
  display: flex;
  justify-content: flex-end;
  padding-right: 14%;
  width: 100%;
}

/* Individual Stage Node Card */
.pipeline-node {
  flex: 1;
  min-width: 210px;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 18px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  outline: none;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pipeline-node:hover {
  transform: translateY(-3px);
  border-color: var(--term-border-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pipeline-node:focus-visible {
  border-color: var(--term-cyan);
  box-shadow: 0 0 14px var(--term-cyan-glow);
}

.pipeline-node.active {
  border-color: var(--term-cyan);
  background: var(--term-surface-elev);
  box-shadow: 0 0 20px var(--term-cyan-glow), inset 0 0 10px rgba(0, 240, 255, 0.08);
}

.pipeline-node.simulating {
  border-color: var(--term-gold) !important;
  box-shadow: 0 0 25px var(--term-gold-glow) !important;
  transform: scale(1.03) translateY(-2px);
  animation: node-pulse-sim 0.6s infinite alternate;
}

@keyframes node-pulse-sim {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}

.node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.node-stage-badge {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--term-cyan);
  letter-spacing: 0.06em;
}

.node-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--term-mint);
  box-shadow: 0 0 6px var(--term-mint);
  transition: all 200ms ease;
}

.pipeline-node.active .node-pulse-dot {
  background: var(--term-cyan);
  box-shadow: 0 0 10px var(--term-cyan);
  transform: scale(1.2);
}

.node-title {
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-sub {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  margin-top: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.node-inspect-hint {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--term-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--t-fast);
}

.pipeline-node:hover .node-inspect-hint {
  color: var(--text-main);
  border-top-color: var(--term-border-bright);
}

.pipeline-node.active .node-inspect-hint {
  color: var(--term-gold);
  border-top-color: rgba(255, 176, 0, 0.4);
  font-weight: 700;
}

/* Connectors & Moving Flow Particles */
.pipeline-connector {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.connector-line {
  width: 48px;
  height: 3px;
  background: var(--term-border-bright);
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
}

.flow-particle {
  position: absolute;
  top: -1px;
  left: 0;
  width: 14px;
  height: 5px;
  border-radius: 9999px;
  background: var(--term-cyan);
  box-shadow: 0 0 8px var(--term-cyan);
  animation: flow-forward 1.8s infinite ease-in-out;
}

.conn-reverse .flow-particle {
  animation: flow-backward 1.8s infinite ease-in-out;
  background: var(--term-gold);
  box-shadow: 0 0 8px var(--term-gold);
}

.flow-p2 { animation-delay: 0.3s; }
.flow-p4 { animation-delay: 0.3s; }
.flow-p5 { animation-delay: 0.6s; }

.flow-arrow {
  color: var(--term-cyan);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

.conn-reverse .flow-arrow {
  color: var(--term-gold);
}

/* Vertical Row Connector */
.conn-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.connector-line-v {
  width: 3px;
  height: 26px;
  background: var(--term-border-bright);
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
}

.flow-particle-v {
  position: absolute;
  top: 0;
  left: -1px;
  width: 5px;
  height: 12px;
  border-radius: 9999px;
  background: var(--term-cyan);
  box-shadow: 0 0 8px var(--term-cyan);
  animation: flow-downward 1.5s infinite ease-in-out;
  animation-delay: 0.5s;
}

.flow-arrow-v {
  color: var(--term-cyan);
  font-size: 0.78rem;
  line-height: 1;
}

@keyframes flow-forward {
  0% { transform: translateX(-16px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(52px); opacity: 0; }
}

@keyframes flow-backward {
  0% { transform: translateX(52px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(-16px); opacity: 0; }
}

@keyframes flow-downward {
  0% { transform: translateY(-12px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(28px); opacity: 0; }
}

/* --- Deep-Dive Pop-Up Inspector Panel --- */
.pipeline-inspector-panel {
  background: var(--term-surface);
  border: 1px solid var(--term-border-bright);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: inspector-fade-in 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

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

.inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--term-border);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.inspector-title-wrap {
  min-width: 0;
  flex: 1;
}

.inspector-kicker {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--term-gold);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 176, 0, 0.1);
  border: 1px solid rgba(255, 176, 0, 0.25);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.inspector-heading {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.btn-close-inspector {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-close-inspector:hover {
  color: var(--text-main);
  background: var(--term-surface-card);
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

.btn-close-inspector:active {
  transform: scale(0.98);
}

.inspector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.inspector-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.insp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.insp-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.insp-body {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.68;
  margin: 0;
  word-break: break-word;
}

.insp-mechanics-box {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-left: 3px solid var(--term-cyan);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.insp-security-box {
  background: rgba(255, 176, 0, 0.05);
  border: 1px solid rgba(255, 176, 0, 0.2);
  border-left: 3px solid var(--term-gold);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.esc-kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--term-border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
}

.insp-stat-badge {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
}

.insp-stat-val {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.insp-stat-desc {
  font-size: 0.80rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 500;
}

.insp-code-block {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--term-cyan);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  scrollbar-width: thin;
}

.insp-code-block code {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: pre;
  word-break: normal;
}

/* Quick Jump Stage Navigation Pills in Inspector */
.inspector-stage-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--term-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.pills-label {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.stage-nav-pill {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.stage-nav-pill:hover {
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

.stage-nav-pill.active {
  color: var(--term-cyan);
  border-color: var(--term-cyan);
  background: rgba(0, 240, 255, 0.12);
  font-weight: 700;
  box-shadow: 0 0 10px var(--term-cyan-glow);
}

/* Responsive Pipeline Layout */
@media (max-width: 1024px) {
  .pipeline-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .pipeline-node {
    min-width: 0;
    width: 100%;
  }

  .pipeline-row-connector {
    justify-content: center;
    padding-right: 0;
    margin: 6px 0;
  }

  .conn-horizontal {
    transform: rotate(90deg);
    margin: 8px 0;
    align-self: center;
  }

  .inspector-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ==============================================================================
   Pane 4: Measured Performance Gauges
   ============================================================================== */
.benchmark-gauges-box {
  margin-bottom: 36px;
}

.bench-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bench-title-main {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--term-gold);
  letter-spacing: 0.08em;
}

.bench-harness-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 500;
}

.bench-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bench-live-result {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--term-mint);
  margin-top: 10px;
  min-height: 1.2em;
}

.bench-live-result:empty {
  display: none;
}

.bench-filter-pills {
  display: flex;
  gap: 6px;
}

.bench-pill {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.bench-pill:hover {
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

.bench-pill.active {
  background: var(--term-surface-elev);
  border-color: var(--term-cyan);
  color: var(--term-cyan);
  font-weight: 700;
}

.bench-rerun-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--term-cyan);
  color: var(--term-cyan);
  font-size: 0.74rem;
  padding: 5px 12px;
}

.bench-rerun-btn:hover {
  background: var(--term-cyan);
  color: #06080d;
  box-shadow: 0 0 12px var(--term-cyan-glow);
}

.bench-rerun-btn.running {
  animation: pulse-dot 0.8s infinite;
  opacity: 0.75;
}

.benchmark-gauges-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gauge-row {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.gauge-row:hover {
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

.gauge-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gauge-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gauge-name {
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 700;
}

.gauge-compare-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.gauge-compare-pill.tag-gold {
  background: rgba(255, 176, 0, 0.12);
  border: 1px solid rgba(255, 176, 0, 0.3);
  color: var(--term-gold);
}

.gauge-compare-pill.tag-mint {
  background: rgba(0, 255, 157, 0.12);
  border: 1px solid rgba(0, 255, 157, 0.3);
  color: var(--term-mint);
}

.gauge-compare-pill.tag-cyan {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--term-cyan);
}

.gauge-val-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.gauge-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.gauge-baseline-val {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
}

.gauge-bar-track {
  width: 100%;
  height: 16px;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.track-ticks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.track-ticks .tick {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--term-border);
  opacity: 0.6;
}

.track-ticks .t-25 {
  left: 25%;
}

.track-ticks .t-50 {
  left: 50%;
}

.track-ticks .t-75 {
  left: 75%;
}

.gauge-baseline-marker {
  position: absolute;
  top: -2px;
  height: calc(100% + 4px);
  width: 3px;
  background: var(--term-danger);
  z-index: 3;
  box-shadow: 0 0 6px var(--term-danger);
  cursor: help;
}

.gauge-bar-fill {
  height: 100%;
  border-radius: 1px;
  width: 0%;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  box-shadow: 0 0 14px currentColor;
}

.gauge-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  animation: gauge-shimmer 2.2s infinite ease-in-out;
  pointer-events: none;
}

.gauge-detail-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  padding-top: 4px;
}

.baseline-legend {
  color: var(--text-muted);
}

.bench-summary-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--term-border);
}

.summary-pill {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.summary-dot {
  font-size: 0.65rem;
}

.summary-dot.green {
  color: var(--term-mint);
  text-shadow: 0 0 6px var(--term-mint-glow);
}

.summary-dot.cyan {
  color: var(--term-cyan);
  text-shadow: 0 0 6px var(--term-cyan-glow);
}

.fill-gold {
  background: var(--term-gold);
  color: var(--term-gold);
}

.fill-mint {
  background: var(--term-mint);
  color: var(--term-mint);
}

.fill-cyan {
  background: var(--term-cyan);
  color: var(--term-cyan);
}

/* TUI Table */
.tui-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  text-align: left;
}

.tui-table th,
.tui-table td {
  padding: 16px 20px;
  border: 1px solid var(--term-border);
}

.tui-table th {
  background: var(--term-surface-elev);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.tui-table td {
  color: var(--text-secondary);
  font-weight: 450;
  line-height: 1.6;
}

.tui-table td strong {
  color: var(--text-main);
  font-weight: 700;
}

.col-highlight {
  background: var(--term-surface-elev);
  border-left-color: var(--term-cyan);
  border-right-color: var(--term-cyan);
  font-weight: 600;
}

/* ==============================================================================
   Pane 5: Sovereign Disaster Recovery & High-Availability
   ============================================================================== */
.sovereign-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.sov-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.sov-icon {
  font-size: 0.82rem;
}

.card-accent-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  width: fit-content;
}

.card-accent-tag.tag-gold {
  background: rgba(255, 176, 0, 0.1);
  color: var(--term-gold);
  border: 1px solid rgba(255, 176, 0, 0.25);
}

.card-accent-tag.tag-mint {
  background: rgba(0, 255, 157, 0.1);
  color: var(--term-mint);
  border: 1px solid rgba(0, 255, 157, 0.25);
}

.accent-dot {
  font-size: 0.65rem;
}

.accent-dot.gold {
  color: var(--term-gold);
  text-shadow: 0 0 6px var(--term-gold-glow);
}

.accent-dot.mint {
  color: var(--term-mint);
  text-shadow: 0 0 6px var(--term-mint-glow);
}

.recovery-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.recovery-box {
  display: flex;
  flex-direction: column;
}

.recovery-desc {
  font-size: 0.94rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.6;
}

/* Method A: Paper Recovery Kit Voucher Card */
.paper-kit-voucher-card {
  background: var(--code-bg);
  border: 1px dashed var(--term-border-bright);
  padding: 20px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  transition: border-color var(--t-fast);
}

.paper-kit-voucher-card:hover {
  border-color: var(--term-gold);
}

.voucher-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--term-border);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.voucher-serial {
  display: flex;
  gap: 8px;
  align-items: center;
}

.voucher-serial .v-label {
  color: var(--text-dim);
}

.voucher-serial .v-val {
  color: var(--term-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.seal-badge {
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  color: var(--term-mint);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.voucher-secret-display {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 14px 0 12px;
}

.secret-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.secret-field-name {
  color: var(--text-dim);
  font-weight: 600;
}

.secret-crc-badge {
  color: var(--term-mint);
  font-weight: 700;
  background: rgba(0, 255, 157, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

.voucher-key-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.key-slot {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border-bright);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--term-gold);
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  user-select: all;
}

.key-slot.masked {
  color: var(--text-dim);
  letter-spacing: 0.14em;
  user-select: none;
}

.key-slot-sep {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 700;
  user-select: none;
}

.voucher-actions-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.voucher-copy-toast {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--term-mint);
  background: rgba(0, 255, 157, 0.1);
  border: 1px solid var(--term-mint);
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  text-align: center;
  animation: voucher-toast-fade 0.25s ease;
}

.voucher-copy-toast.show {
  display: block;
}

@keyframes voucher-toast-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.voucher-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--term-border);
}

.v-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.v-step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--term-gold);
  background: rgba(255, 176, 0, 0.1);
  border: 1px solid rgba(255, 176, 0, 0.25);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 1px;
}

.v-step-text strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Method B: Shamir Workstation Card */
.shamir-workstation-card {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 20px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shamir-inst-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--term-border);
}

.shamir-inst-title {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.shamir-kicker {
  color: var(--term-cyan);
  font-weight: 700;
}

.shamir-badge {
  color: var(--term-gold);
  font-weight: 700;
  font-size: 0.74rem;
  background: rgba(255, 176, 0, 0.08);
  border: 1px solid rgba(255, 176, 0, 0.25);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.shamir-guardians-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.shamir-guardian-box {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all var(--t-fast);
  min-width: 0;
  position: relative;
  user-select: none;
  outline: none;
}

.shamir-guardian-box:hover {
  border-color: var(--term-border-bright);
  background: var(--term-surface-elev);
  transform: translateY(-2px);
}

.shamir-guardian-box:focus-visible {
  outline: 2px solid var(--term-border-focus);
  outline-offset: 1px;
}

.shamir-guardian-box.selected {
  border-color: var(--term-mint);
  background: rgba(0, 255, 157, 0.07);
  box-shadow: 0 0 10px var(--term-mint-glow);
}

/* Visually conceal native checkbox, but keep it accessible for screen readers & native events */
.tui-guardian-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

.custom-check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--term-border-bright);
  background: var(--term-surface-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
}

.shamir-guardian-box:hover .custom-check-box {
  border-color: var(--term-mint);
}

.shamir-guardian-box.selected .custom-check-box {
  background: var(--term-mint);
  border-color: var(--term-mint);
  box-shadow: 0 0 8px var(--term-mint-glow);
}

.check-icon {
  display: none;
  font-size: 11px;
  font-weight: 900;
  color: #05080f;
  line-height: 1;
}

.shamir-guardian-box.selected .check-icon {
  display: block;
}

.guardian-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.guardian-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.guardian-idx {
  color: var(--term-cyan);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.guardian-role {
  font-size: 0.68rem;
  color: var(--term-gold);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

.guardian-name {
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guardian-share {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shamir Math HUD */
.shamir-math-hud {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
}

.hud-status-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.hud-badge {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.hud-text {
  color: var(--text-secondary);
}

.shamir-terminal-output {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 52px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 1.5;
}

.shamir-terminal-output.calculating {
  border-color: var(--term-gold);
  color: var(--term-gold);
  background: rgba(255, 176, 0, 0.08);
  box-shadow: 0 0 16px var(--term-gold-glow);
  animation: shamir-calc-pulse 0.6s infinite alternate;
}

@keyframes shamir-calc-pulse {
  from {
    opacity: 0.75;
  }

  to {
    opacity: 1;
  }
}

.shamir-terminal-output.solved {
  color: var(--term-mint);
  border-color: var(--term-mint);
  background: rgba(0, 255, 157, 0.08);
  box-shadow: 0 0 18px var(--term-mint-glow);
  animation: shamir-solve-flash 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shamir-solve-flash {
  0% {
    transform: scale(0.99);
    box-shadow: 0 0 25px var(--term-mint);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 18px var(--term-mint-glow);
  }
}

.shamir-actions-bar {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

/* Symmetrical Bottom Feature Strips */
.recovery-feature-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.recovery-feat-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--t-fast);
}

.recovery-feat-pill:hover {
  border-color: var(--term-border-bright);
  background: var(--term-surface-elev);
}

.recovery-feat-pill .feat-icon {
  font-weight: 800;
  font-size: 0.92rem;
}

/* Method C: Passphrase-Wrapped Vault-Key Backup (CVKB1) */
.recovery-box-cvkb {
  margin-top: 28px;
  background: var(--term-surface-card);
  border: 1px solid var(--term-border);
  position: relative;
  transition: border-color var(--t-fast);
}

.recovery-box-cvkb:hover {
  border-color: var(--term-cyan);
}

.cvkb-interactive-card {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
}

.cvkb-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--term-border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.cvkb-tag-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.cvkb-kicker {
  color: var(--term-cyan);
  font-weight: 700;
}

.cvkb-spec-badge {
  color: var(--term-mint);
  font-weight: 700;
  font-size: 0.72rem;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.cvkb-simulator-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cvkb-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cvkb-input-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.cvkb-input-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cvkb-text-input {
  flex: 1;
  min-width: 260px;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: all var(--t-fast);
}

.cvkb-text-input:focus {
  border-color: var(--term-cyan);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.15);
}

.cvkb-derived-details {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.cvkb-detail-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cvkb-detail-row .detail-label {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.cvkb-detail-row .detail-val {
  word-break: break-all;
  font-size: 0.82rem;
}

.cvkb-restore-cmd-box {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  position: relative;
}

.restore-cmd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}

.restore-cmd-code-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text-main);
  overflow-x: auto;
}

.restore-cmd-code-line .tui-prompt {
  color: var(--term-gold);
  font-weight: 700;
  user-select: none;
}

.tui-btn-copy-mini {
  background: transparent;
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.tui-btn-copy-mini:hover {
  border-color: var(--term-cyan);
  color: var(--term-cyan);
  background: rgba(0, 229, 255, 0.08);
}

.cvkb-copy-toast {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--term-mint);
  background: rgba(0, 255, 157, 0.1);
  border: 1px solid rgba(0, 255, 157, 0.3);
  padding: 6px 12px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  margin-top: 6px;
  text-align: center;
}

.cvkb-copy-toast.visible {
  opacity: 1;
}

/* Light Mode Overrides for CVKB1 */
html[data-theme="light"] .cvkb-text-input {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
}

html[data-theme="light"] .cvkb-text-input:focus {
  border-color: #0284C7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

html[data-theme="light"] .cvkb-detail-row .detail-val {
  color: #0F172A;
}

html[data-theme="light"] .restore-cmd-code-line {
  color: #0F172A;
}

/* Action Button Styles */
.tui-btn-action {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.tui-btn-action:hover {
  background: var(--term-surface-card);
  color: var(--text-main);
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

.tui-btn-action.secondary {
  background: transparent;
  border-color: var(--term-border);
  color: var(--text-muted);
}

.tui-btn-action.secondary:hover {
  background: var(--term-surface-elev);
  color: var(--text-main);
  border-color: var(--term-border-bright);
}

/* ==============================================================================
   Pane 6: Installation & Quickstart
   ============================================================================== */
.install-snippet-box {
  margin-bottom: 36px;
}

.snippet-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.snippet-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.snippet-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--term-border-bright);
}

.snippet-tab.active {
  color: var(--term-cyan);
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 1px 6px rgba(0, 240, 255, 0.15);
}

.snippet-code-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 18px 24px;
  gap: 18px;
  border-radius: var(--radius-md);
  transition: all var(--t-fast);
}

.snippet-code-pre {
  margin: 0;
  flex: 1;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.snippet-code-pre::-webkit-scrollbar {
  height: 5px;
}

.snippet-code-pre::-webkit-scrollbar-track {
  background: transparent;
}

.snippet-code-pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

.snippet-code-pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  display: block;
}

.snippet-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.snippet-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

/* VCS Code Wrap & General Terminal Code Blocks */
.vcs-code-wrap {
  margin-top: 14px;
}

.tui-code-block {
  margin: 0;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.6;
  overflow-x: auto;
  color: var(--text-main);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.tui-code-block::-webkit-scrollbar {
  height: 5px;
}

.tui-code-block::-webkit-scrollbar-track {
  background: transparent;
}

.tui-code-block::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

.tui-code-block code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  display: block;
}


/* Direct Binary Releases Deck */
.direct-downloads-box {
  margin-bottom: 36px;
}

.download-deck-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.55;
}

.binary-downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.bin-download-card {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: all var(--t-fast);
  position: relative;
}

.bin-download-card:hover {
  border-color: var(--term-border-bright);
  background: var(--term-surface-elev);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.bin-download-card.all-assets {
  border-style: dashed;
}

.bin-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bin-os-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.bin-os-badge.os-win {
  background: rgba(0, 240, 255, 0.1);
  color: var(--term-cyan);
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.bin-os-badge.os-linux {
  background: rgba(255, 176, 0, 0.1);
  color: var(--term-gold);
  border: 1px solid rgba(255, 176, 0, 0.25);
}

.bin-os-badge.os-mac {
  background: rgba(192, 132, 252, 0.1);
  color: var(--term-purple);
  border: 1px solid rgba(192, 132, 252, 0.25);
}

.bin-os-badge.os-all {
  background: rgba(0, 255, 157, 0.1);
  color: var(--term-mint);
  border: 1px solid rgba(0, 255, 157, 0.25);
}

.bin-arch {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.bin-card-name {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 2px;
}

.bin-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.bin-download-action {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--term-gold);
  margin-top: auto;
  padding-top: 8px;
  transition: color var(--t-fast);
}

.bin-download-card:hover .bin-download-action {
  color: var(--term-cyan);
  text-shadow: 0 0 8px var(--term-cyan-glow);
}

/* 4-Step Grid */
.tui-grid-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-bottom: 36px;
}

.step-card {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 24px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.step-card:hover {
  border-color: var(--term-border-bright);
  transform: translateY(-2px);
}

.step-idx {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--term-gold);
  margin-bottom: 8px;
}

.step-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  flex: 1;
  line-height: 1.6;
}

.step-cmd {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--term-cyan);
  border-radius: var(--radius-sm);
}

/* Operator Node Box */
.operator-node-box {
  background: var(--term-surface);
}

.node-box-desc {
  font-size: 0.96rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.node-cmd-wrap {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--term-gold);
  border-radius: var(--radius-sm);
}

/* ==============================================================================
   PANE 7: INSTALLATION & QUICKSTART (LIGHT THEME OVERRIDES)
   ============================================================================== */
html[data-theme="light"] .install-snippet-box {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .snippet-tab {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-weight: 600;
  border-radius: 6px;
}

html[data-theme="light"] .snippet-tab:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #94A3B8;
}

html[data-theme="light"] .snippet-tab.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .snippet-code-wrap {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .snippet-code-pre {
  scrollbar-color: #CBD5E1 transparent;
}

html[data-theme="light"] .snippet-code-pre::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

html[data-theme="light"] .snippet-code-pre::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

html[data-theme="light"] .snippet-code-pre code {
  background: transparent !important;
  border: none !important;
  color: #0F172A !important;
  font-weight: 600;
  padding: 0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .snippet-copy-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .snippet-copy-btn:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

html[data-theme="light"] .tui-code-block {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  scrollbar-color: #CBD5E1 transparent;
}

html[data-theme="light"] .tui-code-block::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

html[data-theme="light"] .tui-code-block code {
  background: transparent !important;
  border: none !important;
  color: #0F172A !important;
  padding: 0 !important;
}

html[data-theme="light"] .direct-downloads-box {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .direct-downloads-box .title-meta.text-mint {
  color: #166534;
}

html[data-theme="light"] .download-deck-desc {
  color: #475467;
}

html[data-theme="light"] .bin-download-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .bin-download-card:hover {
  background: #FAFAFA;
  border-color: #CBD5E1;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.1);
  transform: translateY(-3px);
}

html[data-theme="light"] .bin-download-card.all-assets {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

html[data-theme="light"] .bin-download-card.all-assets:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}

html[data-theme="light"] .bin-os-badge.os-win {
  background: #E1F3FE;
  color: #026AA2;
  border: 1px solid rgba(2, 106, 162, 0.25);
}

html[data-theme="light"] .bin-os-badge.os-linux {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid rgba(146, 64, 14, 0.25);
}

html[data-theme="light"] .bin-os-badge.os-mac {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1px solid rgba(107, 33, 168, 0.25);
}

html[data-theme="light"] .bin-os-badge.os-all {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid rgba(22, 101, 52, 0.25);
}

html[data-theme="light"] .bin-arch {
  color: #64748B;
}

html[data-theme="light"] .bin-card-name {
  color: #0F172A;
}

html[data-theme="light"] .bin-card-meta {
  color: #475467;
}

html[data-theme="light"] .bin-download-action {
  color: #0284C7;
}

html[data-theme="light"] .bin-download-card:hover .bin-download-action {
  color: #0369A1;
  text-shadow: none;
}

html[data-theme="light"] .step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .step-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

html[data-theme="light"] .step-idx {
  color: #92400E;
}

html[data-theme="light"] .step-card-title {
  color: #0F172A;
}

html[data-theme="light"] .step-card-desc {
  color: #475467;
}

html[data-theme="light"] .step-cmd {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #026AA2;
}

html[data-theme="light"] .operator-node-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #0284C7;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .node-box-desc {
  color: #475467;
}

html[data-theme="light"] .node-cmd-wrap {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #92400E;
}

html[data-theme="light"] .node-cmd-wrap code {
  background: transparent !important;
  border: none !important;
  color: #92400E !important;
  padding: 0 !important;
}

html[data-theme="light"] .faq-question {
  color: #0F172A;
}

html[data-theme="light"] .faq-answer {
  color: #475467;
}

html[data-theme="light"] .faq-answer strong {
  color: #0F172A;
}

html[data-theme="light"] .faq-answer code {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #026AA2;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ==============================================================================
   PANE 7: INSTALLATION & QUICKSTART (MONO THEME OVERRIDES)
   ============================================================================== */
html[data-theme="mono"] .install-snippet-box {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="mono"] .snippet-tab {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #a1a1aa;
}

html[data-theme="mono"] .snippet-tab:hover {
  background: #18181b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

html[data-theme="mono"] .snippet-tab.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 700;
}

html[data-theme="mono"] .snippet-code-wrap {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

html[data-theme="mono"] .snippet-code-pre {
  scrollbar-color: #444444 transparent;
}

html[data-theme="mono"] .snippet-code-pre::-webkit-scrollbar-thumb {
  background: #444444;
}

html[data-theme="mono"] .snippet-code-pre code {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0 !important;
}

html[data-theme="mono"] .snippet-copy-btn {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 700;
}

html[data-theme="mono"] .snippet-copy-btn:hover {
  background: #e4e4e7;
}

html[data-theme="mono"] .tui-code-block {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  scrollbar-color: #444444 transparent;
}

html[data-theme="mono"] .tui-code-block code {
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  padding: 0 !important;
}

html[data-theme="mono"] .direct-downloads-box {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="mono"] .download-deck-desc {
  color: #a1a1aa;
}

html[data-theme="mono"] .bin-download-card {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="mono"] .bin-download-card:hover {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="mono"] .bin-download-card.all-assets {
  border-style: dashed;
}

html[data-theme="mono"] .bin-os-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

html[data-theme="mono"] .bin-arch {
  color: #a1a1aa;
}

html[data-theme="mono"] .bin-card-name {
  color: #ffffff;
}

html[data-theme="mono"] .bin-card-meta {
  color: #a1a1aa;
}

html[data-theme="mono"] .bin-download-action {
  color: #ffffff;
}

html[data-theme="mono"] .bin-download-card:hover .bin-download-action {
  color: #ffffff;
  text-decoration: underline;
  text-shadow: none;
}

html[data-theme="mono"] .step-card {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="mono"] .step-card:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="mono"] .step-idx {
  color: #ffffff;
}

html[data-theme="mono"] .step-card-title {
  color: #ffffff;
}

html[data-theme="mono"] .step-card-desc {
  color: #a1a1aa;
}

html[data-theme="mono"] .step-cmd {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

html[data-theme="mono"] .operator-node-box {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid #ffffff;
}

html[data-theme="mono"] .node-box-desc {
  color: #a1a1aa;
}

html[data-theme="mono"] .node-cmd-wrap {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

html[data-theme="mono"] .faq-question {
  color: #ffffff;
}

html[data-theme="mono"] .faq-answer {
  color: #a1a1aa;
}

html[data-theme="mono"] .faq-answer strong {
  color: #ffffff;
}

html[data-theme="mono"] .faq-answer code {
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ==============================================================================
   Bottom Collapsible REPL Console
   ============================================================================== */
.tui-bottom-repl {
  background: var(--term-surface);
  border-top: 1px solid var(--term-border-bright);
  padding: 12px 28px;
  position: sticky;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  transition: padding var(--t-fast), background-color var(--t-normal);
}

.tui-bottom-repl.collapsed {
  padding: 8px 28px;
}

.tui-bottom-repl.collapsed .repl-drawer-container {
  display: none;
}

.repl-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

.repl-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.repl-toggle-btn:hover {
  color: var(--term-cyan);
}

.repl-indicator {
  color: var(--term-cyan);
  font-size: 0.76rem;
  transition: transform var(--t-fast);
}

.repl-shortcuts-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  font-size: 0.78rem;
}

.shortcuts-label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 700;
}

.cmd-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--term-border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.cmd-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--term-border-bright);
  transform: translateY(-1px);
}

/* Drawer Container */
.repl-drawer-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.repl-command-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.repl-command-row:focus-within {
  border-color: var(--term-border-focus);
  box-shadow: 0 0 12px var(--term-cyan-glow);
}

.repl-prompt-symbol {
  color: var(--term-cyan);
  font-family: var(--font-mono);
  font-weight: 700;
  user-select: none;
}

.repl-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  outline: none;
}

.repl-btn-exec {
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  color: var(--term-cyan);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.repl-btn-exec:hover {
  background: var(--term-surface-card);
  border-color: var(--term-border-bright);
}

.repl-output-drawer {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.6;
}

.output-drawer-header {
  display: flex;
  justify-content: space-between;
  color: var(--term-gold);
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--term-border);
}

.btn-close-drawer {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
}

.btn-close-drawer:hover {
  color: var(--text-main);
}

/* ==============================================================================
   Utility Colors
   ============================================================================== */
.text-cyan {
  color: var(--term-cyan);
}

.text-gold {
  color: var(--term-gold);
}

.text-mint {
  color: var(--term-mint);
}

.text-purple {
  color: var(--term-purple);
}

.text-danger {
  color: var(--term-danger);
}

.text-warning {
  color: var(--term-warning);
}

.text-white {
  color: var(--text-main);
}

/* ==============================================================================
   Responsive Layout & Fluid Multi-Tier Viewports
   ============================================================================== */

/* Tier 1: Intermediate Desktop & Laptop Resizing (<= 1200px) */
@media (max-width: 1200px) {
  .tui-topbar {
    padding: 8px 20px;
    gap: 12px;
  }

  .navdeck-shortcuts-hint {
    display: none;
  }

  .tui-navdeck {
    padding: 6px 20px;
  }
}

/* Tier 2: Tablets, Split-Window & Netbooks (<= 1024px) */
@media (max-width: 1024px) {
  .tui-main-panel {
    padding: 28px 20px 70px;
  }

  .tui-topbar {
    flex-wrap: wrap;
    padding: 10px 18px;
    gap: 12px;
  }

  .topbar-left {
    width: auto;
  }

  .topbar-right {
    width: auto;
  }

  .tui-navdeck {
    padding: 6px 18px;
  }

  .dilemma-tui-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .recovery-split-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .engine-telemetry-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tui-pillars-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tui-grid-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Tier 3: Mobile Viewport & Small Tablets (<= 768px) */
@media (max-width: 768px) {

  html,
  body.tui-body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .terminal-shell {
    border-left: none;
    border-right: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .tui-main-panel {
    padding: 18px 14px 60px;
  }

  .tui-box {
    padding: 20px 16px;
    border-radius: var(--radius-sm);
  }

  /* Topbar Mobile Organization (Minimalist 52px Header) */
  .tui-topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    gap: 8px;
    border-bottom: 1px solid var(--term-border);
  }

  .topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
  }

  .tui-brand {
    font-size: 0.96rem;
  }

  .topbar-left .tui-meta-badge {
    display: none;
    /* Moved into mobile drawer ribbon for pristine minimalism */
  }

  .topbar-right {
    display: none !important;
    /* Housed cleanly inside the mobile drawer */
  }

  .topbar-mobile-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Mobile Navdeck (Swipeable Category Pills) */
  .tui-navdeck {
    padding: 6px 12px;
    background: var(--term-surface-elev);
    border-bottom: 1px solid var(--term-border);
  }

  .tui-tabs-bar {
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
  }

  .tui-tab-btn {
    padding: 6px 13px;
    font-size: 0.78rem;
    min-height: 34px;
    flex-shrink: 0;
    border-radius: 9999px;
  }

  /* Hero Section Mobile */
  .hero-kicker-strip {
    font-size: 0.72rem;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hero-title {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem);
    margin-bottom: 12px;
    line-height: 1.2;
  }

  .hero-lead-box {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .tui-quick-install {
    padding: 16px 14px;
    margin-bottom: 28px;
  }

  .install-bar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .install-header-meta {
    flex-wrap: wrap;
    gap: 8px;
  }

  .install-bar-body {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .install-cmd-code {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.84rem;
    max-width: 100%;
    white-space: nowrap;
  }

  .tui-btn-copy {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .hero-actions-trust-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .tui-btn-action {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 9px 16px;
    font-size: 0.84rem;
    box-sizing: border-box;
  }

  .hero-trust-badges {
    justify-content: center;
    gap: 8px;
    font-size: 0.7rem;
  }

  /* FastCDC Slicer Simulator Mobile */
  .engine-slicer-box {
    margin-bottom: 28px;
  }

  .slicer-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .slicer-metrics-bar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .chunk-visual-grid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    padding: 10px;
    gap: 5px;
  }

  .chunk-cell {
    height: 40px;
  }

  .inspector-details-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Pipeline & Deep-Dive Inspector Mobile */
  .pipeline-visual-canvas {
    padding: 16px 12px;
  }

  .pipeline-node {
    min-width: 0;
    width: 100%;
    padding: 14px 16px;
  }

  .pipeline-actions-bar {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .pipeline-inspector-panel {
    padding: 16px 14px;
    gap: 14px;
  }

  .inspector-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .inspector-kicker {
    font-size: 0.7rem;
  }

  .inspector-heading {
    font-size: 1.15rem;
  }

  .btn-close-inspector {
    width: 100%;
    text-align: center;
    padding: 7px 12px;
  }

  .insp-body {
    font-size: 0.88rem;
  }

  .insp-stat-val {
    font-size: 1.25rem;
  }

  .insp-code-block {
    padding: 10px 12px;
    font-size: 0.74rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inspector-stage-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }

  .stage-nav-pill {
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  /* Telemetry Stream Mobile */
  .engine-telemetry-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }

  .sidebar-stream-box,
  .engine-stream-box {
    min-height: auto;
  }

  .stream-terminal-wrap {
    max-height: 280px;
  }

  /* Dilemma & Table Mobile */
  .dilemma-tui-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .dilemma-tui-card {
    padding: 22px 18px;
  }

  .tui-table-scroll {
    margin-bottom: 24px;
  }

  .tui-table {
    font-size: 0.82rem;
    min-width: 480px;
  }

  .tui-table th,
  .tui-table td {
    padding: 10px 12px;
  }

  /* Recovery Steps & Shamir Ceremony Mobile */
  .tui-grid-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .step-card {
    padding: 18px 16px;
  }

  .recovery-split-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shamir-guardians-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .shamir-inst-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Benchmarks Mobile */
  .bench-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .bench-filter-pills {
    width: 100%;
    justify-content: space-between;
  }

  .bench-rerun-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .gauge-row {
    padding: 14px 16px;
  }

  .gauge-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Install Pane Mobile */
  .snippet-code-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }

  .snippet-copy-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Community Support & REPL Mobile */
  .support-infra-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .support-network-badges {
    justify-content: center;
  }

  .tui-bottom-repl {
    padding: 8px 14px;
    z-index: 1000;
  }

  .tui-bottom-repl.collapsed {
    padding: 6px 14px;
  }

  .repl-control-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .repl-shortcuts-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 60%;
    padding-bottom: 2px;
  }

  .repl-drawer-container {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .repl-input-row {
    padding: 8px 12px;
  }

  .repl-input {
    font-size: 0.84rem;
  }
}

/* Tier 4: Ultra-Compact Mobile Phones (<= 480px) */
@media (max-width: 480px) {
  .tui-topbar {
    padding: 0 12px;
    height: 50px;
  }

  .tui-brand {
    font-size: 0.92rem;
  }

  .topbar-mobile-controls {
    gap: 6px;
  }

  .tui-mobile-donate-pill {
    font-size: 0.68rem;
    padding: 4px 9px;
  }

  .tui-mobile-hamburger {
    width: 34px;
    height: 34px;
  }

  .tui-main-panel {
    padding: 14px 10px 50px;
  }

  .tui-box {
    padding: 16px 12px;
  }

  .slicer-metrics-bar {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pane-header {
    margin-bottom: 18px;
  }

  .pane-title {
    font-size: 1.35rem;
  }

  .pane-desc {
    font-size: 0.88rem;
  }
}

/* ==============================================================================
   10. Cryptocurrency Community Donation Modal & Infrastructure Card
   ============================================================================== */

/* Pre-Footer Community Infrastructure Support Box */
.support-infrastructure-box {
  margin-top: 36px;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  border-left: 3px solid var(--term-gold);
}

.support-infra-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-infra-desc {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.support-infra-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--term-border);
}

.support-network-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.net-badge {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==============================================================================
   10. Cryptocurrency Community Donation Modal & Micro-Interactions
   ============================================================================== */

/* Modal Overlay & Backdrop */
.donation-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 12, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.donation-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Card Surface with Ambient Glow */
.donation-modal-card {
  position: relative;
  background: linear-gradient(180deg, rgba(16, 20, 29, 0.96) 0%, rgba(10, 13, 19, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 72px -12px rgba(0, 0, 0, 0.85),
    0 0 80px -20px rgba(0, 240, 255, 0.08);
  width: 100%;
  max-width: 590px;
  overflow: hidden;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.donation-modal-overlay.active .donation-modal-card {
  transform: scale(1) translateY(0);
}

/* Header & Eyebrow */
.donation-modal-card .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 18px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--term-mint, #00ff9d);
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.8);
  animation: pulse-dot 2.5s infinite ease-in-out;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.5);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(0, 255, 157, 0);
  }
}

.modal-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--term-gold, #ffb000);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-title {
  font-size: 1.28rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
  margin: 0;
}

.btn-close-modal {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #94a3b8);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-close-modal:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.btn-close-modal:active {
  transform: scale(0.96);
}

.kbd-esc {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Modal Body */
.donation-modal-card .modal-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-lead {
  font-size: 0.88rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.55;
  margin: 0;
}

/* Segmented Control Network Tabs (Linear/macOS Style) */
.donation-net-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.net-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
}

.net-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.03);
}

.net-tab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tab-net-dot {
  font-size: 0.65rem;
  line-height: 1;
}

.tab-net-dot.cyan {
  color: #00f0ff;
}

.tab-net-dot.purple {
  color: #a855f7;
}

.tab-net-dot.yellow {
  color: #eab308;
}

.net-fee-tag {
  font-size: 0.6rem;
  color: #00ff9d;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.22);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Accepted Assets Strip */
.modal-assets-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.assets-label {
  color: var(--text-dim, #64748b);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.assets-chips-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.asset-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text-secondary, #cbd5e1);
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.72rem;
  transition: all 0.15s ease;
}

.asset-pill:hover {
  border-color: rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.04);
}

/* QR Code & Address Deck (Pristine 1-Line Format) */
.modal-qr-address-deck {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  align-items: center;
}

.qr-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.qr-canvas-box {
  background: #ffffff;
  padding: 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.qr-canvas-box:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.qr-canvas-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-caption-hint {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-dim, #64748b);
  letter-spacing: 0.06em;
}

.address-details-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.address-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.address-hint-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim, #64748b);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-sec-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--term-mint, #00ff9d);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 255, 157, 0.06);
  border: 1px solid rgba(0, 255, 157, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.address-code-block {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main, #f8fafc);
  background: var(--code-bg, rgba(0, 0, 0, 0.45));
  border: 1px solid var(--term-border, rgba(255, 255, 255, 0.08));
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  user-select: all;
  cursor: copy;
  transition: all 0.15s ease;
}

.address-code-block::-webkit-scrollbar {
  display: none;
}

.address-code-block:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.03);
}

.address-actions-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.btn-copy-address {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.28);
  color: #00f0ff;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
}

.btn-copy-address:hover {
  background: #00f0ff;
  color: #07090e;
  border-color: #00f0ff;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.btn-copy-address:active {
  transform: scale(0.96);
}

.btn-copy-address.copied {
  background: rgba(0, 255, 157, 0.15);
  border-color: #00ff9d;
  color: #00ff9d;
}

.btn-view-explorer {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 7px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-view-explorer:hover {
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.btn-view-explorer:active {
  transform: scale(0.96);
}

.donation-copy-feedback {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--term-mint, #00ff9d);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, height 0.2s ease;
  text-align: center;
}

.donation-copy-feedback.show {
  opacity: 1;
  height: 16px;
}

/* Minimalist Notice Box */
.modal-notice-box {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notice-icon {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
}

.notice-text {
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.5;
  margin: 0;
  transition: opacity 0.15s ease;
}

.notice-text strong {
  color: var(--text-main, #f8fafc);
  font-weight: 700;
}

/* Modal Footer */
.donation-modal-card .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--term-surface-elev, rgba(0, 0, 0, 0.2));
  border-top: 1px solid var(--term-border, rgba(255, 255, 255, 0.06));
  gap: 16px;
}

.modal-footer-meta {
  font-size: 0.74rem;
  color: var(--text-dim, #64748b);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.meta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-dim, #64748b);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .donation-modal-overlay {
    padding: 12px;
  }

  .donation-modal-card {
    width: 100%;
    margin: 0;
    max-height: 90vh;
    border-radius: 12px;
  }

  .donation-modal-card .modal-body {
    padding: 16px 14px;
    gap: 14px;
  }

  .donation-net-tabs {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .modal-qr-address-deck {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 12px;
    gap: 12px;
  }

  .address-details-box {
    width: 100%;
  }

  .address-code-block {
    width: 100%;
    font-size: 0.72rem;
    padding: 8px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .address-actions-row {
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .btn-copy-address,
  .btn-view-explorer {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    box-sizing: border-box;
  }
}

/* ==============================================================================
   PANE 4: SCOPED SECRETS, ENVELOPE ENCRYPTION & AUDIT CHAIN (v1.0.20)
   ============================================================================== */
.scoped-workstation-box {
  margin-bottom: 36px;
}

.scoped-env-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
}

.env-bar-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.scoped-env-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scoped-env-pill {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t-fast);
}

.scoped-env-pill:hover {
  border-color: var(--term-border-bright);
  color: var(--text-main);
  transform: translateY(-1px);
}

.scoped-env-pill.active {
  background: var(--term-surface-card);
  border-color: var(--term-gold);
  color: #ffffff;
  box-shadow: 0 0 12px var(--term-gold-glow);
}

.scoped-env-pill[data-env="staging"].active {
  border-color: var(--term-cyan);
  box-shadow: 0 0 12px var(--term-cyan-glow);
}

.scoped-env-pill[data-env="development"].active {
  border-color: var(--term-mint);
  box-shadow: 0 0 12px var(--term-mint-glow);
}

.env-pill-dot {
  font-size: 0.75rem;
}

.env-pill-dot.gold {
  color: var(--term-gold);
}

.env-pill-dot.cyan {
  color: var(--term-cyan);
}

.env-pill-dot.mint {
  color: var(--term-mint);
}

.scoped-hierarchy-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 24px;
  margin-bottom: 24px;
}

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

.scope-tree-card,
.scope-envelope-card {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-sizing: border-box;
}

.tree-card-header,
.envelope-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--term-border);
}

.tree-title,
.envelope-title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

.tree-badge,
.envelope-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(192, 132, 252, 0.15);
  color: var(--term-purple);
  border: 1px solid rgba(192, 132, 252, 0.3);
}

.envelope-badge.tag-gold {
  background: rgba(255, 176, 0, 0.15);
  color: var(--term-gold);
  border-color: rgba(255, 176, 0, 0.3);
}

.envelope-badge.tag-cyan {
  background: rgba(0, 240, 255, 0.15);
  color: var(--term-cyan);
  border-color: rgba(0, 240, 255, 0.3);
}

.envelope-badge.tag-mint {
  background: rgba(0, 255, 157, 0.15);
  color: var(--term-mint);
  border-color: rgba(0, 255, 157, 0.3);
}

.scope-tree-canvas {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--t-fast);
}

.tree-node:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tree-branch-line {
  color: var(--term-border-bright);
  padding-left: 12px;
  user-select: none;
}

.node-icon {
  font-size: 0.9rem;
}

.node-label {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
}

.node-val {
  font-weight: 600;
}

.node-tag,
.node-version-badge {
  font-size: 0.64rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  color: var(--text-muted);
  margin-left: auto;
}

.tree-node.active {
  background: rgba(255, 176, 0, 0.08);
  border: 1px dashed var(--term-gold);
}

.envelope-specs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.envelope-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.field-hint {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.field-code-box {
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 4px;
  padding: 8px 12px;
  overflow-x: auto;
}

.code-token {
  color: var(--term-cyan);
  font-size: 0.76rem;
}

.code-hex {
  color: var(--term-gold);
  font-size: 0.76rem;
}

.code-aad {
  color: var(--term-mint);
  font-size: 0.76rem;
}

.code-dpop {
  color: var(--term-purple);
  font-size: 0.76rem;
}

.field-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.sub-val {
  color: var(--term-mint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.scoped-invariant-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.invariant-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-dot.green {
  color: var(--term-mint);
  font-size: 0.7rem;
}

.inv-dot.cyan {
  color: var(--term-cyan);
  font-size: 0.7rem;
}

/* Cryptographic Audit Ledger */
.audit-chain-box {
  margin-bottom: 36px;
}

.audit-box-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.audit-chain-grid {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 12px;
}

@media (max-width: 1000px) {
  .audit-chain-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .audit-arrow {
    transform: rotate(90deg);
    margin: 4px auto;
  }
}

.audit-block-card {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  min-width: 190px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--t-fast);
}

.audit-block-card.verified {
  border-color: rgba(0, 255, 157, 0.4);
  box-shadow: 0 4px 16px rgba(0, 255, 157, 0.06);
}

.audit-block-card.tampered {
  border-color: var(--term-danger);
  background: rgba(255, 77, 94, 0.06);
  box-shadow: 0 0 16px var(--term-danger-subtle);
  animation: pulse-danger 1.8s infinite;
}

@keyframes pulse-danger {

  0%,
  100% {
    border-color: var(--term-danger);
  }

  50% {
    border-color: rgba(255, 77, 94, 0.3);
  }
}

.block-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.block-idx {
  color: var(--text-dim);
  font-weight: 700;
}

.block-actor {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  word-break: break-all;
}

.block-target {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}

.block-hash-line {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  background: var(--term-surface-elev);
  border-radius: 3px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hash-lbl {
  font-size: 0.58rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.hash-val {
  color: var(--term-mint);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-block-card.tampered .hash-val {
  color: var(--term-danger);
}

.block-status-pill {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
}

.audit-arrow {
  color: var(--term-border-bright);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

.audit-actions-deck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 18px;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
}

.audit-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.audit-status-banner.verified .status-dot {
  color: var(--term-mint);
}

.audit-status-banner.verified .status-msg {
  color: var(--term-mint);
}

.audit-status-banner.tampered .status-dot {
  color: var(--term-danger);
}

.audit-status-banner.tampered .status-msg {
  color: var(--term-danger);
}

.audit-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 7-Stage Migration Ledger */
.migration-ledger-box {
  margin-bottom: 36px;
}

.migration-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.migration-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.migration-card {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.migration-card:hover {
  transform: translateY(-2px);
  border-color: var(--term-border-bright);
}

.m-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.m-step-idx {
  color: var(--text-dim);
  font-weight: 700;
}

.m-step-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.m-step-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  flex-grow: 1;
}

.m-step-cmd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: var(--term-surface-elev);
  border: 1px solid var(--term-border);
  border-radius: 3px;
  padding: 4px 6px;
  color: var(--term-cyan);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* VCS Binding & CLI Cheatsheet Bottom Row */
.scoped-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}

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

.vcs-box-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.cli-cheatsheet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cli-cmd-cell {
  background: var(--code-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmd-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.cmd-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ==============================================================================
   Audience Mode Switching (Plain English vs Deep Tech) & Plain English Components
   ============================================================================== */
html[data-view-mode="simple"] .mode-tech-only {
  display: none !important;
}

html[data-view-mode="simple"] .mode-simple-only {
  display: block;
}

html[data-view-mode="simple"] span.mode-simple-only {
  display: inline;
}

html[data-view-mode="simple"] div.mode-simple-only {
  display: block;
}

html[data-view-mode="tech"] .mode-simple-only {
  display: none !important;
}

html[data-view-mode="tech"] .mode-tech-only {
  display: block;
}

html[data-view-mode="tech"] span.mode-tech-only {
  display: inline;
}

html[data-view-mode="tech"] div.mode-tech-only {
  display: block;
}

/* Plain English Explainer & Scenarios */
.hero-audience-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--term-border);
  padding: 12px 0 18px 0;
  margin: 20px 0 32px 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.hero-reassurance-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reassurance-dot {
  color: var(--term-mint);
  font-size: 0.65rem;
}

.reassurance-sep {
  color: var(--term-border-bright);
}

.audience-banner-text {
  color: var(--text-secondary);
}

.audience-banner-action {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--term-cyan);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  transition: color var(--t-fast);
}

.audience-banner-action:hover {
  color: var(--text-main);
  text-decoration: underline;
}

.scenario-tag.tag-problem {
  background: var(--pastel-red-bg);
  color: var(--pastel-red-text);
  border: 1px solid rgba(255, 77, 94, 0.2);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scenario-tag.tag-solution {
  background: var(--pastel-green-bg);
  color: var(--pastel-green-text);
  border: 1px solid rgba(0, 255, 157, 0.2);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 3 Real-World Problem / Solution Flashcards */
.plain-scenarios-deck {
  margin: 36px 0;
}

.scenarios-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.scenarios-deck-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

.plain-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}

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

.scenario-flashcard {
  perspective: 1200px;
  min-height: 220px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  outline: none;
}

.scenario-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: var(--radius-md);
}

.scenario-flashcard.flipped .scenario-inner {
  transform: rotateY(180deg);
}

.scenario-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--term-border);
  background: var(--term-surface);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.scenario-face:hover {
  border-color: var(--term-border-bright);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .scenario-face {
  background: #FFFFFF;
  border-color: #EAEAEA;
}

.scenario-back {
  transform: rotateY(180deg);
  background: var(--term-surface-elev);
}

html[data-theme="light"] .scenario-back {
  background: #F9F9F8;
}

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

.scenario-num-tag {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: rgba(255, 77, 94, 0.12);
  color: var(--term-danger);
}

.scenario-num-tag.mint {
  background: rgba(0, 255, 157, 0.12);
  color: var(--term-mint);
}

html[data-theme="light"] .scenario-num-tag {
  background: var(--pastel-red-bg);
  color: var(--pastel-red-text);
}

html[data-theme="light"] .scenario-num-tag.mint {
  background: var(--pastel-green-bg);
  color: var(--pastel-green-text);
}

.scenario-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.scenario-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}

.scenario-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--term-border);
  gap: 8px;
}

.scenario-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* FAQ Plain English Section */
.plain-faq-container {
  margin: 40px 0 24px 0;
}

.plain-faq-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.plain-faq-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.plain-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 800px) {
  .plain-faq-grid {
    grid-template-columns: 1fr;
  }
}

.plain-faq-card {
  background: var(--term-surface-card);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.plain-faq-card:hover {
  border-color: var(--term-border-bright);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .plain-faq-card {
  background: #FFFFFF;
  border-color: #EAEAEA;
}

.faq-question {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--term-gold);
}

.faq-answer {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.62;
}

/* Friendly Analogy Badges */
.analogy-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 600;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--term-cyan);
  padding: 2px 8px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.no-crypto-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  color: var(--term-mint);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 14px;
}

html[data-theme="light"] .analogy-tag {
  background: var(--pastel-blue-bg);
  border-color: rgba(31, 108, 159, 0.25);
  color: var(--pastel-blue-text);
}

html[data-theme="light"] .no-crypto-pill {
  background: var(--pastel-green-bg);
  border-color: rgba(52, 101, 56, 0.25);
  color: var(--pastel-green-text);
}

.analogy-notice-box {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

html[data-theme="light"] .analogy-notice-box {
  background: #F9F9F8;
  border-color: #EAEAEA;
  color: #2F3437;
}

.recovery-rebuild-box {
  margin-top: 24px;
  border-left: 2px solid var(--term-gold);
}

.recovery-rebuild-desc {
  margin-top: 10px;
  margin-bottom: 8px;
}

/* ==============================================================================
   LIGHT THEME HIGH-CONTRAST & EDITORIAL LEGIBILITY ENHANCEMENTS
   ============================================================================== */
html[data-theme="light"] {
  color: var(--text-main);
}

/* Headings and Main Text */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #0F172A;
}

html[data-theme="light"] p {
  color: #334155;
}

/* Inline Code Snippets */
html[data-theme="light"] .tui-code,
html[data-theme="light"] :not(pre) > code {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
  font-weight: 600;
}

/* Kicker Strips & Subtitles */
html[data-theme="light"] .pane-kicker {
  color: #8C5800;
  font-weight: 700;
}

html[data-theme="light"] .pane-desc {
  color: #334155;
}

html[data-theme="light"] .tui-brand-text {
  color: #0F172A;
}

/* Hero Reassurance Bar */
html[data-theme="light"] .hero-reassurance-strip {
  color: #334155;
}

html[data-theme="light"] .reassurance-dot {
  color: #166534;
}

html[data-theme="light"] .reassurance-sep {
  color: #CBD5E1;
}

html[data-theme="light"] .audience-banner-action {
  color: #026AA2;
  font-weight: 700;
}

html[data-theme="light"] .audience-banner-action:hover {
  color: #0F172A;
}

/* Hero Quick-Install Deck */
html[data-theme="light"] .tui-quick-install {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .hero-target-pill {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #475467;
}

html[data-theme="light"] .hero-target-pill:hover {
  background: #EDF2F7;
  color: #0F172A;
  border-color: #CBD5E1;
}

html[data-theme="light"] .hero-target-pill.active {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .os-label-badge {
  background: #DCFCE7;
  border-color: rgba(22, 101, 52, 0.25);
  color: #166534;
}

html[data-theme="light"] .install-hint {
  color: #64748B;
}

html[data-theme="light"] .install-bar-body {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .tui-prompt {
  color: #026AA2;
  font-weight: 800;
}

html[data-theme="light"] .install-cmd-code {
  color: #0F172A;
}

html[data-theme="light"] .tui-btn-copy {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .tui-btn-copy:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
}

html[data-theme="light"] .trust-badge {
  color: #334155;
  font-weight: 500;
}

/* Capability Pillars */
html[data-theme="light"] .pillar-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

html[data-theme="light"] .pillar-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .pillar-card.is-open {
  border-color: #94A3B8;
}

html[data-theme="light"] .pillar-num {
  color: #475467;
  font-weight: 700;
}

html[data-theme="light"] .pillar-title {
  color: #0F172A;
}

html[data-theme="light"] .pillar-lbl {
  color: #475467;
  font-weight: 600;
}

html[data-theme="light"] .pillar-toggle-bar {
  color: #334155;
  border-top-color: #E2E8F0;
}

html[data-theme="light"] .pillar-card:hover .pillar-toggle-bar {
  color: #0F172A;
}

html[data-theme="light"] .pillar-card.is-open .pillar-toggle-bar {
  color: #0F172A;
  font-weight: 700;
}

html[data-theme="light"] .pillar-card .pillar-desc {
  background: #F8FAFC;
  border-left-color: #0F172A;
  color: #334155;
}

/* Badges */
html[data-theme="light"] .badge-mint {
  background: #DCFCE7;
  border-color: rgba(22, 101, 52, 0.25);
  color: #166534;
}

html[data-theme="light"] .badge-cyan {
  background: #E0F2FE;
  border-color: rgba(2, 106, 162, 0.25);
  color: #026AA2;
}

html[data-theme="light"] .badge-gold {
  background: #FEF08A;
  border-color: rgba(133, 77, 14, 0.25);
  color: #854D0E;
}

html[data-theme="light"] .badge-purple {
  background: #F3E8FF;
  border-color: rgba(107, 33, 168, 0.25);
  color: #6B21A8;
}

html[data-theme="light"] .badge-danger {
  background: #FEE4E2;
  border-color: rgba(180, 35, 24, 0.25);
  color: #B42318;
}

/* Box & Workstation Headers */
html[data-theme="light"] .tui-box-title {
  color: #8C5800;
  border-bottom-color: #E2E8F0;
}

html[data-theme="light"] .tui-box-title .title-meta {
  color: #475467;
}

html[data-theme="light"] .box-title-main {
  color: #0F172A;
}

html[data-theme="light"] .box-title-badge {
  background: #F1F5F9;
  color: #475467;
  border: 1px solid #CBD5E1;
}

/* FastCDC Workstation & Code Editor (Light Theme) */
html[data-theme="light"] .engine-dual-banner {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #026AA2;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .engine-dual-banner .dual-banner-tag {
  color: #026AA2;
}

html[data-theme="light"] .engine-dual-banner .dual-banner-text {
  color: #334155;
}

html[data-theme="light"] .engine-dual-banner .dual-banner-text strong {
  color: #0F172A;
}

html[data-theme="light"] .engine-dual-banner .dual-banner-hint {
  color: #64748B;
}

html[data-theme="light"] .engine-dual-banner .dual-jump-btn {
  background: #0F172A;
  border: 1px solid #0F172A;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .engine-dual-banner .dual-jump-btn:hover {
  background: #1E293B;
  border-color: #1E293B;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

html[data-theme="light"] .analogy-tag {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1D4ED8;
}

html[data-theme="light"] .cdc-live-tag {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #047857;
}

html[data-theme="light"] .analogy-notice-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #026AA2;
}

html[data-theme="light"] .analogy-badge {
  background: #E0F2FE;
  border-color: #BAE6FD;
  color: #026AA2;
}

html[data-theme="light"] .analogy-lead {
  color: #334155;
}

html[data-theme="light"] .analogy-toggle-btn {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
}

html[data-theme="light"] .analogy-toggle-btn:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}

html[data-theme="light"] .analogy-expandable-content.open {
  border-top-color: #E2E8F0;
}

html[data-theme="light"] .expl-col {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

html[data-theme="light"] .expl-col-title {
  color: #0F172A;
}

html[data-theme="light"] .expl-col p {
  color: #475467;
}

html[data-theme="light"] .sim-presets-deck {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .presets-label {
  color: #475467;
}

html[data-theme="light"] .preset-pill {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .preset-pill:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
}

html[data-theme="light"] .preset-pill.active {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .preset-pill.active::before {
  content: '● ';
  color: #38BDF8;
  font-size: 0.65rem;
}

html[data-theme="light"] .sim-editor-shell {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .editor-window-header {
  background: #F8FAFC;
  border-bottom-color: #E2E8F0;
}

html[data-theme="light"] .dot-red {
  background: #EF4444;
}

html[data-theme="light"] .dot-yellow {
  background: #F59E0B;
}

html[data-theme="light"] .dot-green {
  background: #10B981;
}

html[data-theme="light"] .editor-file-path {
  color: #0F172A;
}

html[data-theme="light"] .editor-tag-badge {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #475467;
}

html[data-theme="light"] .editor-gutter {
  background: #F8FAFC;
  border-right-color: #E2E8F0;
  color: #64748B;
}

html[data-theme="light"] .editor-gutter .active-line {
  color: #0F172A;
}

html[data-theme="light"] .code-line-dim {
  color: #64748B;
}

html[data-theme="light"] .code-line-active {
  background: #F0F9FF;
  border-left-color: #026AA2;
}

html[data-theme="light"] .code-key {
  color: #0F172A;
}

html[data-theme="light"] .sim-input {
  color: #026AA2;
}

html[data-theme="light"] .code-cursor-blink {
  background: #026AA2;
}

html[data-theme="light"] .editor-live-badge {
  color: #026AA2;
  background: #E0F2FE;
  border-color: #BAE6FD;
}

html[data-theme="light"] .chunk-grid-header {
  color: #475467;
}

html[data-theme="light"] .grid-header-title {
  color: #0F172A;
}

html[data-theme="light"] .grid-sub-hint {
  color: #64748B;
}

html[data-theme="light"] .chunk-legend {
  color: #475467;
}

html[data-theme="light"] .legend-dot.green {
  background: #16A34A;
}

html[data-theme="light"] .legend-dot.amber {
  background: #D97706;
}

html[data-theme="light"] .chunk-visual-grid {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .chunk-cell {
  background: #F0FDF4;
  border-color: #86EFAC;
  color: #166534;
  box-shadow: 0 1px 2px rgba(22, 101, 52, 0.05);
}

html[data-theme="light"] .chunk-cell .chunk-index {
  color: #166534;
}

html[data-theme="light"] .chunk-cell .chunk-size-tag {
  color: #15803D;
}

html[data-theme="light"] .chunk-cell:hover {
  background: #DCFCE7;
  border-color: #16A34A;
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.15);
}

html[data-theme="light"] .chunk-cell.modified {
  background: #FEF9C3;
  border-color: #CA8A04;
  color: #854D0E;
  box-shadow: 0 2px 8px rgba(202, 138, 4, 0.2);
}

html[data-theme="light"] .chunk-cell.modified .chunk-index {
  color: #854D0E;
}

html[data-theme="light"] .chunk-cell.modified .chunk-size-tag {
  color: #A16207;
}

html[data-theme="light"] .chunk-cell.modified:hover {
  background: #FEF08A;
  border-color: #A16207;
  box-shadow: 0 6px 18px rgba(202, 138, 4, 0.25);
}

html[data-theme="light"] .chunk-cell.selected {
  outline: 2.5px solid #0F172A;
  outline-offset: 2px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .chunk-inspector-card {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .inspector-header {
  border-bottom-color: #E2E8F0;
}

html[data-theme="light"] .insp-pill.mod {
  background: #FEF08A;
  border-color: #CA8A04;
  color: #854D0E;
}

html[data-theme="light"] .insp-pill.cached {
  background: #DCFCE7;
  border-color: #16A34A;
  color: #166534;
}

html[data-theme="light"] .insp-title {
  color: #0F172A;
}

html[data-theme="light"] .insp-hash,
html[data-theme="light"] .insp-size {
  color: #334155;
}

html[data-theme="light"] .hash-code {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #026AA2;
}

html[data-theme="light"] .insp-detail-cell {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 10px 14px;
}

html[data-theme="light"] .insp-detail-cell .d-label {
  color: #64748B;
}

html[data-theme="light"] .insp-detail-cell .d-val {
  color: #0F172A;
}

html[data-theme="light"] .chunk-kpi-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

html[data-theme="light"] .chunk-kpi-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .kpi-label {
  color: #64748B;
}

html[data-theme="light"] .kpi-val {
  color: #0F172A;
}

html[data-theme="light"] .kpi-sub {
  color: #64748B;
}

/* FastCDC Workstation & Code Editor (Mono Theme) */
html[data-theme="mono"] .engine-dual-banner {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid #ffffff;
}

html[data-theme="mono"] .engine-dual-banner .dual-jump-btn {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

html[data-theme="mono"] .engine-dual-banner .dual-jump-btn:hover {
  background: #e5e5e5;
  color: #000000;
}

html[data-theme="mono"] .preset-pill.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

html[data-theme="mono"] .chunk-cell {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

html[data-theme="mono"] .chunk-cell.modified {
  background: #171717;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

html[data-theme="mono"] .chunk-cell.selected {
  outline-color: #ffffff;
}

/* Cryptographic Pipeline Canvas & Deep-Dive Inspector (Light Theme) */
html[data-theme="light"] .pipeline-main-title {
  color: #8C5800;
}

html[data-theme="light"] #btn-run-pipeline-sim {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] #btn-run-pipeline-sim:hover {
  background: #1E293B;
  border-color: #1E293B;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .pipeline-visual-canvas {
  background: #F8FAFC;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border-color: #E2E8F0;
}

html[data-theme="light"] .pipeline-node {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .pipeline-node:hover {
  border-color: rgba(15, 23, 42, 0.25);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .pipeline-node.active {
  background: #FFFFFF;
  border-color: #0F172A;
  box-shadow: 0 0 0 2px #0F172A, 0 12px 28px -6px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .node-stage-badge {
  color: #475467;
}

html[data-theme="light"] .pipeline-node.active .node-stage-badge {
  color: #0F172A;
}

html[data-theme="light"] .node-title {
  color: #0F172A;
}

html[data-theme="light"] .node-sub {
  color: #475467;
}

html[data-theme="light"] .node-inspect-hint {
  color: #475467;
  border-top-color: #E2E8F0;
}

html[data-theme="light"] .pipeline-node:hover .node-inspect-hint {
  color: #0F172A;
  border-top-color: #CBD5E1;
}

html[data-theme="light"] .pipeline-node.active .node-inspect-hint {
  color: #0F172A;
  border-top-color: #0F172A;
  font-weight: 700;
}

html[data-theme="light"] .connector-line,
html[data-theme="light"] .connector-line-v {
  background: #E2E8F0;
}

html[data-theme="light"] .flow-particle,
html[data-theme="light"] .flow-particle-v {
  background: #026AA2;
  box-shadow: 0 0 8px rgba(2, 106, 162, 0.5);
}

html[data-theme="light"] .conn-reverse .flow-particle {
  background: #B54708;
  box-shadow: 0 0 8px rgba(181, 71, 8, 0.5);
}

html[data-theme="light"] .flow-arrow,
html[data-theme="light"] .flow-arrow-v {
  color: #026AA2;
}

html[data-theme="light"] .conn-reverse .flow-arrow {
  color: #B54708;
}

html[data-theme="light"] .pipeline-status-text {
  color: #475467;
}

html[data-theme="light"] .pipeline-inspector-panel {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .inspector-header {
  border-bottom-color: #E2E8F0;
}

html[data-theme="light"] .inspector-kicker {
  color: #854D0E;
  background: #FEF9C3;
  border-color: rgba(161, 98, 7, 0.2);
}

html[data-theme="light"] .inspector-heading {
  color: #0F172A;
}

html[data-theme="light"] .btn-close-inspector {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
}

html[data-theme="light"] .btn-close-inspector:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

html[data-theme="light"] .esc-kbd {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #475467;
}

html[data-theme="light"] .btn-close-inspector:hover .esc-kbd {
  background: #1E293B;
  border-color: #334155;
  color: #FFFFFF;
}

html[data-theme="light"] .insp-mechanics-box {
  background: #F0F9FF;
  border-color: rgba(2, 106, 162, 0.2);
  border-left: 3px solid #026AA2;
}

html[data-theme="light"] .insp-mechanics-box .insp-label {
  color: #026AA2;
}

html[data-theme="light"] .insp-mechanics-box .insp-body {
  color: #1E293B;
}

html[data-theme="light"] .insp-security-box {
  background: #FEFCE8;
  border-color: rgba(202, 138, 4, 0.25);
  border-left: 3px solid #CA8A04;
}

html[data-theme="light"] .insp-security-box .insp-label {
  color: #854D0E;
}

html[data-theme="light"] .insp-security-box .insp-body {
  color: #422006;
}

html[data-theme="light"] .insp-body {
  color: #334155;
}

html[data-theme="light"] .insp-stat-badge {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .insp-stat-val {
  color: #166534;
}

html[data-theme="light"] .insp-stat-desc {
  color: #475467;
}

html[data-theme="light"] .insp-code-block {
  background: #090D16;
  border-color: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}

html[data-theme="light"] .insp-code-block code {
  background: transparent !important;
  border: none !important;
  color: #E2E8F0 !important;
  padding: 0 !important;
}

html[data-theme="light"] .inspector-stage-pills {
  border-top-color: #E2E8F0;
}

html[data-theme="light"] .pills-label {
  color: #64748B;
}

html[data-theme="light"] .stage-nav-pill {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #334155;
}

html[data-theme="light"] .stage-nav-pill:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

html[data-theme="light"] .stage-nav-pill.active {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

/* Scoped Secrets & Hierarchy Tree */
html[data-theme="light"] .scoped-env-bar {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .env-bar-label {
  color: #475467;
}

html[data-theme="light"] .scoped-env-pill {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #475467;
}

html[data-theme="light"] .scoped-env-pill:hover {
  background: #EDF2F7;
  color: #0F172A;
}

html[data-theme="light"] .scoped-env-pill.active {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .scope-tree-card,
html[data-theme="light"] .scope-envelope-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

html[data-theme="light"] .tree-title,
html[data-theme="light"] .envelope-title {
  color: #0F172A;
}

html[data-theme="light"] .node-label {
  color: #475467;
}

html[data-theme="light"] .tree-branch-line {
  color: #CBD5E1;
}

html[data-theme="light"] .field-hint {
  color: #64748B;
}

html[data-theme="light"] .field-code-box {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .code-token,
html[data-theme="light"] .code-hex,
html[data-theme="light"] .code-aad,
html[data-theme="light"] .code-dpop {
  color: #0F172A;
}

html[data-theme="light"] .sub-label {
  color: #64748B;
}

html[data-theme="light"] .sub-val {
  color: #0F172A;
}

html[data-theme="light"] .scoped-invariant-banner {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #334155;
}

html[data-theme="light"] .audit-box-desc,
html[data-theme="light"] .migration-desc,
html[data-theme="light"] .vcs-box-desc {
  color: #334155;
}

html[data-theme="light"] .audit-block-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

html[data-theme="light"] .block-idx {
  color: #475467;
}

html[data-theme="light"] .block-actor,
html[data-theme="light"] .block-target {
  color: #0F172A;
}

html[data-theme="light"] .hash-lbl {
  color: #64748B;
}

html[data-theme="light"] .hash-val {
  color: #0F172A;
}

html[data-theme="light"] .migration-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

html[data-theme="light"] .m-step-idx {
  color: #475467;
}

html[data-theme="light"] .m-step-title {
  color: #0F172A;
}

html[data-theme="light"] .m-step-desc {
  color: #334155;
}

html[data-theme="light"] .m-step-cmd {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}

/* Benchmarks & Performance Gauges */
html[data-theme="light"] .bench-title-main {
  color: #0F172A;
}

html[data-theme="light"] .bench-harness-tag {
  color: #64748B;
}

html[data-theme="light"] .bench-pill {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #475467;
}

html[data-theme="light"] .bench-pill:hover {
  background: #EDF2F7;
  color: #0F172A;
}

html[data-theme="light"] .bench-pill.active {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
}

html[data-theme="light"] .bench-rerun-btn {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

html[data-theme="light"] .bench-rerun-btn:hover {
  background: #EDF2F7;
  color: #0F172A;
}

html[data-theme="light"] .gauge-name {
  color: #0F172A;
}

html[data-theme="light"] .gauge-baseline-val {
  color: #64748B;
}

html[data-theme="light"] .gauge-bar-track {
  background: #E2E8F0;
}

html[data-theme="light"] .gauge-detail-foot {
  color: #475467;
}

html[data-theme="light"] .baseline-legend {
  color: #64748B;
}

html[data-theme="light"] .bench-summary-banner {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .summary-pill {
  color: #334155;
}

/* Comparison Table */
html[data-theme="light"] .tui-table {
  background: #FFFFFF;
}

html[data-theme="light"] .tui-table th {
  background: #F8FAFC;
  color: #0F172A;
  border-color: #E2E8F0;
}

html[data-theme="light"] .tui-table td {
  color: #334155;
  border-color: #E2E8F0;
}

html[data-theme="light"] .tui-table tr:nth-child(even) td {
  background: #FAFBFD;
}

html[data-theme="light"] .tui-table td strong {
  color: #0F172A;
}

html[data-theme="light"] .tui-table .col-highlight {
  background: #F0FDF4;
}

/* Bottom Pagers & Navigation */
html[data-theme="light"] .pane-pager-bar {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

html[data-theme="light"] .pager-hint {
  color: #475467;
}

html[data-theme="light"] .pane-pager-btn {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
}

html[data-theme="light"] .pane-pager-btn:hover {
  background: #EDF2F7;
  color: #0F172A;
}

html[data-theme="light"] .pane-pager-btn.next {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
}

html[data-theme="light"] .pane-pager-btn.next:hover {
  background: #1E293B;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .cli-cmd-cell {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

html[data-theme="light"] .cmd-desc {
  color: #475467;
}

/* Bottom Collapsible REPL */
html[data-theme="light"] .tui-bottom-repl {
  background: #FFFFFF;
  border-top-color: #E2E8F0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .repl-toggle-btn {
  color: #0F172A;
}

html[data-theme="light"] .shortcuts-label {
  color: #64748B;
}

html[data-theme="light"] .cmd-pill {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
}

html[data-theme="light"] .cmd-pill:hover {
  background: #EDF2F7;
  color: #0F172A;
}

html[data-theme="light"] .repl-input-wrap {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

html[data-theme="light"] .repl-input {
  color: #0F172A;
}

html[data-theme="light"] .repl-output-drawer {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}

/* ==============================================================================
   Cryptocurrency Donation Modal (Light Theme Overrides)
   ============================================================================== */
html[data-theme="light"] .donation-modal-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .donation-modal-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .donation-modal-card .modal-header {
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
}

html[data-theme="light"] .status-pulse-dot {
  background: #16A34A;
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.5);
}

html[data-theme="light"] .modal-kicker {
  color: #854D0E;
  font-weight: 800;
}

html[data-theme="light"] .modal-title {
  color: #0F172A;
  font-weight: 800;
}

html[data-theme="light"] .btn-close-modal {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #475467;
}

html[data-theme="light"] .btn-close-modal:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

html[data-theme="light"] .kbd-esc {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #475467;
  font-weight: 700;
}

html[data-theme="light"] .btn-close-modal:hover .kbd-esc {
  background: #1E293B;
  border-color: #334155;
  color: #FFFFFF;
}

html[data-theme="light"] .modal-lead {
  color: #475467;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Network Switcher Tabs (Segmented Control) */
html[data-theme="light"] .donation-net-tabs {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

html[data-theme="light"] .net-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #475467;
  font-weight: 600;
}

html[data-theme="light"] .net-tab-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #0F172A;
}

html[data-theme="light"] .net-tab-btn.active {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .tab-net-dot.cyan {
  color: #026AA2;
}

html[data-theme="light"] .tab-net-dot.purple {
  color: #7E22CE;
}

html[data-theme="light"] .tab-net-dot.yellow {
  color: #B45309;
}

html[data-theme="light"] .net-fee-tag {
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #166534;
  font-weight: 700;
}

/* Accepted Assets Strip */
html[data-theme="light"] .assets-label {
  color: #64748B;
  font-weight: 700;
}

html[data-theme="light"] .asset-pill {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-weight: 700;
}

html[data-theme="light"] .asset-pill:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #94A3B8;
}

/* QR Code & Address Deck */
html[data-theme="light"] .modal-qr-address-deck {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

html[data-theme="light"] .qr-canvas-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .qr-canvas-box:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .qr-caption-hint {
  color: #64748B;
  font-weight: 700;
}

html[data-theme="light"] .address-hint-tag {
  color: #475467;
  font-weight: 700;
}

html[data-theme="light"] .address-sec-badge {
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #166534;
  font-weight: 700;
}

html[data-theme="light"] .address-code-block {
  color: #0F172A;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .address-code-block:hover {
  border-color: #026AA2;
  background: #F0F9FF;
  color: #026AA2;
}

html[data-theme="light"] .btn-copy-address {
  background: #0F172A;
  border: 1px solid #0F172A;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .btn-copy-address:hover {
  background: #1E293B;
  border-color: #1E293B;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
}

html[data-theme="light"] .btn-copy-address.copied {
  background: #166534;
  border-color: #166534;
  color: #FFFFFF;
}

html[data-theme="light"] .btn-view-explorer {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .btn-view-explorer:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
  transform: translateY(-1px);
}

html[data-theme="light"] .donation-copy-feedback {
  color: #166534;
}

/* Notice / Alert Box */
html[data-theme="light"] .modal-notice-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}

html[data-theme="light"] .notice-icon {
  color: #D97706;
}

html[data-theme="light"] .notice-text {
  color: #92400E;
}

html[data-theme="light"] .notice-text strong {
  color: #78350F;
  font-weight: 800;
}

/* Modal Footer */
html[data-theme="light"] .donation-modal-card .modal-footer {
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

html[data-theme="light"] .modal-footer-meta {
  color: #64748B;
}

html[data-theme="light"] .meta-dot {
  background: #94A3B8;
}

html[data-theme="light"] .donation-modal-card #btn-dismiss-donate {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .donation-modal-card #btn-dismiss-donate:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

/* ==============================================================================
   Cryptocurrency Donation Modal (Mono Theme Overrides)
   ============================================================================== */
html[data-theme="mono"] .donation-modal-overlay {
  background: rgba(0, 0, 0, 0.85);
}

html[data-theme="mono"] .donation-modal-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9);
}

html[data-theme="mono"] .donation-modal-card .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="mono"] .status-pulse-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

html[data-theme="mono"] .modal-kicker {
  color: #ffffff;
}

html[data-theme="mono"] .modal-title {
  color: #ffffff;
}

html[data-theme="mono"] .modal-lead {
  color: #d4d4d8;
}

html[data-theme="mono"] .donation-net-tabs {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="mono"] .net-tab-btn {
  color: #a1a1aa;
}

html[data-theme="mono"] .net-tab-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 700;
}

html[data-theme="mono"] .net-fee-tag {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

html[data-theme="mono"] .asset-pill {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

html[data-theme="mono"] .modal-qr-address-deck {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="mono"] .address-code-block {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

html[data-theme="mono"] .btn-copy-address {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 700;
}

html[data-theme="mono"] .btn-copy-address:hover {
  background: #e5e5e5;
}

html[data-theme="mono"] .btn-view-explorer {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

html[data-theme="mono"] .modal-notice-box {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="mono"] .notice-text {
  color: #d4d4d8;
}

html[data-theme="mono"] .notice-text strong {
  color: #ffffff;
}

html[data-theme="mono"] .donation-modal-card .modal-footer {
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="mono"] .modal-footer-meta {
  color: #a1a1aa;
}

html[data-theme="mono"] .meta-dot {
  background: #a1a1aa;
}

html[data-theme="mono"] .donation-modal-card #btn-dismiss-donate {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 700;
}