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

/* ==========================================================================
   Dual-Theme Engine (Light / Night Mode) Design Tokens
   ========================================================================== */

/* Night Mode (Default) */
:root {
  --bg-app: #090d16;
  --bg-surface: #111827;
  --bg-card: #162032;
  --bg-inset: #0b1120;
  --border-color: #243247;
  --border-accent: #38bdf8;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

  /* Legacy & Supporting Variable Aliases */
  --bg-canvas: var(--bg-app);
  --bg-surface-elevated: var(--bg-card);
  --bg-surface-hover: #1e293b;
  --bg-glass: rgba(17, 24, 39, 0.85);

  --border-subtle: var(--border-color);
  --border-muted: rgba(255, 255, 255, 0.08);
  --border-elevated: var(--border-accent);
  --border-focus: var(--border-accent);
  --border-glow-cyan: 0 0 12px rgba(56, 189, 248, 0.25);
  --border-glow-emerald: 0 0 12px rgba(16, 185, 129, 0.25);
  --border-glow-amber: 0 0 12px rgba(245, 158, 11, 0.25);
  --border-glow-violet: 0 0 12px rgba(168, 85, 247, 0.25);

  --color-cyan: var(--border-accent);
  --color-cyan-dim: var(--primary);
  --color-cyan-bg: rgba(56, 189, 248, 0.1);
  --color-cyan-border: rgba(56, 189, 248, 0.35);

  --color-emerald: var(--success);
  --color-emerald-bg: rgba(16, 185, 129, 0.1);
  --color-emerald-border: rgba(16, 185, 129, 0.35);

  --color-amber: var(--warning);
  --color-amber-bg: rgba(245, 158, 11, 0.1);
  --color-amber-border: rgba(245, 158, 11, 0.35);

  --color-violet: #a855f7;
  --color-violet-bg: rgba(168, 85, 247, 0.12);
  --color-violet-border: rgba(168, 85, 247, 0.4);

  --color-danger: var(--danger);

  --text-primary: var(--text-main);
  --text-subtle: #64748b;
  --text-heading: #f8fafc;
  --text-highlight: #ffffff;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, Menlo, monospace;

  --nav-height: 48px;
}

/* Light Mode */
[data-theme="light"] {
  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-card: #f8fafc;
  --bg-inset: #e2e8f0;
  --border-color: #cbd5e1;
  --border-accent: #0284c7;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);

  /* Light Mode Variable Aliases */
  --bg-canvas: var(--bg-app);
  --bg-surface-elevated: var(--bg-card);
  --bg-surface-hover: #e2e8f0;
  --bg-glass: rgba(255, 255, 255, 0.9);

  --border-subtle: var(--border-color);
  --border-muted: rgba(0, 0, 0, 0.08);
  --border-elevated: var(--border-accent);
  --border-focus: var(--primary);
  --border-glow-cyan: 0 0 12px rgba(2, 132, 199, 0.2);
  --border-glow-emerald: 0 0 12px rgba(5, 150, 105, 0.2);
  --border-glow-amber: 0 0 12px rgba(217, 119, 6, 0.2);
  --border-glow-violet: 0 0 12px rgba(124, 58, 237, 0.2);

  --color-cyan: var(--primary);
  --color-cyan-dim: var(--primary-hover);
  --color-cyan-bg: rgba(2, 132, 199, 0.08);
  --color-cyan-border: rgba(2, 132, 199, 0.3);

  --color-emerald: var(--success);
  --color-emerald-bg: rgba(5, 150, 105, 0.08);
  --color-emerald-border: rgba(5, 150, 105, 0.3);

  --color-amber: var(--warning);
  --color-amber-bg: rgba(217, 119, 6, 0.08);
  --color-amber-border: rgba(217, 119, 6, 0.3);

  --color-violet: #7c3aed;
  --color-violet-bg: rgba(124, 58, 237, 0.08);
  --color-violet-border: rgba(124, 58, 237, 0.3);

  --color-danger: var(--danger);

  --text-primary: var(--text-main);
  --text-subtle: #94a3b8;
  --text-heading: #0f172a;
  --text-highlight: #0284c7;
}

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

html, body {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Subtle Technical Grid Overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 1;
}

[data-theme="light"] body::before {
  background-image: 
    linear-gradient(rgba(2, 132, 199, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 132, 199, 0.03) 1px, transparent 1px);
}

/* ==========================================================================
   Top Header Bar (48px)
   ========================================================================== */
/* ==========================================================================
   Top Header Bar (48px)
   ========================================================================== */
.top-nav {
  height: 48px;
  min-height: 48px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  z-index: 50;
  user-select: none;
  position: relative;
  flex: 0 0 48px;
  overflow: visible;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.top-nav::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-accent) 30%, var(--primary) 70%, transparent 100%);
  opacity: 0.6;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Brand Identity */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.brand-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cyan-bg);
  border: 1px solid var(--border-accent);
  border-radius: 6px;
  color: var(--border-accent);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.brand:hover .brand-icon {
  transform: rotate(30deg);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

.brand-text {
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.brand-dot {
  color: var(--border-accent);
}

.version-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-violet);
  background: var(--color-violet-bg);
  border: 1px solid var(--color-violet-border);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.nav-divider {
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Tactile Pill Selectors with Smart Truncation */
.module-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text-main);
  font-size: 12.5px;
  font-family: var(--font-sans);
  cursor: pointer;
  position: relative;
  max-width: 200px;
  min-width: 80px;
  flex-shrink: 1;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.module-selector:hover {
  border-color: var(--border-accent);
  background: var(--bg-surface);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

.module-selector:focus-within {
  border-color: var(--border-accent);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.selector-icon {
  color: var(--border-accent);
  flex-shrink: 0;
}

.module-selector select {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 16px;
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-selector.unit-selector-wrap {
  max-width: 230px;
}

.module-selector.unit-selector-wrap select {
  max-width: 185px;
}

.module-selector select option {
  background-color: var(--bg-surface);
  color: var(--text-main);
  padding: 8px;
}

.dropdown-caret {
  position: absolute;
  right: 6px;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.module-selector:hover .dropdown-caret {
  color: var(--border-accent);
}

/* Nav Actions & Theme Toggle (Always Visible) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 9999;
}

#theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid var(--border-accent) !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  flex-shrink: 0 !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

#theme-toggle:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
}

#theme-toggle:active {
  transform: translateY(1px);
}

[data-theme="light"] #theme-toggle {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] #theme-toggle:hover {
  background: #f8fafc !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.25) !important;
}

/* Nav Right Controls & Telemetry */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  margin-left: auto;
}



.telemetry-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--success);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 1;
  white-space: nowrap;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 10px;
  flex-shrink: 1;
  white-space: nowrap;
}

/* Responsive Media Rules */
@media (max-width: 1200px) {
  .daemon-status {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .progress-container {
    display: none !important;
  }
  .version-pill {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .unit-selector-wrap {
    display: none !important;
  }
}

/* Floating Quick Toggle */
.floating-theme-toggle {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.floating-theme-toggle:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.floating-theme-toggle:active {
  transform: translateY(0);
}

[data-theme="light"] .floating-theme-toggle {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================================================
   Workspace Layout & Split.js Panes
   ========================================================================== */
.workspace-container {
  height: calc(100vh - var(--nav-height));
  display: flex;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-app);
  position: relative;
  z-index: 5;
}

/* Split.js Gutter */
.gutter {
  background-color: var(--bg-inset);
  position: relative;
  transition: background-color 0.2s ease;
  z-index: 30;
}

.gutter.gutter-horizontal {
  cursor: col-resize;
  width: 6px !important;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.gutter.gutter-horizontal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 28px;
  background: var(--border-accent);
  border-radius: 1px;
  opacity: 0.6;
}

.gutter.gutter-horizontal:hover, .gutter.gutter-horizontal:active {
  background-color: var(--primary);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}

/* ==========================================================================
   Left Pane: High-Impact Card Architecture
   ========================================================================== */
#left-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-app);
  overflow: hidden;
  border-right: 1px solid var(--border-color);
}

.left-pane-header {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.unit-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-type-badge {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.unit-type-badge.lesson {
  background: var(--color-cyan-bg);
  color: var(--border-accent);
  border: 1px solid var(--color-cyan-border);
}

.unit-type-badge.lab {
  background: var(--color-amber-bg);
  color: var(--warning);
  border: 1px solid var(--color-amber-border);
}

.unit-estimated-time {
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.left-pane-scrollable {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 64px 24px;
  scroll-behavior: smooth;
}

/* Custom Scrollbars */
.left-pane-scrollable::-webkit-scrollbar,
.terminal-window::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.left-pane-scrollable::-webkit-scrollbar-track,
.terminal-window::-webkit-scrollbar-track {
  background: var(--bg-app);
}

.left-pane-scrollable::-webkit-scrollbar-thumb,
.terminal-window::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.left-pane-scrollable::-webkit-scrollbar-thumb:hover,
.terminal-window::-webkit-scrollbar-thumb:hover {
  background: var(--border-accent);
}

/* ==========================================================================
   Left Pane Documentation & Tactile Cards
   ========================================================================== */
.markdown-body {
  color: var(--text-main);
  font-size: 13.5px;
  line-height: 1.65;
}

/* Theory & Lab Header Cards */
.theory-header-card, .lab-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--border-accent);
  border-radius: 9px;
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.lab-header-card {
  border-left-color: var(--warning);
}

.theory-header-badge, .lab-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--border-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.lab-header-badge {
  color: var(--warning);
}

.theory-title, .lab-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin-bottom: 12px;
}

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

.meta-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.meta-pill.module-pill {
  color: var(--color-violet);
  border-color: var(--color-violet-border);
  background: var(--color-violet-bg);
}

/* Markdown Typography */
.markdown-body h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 24px;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.markdown-body h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-top: 22px;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.markdown-body h2::before {
  content: '▸';
  color: var(--border-accent);
  font-size: 14px;
}

.markdown-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-top: 18px;
  margin-bottom: 8px;
}

.markdown-body p {
  margin-bottom: 14px;
  color: var(--text-main);
}

.markdown-body ul, .markdown-body ol {
  margin-bottom: 14px;
  padding-left: 20px;
}

.markdown-body li {
  margin-bottom: 6px;
  color: var(--text-main);
}

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

.markdown-body hr {
  height: 1px;
  background: var(--border-color);
  border: none;
  margin: 26px 0;
}

/* Code Formatting */
.markdown-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background-color: var(--bg-inset);
  border: 1px solid var(--border-color);
  color: var(--border-accent);
  padding: 2px 6px;
  border-radius: 4px;
}

.markdown-body pre {
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  overflow-x: auto;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

.markdown-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-main);
  display: block;
}

/* Data Tables */
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 12.5px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
}

.markdown-body th, .markdown-body td {
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.markdown-body th {
  background: var(--bg-surface);
  color: var(--text-main);
  font-weight: 600;
  font-family: var(--font-display);
}

.markdown-body tr:nth-child(even) {
  background-color: var(--bg-inset);
}

/* Technical Callout Cards */
.callout {
  padding: 14px 16px;
  border-radius: 8px;
  margin: 18px 0;
  font-size: 13px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  position: relative;
}

.callout-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.callout.callout-tip {
  border-left: 4px solid var(--border-accent);
}
.callout.callout-tip .callout-header-tag {
  color: var(--border-accent);
}

.callout.callout-warning {
  border-left: 4px solid var(--warning);
}
.callout.callout-warning .callout-header-tag {
  color: var(--warning);
}

.callout.callout-info {
  border-left: 4px solid var(--color-violet);
}
.callout.callout-info .callout-header-tag {
  color: var(--color-violet);
}

/* Interactive Knowledge Check (Quiz) Component */
.interactive-quiz {
  margin: 28px 0;
  background: var(--bg-card);
  border: 1.5px solid rgba(2, 132, 199, 0.35);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-theme="light"] .interactive-quiz {
  background: #f8fafc;
  border-color: #bae6fd;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.08);
}

.interactive-quiz:hover {
  border-color: var(--primary, #0284c7);
  box-shadow: 0 6px 24px rgba(2, 132, 199, 0.12);
}

.quiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(2, 132, 199, 0.3);
  margin-bottom: 12px;
}

.quiz-question {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 16px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-main);
  user-select: none;
}

[data-theme="light"] .quiz-option {
  background: #ffffff;
  border-color: #e2e8f0;
}

.quiz-option:hover {
  border-color: var(--primary, #0284c7);
  background: rgba(2, 132, 199, 0.06);
  transform: translateX(3px);
}

.quiz-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--primary, #0284c7);
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.quiz-submit-btn {
  background: var(--primary, #0284c7);
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
}

.quiz-submit-btn:hover:not(:disabled) {
  background: #0369a1;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.quiz-submit-btn:disabled {
  background: #10b981;
  cursor: default;
  box-shadow: none;
}

.quiz-feedback {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  animation: quizFadeIn 0.25s ease-out;
}

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-feedback-correct {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #059669;
}

.quiz-feedback-incorrect {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #dc2626;
}

.quiz-feedback-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #d97706;
}

/* ==========================================================================
   Visual Graphic Architecture Cards
   ========================================================================== */
.arch-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  margin: 24px 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

.arch-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.arch-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-main);
  text-transform: uppercase;
}

