/* =============================================================
   GraphSec — Graph Neural Network Background
   ============================================================= */
/* ── CSS Variables: Light mode ── */
:root {
    --graphsec-bg:                #ffffff;
    --graphsec-grid:              rgba(26,26,26,0.03);
    --graphsec-field-line:        rgba(45,91,255,0.025);
    --graphsec-edge-base:         rgba(80,80,100,0.05);
    --graphsec-edge-active:       rgba(80,80,100,0.16);
    --graphsec-risk-red:          rgba(239,68,68,0.9);
    --graphsec-risk-red-fill:     rgba(239,68,68,0.06);
    --graphsec-risk-red-stroke:   rgba(239,68,68,0.3);
    --graphsec-risk-amber:        rgba(245,158,11,0.9);
    --graphsec-risk-amber-fill:   rgba(245,158,11,0.08);
    --graphsec-risk-amber-stroke: rgba(245,158,11,0.35);
    --graphsec-text:              #1A1A1A;
    --graphsec-text-muted:        #6B6561;
    --graphsec-text-faint:        #A09A94;
    --graphsec-tooltip-bg:        rgba(255,255,255,0.94);
    --graphsec-tooltip-border:    rgba(0,0,0,0.08);
    --graphsec-shadow:            0 2px 20px rgba(0,0,0,0.04);
    --graphsec-grab-line:         rgba(80,80,100,0.12);
    --graphsec-cursor-dot:        rgba(80,80,100,0.35);
    --graphsec-grey-node:         rgba(160,160,170,0.18);
    --graphsec-grey-edge:         rgba(160,160,170,0.06);
}
/* ── CSS Variables: Dark mode ── */
body.darkmode--activated {
    --graphsec-bg:                #0C0C0F;
    --graphsec-grid:              rgba(255,255,255,0.10);
    --graphsec-field-line:        rgba(107,138,255,0.08);
    --graphsec-edge-base:         rgba(160,160,200,0.18);
    --graphsec-edge-active:       rgba(160,160,200,0.40);
    --graphsec-risk-red:          rgba(248,113,113,1);
    --graphsec-risk-red-fill:     rgba(248,113,113,0.10);
    --graphsec-risk-red-stroke:   rgba(248,113,113,0.40);
    --graphsec-risk-amber:        rgba(251,191,36,1);
    --graphsec-risk-amber-fill:   rgba(251,191,36,0.10);
    --graphsec-risk-amber-stroke: rgba(251,191,36,0.45);
    --graphsec-text:              #F0EDE8;
    --graphsec-text-muted:        #9A9590;
    --graphsec-text-faint:        #5A5754;
    --graphsec-tooltip-bg:        rgba(28,28,36,0.97);
    --graphsec-tooltip-border:    rgba(255,255,255,0.14);
    --graphsec-shadow:            0 2px 20px rgba(0,0,0,0.5);
    --graphsec-grab-line:         rgba(160,160,200,0.15);
    --graphsec-cursor-dot:        rgba(160,160,200,0.4);
    --graphsec-grey-node:         rgba(120,120,140,0.12);
    --graphsec-grey-edge:         rgba(120,120,140,0.05);
}
/* ── Canvas ── */
#graphsec-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}
/* ── Tooltip ── */
#graphsec-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: var(--graphsec-tooltip-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--graphsec-tooltip-border);
    border-radius: 10px;
    padding: 10px 14px;
    max-width: 260px;
    box-shadow: var(--graphsec-shadow);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-size: 0.68rem;
    color: var(--graphsec-text);
}
#graphsec-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ── Hide on mobile ── */
@media (max-width: 768px) {
    #graphsec-canvas { display: none; }
}