.graph-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgb(56 189 248 / 0.10), transparent 30%),
    radial-gradient(circle at 82% 72%, rgb(167 139 250 / 0.11), transparent 34%),
    radial-gradient(circle at 50% 48%, rgb(15 23 42 / 0.20), transparent 58%),
    #070d18;
}

.graph-wrap::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgb(148 163 184 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 163 184 / 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 82%);
}

.graph-wrap > svg {
  position: relative;
  z-index: 1;
  min-height: 700px;
  cursor: grab;
  touch-action: none;
}

.graph-wrap > svg.is-panning { cursor: grabbing; }
.graph-stage { transform-origin: 0 0; }

.graph-edge {
  fill: none;
  stroke: #7890b4;
  stroke-linecap: round;
  stroke-width: 1.15;
  opacity: 0.25;
  vector-effect: non-scaling-stroke;
  transition: opacity 180ms ease, stroke 180ms ease, stroke-width 180ms ease;
}

.graph-edge.is-active {
  stroke: #67e8f9;
  stroke-width: 1.9;
  opacity: 0.82;
}

.graph-wrap.has-node-selection .graph-edge:not(.is-active) { opacity: 0.07; }

.graph-node {
  cursor: grab;
  color: #94a3b8;
  outline: none;
  transition: opacity 180ms ease;
}

.graph-node:active { cursor: grabbing; }
.graph-node.kind-ministry { color: #f8fafc; }
.graph-node.kind-hub { color: #fbbf24; }
.graph-node.kind-office { color: #38bdf8; }
.graph-node.kind-support { color: #22d3ee; }
.graph-node.kind-system { color: #a78bfa; }
.graph-node.kind-institution { color: #34d399; }
.graph-node.kind-menu { color: #fb7185; }

.node-aura {
  fill: currentColor;
  opacity: 0.09;
  transition: opacity 180ms ease, r 180ms ease;
}

.node-hit { fill: transparent; }

.node-mark {
  stroke: rgb(255 255 255 / 0.32);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 5px currentColor);
  transition: r 180ms ease, stroke-width 180ms ease, filter 180ms ease;
}

.node-label {
  fill: #dbe7f6;
  paint-order: stroke;
  stroke: #07101d;
  stroke-width: 3px;
  stroke-linejoin: round;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.025em;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.detail-label { opacity: 0.42; }
.graph-node:hover .detail-label,
.graph-node:focus-visible .detail-label,
.graph-node.is-neighbor .detail-label,
.graph-node.is-selected .detail-label,
.graph-wrap.show-all-labels .detail-label { opacity: 1; }

.graph-node:hover .node-aura,
.graph-node:focus-visible .node-aura { opacity: 0.24; }

.graph-node:hover .node-mark,
.graph-node:focus-visible .node-mark {
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px currentColor);
}

.graph-node.is-selected .node-aura { opacity: 0.36; }
.graph-node.is-selected .node-mark {
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 0 14px currentColor);
}

.graph-node.is-pinned .node-mark { stroke-dasharray: 2 2; }
.graph-wrap.has-node-selection .graph-node.is-unrelated { opacity: 0.17; }

.graph-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgb(148 163 184 / 0.16);
  border-radius: 13px;
  background: rgb(7 13 24 / 0.78);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
  backdrop-filter: blur(14px);
}

.graph-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  color: #b8c7da;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}

.graph-controls button:hover,
.graph-controls button:focus-visible {
  color: #fff;
  border-color: rgb(103 232 249 / 0.22);
  outline: none;
  background: rgb(34 211 238 / 0.09);
}

.graph-controls button[aria-pressed="true"] {
  color: #cffafe;
  border-color: rgb(103 232 249 / 0.28);
  background: rgb(8 145 178 / 0.16);
}

.graph-controls svg { width: 14px; height: 14px; min-height: 0; }

@media (max-width: 760px) {
  .graph-wrap > svg { min-height: 610px; }
  .graph-controls { right: 10px; bottom: 10px; }
  .graph-controls button { padding-inline: 9px; }
  .graph-controls button span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .graph-edge, .graph-node, .node-aura, .node-mark, .node-label { transition: none; }
}