: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: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  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;
  padding: 10px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 90%, black 10%);
  box-shadow: var(--shadow);
  z-index: 5; user-select: none;
}

.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; letter-spacing: 0.2px;
}

.btn:hover { border-color: rgba(255, 255, 255, 0.24); }
.btn:active { transform: translateY(1px); }
.btn.danger { border-color: rgba(255, 92, 122, 0.45); }
.btn.danger:hover { border-color: rgba(255, 92, 122, 0.75); }
.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); white-space: nowrap; font-weight: 700; }

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

#hint { font-size: 12px; color: var(--muted); opacity: 0.95; white-space: nowrap; }

#workspaceWrap { position: absolute; inset: 0; }
#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;
  opacity: 0.9;
}

#svg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }

.node { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.node-rect { rx: 16; ry: 16; stroke: rgba(255, 255, 255, 0.20); stroke-width: 1.25; }
.node.selected .node-rect { stroke: var(--accent); stroke-width: 2; }

.node-title { font-size: 14px; font-weight: 900; fill: rgba(255, 255, 255, 0.94); pointer-events: none; }
.node-desc { font-size: 11.5px; font-weight: 700; fill: rgba(255, 255, 255, 0.70); pointer-events: none; }

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

.edge { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.96; }
.edge-hit { fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 14; cursor: pointer; }
.edge-selected { filter: drop-shadow(0 0 10px rgba(122, 162, 247, 0.35)); }

#toast {
  position: absolute; bottom: 14px; left: 14px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(23, 26, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted); z-index: 6;
  backdrop-filter: blur(6px);
  user-select: none;
  max-width: min(760px, calc(100vw - 28px));
}
#toast b { color: var(--text); }

.editorWrap { position: absolute; z-index: 10; display: none; pointer-events: auto; }
.editorCard {
  padding: 10px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 17, 21, 0.96);
  box-shadow: var(--shadow);
  width: 300px;
}
.editorCard .row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.editorCard .row label { font-size: 12px; color: var(--muted); font-weight: 800; width: 68px; }
.editorCard input,
.editorCard textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  padding: 8px 10px;
  outline: none;
  font-weight: 800;
}
.editorCard textarea { height: 90px; resize: vertical; font-weight: 650; }
.editorCard .help { font-size: 12px; color: var(--muted); line-height: 1.35; }

@media (max-width: 980px) {
  #hint { display: none; }
}