:root {
  --graph-out: #54d7ff;
  --graph-in: #ff718f;
  --graph-mutual: #f5bd4f;
  --graph-root: #ffc857;
  --graph-new: #55e69c;
  --graph-path: #b9f2ff;
  --graph-branch: #9caee8;
}

#workspace .graph-head {
  gap: 14px;
  background: linear-gradient(180deg, #121e2e, #101927);
}

#workspace .graph-card { transition: border-color .16s ease, box-shadow .16s ease; }

#workspace .graph-heading { min-width: 210px; }
#workspace .graph-context {
  margin-top: 4px;
  color: #b7c8da;
  font-size: 9.5px;
  line-height: 1.35;
}

#workspace .graph-help {
  margin-top: 3px;
  color: #74879c;
  font-size: 8.5px;
  line-height: 1.35;
}

#workspace .legend {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 11px;
  min-width: 0;
  line-height: 1.3;
}

#workspace .legend span { white-space: nowrap; }
#workspace .legend i { display: inline-block; flex: 0 0 auto; }
#workspace .legend .node-key {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  background: #172334;
  box-shadow: 0 0 0 2px #0d1623;
}

#workspace .legend .node-key.start { color: var(--graph-root); background: var(--graph-root); border-color: #fff0ae; }
#workspace .legend .node-key.selected { color: var(--graph-out); background: #177ba6; border-color: #d6f8ff; box-shadow: 0 0 0 2px #138ab7; }
#workspace .legend .node-key.revealed { color: var(--graph-new); background: #163c31; border-color: var(--graph-new); }
#workspace .legend .node-key.branch { color: var(--graph-branch); background: #283453; border-color: var(--graph-branch); border-style: double; }
#workspace .legend .edge-key {
  position: relative;
  width: 20px;
  height: 0;
  border-radius: 0;
  border-top: 2px solid currentColor;
  background: none;
}

#workspace .legend .edge-key::after {
  position: absolute;
  top: -4px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid currentColor;
  content: "";
}

#workspace .legend .edge-key.outgoing { color: var(--graph-out); }
#workspace .legend .edge-key.incoming { color: var(--graph-in); }
#workspace .legend .edge-key.mutual { color: var(--graph-mutual); }

#workspace .graph-wrap {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 46%, rgba(39, 74, 108, .18), transparent 58%),
    radial-gradient(circle, #2a3d52 .75px, transparent .9px),
    linear-gradient(180deg, #08111c, #070d16);
  background-size: auto, 18px 18px, auto;
}

#workspace #graph { cursor: grab; }
#workspace #graph:active { cursor: grabbing; }
#workspace #graph.panning { cursor: grabbing; }
#workspace .edge-layer { pointer-events: none; }
#workspace .edge {
  stroke: #536a82;
  stroke-width: 1.15;
  stroke-opacity: .48;
  opacity: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke .16s ease, stroke-opacity .16s ease, stroke-width .16s ease;
}

#workspace .edge.outgoing { stroke: var(--graph-out); stroke-width: 2.35; stroke-opacity: .98; }
#workspace .edge.incoming { stroke: var(--graph-in); stroke-width: 2.35; stroke-opacity: .98; }
#workspace .edge.mutual { stroke: var(--graph-mutual); stroke-width: 2.65; stroke-opacity: 1; }
#workspace .edge.breadcrumb-path {
  stroke: var(--graph-path);
  stroke-width: 3.4;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 3px rgba(84, 215, 255, .8));
}

#workspace .edge.breadcrumb-path.outgoing { stroke: var(--graph-out); }
#workspace .edge.breadcrumb-path.incoming { stroke: var(--graph-in); }
#workspace .edge.breadcrumb-path.mutual { stroke: var(--graph-mutual); }

#workspace .edge.dimmed { stroke-opacity: .075; }
#workspace marker path { stroke: none; }
#workspace .marker-default path { fill: #627891; }
#workspace .marker-faint path { fill: #34475b; opacity: .42; }
#workspace .marker-outgoing path { fill: var(--graph-out); }
#workspace .marker-incoming path { fill: var(--graph-in); }
#workspace .marker-mutual path { fill: var(--graph-mutual); }
#workspace .marker-path path { fill: var(--graph-path); }

