#canvas-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
}

#canvas {
  position: absolute;
  transform-origin: 0 0;
  outline: none;
}

/* Canvas dot grid background */
#canvas-bg {
  background-image: radial-gradient(circle, var(--border2) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Selection box (marquee) */
#selection-box {
  position: absolute;
  border: 1.5px solid var(--accent);
  background: rgba(91, 79, 255, 0.06);
  pointer-events: none;
  z-index: 1000;
  border-radius: 2px;
}

/* Connection layer */
#connection-layer {
  z-index: 5;
}

/* Cursors */
body[data-tool="select"] #canvas-bg { cursor: default; }
body[data-tool="hand"] #canvas-bg { cursor: grab; }
body[data-tool="hand"].panning #canvas-bg { cursor: grabbing; }
body[data-tool="text"] #canvas-bg { cursor: text; }
body[data-tool="rect"] #canvas-bg,
body[data-tool="ellipse"] #canvas-bg,
body[data-tool="frame"] #canvas-bg,
body[data-tool="line"] #canvas-bg,
body[data-tool="arrow"] #canvas-bg,
body[data-tool="image"] #canvas-bg { cursor: crosshair; }
body[data-drawing] #canvas-bg { cursor: crosshair !important; }

/* Drag-draw preview */
.draw-preview {
  position: absolute;
  border: 1.5px dashed var(--accent);
  background: rgba(91, 79, 255, 0.04);
  pointer-events: none;
  z-index: 999;
}