.flow-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;background:linear-gradient(120deg,#fff,#fff7ee)}
.flow-intro h2{font-size:26px;margin:7px 0}
.flow-intro p{color:#737984;max-width:650px;margin:0;line-height:1.6}
.flow-intro .primary{flex:none}
.flow-workspace{display:grid;grid-template-columns:minmax(350px,440px) minmax(0,1fr);gap:20px;align-items:start}
.flow-lanes{display:grid;gap:20px}
.flow-lanes .panel{padding:22px}
.flow-step{display:flex;width:100%;align-items:center;gap:13px;text-align:left;border:1px solid #e8eaee;background:#fff;border-radius:11px;padding:12px 14px;margin:8px 0;color:#273247;transition:.15s ease}
.flow-step:hover,.flow-step.selected{border-color:#ed963e;background:#fff8f0;box-shadow:0 4px 12px #e6842420}
.flow-step-index{border-radius:8px;background:#f6f7f9;color:#a1a6af;padding:7px;font:700 12px Outfit,sans-serif}
.flow-step.selected .flow-step-index{background:#f7dfc6;color:#bd6215}
.flow-step-text{display:grid;gap:1px;min-width:0;flex:1}
.flow-step-text strong{font-size:13px}
.flow-step-text small{font:600 11px Outfit,sans-serif;color:#9299a4;overflow:hidden;text-overflow:ellipsis}
.flow-step-arrow{color:#d87e25;font-size:20px}
.flow-settlement{cursor:default;background:#f8fbf9;border-color:#daeee3}.flow-settlement .flow-step-index{background:#e4f3eb;color:#288961}.flow-step-check{color:#2b9b6d;font-size:19px;font-weight:700}
.flow-preview{position:sticky;top:20px}
#flowPreviewViewport{width:100%;overflow:hidden;border:1px solid #e1e4e8;border-radius:9px;background:#f4f5f7}
#flowPreviewFrame{display:block;width:834px;height:1163px;border:0;background:white;transform-origin:top left}
.flow-preview .form-hint{font-size:11px;color:#8d939d;line-height:1.5}
@media(max-width:1100px){.flow-workspace{grid-template-columns:1fr}.flow-preview{position:static}.flow-lanes{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.flow-intro{display:block}.flow-intro .primary{margin-top:16px}.flow-lanes{grid-template-columns:1fr}}