/* ============================================================
   CHANNEL GRAPH – CINEMATIC NEON GLASS UI
   Ecosystem-G / Channels Dashboard
   Author: Ed Freeney & Associates – Ecosystem-G Architecture
   ============================================================ */

.channel-graph-shell {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center,
        rgba(0, 10, 20, 0.85),
        rgba(0, 0, 0, 0.95)
    );
    backdrop-filter: blur(12px);
    border-radius: 18px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.15);
}

/* SVG canvas */
.channel-graph-svg {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------
   NODES (Glass + Neon)
------------------------------------------------------------ */

.channel-node-circle {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(0, 255, 255, 0.55);
    stroke-width: 2.5;
    backdrop-filter: blur(6px);
    transition: 0.25s ease;
}

.channel-node-circle:hover {
    fill: rgba(0, 255, 255, 0.18);
    stroke: rgba(0, 255, 255, 0.9);
    transform: scale(1.08);
}

/* Node labels */
.channel-node-label {
    fill: #e8faff;
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
    font-family: "Inter", "Segoe UI", sans-serif;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
}

/* ------------------------------------------------------------
   EDGES (Neon Lines)
------------------------------------------------------------ */

.channel-edge {
    stroke: rgba(0, 180, 255, 0.45);
    stroke-width: 2;
    stroke-linecap: round;
    transition: 0.25s ease;
}

.channel-edge:hover {
    stroke: rgba(0, 255, 255, 0.9);
    stroke-width: 3;
}

/* Cross-suite edges (highlighted) */
.channel-edge-cross {
    stroke: rgba(255, 80, 200, 0.55);
    stroke-width: 2.4;
    stroke-dasharray: 6 4;
    transition: 0.25s ease;
}

.channel-edge-cross:hover {
    stroke: rgba(255, 120,