body {
  margin: 0;
  font-family: sans-serif;
}

#actions {
  background: #f0f0f0;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

#actions button {
  margin-right: 5px;
  cursor: pointer;
}


#main {
  flex: 1;
  display: flex;
  overflow: hidden;
}



#palette {
  width: 140px;
  background: #fafafa;
  border-right: 1px solid #ccc;
  padding: 10px;
}

#palette button {
  display: block;
  width: 100%;
  margin: 5px 0;
  cursor: pointer;
  text-align: left;
}

#editor {
  flex: 1;
  background: #fff;
  border: 2px dashed #ccc;
}

.symbol-name {
  pointer-events: none;
  user-select: none;
  font-size: 12px;
}

.symbol-tag {
  pointer-events: none;
  user-select: none;
  font-size: 10px;
  fill: #555;
}

.connector {
  cursor: crosshair;
}

#script-container {
  padding: 10px;
  background: #fafafa;
  border-top: 1px solid #ccc;
}

#ctx-menu div:hover {
  background: #f0f0f0;
}

.connector.pipe {
  fill: #1976d2;
}