/* ═══════════════════════════════════════════════════
   Kehrwoche AI Service — GitHub Pages Stylesheet
   Inspired by AI4OPS Hub design language
   ═══════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
  /* Colors - Light */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fc;
  --bg-tertiary: #eef1f6;
  --bg-card: #ffffff;
  --bg-arch: #f4f6fa;
  --text-primary: #1a1f36;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --border-color: #e2e8f0;
  --border-light: #edf2f7;

  /* Accent Colors */
  --accent-teal: #00897b;
  --accent-teal-bg: #e0f2f1;
  --accent-green: #00a86b;
  --accent-green-bg: #e8f5e9;
  --accent-purple: #6c5ce7;
  --accent-purple-bg: #ede7f6;
  --accent-blue: #1976d2;
  --accent-blue-bg: #e3f2fd;
  --accent-orange: #e65100;
  --accent-orange-bg: #fff3e0;
  --accent-red: #c62828;

  /* Brand */
  --brand-primary: #00897b;
  --brand-dark: #00695c;
  --brand-light: #b2dfdb;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);

  /* Layout */
  --container-max: 1200px;
  --nav-height: 60px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Typography */
  --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  /* Layer Colors */
  --layer-0: #e3f2fd;
  --layer-0-border: #90caf9;
  --layer-1: #e8f5e9;
  --layer-1-border: #a5d6a7;
  --layer-2: #fff3e0;
  --layer-2-border: #ffcc80;
  --layer-3: #f3e5f5;
  --layer-3-border: #ce93d8;
  --layer-4: #fce4ec;
  --layer-4-border: #ef9a9a;
}

/* ─── DARK THEME ─── */
[data-theme="dark"] {
  --bg-primary: #0f1117;
  --bg-secondary: #161822;
  --bg-tertiary: #1e2030;
  --bg-card: #1a1d2e;
  --bg-arch: #161822;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --border-color: #2d3748;
  --border-light: #1e2030;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);

  --layer-0: #1a2332;
  --layer-0-border: #2d4a6f;
  --layer-1: #1a2e1a;
  --layer-1-border: #2d6a2d;
  --layer-2: #2e261a;
  --layer-2-border: #6a4a2d;
  --layer-3: #261a2e;
  --layer-3-border: #5a2d6a;
  --layer-4: #2e1a1e;
  --layer-4-border: #6a2d3a;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 20px);
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--brand-dark);
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-purple);
}

/* ═══════════════════ NAVBAR ═══════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: background 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
  box-shadow: var(--shadow-md);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.brand-icon {
  font-size: 1.3rem;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-primary);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-primary);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-btn:hover {
  color: var(--brand-primary);
}

.dropdown-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px 0;
  z-index: 1000;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s;
}

.nav-dropdown-menu a:hover {
  background: var(--bg-tertiary);
  color: var(--brand-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s;
}

.theme-toggle:hover {
  background: var(--bg-tertiary);
}

/* Mobile menu */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px;
    gap: 12px;
    box-shadow: var(--shadow-md);
  }

  .nav-links.open {
    display: flex;
  }

  .mobile-menu-btn {
    display: flex;
  }
}

/* ═══════════════════ HERO ═══════════════════ */
.hero {
  padding: 120px 0 60px;
  text-align: center;
  background: var(--bg-primary);
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-dark);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-outline:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Tags */
.hero-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

/* Stats */
.stats-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stats-grid-single {
  margin-top: 12px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 32px;
  text-align: center;
  min-width: 140px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.accent-teal { color: var(--accent-teal); }
.accent-green { color: var(--accent-green); }
.accent-purple { color: var(--accent-purple); }
.accent-blue { color: var(--accent-blue); }
.accent-orange { color: var(--accent-orange); }

/* ═══════════════════ SECTIONS ═══════════════════ */
.section {
  padding: 80px 0;
}

.section-alt {
  background: var(--bg-secondary);
}

.section-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.section-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  max-width: 650px;
  margin: 0 auto 40px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.subsection-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 48px 0 8px;
  text-align: center;
}

.subsection-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

/* ═══════════════════ TIER CARDS ═══════════════════ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

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

.tier-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.tier-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tier-1 { border-top: 3px solid var(--accent-teal); }
.tier-1 .tier-badge { background: var(--accent-teal-bg); color: var(--accent-teal); }

.tier-2 { border-top: 3px solid var(--accent-purple); }
.tier-2 .tier-badge { background: var(--accent-purple-bg); color: var(--accent-purple); }

.tier-3 { border-top: 3px solid var(--accent-orange); }
.tier-3 .tier-badge { background: var(--accent-orange-bg); color: var(--accent-orange); }

.tier-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.tier-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tier-fields code {
  font-size: 0.75rem;
}

/* ═══════════════════ ARCHITECTURE DIAGRAM ═══════════════════ */
.arch-diagram {
  margin-top: 32px;
}

.arch-box {
  background: var(--bg-arch);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
}

.arch-box-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.arch-box-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.arch-box-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 28px;
}

/* Layer labels */
.layer-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}

