.workflow-graph {
  --workflow-graph-zoom: 1;
  --z: var(--workflow-graph-zoom);
  --workflow-graph-ink: var(--ui-ink);
  --workflow-graph-muted: var(--ui-muted);
  --workflow-graph-line: var(--ui-line-strong);
  --workflow-graph-border: var(--ui-line);
  --workflow-graph-surface: var(--ui-surface);
  --workflow-graph-canvas: var(--ui-surface-subtle);
  --workflow-graph-accent: var(--ui-accent);
  --workflow-graph-accent-soft: var(--ui-accent-soft);
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--workflow-graph-border);
  border-radius: 8px;
  background: var(--workflow-graph-canvas);
  color: var(--workflow-graph-ink);
  isolation: isolate;
}

.workflow-graph__viewport {
  position: absolute;
  inset: 0;
  min-width: 320px;
  min-height: 420px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  outline: none;
}

.workflow-graph__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--workflow-graph-accent);
}

.workflow-graph__viewport.is-panning {
  cursor: grabbing;
  user-select: none;
}

.workflow-graph__scene {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
}

.workflow-graph__edges,
.workflow-graph__nodes {
  position: absolute;
  inset: 0 auto auto 0;
}

.workflow-graph__edges {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.workflow-graph__nodes {
  z-index: 1;
}

.workflow-graph__edge {
  fill: none;
  stroke: var(--workflow-graph-line);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}

.workflow-graph__arrow {
  fill: var(--workflow-graph-line);
}

.workflow-graph__edge-group[data-status="active"] .workflow-graph__edge,
.workflow-graph__edge-group[data-status="running"] .workflow-graph__edge {
  stroke: var(--workflow-graph-accent);
  stroke-width: 2.25;
}

.workflow-graph__edge-group[data-status="active"] .workflow-graph__arrow,
.workflow-graph__edge-group[data-status="running"] .workflow-graph__arrow {
  fill: var(--workflow-graph-accent);
}

.workflow-graph__edge-group[data-variant="dashed"] .workflow-graph__edge,
.workflow-graph__edge-group[data-status="pending"] .workflow-graph__edge {
  stroke-dasharray: 6 5;
}

.workflow-graph__edge-label rect {
  fill: var(--workflow-graph-canvas);
  stroke: var(--workflow-graph-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.workflow-graph__edge-label text {
  fill: #536159;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.workflow-graph__node {
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--node-x, 0px) * var(--z));
  top: calc(var(--node-y, 0px) * var(--z));
  width: calc(var(--node-w, 236px) * var(--z));
  height: calc(var(--node-h, 136px) * var(--z));
  padding: calc(14px * var(--z)) calc(15px * var(--z)) calc(15px * var(--z));
  overflow: hidden;
  border: 1px solid #ced9d2;
  border-radius: calc(7px * var(--z));
  background: var(--workflow-graph-surface);
  box-shadow: 0 8px 24px rgba(24, 52, 36, 0.08);
  cursor: pointer;
  outline: none;
  font-size: calc(14px * var(--z));
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.workflow-graph__node:hover {
  border-color: #98aa9f;
  box-shadow: 0 10px 26px rgba(24, 52, 36, 0.12);
  transform: translateY(-1px);
}

.workflow-graph__node:focus-visible,
.workflow-graph__node.is-selected {
  border-color: var(--workflow-graph-accent);
  box-shadow: 0 0 0 2px rgba(24, 121, 78, 0.16), 0 10px 26px rgba(24, 52, 36, 0.1);
}

.workflow-graph__node[data-variant="primary"] {
  border-top: calc(3px * var(--z)) solid var(--workflow-graph-accent);
  padding-top: calc(12px * var(--z));
}

.workflow-graph__node[data-variant="output"] {
  border-color: #9bc6ad;
  background: #fbfefc;
}

.workflow-graph__node[data-variant="muted"] {
  background: #f7f9f8;
  box-shadow: none;
}

.workflow-graph__node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: calc(20px * var(--z));
  gap: calc(8px * var(--z));
  margin-bottom: calc(12px * var(--z));
}

.workflow-graph__eyebrow {
  overflow: hidden;
  color: #728078;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(10px * var(--z));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workflow-graph__status {
  flex: 0 0 auto;
  max-width: calc(86px * var(--z));
  padding: calc(4px * var(--z)) calc(7px * var(--z));
  overflow: hidden;
  border-radius: calc(6px * var(--z));
  background: #eef2ef;
  color: #5f6d65;
  font-size: calc(10px * var(--z));
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-graph__node[data-status-tone="active"] .workflow-graph__status {
  background: var(--workflow-graph-accent-soft);
  color: #11663f;
}

.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status {
  background: #e8f4ed;
  color: #176942;
}

.workflow-graph__node[data-status-tone="warning"] .workflow-graph__status {
  background: #fff3d6;
  color: #8a5b00;
}

.workflow-graph__node[data-status-tone="error"] .workflow-graph__status {
  background: #fbe9e7;
  color: #a13d32;
}

/* The graph consumes the shared theme instead of maintaining a second brand. */
.workflow-graph__node[data-status-tone="active"] .workflow-graph__status,
.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status {
  background: var(--workflow-graph-accent-soft);
  color: var(--ui-accent-strong);
}
.workflow-graph__node[data-variant="output"] {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface);
}

.workflow-graph__node-body {
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(72px * var(--z));
  gap: calc(12px * var(--z));
}

.workflow-graph__thumbnail,
.workflow-graph__icon,
.workflow-graph__index {
  flex: 0 0 calc(54px * var(--z));
  box-sizing: border-box;
  width: calc(54px * var(--z));
  height: calc(54px * var(--z));
  border: 1px solid #dce5df;
  border-radius: calc(6px * var(--z));
  background: #edf3ef;
}

.workflow-graph__thumbnail {
  display: block;
  object-fit: cover;
}

.workflow-graph__icon,
.workflow-graph__index {
  display: grid;
  place-items: center;
  color: var(--workflow-graph-accent);
}

.workflow-graph__icon svg {
  width: calc(22px * var(--z));
  height: calc(22px * var(--z));
  stroke-width: 1.75;
}

.workflow-graph__index {
  color: #748179;
  font-family: "Avenir Next", "PingFang SC", sans-serif;
  font-size: calc(14px * var(--z));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.workflow-graph__copy {
  min-width: 0;
}

.workflow-graph__copy h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--workflow-graph-ink);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(14px * var(--z));
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workflow-graph__copy p {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--workflow-graph-muted);
  font-size: calc(11px * var(--z));
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workflow-graph__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--workflow-graph-muted);
  font-size: 13px;
  letter-spacing: 0;
}

