.paint-edit-toolbar {
  position: fixed; z-index: 3050; display: none; align-items: center; gap: 6px;
  padding: 4px 8px; background: #2d2d2d; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ndt-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,0.7);
  cursor: pointer; user-select: none;
}
.ndt-btn:hover { background: rgba(255,255,255,0.12); }
.ndt-btn.active { background: rgba(255,255,255,0.24); color: #fff; }
.ndt-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.ndt-color {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  cursor: pointer; border: 2px solid transparent; box-sizing: content-box;
}
.ndt-color.active { border-color: #fff; }
.paint-edit-canvas { display: block; box-sizing: border-box; border: 1px solid #000; cursor: crosshair; touch-action: none; }
.paint-edit-canvas.eraser-tool {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Crect x='2' y='2' width='12' height='24' rx='2' fill='rgba(255,255,255,0.28)' stroke='%23ffffff' stroke-width='3'/%3E%3Crect x='2' y='2' width='12' height='24' rx='2' fill='none' stroke='%231a1a1a' stroke-width='1.4'/%3E%3C/svg%3E") 8 14, crosshair;
}

.node-crown {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center;
  pointer-events: none; z-index: 16;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.node.is-thumbnail-node .node-crown { display: flex; }
.node-crown svg { width: 100%; height: 100%; }

.resize-handle {
  position: absolute; bottom: 0; right: 0; width: 18px; height: 18px;
  cursor: se-resize; z-index: 15; display: flex;
  align-items: flex-end; justify-content: flex-end; padding: 3px;
}
.resize-handle::after {
  content: ''; display: block; width: 8px; height: 8px;
  border-right: 2px solid rgba(0,0,0,0.28); border-bottom: 2px solid rgba(0,0,0,0.28);
}

.port {
  position: absolute; width: 20px; height: 20px;
  background: #fff; border: 3px solid #4a9eff;
  border-radius: 50%; opacity: 0; cursor: crosshair; z-index: 20;
  transition: opacity 0.12s, background 0.12s;
}
.port::before {
  content: ''; position: absolute; inset: -6px;
}
.node:hover .port, .node.focused .port { opacity: 1; }
.port:hover { background: #4a9eff; }
.port-top    { top: -11px;  left: 50%; transform: translateX(-50%); }
.port-right  { right: -11px; top: 50%; transform: translateY(-50%); }
.port-bottom { bottom: -11px; left: 50%; transform: translateX(-50%); }
.port-left   { left: -11px; top: 50%; transform: translateY(-50%); }

.img-crop-overlay { position: fixed; z-index: 3060; pointer-events: none; }
.img-crop-dim { position: absolute; background: rgba(0, 0, 0, 0.55); }
.img-crop-rect { position: absolute; box-sizing: border-box; border: 2px solid #4a9eff; pointer-events: auto; touch-action: none; cursor: move; }
.img-crop-handle {
  position: absolute; pointer-events: auto; touch-action: none; transform: translate(-50%, -50%);
  background: #fff; border: 1.5px solid #4a9eff; border-radius: 4px; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.img-crop-handle[data-edge="top"], .img-crop-handle[data-edge="bottom"] { width: 22px; height: 8px; cursor: ns-resize; }
.img-crop-handle[data-edge="left"], .img-crop-handle[data-edge="right"] { width: 8px; height: 22px; cursor: ew-resize; }
.img-crop-bar {
  position: absolute; display: flex; gap: 6px; padding: 4px 6px; pointer-events: auto;
  background: #2d2d2d; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.img-crop-bar button {
  font: inherit; font-size: 12px; color: #eee; background: #444; border: 0; border-radius: 4px;
  padding: 3px 10px; cursor: pointer;
}
.img-crop-bar button:hover { background: #555; }
.img-crop-bar .img-crop-ok { background: #4a9eff; color: #fff; }
.img-crop-bar .img-crop-ok:hover { background: #3a8eef; }