:root{
  --bg:#0c0f18; --bg-2:#0f1220; --panel:#141a2b; --panel-2:#192039;
  --text:#e7e9f1; --muted:#9aa3b2; --brand:#7c3aed; --brand-2:#22d3ee;
  --btn:#2b3354; --success:#22c55e; --danger:#ef4444; --wire:#c4b5fd;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; background:radial-gradient(1200px 600px at 70% -10%, #1a1240 0%, transparent 60%), var(--bg);
  color:var(--text); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(180deg,#12172a,#0e1221)}
.brand{font-weight:700}.brand span{color:var(--brand)}.brand em{opacity:.7;font-style:normal}
.actions{display:flex;gap:8px}
button{border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
button.ghost{background:var(--btn);color:#fff}
button.primary{background:linear-gradient(90deg,var(--brand),#5b21b6);color:#fff;box-shadow:0 0 16px rgba(124,58,237,.35)}
button.small{padding:6px 10px;border-radius:8px} button.danger{background:linear-gradient(90deg,#ef4444,#b91c1c);color:#fff}

.layout{display:grid;grid-template-columns:280px 1fr 320px;gap:12px;height:calc(100vh - 56px);padding:12px}
.sidebar,.editor{background:var(--panel);border:1px solid #202744;border-radius:16px;padding:14px;overflow:auto}
.sidebar h3,.editor h3{margin:0 0 8px}
.palette{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.block-btn{background:linear-gradient(180deg,#1a2240,#131a2f);color:#fff;border:1px solid #263056;border-radius:12px;padding:10px 12px;text-align:left}
.tip{font-size:12px;color:var(--muted);padding:10px;border:1px dashed #2b3354;border-radius:12px}
.stats{margin-top:10px;font-size:12px;color:var(--muted)} .muted{color:var(--muted)}

.stage-wrap{position:relative;background:var(--panel);border:1px solid #202744;border-radius:16px;overflow:auto}
.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:8px;z-index:20}

.stage{position:relative;width:3000px;height:1800px;transform-origin:0 0;background:
  linear-gradient(#0c0f18 0 0) padding-box,
  linear-gradient(180deg, rgba(34,211,238,.12), rgba(124,58,237,.12)) border-box;
  border:1px solid transparent;}
.stage.grid{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:24px 24px,24px 24px;background-position:-1px -1px;
}

.block{position:absolute;min-width:220px;max-width:320px;background:linear-gradient(180deg,#141b2e,#101628);
  border:1px solid #273258;border-radius:16px;padding:12px 14px;color:#e9ecff;
  box-shadow:0 8px 24px rgba(18,20,40,.45),0 0 24px rgba(124,58,237,.25) inset;user-select:none}
.block .title{font-size:11px;letter-spacing:.12em;opacity:.7;margin-bottom:6px}
.block .body{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.block .port{width:10px;height:10px;border-radius:50%;background:#0f172a;border:2px solid #1f2a4a;box-shadow:0 0 0 2px rgba(31,42,74,.4) inset}
.block .port.in{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:#111827;border-color:#334155}
.block .port.out{position:absolute;right:10px;bottom:10px;background:#021;border-color:#064e3b}
.port.ready{box-shadow:0 0 0 4px rgba(124,58,237,.35)}
.block.selected{outline:2px solid #7c3aed88}

/* SVG das linhas */
.wires{
  position:absolute; left:0; top:0; /* será atualizado via JS (pode ficar negativo) */
  z-index:6; pointer-events:none; overflow:visible; transform-origin:0 0;
}
.wires path{
  stroke:var(--wire); stroke-width:4; fill:none; stroke-linecap:round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px rgba(124,58,237,.45));
}

.editor .hidden{display:none}
.editor form{display:flex;flex-direction:column;gap:10px}
.editor label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.editor input[type="text"],.editor input[type="number"],.editor textarea,.editor select{
  background:#0f1426;color:#e7e9f1;border:1px solid #243055;border-radius:10px;padding:8px 10px}
.inline{display:flex;gap:8px;align-items:center}
.preview{padding:8px 10px;border:1px dashed #2b3354;border-radius:10px}
.toast{position:fixed;right:16px;bottom:16px;background:#131a2f;border:1px solid #28315a;padding:10px 14px;border-radius:12px;display:none}