dsh-codegraph-visualizer 0.1.0

package/dist/client/index.css

@@ -0,0 +1,2404 @@
+/* ============================================================================
+ * 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;
+  }
+}
+