/* Layer rows */
.layer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Layer cards */
.layer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
  min-width: 120px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.layer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.layer-icon {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.layer-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.layer-detail {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Layer coloring */
.layer-0 .layer-card { background: var(--layer-0); border-color: var(--layer-0-border); }
.layer-1 .layer-card,
.layer-1 .layer-group { background: var(--layer-1); border-color: var(--layer-1-border); }
.layer-2 .layer-card { background: var(--layer-2); border-color: var(--layer-2-border); }
.layer-3 .layer-card-inline { background: var(--layer-3); border-color: var(--layer-3-border); }

/* Layer arrows */
.layer-arrow {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 10px 0;
}

.arrow-label {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--brand-primary);
}

/* Layer groups (Agent/Copilot) */
.layer-group {
  border: 1px solid var(--layer-1-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--layer-1);
  flex: 1;
  min-width: 280px;
}

.layer-group-title {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.layer-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.layer-group-items .layer-card {
  background: var(--bg-card);
  min-width: 100px;
  padding: 10px 14px;
}

/* Inline cards for core */
.layer-card-inline {
  display: inline-block;
  background: var(--layer-3);
  border: 1px solid var(--layer-3-border);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* External system cards */
.external-card {
  border-width: 2px;
  font-weight: 600;
}

.ext-leanix { background: #e8f5e9; border-color: #66bb6a; }
.ext-nexus { background: #e3f2fd; border-color: #42a5f5; }
.ext-archer { background: #fff3e0; border-color: #ffa726; }
.ext-git { background: #f3e5f5; border-color: #ab47bc; }

[data-theme="dark"] .ext-leanix { background: #1a2e1a; border-color: #2d6a2d; }
[data-theme="dark"] .ext-nexus { background: #1a2332; border-color: #2d4a6f; }
[data-theme="dark"] .ext-archer { background: #2e261a; border-color: #6a4a2d; }
[data-theme="dark"] .ext-git { background: #261a2e; border-color: #5a2d6a; }

/* ═══════════════════ PROVIDER SECTION ═══════════════════ */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.provider-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.provider-box-header {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.provider-box-impls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.impl-tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 600;
}

.impl-prod {
  background: var(--accent-teal-bg);
  color: var(--accent-teal);
}

.impl-dev {
  background: var(--accent-purple-bg);
  color: var(--accent-purple);
}

.provider-box-factory {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══════════════════ DATA FLOW DIAGRAMS ═══════════════════ */
.flow-diagram-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 40px 0 16px;
  text-align: center;
  color: var(--text-primary);
}

.flow-diagram-title:first-of-type {
  margin-top: 0;
}

/* Vertical flow diagram */
.flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

/* Flow nodes */
.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 28px;
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  min-width: 200px;
  max-width: 380px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.flow-node:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.flow-node-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.flow-node-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flow-node-detail {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.flow-node-sm {
  padding: 12px 18px;
  min-width: 140px;
}

.flow-node-sm .flow-node-icon {
  font-size: 1.1rem;
}

.flow-node-sm .flow-node-label {
  font-size: 0.8rem;
}

/* Node type colors */
.flow-node-trigger {
  border-color: var(--accent-blue);
  background: var(--accent-blue-bg);
}

.flow-node-service {
  border-color: var(--accent-teal);
  background: var(--accent-teal-bg);
}

.flow-node-process {
  border-color: var(--accent-purple);
  background: var(--accent-purple-bg);
}

.flow-node-output {
  border-color: var(--accent-orange);
  background: var(--accent-orange-bg);
  border-style: double;
  border-width: 3px;
}

[data-theme="dark"] .flow-node-trigger { background: #1a2332; }
[data-theme="dark"] .flow-node-service { background: #1a2e2a; }
[data-theme="dark"] .flow-node-process { background: #221a2e; }
[data-theme="dark"] .flow-node-output { background: #2e221a; }

/* Connectors */
.flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}

.flow-connector-line {
  width: 2px;
  height: 24px;
  background: var(--border-color);
  position: relative;
}

.flow-connector-line::after {
  content: '▼';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--text-muted);
}

.flow-connector-label {
  font-size: 0.7rem;
  color: var(--brand-primary);
  font-weight: 600;
  margin-top: 4px;
  font-style: italic;
}

/* Fork / condition */
.flow-fork {
  margin: 4px 0;
}

.flow-fork-label {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-orange);
  background: var(--accent-orange-bg);
  border: 1px dashed var(--accent-orange);
}

[data-theme="dark"] .flow-fork-label { background: #2e221a; }

/* Parallel branches */
.flow-parallel {
  width: 100%;
  max-width: 700px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-secondary);
}

.flow-parallel-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}

.flow-parallel-branches {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.flow-parallel-branch {
  flex: 1;
  min-width: 160px;
  max-width: 220px;
}

/* Horizontal flow diagram */
.flow-diagram-horizontal {
  padding: 24px 16px;
  overflow-x: auto;
}

.flow-h-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.flow-h-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* ═══════════════════ SEQUENCE DIAGRAMS ═══════════════════ */
.seq-diagram {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 16px;
  margin-bottom: 32px;
  overflow-x: auto;
}

.seq-diagram-compact {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Participants */
.seq-participants {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  min-width: 600px;
  gap: 8px;
}

.seq-participant {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  background: var(--accent-blue-bg);
  border: 2px solid var(--accent-blue);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .seq-participant {
  background: #1a2332;
}

/* Lifelines container */
.seq-lifelines {
  position: relative;
  min-width: 600px;
  padding: 8px 0 20px;
}

/* Lifeline vertical dashed lines — drawn by JS */
.seq-lifeline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 2px dashed var(--border-color);
  z-index: 0;
}

/* Messages */
.seq-message {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  z-index: 1;
}

.seq-msg-line {
  position: absolute;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.seq-msg-req .seq-msg-line {
  background: var(--accent-teal);
}

.seq-msg-res .seq-msg-line {
  background: var(--accent-purple);
  border-top: 2px dashed var(--accent-purple);
  background: none;
}

.seq-msg-label {
  position: absolute;
  top: 0;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
  padding: 0 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  line-height: 1;
}

/* Arrow heads rendered by JS */
.seq-msg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  z-index: 2;
}

.seq-msg-req .seq-msg-arrow {
  border-left: 8px solid var(--accent-teal);
}

.seq-msg-res .seq-msg-arrow {
  border-right: 8px solid var(--accent-purple);
}

/* Notes */
.seq-note {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-orange);
  font-style: italic;
}

.seq-note::before {
  content: '📌 ';
}

.seq-note-box {
  display: inline-block;
  padding: 2px 10px;
  background: var(--accent-orange-bg);
  border: 1px solid var(--accent-orange);
  border-radius: 4px;
}

[data-theme="dark"] .seq-note-box {
  background: #2e221a;
}

/* ═══════════════════ COMPONENTS ═══════════════════ */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 24px;
}

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

.component-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow 0.2s;
}

.component-card:hover {
  box-shadow: var(--shadow-lg);
}

.component-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.component-icon {
  font-size: 1.5rem;
}

.component-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.component-badge {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--accent-teal-bg);
  color: var(--accent-teal);
}

.component-card > p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.component-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.85rem;
}

.component-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color);
}

.component-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.component-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-left: 3px solid var(--brand-primary);
  background: var(--bg-secondary);
  border-radius: 0 4px 4px 0;
}

/* ═══════════════════ API TABLES ═══════════════════ */
.api-group {
  margin-bottom: 32px;
}

.api-group-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.api-table-wrapper {
  overflow-x: auto;
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.api-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
}

.api-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

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

.method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.method.post { background: #e8f5e9; color: #2e7d32; }
.method.get { background: #e3f2fd; color: #1565c0; }

[data-theme="dark"] .method.post { background: #1a2e1a; color: #66bb6a; }
[data-theme="dark"] .method.get { background: #1a2332; color: #64b5f6; }

/* ═══════════════════ DEPLOYMENT ═══════════════════ */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.deploy-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.deploy-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.deploy-dev { border-top: 3px solid var(--accent-blue); }
.deploy-prod { border-top: 3px solid var(--accent-teal); }

.deploy-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deploy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.85rem;
}

.deploy-item strong {
  color: var(--text-primary);
  font-size: 0.8rem;
}

.deploy-item span {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

/* Deploy note */
.deploy-note {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  background: var(--bg-secondary);
  border-left: 3px solid var(--brand-primary);
  color: var(--text-secondary);
}

.deploy-note code {
  font-size: 0.72rem;
  word-break: break-all;
}

/* ═══════════ INFRASTRUCTURE DIAGRAM ═══════════ */
.infra-diagram {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  margin-bottom: 32px;
}

.infra-diagram-dev {
  border-top: 3px solid var(--accent-blue);
}

/* Users at top */
.infra-users {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4px;
}

.infra-icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.infra-icon {
  font-size: 2rem;
}

.infra-icon-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Vertical connector */
.infra-connector-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
}

.infra-connector-v-line {
  width: 2px;
  height: 28px;
  background: var(--text-muted);
  position: relative;
}

.infra-connector-v-line::after {
  content: '▼';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--text-muted);
}

.infra-connector-v-short .infra-connector-v-line {
  height: 18px;
}

.infra-connector-v-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-top: 4px;
}

/* AWS Cloud box */
.infra-cloud {
  border: 2px solid #232f3e;
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
}

[data-theme="dark"] .infra-cloud {
  border-color: #4a6fa5;
}

.infra-cloud-header {
  background: #232f3e;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.infra-cloud-badge {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.infra-cloud-region {
  font-size: 0.72rem;
  color: #aab8c2;
}

/* Region */
.infra-region {
  border: 2px solid #1a73e8;
  border-radius: var(--radius);
  margin: 16px;
  overflow: hidden;
}

[data-theme="dark"] .infra-region {
  border-color: #4a9eff;
}

.infra-region-header {
  background: #e8f0fe;
  padding: 8px 16px;
}

[data-theme="dark"] .infra-region-header {
  background: #1a2a3e;
}

.infra-region-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a73e8;
}

[data-theme="dark"] .infra-region-badge {
  color: #4a9eff;
}

/* VPC */
.infra-vpc {
  border: 2px solid #00bfa5;
  border-radius: var(--radius);
  margin: 12px;
  overflow: hidden;
}

.infra-vpc-header {
  background: #e0f7f0;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-theme="dark"] .infra-vpc-header {
  background: #0d2b25;
}

.infra-vpc-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #00bfa5;
}

.infra-vpc-cidr {
  font-size: 0.68rem;
  font-family: monospace;
  color: var(--text-muted);
}

/* Subnet */
.infra-subnet {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  margin: 10px;
  overflow: hidden;
}

.infra-subnet-public { border-color: #43a047; }
.infra-subnet-private { border-color: #1565c0; }
.infra-subnet-data { border-color: #e65100; }

.infra-subnet-header {
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.infra-subnet-public .infra-subnet-header { background: #e8f5e9; }
.infra-subnet-private .infra-subnet-header { background: #e3f2fd; }
.infra-subnet-data .infra-subnet-header { background: #fff3e0; }

[data-theme="dark"] .infra-subnet-public .infra-subnet-header { background: #1a2e1a; }
[data-theme="dark"] .infra-subnet-private .infra-subnet-header { background: #1a2332; }
[data-theme="dark"] .infra-subnet-data .infra-subnet-header { background: #2e201a; }

.infra-subnet-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.infra-subnet-cidr {
  font-size: 0.65rem;
  font-family: monospace;
  color: var(--text-muted);
}

.infra-subnet-nodes {
  padding: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.infra-subnet-nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Infra node (universal) */
.infra-node {
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.infra-node:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.infra-node-icon {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.infra-node strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.infra-node small {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Node type border colors */
.infra-node-networking { border-color: #43a047; border-width: 2px; }
.infra-node-compute { border-color: #e67e22; border-width: 2px; }
.infra-node-data { border-color: #1565c0; border-width: 2px; }
.infra-node-mgmt { border-color: #7b1fa2; border-width: 2px; }
.infra-node-external { border-color: #c62828; border-width: 2px; }
.infra-node-llm { border-color: #6a1b9a; border-width: 2px; }

/* ECS Cluster */
.infra-ecs-cluster {
  width: 100%;
  border: 2px solid #e67e22;
  border-radius: var(--radius);
  overflow: hidden;
}

.infra-ecs-header {
  background: #fff3e0;
  padding: 6px 14px;
}

[data-theme="dark"] .infra-ecs-header {
  background: #2e201a;
}

.infra-ecs-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e67e22;
}

.infra-ecs-tasks {
  padding: 12px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.infra-ecs-tasks .infra-node {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}

/* AWS Services outside VPC */
.infra-aws-services {
  margin: 12px;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
}

.infra-aws-services-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  text-align: center;
}

.infra-aws-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.infra-aws-services-grid .infra-node {
  padding: 10px 12px;
}

.infra-aws-services-grid .infra-node-icon {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.infra-aws-services-grid .infra-node strong {
  font-size: 0.75rem;
}

/* External services */
.infra-external {
  margin-top: 20px;
  border: 2px solid #c62828;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.infra-external-header {
  background: #ffebee;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #c62828;
  text-align: center;
}

[data-theme="dark"] .infra-external-header {
  background: #2e1a1a;
}

.infra-external-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px;
}

/* Connection map legend */
.infra-connections {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.infra-connections-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-align: center;
}

.infra-connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.infra-conn-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.infra-conn-line {
  display: inline-block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.infra-conn-https { background: #e67e22; }
.infra-conn-graphql { background: #e91e63; }
.infra-conn-rest { background: #43a047; }
.infra-conn-vpc { background: #1565c0; }

.infra-conn-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.infra-conn-desc strong {
  color: var(--text-primary);
}

/* Flow tags (Agent / Copilot / KB badges) */
.infra-flow-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.infra-flow-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag-agent {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.tag-copilot {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.tag-kb {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

[data-theme="dark"] .tag-agent {
  background: #1a2e1a;
  color: #66bb6a;
  border-color: #2e5e2e;
}

[data-theme="dark"] .tag-copilot {
  background: #1a2332;
  color: #64b5f6;
  border-color: #1e3a5f;
}

[data-theme="dark"] .tag-kb {
  background: #2e201a;
  color: #ffb74d;
  border-color: #5e3a1e;
}

/* Module breakdown inside ECS node */
.infra-node-wide {
  min-width: 320px;
  flex: 2;
  max-width: 480px;
}

.infra-modules {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.infra-module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.72rem;
  text-align: left;
}

.infra-module-name {
  font-family: monospace;
  font-size: 0.68rem;
  color: var(--brand-primary);
  font-weight: 600;
}

.infra-module-desc {
  color: var(--text-muted);
  font-size: 0.66rem;
  margin-left: auto;
}

/* Data Flow ↔ Infrastructure Legend */
.infra-flow-legend {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.infra-flow-legend-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-align: center;
}

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

.infra-flow-legend-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 4px solid var(--border-color);
}

.legend-agent { border-left-color: #2e7d32; }
.legend-copilot { border-left-color: #1565c0; }
.legend-kb { border-left-color: #e65100; }

.infra-flow-legend-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.infra-flow-legend-header strong {
  font-size: 0.82rem;
  color: var(--text-primary);
}

.infra-flow-legend-path {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.infra-flow-legend-path em {
  font-weight: 600;
  color: var(--brand-primary);
  font-style: normal;
}

.infra-flow-legend-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.infra-flow-legend-services span {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Docker Compose dev diagram */
.infra-docker-compose {
  border: 2px solid #0db7ed;
  border-radius: var(--radius);
  overflow: hidden;
}

.infra-docker-header {
  background: #e1f5fe;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

[data-theme="dark"] .infra-docker-header {
  background: #0d2432;
}

.infra-docker-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0db7ed;
}

.infra-docker-network {
  font-size: 0.7rem;
  font-family: monospace;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.infra-docker-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
}

.infra-docker-deps {
  padding: 8px 16px;
  background: var(--bg-secondary);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.infra-docker-dep {
  font-size: 0.7rem;
  font-family: monospace;
  color: var(--text-muted);
  padding: 2px 10px;
  background: var(--bg-primary);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

/* ═══════════════════ TECH STACK ═══════════════════ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

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

.tech-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.tech-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ═══════════════════ SECURITY ═══════════════════ */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.security-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform 0.2s;
}

.security-card:hover {
  transform: translateY(-2px);
}

.security-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 8px;
}

.security-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.security-card p {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Auth flow */
.auth-flow {
  margin-top: 40px;
}

.auth-flow-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.auth-node {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

.auth-node-main {
  border-color: var(--brand-primary);
  border-width: 2px;
}

.auth-arrow {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ═══════════════════ BOUNDARY RULES ═══════════════════ */
.boundary-rules {
  max-width: 800px;
  margin: 0 auto;
}

/* ═══════════════════ PHASES ═══════════════════ */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.phase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  transition: transform 0.2s;
}

.phase-card:hover {
  transform: translateY(-2px);
}

.phase-status {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.phase-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.phase-card p {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.phase-done { border-top: 3px solid var(--accent-teal); }
.phase-active { border-top: 3px solid var(--accent-orange); background: var(--accent-orange-bg); }
.phase-planned { border-top: 3px solid var(--border-color); opacity: 0.7; }

.phase-weeks {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-blue);
  background: var(--accent-blue-bg);
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.phase-deliverable {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--accent-teal-bg);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--accent-teal);
  font-weight: 600;
}

.phase-planned .phase-deliverable {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* ─── Dark mode: Field Analysis, Impact, Chat ─── */
[data-theme="dark"] .src-leanix { background: #1a2332; color: #64b5f6; }
[data-theme="dark"] .src-archer { background: #2e1a1a; color: #ef9a9a; }
[data-theme="dark"] .src-git { background: #1a2e1a; color: #81c784; }
[data-theme="dark"] .src-infra { background: #2e201a; color: #ffb74d; }
[data-theme="dark"] .status-done { background: #1a2e1a; color: #81c784; }
[data-theme="dark"] .status-derivable { background: #1a2332; color: #64b5f6; }
[data-theme="dark"] .chat-suggestion-tag { background: #1a2e1a; color: #81c784; }
[data-theme="dark"] .impact-badge { background: #1a2e1a; color: #81c784; }
[data-theme="dark"] .phase-weeks { background: #1a2332; color: #64b5f6; }
[data-theme="dark"] .phase-deliverable { background: #1a2e2a; color: #80cbc4; }
[data-theme="dark"] .risk-mitigation { border-left-color: #81c784; }

/* ═══════════════════ FIELD ANALYSIS ═══════════════════ */
.field-analysis-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: 32px 0 40px;
  flex-wrap: wrap;
}

.donut-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.donut-chart {
  display: block;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-big {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.donut-small {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legend-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.legend-count {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.tier-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tier-tab-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tier-tab-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.tier-tab-btn.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.tier-tab-count {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  margin-left: 4px;
}

.tier-tab-btn.active .tier-tab-count {
  background: rgba(255,255,255,0.3);
}

.tier-panel {
  display: none;
}

.tier-panel.active {
  display: block;
}

.tier-panel-info {
  padding: 14px 18px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.field-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.field-table thead {
  background: var(--bg-tertiary);
}

.field-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

.field-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

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

.field-table tbody tr:hover {
  background: var(--bg-secondary);
}

.src-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.src-leanix { background: #e3f2fd; color: #1565c0; }
.src-archer { background: #fce4ec; color: #c62828; }
.src-git { background: #e8f5e9; color: #2e7d32; }
.src-infra { background: #fff3e0; color: #e65100; }

.field-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.status-done { background: #e8f5e9; color: #2e7d32; }
.status-derivable { background: #e3f2fd; color: #1565c0; }

/* ═══════════════════ AGENT DEEP-DIVE ═══════════════════ */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mode-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  border-top: 3px solid var(--border-color);
}

.mode-validate { border-top-color: var(--accent-blue); }
.mode-populate { border-top-color: var(--accent-green); }
.mode-suggest { border-top-color: var(--accent-purple); }

.mode-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.mode-card h4 {
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.mode-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mode-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.mode-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand-primary);
  font-weight: 700;
}

.agent-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 28px;
}

.pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}

.pipeline-step::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 34px;
  bottom: -14px;
  width: 2px;
  background: var(--border-color);
}

.pipeline-step:last-child::before {
  display: none;
}

.pipeline-num {
  position: absolute;
  left: -28px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.pipeline-step-blue .pipeline-num { background: var(--accent-blue); }
.pipeline-step-green .pipeline-num { background: var(--accent-green); }
.pipeline-step-amber .pipeline-num { background: var(--accent-orange); }
.pipeline-step-purple .pipeline-num { background: var(--accent-purple); }
.pipeline-step-red .pipeline-num { background: var(--accent-red); }
.pipeline-step-dark .pipeline-num { background: var(--text-primary); }

.pipeline-content {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
}

.pipeline-content strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pipeline-content span {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pipeline-content code {
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
}

/* ═══════════════════ COPILOT DEEP-DIVE ═══════════════════ */
.kb-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kb-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  border-top: 3px solid var(--border-color);
}

.kb-pdf { border-top-color: var(--accent-blue); }
.kb-excel { border-top-color: var(--accent-green); }
.kb-meta { border-top-color: var(--accent-orange); }

.kb-icon {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 8px;
}

.kb-card strong {
  font-size: 0.92rem;
  color: var(--text-primary);
}

.kb-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}

.rag-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;
}

.rag-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 14px;
  border-radius: 12px;
  min-width: 120px;
  flex-shrink: 0;
  color: #fff;
}

.rag-step-green { background: var(--accent-green); }
.rag-step-purple { background: var(--accent-purple); }
.rag-step-amber { background: var(--accent-orange); }
.rag-step-blue { background: var(--accent-blue); }

.rag-icon {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.rag-step strong {
  font-size: 0.82rem;
  display: block;
}

.rag-step small {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-top: 4px;
}

.rag-arrow {
  font-size: 1.4rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.chat-demo-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

.chat-tab {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-tab:hover {
  border-color: var(--brand-primary);
}

.chat-tab.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.chat-demo {
  display: none;
}

.chat-demo.active {
  display: block;
}

.chat-window-demo {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}

.chat-header-bar {
  background: var(--text-primary);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
}

.chat-body-demo {
  background: var(--bg-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-user {
  flex-direction: row-reverse;
}

.chat-avatar-demo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-user .chat-avatar-demo {
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
}

.chat-bot .chat-avatar-demo {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.chat-bubble-demo {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.chat-user .chat-bubble-demo {
  background: var(--accent-blue-bg);
  border-bottom-right-radius: 4px;
}

.chat-bot .chat-bubble-demo {
  background: var(--bg-tertiary);
  border-bottom-left-radius: 4px;
}

.chat-suggestion-tag {
  display: inline-block;
  background: var(--accent-green-bg);
  color: var(--accent-green);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ═══════════════════ EXPECTED IMPACT ═══════════════════ */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.impact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.impact-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.impact-before {
  font-size: 0.85rem;
  color: var(--accent-red);
  text-decoration: line-through;
  opacity: 0.6;
  margin-bottom: 4px;
}

.impact-after {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-green);
  margin-bottom: 12px;
}

.impact-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

/* ═══════════════════ RISKS ═══════════════════ */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.risk-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.92rem;
}

.risk-icon {
  font-size: 1.2rem;
}

.risk-impact {
  font-size: 0.82rem;
  color: var(--accent-red);
  margin-bottom: 6px;
  font-weight: 600;
}

.risk-mitigation {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 12px;
  border-left: 2px solid var(--accent-green);
}

/* ═══════════════════ FOOTER ═══════════════════ */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-primary);
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.footer-links a:hover {
  color: var(--brand-primary);
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 600px) {
  .hero {
    padding: 100px 0 40px;
  }

  .stats-grid {
    gap: 12px;
  }

  .stat-card {
    min-width: 110px;
    padding: 14px 20px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .section {
    padding: 48px 0;
  }

  .deploy-grid,
  .component-grid {
    grid-template-columns: 1fr;
  }

  .arch-box {
    padding: 20px 16px;
  }

  .flow-h-row {
    flex-direction: column;
  }

  .flow-h-arrow {
    transform: rotate(90deg);
  }

  .flow-parallel-branches {
    flex-direction: column;
    align-items: center;
  }

  .flow-parallel-branch {
    max-width: 100%;
  }

  .seq-diagram {
    padding: 16px 8px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .mode-grid,
  .kb-sources,
  .impact-grid {
    grid-template-columns: 1fr;
  }

  .risk-grid {
    grid-template-columns: 1fr;
  }

  .rag-pipeline {
    flex-wrap: nowrap;
  }

  .field-analysis-hero {
    flex-direction: column;
    text-align: center;
  }

  .donut-legend {
    align-items: center;
  }

  .chat-demo-tabs {
    flex-wrap: wrap;
  }

  .tier-tabs-bar {
    flex-direction: column;
  }

  .tier-tab-btn {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════
   N8N-STYLE WORKFLOW VISUALIZATION
   ═══════════════════════════════════════════════════ */

.n8n-workflow {
  position: relative;
  padding: 40px 0;
  overflow-x: auto;
}

.n8n-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 700px;
  padding: 24px;
}

/* ── Node Base ── */
.n8n-node {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 22px;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  z-index: 2;
}

.n8n-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

.n8n-node-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.n8n-node-body {
  flex: 1;
  min-width: 0;
}

.n8n-node-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.n8n-node-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}

.n8n-node-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent-purple);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* ── Node Type Colors ── */
.n8n-trigger .n8n-node-icon { background: #e8f5e9; color: #2e7d32; }
.n8n-trigger { border-color: #66bb6a; }

.n8n-action .n8n-node-icon { background: #e3f2fd; color: #1565c0; }
.n8n-action { border-color: #42a5f5; }

.n8n-condition .n8n-node-icon { background: #fff3e0; color: #e65100; }
.n8n-condition { border-color: #ffa726; }

.n8n-ai .n8n-node-icon { background: #ede7f6; color: #6c5ce7; }
.n8n-ai { border-color: #9575cd; }

.n8n-output .n8n-node-icon { background: #fce4ec; color: #c62828; }
.n8n-output { border-color: #ef5350; }

.n8n-data .n8n-node-icon { background: #e0f2f1; color: #00695c; }
.n8n-data { border-color: #26a69a; }

.n8n-wait .n8n-node-icon { background: #f3e5f5; color: #7b1fa2; }
.n8n-wait { border-color: #ab47bc; }

.n8n-success .n8n-node-icon { background: #e8f5e9; color: #1b5e20; }
.n8n-success { border-color: #43a047; background: #f1f8e9; }

/* ── Connectors ── */
.n8n-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
  z-index: 1;
}

.n8n-connector-line {
  width: 2px;
  height: 32px;
  background: var(--border-color);
}

.n8n-connector-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 10px;
  border-radius: 8px;
  white-space: nowrap;
  margin: -2px 0;
  position: relative;
  z-index: 3;
}

.n8n-connector-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
}

/* ── Parallel Branch (Fork/Join) ── */
.n8n-parallel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

.n8n-parallel-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 18px;
  background: var(--accent-blue-bg);
  border: 1.5px dashed var(--accent-blue);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-blue);
  z-index: 2;
}

.n8n-branches {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0;
  position: relative;
}

.n8n-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Router (If/Else Split) ── */
.n8n-router {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.n8n-router-diamond {
  width: 48px;
  height: 48px;
  background: var(--accent-orange-bg);
  border: 2px solid var(--accent-orange);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 6px;
}

.n8n-router-diamond span {
  transform: rotate(-45deg);
  font-size: 1.1rem;
}

.n8n-router-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-orange);
  margin-top: 6px;
  text-align: center;
}

.n8n-router-branches {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 8px;
}

.n8n-router-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.n8n-router-branch-label {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.n8n-branch-true { background: #e8f5e9; color: #2e7d32; }
.n8n-branch-false { background: #ede7f6; color: #6c5ce7; }

/* ── Merge Bar ── */
.n8n-merge-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 16px;
  background: var(--accent-teal-bg);
  border: 1.5px dashed var(--accent-teal);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-teal);
  z-index: 2;
}

/* ── Step Number ── */
.n8n-step-num {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

/* ── Workflow Legend ── */
.n8n-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  padding: 16px 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

.n8n-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.n8n-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 2px solid;
}

.n8n-legend-dot.dot-trigger { border-color: #66bb6a; background: #e8f5e9; }
.n8n-legend-dot.dot-action { border-color: #42a5f5; background: #e3f2fd; }
.n8n-legend-dot.dot-condition { border-color: #ffa726; background: #fff3e0; }
.n8n-legend-dot.dot-ai { border-color: #9575cd; background: #ede7f6; }
.n8n-legend-dot.dot-output { border-color: #ef5350; background: #fce4ec; }
.n8n-legend-dot.dot-data { border-color: #26a69a; background: #e0f2f1; }

/* ── Orchestrator Hub ── */
.n8n-orchestrator {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #1a1f36 0%, #2d3561 100%);
  border: 2px solid #6c5ce7;
  border-radius: 16px;
  padding: 18px 28px;
  min-width: 360px;
  max-width: 460px;
  box-shadow: 0 4px 24px rgba(108,92,231,0.18);
  position: relative;
  z-index: 2;
}

.n8n-orchestrator .n8n-node-icon {
  background: rgba(108,92,231,0.25);
  color: #a78bfa;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

.n8n-orchestrator .n8n-node-title {
  color: #fff;
  font-size: 0.95rem;
}

.n8n-orchestrator .n8n-node-desc {
  color: #a0aec0;
}

.n8n-orchestrator .n8n-node-badge {
  background: #6c5ce7;
}

/* ── Agent Lane ── */
.n8n-agent-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border: 1.5px dashed var(--border-color);
  border-radius: 16px;
  padding: 20px 16px;
  margin: 4px 0;
  position: relative;
  background: var(--bg-secondary);
}

.n8n-lane-header {
  position: absolute;
  top: -12px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 3;
}

.n8n-lane-planning { border-color: #42a5f5; }
.n8n-lane-planning .n8n-lane-header { background: #e3f2fd; color: #1565c0; }

.n8n-lane-resolve { border-color: #26a69a; }
.n8n-lane-resolve .n8n-lane-header { background: #e0f2f1; color: #00695c; }

.n8n-lane-evidence { border-color: #ffa726; }
.n8n-lane-evidence .n8n-lane-header { background: #fff3e0; color: #e65100; }

.n8n-lane-reasoning { border-color: #9575cd; }
.n8n-lane-reasoning .n8n-lane-header { background: #ede7f6; color: #6c5ce7; }

.n8n-lane-action { border-color: #ef5350; }
.n8n-lane-action .n8n-lane-header { background: #fce4ec; color: #c62828; }

.n8n-lane-human { border-color: #43a047; }
.n8n-lane-human .n8n-lane-header { background: #e8f5e9; color: #1b5e20; }

/* ── Tool Calls ── */
.n8n-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.n8n-tool-chip {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* ── State/Memory Bar ── */
.n8n-state-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 20px;
  background: linear-gradient(90deg, var(--accent-purple-bg), var(--accent-blue-bg));
  border: 1.5px solid var(--accent-purple);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-purple);
  z-index: 2;
}

.n8n-state-bar code {
  font-size: 0.65rem;
  background: rgba(108,92,231,0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── Human Gate ── */
.n8n-human-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: #f1f8e9;
  border: 2px solid #43a047;
  border-radius: 14px;
  z-index: 2;
}

.n8n-human-gate-icon {
  font-size: 1.4rem;
}

.n8n-human-gate-body {
  display: flex;
  flex-direction: column;
}

.n8n-human-gate-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: #1b5e20;
}

.n8n-human-gate-desc {
  font-size: 0.72rem;
  color: #4caf50;
}

/* ── Loop Indicator ── */
.n8n-loop-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-orange);
  padding: 3px 12px;
  background: var(--accent-orange-bg);
  border: 1px dashed var(--accent-orange);
  border-radius: 10px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .n8n-branches, .n8n-router-branches {
    flex-direction: column;
    align-items: center;
  }
  .n8n-node, .n8n-orchestrator {
    min-width: 240px;
    max-width: 300px;
  }
  .n8n-agent-lane {
    padding: 16px 10px;
  }
}

/* ═══════════════════════════════════════════════════
   n8n Dark Canvas – Agent Graph Visualization
   ═══════════════════════════════════════════════════ */

.cv-heading {
  text-align: center;
  margin: 48px 0 8px;
}
.cv-heading h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.cv-heading p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* Canvas — plain dark, no dot grid */
.cv {
  background: linear-gradient(160deg, #0a0a16 0%, #10101f 50%, #0d0d1a 100%);
  border-radius: 20px;
  padding: 60px 48px 80px;
  overflow-x: auto;
  position: relative;
}

/* Main horizontal flow — vertically centered */
.cv-flow {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  min-width: max-content;
}

/* ── Node Wrapper (card + caption below) ── */
.cv-nw {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.cv-caption {
  font-size: 0.66rem;
  color: #626280;
  text-align: center;
  margin-top: 10px;
  line-height: 1.35;
  max-width: 130px;
}
.cv-caption strong {
  color: #9a9ab0;
  font-weight: 600;
}

/* ── Card Node ── */
.cv-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1c1c2e;
  border: 1px solid #2a2a40;
  border-radius: 10px;
  padding: 12px 16px;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}
.cv-card:hover {
  border-color: #44446a;
  box-shadow: 0 0 28px rgba(100,100,180,0.12);
}

.cv-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cv-icon-trigger  { background: #2a1640; color: #c084fc; }
.cv-icon-api      { background: #172a40; color: #60a5fa; }
.cv-icon-agent    { background: #0f2b20; color: #6ee7b7; }
.cv-icon-gate     { background: #2b2510; color: #fbbf24; }
.cv-icon-output   { background: #2b1515; color: #f87171; }
.cv-icon-human    { background: #0f2b2b; color: #2dd4bf; }
.cv-icon-success  { background: #0f2b15; color: #6ee7b7; }

.cv-card-body { display: flex; flex-direction: column; }
.cv-card-title { font-weight: 600; font-size: 0.82rem; color: #e2e2ea; line-height: 1.25; }
.cv-card-sub { font-size: 0.66rem; color: #5e5e78; margin-top: 2px; }

/* Connection ports — small dots on node edges */
.cv-port {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #38384e;
  border: 1.5px solid #50506e;
  position: absolute;
  z-index: 2;
}
.cv-port-l { left: -5px; top: 50%; transform: translateY(-50%); }
.cv-port-r { right: -5px; top: 50%; transform: translateY(-50%); }

/* ── Horizontal Edge ── */
.cv-edge {
  width: 48px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  align-self: center;
}
.cv-edge-line {
  flex: 1;
  height: 2px;
  background: #35354c;
}
.cv-edge-arrow {
  width: 0; height: 0;
  border: 4px solid transparent;
  border-left: 5px solid #35354c;
  flex-shrink: 0;
}

/* ── Agent Group (card + sub-nodes below) ── */
.cv-agent-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.cv-card-agent {
  border: 1.5px solid #3a4a44;
  background: #161a2a;
}
.cv-card-agent:hover {
  border-color: #4a6a54;
  box-shadow: 0 0 28px rgba(80,160,120,0.1);
}

/* Agent bottom ports — diamond dots like n8n */
.cv-agent-ports {
  display: flex;
  gap: 24px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #252540;
}
.cv-agent-port {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cv-agent-port-lbl {
  font-size: 0.55rem;
  color: #54546e;
}
.cv-agent-port-dot {
  width: 7px; height: 7px;
  background: #38384e;
  border: 1.5px solid #50506e;
  transform: rotate(45deg);
}

/* Sub-nodes section below agent */
.cv-sub-section {
  display: flex;
  gap: 20px;
  margin-top: 0;
  align-items: flex-start;
  justify-content: center;
}

.cv-sub-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cv-sub-dash {
  width: 0;
  height: 28px;
  border-left: 2px dashed #35354c;
}
.cv-sub-dash-lbl {
  font-size: 0.52rem;
  color: #4a4a64;
  white-space: nowrap;
  margin-bottom: 2px;
}

/* Circular sub-node — larger, like n8n */
.cv-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #12122a;
  border: 2px solid #2a2a42;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cv-circle:hover {
  border-color: #44446a;
  box-shadow: 0 0 18px rgba(80,80,140,0.15);
}
.cv-circle-lbl {
  font-size: 0.66rem;
  color: #8a8aa2;
  text-align: center;
  margin-top: 8px;
  line-height: 1.25;
  font-weight: 500;
}
.cv-circle-sub {
  font-size: 0.52rem;
  color: #5a5a72;
  display: block;
  font-weight: 400;
}

/* Plus button */
.cv-plus {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #18182c;
  border: 1.5px solid #35354c;
  color: #50506a;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
}
.cv-plus:hover {
  background: #222240;
  border-color: #5a5a7a;
  color: #8a8aa4;
}

/* Tool sub-nodes row */
.cv-tools-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ── Y-Branch (true goes UP, false goes DOWN from condition) ── */
.cv-ybranch {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  min-height: 180px;
}
.cv-ybranch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #35354c;
}

.cv-ybranch-arm {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 2px;
}
.cv-ybranch-top { padding-bottom: 14px; }
.cv-ybranch-bottom { padding-top: 14px; }

.cv-ybranch-lbl {
  font-size: 0.58rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-right: 2px;
}
.cv-lbl-true  { background: #162816; color: #6ee7b7; }
.cv-lbl-false { background: #281616; color: #f87171; }

/* ── Canvas Responsive ── */
@media (max-width: 900px) {
  .cv { padding: 36px 20px 48px; }
  .cv-card { padding: 9px 12px; }
  .cv-card-icon { width: 30px; height: 30px; font-size: 0.95rem; }
  .cv-card-title { font-size: 0.74rem; }
  .cv-circle { width: 44px; height: 44px; font-size: 1.1rem; }
}