#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#board.panning{cursor:grabbing}
#grid-bg{fill:url(#grid)}
#grid-bg-major{pointer-events:none}
.node{cursor:grab}
.node:active{cursor:grabbing}
.node-card{fill:var(--card);stroke:var(--line-strong);stroke-width:1.4;filter:drop-shadow(0 2px 5px rgba(15,23,42,.10))}
.node:hover .node-card{stroke:var(--line-strong)}
.node.selected .node-card{stroke:var(--select);stroke-width:2.2;filter:drop-shadow(0 3px 10px rgba(37,99,235,.35))}
.node text{font-family:var(--font);pointer-events:none}
.node-label{font-size:12px;font-weight:600;fill:var(--ink);text-anchor:middle}
.node-sub{font-size:9.5px;font-weight:500;fill:var(--faint);text-anchor:middle;letter-spacing:.04em;text-transform:uppercase}

.stage-empty{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.stage-empty.hidden{display:none}
.empty-card{text-align:center;background:rgba(250,251,253,.94);border:1px dashed var(--line-strong);border-radius:16px;padding:30px 44px;box-shadow:var(--shadow)}
.empty-icon{font-size:34px}
.empty-card h3{font-size:16px;margin:8px 0 6px}
.empty-card p{font-size:13px;color:var(--muted);line-height:1.55}
.stage-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11.5px;color:var(--muted);background:rgba(250,251,253,.94);border:1px solid var(--line);border-radius:99px;padding:5px 14px;pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.stage-tools{position:absolute;left:14px;top:14px;display:flex;gap:6px}
.stage-tools button{font-size:11.5px;font-weight:600;color:var(--muted);background:rgba(250,251,253,.94);border:1px solid var(--line);border-radius:99px;padding:6px 13px;box-shadow:var(--shadow)}
.stage-tools button:hover{border-color:var(--accent);color:var(--accent-ink)}
.stage-tools button.off{color:var(--faint);border-style:dashed}
.stage-zoom{position:absolute;right:14px;bottom:14px;display:flex;gap:6px}
.stage-zoom button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:17px;font-weight:700;color:var(--muted);box-shadow:var(--shadow);line-height:1}
.stage-zoom button:hover{border-color:var(--accent);color:var(--accent-ink)}

.toast-stack{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;align-items:center;pointer-events:none}
.toast{background:#0f172a;color:#fff;font-size:13px;padding:9px 16px;border-radius:10px;box-shadow:var(--shadow-lg);animation:toast-in .2s ease;max-width:min(480px,90vw);text-align:center}
.toast.warn{background:#92400e}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transition:opacity .3s}
.marquee{position:absolute;z-index:30;border:1.5px dashed var(--accent);background:rgba(245,158,11,.12);border-radius:4px;pointer-events:none}
/* ── Conexões ── */
.node .ports{display:none}
.node.selected .ports,.node.hovered .ports,#board.connecting .node .ports{display:block}
.port{fill:#fff;stroke:#0ea5e9;stroke-width:2;cursor:crosshair}
.port:hover{fill:#0ea5e9}
#board.connecting,#board.connecting .node{cursor:crosshair}
.node.drop-target .node-card{stroke:#0ea5e9;stroke-width:2.5}
.port.drop-target{fill:#0ea5e9;stroke:#075985}
.wire-hit{stroke:rgba(0,0,0,0);stroke-width:14;fill:none;pointer-events:stroke;cursor:pointer}
.wire-line{fill:none;stroke-linecap:round;pointer-events:none}
.wire.selected .wire-line{stroke:var(--select);filter:drop-shadow(0 1px 4px rgba(37,99,235,.65))}
.wire-label{font-family:var(--font);font-size:11px;font-weight:700;fill:#fff;stroke:#0f172a;stroke-width:3px;paint-order:stroke;text-anchor:middle;pointer-events:auto;cursor:grab}
.wire-temp{fill:none;stroke:#0ea5e9;stroke-width:2.5;stroke-dasharray:7 5;pointer-events:none}
.wire-pt{fill:#fff;stroke:#f59e0b;stroke-width:2;cursor:move}
.wire-pt:hover{fill:#f59e0b}
.wire-end{fill:#0ea5e9;stroke:#fff;stroke-width:2;cursor:crosshair}
.wire-end:hover{fill:#075985}
/* ── Exportar / apresentação ── */
.sheet-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;display:grid;place-items:center;padding:16px}
.sheet{background:var(--card);border-radius:16px;padding:22px 24px;width:min(430px,94vw);box-shadow:var(--shadow-lg)}
.sheet h3{font-size:16px}
.sheet .sub{font-size:12.5px;color:var(--muted);margin:3px 0 14px}
.sheet fieldset{border:1px solid var(--line);border-radius:10px;padding:6px 14px 10px;margin-bottom:12px}
.sheet legend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 6px}
.sheet label.row{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;cursor:pointer}
.sheet label.row input{accent-color:var(--accent)}
.sheet-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.sheet-actions .tbtn{border:1px solid var(--line);border-radius:9px;padding:9px 18px;font-weight:600}
.exit-present{position:absolute;top:14px;right:14px;z-index:70;font-size:13px;font-weight:600;color:#fff;background:rgba(15,23,42,.85);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:8px 16px;box-shadow:var(--shadow-lg)}
.exit-present:hover{background:#0f172a}
body.presenting .toolbar,body.presenting .library,body.presenting .props,body.presenting .statusbar{display:none}
body.presenting .workspace{grid-template-columns:minmax(0,1fr)}
body.presenting .stage-hint,body.presenting .stage-tools{display:none}
body.presenting .node .ports{display:none!important}