dsh-codegraph-visualizer 0.1.1 → 0.3.0

package/dist/client-cjs/index.css

@@ -1,2404 +0,0 @@
-/* ============================================================================
- * DSH CodeGraph Visualizer — Modern UI Styles
- * Follows dsh-web-ui design tokens (--dsw-* CSS custom properties).
- * WCAG 2.2 AA compliant contrast, backdrop-blur glassmorphism, smooth motion.
- * ============================================================================ */
-
-:root {
-  /* DSH theme bridge — consume host --dsw-* tokens with safe fallbacks.
-   * DSH does not expose CSS custom properties; fallbacks below match the
-   * actual computed values from DSH's light theme (measured via DevTools). */
-  --cg-bg: var(--dsw-bg, #ffffff);
-  --cg-surface: var(--dsw-surface, #f9fafb);
-  --cg-surface-hover: var(--dsw-surface-hover, #f3f4f6);
-  --cg-surface-active: var(--dsw-surface-active, #e5e7eb);
-  --cg-border: var(--dsw-border, rgba(0, 0, 0, 0.04));
-  --cg-border-strong: var(--dsw-border-strong, rgba(0, 0, 0, 0.1));
-  --cg-text: var(--dsw-fg, #0f1115);
-  --cg-text-secondary: var(--dsw-fg-secondary, #61666b);
-  --cg-text-tertiary: var(--dsw-fg-tertiary, #9ca0a5);
-  --cg-accent: var(--dsw-accent, #263148);
-  --cg-accent-hover: var(--dsw-accent-hover, #1a2230);
-  --cg-accent-soft: var(--dsw-accent-soft, rgba(38, 49, 72, 0.1));
-  --cg-success: #10b981;
-  --cg-warning: #f59e0b;
-  --cg-error: #ef4444;
-  --cg-info: #3b82f6;
-
-  /* Node type semantic colors — light theme */
-  --cg-node-default: #263148;
-  --cg-node-function: #059669;
-  --cg-node-class: #1a2230;
-  --cg-node-variable: #d97706;
-  --cg-node-module: #db2777;
-  --cg-node-interface: #0d9488;
-
-  /* Edge type semantic colors — light theme */
-  --cg-edge-default: rgba(0, 0, 0, 0.1);
-  --cg-edge-call: #3b82f6;
-  --cg-edge-import: #10b981;
-  --cg-edge-extend: #ec4899;
-  --cg-edge-implement: #0d9488;
-  --cg-edge-dependency: #f59e0b;
-
-  /* Highlight / analysis colors — light theme */
-  --cg-hover-border: #1a2230;
-  --cg-impact-d1: #f59e0b;
-  --cg-impact-d2: #fbbf24;
-  --cg-impact-d3: #fde68a;
-  --cg-inheritance-extend: #ec4899;
-  --cg-inheritance-implement: #14b8a6;
-  --cg-cluster-bg: rgba(38, 49, 72, 0.10);
-  --cg-cluster-border: #263148;
-  --cg-cluster-hover-bg: rgba(38, 49, 72, 0.25);
-  --cg-cluster-hover-border: #1a2230;
-  --cg-cluster-edge: #263148;
-  --cg-cluster-edge-label-bg: #f9fafb;
-
-  /* Typography — match DSH's actual font stack including CJK fonts */
-  --cg-font-sans: var(--dsw-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif);
-  --cg-font-mono: var(--dsw-font-mono, "JetBrains Mono", "Fira Code", Consolas, "Microsoft YaHei", monospace);
-
-  /* Elevation */
-  --cg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
-  --cg-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  --cg-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
-
-  /* Radii */
-  --cg-radius: 12px;
-  --cg-radius-sm: 8px;
-  --cg-radius-xs: 4px;
-
-  /* Motion */
-  --cg-ease: cubic-bezier(0.4, 0, 0.2, 1);
-  --cg-ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --cg-transition: 180ms var(--cg-ease);
-  --cg-transition-slow: 280ms var(--cg-ease);
-
-  /* Layout */
-  --cg-toolbar-h: 44px;
-  --cg-statusbar-h: 28px;
-}
-
-/* DSH Dark theme — activated when body[data-ds-dark-theme] is set.
- * Values measured from DSH's actual dark theme via DevTools. */
-body[data-ds-dark-theme] {
-  --cg-bg: var(--dsw-bg, #151517);
-  --cg-surface: var(--dsw-surface, #232324);
-  --cg-surface-hover: var(--dsw-surface-hover, #2a2a2c);
-  --cg-surface-active: var(--dsw-surface-active, #333335);
-  --cg-border: var(--dsw-border, rgba(255, 255, 255, 0.08));
-  --cg-border-strong: var(--dsw-border-strong, rgba(255, 255, 255, 0.14));
-  --cg-text: var(--dsw-fg, #f9fafb);
-  --cg-text-secondary: var(--dsw-fg-secondary, #cfd3d6);
-  --cg-text-tertiary: var(--dsw-fg-tertiary, #a8acb0);
-  --cg-accent: var(--dsw-accent, #6366f1);
-  --cg-accent-hover: var(--dsw-accent-hover, #818cf8);
-  --cg-accent-soft: var(--dsw-accent-soft, rgba(99, 102, 241, 0.12));
-
-  /* Node type semantic colors — dark theme */
-  --cg-node-default: #6366f1;
-  --cg-node-function: #10b981;
-  --cg-node-class: #818cf8;
-  --cg-node-variable: #f59e0b;
-  --cg-node-module: #ec4899;
-  --cg-node-interface: #14b8a6;
-
-  /* Edge type semantic colors — dark theme */
-  --cg-edge-default: rgba(255, 255, 255, 0.14);
-  --cg-edge-call: #60a5fa;
-  --cg-edge-import: #34d399;
-  --cg-edge-extend: #f472b6;
-  --cg-edge-implement: #2dd4bf;
-  --cg-edge-dependency: #fbbf24;
-
-  /* Highlight / analysis colors — dark theme */
-  --cg-hover-border: #818cf8;
-  --cg-impact-d1: #f59e0b;
-  --cg-impact-d2: #fbbf24;
-  --cg-impact-d3: #fde68a;
-  --cg-inheritance-extend: #f472b6;
-  --cg-inheritance-implement: #2dd4bf;
-  --cg-cluster-bg: rgba(99, 102, 241, 0.15);
-  --cg-cluster-border: #818cf8;
-  --cg-cluster-hover-bg: rgba(99, 102, 241, 0.35);
-  --cg-cluster-hover-border: #a5b4fc;
-  --cg-cluster-edge: #818cf8;
-  --cg-cluster-edge-label-bg: #232324;
-
-  --cg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
-  --cg-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
-  --cg-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.36);
-}
-
-/* ---- Panel container ------------------------------------------------------ */
-
-.graph-panel {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius);
-  box-shadow: var(--cg-shadow-lg);
-  overflow: hidden;
-  pointer-events: auto;
-  font-family: var(--cg-font-sans);
-  color: var(--cg-text);
-  transition:
-    opacity var(--cg-transition),
-    transform var(--cg-transition);
-  contain: layout paint style;
-}
-
-.graph-panel.collapsed {
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  box-shadow: var(--cg-shadow);
-}
-
-.graph-panel.collapsed .graph-toolbar,
-.graph-panel.collapsed .graph-container,
-.graph-panel.collapsed .search-bar,
-.graph-panel.collapsed .loading-overlay,
-.graph-panel.collapsed .error-overlay,
-.graph-panel.collapsed .empty-state,
-.graph-panel.collapsed .node-detail-panel,
-.graph-panel.collapsed .status-bar,
-.graph-panel.collapsed .mini-map {
-  display: none;
-}
-
-.graph-panel.collapsed .collapse-fab {
-  display: flex;
-}
-
-/* ---- Collapse FAB --------------------------------------------------------- */
-
-.collapse-fab {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  font-size: 22px;
-  color: var(--cg-text);
-  user-select: none;
-  transition: transform var(--cg-transition);
-}
-
-.collapse-fab:hover {
-  transform: scale(1.08);
-}
-
-/* ---- Toolbar ------------------------------------------------------------- */
-
-.graph-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-height: var(--cg-toolbar-h);
-  padding: 4px 10px;
-  background: var(--cg-surface);
-  border-bottom: 1px solid var(--cg-border);
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  overflow: visible;
-}
-
-
-.toolbar-left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--cg-text-secondary);
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.toolbar-center {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  justify-content: center;
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.toolbar-group {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-}
-
-.toolbar-separator {
-  width: 1px;
-  height: 18px;
-  background: var(--cg-border);
-  opacity: 0.6;
-  flex-shrink: 0;
-}
-
-.node-count {
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-.node-count .dot-sep {
-  color: var(--cg-text-tertiary);
-  margin: 0 4px;
-}
-
-/* ---- Type badges (node type stats in toolbar) ---------------------------- */
-
-.type-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 6px;
-  font-size: 10px;
-  font-weight: 600;
-  font-family: var(--cg-font-mono);
-  border-radius: var(--cg-radius-xs);
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-}
-
-.type-badge.function {
-  background: rgba(16, 185, 129, 0.14);
-  color: var(--cg-success);
-}
-
-.type-badge.class {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-hover);
-}
-
-.type-badge.interface {
-  background: rgba(20, 184, 166, 0.14);
-  color: #14b8a6;
-}
-
-/* ---- Layout switcher (segmented control) --------------------------------- */
-
-.layout-buttons {
-  display: flex;
-  gap: 2px;
-  background: var(--cg-bg);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  padding: 2px;
-}
-
-.layout-btn {
-  padding: 3px 8px;
-  border: none;
-  background: transparent;
-  color: var(--cg-text-secondary);
-  font-size: 10px;
-  font-weight: 500;
-  border-radius: var(--cg-radius-xs);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-  text-transform: capitalize;
-  font-family: var(--cg-font-sans);
-}
-
-.layout-btn:hover {
-  color: var(--cg-text);
-  background: var(--cg-surface-hover);
-}
-
-.layout-btn.active {
-  color: var(--cg-text);
-  background: var(--cg-accent);
-  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.4);
-}
-
-/* ---- Graph type switcher (segmented control) ----------------------------- */
-
-.graph-type-buttons {
-  display: flex;
-  gap: 2px;
-  background: var(--cg-bg);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  padding: 2px;
-}
-
-.graph-type-btn {
-  padding: 3px 8px;
-  border: none;
-  background: transparent;
-  color: var(--cg-text-secondary);
-  font-size: 10px;
-  font-weight: 500;
-  border-radius: var(--cg-radius-xs);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-  font-family: var(--cg-font-sans);
-}
-
-.graph-type-btn:hover {
-  color: var(--cg-text);
-  background: var(--cg-surface-hover);
-}
-
-.graph-type-btn.active {
-  color: var(--cg-text);
-  background: var(--cg-success);
-  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.4);
-}
-
-/* ---- Select -------------------------------------------------------------- */
-
-.filter-select {
-  padding: 5px 24px 5px 8px;
-  background: var(--cg-bg);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text);
-  font-size: 11px;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  outline: none;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca0b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  transition: border-color var(--cg-transition);
-}
-
-.filter-select:hover {
-  border-color: var(--cg-accent);
-}
-
-.filter-select:focus-visible {
-  border-color: var(--cg-accent);
-  box-shadow: 0 0 0 2px var(--cg-accent-soft);
-}
-
-.depth-select {
-  padding: 5px 24px 5px 8px;
-  background: var(--cg-bg);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text);
-  font-size: 11px;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  outline: none;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca0b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  transition: border-color var(--cg-transition);
-}
-
-.depth-select:hover {
-  border-color: var(--cg-accent);
-}
-
-.depth-select:focus-visible {
-  border-color: var(--cg-accent);
-  box-shadow: 0 0 0 2px var(--cg-accent-soft);
-}
-
-/* ---- Icon buttons -------------------------------------------------------- */
-
-.search-btn,
-.theme-btn,
-.export-btn,
-.collapse-btn,
-.chain-btn,
-.cycle-btn,
-.impact-btn,
-.inheritance-btn,
-.minimap-btn,
-.refresh-btn {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--cg-border);
-  background: var(--cg-bg);
-  border-radius: var(--cg-radius-sm);
-  cursor: pointer;
-  font-size: 14px;
-  transition: all var(--cg-transition);
-  position: relative;
-  flex-shrink: 0;
-}
-
-.search-btn:hover,
-.theme-btn:hover,
-.export-btn:hover,
-.collapse-btn:hover,
-.chain-btn:hover,
-.cycle-btn:hover,
-.impact-btn:hover,
-.inheritance-btn:hover,
-.minimap-btn:hover,
-.refresh-btn:hover {
-  background: var(--cg-surface-hover);
-  border-color: var(--cg-accent);
-  transform: translateY(-1px);
-}
-
-.search-btn:focus-visible,
-.theme-btn:focus-visible,
-.chain-btn:focus-visible,
-.cycle-btn:focus-visible,
-.impact-btn:focus-visible,
-.inheritance-btn:focus-visible {
-  outline: 2px solid var(--cg-accent);
-  outline-offset: 2px;
-}
-
-.search-btn.active,
-.chain-btn.active,
-.cycle-btn.active,
-.impact-btn.active,
-.inheritance-btn.active,
-.minimap-btn.active {
-  background: var(--cg-accent);
-  border-color: var(--cg-accent-hover);
-  color: var(--cg-text);
-  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.45);
-}
-
-/* ---- Export menu --------------------------------------------------------- */
-
-.export-menu {
-  position: relative;
-}
-
-.export-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 6px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  box-shadow: var(--cg-shadow);
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 4px;
-  z-index: 20;
-  min-width: 120px;
-  animation: cg-dropdown-in 120ms var(--cg-ease-out);
-}
-
-@keyframes cg-dropdown-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.export-dropdown button {
-  padding: 7px 14px;
-  border: none;
-  background: transparent;
-  color: var(--cg-text);
-  font-size: 12px;
-  font-family: var(--cg-font-sans);
-  border-radius: var(--cg-radius-xs);
-  cursor: pointer;
-  text-align: left;
-  transition: background var(--cg-transition);
-}
-
-.export-dropdown button:hover {
-  background: var(--cg-surface-hover);
-}
-
-/* ---- Search bar ---------------------------------------------------------- */
-
-.search-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--cg-bg);
-  border-bottom: 1px solid var(--cg-border);
-  flex-shrink: 0;
-  animation: cg-slide-down 160ms var(--cg-ease-out);
-}
-
-@keyframes cg-slide-down {
-  from { opacity: 0; transform: translateY(-8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.search-bar input {
-  flex: 1;
-  padding: 7px 12px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text);
-  font-size: 13px;
-  font-family: var(--cg-font-sans);
-  outline: none;
-  transition: border-color var(--cg-transition), box-shadow var(--cg-transition);
-}
-
-.search-bar input:focus {
-  border-color: var(--cg-accent);
-  box-shadow: 0 0 0 3px var(--cg-accent-soft);
-}
-
-.search-bar input::placeholder {
-  color: var(--cg-text-tertiary);
-}
-
-.search-bar button {
-  width: 30px;
-  height: 30px;
-  border: 1px solid var(--cg-border);
-  background: var(--cg-surface);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text-secondary);
-  cursor: pointer;
-  font-size: 13px;
-  transition: all var(--cg-transition);
-}
-
-.search-bar button:hover {
-  background: var(--cg-surface-hover);
-  color: var(--cg-text);
-}
-
-.search-hint {
-  font-size: 10px;
-  color: var(--cg-text-tertiary);
-  margin-left: 4px;
-  font-family: var(--cg-font-mono);
-  white-space: nowrap;
-}
-
-/* ---- Overlays (loading / error / empty) ---------------------------------- */
-
-.error-boundary-fallback {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 14px;
-  background: var(--cg-bg);
-  z-index: 10;
-  padding: 24px;
-}
-
-.error-boundary-fallback h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--cg-error);
-}
-
-.error-boundary-fallback p {
-  margin: 0;
-  font-size: 13px;
-  color: var(--cg-text-secondary);
-  text-align: center;
-  max-width: 320px;
-  word-break: break-word;
-}
-
-.error-boundary-fallback button {
-  padding: 6px 16px;
-  border-radius: var(--cg-radius-xs);
-  border: 1px solid var(--cg-border-strong);
-  background: var(--cg-surface);
-  color: var(--cg-text);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background var(--cg-transition);
-}
-
-.error-boundary-fallback button:hover {
-  background: var(--cg-surface-hover);
-}
-
-.loading-overlay,
-.error-overlay,
-.empty-state {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 14px;
-  background: var(--cg-bg);
-  z-index: 5;
-}
-
-.loading-overlay {
-  opacity: 0.9;
-  backdrop-filter: blur(4px);
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
-.spinner::before,
-.spinner::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  border: 2px solid transparent;
-}
-
-.spinner::before {
-  border-top-color: var(--cg-accent);
-  border-right-color: var(--cg-accent);
-  animation: cg-spin 0.8s var(--cg-ease) infinite;
-}
-
-.spinner::after {
-  border-bottom-color: var(--cg-accent-hover);
-  border-left-color: var(--cg-accent-hover);
-  animation: cg-spin 1.2s var(--cg-ease) infinite reverse;
-  inset: 6px;
-}
-
-@keyframes cg-spin {
-  to { transform: rotate(360deg); }
-}
-
-@keyframes cg-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.55; }
-}
-
-.loading-overlay span,
-.empty-state span {
-  color: var(--cg-text-secondary);
-  font-size: 13px;
-}
-
-.empty-state .empty-icon {
-  font-size: 40px;
-  opacity: 0.5;
-}
-
-.error-overlay span {
-  color: var(--cg-error);
-  font-size: 13px;
-}
-
-/* ---- Graph container ----------------------------------------------------- */
-
-.graph-container {
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  background: var(--cg-bg);
-}
-
-.graph-container canvas {
-  display: block;
-}
-
-/* ---- Node detail panel --------------------------------------------------- */
-
-.node-detail-panel {
-  position: absolute;
-  left: 12px;
-  top: 12px;
-  width: 260px;
-  max-height: calc(100% - 24px);
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius);
-  box-shadow: var(--cg-shadow);
-  padding: 14px;
-  z-index: 6;
-  overflow-y: auto;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  animation: cg-slide-right 160ms var(--cg-ease-out);
-}
-
-@keyframes cg-slide-right {
-  from { opacity: 0; transform: translateX(-12px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-.node-detail-panel h3 {
-  margin: 0 0 10px;
-  font-size: 14px;
-  color: var(--cg-text);
-  font-weight: 600;
-  word-break: break-word;
-}
-
-.node-detail-panel .detail-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-}
-
-.node-detail-panel .detail-header h3 {
-  margin: 0;
-  flex: 1;
-}
-
-.node-detail-panel .detail-type-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: 1.5px solid;
-  border-radius: var(--cg-radius-xs);
-  font-size: 10px;
-  font-weight: 700;
-  font-family: var(--cg-font-mono);
-  flex-shrink: 0;
-}
-
-.node-detail-panel .detail-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 5px 0;
-  font-size: 12px;
-  border-bottom: 1px solid var(--cg-border);
-}
-
-.node-detail-panel .detail-label {
-  color: var(--cg-text-secondary);
-  flex-shrink: 0;
-  font-weight: 500;
-}
-
-.node-detail-panel .detail-value {
-  color: var(--cg-text);
-  text-align: right;
-  word-break: break-all;
-  font-family: var(--cg-font-mono);
-  font-size: 11px;
-}
-
-.node-detail-panel .close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  color: var(--cg-text-secondary);
-  cursor: pointer;
-  font-size: 14px;
-  border-radius: var(--cg-radius-xs);
-  transition: all var(--cg-transition);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.node-detail-panel .close-btn:hover {
-  background: var(--cg-surface-hover);
-  color: var(--cg-text);
-}
-
-/* ---- Status bar ---------------------------------------------------------- */
-
-.status-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: var(--cg-statusbar-h);
-  padding: 0 12px;
-  background: var(--cg-surface);
-  border-top: 1px solid var(--cg-border);
-  font-size: 11px;
-  color: var(--cg-text-secondary);
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.status-bar .status-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-}
-
-.status-bar .status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--cg-success);
-  flex-shrink: 0;
-}
-
-.status-bar .status-dot.loading {
-  background: var(--cg-warning);
-  animation: cg-pulse 1s ease-in-out infinite;
-}
-
-.status-bar .status-dot.error {
-  background: var(--cg-error);
-}
-
-.status-bar .status-workspace {
-  color: var(--cg-accent);
-  font-weight: 500;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 6px;
-  border-left: 1px solid var(--cg-border);
-  margin-left: 4px;
-  font-family: var(--cg-font-mono);
-  font-size: 10px;
-}
-
-.status-bar .status-truncated {
-  color: var(--cg-warning);
-  font-size: 11px;
-  padding: 0 4px;
-  border-left: 1px solid var(--cg-border);
-  margin-left: 4px;
-  cursor: help;
-}
-
-.status-bar .status-spacer {
-  flex: 1;
-}
-
-.status-bar .status-time {
-  color: var(--cg-text-tertiary);
-  font-family: var(--cg-font-mono);
-}
-
-/* ---- Mini-map ------------------------------------------------------------ */
-
-.mini-map {
-  position: absolute;
-  right: 12px;
-  bottom: calc(var(--cg-statusbar-h) + 12px);
-  width: 200px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius);
-  box-shadow: var(--cg-shadow);
-  z-index: 6;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  overflow: hidden;
-  animation: cg-slide-up 160ms var(--cg-ease-out);
-}
-
-@keyframes cg-slide-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.mini-map-header {
-  padding: 7px 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--cg-text-secondary);
-  border-bottom: 1px solid var(--cg-border);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.mini-map-content {
-  padding: 10px 12px;
-}
-
-.mini-map-thumbnail {
-  position: relative;
-  margin-bottom: 8px;
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  overflow: hidden;
-  background: var(--cg-surface);
-}
-
-.mini-map-viewport {
-  border: 2px solid var(--cg-accent);
-  background: rgba(99, 102, 241, 0.1);
-  pointer-events: none;
-  transition: all 0.3s ease;
-}
-
-.mini-map-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.mini-map-stats div {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--cg-text-secondary);
-}
-
-.mini-map-stats .dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.mini-map-total {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--cg-border);
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--cg-text);
-}
-
-/* ---- Tooltip (node hover) ------------------------------------------------ */
-
-.cg-tooltip {
-  position: fixed;
-  z-index: 9999;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border-strong);
-  border-radius: var(--cg-radius-sm);
-  box-shadow: var(--cg-shadow);
-  padding: 8px 12px;
-  font-size: 12px;
-  font-family: var(--cg-font-sans);
-  color: var(--cg-text);
-  pointer-events: none;
-  max-width: 320px;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  animation: cg-tooltip-in 100ms var(--cg-ease-out);
-}
-
-@keyframes cg-tooltip-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.cg-tooltip .tooltip-name {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-
-.cg-tooltip .tooltip-path {
-  color: var(--cg-text-secondary);
-  font-family: var(--cg-font-mono);
-  font-size: 11px;
-  word-break: break-all;
-}
-
-.cg-tooltip .tooltip-type {
-  display: inline-block;
-  margin-top: 4px;
-  padding: 1px 6px;
-  border-radius: var(--cg-radius-xs);
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-hover);
-}
-
-.cg-tooltip .tooltip-edge-source {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-
-.cg-tooltip .tooltip-edge-arrow {
-  color: var(--cg-text-secondary);
-  font-size: 11px;
-  margin-bottom: 2px;
-}
-
-.cg-tooltip .tooltip-edge-target {
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-/* ---- Resize handle ------------------------------------------------------- */
-
-.graph-panel.resizable .resize-handle {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  bottom: 0;
-  right: 0;
-  cursor: nwse-resize;
-  z-index: 10;
-}
-
-.graph-panel.resizable .resize-handle::after {
-  content: '';
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-  width: 10px;
-  height: 10px;
-  border-right: 2px solid var(--cg-text-tertiary);
-  border-bottom: 2px solid var(--cg-text-tertiary);
-  transition: border-color var(--cg-transition);
-}
-
-.graph-panel.resizable .resize-handle:hover::after {
-  border-right-color: var(--cg-accent);
-  border-bottom-color: var(--cg-accent);
-}
-
-/* ---- Scrollbar styling --------------------------------------------------- */
-
-.node-detail-panel::-webkit-scrollbar,
-.mini-map::-webkit-scrollbar {
-  width: 6px;
-}
-
-.node-detail-panel::-webkit-scrollbar-track,
-.mini-map::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.node-detail-panel::-webkit-scrollbar-thumb,
-.mini-map::-webkit-scrollbar-thumb {
-  background: var(--cg-border-strong);
-  border-radius: 3px;
-}
-
-.node-detail-panel::-webkit-scrollbar-thumb:hover,
-.mini-map::-webkit-scrollbar-thumb:hover {
-  background: var(--cg-text-tertiary);
-}
-
-/* ---- Responsive ---------------------------------------------------------- */
-
-/* Small panels (DSH sidebar tab, narrow bottom panel) */
-@media (max-width: 480px) {
-  .graph-panel {
-    border-radius: var(--cg-radius-sm);
-  }
-
-  .graph-toolbar {
-    padding: 0 8px;
-    gap: 4px;
-  }
-
-  .toolbar-left {
-    font-size: 11px;
-  }
-
-  .toolbar-center {
-    gap: 4px;
-  }
-
-  .toolbar-right {
-    gap: 4px;
-  }
-
-  .layout-btn,
-  .graph-type-btn {
-    padding: 3px 6px;
-    font-size: 10px;
-  }
-
-  .search-btn,
-  .theme-btn,
-  .export-btn,
-  .collapse-btn,
-  .chain-btn,
-  .cycle-btn,
-  .minimap-btn,
-  .refresh-btn,
-  .import-btn,
-  .legend-btn,
-  .lang-btn {
-    width: 26px;
-    height: 26px;
-    font-size: 12px;
-  }
-
-  .node-detail-panel {
-    width: calc(100% - 24px);
-    left: 12px;
-    top: 12px;
-  }
-
-  .legend-panel {
-    width: 140px;
-  }
-
-  .mini-map {
-    width: 140px;
-  }
-
-  .type-badge {
-    display: none;
-  }
-
-  .toolbar-separator {
-    display: none;
-  }
-
-  .graph-type-buttons {
-    display: none;
-  }
-
-}
-
-/* Medium panels (DSH sidebar medium width) */
-@media (max-width: 768px) {
-  .graph-toolbar {
-    padding: 0 8px;
-    gap: 6px;
-  }
-
-  .toolbar-center {
-    gap: 6px;
-  }
-
-  .toolbar-right {
-    gap: 6px;
-  }
-
-  .layout-btn,
-  .graph-type-btn {
-    padding: 3px 8px;
-    font-size: 11px;
-  }
-
-  .node-detail-panel {
-    width: 220px;
-  }
-
-  .legend-panel {
-    width: 160px;
-  }
-
-  .mini-map {
-    width: 160px;
-  }
-
-  .filter-select {
-    font-size: 11px;
-  }
-
-  .toolbar-separator {
-    margin: 0 2px;
-  }
-
-}
-
-/* Very small panels */
-@media (max-width: 320px) {
-  .graph-toolbar {
-    gap: 2px;
-  }
-
-  .layout-buttons,
-  .graph-type-buttons {
-    padding: 1px;
-  }
-
-  .layout-btn,
-  .graph-type-btn {
-    padding: 2px 4px;
-    font-size: 9px;
-  }
-
-  .filter-select {
-    padding: 3px 20px 3px 6px;
-    font-size: 10px;
-  }
-
-  .node-count {
-    font-size: 10px;
-  }
-
-  .legend-panel,
-  .mini-map {
-    width: 120px;
-  }
-}
-
-/* Large screens — allow fixed floating panel */
-@media (min-width: 1200px) {
-  .graph-panel.floating {
-    position: fixed;
-    right: 16px;
-    bottom: 16px;
-    width: 640px;
-    height: 520px;
-  }
-}
-
-/* ---- Reduced motion ------------------------------------------------------ */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* ---- Import button + Legend button + Lang button (share icon-button styles) -- */
-
-.import-btn,
-.legend-btn,
-.lang-btn {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--cg-border);
-  background: var(--cg-bg);
-  border-radius: var(--cg-radius-sm);
-  cursor: pointer;
-  color: var(--cg-text-secondary);
-  transition: all var(--cg-transition);
-  flex-shrink: 0;
-}
-
-.import-btn:hover,
-.legend-btn:hover,
-.lang-btn:hover {
-  background: var(--cg-surface-hover);
-  border-color: var(--cg-accent);
-  color: var(--cg-text);
-  transform: translateY(-1px);
-}
-
-.import-btn:focus-visible,
-.legend-btn:focus-visible,
-.lang-btn:focus-visible {
-  outline: 2px solid var(--cg-accent);
-  outline-offset: 2px;
-}
-
-.import-btn.active,
-.legend-btn.active,
-.lang-btn.active {
-  background: var(--cg-accent);
-  border-color: var(--cg-accent-hover);
-  color: var(--cg-text);
-  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.45);
-}
-
-.lang-label {
-  font-size: 11px;
-  font-weight: 600;
-  font-family: var(--cg-font-sans);
-}
-
-/* ---- Search bar icon ----------------------------------------------------- */
-
-.search-bar-icon {
-  color: var(--cg-text-tertiary);
-  flex-shrink: 0;
-}
-
-/* ---- Empty state (enhanced) ---------------------------------------------- */
-
-.empty-state .empty-icon {
-  font-size: 40px;
-  opacity: 0.5;
-  color: var(--cg-text-tertiary);
-}
-
-.empty-state .empty-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--cg-text);
-}
-
-.empty-state .empty-subtitle {
-  font-size: 12px;
-  color: var(--cg-text-secondary);
-  max-width: 280px;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.empty-import-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: var(--cg-accent);
-  color: var(--cg-text);
-  border: none;
-  border-radius: var(--cg-radius-sm);
-  font-size: 13px;
-  font-weight: 500;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
-}
-
-.empty-import-btn:hover {
-  background: var(--cg-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
-}
-
-.empty-scan-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: var(--cg-surface);
-  color: var(--cg-text);
-  border: 1px solid var(--cg-border-strong);
-  border-radius: var(--cg-radius-sm);
-  font-size: 13px;
-  font-weight: 500;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-}
-
-.empty-scan-btn:hover {
-  background: var(--cg-surface-hover);
-  transform: translateY(-1px);
-}
-
-.empty-prereq-warning {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px 14px;
-  background: rgba(245, 158, 11, 0.08);
-  border: 1px solid rgba(245, 158, 11, 0.25);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text-primary);
-  font-size: 12px;
-  line-height: 1.4;
-  max-width: 400px;
-  text-align: left;
-}
-
-.prereq-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 0;
-  border-top: 1px solid rgba(245, 158, 11, 0.15);
-}
-
-.prereq-item:first-of-type {
-  border-top: none;
-  padding-top: 4px;
-}
-
-.prereq-item-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.prereq-status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.prereq-status-dot.ok {
-  background: var(--cg-success, #22c55e);
-}
-
-.prereq-status-dot.missing {
-  background: #ef4444;
-}
-
-.prereq-item-label {
-  font-weight: 600;
-  color: var(--cg-text-primary);
-}
-
-.prereq-item-status {
-  font-size: 11px;
-  color: #ef4444;
-  margin-left: auto;
-}
-
-.prereq-item-desc {
-  font-size: 11px;
-  color: var(--cg-text-tertiary);
-  padding-left: 14px;
-}
-
-.watch-indicator {
-  color: var(--cg-success, #22c55e);
-  font-size: 8px;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-/* ---- Node detail extra properties ---------------------------------------- */
-
-.node-detail-panel .detail-extra {
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid var(--cg-border);
-}
-
-.node-detail-panel .detail-extra-title {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--cg-text-tertiary);
-  margin-bottom: 6px;
-}
-
-/* ---- Import panel -------------------------------------------------------- */
-
-.import-panel {
-  position: absolute;
-  inset: var(--cg-toolbar-h) 0 var(--cg-statusbar-h) 0;
-  background: var(--cg-bg);
-  z-index: 15;
-  display: flex;
-  flex-direction: column;
-  animation: cg-slide-down 160ms var(--cg-ease-out);
-}
-
-.import-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--cg-border);
-}
-
-.import-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--cg-text);
-}
-
-.import-close {
-  width: 26px;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--cg-text-secondary);
-  cursor: pointer;
-  border-radius: var(--cg-radius-xs);
-  transition: all var(--cg-transition);
-}
-
-.import-close:hover {
-  background: var(--cg-surface-hover);
-  color: var(--cg-text);
-}
-
-.import-tabs {
-  display: flex;
-  gap: 2px;
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--cg-border);
-}
-
-.import-tabs button {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border: 1px solid var(--cg-border);
-  background: transparent;
-  color: var(--cg-text-secondary);
-  font-size: 12px;
-  font-family: var(--cg-font-sans);
-  border-radius: var(--cg-radius-sm);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-}
-
-.import-tabs button:hover {
-  background: var(--cg-surface-hover);
-  color: var(--cg-text);
-}
-
-.import-tabs button.active {
-  background: var(--cg-accent);
-  border-color: var(--cg-accent-hover);
-  color: var(--cg-text);
-}
-
-.import-body {
-  flex: 1;
-  padding: 16px 14px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-
-.paste-zone,
-.workspace-zone {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  flex: 1;
-}
-
-.workspace-zone {
-  padding: 4px 0;
-}
-
-.workspace-path-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.workspace-path-icon {
-  color: var(--cg-text-tertiary);
-}
-
-.workspace-path-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--cg-text-secondary);
-}
-
-.workspace-path-value {
-  padding: 8px 12px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text);
-  font-size: 12px;
-  font-family: var(--cg-font-mono);
-  word-break: break-all;
-  line-height: 1.5;
-}
-
-.workspace-hint {
-  font-size: 11px;
-  color: var(--cg-text-tertiary);
-}
-
-.workspace-path-input {
-  padding: 8px 12px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text);
-  font-size: 12px;
-  font-family: var(--cg-font-mono);
-  outline: none;
-  transition: border-color var(--cg-transition);
-}
-
-.workspace-path-input:focus {
-  border-color: var(--cg-accent);
-  box-shadow: 0 0 0 3px var(--cg-accent-soft);
-}
-
-.workspace-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.import-submit.secondary {
-  background: var(--cg-surface);
-  color: var(--cg-text);
-  border: 1px solid var(--cg-border);
-}
-
-.import-submit.secondary:hover:not(:disabled) {
-  border-color: var(--cg-accent);
-  color: var(--cg-accent);
-  background: var(--cg-accent-soft);
-}
-
-.watch-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  background: transparent;
-  color: var(--cg-text-secondary);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  font-size: 12px;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-  align-self: flex-start;
-}
-
-.watch-toggle:hover {
-  border-color: var(--cg-accent);
-  color: var(--cg-accent);
-}
-
-.watch-toggle.active {
-  background: var(--cg-accent-soft);
-  border-color: var(--cg-accent);
-  color: var(--cg-accent);
-}
-
-.init-feedback {
-  padding: 6px 12px;
-  border-radius: var(--cg-radius-sm);
-  font-size: 12px;
-}
-
-.init-feedback.ok {
-  background: var(--cg-success-soft, rgba(34, 197, 94, 0.1));
-  color: var(--cg-success, #22c55e);
-}
-
-.init-feedback.err {
-  background: var(--cg-error-soft, rgba(239, 68, 68, 0.1));
-  color: var(--cg-error, #ef4444);
-}
-
-.prereq-warning {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 14px;
-  margin: 0 14px 8px;
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid rgba(245, 158, 11, 0.3);
-  border-radius: var(--cg-radius-sm);
-  color: #f59e0b;
-  font-size: 12px;
-  line-height: 1.4;
-  flex-wrap: wrap;
-}
-
-.prereq-install {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding-top: 6px;
-}
-
-.prereq-install code {
-  flex: 1;
-  padding: 4px 8px;
-  background: rgba(245, 158, 11, 0.12);
-  border: 1px dashed rgba(245, 158, 11, 0.4);
-  border-radius: var(--cg-radius-sm);
-  font-family: var(--cg-font-mono);
-  font-size: 11px;
-  color: #fbbf24;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.prereq-copy {
-  flex-shrink: 0;
-  padding: 4px 10px;
-  background: transparent;
-  border: 1px solid rgba(245, 158, 11, 0.4);
-  border-radius: var(--cg-radius-sm);
-  color: #f59e0b;
-  font-size: 11px;
-  cursor: pointer;
-  transition: all var(--cg-transition);
-}
-
-.prereq-copy:hover {
-  background: rgba(245, 158, 11, 0.15);
-}
-
-.paste-input {
-  flex: 1;
-  min-height: 160px;
-  padding: 10px 12px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-text);
-  font-size: 12px;
-  font-family: var(--cg-font-mono);
-  resize: vertical;
-  outline: none;
-  transition: border-color var(--cg-transition);
-}
-
-.paste-input:focus {
-  border-color: var(--cg-accent);
-  box-shadow: 0 0 0 3px var(--cg-accent-soft);
-}
-
-
-.import-submit {
-  align-self: flex-start;
-  padding: 8px 18px;
-  background: var(--cg-accent);
-  color: var(--cg-text);
-  border: none;
-  border-radius: var(--cg-radius-sm);
-  font-size: 13px;
-  font-weight: 500;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-}
-
-.import-submit:hover:not(:disabled) {
-  background: var(--cg-accent-hover);
-  transform: translateY(-1px);
-}
-
-.import-submit:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.import-feedback {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  margin: 0 14px 12px;
-  border-radius: var(--cg-radius-sm);
-  font-size: 12px;
-}
-
-.import-feedback.ok {
-  background: rgba(16, 185, 129, 0.12);
-  color: var(--cg-success);
-}
-
-.import-feedback.err {
-  background: rgba(239, 68, 68, 0.12);
-  color: var(--cg-error);
-}
-
-/* ---- Legend panel -------------------------------------------------------- */
-
-.legend-panel {
-  position: absolute;
-  left: 12px;
-  bottom: calc(var(--cg-statusbar-h) + 12px);
-  width: 180px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius);
-  box-shadow: var(--cg-shadow);
-  z-index: 6;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  overflow: hidden;
-  animation: cg-slide-up 160ms var(--cg-ease-out);
-}
-
-.legend-header {
-  padding: 7px 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--cg-text-secondary);
-  border-bottom: 1px solid var(--cg-border);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.legend-close {
-  background: transparent;
-  border: none;
-  color: var(--cg-text-secondary);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 4px;
-  border-radius: var(--cg-radius-xs);
-  line-height: 1;
-}
-
-.legend-close:hover {
-  color: var(--cg-text);
-}
-
-.legend-body {
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.legend-section-title {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--cg-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 4px;
-}
-
-.legend-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--cg-text-secondary);
-  padding: 2px 0;
-}
-
-.legend-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.legend-line {
-  width: 18px;
-  height: 0;
-  border-top: 2px solid var(--cg-text-secondary);
-  flex-shrink: 0;
-}
-
-/* ---- Workspace selector --------------------------------------------------- */
-
-.workspace-selector {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.workspace-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  background: var(--cg-surface-hover);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-xs);
-  color: var(--cg-text);
-  font-size: 12px;
-  font-family: var(--cg-font-sans);
-  cursor: pointer;
-  transition: background var(--cg-transition), border-color var(--cg-transition);
-  max-width: 160px;
-}
-
-.workspace-trigger:hover {
-  background: var(--cg-surface-active);
-  border-color: var(--cg-border-strong);
-}
-
-.workspace-trigger:focus-visible {
-  outline: 2px solid var(--cg-accent);
-  outline-offset: 1px;
-}
-
-.workspace-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-}
-
-.workspace-chevron {
-  opacity: 0.6;
-  flex-shrink: 0;
-}
-
-.workspace-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 240px;
-  max-width: 320px;
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border-strong);
-  border-radius: var(--cg-radius-sm);
-  box-shadow: var(--cg-shadow-lg);
-  z-index: 1100;
-  overflow: hidden;
-  animation: ws-slide-in 120ms var(--cg-ease-out);
-}
-
-.workspace-dropdown-portal {
-  position: fixed;
-  z-index: 9999;
-}
-
-@keyframes ws-slide-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.workspace-dropdown-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--cg-border);
-  font-size: 11px;
-  color: var(--cg-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.workspace-add-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  background: transparent;
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-xs);
-  color: var(--cg-text-secondary);
-  cursor: pointer;
-  transition: background var(--cg-transition), color var(--cg-transition);
-}
-
-.workspace-add-btn:hover {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent);
-  border-color: var(--cg-accent);
-}
-
-.workspace-add-form {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--cg-border);
-}
-
-.workspace-add-form input {
-  flex: 1;
-  padding: 4px 8px;
-  background: var(--cg-bg);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-xs);
-  color: var(--cg-text);
-  font-size: 12px;
-  font-family: var(--cg-font-mono);
-  outline: none;
-}
-
-.workspace-add-form input:focus {
-  border-color: var(--cg-accent);
-}
-
-.workspace-add-form button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  background: var(--cg-accent);
-  border: none;
-  border-radius: var(--cg-radius-xs);
-  color: white;
-  cursor: pointer;
-  transition: background var(--cg-transition);
-}
-
-.workspace-add-form button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.workspace-add-form button:not(:disabled):hover {
-  background: var(--cg-accent-hover);
-}
-
-.workspace-list {
-  max-height: 260px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.workspace-item {
-  display: grid;
-  grid-template-columns: auto 1fr auto auto;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 10px;
-  cursor: pointer;
-  transition: background var(--cg-transition);
-  position: relative;
-}
-
-.workspace-item:hover {
-  background: var(--cg-surface-hover);
-}
-
-.workspace-item.current {
-  background: var(--cg-accent-soft);
-}
-
-.workspace-item-name {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--cg-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.workspace-item-path {
-  grid-column: 2;
-  font-size: 10px;
-  color: var(--cg-text-tertiary);
-  font-family: var(--cg-font-mono);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.2;
-}
-
-.workspace-item-time {
-  font-size: 10px;
-  color: var(--cg-text-tertiary);
-  white-space: nowrap;
-}
-
-.workspace-item-badge {
-  font-size: 9px;
-  padding: 1px 5px;
-  background: var(--cg-accent);
-  color: white;
-  border-radius: 3px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  white-space: nowrap;
-}
-
-.workspace-item-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  background: transparent;
-  border: none;
-  border-radius: 3px;
-  color: var(--cg-text-tertiary);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity var(--cg-transition), color var(--cg-transition);
-}
-
-.workspace-item:hover .workspace-item-remove {
-  opacity: 1;
-}
-
-.workspace-item-remove:hover {
-  color: var(--cg-error);
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.workspace-empty {
-  padding: 16px 10px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--cg-text-tertiary);
-}
-
-/* ---- Keyboard help -------------------------------------------------------- */
-
-.keyboard-help-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(2px);
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: cg-fade-in 120ms var(--cg-ease-out);
-}
-
-.keyboard-help-panel {
-  background: var(--cg-surface);
-  border: 1px solid var(--cg-border-strong);
-  border-radius: var(--cg-radius);
-  box-shadow: var(--cg-shadow-lg);
-  min-width: 280px;
-  max-width: 360px;
-  padding: 0;
-  animation: cg-slide-up 160ms var(--cg-ease-out);
-}
-
-.keyboard-help-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--cg-border);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--cg-text);
-}
-
-.keyboard-help-close {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  border-radius: var(--cg-radius-xs);
-  color: var(--cg-text-tertiary);
-  cursor: pointer;
-  font-size: 16px;
-  transition: color var(--cg-transition), background var(--cg-transition);
-}
-
-.keyboard-help-close:hover {
-  color: var(--cg-text);
-  background: var(--cg-surface-hover);
-}
-
-.keyboard-help-list {
-  padding: 8px 16px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.keyboard-help-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.keyboard-help-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  height: 24px;
-  padding: 0 8px;
-  background: var(--cg-surface-active);
-  border: 1px solid var(--cg-border-strong);
-  border-radius: var(--cg-radius-xs);
-  font-family: var(--cg-font-mono);
-  font-size: 11px;
-  color: var(--cg-text);
-  box-shadow: 0 1px 0 var(--cg-border-strong);
-}
-
-.keyboard-help-desc {
-  font-size: 13px;
-  color: var(--cg-text-secondary);
-}
-
-@keyframes cg-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes cg-slide-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* ---- Expandable node indicators ------------------------------------------- */
-
-.node-detail-panel .detail-expand-hint {
-  margin-top: 8px;
-  padding: 6px 10px;
-  background: var(--cg-accent-soft);
-  border: 1px solid var(--cg-accent);
-  border-radius: var(--cg-radius-xs);
-  font-size: 11px;
-  color: var(--cg-accent);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.node-detail-panel .detail-connections {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--cg-border);
-}
-
-.node-detail-panel .detail-connections-title {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--cg-text-tertiary);
-  margin-bottom: 6px;
-}
-
-.node-detail-panel .detail-connection-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 0;
-  font-size: 11px;
-  color: var(--cg-text-secondary);
-}
-
-.node-detail-panel .detail-connection-type {
-  display: inline-block;
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-size: 9px;
-  font-weight: 600;
-  text-transform: uppercase;
-  background: var(--cg-surface-active);
-  color: var(--cg-text-tertiary);
-  flex-shrink: 0;
-}
-
-.node-detail-panel .detail-connection-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ---- Depth level indicator ------------------------------------------------ */
-
-.depth-level-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 2px 8px;
-  background: var(--cg-accent-soft);
-  border: 1px solid var(--cg-accent);
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--cg-accent);
-  white-space: nowrap;
-}
-
-.depth-level-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--cg-accent);
-}
-
-.depth-level-dot.active {
-  background: var(--cg-success);
-  box-shadow: 0 0 4px var(--cg-success);
-}
-
-/* ---- Expanded node badge in detail panel ---------------------------------- */
-
-.node-detail-panel .detail-expanded-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  background: rgba(16, 185, 129, 0.12);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--cg-success);
-  margin-left: 6px;
-}
-
-/* ---- Collapse-all button -------------------------------------------------- */
-
-.collapse-all-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  background: var(--cg-surface-hover);
-  border: 1px solid var(--cg-border);
-  border-radius: var(--cg-radius-xs);
-  font-size: 10px;
-  color: var(--cg-text-secondary);
-  cursor: pointer;
-  transition: all var(--cg-transition);
-  white-space: nowrap;
-}
-
-.collapse-all-btn:hover {
-  background: var(--cg-surface-active);
-  color: var(--cg-text);
-  border-color: var(--cg-border-strong);
-}
-
-/* ---- Smooth graph transitions --------------------------------------------- */
-
-.graph-container {
-  transition: opacity 200ms var(--cg-ease);
-}
-
-.graph-container.loading {
-  opacity: 0.4;
-}
-
-/* ---- Responsive improvements ---------------------------------------------- */
-
-@media (max-width: 768px) {
-  .depth-level-indicator {
-    display: none;
-  }
-}
-
-@media (max-width: 480px) {
-  .collapse-all-btn {
-    display: none;
-  }
-}
-