.flow-board { position: relative; height: 74vh; overflow: hidden; margin: 12px 0 16px; cursor: grab; touch-action: none; user-select: none; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; }
.flow-board.panning { cursor: grabbing; }
html.dark .flow-board { background: #0b1220; border-color: #1e293b; }
.flow-tools { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; }
.flow-zoom { min-width: 3.2rem; text-align: center; font-size: 13px; font-weight: 600; }
.flow-hint { position: absolute; z-index: 2; left: 12px; bottom: 10px; margin: 0; font-size: 12px; color: #6b7280; pointer-events: none; }
html.dark .flow-hint { color: #94a3b8; }
.flow-svg { display: block; color: #111827; background: transparent; border: 0; transform-origin: 0 0; }
html.dark .flow-svg { color: #f8fafc; background: #0b1220; }
.flow-edge { cursor: pointer; }
.flow-edge path { fill: none; stroke: #9ca3af; stroke-width: 1.5; }
html.dark .flow-edge path { stroke: #64748b; }
.flow-edge.back path { stroke-dasharray: 5 4; }
.flow-label { font-size: 13px; font-weight: 600; fill: #374151; stroke: #f8fafc; stroke-width: 3px; paint-order: stroke; }
.flow-edge.on path { stroke: #d97706; stroke-width: 2.4; }
.flow-edge.on .flow-label { fill: #b45309; }
html.dark .flow-label { fill: #e2e8f0; stroke: #0b1220; }
html.dark .flow-edge.on path { stroke: #fbbf24; }
html.dark .flow-edge.on .flow-label { fill: #fde68a; stroke: #0b1220; }
.flow-arrow { fill: #9ca3af; }
html.dark .flow-arrow { fill: #94a3b8; }
html.dark .flow-edge.on .flow-arrow { fill: #fbbf24; }
.flow-node { cursor: grab; }
.flow-node.dragging { cursor: grabbing; }
.flow-node rect { fill: #fff; stroke: #d1d5db; }
.flow-node text { font-size: 14px; fill: currentColor; }
.flow-node text.sub { font-size: 11px; fill: #6b7280; }
.flow-node.start rect { fill: #dbeafe; stroke: #3b82f6; }
.flow-node.start text { fill: #1e3a8a; }
.flow-node.start text.sub { fill: #1d4ed8; }
.flow-node.mid rect { fill: #f1f5f9; stroke: #94a3b8; }
.flow-node.mid text { fill: #0f172a; }
.flow-node.mid text.sub { fill: #475569; }
.flow-node.done rect { fill: #dcfce7; stroke: #22c55e; }
.flow-node.done text { fill: #14532d; }
.flow-node.done text.sub { fill: #15803d; }
.flow-node.stop rect { fill: #ffe4e6; stroke: #f43f5e; }
.flow-node.stop text { fill: #881337; }
.flow-node.stop text.sub { fill: #be123c; }
.flow-node.on rect { stroke: #d97706; stroke-width: 2.5; }
html.dark .flow-node.start rect { fill: #172554; stroke: #60a5fa; }
html.dark .flow-node.start text { fill: #dbeafe; }
html.dark .flow-node.start text.sub { fill: #93c5fd; }
html.dark .flow-node.mid rect { fill: #1e293b; stroke: #94a3b8; }
html.dark .flow-node.mid text { fill: #f8fafc; }
html.dark .flow-node.mid text.sub { fill: #cbd5e1; }
html.dark .flow-node.done rect { fill: #14532d; stroke: #4ade80; }
html.dark .flow-node.done text,
html.dark .flow-node.done text.sub { fill: #dcfce7; }
html.dark .flow-node.stop rect { fill: #4c0519; stroke: #fb7185; }
html.dark .flow-node.stop text { fill: #ffe4e6; }
html.dark .flow-node.stop text.sub { fill: #fda4af; }
html.dark .flow-node.on rect { stroke: #fbbf24; stroke-width: 2.5; }
.flow-row-on td { background: #fffbeb; }
html.dark .flow-row-on td { background: #422006; }