.flow-port.branch-port{width:58px;height:24px;padding:0 5px 0 7px;left:calc(100% + 4px);right:auto;transform:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:space-between;gap:4px;font-size:11px;font-weight:700;cursor:crosshair;transition:all 0.15s ease;box-shadow:0 2px 6px rgba(15,23,42,0.08);z-index:10;box-sizing:border-box;white-space:nowrap}
.flow-port.branch-port .branch-label{display:inline-flex;align-items:center;gap:3px;line-height:1;letter-spacing:0.02em}
.flow-port.branch-port .branch-icon{font-style:normal;font-weight:800;font-size:10px}
.flow-port.branch-port .port-socket{width:11px;height:11px;border-width:2px;flex-shrink:0}

.flow-port.true-port{top:calc(50% - 27px);background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}
.flow-port.true-port .port-socket{border-color:#10b981;background:#ffffff}
.flow-port.true-port:hover{background:#d1fae5;border-color:#6ee7b7;transform:scale(1.06) translateX(2px);box-shadow:0 3px 10px rgba(16,185,129,0.28)}
.flow-port.true-port:hover .port-socket{background:#10b981}

.flow-port.false-port{top:calc(50% + 3px);background:#fff1f2;border:1px solid #fecdd3;color:#be123c}
.flow-port.false-port .port-socket{border-color:#f43f5e;background:#ffffff}
.flow-port.false-port:hover{background:#ffe4e6;border-color:#fda4af;transform:scale(1.06) translateX(2px);box-shadow:0 3px 10px rgba(244,63,94,0.28)}
.flow-port.false-port:hover .port-socket{background:#f43f5e}

.runtime-note{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:#475569;padding:6px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;width:100%;box-sizing:border-box}
.runtime-note::before{content:'ℹ';font-weight:700;color:#3b82f6}
.runtime-auto{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#1e40af;margin:2px 0 0;cursor:pointer;line-height:1.3;padding:2px 6px;border-radius:4px;background:#eff6ff}
.runtime-auto input[type="checkbox"]{width:13px;height:13px;margin:0;accent-color:#2563eb;cursor:pointer}

.designer-flow-canvas [data-out]{cursor:crosshair}
.designer-flow-canvas [data-in]{cursor:copy}
.designer-flow-canvas [data-in]:hover .port-socket{border-color:#10b981;background:#ecfdf5;box-shadow:0 0 0 3px rgba(16,185,129,0.25);transform:scale(1.3)}

.designer-temp-edge{fill:none;stroke:#3b82f6;stroke-width:2.5px;stroke-dasharray:6 4;animation:flowDash 0.8s linear infinite;pointer-events:none;filter:drop-shadow(0 0 5px rgba(59,130,246,0.4))}
.designer-temp-edge.temp-true{stroke:#10b981;filter:drop-shadow(0 0 5px rgba(16,185,129,0.4))}
.designer-temp-edge.temp-false{stroke:#f43f5e;filter:drop-shadow(0 0 5px rgba(244,63,94,0.4))}
@keyframes flowDash{to{stroke-dashoffset:-20}}

#scenarioView .scenario-status{white-space:normal;overflow-wrap:anywhere}