.canvas-view {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.02) 10px,
    rgba(0,0,0,0.03) 10px,
    rgba(0,0,0,0.03) 20px
  );
}
.canvas-viewport {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  padding: 20px 30px 40px 20px;
}
.canvas-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.canvas-node {
  position: absolute;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--node-bg, #fff);
  border: 1px solid var(--node-border, #d7dde6);
  color: var(--node-text, var(--text));
  border-radius: 6px;
  padding: 4px 8px;
  user-select: none;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.canvas-node.selected {
  background: #fff;
  color: #111;
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}
.canvas-node.search-hit {
  border-color: #f0c36d;
  box-shadow: 0 0 0 2px rgba(240,195,109,0.2);
}
.canvas-node.search-active {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.25);
}
.canvas-node .caret { cursor: pointer; }
.canvas-node.drop-inside {
  background: #e8f0fb;
  border-color: #b9d3f0;
}
.link-seg {
  stroke: var(--line);
  stroke-width: 1.2;
  fill: none;
  pointer-events: none;
}
.link-hit {
  stroke: transparent;
  stroke-width: 10;
  fill: none;
  pointer-events: stroke;
}
.link-group.hover .link-seg {
  stroke: var(--accent);
  stroke-width: 1.6;
}