/* ══════════════════════════════════════════
   Industrial Intelligence — Main Styles
   ══════════════════════════════════════════ */

/* ── Variables (Dark theme — default) ── */
:root {
  --bg: #080b0f;
  --c1: #ef4444;
  --c2: #f97316;
  --c3: #eab308;
  --c4: #22c55e;
  --c5: #38bdf8;
  --c6: #3b82f6;
  --c7: #a855f7;
  --text: #e8e4da;
  --muted: #6b7280;
  --border-base: rgba(255,255,255,0.06);
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; overflow: hidden; }

/* ── Background effects ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(79,195,247,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 20%, rgba(206,147,216,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 80%, rgba(121,134,203,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.noise {
  position: fixed;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout ── */
.page { height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 2; }

/* ── Header ── */
header {
  position: sticky; top: 0; z-index: 10;
  padding: .9rem 2rem .65rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 0.5px solid var(--border-base);
  background: var(--bg);
}
.logo {
  font-size: 14.3px; font-weight: 680; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(232,228,218,0.92); font-family: 'DM Mono', monospace;
}
.header-title {
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); font-family: 'DM Mono', monospace;
}
.badge {
  font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted);
  border: 0.5px solid rgba(255,255,255,0.08); padding: 4px 10px;
  border-radius: 20px; letter-spacing: 0.1em;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.book-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 11px; border-radius: 10px; cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025);
  color: rgba(232,228,218,0.78); font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 0.07em; text-transform: uppercase; transition: all .15s;
}
.book-btn:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); color: rgba(232,228,218,0.9); }
.book-icon { width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.book-icon svg { width: 13px; height: 13px; display: block; stroke: currentColor; }

/* ── Theme toggle ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px; cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025);
  color: var(--muted); font-size: 14px; transition: all .15s; line-height: 1; padding: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); color: var(--text); }

/* ── Language pills ── */
.lang-row { display: flex; gap: 6px; align-items: center; }
.lang-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; cursor: pointer;
  font-family: 'DM Mono', monospace; letter-spacing: 0.05em;
  border: 0.5px solid rgba(255,255,255,0.1); background: transparent;
  color: var(--muted); transition: all .15s;
}
.lang-pill.active { background: rgba(255,255,255,0.08); color: #4fc3f7; border-color: #4fc3f7; }

/* ── Main content area ── */
.main { flex: 1 1 auto; padding: 10px 14px 14px; display: flex; justify-content: center; align-items: stretch; overflow: auto; min-height: 0; min-width: 0; }
.lifecycle-wrap { display: flex; flex-direction: column; width: 100%; min-height: 100%; flex: 1 1 auto; min-width: 0; overflow: visible; }

/* ── Top bar / filters ── */
.lc-topbar { display: block; width: 100%; margin-bottom: 14px; flex-shrink: 0; }
.lc-topbar-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0; }
.lc-caption { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.lc-filters { display: block; width: 100%; min-width: 0; }
.lc-filter-line { display: flex; align-items: flex-start; justify-content: flex-start; gap: 18px; flex-wrap: nowrap; width: 100%; min-width: 0; }
.filter-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 0 auto; }
.filter-block-inline { margin-left: 0; }
.filter-block-action { margin-left: auto; }
.filter-label { font-size: 9.6px; font-family: 'DM Mono', monospace; letter-spacing: 0.06em; text-transform: none; color: var(--muted); text-align: left; }
.filter-chips { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.filter-reset-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025);
  color: var(--muted); font-size: 9.6px; font-family: 'DM Mono', monospace;
  letter-spacing: 0.04em; transition: all .15s;
}
.filter-reset-btn:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); color: var(--text); }
.filter-sep { display: none; }

