.workflow-panel {
  padding: 0;
  overflow: hidden;
}

.workflow-legend {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px 24px;
  background: #f8faff;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.workflow-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.agent-dot { background: #7257df; }
.system-dot { background: #4c85c5; }
.gate-dot { background: #db8b31; }
.output-dot { background: #15946d; }

.workflow-lane {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 24px;
}

.workflow-lane:nth-of-type(4) { background: #fbfcff; }

.lane-title {
  padding-top: 6px;
  display: flex;
  flex-direction: column;
}

.lane-title span {
  color: #315bea;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.lane-title b {
  font-size: 15px;
  margin-top: 3px;
}

.lane-title small {
  color: var(--muted);
  margin-top: 4px;
}

.lane-flow {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.workflow-node {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid;
  border-radius: 14px;
  background: #fff;
}

.workflow-node b {
  display: block;
  font-size: 14px;
  margin: 4px 0 6px;
}

.workflow-node small {
  display: block;
  color: #66738a;
  font-size: 11px;
  line-height: 1.42;
}

.workflow-node small strong { color: #394967; }
.node-type { font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.agent-node { border-color: #d9d0fb; background: linear-gradient(145deg, #faf8ff, #f3f0ff); }
.agent-node .node-type { color: #684dc8; }
.system-node { border-color: #ccdef1; background: linear-gradient(145deg, #f9fcff, #eef6fd); }
.system-node .node-type { color: #316da9; }
.gate-node { border-color: #f0d4ae; background: linear-gradient(145deg, #fffdf8, #fff5e7); }
.gate-node .node-type { color: #ad6716; }
.output-node { border-color: #bce2d4; background: linear-gradient(145deg, #f7fffc, #e8f8f2); }
.output-node .node-type { color: #117858; }

.dual-agent::before,
.dual-agent::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 42%;
  height: 5px;
  border-radius: 5px 5px 0 0;
}

.dual-agent::before { left: 5%; background: #765be1; }
.dual-agent::after { right: 5%; background: #a08bef; }

.flow-arrow {
  width: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  color: #8391a8;
  font-size: 18px;
  font-weight: 700;
}

.lane-bridge {
  height: 28px;
  display: grid;
  place-items: center;
  color: #315bea;
  font-size: 18px;
  border-top: 1px dashed #d9e1ed;
  border-bottom: 1px dashed #d9e1ed;
  background: #f7f9fd;
}

.final-flow .workflow-node { padding-left: 11px; padding-right: 11px; }
.final-flow .flow-arrow { width: 22px; flex-basis: 22px; }

.workflow-outcomes {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
  padding: 18px 24px 24px;
  background: #101c35;
}

.outcome-card {
  padding: 14px 15px;
  border-radius: 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
}

.outcome-card span {
  display: block;
  font-size: 9px;
  letter-spacing: .13em;
  font-weight: 900;
  margin-bottom: 5px;
}

.outcome-card b { font-size: 12px; }
.trace-outcome { background: #1c3764; }
.quarantine-outcome { background: #512537; }
.frozen-outcome { background: #183f3a; }

@media (max-width: 1180px) {
  .workflow-lane { grid-template-columns: 125px minmax(0, 1fr); }
  .lane-flow { overflow-x: auto; padding: 5px 0 10px; }
  .workflow-node { flex: 0 0 210px; }
}

@media (max-width: 760px) {
  .workflow-legend { justify-content: flex-start; gap: 10px 16px; padding: 15px 18px; }
  .workflow-lane { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .lane-title { padding: 0; }
  .lane-flow { flex-direction: column; overflow: visible; }
  .workflow-node { flex-basis: auto; width: 100%; }
  .flow-arrow { width: 100%; height: 28px; flex-basis: 28px; transform: rotate(90deg); }
  .workflow-outcomes { grid-template-columns: 1fr; padding: 16px 18px 18px; }
}