:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel2: #1f2430;
  --text: #e8eaf0;
  --muted: #a9b0c0;
  --accent: #7aa2f7;
  --danger: #ff5c7a;
  --grid: rgba(255, 255, 255, 0.05);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; overflow: hidden; }

#app { position: relative; height: 100%; width: 100%; }
#topbar {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 90%, black 10%);
  box-shadow: var(--shadow); z-index: 5;
}

.btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--panel2); color: var(--text);
  padding: 8px 10px; border-radius: 12px; cursor: pointer; font-weight: 800;
}
.btn.danger { border-color: rgba(255, 92, 122, 0.45); }
.spacer { flex: 1; }

.control {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; 
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0,0,0,0.08);
}
.control label { font-size: 12px; color: var(--muted); font-weight: 700; }

.swatches { display: flex; gap: 6px; }
.swatch {
  width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.swatch.selected { outline: 2px solid var(--accent); outline-offset: 2px; }

#workspaceWrap { position: absolute; inset: 0; top: 80px; }
#grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; }

.node-rect { rx: 16; ry: 16; stroke: rgba(255, 255, 255, 0.20); stroke-width: 1.25; }
.node.selected .node-rect { stroke: rgba(255, 255, 255, 0.92); stroke-width: 2.25; }

.node-title, .node-desc { fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.65); stroke-width: 3; }
.node-title { font-size: 14px; font-weight: 900; }
.node-desc { font-size: 11.5px; font-weight: 800; }

.port { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.port-hit { fill: transparent; stroke: transparent; stroke-width: 14; cursor: crosshair; }

.edge { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.edge-outline { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 7; opacity: 0; pointer-events: none; }
.edge-outline.edge-selected { opacity: 1; }

/* Enhanced Edge Labels with contrast halo */
.edge-label { 
  font-size: 12px; font-weight: 900; fill: #fff; 
  paint-order: stroke; stroke: #000; stroke-width: 4px;
  stroke-linejoin: round; pointer-events: auto;
}

.editorWrap { position: absolute; z-index: 10; display: none; }
.editorCard { padding: 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--muted); width: 300px; box-shadow: var(--shadow); }
.editorCard input, .editorCard textarea { width: 100%; background: #000; color: #fff; border: 1px solid #444; border-radius: 8px; padding: 5px; margin-top: 5px; }