/* ── Layer / filter pills ── */
.lc-layers { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fit-pill, .maturity-pill, .impact-pill {
  display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  font-size: 9.6px; font-family: 'DM Mono', monospace; color: var(--muted);
  letter-spacing: 0.04em; text-transform: none;
  padding: 3px 8px; border-radius: 6px;
  border: 0.5px solid rgba(255,255,255,0.06); background: transparent; transition: all .15s; opacity: 0.5;
}
.fit-pill:hover, .maturity-pill:hover, .impact-pill:hover { filter: none; }
.fit-pill.active, .maturity-pill.active, .impact-pill.active { transform: none; opacity: 1; color: var(--text); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); }
.fit-pill.off, .maturity-pill.off, .impact-pill.off { opacity: 0.5; filter: none; }
.filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.fit-pill.off .filter-dot, .maturity-pill.off .filter-dot, .impact-pill.off .filter-dot { background: #6b7280; }
.dot-production { background: #66bb6a; }
.dot-adopting { background: #ffd54f; }
.dot-research { background: #90a4ae; }
.dot-core { background: #66bb6a; }
.dot-strong { background: #ffd54f; }
.dot-support { background: #90a4ae; }
.dot-high { background: #66bb6a; }
.dot-medium { background: #ffd54f; }
.dot-low { background: #90a4ae; }

/* ── Layer toggles ── */
.lc-layer {
  display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  font-size: 9.6px; font-family: 'DM Mono', monospace; color: var(--muted);
  padding: 3px 8px; border-radius: 6px;
  border: 0.5px solid rgba(255,255,255,0.06); transition: all .15s; opacity: 0.5;
}
.lc-layer.on { opacity: 1; color: var(--text); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); }
.lc-layer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Lifecycle grid ── */
.lc-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: clamp(92px, 11vw, 132px) repeat(7, minmax(110px,1fr));
  grid-template-rows: clamp(28px, 4.2vh, 34px) repeat(7, minmax(92px, 1fr));
  gap: clamp(2px, 0.35vw, 4px);
  min-height: min(900px, calc(100vh - 140px));
  min-width: 0;
  width: 100%;
  height: auto;
  margin-top: 14px;
}
.lc-corner, .lc-stage, .lc-func, .lc-cell { min-width: 0; min-height: 0; }

.lc-stage {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10.8px; font-family: 'DM Mono', monospace; color: rgba(232,228,218,0.78);
  letter-spacing: 0.04em; background: rgba(255,255,255,0.025);
  border-radius: 7px; padding: 4px 6px; line-height: 1.2;
  border: 0.5px solid rgba(255,255,255,0.04);
}
.lc-func {
  display: flex; align-items: center;
  font-size: 10.8px; font-family: 'DM Mono', monospace; color: rgba(232,228,218,0.78);
  letter-spacing: 0.02em; padding: 0 8px; line-height: 1.2;
  background: rgba(255,255,255,0.025); border-radius: 7px;
  border: 0.5px solid rgba(255,255,255,0.04);
}
.lc-cell {
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start;
  gap: 4px; padding: 5px; border-radius: 7px;
  background: rgba(255,255,255,0.0237); border: 0.5px solid rgba(255,255,255,0.0592);
  transition: background .15s, border-color .15s, box-shadow .15s; overflow: hidden;
}
.lc-cell:hover { background: rgba(255,255,255,0.0468); }
.lc-cell.lc-cell-empty { border-color: rgba(255,255,255,0.024); background: rgba(255,255,255,0.0018); }
.lc-cell.lc-cell-clickable { cursor: pointer; }
.lc-cell.lc-cell-clickable:hover { border-color: rgba(255,255,255,0.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.lc-cell-probe {
  position: fixed;
  left: -9999px;
  top: -9999px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 5px;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* ── Chips ── */
.lc-chip {
  font-size: 10.0px; font-family: 'DM Mono', monospace; letter-spacing: 0.03em;
  padding: 2.4px 7.1px; border-radius: 5.6px; cursor: pointer;
  transition: all .15s; white-space: nowrap; line-height: 1.3;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 1;
}
.lc-chip-overflow {
  font-size: 10.0px; font-family: 'DM Mono', monospace; letter-spacing: 0.03em;
  padding: 2.4px 7.1px; border-radius: 5.6px;
  line-height: 1.3; white-space: nowrap;
  color: rgba(232,228,218,0.78);
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.16);
}
.lc-chip:hover { filter: brightness(1.12) saturate(1.08); transform: translateY(-1px); }
.lc-chip.lc-hidden { display: none; }
.lc-chip.fit-core   { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.lc-chip.fit-strong  { opacity: .88; border-style: dashed; }
.lc-chip.fit-support { opacity: .72; }
.lc-chip.mat-production { box-shadow: 0 0 0 1px rgba(102,187,106,0.12) inset; }
.lc-chip.mat-adopting   { box-shadow: 0 0 0 1px rgba(255,213,79,0.12) inset; }
.lc-chip.mat-research   { box-shadow: 0 0 0 1px rgba(144,164,174,0.12) inset; }
.lc-chip.imp-high   { outline: 1px solid rgba(102,187,106,0.18); }
.lc-chip.imp-medium { outline: 1px solid rgba(255,213,79,0.18); }
.lc-chip.imp-low    { outline: 1px solid rgba(144,164,174,0.16); }

/* ── Cell summary ── */
.lc-cell-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
.lc-cell-summary-card { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 0.5px solid rgba(255,255,255,0.06); }
.lc-cell-summary-card.full { grid-column: 1/-1; }
.lc-cell-summary-title { font-size: 8px; font-family: 'DM Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lc-cell-summary-text { font-size: 12.5px; line-height: 1.72; color: rgba(255,255,255,0.72); font-family: 'DM Mono', monospace; font-weight: 300; }

/* ── Cell apps (popup list) ── */
.lc-cell-apps { display: flex; flex-direction: column; gap: 8px; }
.lc-cell-app {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.02); border: 0.5px solid rgba(255,255,255,0.06);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.lc-cell-app:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.lc-cell-app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lc-cell-app-head-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.lc-cell-app-parent { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-family: 'DM Mono', monospace; white-space: nowrap; }
.lc-cell-app-family-slash { display: inline-block; font-weight: 500; }
.lc-cell-app-title {
  font-size: 11.8px;
  font-weight: 400;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.42;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lc-cell-app-meta-text { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 8px; font-size: 10.5px; line-height: 1.5; font-family: 'DM Mono', monospace; }
.lc-meta-sep { color: var(--muted); opacity: 0.7; padding: 0 6px; }
.tone-production, .tone-core, .tone-high { color: #66bb6a; }
.tone-adopting, .tone-strong, .tone-medium { color: #ffd54f; }
.tone-research, .tone-support, .tone-low { color: #90a4ae; }
.lc-cell-app-desc { font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.55); font-family: 'DM Mono', monospace; font-weight: 300; margin-top: 6px; }
.lc-cell-app-arrow { color: var(--muted); font-size: 14px; flex-shrink: 0; margin-left: 8px; transition: color .15s; }
.lc-cell-app:hover .lc-cell-app-arrow { color: var(--text); }

/* ── Tooltip ── */
.lc-tooltip {
  position: fixed; z-index: 120; pointer-events: none; display: none;
  max-width: 260px; padding: 10px 12px; border-radius: 10px;
  background: rgba(13,17,23,0.96); border: 0.5px solid rgba(255,255,255,0.09);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.lc-tooltip.open { display: block; }
.tt-parent { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted); margin-bottom: 4px; }
.tt-title  { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tt-meta   { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--muted); line-height: 1.5; }

/* ── Popup overlay ── */
.lc-popup-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.20); z-index: 100;
  align-items: center; justify-content: center;
}
.lc-popup-overlay.open { display: flex; }

/* ── Popup ── */
.lc-popup {
  background: #0d1117; border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 14px; max-width: 760px; width: 94%; max-height: 84vh;
  overflow-y: auto; padding: 26px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lc-popup.overview-mode { width: 70vw; max-width: 70vw; padding: 0; background: var(--bg); overflow: hidden; }
.lc-popup-close {
  position: absolute; top: 12px; right: 16px; cursor: pointer;
  font-size: 18px; color: var(--muted); transition: color .15s;
  background: none; border: none; font-family: 'DM Mono', monospace; z-index: 5;
}
.lc-popup-close:hover { color: var(--text); }
.popup-lang { position: absolute; top: 12px; right: 54px; z-index: 5; display: flex; gap: 6px; align-items: center; }
.lc-popup-back {
  position: absolute; top: 12px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0.5px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03);
  color: var(--muted); border-radius: 999px; padding: 5px 10px;
  font-size: 10px; font-family: 'DM Mono', monospace; cursor: pointer; z-index: 5;
  transition: all .15s;
}
.lc-popup-back:hover { color: var(--text); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }

.lc-popup-breadcrumb { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted); letter-spacing: 0.04em; margin: 26px 0 8px; }
.lc-popup-breadcrumb span { opacity: 0.6; padding: 0 5px; }
.lc-popup-parent { font-size: 10.5px; font-family: 'DM Mono', monospace; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.04em; }
.lc-popup-title  { font-size: 15px; font-weight: 400; font-family: 'DM Mono', monospace; line-height: 1.42; letter-spacing: 0.01em; color: var(--text); margin-bottom: 6px; }
.lc-popup-subtitle { font-size: 11px; line-height: 1.55; color: rgba(255,255,255,0.58); font-family: 'DM Mono', monospace; font-weight: 300; margin: -1px 0 8px; }
.lc-popup-meta-text { font-size: 10.5px; line-height: 1.55; color: var(--muted); font-family: 'DM Mono', monospace; margin-bottom: 14px; }
.lc-popup-meta-text span { opacity: 0.7; padding: 0 4px; }
.lc-popup-meta   { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lc-meta-pill {
  font-size: 9px; font-family: 'DM Mono', monospace; color: var(--muted);
  padding: 3px 8px; border-radius: 999px;
  border: 0.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
}
.lc-meta-pill.pill-green  { color: #66bb6a; border-color: rgba(102,187,106,0.3); background: rgba(102,187,106,0.10); }
.lc-meta-pill.pill-yellow { color: #ffd54f; border-color: rgba(255,213,79,0.3);  background: rgba(255,213,79,0.10);  }
.lc-meta-pill.pill-weak   { color: #90a4ae; border-color: rgba(144,164,174,0.25); background: rgba(144,164,174,0.08); }

/* ── Popup grid / sections ── */
.lc-popup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.lc-section {
  min-width: 0;
  width: 100%;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.02); border: 0.5px solid rgba(255,255,255,0.05);
}
.lc-section.full { grid-column: 1/-1; }
.lc-section-label {
  font-size: 8px;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.lc-section-text  { font-size: 11.5px; line-height: 1.65; color: rgba(255,255,255,0.56); font-family: 'DM Mono', monospace; font-weight: 300; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.lc-section-text.rich-text { margin-bottom: 8px; }
.lc-link-bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; line-height: 1.65; font-family: 'DM Mono', monospace; font-weight: 300; }
.lc-link-bullets li { color: rgba(255,255,255,0.56); }
.lc-link-bullets a { color: #7dd3fc; text-decoration: none; overflow-wrap: anywhere; word-break: break-word; font: inherit; }
.lc-link-bullets a:hover { text-decoration: underline; }

/* ── Overview popup ── */
.overview-shell { height: 84vh; display: flex; flex-direction: column; }
.overview-header {
  position: sticky; top: 0; z-index: 2;
  padding: 1.25rem 1.6rem 1rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  border-bottom: 0.5px solid var(--border-base);
  background: linear-gradient(180deg, rgba(8,11,15,0.98) 0%, rgba(8,11,15,0.95) 100%);
}
.overview-header-copy { display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.overview-kicker { font-size: 10px; font-family: 'DM Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.overview-subtitle { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.55); font-family: 'DM Mono', monospace; font-weight: 300; }
.overview-header-right { display: flex; align-items: center; gap: 10px; }
.overview-main { flex: 1; padding: 1.4rem 1.4rem 1.8rem; display: flex; justify-content: center; overflow: auto; }
.overview-main.overview-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: start; justify-content: stretch; overflow: hidden; }
.overview-cards { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 16px; overflow: auto; padding-right: 4px; }
.overview-left-pane { height: 100%; overflow: auto; min-height: 0; }
.overview-detail-pane { min-width: 0; height: 100%; overflow: auto; padding-right: 4px; min-height: 0; }
.overview-detail-empty { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); text-align: center; }
.overview-detail-empty-title { font-size: 14px; font-weight: 500; font-family: 'DM Mono', monospace; color: var(--text); margin-bottom: 0; }
.overview-detail-empty-text { font-size: 11.5px; line-height: 1.65; color: rgba(255,255,255,0.56); font-family: 'DM Mono', monospace; font-weight: 300; }

/* ── Node cards ── */
.node {
  position: relative; padding: 24px 26px; border-radius: 14px;
  cursor: default; transition: transform .2s ease, box-shadow .2s ease;
  background: rgba(255,255,255,0.04);
}
.node:hover { transform: translateY(-2px); }
.node::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: var(--nc, transparent); opacity: 0;
  transition: opacity .2s; pointer-events: none; z-index: 0;
}
.node:hover::before { opacity: 0; }
.node > * { position: relative; z-index: 1; }
.node-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 14px 0 0 14px; background: var(--nc); opacity: 0.6; }
.node-num { font-size: 9px; font-family: 'DM Mono', monospace; letter-spacing: 0.15em; margin-bottom: 8px; opacity: 0.5; color: var(--nc); }
.node-title { font-size: 12.75px; font-weight: 400; font-family: 'DM Mono', monospace; line-height: 1.42; letter-spacing: 0.01em; margin-bottom: 5px; color: var(--text); }
.node-mkt { font-size: 11px; font-family: 'DM Mono', monospace; font-weight: 300; color: var(--muted); margin-bottom: 12px; line-height: 1.45; }
.node-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-family: 'DM Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; }
.node-desc { border-top: 0.5px solid rgba(255,255,255,0.06); padding-top: 14px; font-family: 'DM Mono', monospace; font-weight: 300; }
.desc-main { font-size: 12.5px; line-height: 1.72; color: rgba(255,255,255,0.78); }

/* ── Overview sections ── */
.overview-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.section-panel { padding: 10px 12px; border-radius: 9px; background: rgba(255,255,255,0.016); border: 0.5px solid rgba(255,255,255,0.05); }
.section-panel.weak { background: rgba(255,100,80,0.03); border-color: rgba(255,120,90,0.12); }
.section-label { font-size: 7.5px; font-family: 'DM Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.section-panel.weak .section-label { color: #ff8a65; opacity: .8; }
.section-text { font-size: 11px; line-height: 1.62; color: rgba(255,255,255,0.64); font-family: 'DM Mono', monospace; font-weight: 300; }

/* ── Children toggle / list ── */
.children-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 14px;
  border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px;
  background: rgba(255,255,255,0.02); cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s;
}
.children-toggle:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
.children-toggle-label { font-size: 10px; font-family: 'DM Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color .15s; }
.children-toggle:hover .children-toggle-label { color: var(--text); }
.node.children-open .children-toggle-label { color: var(--nc); }
.children-toggle-icon { font-size: 10px; color: var(--nc); transition: transform .25s ease; font-family: 'DM Mono', monospace; }
.node.children-open .children-toggle-icon { transform: rotate(90deg); }
.children-count { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--muted); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 6px; }

.child-list { margin-top: 14px; display: none; flex-direction: column; gap: 10px; }
.node.children-open .child-list { display: flex; }
.child-card {
  padding: 16px 18px; border-radius: 10px;
  border: 0.5px solid rgba(255,255,255,0.05); border-left: 2.5px solid var(--nc);
  background: rgba(255,255,255,0.018); transition: background .15s;
}
.child-card:hover { background: rgba(255,255,255,0.035); }
.child-title { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 12px; letter-spacing: 0.01em; }
.child-sections-grid { margin-top: 0; }
.child-list .lc-section { background: rgba(255,255,255,0.014); border-color: rgba(255,255,255,0.05); }
.child-list .lc-section-text { color: rgba(255,255,255,0.5); }
.overview-inline-list { gap: 12px; }
.overview-inline-app { display: flex; flex-direction: column; gap: 10px; }
.overview-inline-app.is-selected > .lc-cell-app { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.overview-inline-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0 0;
}
.overview-inline-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 2px 0;
}
.overview-inline-breadcrumb {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.overview-inline-breadcrumb span { opacity: 0.6; padding: 0 5px; }
.overview-inline-parent {
  font-size: 10.5px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.overview-inline-title {
  font-size: 13px;
  font-weight: 400;
  font-family: 'DM Mono', monospace;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text);
}
.overview-inline-meta {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}

/* ── Node color variants ── */
.node-1 { --nc: var(--c1); border: 0.5px solid rgba(239,68,68,0.20);   box-shadow: 0 0 20px rgba(239,68,68,0.06),   inset 0 0 12px rgba(239,68,68,0.03);   }
.node-2 { --nc: var(--c2); border: 0.5px solid rgba(249,115,22,0.20);  box-shadow: 0 0 20px rgba(249,115,22,0.06),  inset 0 0 12px rgba(249,115,22,0.03);  }
.node-3 { --nc: var(--c3); border: 0.5px solid rgba(234,179,8,0.24);   box-shadow: 0 0 20px rgba(234,179,8,0.08),   inset 0 0 12px rgba(234,179,8,0.04);   }
.node-4 { --nc: var(--c4); border: 0.5px solid rgba(34,197,94,0.20);   box-shadow: 0 0 20px rgba(34,197,94,0.06),   inset 0 0 12px rgba(34,197,94,0.03);   }
.node-5 { --nc: var(--c5); border: 0.5px solid rgba(56,189,248,0.20);  box-shadow: 0 0 20px rgba(56,189,248,0.06),  inset 0 0 12px rgba(56,189,248,0.03);  }
.node-6 { --nc: var(--c6); border: 0.5px solid rgba(59,130,246,0.20);  box-shadow: 0 0 20px rgba(59,130,246,0.06),  inset 0 0 12px rgba(59,130,246,0.03);  }
.node-7 { --nc: var(--c7); border: 0.5px solid rgba(168,85,247,0.20);  box-shadow: 0 0 20px rgba(168,85,247,0.06),  inset 0 0 12px rgba(168,85,247,0.03);  }

/* ══════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════ */
@media (max-width: 1200px) {
  .lc-filter-line { flex-wrap: wrap; }
}
@media (max-width: 820px) {
  .lc-filter-line { flex-wrap: wrap; }
}
@media (max-width: 980px) {
  .lc-stage, .lc-func { font-size: 9.6px; }
  .lc-chip, .lc-chip-overflow { font-size: 7.8px; padding: 1.2px 4.8px; line-height: 1.2; }
  .lc-popup-grid, .overview-sections, .child-grid, .tech-grid { grid-template-columns: 1fr; }
  .overview-header { align-items: flex-start; flex-direction: column; }
  .overview-header-right { align-self: stretch; justify-content: space-between; }
  .overview-main.overview-split { grid-template-columns: 1fr; overflow: auto; }
  .overview-detail-pane { overflow: visible; }
  .popup-lang { position: static; }
  .lc-layers { justify-content: flex-start; }
}
@media (max-width: 680px) {
  header { padding: 1rem 1rem .8rem; }
  .header-title { display: none; }
  .main { padding: 8px; }
  .lc-grid {
    gap: 3px;
    grid-template-columns: 76px repeat(7, minmax(96px,1fr));
    grid-template-rows: 28px repeat(7, minmax(86px, 1fr));
    min-height: 720px;
    min-width: 748px;
  }
  .lc-func { font-size: 8.4px; padding: 0 4px; }
  .lc-stage { font-size: 8.4px; padding: 3px; }
  .lc-chip, .lc-chip-overflow { font-size: 8.6px; padding: 1.4px 4.4px; line-height: 1.2; }
  .overview-main { padding: 1rem; }
  .overview-header { padding: 1rem; }
  .node { padding: 18px 18px; }
  .filter-sep { display: none; }
}

/* ══════════════════════════════════════════
   Light theme
   ══════════════════════════════════════════ */
[data-theme="light"] { --bg: #fbfaf7; --text: #1a1a2e; --muted: #6b7280; --border-base: rgba(0,0,0,0.08); }
[data-theme="light"] body,
[data-theme="light"] html { background: var(--bg); color: var(--text); }
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(79,195,247,0.035) 0%, transparent 72%),
    radial-gradient(ellipse 40% 60% at 80% 20%, rgba(206,147,216,0.028) 0%, transparent 72%),
    radial-gradient(ellipse 50% 40% at 60% 80%, rgba(121,134,203,0.025) 0%, transparent 72%);
}
[data-theme="light"] .noise { opacity: 0.006; }
[data-theme="light"] header { background: var(--bg); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .book-btn { border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); color: rgba(30,30,50,0.7); }
[data-theme="light"] .book-btn:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.16); color: rgba(30,30,50,0.9); }
[data-theme="light"] .logo { color: rgba(26,26,46,0.92); }
[data-theme="light"] .badge { border-color: rgba(0,0,0,0.10); color: var(--muted); }
[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); color: var(--muted); }
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.16); color: var(--text); }
[data-theme="light"] .lang-pill { border-color: rgba(0,0,0,0.12); color: var(--muted); }
[data-theme="light"] .lang-pill.active { background: rgba(79,195,247,0.10); color: #0288d1; border-color: #0288d1; }
[data-theme="light"] .filter-reset-btn { border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); color: var(--muted); }
[data-theme="light"] .filter-reset-btn:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.16); color: var(--text); }
[data-theme="light"] .lc-layer { border-color: rgba(0,0,0,0.08); opacity: 0.5; }
[data-theme="light"] .lc-layer.on { opacity: 1; border-color: rgba(0,0,0,0.16); background: rgba(0,0,0,0.04); }
[data-theme="light"] .fit-pill,
[data-theme="light"] .maturity-pill,
[data-theme="light"] .impact-pill { border-color: rgba(0,0,0,0.08); opacity: 0.5; background: transparent; }
[data-theme="light"] .fit-pill.active,
[data-theme="light"] .maturity-pill.active,
[data-theme="light"] .impact-pill.active { opacity: 1; border-color: rgba(0,0,0,0.16); background: rgba(0,0,0,0.04); color: var(--text); }
[data-theme="light"] .fit-pill.off .filter-dot,
[data-theme="light"] .maturity-pill.off .filter-dot,
[data-theme="light"] .impact-pill.off .filter-dot { background: #9ca3af; }
[data-theme="light"] .fit-core    { color: #2e7d32; border-color: rgba(46,125,50,0.3);  background: rgba(46,125,50,0.08);  }
[data-theme="light"] .fit-strong  { color: #f57f17; border-color: rgba(245,127,23,0.3); background: rgba(245,127,23,0.08); }
[data-theme="light"] .fit-support { color: #546e7a; border-color: rgba(84,110,122,0.25); background: rgba(84,110,122,0.07); }
[data-theme="light"] .mat-production { color: #2e7d32; border-color: rgba(46,125,50,0.3);  background: rgba(46,125,50,0.08);  }
[data-theme="light"] .mat-adopting   { color: #f57f17; border-color: rgba(245,127,23,0.3); background: rgba(245,127,23,0.08); }
[data-theme="light"] .mat-research   { color: #546e7a; border-color: rgba(84,110,122,0.25); background: rgba(84,110,122,0.07); }
[data-theme="light"] .imp-high   { color: #2e7d32; border-color: rgba(46,125,50,0.3);  background: rgba(46,125,50,0.08);  }
[data-theme="light"] .imp-medium { color: #f57f17; border-color: rgba(245,127,23,0.3); background: rgba(245,127,23,0.08); }
[data-theme="light"] .imp-low    { color: #546e7a; border-color: rgba(84,110,122,0.25); background: rgba(84,110,122,0.07); }
[data-theme="light"] .lc-stage { color: rgba(30,30,50,0.78); background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lc-func  { color: rgba(30,30,50,0.78); background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lc-cell { background: rgba(0,0,0,0.0254); border-color: rgba(0,0,0,0.1014); }
[data-theme="light"] .lc-cell:hover { background: rgba(0,0,0,0.0442); }
[data-theme="light"] .lc-cell.lc-cell-empty { border-color: rgba(0,0,0,0.036); background: rgba(0,0,0,0.0024); }
[data-theme="light"] .lc-cell.lc-cell-clickable:hover { border-color: rgba(0,0,0,0.12); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); }
[data-theme="light"] .lc-chip { font-weight: 400; text-shadow: none; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset; color: #17324a; -webkit-font-smoothing: auto; text-rendering: geometricPrecision; }
[data-theme="light"] .lc-chip-overflow { color: rgba(30,30,50,0.72); background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .lc-chip:hover { filter: none; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.14) inset; }
[data-theme="light"] .lc-chip.fit-core    { opacity: 1; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px currentColor; }
[data-theme="light"] .lc-chip.fit-strong  { opacity: 1; border-style: solid; }
[data-theme="light"] .lc-chip.fit-support { opacity: .96; }
[data-theme="light"] .lc-chip.mat-production { box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(27,94,32,0.28); }
[data-theme="light"] .lc-chip.mat-adopting   { box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(230,81,0,0.30); }
[data-theme="light"] .lc-chip.mat-research   { box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(55,71,79,0.28); }
[data-theme="light"] .lc-chip.imp-high   { outline: 1px solid rgba(27,94,32,0.34); }
[data-theme="light"] .lc-chip.imp-medium { outline: 1px solid rgba(230,81,0,0.34); }
[data-theme="light"] .lc-chip.imp-low    { outline: 1px solid rgba(55,71,79,0.30); }
[data-theme="light"] .lc-tooltip { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.10); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
[data-theme="light"] .tt-title { color: var(--text); }
[data-theme="light"] .lc-popup-overlay { background: rgba(255,255,255,0.55); }
[data-theme="light"] .lc-popup { background: #ffffff; border-color: rgba(0,0,0,0.10); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .lc-popup.overview-mode { background: var(--bg); }
[data-theme="light"] .lc-popup-close { color: var(--muted); }
[data-theme="light"] .lc-popup-close:hover { color: var(--text); }
[data-theme="light"] .lc-popup-back { border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); color: var(--muted); }
[data-theme="light"] .lc-popup-back:hover { color: var(--text); border-color: rgba(0,0,0,0.16); background: rgba(0,0,0,0.05); }
[data-theme="light"] .lc-popup-title { color: var(--text); }
[data-theme="light"] .lc-popup-subtitle { color: rgba(0,0,0,0.52); }
[data-theme="light"] .lc-popup-meta-text { color: var(--muted); }
[data-theme="light"] .lc-meta-pill { color: var(--muted); border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); }
[data-theme="light"] .lc-meta-pill.pill-green  { color: #2e7d32; border-color: rgba(46,125,50,0.3);  background: rgba(46,125,50,0.08);  }
[data-theme="light"] .lc-meta-pill.pill-yellow { color: #f57f17; border-color: rgba(245,127,23,0.3); background: rgba(245,127,23,0.08); }
[data-theme="light"] .lc-meta-pill.pill-weak   { color: #546e7a; border-color: rgba(84,110,122,0.25); background: rgba(84,110,122,0.07); }
[data-theme="light"] .lc-section { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lc-section-text { color: rgba(0,0,0,0.56); }
[data-theme="light"] .lc-link-bullets li { color: rgba(0,0,0,0.56); }
[data-theme="light"] .lc-link-bullets a { color: #0369a1; }
[data-theme="light"] .lc-cell-summary-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lc-cell-summary-text { color: rgba(0,0,0,0.60); }
[data-theme="light"] .lc-cell-app { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lc-cell-app:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .lc-cell-app-title { color: var(--text); }
[data-theme="light"] .lc-cell-app-desc { color: rgba(0,0,0,0.50); }
[data-theme="light"] .lc-cell-app-arrow { color: var(--muted); }
[data-theme="light"] .lc-cell-app:hover .lc-cell-app-arrow { color: var(--text); }
[data-theme="light"] .overview-header { border-bottom-color: rgba(0,0,0,0.08); background: linear-gradient(180deg, rgba(244,243,239,0.98) 0%, rgba(244,243,239,0.95) 100%); }
[data-theme="light"] .overview-subtitle { color: rgba(0,0,0,0.50); }
[data-theme="light"] .node { background: rgba(0,0,0,0.013); }
[data-theme="light"] .node::before { opacity: 0; }
[data-theme="light"] .node:hover::before { opacity: 0; }
[data-theme="light"] .node-title { color: var(--text); }
[data-theme="light"] .desc-main { color: rgba(0,0,0,0.72); }
[data-theme="light"] .section-panel { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .section-panel.weak { background: rgba(255,80,60,0.04); border-color: rgba(220,80,50,0.16); }
[data-theme="light"] .section-text { color: rgba(0,0,0,0.62); }
[data-theme="light"] .children-toggle { border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.02); }
[data-theme="light"] .children-toggle:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.16); }
[data-theme="light"] .children-toggle-label { color: var(--muted); }
[data-theme="light"] .children-toggle:hover .children-toggle-label { color: var(--text); }
[data-theme="light"] .children-count { background: rgba(0,0,0,0.06); }
[data-theme="light"] .child-card { border-color: rgba(0,0,0,0.06); background: rgba(0,0,0,0.02); }
[data-theme="light"] .child-card:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .child-title { color: var(--text); }
[data-theme="light"] .overview-inline-app.is-selected > .lc-cell-app { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .overview-detail-empty { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .overview-detail-empty-text { color: rgba(0,0,0,0.56); }
[data-theme="light"] .child-desc { color: rgba(0,0,0,0.50); }
[data-theme="light"] .info-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .info-block.weak { background: rgba(255,80,60,0.04); border-color: rgba(220,80,50,0.16); }
[data-theme="light"] .info-text { color: rgba(0,0,0,0.42); }
[data-theme="light"] .tech-col { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .tech-body { color: rgba(0,0,0,0.42); }
[data-theme="light"] .t-prod     { background: rgba(46,125,50,0.08); color: #2e7d32; border-color: rgba(46,125,50,0.22); }
[data-theme="light"] .t-research { background: rgba(84,110,122,0.08); color: #546e7a; border-color: rgba(84,110,122,0.22); }
[data-theme="light"] .node-1 { border-color: rgba(239,68,68,0.30);  box-shadow: 0 0 20px rgba(239,68,68,0.08),  inset 0 0 12px rgba(239,68,68,0.04);  }
[data-theme="light"] .node-2 { border-color: rgba(249,115,22,0.30); box-shadow: 0 0 20px rgba(249,115,22,0.08), inset 0 0 12px rgba(249,115,22,0.04); }
[data-theme="light"] .node-3 { border-color: rgba(234,179,8,0.32);  box-shadow: 0 0 20px rgba(234,179,8,0.10),  inset 0 0 12px rgba(234,179,8,0.05);  }
[data-theme="light"] .node-4 { border-color: rgba(34,197,94,0.30);  box-shadow: 0 0 20px rgba(34,197,94,0.08),  inset 0 0 12px rgba(34,197,94,0.04);  }
[data-theme="light"] .node-5 { border-color: rgba(56,189,248,0.30); box-shadow: 0 0 20px rgba(56,189,248,0.08), inset 0 0 12px rgba(56,189,248,0.04); }
[data-theme="light"] .node-6 { border-color: rgba(59,130,246,0.30); box-shadow: 0 0 20px rgba(59,130,246,0.08), inset 0 0 12px rgba(59,130,246,0.04); }
[data-theme="light"] .node-7 { border-color: rgba(168,85,247,0.30); box-shadow: 0 0 20px rgba(168,85,247,0.08), inset 0 0 12px rgba(168,85,247,0.04); }
[data-theme="light"] .filter-sep { background: rgba(0,0,0,0.10); }