feat: Implement server connections API and enhance GraphView with custom edge styling for improved visualization and user interaction in the topology graph.

frontend/src/App.css

@@ -520,4 +520,40 @@ button:focus-visible,
   100% {
     transform: scale(1);
   }
+}
+
+/* ===== GraphView / ReactFlow custom styling ===== */
+
+/* Плавные, аккуратные линии графа */
+.react-flow__edge-path {
+  stroke-linecap: round;
+  transition: stroke 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
+}
+
+/* Лёгкий ховер по связи, без агрессивной анимации */
+.react-flow__edge:hover .react-flow__edge-path {
+  stroke-width: 3.2px;
+  filter: drop-shadow(0 0 4px rgba(15, 23, 42, 0.25));
+}
+
+/* Базовая прозрачность для всех связей, чтобы граф не выглядел «забитым» */
+.react-flow__edge .react-flow__edge-path {
+  stroke-opacity: 0.9;
+}
+
+/* Небольшие отличия по типу туннеля (на будущее, сейчас основное зашито в JS) */
+.react-flow__edge.edge-tunnel-gre .react-flow__edge-path {
+  /* GRE — базовый синий, уже задан в JS, здесь только подчёркиваем плавность */
+}
+
+.react-flow__edge.edge-tunnel-ipsec .react-flow__edge-path {
+  stroke-dasharray: 6 4;
+}
+
+.react-flow__edge.edge-tunnel-wireguard .react-flow__edge-path {
+  stroke-width: 3px;
+}
+
+.react-flow__edge.edge-tunnel-openvpn .react-flow__edge-path {
+  stroke-dasharray: 3 3;
 }