/* ===== 画布区域 ===== */
#viewport {
  position: relative; flex: 1; overflow: hidden;
  background-color: var(--bg);
  cursor: default;
  touch-action: none;
}
#viewport.panning { cursor: grabbing; }
#viewport.space-pan { cursor: grab; }
#viewport.marquee-ing { cursor: crosshair; }

/* 🌟 方案 1: 平移硬件极速通道 - 拖拽/空格平移时挂起卡片 hover/碰撞检测，满帧 120fps 极速滑动 */
#viewport.panning .card,
#viewport.panning #edges-svg,
#viewport.space-pan .card,
#viewport.space-pan #edges-svg {
  pointer-events: none !important;
  user-select: none !important;
}

/* 框选矩形 */
#marquee {
  position: absolute; z-index: 60; display: none; pointer-events: none;
  border: 1.5px dashed var(--c-accent); border-radius: 3px;
  background: rgba(var(--c-accent-rgb),.09);
}
#world {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* 连线层: 静态高清曲线 + 箭头 (已关闭流动动画, 彻底消除 GPU 重绘与闪烁) */
#edges-svg {
  position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none;
  shape-rendering: geometricPrecision;
}
#edges-g path { pointer-events: stroke; }
.edge {
  fill: none; stroke: rgba(var(--c-accent-rgb), .6); stroke-width: 2.5;
  cursor: pointer; transition: stroke .15s, stroke-width .15s;
}
.edge.from-image { stroke: rgba(var(--c-image-rgb), .7); }
.edge.from-video { stroke: rgba(var(--c-video-rgb), .7); }
.edge.from-prompt { stroke: rgba(var(--c-prompt-rgb), .7); }
.edge:hover, .edge.selected { stroke-width: 3.5; stroke: #ff7b6b; }
.edge-arrow { fill: rgba(var(--c-accent-rgb), .85); }
.edge-arrow.from-image { fill: rgba(var(--c-image-rgb), .85); }
.edge-arrow.from-video { fill: rgba(var(--c-video-rgb), .85); }
.edge-arrow.from-prompt { fill: rgba(var(--c-prompt-rgb), .85); }
.edge-arrow:hover, .edge-arrow.selected { fill: #ff7b6b; }
#temp-edge { fill: none; stroke: #9db4ff; stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .85; }