.workflow-graph__empty-mark {
  position: relative;
  width: 54px;
  height: 34px;
}

.workflow-graph__empty-mark::before,
.workflow-graph__empty-mark::after {
  position: absolute;
  top: 8px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid #a9b8af;
  border-radius: 5px;
  background: #ffffff;
  content: "";
}

.workflow-graph__empty-mark::before {
  left: 0;
}

.workflow-graph__empty-mark::after {
  right: 0;
}

.workflow-graph__empty-mark {
  border-bottom: 1px solid #a9b8af;
}

@media (max-width: 640px) {
  .workflow-graph,
  .workflow-graph__viewport {
    min-height: 360px;
  }

  .workflow-graph__node {
    box-shadow: 0 6px 18px rgba(24, 52, 36, 0.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-graph__node {
    transition: none;
  }
}

/* Shared theme bridge. The graph keeps its geometry local and inherits all
   brand, status, focus and radius decisions from theme.css. */
.workflow-graph__edge-label text,
.workflow-graph__eyebrow,
.workflow-graph__index { color: var(--ui-muted); fill: var(--ui-muted); }
.workflow-graph__node { border-color: var(--ui-line); border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }
.workflow-graph__node:hover { border-color: var(--ui-focus); }
.workflow-graph__node:focus-visible,
.workflow-graph__node.is-selected { border-color: var(--ui-accent); box-shadow: var(--ui-shadow-focus), var(--ui-shadow-card); }
.workflow-graph__node[data-variant="output"] { border-color: var(--ui-line-strong); background: var(--ui-surface-raised); }
.workflow-graph__node[data-variant="muted"] { background: var(--ui-surface-subtle); }
.workflow-graph__status { border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); color: var(--ui-muted); }
.workflow-graph__node[data-status-tone="active"] .workflow-graph__status,
.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status { background: var(--ui-success-soft); color: var(--ui-success); }
.workflow-graph__node[data-status-tone="warning"] .workflow-graph__status { background: var(--ui-warning-soft); color: var(--ui-warning); }
.workflow-graph__node[data-status-tone="error"] .workflow-graph__status { background: var(--ui-danger-soft); color: var(--ui-danger); }
.workflow-graph__thumbnail,
.workflow-graph__icon,
.workflow-graph__index { border-color: var(--ui-line); border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); }
.workflow-graph__empty-mark::before,
.workflow-graph__empty-mark::after { border-color: var(--ui-line-strong); border-radius: var(--ui-radius-xs); background: var(--ui-surface); }
.workflow-graph__empty-mark { border-bottom-color: var(--ui-line-strong); }

