.workflow-edge {
  fill: none;
  stroke: #b9bec9;
  stroke-width: 2;
  marker-end: url(#graphArrow);
  vector-effect: non-scaling-stroke;
  transition: stroke 180ms ease, opacity 180ms ease;
}

.workflow-edge.is-active {
  stroke: var(--violet);
  stroke-width: 2.8;
  stroke-dasharray: 8 7;
  animation: edge-flow 900ms linear infinite;
}

.workflow-edge-label rect {
  fill: #f9fafc;
  stroke: #dde1e8;
}

.workflow-edge-label text {
  fill: #767d8b;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 550;
}

.workflow-node {
  cursor: pointer;
  outline: none;
}

.workflow-node .node-card {
  fill: white;
  stroke: #d8dce4;
  stroke-width: 1.3;
  filter: drop-shadow(0 8px 11px rgba(25, 30, 42, 0.07));
  transition: stroke 160ms ease, filter 160ms ease, transform 160ms ease;
}

.workflow-node:hover .node-card,
.workflow-node:focus-visible .node-card,
.workflow-node.is-selected .node-card {
  stroke: var(--violet);
  filter: drop-shadow(0 13px 16px rgba(80, 68, 155, 0.15));
}

.workflow-node.is-active .node-card {
  stroke: var(--violet);
  stroke-width: 2.4;
}

.workflow-node .node-accent {
  transition: transform 180ms ease;
}

.workflow-node:hover .node-accent,
.workflow-node.is-active .node-accent {
  transform: scale(1.14);
}

.workflow-node .node-title {
  fill: #1b1e25;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.25px;
}

.workflow-node .node-subtitle {
  fill: #7b8290;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 450;
}

.workflow-node .node-status-ring {
  fill: none;
  stroke: #e0e3e9;
  stroke-width: 2;
}

.workflow-node.is-active .node-status-ring {
  stroke: var(--violet);
  stroke-dasharray: 4 3;
  animation: ring-turn 1.2s linear infinite;
}

.tone-sun .node-accent { fill: var(--sun); }
.tone-violet .node-accent { fill: var(--violet); }
.tone-blue .node-accent { fill: var(--blue); }
.tone-rose .node-accent { fill: var(--rose); }
.tone-mint .node-accent { fill: var(--mint); }
.tone-slate .node-accent { fill: #8c93a0; }
.tone-ink .node-accent { fill: var(--ink); }

.tone-sun .node-accent-wash { fill: var(--sun-soft); }
.tone-violet .node-accent-wash { fill: var(--violet-soft); }
.tone-blue .node-accent-wash { fill: var(--blue-soft); }
.tone-rose .node-accent-wash { fill: var(--rose-soft); }
.tone-mint .node-accent-wash { fill: var(--mint-soft); }
.tone-slate .node-accent-wash { fill: #eef0f4; }
.tone-ink .node-accent-wash { fill: #ebedf0; }

.orbit-one::after,
.orbit-two::after {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 7px rgba(139, 122, 240, 0.12);
  content: "";
  transform: translateY(-50%);
}

.orbit-one {
  animation: orbit-spin 16s linear infinite;
}

.orbit-two {
  animation: orbit-spin-reverse 11s linear infinite;
}

.orbit-two::after {
  right: -5px;
  left: auto;
  width: 10px;
  height: 10px;
  background: var(--sun);
  box-shadow: 0 0 0 7px rgba(243, 191, 91, 0.15);
}

.loop-rail {
  fill: none;
  stroke: #e1e4ea;
  stroke-width: 2;
}

.loop-accent {
  fill: none;
  stroke: url(#loopGradient);
  stroke-linecap: round;
  stroke-width: 8;
}

.loop-center rect {
  fill: #191b21;
  filter: drop-shadow(0 20px 24px rgba(23, 25, 31, 0.18));
}

.loop-center circle {
  fill: var(--sun);
}

.loop-center text {
  fill: white;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.loop-center .loop-subtext {
  fill: #aeb3be;
  font-size: 12px;
  font-weight: 450;
}

.loop-step rect {
  fill: white;
  stroke: #d9dde5;
  filter: drop-shadow(0 8px 12px rgba(22, 27, 38, 0.08));
}

.loop-step text {
  fill: #272a31;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.loop-connector {
  fill: none;
  stroke: #a5aab8;
  stroke-width: 1.5;
  marker-end: url(#loopArrow);
}

.federation-edge {
  fill: none;
  stroke: #9ea4b0;
  stroke-width: 2;
  marker-end: url(#federationArrow);
  vector-effect: non-scaling-stroke;
}

.soft-edge {
  stroke: #c0c5cf;
  stroke-dasharray: 6 7;
}

.federation-node rect,
.satellite-group rect {
  fill: white;
  stroke: #d7dbe3;
  stroke-width: 1.4;
  filter: drop-shadow(0 10px 15px rgba(23, 27, 37, 0.08));
}

.program-node rect {
  fill: #1a1c22;
  stroke: #1a1c22;
}

.program-node circle {
  fill: var(--sun);
}

.federation-node text,
.satellite-group text {
  fill: #252830;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.program-node text {
  fill: white;
}

.federation-node .federation-subtext,
.satellite-group .federation-subtext {
  fill: #7b8290;
  font-size: 12px;
  font-weight: 450;
}

.program-node .federation-subtext {
  fill: #aeb4c0;
}

.satellite-group circle:nth-of-type(1) { fill: var(--violet); }
.satellite-group circle:nth-of-type(2) { fill: var(--blue); }
.satellite-group circle:nth-of-type(3) { fill: var(--rose); }

@keyframes edge-flow {
  to { stroke-dashoffset: -30; }
}

@keyframes ring-turn {
  to { stroke-dashoffset: -28; }
}

@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-spin-reverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}