.c4it-flow-sim{border:1px solid #d8dee4;border-radius:8px;padding:16px;margin:24px 0;background:#fff;color:#20242a;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.c4it-flow-sim *{box-sizing:border-box}
.c4it-flow-sim [hidden]{display:none!important}
.c4it-flow-sim__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.c4it-flow-sim__tab,.c4it-flow-sim button{border:1px solid #b9c2cf;background:#f6f8fa;color:#20242a;border-radius:6px;padding:8px 12px;font-weight:700;cursor:pointer}
.c4it-flow-sim__tab.is-active,.c4it-flow-sim button:hover{background:#0f766e;border-color:#0f766e;color:#fff}
.c4it-flow-sim__layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(260px,1fr);gap:18px;align-items:start}
.c4it-flow-sim__panel{border:1px solid #d8dee4;border-radius:8px;padding:14px;background:#f8fafc}
.c4it-flow-sim__heading{font-size:18px;margin:0 0 12px}
.c4it-flow-sim__controls{display:grid;gap:10px}
.c4it-flow-sim label{display:grid;gap:5px;font-weight:700}
.c4it-flow-sim input{width:100%;border:1px solid #b9c2cf;border-radius:6px;padding:8px;font-size:16px}
.c4it-flow-sim__note{margin:4px 0 0;color:#4b5563;font-size:14px;line-height:1.6}
.c4it-flow-sim__current{border:1px solid #b9c2cf;border-radius:6px;background:#fff;padding:10px 12px;font-weight:700}
.c4it-flow-sim__current strong{font-size:22px;color:#0f766e}
.c4it-flow-sim__actions{display:grid;gap:8px;margin-top:14px}
.c4it-flow-sim__status{min-height:3.5em;margin-top:12px;padding:10px;border-radius:6px;background:#fff;border:1px solid #d8dee4;line-height:1.6}
.c4it-flow-sim__chart{overflow:visible;padding:8px;min-width:0}
.c4it-flow-chart{display:grid;justify-items:center;gap:8px;width:100%;max-width:480px;margin:0 auto;min-width:0}
.c4it-flow-svg{display:block;width:100%;max-width:430px;height:auto;margin:0 auto;overflow:visible}
.c4it-flow-svg marker path{fill:#64748b}
.c4it-flow-svg-line,.c4it-flow-svg-return,.c4it-flow-svg-join{fill:none;stroke:#64748b;stroke-width:3}
.c4it-flow-svg-line--seq{marker-end:url(#c4it-arrow-seq)}
.c4it-flow-svg-line--branch{marker-end:url(#c4it-arrow-branch)}
.c4it-flow-svg-line--loop{marker-end:url(#c4it-arrow-loop)}
.c4it-flow-svg-node rect,.c4it-flow-svg-node polygon{fill:#f8fafc;stroke:#64748b;stroke-width:3}
.c4it-flow-svg-node--term rect{fill:#eef6ff}
.c4it-flow-svg-node text{fill:#20242a;font-size:18px;font-weight:700;text-anchor:middle;dominant-baseline:middle}
.c4it-flow-svg-label{fill:#475569;font-size:16px;font-weight:700}
.c4it-flow-svg-note{fill:#475569;font-size:13px;font-weight:700}
.c4it-flow-svg-node.is-active rect,.c4it-flow-svg-node.is-active polygon{fill:#fff1f2;stroke:#dc2626;stroke-width:4}
@media (max-width:900px){.c4it-flow-sim__layout{grid-template-columns:1fr}.c4it-flow-chart{max-width:420px}}