:root{--bg:#0c100b;--fg:#f5f7ec;--accent:#c7f76d;--surface:#171f13}
:root{--radius:16px}.workflow-stage{background:linear-gradient(145deg,#222d1b,#12180e);padding:30px;border:1px solid #c7f76d55;border-radius:18px;box-shadow:0 20px 100px #aaff1911;transform:perspective(1000px) rotateY(-5deg)}.flow-top{display:flex;gap:12px;align-items:center;margin-bottom:30px}.flow-top .mono{font-size:9px}.flow-nodes{display:flex;flex-direction:column;gap:24px;margin-bottom:28px}.flow-node{display:flex;align-items:center;gap:17px;padding:17px;border:1px solid var(--line);border-radius:10px;position:relative;background:#10160b}.flow-node:not(:last-child):after{content:"";position:absolute;width:1px;height:25px;left:35px;bottom:-25px;background:var(--accent)}.node-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);color:var(--accent);font-size:22px}.flow-node small{display:block;color:var(--muted);font:9px monospace;margin-top:4px}.node-state{margin-left:auto;color:var(--accent)}.flow-node.active{border-color:var(--accent);box-shadow:0 0 22px #c7f76d18}.flow-node.done .node-state{font-size:0}.flow-node.done .node-state:after{content:"✓";font-size:16px}@media(max-width:680px){.workflow-stage{margin-top:45px;transform:none;padding:22px}}