.demo-main[hidden], .workflow-page[hidden] { display: none; }
.workflow-page { min-width: 0; display: flex; flex-direction: column; background: white; pointer-events: none; }
.workflow-page strong { font-weight: 500; }
.wf-muted,.wf-saved { color: #969ba4; }
.wf-tabs { display:flex; align-items:center; gap:18px; height:44px; padding:0 14px; border-bottom:1px solid #eceef2; font-size:11px; color:#92959d; }
.wf-tabs > span { display:flex; align-items:center; gap:5px; height:100%; }
.wf-tabs .selected { color:#3c444f; border-bottom:2px solid #929aa7; }
.wf-tabs small { background:#f0f1f4; padding:0 4px; border-radius:3px; }
.wf-tabs > .demo-control { height:25px; }
.wf-live { margin-left:auto; display:flex; align-items:center; gap:5px; color:#54a386; white-space:nowrap; }
.wf-live i { width:22px; height:13px; background:#56b590; border-radius:20px; position:relative; }
.wf-live i::before { content:''; position:absolute; top:2px; right:2px; width:9px; height:9px; border-radius:50%; background:white; }
.wf-workspace { display:grid; grid-template-columns:minmax(0,1fr) 205px; flex:1; min-height:530px; }
.wf-canvas { position:relative; min-width:0; background-color:#fcfcfd; background-image:radial-gradient(circle,#dce1e8 1px,transparent 1px); background-size:12px 12px; }
.wf-run-chip { position:absolute; left:16px; top:17px; display:flex; gap:12px; align-items:center; border:1px solid #e9ecf0; background:#ffffffed; border-radius:7px; padding:9px 11px; font-size:10px; z-index:1; }
.wf-run-status { color:#569b7e; }
.wf-graph { position:absolute; height:480px; left:0; right:0; top:50%; transform:translateY(-50%); }
.wf-links { position:absolute; inset:0; width:100%; height:480px; fill:none; stroke-width:1.2; }
.wf-wire { stroke:#dde3e7; }
.wf-wire-progress { stroke:#63b793; stroke-dasharray:1; stroke-dashoffset:1; }
.wf-node { position:absolute; border:1px solid #e0e5eb; border-radius:10px; background:white; box-shadow:0 2px 4px #25304a06; padding:12px; }
.wf-source { left:3.333%; width:27.5%; top:204px; height:72px; }
.wf-branch { left:46.667%; width:48%; top:calc(70px + var(--row)*130px); height:80px; padding:10px; }
.wf-node[data-state=done] { border-color:#85caaa; box-shadow:0 0 0 2px #69bb9010; }
.wf-node[data-state=active] { border-color:#99b4d9; box-shadow:0 0 0 3px #a8bfdf15; }
.wf-node-status { position:absolute; right:0; top:-24px; display:flex; align-items:center; gap:4px; padding:2px 6px; border-radius:5px; background:#f0f2f5; color:#9aa2ae; font-size:9px; white-space:nowrap; }
.wf-node-status i { width:10px; height:10px; border-radius:50%; font-style:normal; display:grid; place-items:center; }
[data-state=active] .wf-node-status { background:#edf3fc; color:#718cac; }
[data-state=active] .wf-node-status i { border:1px solid #cedbeb; border-top-color:#6c8ebc; border-right-color:#6c8ebc; }
[data-state=done] .wf-node-status { color:#489677; background:#eaf7ef; }
.wf-node-heading { display:flex; gap:7px; align-items:center; font-size:11px; white-space:nowrap; }
.wf-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:5px; background:#eef0fb; color:#8f88b1; }
.wf-node p { font-size:9px; color:#939aa5; margin:6px 0 0; white-space:nowrap; }
.wf-node-foot { display:flex; justify-content:space-between; align-items:center; gap:5px; margin-top:6px; font-size:8px; color:#a1a7b0; white-space:nowrap; }
.wf-output { color:#7f9c91; }
.wf-port { position:absolute; top:50%; left:-4px; margin-top:-4px; width:7px; height:7px; border-radius:50%; border:1px solid #a6c9b7; background:white; }
.wf-source .wf-port { left:auto; right:-4px; }
.wf-canvas-footer { position:absolute; left:16px; bottom:14px; right:16px; display:flex; justify-content:space-between; align-items:center; font-size:9px; color:#a3a9b3; }
.wf-canvas-footer > span:first-child { border:1px solid #e8ebf0; border-radius:5px; padding:5px 7px; background:white; color:#808998; }
.wf-history { border-left:1px solid #e9ecf1; padding:16px 14px; background:#fff; }
.wf-history h2 { margin:0 0 15px; font-size:13px; font-weight:500; }
.wf-history-run { display:flex; align-items:center; gap:7px; padding:9px 7px; background:#f7f8fa; border-radius:6px; font-size:11px; }
.wf-history-run small { margin-left:auto; color:#a2a7b0; font-size:8px; }
.wf-history-indicator { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#e8edf4; color:#8397b6; }
.wf-history-indicator.done { background:#63b793; color:white; }
.wf-history-caption { color:#a3a9b2; font-size:9px; margin:10px 0 16px; }
.wf-event { display:flex; gap:9px; margin-bottom:11px; color:#959ca7; }
.wf-event > i { width:13px; height:13px; border:1px solid #e0e5eb; border-radius:50%; font-style:normal; font-size:8px; display:grid; place-items:center; flex-shrink:0; }
.wf-event strong { font-size:10px; }
.wf-event p { font-size:9px; margin:3px 0; }
.wf-event small { font-size:8px; color:#adb2ba; }
.wf-event[data-state=active] { color:#718cac; }
.wf-event[data-state=done] > i { border-color:#bedfcc; color:#579a78; background:#eff8f3; }
.wf-event[data-state=done] strong { color:#566473; }
.wf-overview { border-top:1px solid #eef0f4; padding-top:12px; margin-top:8px; }
.wf-overview h3 { font-size:10px; color:#939aa5; font-weight:400; margin:0 0 12px; }
.wf-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wf-stats > div { display:flex; flex-direction:column; gap:3px; padding:9px; border:1px solid #edf0f4; border-radius:7px; }
.wf-stats > div:first-child { background:#f2faf6; border-color:#e3f2e9; color:#5b9a7d; }
.wf-stats b { font-size:19px; font-weight:500; }.wf-stats span { font-size:9px; color:#95a29f; }
.wf-summary,.wf-draft-note { font-size:9px; color:#a0a7b2; line-height:1.8; margin:10px 0 0; }
.wf-final { display:flex; gap:5px; align-items:center; color:#599b7b; font-size:10px; margin-top:15px; }
.wf-draft-note { font-size:8px; margin-top:8px; }
@media(max-width:1100px) { .wf-workspace { grid-template-columns:minmax(0,1fr) 170px; } .wf-history { padding:15px 10px; } .wf-node-foot .wf-output { display:none; } .wf-node-heading { font-size:10px; gap:4px; } .wf-node { padding:8px; } }
@media(max-width:800px) { .wf-workspace { grid-template-columns:minmax(0,1fr); } .wf-history { display:none; } }
@media(max-width:600px) { .wf-tabs { gap:12px; font-size:10px; } .wf-tabs > .demo-control,.wf-tabs > span:nth-child(3) { display:none; } .wf-node-heading { white-space:normal; font-size:9px; } .wf-node p { white-space:normal; font-size:8px; } .wf-node-foot { display:none; } .wf-source .wf-icon { display:none; } .wf-branch { left:46.667%;width:50%; } .wf-node-heading .company-monogram { width:18px;height:18px;flex-basis:18px; } }