.connection-path {
    fill: none; stroke: rgba(255,255,255,0.42);
    stroke-width: 1.1; stroke-linecap: round;
    transition: stroke 0.2s;
    pointer-events: stroke;
    cursor: pointer;
}
.ghost-path {
    fill: none; stroke: rgba(255,107,157,0.6);
    stroke-width: 1.5; stroke-linecap: round;
    stroke-dasharray: 6 4;
    pointer-events: none;
    animation: dashFlow 0.6s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -10; } }
.connection-hit {
    fill: none; stroke: transparent;
    stroke-width: 18; cursor: pointer;
    pointer-events: stroke;
}
.connection-path.selected { stroke: rgba(255,107,157,0.9) !important; }

.edge-popover {
    position: fixed; z-index: 200;
    background: var(--bg-2); border: 1px solid var(--border-strong);
    border-radius: var(--r-md); padding: 4px;
    display: flex; gap: 2px; align-items: center;
    transform: translate(-50%, -140%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.edge-popover.open { opacity: 1; pointer-events: all; }
.edge-popover-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--fg-muted);
    font-size: 11.5px; padding: 5px 8px; border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.edge-popover-btn:hover { background: var(--bg-hover); color: var(--fg); }
.edge-popover-btn.active { background: var(--bg-active); color: var(--fg); }
.edge-popover-btn .swatch { width: 20px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.42); flex-shrink: 0; }
.edge-popover-btn[data-type="dashed"] .swatch { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.42) 0, rgba(255,255,255,0.42) 4px, transparent 4px, transparent 8px); }
.edge-popover-btn[data-type="critical"] .swatch { background: rgba(255,107,157,0.85); box-shadow: 0 0 4px rgba(255,107,157,0.6); }
.edge-popover-btn[data-type="optional"] .swatch { background: repeating-linear-gradient(90deg, rgba(94,234,212,0.55) 0, rgba(94,234,212,0.55) 2px, transparent 2px, transparent 6px); }
.edge-popover-divider { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.edge-popover-btn.danger { color: var(--pink); }
.edge-popover-btn.danger:hover { background: rgba(255,107,157,0.1); color: var(--pink); }