#workspace .node { cursor: grab; outline: none; transition: opacity .16s ease; }
#workspace .node circle { vector-effect: non-scaling-stroke; }
#workspace .node .node-halo,
#workspace .node .node-reveal,
#workspace .node .node-ring { fill: none !important; pointer-events: none; }
#workspace .node .node-halo { stroke: transparent; stroke-width: 2; opacity: 0; }
#workspace .node .node-halo,
#workspace .node .label-bg { transition: stroke .14s ease, opacity .14s ease, fill .14s ease; }
#workspace .node .node-reveal { stroke: transparent; stroke-width: 2; opacity: 0; }
#workspace .node .node-ring { stroke: #8497ad; stroke-width: 1; opacity: .5; }
#workspace .node .node-core { fill: #53677f; stroke: #101a27; stroke-width: 2; }
#workspace .node .node-center { fill: transparent !important; stroke: none !important; pointer-events: none; }
#workspace .node .label-bg {
  fill: rgba(5, 11, 19, .86);
  stroke: rgba(101, 126, 153, .36);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

#workspace .node .node-label {
  fill: #dce7f3;
  font-size: 11px;
  font-weight: 620;
  paint-order: stroke;
  stroke: #07101a;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

#workspace .node.branch-owned:not(.root):not(.selected) .node-ring { stroke-dasharray: 2.5 2.5; }
#workspace .node.expanded-owner:not(.root):not(.selected) .node-ring { stroke: var(--graph-branch); stroke-width: 2.2; stroke-dasharray: none; opacity: 1; }
#workspace .node.expanded-owner:not(.root):not(.selected) .node-center { fill: var(--graph-branch) !important; stroke: #17213b !important; stroke-width: 1; }
#workspace .node.expanded-owner:not(.root):not(.selected) .label-bg { stroke: rgba(156, 174, 232, .72); }
#workspace .node.active-branch-member:not(.root):not(.selected) .node-halo { stroke: rgba(156, 174, 232, .62); stroke-width: 2; opacity: .38; }
#workspace .node.root .node-ring { stroke: var(--graph-root); stroke-width: 2.2; opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 200, 87, .55)); }
#workspace .node.root .node-core { fill: #c89220; stroke: #fff0ad; stroke-width: 2.2; }
#workspace .node.root .node-center { fill: #fff3bd !important; stroke: #7d5811 !important; stroke-width: 1; }
#workspace .node.selected .node-halo { stroke: var(--graph-out); stroke-width: 3; opacity: .95; filter: drop-shadow(0 0 7px rgba(84, 215, 255, .9)); }
#workspace .node.selected .node-ring { stroke: #d4f8ff; stroke-width: 2.2; opacity: 1; }
#workspace .node.selected:not(.root) .node-core { fill: #147ea9; stroke: #e3fbff; stroke-width: 2.3; }
#workspace .node.selected .label-bg { fill: rgba(10, 49, 69, .96); stroke: var(--graph-out); stroke-width: 1.2; }
#workspace .node.selected .node-label { fill: #fff; font-size: 12px; font-weight: 850; stroke-width: 3.5px; }
#workspace .node.newly-revealed:not(.root):not(.selected) .node-reveal { stroke: var(--graph-new); opacity: 1; animation: graph-reveal-ring 1.8s ease-out both; }
#workspace .node.newly-revealed:not(.root):not(.selected) .node-ring { stroke: var(--graph-new); stroke-width: 2; opacity: 1; }
#workspace .node.newly-revealed:not(.root):not(.selected) .node-core { fill: #326e57; stroke: #b6ffdb; }
#workspace .node.outgoing-neighbor .node-ring { stroke: var(--graph-out); stroke-width: 2; opacity: 1; }
#workspace .node.incoming-neighbor .node-ring { stroke: var(--graph-in); stroke-width: 2; opacity: 1; }
#workspace .node.mutual-neighbor .node-ring { stroke: var(--graph-mutual); stroke-width: 2.3; opacity: 1; }
#workspace .node.root .node-ring { stroke: var(--graph-root); stroke-width: 2.2; opacity: 1; }
#workspace .node.path-node:not(.selected):not(.root) .node-ring { stroke: var(--graph-path); stroke-width: 2.5; opacity: 1; filter: drop-shadow(0 0 3px rgba(84, 215, 255, .7)); }
#workspace .node.path-node.outgoing-neighbor:not(.selected):not(.root) .node-ring { stroke: var(--graph-out); }
#workspace .node.path-node.incoming-neighbor:not(.selected):not(.root) .node-ring { stroke: var(--graph-in); }
#workspace .node.path-node.mutual-neighbor:not(.selected):not(.root) .node-ring { stroke: var(--graph-mutual); }
#workspace .node.dimmed { opacity: .13; }
#workspace .node:hover,
#workspace .node:focus-visible { opacity: 1; }
#workspace .node:hover .node-halo,
#workspace .node:focus-visible .node-halo { stroke: #eaf8ff; stroke-width: 2; opacity: .8; filter: drop-shadow(0 0 5px rgba(84, 215, 255, .6)); }
#workspace .node:hover .node-core,
#workspace .node:focus-visible .node-core { stroke: #fff; stroke-width: 2.4; }
#workspace .node:hover .label-bg,
#workspace .node:focus-visible .label-bg { fill: rgba(8, 18, 29, .97); stroke: #9bdfff; stroke-width: 1; }
#workspace .node:hover .node-label,
#workspace .node:focus-visible .node-label { fill: #fff; font-weight: 760; }

