.flow-root{padding:20px 0;max-width:1600px;margin:auto}.flow-header{display:flex;gap:20px;align-items:center}.flow-header>svg{width:54px;height:54px;color:#9571db}.flow-header h1{font-size:clamp(32px,4vw,52px);margin:10px 0}.flow-toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:16px 0}.flow-toolbar input,.flow-toolbar select,.flow-dialog select{font:inherit;padding:12px;border-radius:12px;border:1px solid #cbc4db;background:var(--surface,#fff);color:inherit;max-width:100%}.flow-toolbar input{flex:1;min-width:180px}.flow-work{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}.flow-stage{min-width:0}.flow-viewport{height:650px;overflow:auto;border:1px solid #c4b9dd;border-radius:20px;background-color:#151625;background-image:radial-gradient(#51506e 1px,transparent 1px);background-size:22px 22px;touch-action:pan-x pan-y}.flow-space{position:relative}.flow-canvas{position:relative;transform-origin:top left}.flow-lines{position:absolute;inset:0;pointer-events:none}.flow-lines>path{fill:none;stroke:#a68acd;stroke-width:2;opacity:.8}.flow-node{position:absolute;width:232px;height:150px;box-sizing:border-box;padding:10px;background:#25263d;border:1px solid #66627e;border-radius:15px;box-shadow:0 8px 20px #0003;color:#f2efff;overflow:hidden}.flow-node.selected{border:2px solid #ba8dff;box-shadow:0 0 24px #9c63f244}.flow-node-top{display:flex;align-items:center;gap:10px}.flow-node-top img{width:58px;height:40px;object-fit:cover;border-radius:7px}.flow-node-top>svg{width:25px;height:40px;color:#bda0fb}.flow-node .home-button{padding:7px 4px;background:transparent;color:#f2efff;border:0;font-size:13px;max-width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-node .home-button:last-child{font-size:11px;color:#c7b4e7;display:flex}.flow-node svg{width:17px;height:17px;flex-shrink:0}.flow-details{padding:18px;border:1px solid #cfc7dd;border-radius:18px;overflow:auto;max-height:735px}.flow-details>button{display:flex;width:100%;margin-top:9px;padding:10px;font-size:13px}.flow-details h2{font-size:22px;overflow-wrap:anywhere}.flow-details p{white-space:pre-wrap}.flow-relations{list-style:none;padding:0}.flow-relations li{border-top:1px solid #d4cde0;padding:10px 0}.flow-relations small{display:block}.flow-relations button{font-size:12px;padding:7px}.flow-timeline{padding:24px;list-style:none}.flow-timeline li{border-left:2px solid #a87cda;padding:5px 0 20px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.flow-timeline time,.flow-status,.flow-note{font-size:13px;line-height:1.5}.flow-dialog{max-width:800px;max-height:85vh;overflow:auto}.flow-preview{width:100%;max-height:65vh;object-fit:contain}.flow-empty{color:white;padding:35px;max-width:400px}.flow-nav>svg{width:24px;height:24px}.flow-dialog p{white-space:pre-wrap}.flow-dialog select{width:100%;margin:10px 0}@media(max-width:900px){.flow-work{grid-template-columns:1fr}.flow-details{max-height:none}.flow-viewport{height:500px}.flow-header>svg{width:36px}.flow-details>button{width:auto;display:inline-flex;margin-right:8px}}
.flow-toolbar[hidden],.flow-viewport[hidden],.flow-timeline[hidden]{display:none}