.arch-header-title svg {
  color: var(--border-accent);
}

/* Base Status Pill - Hidden */
.status-pill {
  display: none !important;
}

/* Danger / Crash / Drift (Red) */
.status-pill-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
}

/* Success / Verified / Online (Emerald Green) */
.status-pill-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
}

/* Warning / Hazard / Pitfall (Amber Yellow) */
.status-pill-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

/* Info / Telemetry / Tag (Cyan Blue) */
.status-pill-info {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.45);
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.15);
}

.status-pill-cyan {
  display: none !important;
}

/* Environment Drift Comparison Grid */
.arch-comparison-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  align-items: stretch;
}

@media (max-width: 768px) {
  .arch-comparison-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.arch-column {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.arch-column-dev {
  border-top: 3px solid var(--success);
}

.arch-column-prod {
  border-top: 3px solid var(--danger);
}

.arch-column-header {
  padding: 12px 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.arch-column-dev .column-title-wrap svg {
  color: var(--success);
}

.arch-column-prod .column-title-wrap svg {
  color: var(--danger);
}

.column-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.column-subtitle {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.arch-stack-layers {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.stack-layer {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 12px;
  transition: all 0.15s ease;
}

.stack-layer:hover {
  border-color: var(--border-accent);
}

.layer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.layer-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge-version {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.badge-version.badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-version.badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.layer-desc {
  font-size: 11.5px;
  color: var(--text-main);
  line-height: 1.4;
}

.layer-crashed {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.04);
}

.layer-error {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--danger);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.35;
}

.layer-error svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Center Drift Divider */
.drift-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  position: relative;
}

.drift-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  color: var(--border-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.drift-arrow {
  color: var(--danger);
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drift-caption {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--danger);
  text-transform: uppercase;
}

/* Blueprint Container Architecture */
.container-blueprint {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blueprint-layer {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-accent);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blueprint-layer.layer-app-bin {
  border-left-color: var(--border-accent);
}

.blueprint-layer.layer-runtime-lib {
  border-left-color: var(--color-violet);
}

.blueprint-layer.layer-rootfs {
  border-left-color: var(--success);
}

.layer-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.layer-number {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-inset);
  padding: 2px 6px;
  border-radius: 4px;
}

.layer-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
}

.layer-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: 4px;
}

.blueprint-foundation {
  background: var(--bg-inset);
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.foundation-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
}

.foundation-head svg {
  color: var(--border-accent);
}

.foundation-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Card Footer */
.arch-card-footer {
  padding: 10px 18px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}

.footer-insight {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.insight-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
}

.badge-success-label {
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   Lab Cards & Interactive Step Checklist
   ========================================================================== */
.lab-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}

.lab-task-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--border-accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lab-task-desc {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.55;
}

/* Checklist Header */
.lab-steps-header {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-main);
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-cyan-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--border-accent);
  box-shadow: 0 0 8px var(--border-accent);
  display: inline-block;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Step Items */
.step-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: var(--shadow-card);
}

/* Active Step */
.step-item.active {
  border-color: var(--border-accent);
  background: var(--bg-card);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15), var(--shadow-card);
}

/* Completed Step */
.step-item.completed {
  border-color: var(--success);
  background: var(--bg-card);
}

.step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.step-badge-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.step-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  background-color: var(--bg-inset);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.2s ease;
}

.step-item.active .step-indicator {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}

.step-item.completed .step-indicator {
  background-color: var(--success);
  border-color: var(--success);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.step-text {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.5;
  flex: 1;
}

.step-action-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.step-counter {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Tactile Auto Run Button */
.btn-run-terminal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  color: var(--border-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-card);
}

.btn-run-terminal:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
  transform: translateY(-1px);
}

.btn-run-terminal:active {
  transform: translateY(1px);
}

/* Diagnostic Hint Box */
.hint-box {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-amber-bg);
  border: 1px dashed var(--color-amber-border);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--warning);
  box-shadow: var(--shadow-card);
}

/* Left Pane Footer Navigation */
.left-pane-footer {
  height: 52px;
  padding: 0 20px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-card);
}

.footer-btn:hover:not(:disabled) {
  background: var(--bg-surface);
  border-color: var(--border-accent);
  color: var(--border-accent);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.footer-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.footer-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.35);
}

.footer-btn.primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.5);
  transform: translateY(-1px);
}

.footer-btn.primary:active:not(:disabled) {
  transform: translateY(1px);
}

.footer-btn.hint-btn {
  color: var(--warning);
  border-color: var(--color-amber-border);
  background: var(--color-amber-bg);
}

.footer-btn.hint-btn:hover:not(:disabled) {
  border-color: var(--warning);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.footer-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* AdSense Slot (300x250) */
.adsense-container {
  margin: 36px auto 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.adsense-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.adsense-slot {
  width: 300px;
  height: 250px;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  padding: 16px;
  user-select: none;
  box-shadow: var(--shadow-card);
}

.adsense-slot svg {
  margin-bottom: 8px;
  color: var(--border-accent);
}

/* ==========================================================================
   Right Pane: Industrial Terminal Frame
   ========================================================================== */
#right-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-app);
  overflow: hidden;
}

.terminal-header {
  height: 38px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
  user-select: none;
}

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

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.dot-red {
  background-color: #ef4444;
}

.dot-yellow {
  background-color: #f59e0b;
}

.dot-green {
  background-color: #10b981;
}

.terminal-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.terminal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.terminal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.term-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  user-select: none;
}

.term-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--primary);
}

.term-action-btn svg {
  stroke: currentColor;
}

[data-theme="light"] .term-action-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .term-action-btn:hover {
  background: #e2e8f0;
  color: #0284c7;
  border-color: #0284c7;
}

.terminal-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--success);
  background: var(--color-emerald-bg);
  border: 1px solid var(--color-emerald-border);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}

/* ==========================================================================
   Visual Container Architecture & Topology Graph Panel
   ========================================================================== */
.visual-graph-panel {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.visual-graph-panel.panel-collapsed {
  display: none !important;
}

.term-action-btn.active {
  background: rgba(2, 132, 199, 0.15) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.graph-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.graph-meta-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary, #0284c7);
  font-family: var(--font-mono);
  font-size: 10px;
}

.graph-meta-counts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.count-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-family: var(--font-mono);
}

.count-pill strong {
  color: var(--text-main);
}

.graph-canvas-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px 2px;
}

.graph-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 9px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.box-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 132, 199, 0.12);
  color: var(--primary, #0284c7);
  flex-shrink: 0;
}

.bridge-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
}

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

.box-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.box-name {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-main);
  white-space: nowrap;
}

.box-badge-list {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
}