#workspace .graph-card.has-expanded-branches { box-shadow: inset 0 1px 0 rgba(156, 174, 232, .1); }
#workspace .graph-card.branch-dragging { border-color: rgba(156, 174, 232, .68); box-shadow: inset 0 0 0 1px rgba(156, 174, 232, .16); }
#workspace #graph.branch-dragging,
#workspace #graph.branch-dragging .node { cursor: grabbing; }
#workspace .node.branch-drag-member:not(.root):not(.selected) .node-halo {
  stroke: rgba(180, 198, 255, .9);
  stroke-width: 3;
  opacity: .62;
  filter: drop-shadow(0 0 5px rgba(130, 154, 230, .55));
}
#workspace .node.branch-drag-member:not(.root) .label-bg { stroke: rgba(180, 198, 255, .9); }

#workspace #graph.full-map .node:not(.show-label) .node-label,
#workspace #graph.full-map .node:not(.show-label) .label-bg { opacity: 0; pointer-events: none; }
#workspace #graph.full-map .node:hover .node-label,
#workspace #graph.full-map .node:hover .label-bg,
#workspace #graph.full-map .node:focus-visible .node-label,
#workspace #graph.full-map .node:focus-visible .label-bg { opacity: 1; }

#workspace .detail-card { position: relative; transition: border-color .16s ease, box-shadow .16s ease; }
#workspace .detail-card.has-selection { border-color: rgba(84, 215, 255, .55); box-shadow: inset 3px 0 0 var(--graph-out), 0 0 0 1px rgba(84, 215, 255, .06); }
#workspace .detail-card.has-selection .card-head { background: linear-gradient(90deg, rgba(18, 83, 108, .26), var(--panel2) 58%); }
#workspace .detail-card.has-selection .avatar { border: 2px solid #d4f8ff; box-shadow: 0 0 0 3px #147ea9, 0 0 12px rgba(84, 215, 255, .34); background: #0d3345; color: #fff; }
#workspace .relation-actions .relation-out { border-left: 3px solid var(--graph-out); }
#workspace .relation-actions .relation-in { border-left: 3px solid var(--graph-in); }
#workspace .relation-actions .relation-mutual { border-left: 3px solid var(--graph-mutual); }
#workspace .relation-list.relation-out h4 { color: var(--graph-out); }
#workspace .relation-list.relation-in h4 { color: var(--graph-in); }
#workspace .relation-list.relation-mutual h4 { color: var(--graph-mutual); }

@keyframes graph-reveal-ring {
  0% { opacity: 0; stroke-width: 7; }
  18% { opacity: 1; }
  70% { opacity: .55; }
  100% { opacity: 0; stroke-width: 1; }
}

@media (max-width: 900px) {
  #workspace .graph-head { align-items: flex-start; flex-direction: column; }
  #workspace .legend { justify-content: flex-start; }
}

@media (max-width: 640px) {
  #workspace .graph-heading { min-width: 0; }
  #workspace .graph-context { font-size: 9px; }
  #workspace .graph-help { font-size: 8px; }
  #workspace .legend { display: flex; gap: 6px 10px; width: 100%; font-size: 8.5px; }
  #workspace .legend .edge-key { width: 17px; }
  #workspace .graph-wrap { min-height: 430px; }
  #workspace .node .node-label { font-size: 10.5px; }
  #workspace .relation-actions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #workspace .edge,
  #workspace .node,
  #workspace .graph-card,
  #workspace .detail-card { transition: none; }
  #workspace .node.newly-revealed:not(.root):not(.selected) .node-reveal { animation: none; opacity: .85; stroke-width: 2; }
}