/* Визуальный холст N8N */
.n8n-canvas {
  background-color: #f8fafc;
  background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.n8n-node {
  position: absolute;
  width: 260px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  cursor: grab;
  z-index: 10;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.n8n-node:active { cursor: grabbing; }
.n8n-node.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.n8n-node-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  justify-content: space-between;
}

.n8n-port-out {
  width: 13px;
  height: 13px;
  background: #2563eb;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  right: -6.5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: crosshair;
}
.n8n-port-in {
  width: 13px;
  height: 13px;
  background: #64748b;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  left: -6.5px;
  top: 50%;
  transform: translateY(-50%);
}