@erd-studio/renderer 0.1.0

package/dist/styles.css

@@ -0,0 +1,2963 @@
+@import "@xyflow/react/dist/style.css";
+
+/* src/components/common/KeyBadge.css */
+.key-badge {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 2px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1.5;
+  letter-spacing: 0.3px;
+  transition:
+    opacity 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease;
+}
+.key-badge--clickable {
+  cursor: pointer;
+  user-select: none;
+}
+.key-badge--clickable:hover {
+  filter: brightness(1.15);
+}
+.key-badge--clickable:focus {
+  outline: 2px solid var(--focus-border);
+  outline-offset: 1px;
+}
+.key-badge--inactive {
+  opacity: 0.3;
+  background: rgba(128, 128, 128, 0.15);
+  color: var(--vscode-descriptionForeground, #888);
+}
+.key-badge--inactive:hover {
+  opacity: 0.6;
+}
+.key-badge--active {
+  opacity: 1;
+}
+.key-badge--pk.key-badge--active {
+  background: rgba(234, 179, 8, 0.2);
+  color: #ca8a04;
+}
+.key-badge--fk.key-badge--active {
+  background: rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+}
+.key-badge--nk.key-badge--active {
+  background: rgba(168, 85, 247, 0.2);
+  color: #a855f7;
+}
+.key-badge--planned.key-badge--active,
+.key-badge--missing.key-badge--active {
+  opacity: 0.85;
+}
+
+/* src/components/common/DataTypeSelect.css */
+.data-type-select {
+  position: relative;
+  display: inline-block;
+}
+.data-type-select--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.data-type-select__trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border: 1px solid var(--input-border, var(--panel-border));
+  border-radius: 2px;
+  background: var(--input-bg);
+  color: var(--input-fg, var(--editor-fg));
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+  cursor: pointer;
+  min-width: 70px;
+  text-align: left;
+}
+.data-type-select__trigger:hover {
+  background: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.05));
+}
+.data-type-select__trigger:focus {
+  outline: 1px solid var(--focus-border);
+  outline-offset: -1px;
+  border-color: var(--focus-border);
+}
+.data-type-select--open .data-type-select__trigger {
+  border-color: var(--focus-border);
+}
+.data-type-select__value {
+  flex: 1;
+}
+.data-type-select__arrow {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.data-type-select__dropdown {
+  position: fixed;
+  margin: 2px 0 0 0;
+  padding: 2px 0;
+  list-style: none;
+  background: var(--vscode-dropdown-background, var(--panel-bg));
+  border: 1px solid var(--vscode-dropdown-border, var(--panel-border));
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  z-index: 9999;
+  max-height: 200px;
+  overflow-y: auto;
+  min-width: 90px;
+}
+.data-type-select__dropdown:focus {
+  outline: none;
+}
+.data-type-select__option {
+  padding: 4px 8px;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+  color: var(--vscode-dropdown-foreground, var(--editor-fg));
+  cursor: pointer;
+}
+.data-type-select__option:hover,
+.data-type-select__option:focus {
+  background: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.1));
+  outline: none;
+}
+.data-type-select__option--selected {
+  background: var(--vscode-list-activeSelectionBackground, rgba(0, 120, 212, 0.3));
+  color: var(--vscode-list-activeSelectionForeground, var(--editor-fg));
+}
+.data-type-select__option--selected:hover,
+.data-type-select__option--selected:focus {
+  background: var(--vscode-list-activeSelectionBackground, rgba(0, 120, 212, 0.4));
+}
+
+/* src/components/Graph/ColumnTooltip.css */
+.column-tooltip {
+  position: fixed;
+  z-index: 10000;
+  min-width: 260px;
+  max-width: 420px;
+  padding: 10px 14px;
+  background: var(--vscode-editorHoverWidget-background, var(--panel-bg, #252526));
+  border: 1px solid var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--vscode-editorHoverWidget-foreground, var(--editor-fg, #d4d4d4));
+  pointer-events: none;
+  opacity: 0;
+  white-space: normal;
+  word-wrap: break-word;
+  transition: opacity 0.12s ease;
+}
+.column-tooltip--visible {
+  opacity: 1;
+}
+.column-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+}
+.column-tooltip--flipped::after {
+  top: auto;
+  bottom: 100%;
+  border-top-color: transparent;
+  border-bottom-color: var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+}
+.column-tooltip__header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.column-tooltip__name {
+  font-weight: 600;
+  font-size: 13px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.column-tooltip__type {
+  flex-shrink: 0;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.column-tooltip__description {
+  padding: 6px 0;
+  border-top: 1px solid var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+  color: var(--vscode-editorHoverWidget-foreground, var(--editor-fg, #d4d4d4));
+  font-size: 13px;
+}
+.column-tooltip__details {
+  padding-top: 6px;
+  border-top: 1px solid var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.column-tooltip__row {
+  display: flex;
+  gap: 10px;
+}
+.column-tooltip__label {
+  flex-shrink: 0;
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--vscode-descriptionForeground, #888);
+  min-width: 52px;
+}
+.column-tooltip__value {
+  font-size: 13px;
+}
+
+/* src/components/Graph/HoverTip.css */
+.hover-tip {
+  position: fixed;
+  z-index: 10000;
+  max-width: 320px;
+  padding: 6px 10px;
+  background: var(--vscode-editorHoverWidget-background, var(--panel-bg, #252526));
+  border: 1px solid var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+  border-radius: 5px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--vscode-editorHoverWidget-foreground, var(--editor-fg, #d4d4d4));
+  pointer-events: none;
+  opacity: 0;
+  white-space: normal;
+  word-wrap: break-word;
+  transition: opacity 0.12s ease;
+}
+.hover-tip--visible {
+  opacity: 1;
+}
+
+/* src/components/Graph/ModelNode.css */
+.model-node {
+  width: max-content;
+  min-width: 200px;
+  max-width: 480px;
+  background: var(--editor-bg);
+  border: 2px solid var(--panel-border);
+  border-radius: 6px;
+  font-size: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+.model-node--logical {
+  border-color: var(--stage-logical);
+}
+.model-node--physical {
+  border-color: var(--stage-physical);
+}
+.model-node--ghost {
+  border-color: var(--stage-ghost);
+  border-style: dashed;
+  opacity: 0.65;
+}
+.model-node--ghost-disabled {
+  border-style: dotted;
+}
+.model-node--disc-extra {
+  box-shadow: 0 0 0 2px var(--discrepancy-extra), 0 0 12px 2px rgba(245, 158, 11, 0.35);
+}
+.model-node--selected {
+  box-shadow: 0 0 0 2px var(--stage-logical), 0 0 10px 1px rgba(96, 165, 250, 0.4);
+}
+.model-node--physical.model-node--selected {
+  box-shadow: 0 0 0 2px var(--stage-physical), 0 0 10px 1px rgba(34, 197, 94, 0.4);
+}
+.model-node--disc-extra.model-node--selected {
+  box-shadow: 0 0 0 2px var(--discrepancy-extra), 0 0 12px 2px rgba(245, 158, 11, 0.35);
+}
+.model-node--dimmed {
+  opacity: 0.25;
+  filter: grayscale(0.4);
+  transition: opacity 0.15s ease, filter 0.15s ease;
+}
+.model-node--dimmed:hover {
+  opacity: 0.4;
+}
+.model-node--ghost.model-node--dimmed {
+  opacity: 0.3;
+}
+.model-node__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--panel-bg);
+  border-bottom: 1px solid var(--panel-border);
+  font-weight: 600;
+  line-height: 1.3;
+}
+.model-node__name {
+  flex: 1;
+  white-space: nowrap;
+}
+.model-node__badge {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.model-node__source {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  background: var(--dim-fg);
+  color: var(--editor-bg);
+}
+.model-node__source--catalog {
+  background: var(--ok-bg);
+  color: var(--ok-fg);
+}
+.model-node__badge--layer {
+  opacity: 0.7;
+  font-style: italic;
+}
+.model-node__discrepancy-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 700;
+  background: rgba(204, 167, 0, 0.2);
+  color: var(--vscode-editorWarning-foreground, #cca700);
+}
+.model-node__rationale-badge {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  background: rgba(139, 92, 246, 0.2);
+  color: #8b5cf6;
+}
+.model-node__role-badge {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+.model-node__grain {
+  padding: 1px 10px 4px;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--editor-fg);
+  opacity: 0.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--panel-border);
+}
+.model-node__columns {
+  padding: 2px 0;
+}
+.model-node__column {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  line-height: 1.4;
+  cursor: grab;
+  user-select: none;
+  transition: box-shadow 0.15s ease, filter 0.15s ease;
+}
+.model-node__column:hover {
+  background: var(--selection-bg);
+}
+.model-node__column--pressing {
+  cursor: grabbing;
+  animation: column-press-pulse 0.4s ease-in-out infinite;
+}
+@keyframes column-press-pulse {
+  0%, 100% {
+    box-shadow: inset 0 0 0 2px var(--focus-border);
+    filter: brightness(1.15);
+  }
+  50% {
+    box-shadow: inset 0 0 0 2px var(--focus-border), 0 0 8px 2px var(--focus-border);
+    filter: brightness(1.25);
+  }
+}
+.model-node__column--dragging {
+  cursor: grabbing;
+  opacity: 0.6;
+  box-shadow: inset 0 0 0 2px var(--focus-border);
+}
+.model-node__column--drop-target {
+  background: rgba(0, 127, 212, 0.18) !important;
+  box-shadow: inset 0 0 0 2px var(--focus-border), 0 0 10px 2px rgba(0, 127, 212, 0.35);
+  filter: brightness(1.2);
+  cursor: crosshair;
+  transition: box-shadow 0.1s ease, background 0.1s ease;
+}
+.model-node__column--relationship-highlight {
+  background: var(--selection-bg) !important;
+  box-shadow: inset 0 0 0 1.5px var(--focus-border), 0 0 6px 1px rgba(0, 127, 212, 0.25);
+  filter: brightness(1.15);
+  transition:
+    box-shadow 0.15s ease,
+    background 0.15s ease,
+    filter 0.15s ease;
+}
+.model-node__column--disc-extra {
+  background: rgba(245, 158, 11, 0.1);
+  border-left: 2px solid var(--discrepancy-extra);
+}
+.model-node__column--disc-mismatch {
+  background: rgba(239, 68, 68, 0.08);
+  border-left: 2px solid var(--discrepancy-mismatch);
+}
+.model-node__column--disc-missing {
+  opacity: 0.45;
+  cursor: default;
+  font-style: italic;
+}
+.model-node__column--disc-missing .model-node__col-name {
+  text-decoration: line-through;
+  color: var(--stage-ghost);
+}
+.model-node__col-disc-badge {
+  flex-shrink: 0;
+  padding: 0 4px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.model-node__col-disc-badge--extra {
+  background: rgba(245, 158, 11, 0.2);
+  color: var(--discrepancy-extra);
+}
+.model-node__col-disc-badge--missing {
+  background: rgba(156, 163, 175, 0.2);
+  color: var(--stage-ghost);
+}
+.model-node__col-type--mismatch {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  font-size: 10px;
+  line-height: 1.3;
+}
+.model-node__col-type-line {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  white-space: nowrap;
+}
+.model-node__col-type-stage {
+  font-size: 9px;
+  opacity: 0.7;
+  text-transform: capitalize;
+}
+.model-node__separator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  margin: 2px 0;
+  border-top: 1px dashed var(--warning-fg);
+  border-bottom: 1px dashed var(--warning-fg);
+  background: rgba(204, 167, 0, 0.08);
+}
+.model-node__separator-label {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--warning-fg);
+}
+.model-node__separator--disc {
+  border-top: 1px dashed var(--stage-ghost);
+  border-bottom: 1px dashed var(--stage-ghost);
+  background: rgba(156, 163, 175, 0.06);
+}
+.model-node__separator-label--missing {
+  color: var(--stage-ghost);
+}
+.model-node__separator--subtle {
+  height: 1px;
+  padding: 0;
+  margin: 2px 0;
+  border-top: 1px solid var(--panel-border);
+  border-bottom: none;
+  background: transparent;
+  opacity: 0.6;
+}
+.model-node__col-indicators {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.model-node__col-name {
+  flex: 1;
+  white-space: nowrap;
+}
+.model-node__col-name--editable:hover,
+.model-node__col-type--editable:hover {
+  text-decoration: underline dotted;
+  cursor: text;
+}
+.model-node__col-type {
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 11px;
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+.model-node__col-edit-input {
+  min-width: 0;
+  background: var(--vscode-input-background, #3c3c3c);
+  color: var(--vscode-input-foreground, #ccc);
+  border: 1px solid var(--vscode-focusBorder, #007fd4);
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 1px 4px;
+  outline: none;
+  line-height: 1.3;
+}
+.model-node__col-edit-input--name {
+  flex: 1;
+}
+.model-node__col-edit-input--type {
+  flex: 0 0 auto;
+  width: 80px;
+  font-size: 11px;
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+.model-node__col-reorder-handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--vscode-descriptionForeground, #888);
+  opacity: 0.3;
+  font-size: 10px;
+  user-select: none;
+  line-height: 1;
+  transition: opacity 0.1s ease;
+  padding: 4px 6px;
+  margin: -4px -2px -4px -6px;
+}
+.model-node__col-reorder-handle:hover {
+  opacity: 0.85;
+}
+.model-node__col-reorder-handle:active {
+  cursor: grabbing;
+  opacity: 1;
+}
+.model-node__column--reorder-dragging {
+  opacity: 0.35;
+}
+.model-node__column--reorder-target {
+  box-shadow: 0 -2px 0 0 var(--vscode-focusBorder, #007fd4);
+}
+.model-node__col-edit-error {
+  position: absolute;
+  bottom: -16px;
+  left: 10px;
+  font-size: 10px;
+  color: var(--vscode-errorForeground, #f48771);
+  white-space: nowrap;
+  z-index: 10;
+  background: var(--vscode-editor-background, #1e1e1e);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+.model-node__col-delete {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, background 0.1s ease;
+}
+.model-node__column:hover .model-node__col-delete {
+  opacity: 1;
+}
+.model-node__col-delete:hover {
+  background: rgba(239, 68, 68, 0.25);
+}
+.model-node__col-badge {
+  flex-shrink: 0;
+  font-size: 9px;
+  line-height: 1;
+  opacity: 0.7;
+}
+.model-node__col-badge--scd {
+  color: #6366f1;
+}
+.model-node__col-badge--additive {
+  color: #e11d48;
+}
+.model-node__empty {
+  padding: 8px 10px;
+  color: var(--vscode-descriptionForeground, #888);
+  font-style: italic;
+  text-align: center;
+}
+.model-node__expand-button {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  margin: 0;
+  background: var(--panel-bg);
+  border: none;
+  border-top: 1px solid var(--panel-border);
+  color: var(--vscode-textLink-foreground, #3b82f6);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.model-node__expand-button:hover {
+  background: var(--selection-bg);
+  color: var(--vscode-textLink-activeForeground, #2563eb);
+}
+.model-node__expand-button:active {
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.model-node__footer {
+  padding: 4px 10px;
+  border-top: 1px solid var(--panel-border);
+  background: var(--panel-bg);
+  text-align: center;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.model-node__footer-disc {
+  color: var(--discrepancy-extra);
+  font-weight: 500;
+}
+.react-flow__node.selected .model-node {
+  box-shadow: 0 0 0 2px var(--vscode-focusBorder, #007fd4), 0 2px 8px rgba(0, 127, 212, 0.3);
+}
+.react-flow__node.dragging .model-node {
+  opacity: 0.85;
+  box-shadow: 0 0 0 2px var(--vscode-focusBorder, #007fd4), 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+/* src/components/Graph/FkEdge.css */
+.fk-edge {
+  stroke-width: 2;
+  fill: none;
+}
+.fk-edge--logical {
+  stroke: var(--stage-logical);
+}
+.fk-edge--physical {
+  stroke: var(--stage-physical);
+}
+.fk-edge--ghost {
+  stroke: var(--stage-ghost);
+  stroke-dasharray: 5 3;
+}
+.fk-edge--discrepancy-extra {
+  stroke: var(--discrepancy-extra);
+  stroke-dasharray: 5 3;
+}
+.fk-edge--discrepancy-missing {
+  stroke: var(--stage-ghost);
+  stroke-dasharray: 5 3;
+}
+.fk-edge--discrepancy-cardinality-mismatch {
+  stroke: var(--discrepancy-mismatch);
+}
+.fk-edge--dimmed {
+  opacity: 0.25;
+  filter: grayscale(0.4);
+  transition: opacity 0.15s ease, filter 0.15s ease;
+}
+.fk-edge--dimmed:hover {
+  opacity: 0.4;
+}
+.fk-edge__label {
+  position: absolute;
+  pointer-events: none;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
+.fk-edge__label--many {
+  font-size: 22px;
+}
+.fk-edge__label--logical {
+  color: var(--stage-logical);
+}
+.fk-edge__label--physical {
+  color: var(--stage-physical);
+}
+.fk-edge__label--ghost {
+  color: var(--stage-ghost);
+}
+.fk-edge__label--discrepancy-extra {
+  color: var(--discrepancy-extra);
+}
+.fk-edge__label--discrepancy-missing {
+  color: var(--stage-ghost);
+}
+.fk-edge__label--discrepancy-cardinality-mismatch {
+  color: var(--discrepancy-mismatch);
+}
+.fk-edge__mismatch-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--discrepancy-mismatch);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  pointer-events: none;
+  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.4);
+}
+.fk-edge__label--dimmed {
+  opacity: 0.25;
+  filter: grayscale(0.4);
+  transition: opacity 0.15s ease, filter 0.15s ease;
+}
+.fk-edge:hover {
+  stroke-width: 3;
+}
+.fk-edge__swap-zone {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: all;
+}
+.fk-edge__swap-zone--dimmed {
+  display: none;
+}
+.fk-edge__swap-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  background: var(--panel-bg);
+  color: var(--editor-fg);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  pointer-events: all;
+  opacity: 0.85;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  transition:
+    opacity 0.1s ease,
+    border-color 0.1s ease,
+    background 0.1s ease;
+}
+.fk-edge__swap-btn:hover {
+  opacity: 1;
+  border-color: var(--focus-border);
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+
+/* src/components/Graph/AnnotationNode.css */
+.annotation-node {
+  min-width: 160px;
+  min-height: 80px;
+  padding: 10px 12px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  font-size: 12px;
+  line-height: 1.4;
+  cursor: grab;
+  border-left: 4px solid transparent;
+  position: relative;
+}
+.annotation-node--yellow {
+  background: #fef3c7;
+  border-left-color: #f59e0b;
+  color: #78350f;
+}
+.annotation-node--blue {
+  background: #dbeafe;
+  border-left-color: #3b82f6;
+  color: #1e3a5f;
+}
+.annotation-node--green {
+  background: #dcfce7;
+  border-left-color: #22c55e;
+  color: #14532d;
+}
+.annotation-node--pink {
+  background: #fce7f3;
+  border-left-color: #ec4899;
+  color: #831843;
+}
+.annotation-node--orange {
+  background: #fed7aa;
+  border-left-color: #f97316;
+  color: #7c2d12;
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node--yellow,
+body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node--yellow {
+  background: #422006;
+  color: #fcd34d;
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node--blue,
+body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node--blue {
+  background: #172554;
+  color: #93c5fd;
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node--green,
+body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node--green {
+  background: #052e16;
+  color: #86efac;
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node--pink,
+body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node--pink {
+  background: #500724;
+  color: #f9a8d4;
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node--orange,
+body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node--orange {
+  background: #431407;
+  color: #fdba74;
+}
+.annotation-node--selected {
+  outline: 2px solid var(--focus-border, #007fd4);
+  outline-offset: 1px;
+}
+.react-flow__node-annotation.selected .annotation-node {
+  box-shadow: none;
+}
+.annotation-node--readonly {
+  opacity: 0.85;
+  cursor: default;
+}
+.annotation-node__text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: none;
+}
+.annotation-node__placeholder {
+  opacity: 0.5;
+  font-style: italic;
+}
+.annotation-node__textarea {
+  width: 100%;
+  min-height: 60px;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+}
+.annotation-node__toolbar {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.annotation-node__link-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.1s ease;
+  user-select: none;
+}
+.annotation-node:hover .annotation-node__link-handle {
+  opacity: 0.5;
+}
+.annotation-node__link-handle:hover {
+  opacity: 1 !important;
+  background: rgba(0, 0, 0, 0.1);
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node__link-handle:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.annotation-node__toolbar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.1s ease;
+  letter-spacing: 1px;
+}
+.annotation-node:hover .annotation-node__toolbar-toggle {
+  opacity: 0.6;
+}
+.annotation-node__toolbar-toggle:hover {
+  opacity: 1 !important;
+  background: rgba(0, 0, 0, 0.1);
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node__toolbar-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.annotation-node__toolbar-panel {
+  position: absolute;
+  top: 24px;
+  right: 0;
+  width: 150px;
+  background: var(--panel-bg, #252526);
+  border: 1px solid var(--panel-border, #404040);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.annotation-node__color-row {
+  display: flex;
+  gap: 4px;
+  padding: 2px 0;
+}
+.annotation-node__color-swatch {
+  width: 18px;
+  height: 18px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 0.15s ease, transform 0.1s ease;
+}
+.annotation-node__color-swatch:hover {
+  transform: scale(1.15);
+}
+.annotation-node__color-swatch--active {
+  border-color: var(--editor-fg, #d4d4d4);
+}
+.annotation-node__link-row {
+  padding: 2px 0;
+}
+.annotation-node__link-select {
+  width: 100%;
+  max-width: 100%;
+  padding: 3px 6px;
+  border: 1px solid var(--panel-border, #404040);
+  border-radius: 4px;
+  background: var(--input-bg, #3c3c3c);
+  color: var(--input-fg, #cccccc);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.annotation-node__delete-btn {
+  width: 100%;
+  padding: 4px 6px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--error-fg, #f48771);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s ease;
+}
+.annotation-node__delete-btn:hover {
+  background: rgba(239, 68, 68, 0.15);
+}
+.annotation-node__resize-handle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 2;
+}
+.annotation-node__resize-handle::after {
+  content: "";
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  opacity: 0.4;
+}
+.annotation-node:hover .annotation-node__resize-handle {
+  opacity: 1;
+}
+.annotation-node__link-badge {
+  margin-top: 6px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  opacity: 0.7;
+  background: rgba(0, 0, 0, 0.08);
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+body[data-vscode-theme-kind=vscode-dark] .annotation-node__link-badge,
+body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* src/components/common/KeyBadgeGroup.css */
+.key-badge-group {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.key-badge-group__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 4px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--editor-fg);
+  font-size: 12px;
+  cursor: default;
+  min-width: 24px;
+  min-height: 18px;
+}
+.key-badge-group--editable .key-badge-group__trigger {
+  cursor: pointer;
+  border-color: var(--panel-border, #404040);
+}
+.key-badge-group--editable .key-badge-group__trigger:hover {
+  background: var(--input-bg, rgba(255, 255, 255, 0.05));
+  border-color: var(--vscode-focusBorder, #007fd4);
+}
+.key-badge-group--open .key-badge-group__trigger {
+  border-color: var(--vscode-focusBorder, #007fd4);
+  background: var(--input-bg, rgba(255, 255, 255, 0.05));
+}
+.key-badge-group__trigger:disabled {
+  cursor: default;
+  opacity: 1;
+}
+.key-badge-group__selected {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.key-badge-group__empty {
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 10px;
+  padding: 0 2px;
+}
+.key-badge-group__arrow {
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 8px;
+  margin-left: 2px;
+  line-height: 1;
+}
+.key-badge-group__warning {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  margin-left: 2px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 50%;
+  background: rgba(249, 115, 22, 0.2);
+  color: #f97316;
+  cursor: help;
+}
+.key-badge-group__dropdown {
+  position: fixed;
+  z-index: 1000;
+  min-width: 180px;
+  padding: 4px 0;
+  background: var(--panel-bg, #252526);
+  border: 1px solid var(--panel-border, #404040);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+.key-badge-group__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.key-badge-group__option:hover {
+  background: var(--input-bg, rgba(255, 255, 255, 0.05));
+}
+.key-badge-group__option:focus {
+  outline: none;
+  background: var(--input-bg, rgba(255, 255, 255, 0.08));
+}
+.key-badge-group__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--vscode-descriptionForeground, #888);
+  border-radius: 2px;
+  font-size: 10px;
+  color: transparent;
+  flex-shrink: 0;
+}
+.key-badge-group__option--active .key-badge-group__checkbox {
+  background: var(--vscode-focusBorder, #007fd4);
+  border-color: var(--vscode-focusBorder, #007fd4);
+  color: #fff;
+}
+.key-badge-group__label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.key-badge-group__label-text {
+  font-size: 12px;
+  color: var(--editor-fg);
+  font-weight: 500;
+}
+.key-badge-group__label-desc {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground, #888);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* src/components/common/ColumnRowEditor.css */
+.column-row-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+  border-radius: 3px;
+  line-height: 1.4;
+  position: relative;
+}
+.column-row-editor__main {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 3px;
+}
+.column-row-editor--built .column-row-editor__main {
+  background: var(--model-built-bg);
+}
+.column-row-editor--built:hover .column-row-editor__main {
+  background: rgba(34, 197, 94, 0.15);
+}
+.column-row-editor--planned .column-row-editor__main {
+  background: var(--model-design-bg);
+}
+.column-row-editor--planned:hover .column-row-editor__main {
+  background: rgba(249, 115, 22, 0.15);
+}
+.column-row-editor--built.column-row-editor--expanded:hover .column-row-editor__main,
+.column-row-editor--planned.column-row-editor--expanded:hover .column-row-editor__main {
+  background: rgba(255, 255, 255, 0.06);
+}
+.column-row-editor--approved .column-row-editor__main {
+  background: var(--model-approved-bg);
+}
+.column-row-editor--approved:hover .column-row-editor__main {
+  background: rgba(20, 184, 166, 0.15);
+}
+.column-row-editor--editable {
+  cursor: pointer;
+}
+.column-row-editor--editing .column-row-editor__main {
+  background: var(--input-bg);
+  border: 1px solid var(--focus-border);
+  padding: 3px 5px;
+}
+.column-row-editor--expanded {
+  background: var(--vscode-editor-inactiveSelectionBackground, rgba(255, 255, 255, 0.04));
+  border-radius: 4px;
+}
+.column-row-editor--expanded .column-row-editor__main {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.column-row-editor__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--editor-fg);
+  font-size: 12px;
+  min-width: 0;
+}
+.column-row-editor--editable .column-row-editor__name:hover {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+.column-row-editor__placeholder {
+  color: var(--vscode-descriptionForeground, #888);
+  font-style: italic;
+}
+.column-row-editor__type {
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 11px;
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+.column-row-editor--editable .column-row-editor__type:hover {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+.column-row-editor__type-select {
+  flex-shrink: 0;
+  width: 90px;
+}
+.column-row-editor__input {
+  flex: 1;
+  padding: 2px 4px;
+  border: 1px solid var(--input-border, var(--panel-border));
+  border-radius: 2px;
+  background: var(--input-bg);
+  color: var(--input-fg, var(--editor-fg));
+  font-size: 12px;
+  min-width: 0;
+}
+.column-row-editor__input:focus {
+  outline: none;
+  border-color: var(--focus-border);
+}
+.column-row-editor__input--error {
+  border-color: var(--error-fg, #f48771);
+}
+.column-row-editor__input::placeholder {
+  color: var(--vscode-descriptionForeground, #888);
+  opacity: 0.7;
+}
+.column-row-editor__delete {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, background 0.1s ease;
+}
+.column-row-editor:hover .column-row-editor__delete {
+  opacity: 1;
+}
+.column-row-editor__delete:hover {
+  background: rgba(239, 68, 68, 0.25);
+}
+.column-row-editor__delete-confirm {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  animation: delete-confirm-fade-in 0.15s ease;
+}
+@keyframes delete-confirm-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.column-row-editor__delete-confirm-yes {
+  padding: 1px 6px;
+  border: 1px solid rgba(239, 68, 68, 0.5);
+  border-radius: 3px;
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--vscode-errorForeground, #f48771);
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s ease;
+}
+.column-row-editor__delete-confirm-yes:hover {
+  background: rgba(239, 68, 68, 0.3);
+}
+.column-row-editor__delete-confirm-no {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 10px;
+  cursor: pointer;
+  transition: color 0.1s ease, background 0.1s ease;
+}
+.column-row-editor__delete-confirm-no:hover {
+  color: var(--editor-fg);
+  background: rgba(255, 255, 255, 0.08);
+}
+.column-row-editor__error {
+  position: absolute;
+  left: 42px;
+  top: 100%;
+  padding: 2px 6px;
+  background: var(--panel-bg);
+  border: 1px solid var(--error-fg, #f48771);
+  border-radius: 3px;
+  font-size: 10px;
+  color: var(--error-fg, #f48771);
+  white-space: nowrap;
+  z-index: 10;
+  margin-top: 2px;
+}
+.column-row-editor__approve {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--model-approved, #14b8a6);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--model-approved, #14b8a6);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.1s ease, background 0.1s ease;
+}
+.column-row-editor:hover .column-row-editor__approve {
+  opacity: 1;
+}
+.column-row-editor__approve:hover {
+  background: var(--model-approved-bg, rgba(20, 184, 166, 0.15));
+}
+.column-row-editor__approve--approved {
+  background: var(--model-approved, #14b8a6);
+  color: var(--model-approved-text, #fff);
+  opacity: 1;
+}
+.column-row-editor__approve--approved:hover {
+  background: var(--model-design, #f97316);
+  border-color: var(--model-design, #f97316);
+  color: var(--model-design-text, #fff);
+}
+.column-row-editor__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.1s ease, background 0.1s ease;
+}
+.column-row-editor__chevron:hover {
+  color: var(--editor-fg);
+  background: rgba(255, 255, 255, 0.08);
+}
+.column-row-editor--expanded .column-row-editor__chevron {
+  color: var(--editor-fg);
+}
+.column-row-editor__info-badge {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground, #888);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.1s ease, color 0.1s ease;
+}
+.column-row-editor__info-badge:hover {
+  opacity: 1;
+  color: var(--button-bg, #3b82f6);
+}
+.column-row-editor__description-area {
+  padding: 6px 8px 8px 28px;
+  border-top: 1px solid var(--panel-border);
+}
+.column-row-editor__description-text {
+  font-size: 11px;
+  color: var(--editor-fg);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.column-row-editor--editable .column-row-editor__description-text {
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 3px;
+  margin: -4px -6px;
+}
+.column-row-editor--editable .column-row-editor__description-text:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.column-row-editor__description-text--empty {
+  color: var(--vscode-descriptionForeground, #888);
+  font-style: italic;
+}
+.column-row-editor__description-input {
+  width: 100%;
+  min-height: 48px;
+  padding: 6px 8px;
+  border: 1px solid var(--input-border, var(--panel-border));
+  border-radius: 3px;
+  background: var(--input-bg);
+  color: var(--input-fg, var(--editor-fg));
+  font-size: 11px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: vertical;
+}
+.column-row-editor__description-input:focus {
+  outline: none;
+  border-color: var(--focus-border);
+}
+.column-row-editor__description-input::placeholder {
+  color: var(--vscode-descriptionForeground, #888);
+  opacity: 0.7;
+}
+.column-row-editor__metadata-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 8px 3px 28px;
+}
+.column-row-editor__metadata-label {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground, #888);
+  min-width: 60px;
+}
+.column-row-editor__metadata-select {
+  flex: 1;
+  padding: 2px 4px;
+  border: 1px solid var(--vscode-input-border, var(--vscode-editorGroup-border, #444));
+  background: var(--vscode-input-background, #3c3c3c);
+  color: var(--vscode-input-foreground, #ccc);
+  font-size: 11px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.column-row-editor__metadata-select:focus {
+  outline: 1px solid var(--vscode-focusBorder, #007fd4);
+  outline-offset: -1px;
+}
+.column-row-editor__metadata-select:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.column-row-editor__discrepancy {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 4px 28px;
+  background: rgba(204, 167, 0, 0.08);
+  border-top: 1px solid rgba(204, 167, 0, 0.2);
+  font-size: 11px;
+  line-height: 1.4;
+}
+.column-row-editor__discrepancy--rejected {
+  background: rgba(239, 68, 68, 0.06);
+  border-top-color: rgba(239, 68, 68, 0.2);
+}
+.column-row-editor__discrepancy-icon {
+  flex-shrink: 0;
+  color: var(--vscode-editorWarning-foreground, #cca700);
+  font-size: 12px;
+}
+.column-row-editor__discrepancy--rejected .column-row-editor__discrepancy-icon {
+  color: var(--vscode-errorForeground, #f48771);
+}
+.column-row-editor__discrepancy-detail {
+  flex: 1;
+  min-width: 0;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.column-row-editor__discrepancy-label {
+  color: var(--vscode-editorWarning-foreground, #cca700);
+  font-weight: 600;
+}
+.column-row-editor__discrepancy--rejected .column-row-editor__discrepancy-label {
+  color: var(--vscode-errorForeground, #f48771);
+}
+.column-row-editor__discrepancy-expected {
+  color: var(--vscode-editorWarning-foreground, #cca700);
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+}
+.column-row-editor__discrepancy-actual {
+  color: var(--vscode-descriptionForeground, #888);
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+}
+.column-row-editor__discrepancy-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 4px;
+}
+.column-row-editor__discrepancy-btn {
+  padding: 1px 6px;
+  border: 1px solid var(--panel-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--editor-fg);
+  font-size: 10px;
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.column-row-editor__discrepancy-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.column-row-editor__discrepancy-btn--accept {
+  border-color: var(--model-approved, #14b8a6);
+  color: var(--model-approved, #14b8a6);
+}
+.column-row-editor__discrepancy-btn--accept:hover {
+  background: var(--model-approved-bg, rgba(20, 184, 166, 0.15));
+}
+.column-row-editor__discrepancy-btn--reject {
+  border-color: var(--vscode-errorForeground, #f48771);
+  color: var(--vscode-errorForeground, #f48771);
+}
+.column-row-editor__discrepancy-btn--reject:hover {
+  background: rgba(239, 68, 68, 0.15);
+}
+.column-row-editor__drag-handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--vscode-descriptionForeground, #888);
+  opacity: 0.35;
+  padding: 0 2px;
+  font-size: 12px;
+  user-select: none;
+  line-height: 1;
+  transition: opacity 0.1s ease;
+}
+.column-row-editor__drag-handle:hover {
+  opacity: 0.85;
+}
+.column-row-editor__drag-handle:active {
+  cursor: grabbing;
+  opacity: 1;
+}
+.column-row-editor__drag-handle--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+.column-row-editor--dragging {
+  opacity: 0.4;
+}
+.column-row-editor--selected .column-row-editor__main {
+  background: var(--vscode-list-activeSelectionBackground, rgba(4, 57, 94, 0.7));
+}
+.column-row-editor--selected .column-row-editor__name,
+.column-row-editor--selected .column-row-editor__type {
+  color: var(--vscode-list-activeSelectionForeground, #fff);
+}
+.column-row-editor--selected .column-row-editor__drag-handle {
+  color: var(--vscode-list-activeSelectionForeground, #fff);
+}
+.column-row-editor--drag-over {
+  box-shadow: 0 -2px 0 0 var(--vscode-focusBorder, #007fd4);
+}
+
+/* src/components/DetailPanel/BulkColumnActions.css */
+.bulk-column-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--vscode-panel-border, #404040);
+  border-radius: 4px;
+  background: var(--vscode-editor-selectionBackground, rgba(4, 57, 94, 0.3));
+  font-size: 11px;
+}
+.bulk-column-actions__count {
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 10px;
+  white-space: nowrap;
+  margin-right: 2px;
+}
+.bulk-column-actions__divider {
+  width: 1px;
+  height: 16px;
+  background: var(--vscode-panel-border, #404040);
+  flex-shrink: 0;
+}
+.bulk-column-actions__btn {
+  padding: 2px 6px;
+  border: 1px solid var(--vscode-panel-border, #404040);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-editor-foreground, #d4d4d4);
+  font-size: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s ease;
+}
+.bulk-column-actions__btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.bulk-column-actions__btn--danger {
+  color: var(--vscode-errorForeground, #f48771);
+  border-color: var(--vscode-errorForeground, #f48771);
+}
+.bulk-column-actions__btn--danger:hover {
+  background: rgba(244, 135, 113, 0.12);
+}
+.bulk-column-actions__btn--clear {
+  padding: 2px 4px;
+  border: none;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 12px;
+  margin-left: auto;
+}
+.bulk-column-actions__btn--clear:hover {
+  color: var(--vscode-editor-foreground, #d4d4d4);
+}
+.bulk-column-actions__key-btn {
+  padding: 1px 5px;
+  border: 1px solid var(--vscode-panel-border, #404040);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 9px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.1s ease,
+    color 0.1s ease,
+    border-color 0.1s ease;
+}
+.bulk-column-actions__key-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--vscode-editor-foreground, #d4d4d4);
+}
+.bulk-column-actions__key-btn--active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: var(--vscode-focusBorder, #007fd4);
+  color: var(--vscode-focusBorder, #007fd4);
+}
+.bulk-column-actions__key-btn--active:hover {
+  background: rgba(59, 130, 246, 0.25);
+}
+.bulk-column-actions__type-select {
+  font-size: 10px;
+}
+
+/* src/components/DetailPanel/ColumnEditor.css */
+.column-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.column-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.column-editor__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.column-editor__expand-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.column-editor__expand-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.1s ease, background 0.1s ease;
+}
+.column-editor__expand-btn:hover {
+  color: var(--editor-fg);
+  background: rgba(255, 255, 255, 0.08);
+}
+.column-editor__expand-btn::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  padding: 3px 6px;
+  background: var(--vscode-editorWidget-background, #252526);
+  border: 1px solid var(--panel-border);
+  border-radius: 3px;
+  font-size: 10px;
+  white-space: nowrap;
+  color: var(--editor-fg);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.1s ease, visibility 0.1s ease;
+  pointer-events: none;
+  z-index: 100;
+}
+.column-editor__expand-btn:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+.column-editor__title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.column-editor__add-btn {
+  padding: 3px 8px;
+  border: 1px dashed var(--panel-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--button-bg);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.1s ease, border-color 0.1s ease;
+}
+.column-editor__add-btn:hover:not(:disabled) {
+  background: rgba(59, 130, 246, 0.08);
+  border-color: var(--button-bg);
+}
+.column-editor__add-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.column-editor__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.column-editor__empty {
+  padding: 8px 6px;
+  color: var(--vscode-descriptionForeground, #888);
+  font-style: italic;
+  text-align: center;
+  font-size: 11px;
+}
+.column-editor__separator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+}
+.column-editor__separator::before,
+.column-editor__separator::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--panel-border);
+}
+.column-editor__separator-text {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: var(--model-design);
+  text-transform: uppercase;
+}
+.column-editor__separator--approved .column-editor__separator-text {
+  color: var(--model-approved);
+}
+.column-editor__add-btn--bottom {
+  width: 100%;
+  margin-top: 6px;
+  justify-content: center;
+}
+.column-editor__accept-all-btn {
+  padding: 3px 8px;
+  border: 1px solid var(--vscode-editorWarning-foreground, #cca700);
+  border-radius: 3px;
+  background: rgba(204, 167, 0, 0.1);
+  color: var(--vscode-editorWarning-foreground, #cca700);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.column-editor__accept-all-btn:hover {
+  background: rgba(204, 167, 0, 0.2);
+}
+
+/* src/components/DetailPanel/DetailPanel.css */
+.detail-panel {
+  width: 340px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 12px;
+}
+.detail-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--panel-border);
+  background: var(--panel-bg);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.detail-panel__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.detail-panel__title--editable {
+  cursor: pointer;
+}
+.detail-panel__title--editable:hover {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+}
+.detail-panel__title-input {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 2px 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  background: var(--input-bg, var(--vscode-input-background, #3c3c3c));
+  border: 1px solid var(--focus-border, var(--vscode-focusBorder, #007fd4));
+  border-radius: 3px;
+  outline: none;
+  font-family: inherit;
+}
+.detail-panel__title-edit {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.detail-panel__title-input--error {
+  border-color: var(--vscode-errorForeground, #f48771);
+}
+.detail-panel__title-error {
+  font-size: 10px;
+  color: var(--vscode-errorForeground, #f48771);
+  line-height: 1.2;
+}
+.detail-panel__title-edit-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    background 0.1s ease,
+    color 0.1s ease;
+}
+.detail-panel__header:hover .detail-panel__title-edit-btn {
+  opacity: 1;
+}
+.detail-panel__title-edit-btn:hover {
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.detail-panel__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--editor-fg);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.detail-panel__close:hover {
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.detail-panel__section {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--panel-border);
+}
+.detail-panel__section:last-child {
+  border-bottom: none;
+}
+.detail-panel__section-title {
+  margin: 0 0 8px 0;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.detail-panel__metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.detail-panel__metadata-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.detail-panel__label {
+  font-weight: 500;
+  color: var(--vscode-descriptionForeground, #888);
+  min-width: 50px;
+}
+.detail-panel__value {
+  color: var(--editor-fg);
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+}
+.detail-panel__label--wide {
+  min-width: 84px;
+}
+.detail-panel__value--provenance {
+  font-family: inherit;
+  color: var(--dim-fg);
+}
+.detail-panel__status-badge {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.detail-panel__status-badge--built {
+  background: var(--model-built-bg);
+  color: var(--model-built);
+}
+.detail-panel__status-badge--design {
+  background: var(--model-design-bg);
+  color: var(--model-design);
+}
+.detail-panel__status-badge--missing {
+  background: var(--model-missing-bg);
+  color: var(--model-missing);
+}
+.detail-panel__status-badge--approved {
+  background: var(--model-approved-bg);
+  color: var(--model-approved);
+}
+.detail-panel__approve-btn {
+  margin-left: auto;
+  padding: 2px 8px;
+  border: 1px solid var(--model-approved);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--model-approved);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.detail-panel__approve-btn:hover {
+  background: var(--model-approved);
+  color: var(--model-approved-text, #fff);
+}
+.detail-panel__approve-btn--unapprove {
+  border-color: var(--model-design);
+  color: var(--model-design);
+}
+.detail-panel__approve-btn--unapprove:hover {
+  background: var(--model-design);
+  color: var(--model-design-text, #fff);
+}
+.detail-panel__description {
+  margin: 8px 0 0 0;
+  color: var(--editor-fg);
+  line-height: 1.5;
+  font-size: 11px;
+}
+.detail-panel__columns {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.detail-panel__column {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 3px;
+  line-height: 1.4;
+}
+.detail-panel__column--built {
+  background: rgba(34, 197, 94, 0.08);
+}
+.detail-panel__column--built:hover {
+  background: rgba(34, 197, 94, 0.15);
+}
+.detail-panel__column--planned,
+.detail-panel__column--missing {
+  background: rgba(249, 115, 22, 0.1);
+}
+.detail-panel__column--planned:hover,
+.detail-panel__column--missing:hover {
+  background: rgba(249, 115, 22, 0.18);
+}
+.detail-panel__col-indicators {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+  min-width: 36px;
+}
+.detail-panel__pk,
+.detail-panel__fk {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 2px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1.5;
+  letter-spacing: 0.3px;
+}
+.detail-panel__pk {
+  background: rgba(234, 179, 8, 0.2);
+  color: #ca8a04;
+}
+.detail-panel__fk {
+  background: rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+}
+.detail-panel__col-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--editor-fg);
+}
+.detail-panel__col-type {
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 11px;
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+.detail-panel__empty {
+  padding: 8px 6px;
+  color: var(--vscode-descriptionForeground, #888);
+  font-style: italic;
+  text-align: center;
+}
+.detail-panel__relationships {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.detail-panel__relationship {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 6px;
+  border-radius: 3px;
+  line-height: 1.4;
+  font-size: 11px;
+}
+.detail-panel__relationship--built {
+  background: rgba(59, 130, 246, 0.08);
+}
+.detail-panel__relationship--approved {
+  background: rgba(20, 184, 166, 0.1);
+}
+.detail-panel__relationship--design {
+  background: rgba(249, 115, 22, 0.1);
+}
+.detail-panel__relationship--clickable {
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.detail-panel__relationship--clickable:hover {
+  background: rgba(128, 128, 128, 0.2);
+}
+.detail-panel__relationship--clickable:focus {
+  outline: 1px solid var(--focus-border);
+  outline-offset: -1px;
+}
+.detail-panel__rel-direction {
+  flex-shrink: 0;
+  font-weight: 700;
+  font-size: 12px;
+  width: 16px;
+  text-align: center;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.detail-panel__rel-columns {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  min-width: 0;
+}
+.detail-panel__rel-local {
+  font-weight: 600;
+  color: var(--editor-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.detail-panel__rel-arrow {
+  color: var(--vscode-descriptionForeground, #888);
+  flex-shrink: 0;
+}
+.detail-panel__rel-target {
+  color: var(--editor-fg);
+  font-family: var(--vscode-editor-font-family, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.detail-panel__rel-cardinality {
+  flex-shrink: 0;
+  padding: 1px 4px;
+  border-radius: 2px;
+  font-size: 9px;
+  font-weight: 500;
+  background: rgba(128, 128, 128, 0.15);
+  color: var(--vscode-descriptionForeground, #888);
+  white-space: nowrap;
+}
+.detail-panel__rel-delete {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.detail-panel__rel-delete:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+.detail-panel__rel-approve {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--model-approved, #14b8a6);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--model-approved, #14b8a6);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.1s ease, background 0.1s ease;
+}
+.detail-panel__relationship:hover .detail-panel__rel-approve {
+  opacity: 1;
+}
+.detail-panel__rel-approve:hover {
+  background: var(--model-approved-bg, rgba(20, 184, 166, 0.15));
+}
+.detail-panel__rel-approve--approved {
+  background: var(--model-approved, #14b8a6);
+  color: var(--model-approved-text, #fff);
+  opacity: 1;
+}
+.detail-panel__rel-approve--approved:hover {
+  background: var(--model-design, #f97316);
+  border-color: var(--model-design, #f97316);
+  color: var(--model-design-text, #fff);
+}
+.detail-panel__stub-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--editor-fg);
+  cursor: pointer;
+  user-select: none;
+}
+.detail-panel__stub-label input[type=checkbox] {
+  accent-color: var(--button-bg);
+  width: 13px;
+  height: 13px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.detail-panel__section--actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.detail-panel__button {
+  padding: 6px 12px;
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  background: var(--button-bg);
+  color: var(--button-fg);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.1s ease, border-color 0.1s ease;
+}
+.detail-panel__button:hover {
+  background: var(--button-hover-bg);
+  border-color: var(--focus-border);
+}
+.detail-panel__button--danger {
+  align-self: flex-start;
+  background: transparent;
+  color: #dc6b6b;
+  border-color: rgba(220, 107, 107, 0.25);
+  font-size: 11px;
+  padding: 4px 10px;
+}
+.detail-panel__button--danger:hover {
+  background: rgba(220, 107, 107, 0.1);
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.4);
+}
+.detail-panel__button--warning {
+  align-self: flex-start;
+  background: rgba(204, 167, 0, 0.1);
+  color: var(--vscode-editorWarning-foreground, #cca700);
+  border-color: var(--vscode-editorWarning-foreground, #cca700);
+  font-size: 11px;
+  padding: 4px 10px;
+}
+.detail-panel__button--warning:hover {
+  background: rgba(204, 167, 0, 0.2);
+}
+.detail-panel__confirm-label {
+  font-size: 11px;
+  color: var(--editor-fg);
+  line-height: 1.4;
+}
+.detail-panel__confirm-actions {
+  display: flex;
+  gap: 6px;
+}
+.detail-panel__confirm-actions .detail-panel__button {
+  flex: 1;
+  font-size: 12px;
+  padding: 6px 12px;
+}
+.detail-panel__confirm-actions .detail-panel__button--danger {
+  align-self: auto;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.detail-panel__confirm-actions .detail-panel__button--danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: #ef4444;
+}
+.detail-panel__rationale-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.detail-panel__rationale-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-family: inherit;
+}
+.detail-panel__rationale-toggle:hover {
+  color: var(--editor-fg);
+}
+.detail-panel__rationale-chevron {
+  display: inline-block;
+  font-size: 10px;
+  transition: transform 0.15s ease;
+}
+.detail-panel__rationale-chevron--open {
+  transform: rotate(90deg);
+}
+.detail-panel__rationale-count {
+  font-weight: 400;
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground, #888);
+  opacity: 0.7;
+}
+.detail-panel__rationale-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.detail-panel__rationale-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+.detail-panel__rationale-edit-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    background 0.1s ease,
+    color 0.1s ease;
+}
+.detail-panel__rationale-section:hover .detail-panel__rationale-edit-btn {
+  opacity: 1;
+}
+.detail-panel__rationale-edit-btn:hover {
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.detail-panel__rationale-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.detail-panel__rationale-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #8b5cf6;
+}
+.detail-panel__rationale-text {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--editor-fg);
+  white-space: pre-wrap;
+}
+.detail-panel__rationale-textarea {
+  width: 100%;
+  min-height: 40px;
+  padding: 4px 6px;
+  border: 1px solid var(--focus-border, var(--vscode-focusBorder, #007fd4));
+  border-radius: 3px;
+  background: var(--input-bg, var(--vscode-input-background, #3c3c3c));
+  color: var(--editor-fg);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+.detail-panel__rationale-textarea::placeholder {
+  color: var(--vscode-descriptionForeground, #888);
+  opacity: 0.6;
+}
+.detail-panel__rationale-actions {
+  display: flex;
+  gap: 6px;
+}
+.detail-panel__rationale-actions .detail-panel__button {
+  flex: 1;
+  padding: 4px 10px;
+  font-size: 11px;
+}
+.detail-panel__rationale-add-btn {
+  padding: 6px 12px;
+  border: 1px dashed var(--vscode-descriptionForeground, #888);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 11px;
+  cursor: pointer;
+  transition:
+    background 0.1s ease,
+    color 0.1s ease,
+    border-color 0.1s ease;
+}
+.detail-panel__rationale-add-btn:hover {
+  background: rgba(139, 92, 246, 0.08);
+  color: #8b5cf6;
+  border-color: #8b5cf6;
+}
+.detail-panel__role-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.detail-panel__role-select {
+  padding: 4px 6px;
+  border: 1px solid var(--input-border, var(--panel-border));
+  background: var(--input-bg);
+  color: var(--input-fg);
+  font-size: 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  width: 100%;
+}
+.detail-panel__role-select:focus {
+  outline: 1px solid var(--focus-border);
+  outline-offset: -1px;
+}
+.detail-panel__grain-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.detail-panel__grain-section:hover .detail-panel__rationale-edit-btn {
+  opacity: 1;
+}
+
+/* src/components/Legend/Legend.css */
+.legend-toggle {
+  z-index: 10;
+}
+.legend-toggle__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  background: var(--panel-bg);
+  color: var(--editor-fg);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.1s ease, border-color 0.1s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.legend-toggle__button:hover {
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.legend {
+  max-width: 260px;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  z-index: 10;
+}
+.legend__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--panel-border);
+}
+.legend__title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.legend__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--editor-fg);
+  font-size: 16px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.1s ease, background 0.1s ease;
+}
+.legend__close:hover {
+  opacity: 1;
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.legend__content {
+  padding: 8px 0;
+  max-height: min(60vh, 520px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.legend__section {
+  padding: 8px 12px;
+}
+.legend__section:not(:last-child) {
+  border-bottom: 1px solid var(--panel-border);
+}
+.legend__section-title {
+  margin: 0 0 8px 0;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.7;
+}
+.legend__items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.legend__items--cardinality {
+  gap: 6px;
+}
+.legend__items--badges {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+}
+.legend__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.legend__item-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.legend__item-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--editor-fg);
+}
+.legend__item-desc {
+  min-width: 0;
+  font-size: 10px;
+  color: var(--editor-fg);
+  opacity: 0.6;
+}
+.legend__model-card {
+  width: 36px;
+  height: 24px;
+  border-radius: 3px;
+  border-width: 2px;
+  border-style: solid;
+  background: var(--panel-bg);
+  position: relative;
+  overflow: hidden;
+}
+.legend__model-card--logical {
+  border-color: var(--stage-logical);
+}
+.legend__model-card--physical {
+  border-color: var(--stage-physical);
+}
+.legend__model-card--ghost {
+  border-color: var(--stage-ghost);
+  border-style: dashed;
+  opacity: 0.65;
+}
+.legend__model-card--ghost-disabled {
+  border-style: dotted;
+}
+.legend__model-header {
+  height: 8px;
+}
+.legend__model-header--logical {
+  background: var(--stage-logical);
+}
+.legend__model-header--physical {
+  background: var(--stage-physical);
+}
+.legend__model-header--ghost {
+  background: var(--stage-ghost);
+}
+.legend__edge-sample {
+  width: 48px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.legend__edge {
+  stroke-width: 2;
+}
+.legend__edge--logical {
+  stroke: var(--stage-logical);
+}
+.legend__edge--physical {
+  stroke: var(--stage-physical);
+}
+.legend__edge--disc-extra {
+  stroke: var(--discrepancy-extra);
+  stroke-dasharray: 5 3;
+}
+.legend__edge--disc-missing {
+  stroke: var(--stage-ghost);
+  stroke-dasharray: 5 3;
+}
+.legend__edge--disc-mismatch {
+  stroke: var(--discrepancy-mismatch);
+}
+.legend__edge--annotation {
+  stroke: var(--vscode-descriptionForeground, #999);
+  stroke-dasharray: 6 4;
+  stroke-opacity: 0.5;
+}
+.legend__annotation-card {
+  width: 36px;
+  height: 24px;
+  border-radius: 3px;
+  border-left: 3px solid #f59e0b;
+  background: #fef3c7;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+body[data-vscode-theme-kind=vscode-dark] .legend__annotation-card,
+body[data-vscode-theme-kind=vscode-high-contrast] .legend__annotation-card {
+  background: #422006;
+}
+.legend__cardinality {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 56px;
+}
+.legend__cardinality-line {
+  width: 28px;
+  height: 8px;
+}
+.legend__cardinality-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--stage-logical);
+  min-width: 10px;
+  text-align: center;
+}
+.legend__cardinality-label--many {
+  font-size: 16px;
+}
+.legend__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.legend__badge--pk {
+  background: rgba(234, 179, 8, 0.2);
+  color: #ca8a04;
+}
+.legend__badge--fk {
+  background: rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+}
+.legend__badge--nk {
+  background: rgba(168, 85, 247, 0.2);
+  color: #a855f7;
+}
+.legend__subsection-title {
+  margin: 10px 0 6px 0;
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  opacity: 0.5;
+}
+.legend__items--sources,
+.legend__items--disc-edges,
+.legend__items--symbols {
+  gap: 6px;
+}
+.legend__items--symbols {
+  margin-top: 10px;
+}
+.legend__badge--schema,
+.legend__badge--source {
+  flex-shrink: 0;
+  min-width: 26px;
+}
+.legend__badge--schema {
+  background: rgba(96, 165, 250, 0.2);
+  color: var(--stage-logical);
+}
+.legend__badge--source {
+  background: var(--dim-fg);
+  color: var(--editor-bg);
+}
+.legend__badge--source-catalog {
+  background: var(--ok-bg);
+  color: var(--ok-fg);
+}
+.legend__item-desc code {
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 9px;
+}
+.legend__symbols {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+  min-width: 42px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  opacity: 0.8;
+}
+.legend__symbols > span {
+  cursor: help;
+}
+.legend__note {
+  margin: 8px 0 0 0;
+  font-size: 10px;
+  font-style: italic;
+  color: var(--editor-fg);
+  opacity: 0.5;
+}
+.legend__note--lead {
+  margin: -2px 0 8px 0;
+}
+.legend__swatch {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  background: var(--panel-bg);
+}
+.legend__swatch--extra {
+  border-left-color: var(--discrepancy-extra);
+  background: rgba(245, 158, 11, 0.12);
+}
+.legend__swatch--mismatch {
+  border-left-color: var(--discrepancy-mismatch);
+  background: rgba(239, 68, 68, 0.12);
+}
+.legend__swatch--missing {
+  border-left-color: var(--stage-ghost);
+  background: rgba(156, 163, 175, 0.12);
+}
+
+/* src/styles/theme.css */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+body {
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  font-family: var(--vscode-font-family, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
+  font-size: var(--vscode-font-size, 13px);
+  font-weight: var(--vscode-font-weight, 400);
+}
+:root {
+  --editor-bg: var(--vscode-editor-background);
+  --editor-fg: var(--vscode-editor-foreground);
+  --panel-bg: var(--vscode-sideBar-background, var(--vscode-editor-background));
+  --panel-border: var(--vscode-panel-border, var(--vscode-editorGroup-border, #444));
+  --button-bg: var(--vscode-button-background);
+  --button-fg: var(--vscode-button-foreground);
+  --button-hover-bg: var(--vscode-button-hoverBackground);
+  --input-bg: var(--vscode-input-background);
+  --input-fg: var(--vscode-input-foreground);
+  --input-border: var(--vscode-input-border, transparent);
+  --focus-border: var(--vscode-focusBorder);
+  --selection-bg: var(--vscode-editor-selectionBackground);
+  --error-fg: var(--vscode-errorForeground);
+  --warning-fg: var(--vscode-editorWarning-foreground, #cca700);
+  --ok-fg: var(--vscode-charts-green, #2f8a48);
+  --ok-bg: rgba(47, 138, 72, 0.12);
+  --ai-fg: var(--vscode-charts-purple, #b48ce8);
+  --ai-bg: rgba(180, 140, 232, 0.10);
+  --dim-fg: var(--vscode-descriptionForeground, #8a94a3);
+  --error-bg: rgba(239, 68, 68, 0.12);
+  --warning-bg: rgba(224, 167, 43, 0.12);
+  --stage-logical: #60a5fa;
+  --stage-logical-bg: rgba(96, 165, 250, 0.08);
+  --stage-logical-hover: rgba(96, 165, 250, 0.12);
+  --stage-logical-ring: rgba(96, 165, 250, 0.3);
+  --stage-physical: #22c55e;
+  --stage-physical-bg: rgba(34, 197, 94, 0.08);
+  --stage-physical-hover: rgba(34, 197, 94, 0.12);
+  --stage-physical-ring: rgba(34, 197, 94, 0.3);
+  --stage-physical-border: rgba(34, 197, 94, 0.2);
+  --stage-ghost: #9ca3af;
+  --stage-ghost-bg: rgba(156, 163, 175, 0.08);
+  --discrepancy-extra: #f59e0b;
+  --discrepancy-mismatch: #ef4444;
+  --model-built: var(--stage-physical);
+  --model-built-bg: var(--stage-physical-bg);
+  --model-built-text: #ffffff;
+  --model-approved: #14b8a6;
+  --model-approved-bg: rgba(20, 184, 166, 0.08);
+  --model-approved-text: #ffffff;
+  --model-design: var(--stage-logical);
+  --model-design-bg: var(--stage-logical-bg);
+  --model-design-text: #ffffff;
+  --model-missing: var(--stage-ghost);
+  --model-missing-bg: var(--stage-ghost-bg);
+  --edge-built: var(--stage-logical);
+  --edge-design: var(--stage-logical);
+  --layer-bronze: #cd7f32;
+  --layer-bronze-bg: rgba(205, 127, 50, 0.2);
+  --layer-silver: #a0a0a0;
+  --layer-silver-bg: rgba(192, 192, 192, 0.2);
+  --layer-gold: #d4a800;
+  --layer-gold-bg: rgba(255, 215, 0, 0.2);
+}
+.react-flow {
+  background-color: var(--editor-bg);
+}
+.react-flow__attribution {
+  display: none;
+}
+
+/* src/styles.css */