/* builder.css — flow canvas + node cards + menu bar + palette */

/* ── canvas ─────────────────────────────────────────────────────────────── */
#canvasView { position:absolute; inset:48px 0 0 0; overflow:hidden; background:#0c0c16;
  background-image:radial-gradient(#23233a 1px,transparent 1px); background-size:24px 24px; }
#canvasView.with-props { right:340px; }
#world { position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
#wires { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }

/* ── node cards ─────────────────────────────────────────────────────────── */
.node { position:absolute; width:215px; border-radius:9px; background:#1a1a2b;
  border:1px solid #34344f; box-shadow:0 5px 16px rgba(0,0,0,.45); font:500 11.5px system-ui,sans-serif; color:#cfcfe6; }
.node.selected { outline:2px solid #7c3aed; }
.node .bar { padding:7px 10px; font-weight:700; color:#fff; border-radius:9px 9px 0 0; font-size:12.5px; cursor:grab; }
.node .nb { padding:8px 10px; display:flex; flex-direction:column; gap:5px; }
.node .mp3 { color:#8fb7ff; } .node .vfoot { color:#7a7a96; }
.node .vs { font-style:italic; color:#b9b9d4; background:#13131f; border:1px solid #2a2a42; border-radius:6px; padding:6px; }
.node.entry { background:#0c8f7e; border-color:#0c8f7e; }
.node.entry .bar { background:#0a7d6e; } .node.entry .vs { background:#0a7d6e; border-color:#0a7d6e; color:#fff; }

/* ── ports + wires ──────────────────────────────────────────────────────── */
.port { position:absolute; width:18px; height:18px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:9px; font-weight:700; color:#fff; border:2px solid #0c0c16; cursor:crosshair; }
.port.in { left:-10px; background:#3a3a5c; }
.port.out { right:-10px; background:#7c3aed; }
.wire { fill:none; stroke:#6a5acd; stroke-width:2.5; }
.wire.selected { stroke:#c4b5fd; stroke-width:3.5; }
.wire.preview { stroke:#c4b5fd; stroke-width:2.5; stroke-dasharray:7 5; opacity:.85; }
.wire-hit { fill:none; stroke:transparent; stroke-width:12; pointer-events:stroke; cursor:pointer; }

/* ── menu bar ───────────────────────────────────────────────────────────── */
#menubar { position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:center; gap:10px;
  padding:0 14px; background:#12121d; border-bottom:1px solid #2c2c44; z-index:40; }
#menubar .logo { font-weight:800; font-size:12px; color:#fff; background:linear-gradient(135deg,#5b3fb0,#2563eb); padding:5px 9px; border-radius:6px; }
#menubar .mb-item { background:none; border:none; color:#9c9cbe; font-size:13px; padding:6px 8px; cursor:pointer; }
#menubar .mb-item.active { color:#fff; border-bottom:2px solid #7c3aed; }
#menubar .flow-name { background:#1a1a2b; border:1px solid #36365a; border-radius:7px; color:#cfcfe6; padding:5px 9px; font-size:12.5px; }
#menubar .mb-spacer { flex:1; }
#menubar .btn-sm { padding:6px 12px; font-size:12.5px; border-radius:7px; cursor:pointer; border:none; }
#menubar .btn-gold { background:linear-gradient(135deg,#d4a017,#b8860b); color:#1a1a06; font-weight:700; }
#menubar .btn-ghost { background:#23233a; color:#cfcfe6; border:1px solid #36365a; }
#accountView { position:absolute; inset:48px 0 0 0; overflow:auto; padding:16px; }
#accountView.hidden, #canvasView.hidden { display:none; }

/* ── credits chip (menu bar) ────────────────────────────────────────────── */
#menubar .credits-chip { background:#1d1a08; border:1px solid #6b5410; color:#f4d58a; font-size:12px;
  font-weight:700; padding:5px 10px; border-radius:14px; cursor:pointer; }
#menubar .credits-chip.hidden { display:none; }

/* ── node properties panel (right sidebar, insets canvas) ───────────────── */
#propsPanel { position:absolute; top:48px; right:0; bottom:0; width:340px; background:#12121d;
  border-left:1px solid #2c2c44; z-index:38; display:flex; flex-direction:column; font:13px system-ui,sans-serif; }
#propsPanel.hidden { display:none; }
.pp-head { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid #2c2c44; }
.pp-type { font-weight:800; color:#fff; font-size:14px; }
.pp-entry { font-size:10.5px; color:#f4d58a; background:#1d1a08; border:1px solid #6b5410; padding:2px 7px; border-radius:10px; }
.pp-x { margin-left:auto; background:none; border:none; color:#9c9cbe; font-size:14px; cursor:pointer; }
.pp-body { flex:1; overflow:auto; padding:12px 14px; display:flex; flex-direction:column; gap:11px; }
.pp-row { display:flex; flex-direction:column; gap:4px; }
.pp-row-chk { flex-direction:row; align-items:center; gap:8px; }
.pp-lbl { font-size:11px; color:#9c9cbe; text-transform:uppercase; letter-spacing:.04em; }
.pp-in { width:100%; background:#1a1a2b; border:1px solid #36365a; border-radius:7px; color:#e6e6f2;
  padding:7px 9px; font-size:13px; box-sizing:border-box; }
.pp-in:focus { outline:none; border-color:#7c3aed; }
.pp-in:disabled { opacity:.5; }
.pp-ta { resize:vertical; min-height:54px; font-family:inherit; }
.pp-chk { width:16px; height:16px; accent-color:#7c3aed; }
.pp-row-chk .pp-lbl { text-transform:none; letter-spacing:0; font-size:12.5px; color:#cfcfe6; }
.pp-note { font-size:12px; color:#9c9cbe; background:#16161f; border:1px dashed #3a3a52; border-radius:7px; padding:9px; line-height:1.4; }
.pp-section { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#f4d58a;
  border-top:1px solid #2c2c44; padding-top:11px; margin-top:3px; }
.pp-inline { display:flex; gap:6px; align-items:center; }
.pp-inline .pp-in { flex:1; }
.pp-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:2px; }
.pp-key { background:#1a1a2b; border:1px solid #36365a; border-radius:7px; color:#cfcfe6; padding:8px 0;
  font-size:14px; font-weight:700; cursor:pointer; }
.pp-key.on { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.pp-foot { display:flex; gap:8px; padding:11px 14px; border-top:1px solid #2c2c44; }
.pp-btn { flex:1; background:#23233a; border:1px solid #36365a; color:#cfcfe6; border-radius:7px;
  padding:8px; font-size:12.5px; font-weight:600; cursor:pointer; }
.pp-btn:disabled { opacity:.5; cursor:default; }
.pp-del { background:#2b1417; border-color:#5c2330; color:#f4a8b4; }
.pp-apply { flex:0 0 auto; background:linear-gradient(135deg,#d4a017,#b8860b); color:#1a1a06; border:none; font-weight:700; }

/* ── right-click context menu ───────────────────────────────────────────── */
.ctx-menu { position:fixed; width:180px; background:#16161f; border:1px solid #3a3a52; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.6); z-index:60; padding:4px 0; font:12.5px system-ui; }
.ctx-i { padding:8px 12px; color:#d4d4ea; cursor:pointer; } .ctx-i:hover { background:#23233a; }
.ctx-i.del { color:#f4a8b4; border-top:1px solid #2c2c44; }

/* ── palette node menu ──────────────────────────────────────────────────── */
.node-menu { position:fixed; width:200px; background:#16161f; border:1px solid #3a3a52; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.6); z-index:50; padding:4px 0; font:12px system-ui; max-height:70vh; overflow:auto; }
.nm-h { text-align:center; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#9c9cbe; padding:6px; background:#1d1d2b; margin:2px 0; }
.nm-h.prem { color:#f4d58a; }
.nm-i { padding:6px 12px; color:#d4d4ea; cursor:pointer; } .nm-i:hover { background:#23233a; }
.nm-i.prem { color:#f4d58a; }