/* Graph presentation follows the same low-contrast canvas and quiet cards. */
html,body{overflow-x:hidden}
.workflow-graph{min-width:0;border-color:var(--ui-line);border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle);color:var(--ui-ink)}
.workflow-graph__viewport{min-width:0;outline:none}
.workflow-graph__viewport:focus-visible{box-shadow:inset 0 0 0 3px var(--ui-focus-ring)}
.workflow-graph__edge{stroke:var(--ui-line-strong);stroke-width:1.5}
.workflow-graph__arrow{fill:var(--ui-line-strong)}
.workflow-graph__edge-group[data-status="active"] .workflow-graph__edge,.workflow-graph__edge-group[data-status="running"] .workflow-graph__edge{stroke:var(--ui-accent);stroke-width:2}
.workflow-graph__edge-group[data-status="active"] .workflow-graph__arrow,.workflow-graph__edge-group[data-status="running"] .workflow-graph__arrow{fill:var(--ui-accent)}
.workflow-graph__edge-label rect{fill:var(--ui-surface-subtle);stroke:var(--ui-line)}
.workflow-graph__edge-label text{fill:var(--ui-muted);font-size:10px;font-weight:600}
.workflow-graph__node{border-color:var(--ui-line);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-card);transition:border-color var(--ui-duration-fast) var(--ui-ease-standard),box-shadow var(--ui-duration-fast) var(--ui-ease-standard),transform var(--ui-duration-fast) var(--ui-ease-standard)}
.workflow-graph__node:hover{border-color:var(--ui-focus);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card);transform:translateY(-1px)}
.workflow-graph__node:focus-visible,.workflow-graph__node.is-selected{border-color:var(--ui-accent);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card)}
.workflow-graph__node[data-variant="primary"]{border-top-color:var(--ui-accent)}
.workflow-graph__node[data-variant="output"]{border-color:var(--ui-line-strong);background:var(--ui-surface-raised)}
.workflow-graph__node[data-variant="muted"]{background:var(--ui-surface-subtle);box-shadow:none}
.workflow-graph__eyebrow{color:var(--ui-muted);font-size:calc(10px * var(--z))}
.workflow-graph__status{background:var(--ui-surface-muted);color:var(--ui-muted);border-radius:var(--ui-radius-pill)}
.workflow-graph__node[data-status-tone="active"] .workflow-graph__status,.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}
.workflow-graph__node[data-status-tone="warning"] .workflow-graph__status{background:var(--ui-warning-soft);color:var(--ui-warning)}
.workflow-graph__node[data-status-tone="error"] .workflow-graph__status{background:var(--ui-danger-soft);color:var(--ui-danger)}
.workflow-graph__thumbnail,.workflow-graph__icon,.workflow-graph__index{border-color:var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}
.workflow-graph__icon{color:var(--ui-accent);background:var(--ui-accent-soft)}
.workflow-graph__index{color:var(--ui-muted)}
.workflow-graph__copy h3{color:var(--ui-ink-strong)}
.workflow-graph__copy p,.workflow-graph__empty{color:var(--ui-muted)}
.workflow-graph__empty-mark::before,.workflow-graph__empty-mark::after{border-color:var(--ui-line-strong);border-radius:var(--ui-radius-xs);background:var(--ui-surface)}
.workflow-graph__empty-mark{border-bottom-color:var(--ui-line-strong)}
@media(max-width:640px){.workflow-graph,.workflow-graph__viewport{min-height:320px}.workflow-graph__node{box-shadow:var(--ui-shadow-subtle)}}

/* SVG icon defaults must never outline Chinese graph labels. */
.workflow-graph__edges { stroke: none; }
.workflow-graph__edge-label text { stroke: none; }