/* ── Legend port/wire swatches ── */
.lp-out-f{background:transparent;border:2px solid var(--accent)}
.lp-out{background:var(--accent);border:2px solid var(--accent)}
.lp-in{background:transparent;border:2px solid var(--dim2)}
.lp-in-c{background:var(--accent);border:2px solid var(--accent)}
.lp-fb-ring{display:flex;align-items:center;justify-content:center;width:11px;height:11px;border-radius:50%;border:2px solid var(--accent);flex-shrink:0}
.lp-fb-inner{width:7px;height:7px;border-radius:50%;background:#886;-webkit-mask-image:radial-gradient(circle 1px at center,transparent 100%,#000 100%);-webkit-mask-size:4px 4px;mask-image:radial-gradient(circle 1px at center,transparent 100%,#000 100%);mask-size:4px 4px}
.lp-fb-init{background:var(--accent);border:2px dashed var(--accent);-webkit-mask-image:radial-gradient(circle 1.5px at center,transparent 100%,#000 100%);-webkit-mask-size:5px 5px;mask-image:radial-gradient(circle 1.5px at center,transparent 100%,#000 100%);mask-size:5px 5px}
.lp-init{background:transparent;border:2px dashed #886}
.lp-init-c{background:var(--green);border:2px dashed var(--green);-webkit-mask-image:radial-gradient(circle 1.5px at center,transparent 100%,#000 100%);-webkit-mask-size:5px 5px;mask-image:radial-gradient(circle 1.5px at center,transparent 100%,#000 100%);mask-size:5px 5px}
.lp-global{background:transparent;border:3px double var(--purple)}
.lw-global{border-top:2.5px solid var(--purple)}
.lp-loop{background:transparent;border:2.5px solid rgba(240,168,48,.5)}
.lp-loop-c{background:var(--accent);border:2.5px solid var(--accent);box-shadow:0 0 0 2px rgba(240,168,48,.5)}
.lw-loop{border-top:2.5px solid var(--accent)}
.lp-hover-out{background:transparent;border:2px solid var(--accent);transform:scale(1.4);box-shadow:0 0 8px var(--accent)}
.lp-hover-in{background:transparent;border:2px solid var(--dim2);transform:scale(1.4);box-shadow:0 0 8px var(--dim2)}
.legend-wire{width:24px;height:0;flex-shrink:0}
.lw-normal{border-top:2.5px solid var(--accent)}
.lw-feedback{border-top:2.5px dashed #886}
.lw-init{border-top:2px dotted var(--green)}

/* ── Tree view ── */
.tree-row{padding:3px 6px;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-row:hover{background:rgba(255,255,255,.04)}
.tree-sel{background:rgba(79,142,250,.1) !important}
.tree-toggle{cursor:pointer;user-select:none;display:inline-block;width:10px;text-align:center;color:var(--dim)}
.tree-toggle:hover{color:var(--accent)}

/* ── Canvas layers ── */
svg.grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#wire-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#wire-layer path{opacity:0;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:opacity 1.5s .4s,stroke-width 1.5s .4s}
#wire-layer path.wire-drag{opacity:.5;stroke-width:2.5}
#wire-layer circle{opacity:0;transition:opacity 1.5s .4s}
#wire-layer path.wire-hi{opacity:.8;stroke-width:2.5;transition:opacity .12s,stroke-width .12s}
#wire-layer circle.wire-hi{opacity:.85;transition:opacity .12s}
#wire-layer path.wire-new{animation:wireFlash 3.5s ease-out}
#wire-layer circle.wire-new{animation:wireFlash 3.5s ease-out}
@keyframes wireFlash{0%,35%{opacity:.8;stroke-width:2.5}100%{opacity:0;stroke-width:1.5}}

.blayer{position:absolute;inset:0;overflow:visible}
.wire-btns{position:absolute;inset:0;pointer-events:none;z-index:25;overflow:visible}
.wbtn{
  position:absolute;width:16px;height:16px;border-radius:50%;
  background:transparent;border:none;color:transparent;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:all;transition:all .15s;
  transform:translate(-50%,-50%);font-family:var(--mono)
}
.wbtn:hover{background:var(--red);color:#fff;box-shadow:0 0 10px rgba(240,96,96,.5);transform:translate(-50%,-50%) scale(1.15)}
.wbtn-svg{opacity:0;transition:opacity .15s;pointer-events:all}
.wbtn-svg:hover{opacity:1;fill:var(--red)}
.wbtn:active{transform:translate(-50%,-50%) scale(.9)}

/* ── Empty canvas ── */
.emsg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.emsg .e1{font-size:36px;opacity:.3}
.emsg .e2{font-size:12px;color:#303060;font-weight:600}
.emsg .e3{font-family:var(--mono);font-size:9px;color:#282850;margin-top:6px;line-height:1.8}

/* ── Blocks (SVG) ── */
.blk{cursor:default;user-select:none}
.blk-body{transition:opacity .12s}
.blk:hover .blk-body{opacity:.85}
.blk .bdel,.blk .bedit{display:none}
.blk:hover .bdel,.blk:hover .bedit{display:inline}
.blk .bdel:hover circle{fill:#ff5555;r:12}
.blk .bedit:hover circle{r:12}
.wiring .bdel,.wiring .bedit{display:none !important}
.wiring .wbtn-svg{pointer-events:none !important}
.wiring .wbtn{pointer-events:none !important}
.blk-name{pointer-events:none}
.blk-alias{cursor:text}
.blk-port-label{pointer-events:none}
.blk-glow{pointer-events:none}
.blk.step-active .blk-body{opacity:.9;stroke:#fff;stroke-width:2}

/* SVG port dots */
.pd{transition:r .12s;cursor:crosshair}
.pd:hover{r:10}
.pd.port-hover{r:10}
.pd.global-port{stroke-dasharray:none}
.pd.fb-port{opacity:.85}

/* ── Init ports (SVG) ── */
.pd.init-port{stroke-dasharray:4 3}

/* ── Loop groups ── */
.loop-group{
  position:absolute;border:1.5px dashed rgba(240,168,48,.25);border-radius:var(--r5);
  background:rgba(240,168,48,.02);pointer-events:none;z-index:1;overflow:visible;
  transition:border-color .12s,background .12s,box-shadow .12s
}
.loop-group.loop-hover rect{stroke:rgba(240,168,48,.6) !important;fill:rgba(240,168,48,.08) !important;filter:drop-shadow(0 0 10px rgba(240,168,48,.15))}
.loop-group.grp-hover rect{stroke-width:2.5 !important;filter:drop-shadow(0 0 6px rgba(255,255,255,.1))}
.collapsed-capsule{cursor:pointer;pointer-events:all}
.collapsed-capsule rect{transition:stroke-width .15s,filter .15s}
.collapsed-capsule:hover rect{stroke-width:3 !important;filter:drop-shadow(0 0 12px rgba(255,255,255,.15))}
.collapsed-capsule.capsule-active rect{stroke:var(--accent) !important;stroke-width:2.5 !important;filter:drop-shadow(0 0 15px rgba(79,142,250,.4)) !important}
.grp-collapse{cursor:pointer;transition:opacity .12s}
.grp-collapse:hover{opacity:1 !important}
.loop-header{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;padding:0 12px;gap:8px;pointer-events:none}
.loop-label{font-family:var(--mono);font-size:9px;font-weight:700;color:rgba(240,168,48,.6);text-transform:uppercase;letter-spacing:1px}
.loop-port-wrap{position:absolute;left:-8px;display:flex;align-items:center;gap:6px;pointer-events:all}
.loop-port-wrap.loop-port-right{left:auto}
.loop-port{width:14px;height:14px;border-radius:50%;border:2px solid rgba(240,168,48,.4);background:var(--surface);cursor:crosshair;pointer-events:all;flex-shrink:0;transition:all .12s}
.loop-port.connected{background:rgba(240,168,48,.5)}
.loop-port-label{font-family:var(--mono);font-size:7.5px;color:rgba(240,168,48,.4);white-space:nowrap;position:relative;z-index:30;margin-left:12px}
.pd.global-port{border-style:double !important;border-width:3px !important}

.lib-card.lib-singleton{opacity:.3;position:relative;cursor:not-allowed}
.lib-card.lib-singleton .lc-btns{pointer-events:all}
.lib-card.lib-singleton .lc-btns button{opacity:2.5}
.lib-card.lib-singleton::after{content:"singleton";position:absolute;top:4px;right:8px;font-size:6.5px;color:#886;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.pd.fb-port{-webkit-mask-image:radial-gradient(circle 1.5px at center,transparent 100%,#000 100%);-webkit-mask-size:5px 5px;mask-image:radial-gradient(circle 1.5px at center,transparent 100%,#000 100%);mask-size:5px 5px}

/* ── (Bottom panel removed — terminal/console/inspect now in right panel) ── */

/* ── Toast ── */
#toast{
  position:fixed;bottom:16px;right:16px;z-index:9999;
  padding:8px 16px;border-radius:var(--r3);
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  box-shadow:var(--shadow2);display:none;color:#fff;
  backdrop-filter:blur(8px);
  animation:toastSlide .2s ease-out
}
@keyframes toastSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Loading ── */
#loading{
  position:fixed;inset:0;background:rgba(8,9,15,.92);
  display:none;align-items:center;justify-content:center;z-index:10000;
  flex-direction:column;gap:10px;backdrop-filter:blur(4px)
}
#loading .sp{width:24px;height:24px;border:2px solid rgba(255,255,255,.06);border-top-color:var(--accent);border-radius:50%;animation:spin .55s linear infinite}
#loading .lm{font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Ghost (drag preview) ── */
#ghost{
  position:fixed;pointer-events:none;z-index:9999;
  padding:6px 12px;border-radius:var(--r3);
  font-family:var(--mono);font-size:10px;font-weight:700;
  backdrop-filter:blur(8px);display:none;
  border:1.5px dashed rgba(255,255,255,.15)
}