.badge-empty {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.badge-port {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  padding: 1px 4px;
  border-radius: 3px;
}

.flow-pipe {
  display: flex;
  align-items: center;
  width: 20px;
  height: 2px;
  background: var(--border-color);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.pipe-pulse {
  position: absolute;
  width: 8px;
  height: 2px;
  background: var(--primary, #0284c7);
  box-shadow: 0 0 6px var(--primary);
  animation: pipeFlow 1.8s infinite linear;
}

@keyframes pipeFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.graph-nodes-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.graph-blueprint-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.blueprint-dashed-slot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-pulse-ring {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.6;
}

.slot-text {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.blueprint-quick-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.quick-label {
  font-size: 9.5px;
  color: var(--text-muted);
}

.quick-deploy-btn {
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
  color: var(--primary, #0284c7);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-deploy-btn:hover {
  background: var(--primary);
  color: #ffffff;
}

.graph-container-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 6px;
  padding: 5px 9px;
  flex-shrink: 0;
  min-width: 125px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.card-status-bar {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.card-name {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-main);
}

.card-image {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
}

.card-pills {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pill-ip {
  font-size: 9px;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text-muted);
}

.pill-port {
  font-size: 9px;
  font-family: var(--font-mono);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}

.pill-vol {
  font-size: 9px;
  font-family: var(--font-mono);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  padding: 1px 4px;
  border-radius: 3px;
}

/* Light Theme Overrides for Topology Graph */
[data-theme="light"] .visual-graph-panel {
  background: #f8fafc;
  border-bottom-color: #cbd5e1;
}

[data-theme="light"] .count-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .count-pill strong {
  color: #0f172a;
}

[data-theme="light"] .graph-box {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .graph-container-card {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.1);
}

[data-theme="light"] .pill-ip {
  background: #f1f5f9;
  color: #475569;
}

[data-theme="light"] .graph-blueprint-empty {
  background: #ffffff;
  border-color: #cbd5e1;
}

.terminal-container {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px 12px;
  background-color: var(--bg-inset);
  overflow: hidden;
  position: relative;
}

#terminal {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Tactile Celebration Toast & Graduation Modal
   ========================================================================== */
.celebration-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow-card);
  padding: 14px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 100;
  animation: slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-icon {
  color: var(--border-accent);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-body {
  display: flex;
  flex-direction: column;
}

.toast-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-main);
  font-size: 13.5px;
  letter-spacing: 0.2px;
}

.toast-msg {
  color: var(--text-muted);
  font-size: 11.5px;
  font-family: var(--font-mono);
}

/* ==========================================================================
   ARCHITECTURE COMPARISON COMPONENT & STATUS PILLS
   ========================================================================== */

/* Outer Card Container */
.arch-card-wrapper {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card, 0 10px 25px -5px rgba(0, 0, 0, 0.4));
  border: 1px solid var(--border-color, #243247);
  background: var(--bg-card, #162032);
}

/* Card Header */
.arch-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--border-color, #243247);
}

.arch-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main, #f1f5f9);
}

.arch-header-title svg {
  stroke: var(--warning, #f59e0b);
  flex-shrink: 0;
}

/* Status Pills - Hidden */
.status-pill {
  display: none !important;
}

.status-pill-danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.status-pill-success {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.status-pill-warning {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.status-pill-info {
  background: rgba(14, 165, 233, 0.18) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
}

/* Side-by-Side Comparison Grid */
.drift-comparison-container {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
}

@media (max-width: 860px) {
  .drift-comparison-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .drift-vs-divider {
    transform: rotate(90deg);
    margin: 8px auto;
  }
}

.drift-box {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drift-box.dev-box {
  border-top: 3px solid var(--primary, #0284c7);
}

.drift-box.prod-box {
  border-top: 3px solid var(--danger, #ef4444);
}

.drift-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drift-header h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.badge-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stack Layers */
.drift-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-inset, #0b1120);
  border: 1px solid var(--border-color, #1e293b);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
}

.layer-version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.tag-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.tag-blue  { background: rgba(14, 165, 233, 0.15); color: #38bdf8; }
.tag-gray  { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.tag-red   { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.error-layer {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.05);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.error-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.error-annotation {
  color: #f87171;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.drift-vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

/* Footer Insight Box */
.footer-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(239, 68, 68, 0.08);
  border-top: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 12.5px;
  color: var(--text-main, #f1f5f9);
}

.insight-badge {
  background: #ef4444;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ==========================================================================
   USER AUTH & PROGRESS ACTION BAR STYLES
   ========================================================================== */

/* Auth Widget in Header */
.auth-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-main, #f1f5f9);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-pill-btn:hover {
  border-color: var(--primary, #0284c7);
}

/* Modal Backdrop & Window */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #243247);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-main, #f1f5f9);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.form-group input {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #243247);
  background: var(--bg-inset, #080b11);
  color: var(--text-main, #f1f5f9);
  font-size: 13px;
}

.auth-error {
  font-size: 12px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  padding: 8px 10px;
  border-radius: 4px;
}

.btn-primary-action {
  padding: 10px;
  background: var(--primary, #0284c7);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.modal-footer-switch {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 6px;
}

.modal-footer-switch a {
  color: var(--primary, #38bdf8);
  text-decoration: none;
  font-weight: 600;
}

/* Sticky Lesson Action Bar */
.lesson-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-surface, #111827);
  border-top: 1px solid var(--border-color, #243247);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}

.nav-direction-buttons {
  display: flex;
  gap: 8px;
}

.action-btn-nav {
  padding: 8px 14px;
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-main, #f1f5f9);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.action-btn-complete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: var(--bg-card, #162032);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  transition: all 0.2s ease;
}

.action-btn-complete:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

/* State when lesson is marked as completed */
.action-btn-complete.is-completed {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* State when user is browsing as a guest */
.action-btn-complete.is-guest-locked {
  background: var(--bg-card, #162032);
  border: 1px dashed var(--border-color, #cbd5e1);
  color: var(--text-muted, #64748b);
  opacity: 0.85;
}

.action-btn-complete.is-guest-locked:hover {
  background: rgba(2, 132, 199, 0.08);
  border-color: var(--primary, #0284c7);
  color: var(--primary, #0284c7);
  opacity: 1;
}

/* ==========================================================================
   VISUAL ARCHITECTURE CARDS & COMPARISON DIAGRAMS
   ========================================================================== */

.arch-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.arch-comparison-body {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 18px;
}

@media (max-width: 860px) {
  .arch-comparison-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .arch-vs-column {
    transform: rotate(90deg);
    margin: 6px auto;
  }
}

.arch-stack-col {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arch-stack-col.vm-stack {
  border-top: 3px solid #f59e0b;
}

.arch-stack-col.container-stack {
  border-top: 3px solid #10b981;
}

.stack-col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #243247);
}

.stack-title-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stack-col-title h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.stack-overhead-tag {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.tag-overhead-high {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.tag-overhead-low {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.tag-overhead-mid {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.4);
}

.arch-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* App Grid (Dual sub-boxes) */
.stack-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stack-app-box {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.stack-app-box .app-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.stack-app-box .lib-tag {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  background: var(--bg-inset, #0b1120);
  padding: 3px 6px;
  border-radius: 4px;
}

.stack-app-box.container-app {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.stack-app-box.container-app .app-tag-cont {
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
}

.stack-app-box.container-app .lib-tag-cont {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-main, #f1f5f9);
  background: var(--bg-inset, #0b1120);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Guest OS Layer (VM only) */
.stack-guest-os-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.5);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.stack-guest-os-box .layer-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #fbbf24;
}

.stack-guest-os-box .layer-desc {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

/* Single Layers spanning full width */
.stack-single-layer {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stack-single-layer .layer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stack-single-layer .layer-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.stack-single-layer .layer-desc {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
}

.stack-single-layer .layer-meta {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.stack-single-layer.hypervisor-layer {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.3);
}

.stack-single-layer.engine-layer {
  background: rgba(2, 132, 199, 0.07);
  border-color: rgba(2, 132, 199, 0.35);
}

.stack-single-layer.shared-kernel-layer {
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
}

.stack-single-layer.shared-kernel-layer .layer-title {
  color: #10b981;
}

.stack-single-layer.hardware-layer {
  background: var(--bg-inset, #0b1120);
  border-color: var(--border-color, #243247);
}

.stack-single-layer .layer-badge {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-muted, #94a3b8);
}

/* Metrics Footer */
.stack-metrics-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #243247);
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-inset, #0b1120);
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--border-subtle, #1e293b);
  text-align: center;
}

.metric-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}

.metric-val {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

.text-warning { color: #f59e0b !important; }
.text-success { color: #10b981 !important; }

/* Arch VS Column */
.arch-vs-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-vs-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ==========================================================================
   PIPELINE STEP DIAGRAMS (REGISTRY -> IMAGE -> CONTAINER)
   ========================================================================== */
.pipeline-flow-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.pipeline-step-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: border-color 0.2s;
}

.pipeline-step-card:hover {
  border-color: var(--primary, #0284c7);
}

.pipeline-step-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pipeline-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.15);
  color: var(--primary, #0284c7);
  border: 1px solid rgba(2, 132, 199, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.pipeline-step-info h4 {
  margin: 0 0 3px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.pipeline-step-info p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
}

.pipeline-transition-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--primary, #0284c7);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
}

.pipeline-transition-arrow code {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--primary, #0284c7);
}

/* ==========================================================================
   ENRICHED ARCHITECTURE MATRIX TABLE
   ========================================================================== */
.arch-matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 12.5px;
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card, #162032);
}

.arch-matrix-table th {
  background: var(--bg-surface, #111827);
  color: var(--text-main, #f1f5f9);
  padding: 11px 14px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color, #243247);
}

.arch-matrix-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #243247);
  vertical-align: middle;
}

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

.arch-matrix-table tr:nth-child(even) {
  background: var(--bg-inset, #0b1120);
}

.matrix-dim {
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
  display: flex;
  align-items: center;
  gap: 6px;
}

.matrix-val-vm {
  color: #fbbf24;
}

.matrix-val-cont {
  color: #34d399;
}

.arch-card-wrapper .arch-matrix-table {
  margin: 0;
  border: none;
  border-radius: 0;
}

.arch-table-section-row td {
  background: var(--bg-surface, #111827) !important;
  color: var(--primary, #0284c7) !important;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-top: 2px solid var(--border-color, #243247);
  border-bottom: 2px solid var(--border-color, #243247);
}

.arch-matrix-table .col-layer {
  width: 25%;
}

.arch-matrix-table .col-vm {
  width: 37.5%;
}

.arch-matrix-table .col-container {
  width: 37.5%;
}

/* ==========================================================================
   COMMAND CHOREOGRAPHY PIPELINE & FLAGS MATRIX TABLE
   ========================================================================== */

.choreography-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.trigger-cmd-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-left: 3px solid var(--primary, #0284c7);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trigger-cmd-card code {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  color: var(--primary, #0284c7);
  font-weight: 700;
}

/* Choreo Table Styling */
.choreo-trigger-bar {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-color, #243247);
  background: var(--bg-surface, #111827);
  padding: 10px 16px;
}

.trigger-cmd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trigger-cmd-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.trigger-cmd-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.trigger-cmd-code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--primary, #0284c7);
  font-weight: 700;
}

.choreo-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.choreo-matrix-table th {
  background: var(--bg-surface, #111827);
  color: var(--text-muted, #94a3b8);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #243247);
  text-align: left;
}

.choreo-matrix-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color, #243247);
  font-size: 12px;
  color: var(--text-main, #f1f5f9);
  line-height: 1.45;
}

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

.choreo-matrix-table tr:hover {
  background: rgba(2, 132, 199, 0.04);
}

.choreo-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(2, 132, 199, 0.12);
  color: var(--primary, #0284c7);
  border: 1px solid rgba(2, 132, 199, 0.35);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 800;
}

.choreo-title-cell {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-main, #f1f5f9);
  margin-bottom: 5px;
}

.choreo-step-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.15s, border-color 0.15s;
}

.choreo-step-card:hover {
  border-color: var(--primary, #0284c7);
  transform: translateX(2px);
}

.choreo-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.12);
  color: var(--primary, #0284c7);
  border: 1px solid rgba(2, 132, 199, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.choreo-content {
  flex: 1;
}

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

.choreo-header h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.choreo-content p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}

/* Premium Flags Table */
.flags-table-wrap {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color, #243247);
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.25));
  background: var(--bg-card, #162032);
}

.flags-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.flags-table th {
  background: var(--bg-surface, #111827);
  color: var(--text-main, #f1f5f9);
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color, #243247);
}

.flags-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color, #243247);
  vertical-align: middle;
}

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

.flags-table tr:hover {
  background: rgba(2, 132, 199, 0.04);
}

.flag-badge {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--bg-inset, #0b1120);
  border: 1px solid var(--border-color, #243247);
  color: var(--primary, #0284c7);
  white-space: nowrap;
}

.mode-tag {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
}

.mode-tag-runtime {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.mode-tag-io {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.mode-tag-cleanup {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.mode-tag-net {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.mode-tag-config {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.flag-use-case {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mini Terminal Comparison Blocks */
.mini-terminal-block {
  background: var(--bg-surface, #0d131f);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  margin-bottom: 8px;
}

.term-line {
  color: var(--text-main, #f1f5f9);
  display: flex;
  align-items: center;
  gap: 6px;
}

.term-prompt {
  color: var(--primary, #0284c7);
  font-weight: 700;
}

.term-out {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.term-out.term-warn {
  color: #fbbf24;
}

.term-out.term-success {
  color: #34d399;
}

.term-status {
  margin-top: 6px;
  font-size: 10px;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* ==========================================================================
   LIFECYCLE SIGNALS & SHUTDOWN CHOREOGRAPHY GRAPH
   ========================================================================== */

.lifecycle-flow-container {
  padding: 16px;
  background: var(--bg-card, #162032);
}

.flow-stage-node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.flow-stage-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.15);
  color: var(--primary, #0284c7);
  border: 1px solid rgba(2, 132, 199, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

.flow-stage-card {
  flex: 1;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 12px 14px;
}

.flow-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.flow-signal-pill {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.flow-signal-pill.sigterm {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.4);
}

.flow-signal-pill.sigkill {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.flow-target-meta {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.flow-stage-body {
  font-size: 12px;
  color: var(--text-main, #f1f5f9);
  line-height: 1.45;
}

.flow-connector-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.flow-line {
  width: 2px;
  height: 14px;
  background: var(--border-color, #243247);
}

.flow-timer-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  width: 90%;
  margin: 2px 0;
}

.flow-timer-title {
  color: #fbbf24;
  font-weight: 700;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.flow-timer-desc {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 3px;
  line-height: 1.4;
}

.flow-branch-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.flow-branch-card {
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  transition: transform 0.15s, border-color 0.15s;
}

.flow-branch-card.branch-success {
  border-left: 3px solid #10b981;
}

.flow-branch-card.branch-danger {
  border-left: 3px solid #ef4444;
}

.flow-branch-card:hover {
  transform: translateX(2px);
}

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

.branch-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.branch-tag.tag-success {
  color: #34d399;
}

.branch-tag.tag-danger {
  color: #f87171;
}

.branch-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
  margin-bottom: 4px;
}

.branch-desc {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.45;
  margin-bottom: 8px;
}

.branch-code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--primary, #0284c7);
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
}

/* ==========================================================================
   PID 1 LIFECYCLE & NAMESPACE CONTRACT GRAPH
   ========================================================================== */

.pid-flow-container {
  padding: 16px;
  background: var(--bg-card, #162032);
}

.pid-namespace-box {
  background: var(--bg-surface, #111827);
  border: 1px dashed rgba(2, 132, 199, 0.45);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
}

.pid-namespace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #243247);
}

.pid-namespace-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #0284c7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pid-process-card {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-left: 3px solid #38bdf8;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pid-process-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.pid-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 800;
  color: #38bdf8;
}

.pid-cmd-text {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-main, #f1f5f9);
}

.pid-process-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.pid-arrow-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.pid-arrow-line {
  width: 2px;
  height: 14px;
  background: var(--border-color, #243247);
}

.pid-kernel-event {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  padding: 8px 14px;
  text-align: center;
  width: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #f87171;
}

.pid-runtime-box {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 10px;
  padding: 14px 16px;
}

.pid-runtime-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pid-runtime-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pid-status-shift {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(2, 132, 199, 0.06);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  flex-wrap: wrap;
}

.shift-old {
  color: var(--text-muted, #94a3b8);
  text-decoration: line-through;
}

.shift-arrow {
  color: var(--primary, #0284c7);
  font-weight: 700;
}

.shift-new {
  color: #34d399;
  font-weight: 800;
}

/* ==========================================================================
   CONTAINER LOGGING STREAM PIPELINE GRAPH
   ========================================================================== */

.logging-flow-container {
  padding: 16px;
  background: var(--bg-card, #162032);
}

.log-tier-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 12px 14px;
}

.log-tier-card.tier-producer {
  border-left: 3px solid #38bdf8;
}

.log-tier-card.tier-driver {
  border-left: 3px solid #a78bfa;
}

.log-tier-card.tier-consumer {
  border-left: 3px solid #34d399;
}

.log-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.log-tier-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main, #f1f5f9);
}

.log-stream-pills {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.stream-pill {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.stream-pill.stdout {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.4);
}

.stream-pill.stderr {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.log-connector-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0;
}

.log-connector-line {
  width: 2px;
  height: 12px;
  background: var(--border-color, #243247);
}

.log-connector-pill {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  padding: 3px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   DOCKER EXEC & SETNS NAMESPACE ATTACHMENT GRAPH
   ========================================================================== */

.exec-flow-container {
  padding: 16px;
  background: var(--bg-card, #162032);
}

.exec-boundary-box {
  background: var(--bg-surface, #111827);
  border: 1px dashed rgba(2, 132, 199, 0.45);
  border-radius: 10px;
  padding: 14px 16px;
}

.exec-boundary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #243247);
  flex-wrap: wrap;
  gap: 6px;
}

.exec-boundary-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary, #0284c7);
}

.exec-process-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exec-process-item {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 10px 14px;
}

.exec-process-item.item-pid1 {
  border-left: 3px solid #10b981;
}

.exec-process-item.item-exec {
  border-left: 3px solid #38bdf8;
}

.exec-process-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.exec-pid-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exec-pid-badge.badge-green {
  color: #34d399;
}

.exec-pid-badge.badge-blue {
  color: #38bdf8;
}

.exec-bridge-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.exec-bridge-line {
  width: 2px;
  height: 12px;
  background: var(--border-color, #243247);
}

.exec-bridge-pill {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
}

.exec-bridge-subtext {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  margin-top: 4px;
  text-align: center;
}

.exec-client-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-left: 3px solid var(--primary, #0284c7);
  border-radius: 8px;
  padding: 12px 14px;
}

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

/* ==========================================================================
   CRASHLOOP TRIAGE & REMEDIATION PIPELINE GRAPH
   ========================================================================== */

.triage-flow-container {
  padding: 16px;
  background: var(--bg-card, #162032);
  display: flex;
  flex-direction: column;
}

.triage-step-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 12px 14px;
  transition: transform 0.15s, border-color 0.15s;
}

.triage-step-card:hover {
  border-color: var(--primary, #0284c7);
  transform: translateX(2px);
}

.triage-step-card.step-1 { border-left: 3px solid #fbbf24; }
.triage-step-card.step-2 { border-left: 3px solid #38bdf8; }
.triage-step-card.step-3 { border-left: 3px solid #f87171; }
.triage-step-card.step-4 { border-left: 3px solid #34d399; }

.triage-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.triage-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.triage-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  background: rgba(2, 132, 199, 0.15);
  color: var(--primary, #0284c7);
  border: 1px solid rgba(2, 132, 199, 0.35);
}

.triage-cmd-row {
  margin: 6px 0;
}

.triage-cmd-row code {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--primary, #0284c7);
  font-weight: 700;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

.triage-step-obs {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.45;
}

.triage-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 14px;
}

.triage-connector-line {
  width: 2px;
  height: 100%;
  background: var(--border-color, #243247);
}

/* ==========================================================================
   PORT FORWARDING & NETWORK NAT GRAPH
   ========================================================================== */

.port-network-flow {
  padding: 16px;
  background: var(--bg-card, #162032);
}

.port-zone-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 12px 14px;
}

.port-zone-card.zone-host {
  border-left: 3px solid #38bdf8;
}

.port-zone-card.zone-container {
  border-left: 3px solid #34d399;
}

.port-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.port-zone-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main, #f1f5f9);
}

.port-endpoint-box {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.port-endpoint-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-main, #f1f5f9);
}

.port-nat-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.port-nat-line {
  width: 2px;
  height: 12px;
  background: var(--border-color, #243247);
}

.port-nat-badge {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
}

.port-nat-desc {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  margin-top: 4px;
  text-align: center;
}

/* Port Syntax Breakdown Card */
.port-syntax-wrap {
  margin: 18px 0;
  padding: 16px;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 10px;
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.25));
}

.port-syntax-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.syntax-flag-pill {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0284c7);
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.4);
  padding: 8px 12px;
  border-radius: 6px;
}

.syntax-part-card {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  min-width: 130px;
}

.syntax-part-card.part-host {
  border-top: 3px solid #38bdf8;
}

.syntax-part-card.part-container {
  border-top: 3px solid #34d399;
}

.syntax-part-title {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main, #f1f5f9);
}

.syntax-part-sub {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.syntax-part-sep {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-muted, #94a3b8);
}

/* ==========================================================================
   PORT MULTIPLEXING & NAMESPACE COLLISION GRAPH
   ========================================================================== */

.multiplex-flow-container {
  padding: 16px;
  background: var(--bg-card, #162032);
}

.multiplex-host-box {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-left: 3px solid #38bdf8;
  border-radius: 8px;
  padding: 12px 14px;
}

.multiplex-host-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.multiplex-host-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main, #f1f5f9);
}

.multiplex-host-ports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.host-port-badge-box {
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.host-port-num {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
}

.host-port-label {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

.multiplex-routes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.multiplex-route-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.multiplex-arrow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px 0;
  width: 100%;
}

.multiplex-arrow-line {
  width: 2px;
  height: 10px;
  background: var(--border-color, #243247);
}

.multiplex-nat-tag {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiplex-container-card {
  width: 100%;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-top: 3px solid #34d399;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.multiplex-container-title {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main, #f1f5f9);
}

.multiplex-container-ip {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--primary, #0284c7);
}

.multiplex-container-port {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #34d399;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
}

/* ==========================================================================
   Navigation Buttons & Global Light Mode Enhancements
   ========================================================================== */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.nav-btn:hover {
  color: var(--primary);
  border-color: var(--border-accent);
  background: var(--bg-surface);
}

.nav-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
  margin-left: 6px;
  transition: all 0.15s ease;
}

.nav-home-btn:hover {
  background: rgba(2, 132, 199, 0.2);
}

/* ==========================================================================
   Complete Accessible Light Mode Overrides
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="light"] .terminal-container {
  background-color: #ffffff !important;
}

[data-theme="light"] .terminal-header {
  background: #f8fafc;
  border-bottom-color: #cbd5e1;
}

[data-theme="light"] .terminal-title {
  color: #475569;
}

[data-theme="light"] .terminal-status-badge {
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.3);
}

/* Status Pills in Light Mode - High Contrast Accessible Palettes */
[data-theme="light"] .status-pill-danger {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  box-shadow: none !important;
}

[data-theme="light"] .status-pill-success {
  background: rgba(5, 150, 105, 0.08) !important;
  color: #059669 !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  box-shadow: none !important;
}

[data-theme="light"] .status-pill-warning {
  background: rgba(217, 119, 6, 0.08) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
  box-shadow: none !important;
}

[data-theme="light"] .status-pill-info {
  background: rgba(2, 132, 199, 0.08) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  box-shadow: none !important;
}

/* Architecture Cards & Tables */
[data-theme="light"] .arch-card,
[data-theme="light"] .arch-card-wrapper {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .arch-card-header {
  background: #f8fafc !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .arch-header-title {
  color: #0f172a !important;
}

[data-theme="light"] .matrix-val-vm {
  color: #b45309 !important;
}

[data-theme="light"] .matrix-val-cont {
  color: #047857 !important;
}

[data-theme="light"] .tag-overhead-high {
  background: rgba(217, 119, 6, 0.1) !important;
  color: #b45309 !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}

[data-theme="light"] .tag-overhead-low {
  background: rgba(5, 150, 105, 0.1) !important;
  color: #047857 !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

[data-theme="light"] .tag-overhead-mid {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0369a1 !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

[data-theme="light"] .tag-green {
  background: rgba(5, 150, 105, 0.1) !important;
  color: #047857 !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
}

[data-theme="light"] .tag-blue {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0369a1 !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
}

[data-theme="light"] .tag-gray {
  background: rgba(100, 116, 139, 0.1) !important;
  color: #475569 !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

[data-theme="light"] .tag-red {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
}

[data-theme="light"] .error-annotation {
  color: #dc2626 !important;
}

[data-theme="light"] .error-layer {
  background: rgba(220, 38, 38, 0.04) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}

[data-theme="light"] .drift-box {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .drift-box .stack-layer {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .drift-header h4 {
  color: #0f172a !important;
}

[data-theme="light"] .drift-vs-divider {
  background: #e2e8f0 !important;
  color: #64748b !important;
}

/* Mode Tags */
[data-theme="light"] .mode-tag-runtime {
  background: rgba(2, 132, 199, 0.09) !important;
  color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

[data-theme="light"] .mode-tag-io {
  background: rgba(124, 58, 237, 0.09) !important;
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

[data-theme="light"] .mode-tag-cleanup {
  background: rgba(220, 38, 38, 0.09) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

[data-theme="light"] .mode-tag-net {
  background: rgba(5, 150, 105, 0.09) !important;
  color: #059669 !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

[data-theme="light"] .mode-tag-config {
  background: rgba(217, 119, 6, 0.09) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}

/* Choreography Tables */
[data-theme="light"] .trigger-cmd-card {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .choreo-trigger-bar {
  background: #f8fafc !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .choreo-matrix-table th {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .choreo-matrix-table td {
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .choreo-matrix-table tr:hover {
  background: rgba(2, 132, 199, 0.04) !important;
}

[data-theme="light"] .choreo-num-badge {
  background: #e2e8f0 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .choreo-title-cell {
  color: #0f172a !important;
}

/* Triage Step Cards */
[data-theme="light"] .triage-step-card {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .triage-step-title {
  color: #0f172a !important;
}

[data-theme="light"] .triage-step-obs {
  color: #334155 !important;
}

[data-theme="light"] .triage-step-card.step-1 { border-left-color: #d97706 !important; }
[data-theme="light"] .triage-step-card.step-2 { border-left-color: #0284c7 !important; }
[data-theme="light"] .triage-step-card.step-3 { border-left-color: #dc2626 !important; }
[data-theme="light"] .triage-step-card.step-4 { border-left-color: #059669 !important; }

/* Blueprints & Foundation */
[data-theme="light"] .container-blueprint {
  background: #ffffff !important;
}

[data-theme="light"] .blueprint-layer {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .layer-title {
  color: #0f172a !important;
}

[data-theme="light"] .layer-number {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .layer-pill {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .blueprint-foundation {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .foundation-head {
  color: #0f172a !important;
}

[data-theme="light"] .badge-chip {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

/* Code Blocks & Tables in Markdown */
[data-theme="light"] .markdown-body pre {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .markdown-body pre code {
  color: #0f172a !important;
}

[data-theme="light"] .markdown-body code {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .markdown-body table {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .markdown-body th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .markdown-body td {
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .markdown-body tr:nth-child(even) {
  background-color: #f8fafc !important;
}

/* Lesson Action Bar & Complete Button */
[data-theme="light"] .lesson-action-bar {
  background: #ffffff !important;
  border-top-color: #cbd5e1 !important;
}

[data-theme="light"] .action-btn-nav {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .action-btn-nav:hover {
  background: #f1f5f9 !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .action-btn-complete {
  background: #ffffff !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
  color: #059669 !important;
}

[data-theme="light"] .action-btn-complete:hover {
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: #059669 !important;
  color: #047857 !important;
}

[data-theme="light"] .action-btn-complete.is-completed {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

[data-theme="light"] .action-btn-complete.is-guest-locked {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

/* Step Items in Labs */
[data-theme="light"] .step-item {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .step-item.active {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] .step-item.completed {
  background: #ffffff !important;
  border-color: #059669 !important;
}

[data-theme="light"] .step-text {
  color: #0f172a !important;
}

[data-theme="light"] .step-action-row {
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .btn-run-terminal {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .btn-run-terminal:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

[data-theme="light"] .hint-box {
  background: rgba(217, 119, 6, 0.07) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  color: #b45309 !important;
}

[data-theme="light"] .multiplex-container-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  border-top-color: #059669 !important;
}

[data-theme="light"] .multiplex-container-title {
  color: #0f172a !important;
}

[data-theme="light"] .multiplex-container-port {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

/* ==========================================================================
   Security Architecture Graph Card (Container UID & Kernel Isolation)
   ========================================================================== */
.security-arch-card {
  margin: 26px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--border-color, #243247);
  background: var(--bg-card, #162032);
  transition: all 0.25s ease;
}

[data-theme="light"] .security-arch-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.1);
}

.security-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--border-color, #243247);
}

[data-theme="light"] .security-card-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

.security-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .security-card-title {
  color: #0f172a;
}

.security-card-title svg {
  stroke: #ef4444;
  flex-shrink: 0;
}

.security-telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

[data-theme="light"] .security-telemetry-badge {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.security-canvas {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.04) 0%, transparent 70%);
}

.sec-nodes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .sec-nodes-grid {
    grid-template-columns: 1fr;
  }
}

.sec-node {
  border-radius: 10px;
  padding: 16px;
  border: 1.5px solid;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sec-node:hover {
  transform: translateY(-2px);
}

.sec-node-danger {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .sec-node-danger {
  background: #fff5f5;
  border-color: #fca5a5;
}

.sec-node-safe {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .sec-node-safe {
  background: #f0fdf4;
  border-color: #86efac;
}

.sec-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-node-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .sec-node-title {
  color: #0f172a;
}

.sec-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.04em;
}

.sec-pill-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

[data-theme="light"] .sec-pill-danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.sec-pill-safe {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .sec-pill-safe {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.sec-process-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  border: 1px solid var(--border-color, #243247);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-theme="light"] .sec-process-box {
  background: #ffffff;
  border-color: #e2e8f0;
}

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

.sec-process-cmd {
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .sec-process-cmd {
  color: #1e293b;
}

.sec-process-uid {
  font-weight: 700;
}

.uid-danger {
  color: #f87171;
}

[data-theme="light"] .uid-danger {
  color: #dc2626;
}

.uid-safe {
  color: #34d399;
}

[data-theme="light"] .uid-safe {
  color: #16a34a;
}

.sec-mapping-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.sec-mapping-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

[data-theme="light"] .sec-mapping-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.sec-mapping-safe {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #86efac;
}

[data-theme="light"] .sec-mapping-safe {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.sec-annotation {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-subtle, #94a3b8);
}

[data-theme="light"] .sec-annotation {
  color: #475569;
}

.sec-flow-pipes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 20px;
  position: relative;
}

.sec-pipe-line {
  margin: 0 auto;
  width: 2px;
  height: 100%;
  position: relative;
}

.sec-pipe-danger {
  background: linear-gradient(180deg, #ef4444 0%, rgba(239, 68, 68, 0.2) 100%);
}

.sec-pipe-safe {
  background: linear-gradient(180deg, #10b981 0%, rgba(16, 185, 129, 0.2) 100%);
}

.sec-kernel-layer {
  border-radius: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .sec-kernel-layer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #bae6fd;
}

.sec-kernel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-kernel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .sec-kernel-title {
  color: #0369a1;
}

.sec-kernel-namespaces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sec-ns-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

[data-theme="light"] .sec-ns-tag {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

.sec-hardware-layer {
  border-radius: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--border-color, #243247);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-subtle, #94a3b8);
}

[data-theme="light"] .sec-hardware-layer {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}

.sec-card-footer {
  padding: 10px 18px;
  background: var(--bg-surface, #111827);
  border-top: 1px solid var(--border-color, #243247);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle, #94a3b8);
}

[data-theme="light"] .sec-card-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
  color: #475569;
}

/* ==========================================================================
   Capability Partitioning Architecture Graph Card
   ========================================================================== */
.cap-arch-card {
  margin: 26px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--border-color, #243247);
  background: var(--bg-card, #162032);
  transition: all 0.25s ease;
}

[data-theme="light"] .cap-arch-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.1);
}

.cap-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--border-color, #243247);
}

[data-theme="light"] .cap-card-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

.cap-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .cap-card-title {
  color: #0f172a;
}

.cap-card-title svg {
  stroke: #0284c7;
  flex-shrink: 0;
}

.cap-telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.35);
}

[data-theme="light"] .cap-telemetry-badge {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0284c7;
}

.cap-canvas {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cap-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 820px) {
  .cap-tiers-grid {
    grid-template-columns: 1fr;
  }
}

.cap-tier-box {
  border-radius: 10px;
  padding: 16px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cap-tier-box:hover {
  transform: translateY(-2px);
}

/* Tier 1: Default Warning */
.cap-tier-warning {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="light"] .cap-tier-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

/* Tier 2: Neutral Dropped */
.cap-tier-stripped {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="light"] .cap-tier-stripped {
  background: #f5f3ff;
  border-color: #ddd6fe;
}

/* Tier 3: Hardened Golden Standard */
.cap-tier-golden {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .cap-tier-golden {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.cap-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cap-tier-step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-subtle, #94a3b8);
}

.cap-tier-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.cap-badge-warn {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

[data-theme="light"] .cap-badge-warn {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.cap-badge-drop {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.5);
}

[data-theme="light"] .cap-badge-drop {
  background: #ede9fe;
  color: #6366f1;
  border-color: #ddd6fe;
}

.cap-badge-safe {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .cap-badge-safe {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.cap-tier-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .cap-tier-title {
  color: #0f172a;
}

.cap-cmd-pill {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  border: 1px solid var(--border-color, #243247);
  color: var(--text-main, #f1f5f9);
  white-space: nowrap;
  overflow-x: auto;
}

[data-theme="light"] .cap-cmd-pill {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #1e293b;
}

.cap-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.cap-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 4px;
}

.cap-allowed {
  background: rgba(16, 185, 129, 0.08);
  color: #34d399;
}

[data-theme="light"] .cap-allowed {
  background: #f0fdf4;
  color: #15803d;
}

.cap-blocked {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  text-decoration: line-through;
}

[data-theme="light"] .cap-blocked {
  background: #fef2f2;
  color: #b91c1c;
}

.cap-tier-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-subtle, #94a3b8);
  margin-top: auto;
}

[data-theme="light"] .cap-tier-desc {
  color: #475569;
}

/* ==========================================================================
   Filesystem Immutability Architecture Graph Card
   ========================================================================== */
.fs-arch-card {
  margin: 26px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--border-color, #243247);
  background: var(--bg-card, #162032);
  transition: all 0.25s ease;
}

[data-theme="light"] .fs-arch-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.1);
}

.fs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--border-color, #243247);
}

[data-theme="light"] .fs-card-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

.fs-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .fs-card-title {
  color: #0f172a;
}

.fs-card-title svg {
  stroke: #10b981;
  flex-shrink: 0;
}

.fs-telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

[data-theme="light"] .fs-telemetry-badge {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.fs-canvas {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fs-layers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 680px) {
  .fs-layers-grid {
    grid-template-columns: 1fr;
  }
}

.fs-stack-box {
  border-radius: 10px;
  padding: 16px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fs-stack-box:hover {
  transform: translateY(-2px);
}

.fs-box-danger {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .fs-box-danger {
  background: #fff5f5;
  border-color: #fca5a5;
}

.fs-box-safe {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .fs-box-safe {
  background: #f0fdf4;
  border-color: #86efac;
}

.fs-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .fs-box-title {
  color: #0f172a;
}

.fs-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.fs-badge-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

[data-theme="light"] .fs-badge-danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.fs-badge-safe {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .fs-badge-safe {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.fs-layer-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fs-layer-item {
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid;
  transition: all 0.2s ease;
}

.fs-layer-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

[data-theme="light"] .fs-layer-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.fs-layer-locked {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.35);
  color: #38bdf8;
}

[data-theme="light"] .fs-layer-locked {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
}

.fs-layer-tmpfs {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

[data-theme="light"] .fs-layer-tmpfs {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d;
}

.fs-layer-base {
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--border-color, #243247);
  color: var(--text-subtle, #94a3b8);
}

[data-theme="light"] .fs-layer-base {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

.fs-tag-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.fs-tag-rw {
  background: #ef4444;
  color: #ffffff;
}

.fs-tag-ro {
  background: #0284c7;
  color: #ffffff;
}

.fs-tag-tmpfs {
  background: #10b981;
  color: #ffffff;
}

.fs-summary-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-subtle, #94a3b8);
  margin-top: auto;
}

[data-theme="light"] .fs-summary-note {
  color: #475569;
}

/* ==========================================================================
   Attack Surface Comparison Architecture Graph Card
   ========================================================================== */
.attack-arch-card {
  margin: 26px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--border-color, #243247);
  background: var(--bg-card, #162032);
  transition: all 0.25s ease;
}

[data-theme="light"] .attack-arch-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.1);
}

.attack-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--border-color, #243247);
}

[data-theme="light"] .attack-card-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

.attack-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .attack-card-title {
  color: #0f172a;
}

.attack-card-title svg {
  stroke: #f59e0b;
  flex-shrink: 0;
}

.attack-telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .attack-telemetry-badge {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

.attack-canvas {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.attack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

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

.attack-card {
  border-radius: 10px;
  padding: 16px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.attack-card:hover {
  transform: translateY(-2px);
}

.attack-danger {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .attack-danger {
  background: #fff5f5;
  border-color: #fca5a5;
}

.attack-warning {
  background: rgba(14, 165, 233, 0.04);
  border-color: rgba(14, 165, 233, 0.4);
}

[data-theme="light"] .attack-warning {
  background: #f0f9ff;
  border-color: #bae6fd;
}

.attack-safe {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .attack-safe {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.attack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.attack-tier-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-subtle, #94a3b8);
}

.attack-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.attack-badge-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

[data-theme="light"] .attack-badge-danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.attack-badge-warning {
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.5);
}

[data-theme="light"] .attack-badge-warning {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

.attack-badge-safe {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .attack-badge-safe {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.attack-image-name {
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .attack-image-name {
  color: #0f172a;
}

.attack-meter-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.attack-meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.attack-meter-bg {
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-color, #243247);
}

[data-theme="light"] .attack-meter-bg {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.attack-meter-fill {
  height: 100%;
  border-radius: 3px;
}

.fill-danger {
  background: #ef4444;
}

.fill-warning {
  background: #0284c7;
}

.fill-safe {
  background: #10b981;
}

.attack-specs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.attack-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color, #243247);
}

[data-theme="light"] .attack-spec-row {
  background: #ffffff;
  border-color: #e2e8f0;
}

.attack-summary-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-subtle, #94a3b8);
  margin-top: auto;
}

[data-theme="light"] .attack-summary-note {
  color: #475569;
}

/* ==========================================================================
   DEPLOYMENT EVOLUTION GRAPH (BARE-METAL -> VMS -> CONTAINERS)
   ========================================================================== */
.evolution-flow-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.evolution-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.evolution-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.evolution-card.era-baremetal {
  border-left: 3px solid #ef4444;
}

.evolution-card.era-vms {
  border-left: 3px solid #f59e0b;
}

.evolution-card.era-containers {
  border-left: 3px solid #10b981;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-surface, #111827) 100%);
}

.evolution-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.evolution-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, #243247);
  flex-shrink: 0;
}

.era-baremetal .evolution-icon-wrap {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.era-vms .evolution-icon-wrap {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.era-containers .evolution-icon-wrap {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.08);
}

.evolution-name-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.evolution-era-pill {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.era-baremetal .evolution-era-pill {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
}

.era-vms .evolution-era-pill {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.08);
}

.era-containers .evolution-era-pill {
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
}

.evolution-desc-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
  margin: 0;
}

.evolution-metrics-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .evolution-metrics-matrix {
    grid-template-columns: repeat(2, 1fr);
  }
}

.evolution-metric-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.evolution-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
}

.evolution-metric-val {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evolution-leap-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
}

.evolution-leap-line {
  flex: 1;
  height: 1px;
  background: var(--border-color, #243247);
}

.evolution-leap-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--bg-card, #162032);
  border: 1px solid var(--border-color, #243247);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary, #0284c7);
  letter-spacing: 0.02em;
}

/* Light Theme overrides */
[data-theme="light"] .evolution-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .evolution-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .evolution-card.era-containers {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, #ffffff 100%);
}

[data-theme="light"] .evolution-name-text {
  color: #0f172a;
}

[data-theme="light"] .evolution-desc-text {
  color: #475569;
}

[data-theme="light"] .evolution-metric-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .evolution-metric-label {
  color: #64748b;
}

[data-theme="light"] .evolution-metric-val {
  color: #0f172a;
}

[data-theme="light"] .evolution-leap-pill {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0284c7;
}

[data-theme="light"] .evolution-leap-line {
  background: #e2e8f0;
}

/* ==========================================================================
   12-FACTOR ENVIRONMENT VARIABLE FANOUT GRAPH
   ========================================================================== */
.env-fanout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px;
  gap: 0;
  width: 100%;
}

.env-root-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-top: 3px solid var(--primary, #0284c7);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
}

.env-root-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.env-root-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
  letter-spacing: 0.03em;
}

.env-image-tag {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0284c7);
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.35);
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.env-root-desc {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin: 0;
}

/* Branch Tree SVG / Connector */
.env-tree-connector {
  width: 100%;
  height: 48px;
  position: relative;
}

.env-tree-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Targets Grid */
.env-targets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

@media (max-width: 720px) {
  .env-targets-grid {
    grid-template-columns: 1fr;
  }
  .env-tree-connector {
    display: none;
  }
}

.env-target-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.env-target-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.env-target-card.target-dev {
  border-top: 3px solid #0284c7;
}

.env-target-card.target-stage {
  border-top: 3px solid #f59e0b;
}

.env-target-card.target-prod {
  border-top: 3px solid #10b981;
}

.env-target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.env-target-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.env-target-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.target-dev .env-target-pill {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.target-stage .env-target-pill {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.target-prod .env-target-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.env-flag-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.env-flag-icon {
  font-size: 11px;
}

.env-flag-code {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary, #0284c7);
}

.target-dev .env-flag-code { color: #38bdf8; }
.target-stage .env-flag-code { color: #fbbf24; }
.target-prod .env-flag-code { color: #34d399; }

.env-specs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
}

.env-spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.env-spec-item:last-child {
  border-bottom: none;
}

.env-spec-label {
  color: var(--text-muted, #94a3b8);
}

.env-spec-val {
  font-weight: 600;
  color: var(--text-main, #f1f5f9);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
}

/* Light theme overrides */
[data-theme="light"] .env-root-card,
[data-theme="light"] .env-target-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .env-root-card:hover,
[data-theme="light"] .env-target-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .env-root-title,
[data-theme="light"] .env-target-name,
[data-theme="light"] .env-spec-val {
  color: #0f172a;
}

[data-theme="light"] .env-root-desc,
[data-theme="light"] .env-spec-label {
  color: #64748b;
}

[data-theme="light"] .env-flag-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .env-spec-item {
  border-bottom-color: #f1f5f9;
}

/* ==========================================================================
   INTERACTIVE TTY (-i & -t) BRIDGE ARCHITECTURE GRAPH
   ========================================================================== */
.tty-flow-container {
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

@media (max-width: 768px) {
  .tty-flow-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.tty-node-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.tty-node-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tty-node-card.node-user {
  border-top: 3px solid #0284c7;
}

.tty-node-card.node-container {
  border-top: 3px solid #10b981;
}

.tty-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tty-node-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tty-node-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.tty-node-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}

.node-user .tty-node-badge {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.node-container .tty-node-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tty-subfeatures-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tty-subfeature-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
}

.tty-subfeature-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.tty-subfeature-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tty-subfeature-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main, #f1f5f9);
}

.tty-subfeature-desc {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
}

/* Middle Channels */
.tty-bridge-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.tty-channel-pipe {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tty-pipe-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.tty-pipe-tag.pipe-stdin {
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: #38bdf8;
}

.tty-pipe-tag.pipe-pty {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.tty-pipe-arrow-line {
  position: relative;
  height: 2px;
  width: 100%;
}

.tty-pipe-arrow-line.arrow-forward {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}

.tty-pipe-arrow-line.arrow-forward::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: #38bdf8;
}

.tty-pipe-arrow-line.arrow-return {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.tty-pipe-arrow-line.arrow-return::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -4px;
  border: 5px solid transparent;
  border-right-color: #fbbf24;
}

.tty-pipe-subtext {
  font-size: 9.5px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Light theme overrides */
[data-theme="light"] .tty-node-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .tty-node-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .tty-node-title,
[data-theme="light"] .tty-subfeature-text {
  color: #0f172a;
}

[data-theme="light"] .tty-subfeature-row {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .tty-subfeature-desc,
[data-theme="light"] .tty-pipe-subtext {
  color: #64748b;
}

/* ==========================================================================
   IMAGE BUNDLE ARCHIVE ANATOMY GRAPH
   ========================================================================== */
.image-bundle-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.bundle-layer-row {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.2s ease;
}

.bundle-layer-row:hover {
  border-color: var(--primary, #0284c7);
  transform: translateX(2px);
}

.bundle-layer-row.layer-meta {
  border-left: 3px solid #818cf8;
}

.bundle-layer-row.layer-app {
  border-left: 3px solid #38bdf8;
}

.bundle-layer-row.layer-runtime {
  border-left: 3px solid #fbbf24;
}

.bundle-layer-row.layer-rootfs {
  border-left: 3px solid #34d399;
}

.bundle-layer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bundle-layer-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.layer-meta .bundle-layer-badge {
  color: #a5b4fc;
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.3);
}

.layer-app .bundle-layer-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
}

.layer-runtime .bundle-layer-badge {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
}

.layer-rootfs .bundle-layer-badge {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
}

.bundle-layer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bundle-layer-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.bundle-layer-desc {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.bundle-layer-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, #243247);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.bundle-guarantee-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 11.5px;
  color: #34d399;
  font-weight: 600;
  margin-top: 4px;
}

/* Light theme overrides */
[data-theme="light"] .bundle-layer-row {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .bundle-layer-row:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .bundle-layer-title {
  color: #0f172a;
}

[data-theme="light"] .bundle-layer-desc {
  color: #64748b;
}

[data-theme="light"] .bundle-layer-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .bundle-guarantee-strip {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

/* ==========================================================================
   DOCKER BUILD CONTEXT TRANSMISSION GRAPH
   ========================================================================== */
.context-flow-container {
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #162032);
}

.context-cmd-bar {
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--border-color, #243247);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.context-cmd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.context-cmd-code {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0284c7);
}

.context-cmd-target {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.context-grid {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

@media (max-width: 768px) {
  .context-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.context-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.context-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.context-card.card-client {
  border-top: 3px solid #0284c7;
}

.context-card.card-daemon {
  border-top: 3px solid #10b981;
}

.context-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.context-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.context-card-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}

.card-client .context-card-badge {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.card-daemon .context-card-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.context-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.context-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
}

.context-step-num {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #94a3b8);
}

.card-client .context-step-num {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.card-daemon .context-step-num {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.context-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.context-step-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main, #f1f5f9);
}

.context-step-sub {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
}

/* Pipe Channel */
.context-pipe-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.context-pipe-tag {
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: #38bdf8;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.context-arrow-line {
  position: relative;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #0284c7, #10b981);
}

.context-arrow-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: #10b981;
}

.context-pipe-detail {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-align: center;
}

/* Light theme overrides */
[data-theme="light"] .context-cmd-bar,
[data-theme="light"] .context-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .context-flow-container {
  background: #f8fafc;
}

[data-theme="light"] .context-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .context-card-title,
[data-theme="light"] .context-step-head {
  color: #0f172a;
}

[data-theme="light"] .context-step-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .context-step-sub,
[data-theme="light"] .context-pipe-detail {
  color: #64748b;
}

/* ==========================================================================
   COPY FILESYSTEM TRANSFER GRAPH
   ========================================================================== */
.copy-flow-container {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

@media (max-width: 768px) {
  .copy-flow-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.copy-tree-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.copy-tree-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.copy-tree-card.card-host {
  border-top: 3px solid #0284c7;
}

.copy-tree-card.card-container {
  border-top: 3px solid #10b981;
}

.copy-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.copy-tree-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.copy-tree-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.card-host .copy-tree-badge {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.card-container .copy-tree-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.copy-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
}

.copy-dir-root {
  font-weight: 700;
  color: var(--primary, #0284c7);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.card-container .copy-dir-root {
  color: #34d399;
}

.copy-file-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 12px;
  position: relative;
  color: var(--text-main, #f1f5f9);
}

.copy-file-entry::before {
  content: "├──";
  position: absolute;
  left: 0;
  color: var(--text-muted, #64748b);
  font-size: 10px;
}

.copy-file-entry:last-child::before {
  content: "└──";
}

.copy-file-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.copy-file-type {
  font-size: 9.5px;
  color: var(--text-muted, #94a3b8);
}

/* Pipe Channel */
.copy-pipe-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.copy-pipe-tag {
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: #38bdf8;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.copy-pipe-arrow {
  position: relative;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #0284c7, #10b981);
}

.copy-pipe-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: #10b981;
}

.copy-pipe-desc {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-align: center;
}

/* Light theme overrides */
[data-theme="light"] .copy-tree-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .copy-tree-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .copy-tree-title,
[data-theme="light"] .copy-file-entry {
  color: #0f172a;
}

[data-theme="light"] .copy-file-list {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .copy-pipe-desc,
[data-theme="light"] .copy-file-type {
  color: #64748b;
}

/* ==========================================================================
   ENTRYPOINT VS CMD EXECUTION PIPELINE GRAPH
   ========================================================================== */
.arch-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-transform: uppercase;
}

.arch-card-title svg {
  stroke: var(--warning, #f59e0b);
  flex-shrink: 0;
}

.entrypoint-flow-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  color: #ffffff;
}

.entrypoint-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #ffffff;
  transition: all 0.2s ease;
}

.entrypoint-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.entrypoint-card.card-dockerfile {
  border-top: 3px solid #8b5cf6;
}

.entrypoint-card.card-default {
  border-top: 3px solid #0284c7;
}

.entrypoint-card.card-override {
  border-top: 3px solid #10b981;
}

.entrypoint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.entrypoint-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.entrypoint-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.card-dockerfile .entrypoint-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.card-default .entrypoint-badge {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.card-override .entrypoint-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.entrypoint-directives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .entrypoint-directives {
    grid-template-columns: 1fr;
  }
}

.entrypoint-directive-row {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.directive-tag {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.tag-entrypoint {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.tag-cmd {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.directive-role {
  font-size: 10px;
  color: #ffffff;
  font-weight: 600;
  opacity: 0.95;
}

.directive-code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.25);
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Connector */
.entrypoint-connector-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2px 0;
}

.entrypoint-connector-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 12px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Comparison Grid */
.entrypoint-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

.entrypoint-cmd-box {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 8px 12px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.entrypoint-combo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}

.combo-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.combo-ep {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.combo-cmd {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.combo-cli {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.combo-plus {
  font-weight: 800;
  color: #ffffff;
  font-size: 11px;
}

.entrypoint-process-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-box-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #ffffff;
  opacity: 0.9;
}

.process-box-cmd {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 700;
  color: #4ade80;
}

.entrypoint-card-note {
  font-size: 10.5px;
  color: #ffffff;
  opacity: 0.95;
  line-height: 1.4;
}

/* Light theme overrides */
[data-theme="light"] .arch-card-title {
  color: #0f172a;
}

[data-theme="light"] .entrypoint-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .entrypoint-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .entrypoint-card-title,
[data-theme="light"] .directive-code {
  color: #0f172a;
}

[data-theme="light"] .entrypoint-directive-row,
[data-theme="light"] .entrypoint-process-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .directive-code {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .entrypoint-connector-pill {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .entrypoint-card-note,
[data-theme="light"] .directive-role,
[data-theme="light"] .process-box-label {
  color: #475569;
}

[data-theme="light"] .combo-plus {
  color: #64748b;
}

[data-theme="light"] .process-box-cmd {
  color: #15803d;
}

[data-theme="light"] .entrypoint-cmd-box {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* ==========================================================================
   DEPENDENCY PILLARS GRAPH (SYSTEM RUNTIMES, LIBS, ENV)
   ========================================================================== */
.dep-pillars-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px;
}

@media (max-width: 768px) {
  .dep-pillars-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.dep-pillar-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #ffffff;
  transition: all 0.2s ease;
  position: relative;
}

.dep-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.dep-pillar-card.card-runtime {
  border-top: 3px solid #0284c7;
}

.dep-pillar-card.card-libs {
  border-top: 3px solid #8b5cf6;
}

.dep-pillar-card.card-config {
  border-top: 3px solid #f59e0b;
}

.dep-pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dep-pillar-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dep-pillar-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.card-runtime .dep-pillar-badge {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.card-libs .dep-pillar-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.card-config .dep-pillar-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.dep-pillar-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.dep-pillar-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: #ffffff;
  opacity: 0.95;
  margin: 0;
  flex: 1;
}

.dep-pillar-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dep-sub-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color, #243247);
  color: #ffffff;
}

/* Light theme overrides */
[data-theme="light"] .dep-pillar-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .dep-pillar-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .dep-pillar-title {
  color: #0f172a;
}

[data-theme="light"] .dep-pillar-desc {
  color: #475569;
}

[data-theme="light"] .dep-pillar-icon {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .dep-sub-tag {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}

[data-theme="light"] .dep-pillar-footer {
  border-top-color: #e2e8f0;
}

/* ==========================================================================
   EXPOSE TO EPHEMERAL HOST PORT BINDING GRAPH
   ========================================================================== */
.expose-flow-container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px;
  color: #ffffff;
}

@media (max-width: 800px) {
  .expose-flow-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.expose-flow-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #ffffff;
  transition: all 0.2s ease;
}

.expose-flow-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.expose-flow-card.card-meta {
  border-top: 3px solid #8b5cf6;
}

.expose-flow-card.card-nat {
  border-top: 3px solid #10b981;
}

.expose-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.expose-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.expose-card-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.card-meta .expose-card-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.card-nat .expose-card-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.expose-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expose-directive-box,
.expose-binding-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #ffffff;
}

.expose-directive-tag {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
}

.expose-code {
  font-weight: 700;
  color: #ffffff;
}

.expose-binding-box {
  justify-content: center;
  font-weight: 700;
}

.binding-ip {
  color: #94a3b8;
}

.binding-host-port {
  color: #38bdf8;
  font-weight: 800;
}

.binding-arrow {
  color: #10b981;
  margin: 0 4px;
}

.binding-container-port {
  color: #4ade80;
  font-weight: 800;
}

.expose-card-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: #ffffff;
  opacity: 0.95;
  margin: 0;
}

.expose-card-footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.expose-status-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

.pill-doc {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.pill-active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Pipe Channel */
.expose-pipe-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.expose-pipe-tag {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.expose-pipe-arrow {
  position: relative;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #8b5cf6, #10b981);
}

.expose-pipe-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: #10b981;
}

.expose-pipe-desc {
  font-size: 10.5px;
  color: #ffffff;
  opacity: 0.95;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

/* Light theme overrides */
[data-theme="light"] .expose-flow-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .expose-flow-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .expose-card-title,
[data-theme="light"] .expose-code {
  color: #0f172a;
}

[data-theme="light"] .expose-card-desc,
[data-theme="light"] .expose-pipe-desc {
  color: #475569;
}

[data-theme="light"] .expose-directive-box,
[data-theme="light"] .expose-binding-box {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .binding-ip {
  color: #64748b;
}

[data-theme="light"] .binding-host-port {
  color: #0284c7;
}

[data-theme="light"] .binding-container-port {
  color: #15803d;
}

[data-theme="light"] .expose-card-footer {
  border-top-color: #e2e8f0;
}

/* ==========================================================================
   IMAGE TAG POINTERS ALIAS GRAPH
   ========================================================================== */
.tag-pointer-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  color: #ffffff;
}

.tag-target-image-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-top: 3px solid #0284c7;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #ffffff;
  transition: all 0.2s ease;
}

.tag-target-image-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tag-target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tag-target-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.tag-target-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.tag-target-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tag-target-id-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color, #243247);
  border-radius: 6px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

.id-label {
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(2, 132, 199, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.id-val {
  font-weight: 700;
  color: #ffffff;
}

.id-size {
  font-size: 11px;
  color: #94a3b8;
  border-left: 1px solid var(--border-color, #243247);
  padding-left: 8px;
}

.tag-target-subtext {
  font-size: 11px;
  color: #ffffff;
  opacity: 0.95;
}

/* Divider & Pointer Channel */
.tag-pointers-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 0;
}

.tag-pointer-line {
  flex: 1;
  height: 1px;
  background: var(--border-color, #243247);
}

.tag-pointer-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 12px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-pointer-pill span:first-child,
.tag-pointer-pill span:last-child {
  color: #38bdf8;
  font-size: 10px;
}

/* Tag Aliases Grid */
.tag-aliases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .tag-aliases-grid {
    grid-template-columns: 1fr;
  }
}

.tag-alias-card {
  background: var(--bg-surface, #111827);
  border: 1px solid var(--border-color, #243247);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #ffffff;
  transition: all 0.2s ease;
}

.tag-alias-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tag-alias-card.card-release {
  border-top: 3px solid #10b981;
}

.tag-alias-card.card-dev {
  border-top: 3px solid #f59e0b;
}

.tag-alias-card.card-latest {
  border-top: 3px solid #8b5cf6;
}

.tag-alias-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-alias-icon {
  font-size: 15px;
}

.tag-alias-name {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
}

.tag-alias-role {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.card-release .tag-alias-role {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.card-dev .tag-alias-role {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.card-latest .tag-alias-role {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.tag-alias-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: #ffffff;
  opacity: 0.95;
  margin: 0;
  flex: 1;
}

/* Light theme overrides */
[data-theme="light"] .tag-target-image-card,
[data-theme="light"] .tag-alias-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .tag-target-image-card:hover,
[data-theme="light"] .tag-alias-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .tag-target-title,
[data-theme="light"] .id-val,
[data-theme="light"] .tag-alias-name {
  color: #0f172a;
}

[data-theme="light"] .tag-target-subtext,
[data-theme="light"] .tag-alias-desc {
  color: #475569;
}

[data-theme="light"] .tag-target-id-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .tag-pointer-pill {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}