.visual-flow{height:270vh;background:#eef4fa;position:relative;color:#17364c}.visual-sticky{position:sticky;top:90px;height:calc(100svh - 90px);padding:25px 5vw;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.visual-heading{text-align:center}.visual-heading h2{font-size:clamp(30px,3.4vw,48px);margin:13px 0;line-height:1.1}.visual-heading h2 span{color:#167bcd}.visual-heading p{font-size:13px;color:#7b92a6;margin:0 0 18px}.visual-stepper{display:flex;justify-content:center;gap:8px;margin-bottom:25px}.visual-stepper span{font-size:10px;padding:8px 15px;border:1px solid #cedce9;border-radius:24px;color:#7994a9}.visual-stepper .active{background:#137ed0;border-color:#137ed0;color:white}.report-flow-grid,.operation-flow-grid{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:center;max-width:1150px;width:100%;margin:0 auto}.visual-card{background:#fff;border:1px solid #d5e3ed;border-radius:20px;padding:22px;box-shadow:0 15px 40px #16476c0b;min-width:0}.visual-card>small{font-size:9px;letter-spacing:1px;color:#7e95a8}.visual-card h3{font-size:24px;line-height:1.2;margin:12px 0 20px}.calendar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.calendar-grid span{font-size:10px;text-align:center;border-radius:5px;padding:5px 0;background:#edf3f8;color:#8297a8}.calendar-grid .selected{background:#d8ebff;color:#1268af}.period-range{font-size:9px;margin-top:15px;display:flex;justify-content:space-between;color:#7c9ab3}.period-range i{font-style:normal;color:#2a8cd5}.visual-wire{height:1px;background:#8ab6d6;position:relative}.visual-wire b{position:absolute;right:0;top:-16px;font-size:24px;color:#308ece}.visual-wire i{position:absolute;width:7px;height:7px;border-radius:50%;background:#1a9ee8;top:-3px;left:calc(var(--flow,0)*85%)}.pdf-label{display:flex;align-items:center;gap:10px}.pdf-label>span{font-size:10px;font-weight:800;padding:7px;background:#ffedef;border-radius:6px;color:#d44b65}.pdf-label small{font-size:8px;color:#8b9ba8}.pdf-stats{display:flex;gap:12px}.pdf-stats span{font-size:9px;color:#7b93a6}.pdf-stats b{display:block;color:#204563;font-size:15px;margin-top:5px}.pdf-bars{height:70px;display:flex;gap:7px;align-items:flex-end;border-bottom:1px solid #d8e4ed;margin-top:18px}.pdf-bars i{flex:1;height:calc(var(--bar)*var(--chart,0));background:#3591df;border-radius:4px 4px 0 0}.pdf-bars i:last-child{background:#40b59b}.pdf-lines{display:grid;gap:7px;margin:17px 0}.pdf-lines i{height:3px;background:#e3ecf3;width:90%}.pdf-lines i:last-child{width:65%}.pdf-ready{font-size:10px;color:#238969}.report-clock{font-size:44px;font-weight:700;letter-spacing:-2px;line-height:1.3;margin:10px 0;color:#1880ce;font-variant-numeric:tabular-nums}.delivery-recipient{font-size:12px;color:#718b9e}.delivery-message{background:#eaf8f2;border:1px solid #c8e6d8;border-radius:12px;padding:14px;margin-top:18px;opacity:0}.delivery-message>span{font-size:24px;color:#259d79}.delivery-message h3{font-size:17px;margin:7px 0}.delivery-message p{font-size:10px;color:#738f87;margin:7px 0}.delivery-message>b{font-size:10px;display:block;border-top:1px solid #c9e3d8;padding-top:10px}.delivery-message b span{float:right}.delivery-status{font-size:10px;color:#8a9eab;margin-top:15px}.visual-outcome{text-align:center;color:#3c7da9;font-size:14px;font-weight:600;margin:25px 0 0}.visual-progress{position:absolute;bottom:0;height:3px;left:0;right:0;background:#cfdfec}.visual-progress i{display:block;height:100%;background:#2491df;width:0}.operation-flow{background:#0b2134;color:#ecf5ff}.operation-flow .visual-heading h2 span{color:#7dc2f8}.operation-flow .visual-stepper span{border-color:#31536f}.operation-flow-grid{grid-template-columns:1fr 75px .85fr 40px 1.4fr}.visual-branches{display:grid;gap:12px}.visual-branches article{display:flex;align-items:center;gap:13px;border:1px solid #2c4b65;border-radius:13px;background:#112e46;padding:16px}.branch-building{font-size:27px;color:#71b7ec}.visual-branches small{font-size:8px;color:#7299b8;display:block}.visual-branches strong{font-size:16px;display:block}.branch-state{font-size:9px;color:#69cfb5}.operation-stream svg{width:100%;height:240px;overflow:visible}.operation-stream path{stroke:#3d7fae;stroke-width:1.5;fill:none;stroke-dasharray:4 5}.operation-stream circle{fill:#72d6f6}.operation-hub{aspect-ratio:1;border:1px solid #4188ba;border-radius:50%;background:radial-gradient(#1c5278,#0d2c43);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 45px #208fd220}.operation-hub img{width:65px;height:65px}.operation-hub strong{font-size:12px;margin-top:8px}.operation-hub small{font-size:8px;color:#86b3d3}.operation-event{color:#20425e;min-height:290px}.operation-event h3{font-size:22px}.op-data-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #e7eef4;padding:13px 0;font-size:10px}.op-data-row b{color:#268f76;font-size:9px}.op-action{background:#e9f6f1;color:#238569;padding:12px 8px;border-radius:7px;font-size:10px;text-align:center;margin-top:15px}.op-message{background:#edf4fb;border-radius:12px;padding:16px}.op-message small{font-size:9px;color:#5286af}.op-message p{font-size:13px;margin:8px 0 0}.op-message.received{margin:12px 0;background:#e8f7ef;color:#298a6d;font-size:11px}.op-tags{display:flex;gap:6px}.op-tags span{padding:5px 10px;border:1px solid #d3e1ed;border-radius:16px;font-size:10px;color:#7793a8}.op-release{display:flex;gap:12px;margin:17px 0;align-items:center}.op-release>span{font-size:26px;color:#2488ce}.op-release strong{font-size:12px;display:block}.op-release small{font-size:10px;color:#8197a8}.operation-flow .visual-outcome{color:#8bc4e5}.operation-event-body[hidden]{display:none}
@media(max-width:900px){.visual-card{padding:16px}.report-flow-grid{grid-template-columns:1fr 22px 1fr 22px 1fr}.operation-flow-grid{grid-template-columns:1fr 35px .8fr 20px 1.4fr}.operation-hub img{width:45px;height:45px}.operation-hub small{font-size:6px}.visual-branches article{padding:12px 8px}.visual-card h3{font-size:20px}.pdf-stats{display:block}.pdf-stats span{display:inline-block;margin-right:7px}.pdf-stats b{font-size:12px}.operation-event h3{font-size:19px}.op-data-row{font-size:9px}.visual-branches strong{font-size:14px}}
@media(max-width:600px){.visual-flow{height:320vh}.visual-sticky{top:74px;height:calc(100svh - 74px);padding:20px 14px}.visual-heading h2{font-size:29px}.visual-heading .section-index{font-size:9px}.visual-heading p{font-size:11px;margin-bottom:12px}.visual-stepper{gap:5px;margin-bottom:15px}.visual-stepper span{padding:6px 8px;font-size:8px}.report-flow-grid{grid-template-columns:1fr 18px 1fr;gap:0}.report-flow-grid .delivery-card{grid-column:1/-1;margin-top:12px;display:grid;grid-template-columns:.7fr 1fr;gap:0 12px;padding:12px}.report-flow-grid>.visual-wire:nth-child(4){display:none}.delivery-card>small{grid-column:1}.report-clock{font-size:28px;grid-column:1;margin:3px 0}.delivery-recipient{grid-column:1;font-size:10px}.delivery-message{grid-column:2;grid-row:1/5;margin:0;padding:9px}.delivery-message h3{font-size:14px}.delivery-message>span{display:none}.delivery-status{font-size:8px;margin-top:6px}.visual-card{padding:12px}.visual-card h3{font-size:18px;margin:7px 0 12px}.calendar-grid{gap:4px}.calendar-grid span{font-size:8px;padding:3px 0}.period-range{font-size:7px}.period-range i{display:none}.pdf-bars{height:45px;margin-top:10px}.pdf-lines{margin:10px 0;gap:5px}.pdf-ready{font-size:8px}.pdf-label{gap:5px}.pdf-label small{font-size:6px}.pdf-stats b{font-size:11px}.visual-outcome{font-size:11px;margin-top:15px}.operation-flow-grid{grid-template-columns:1fr 35px 1fr}.operation-flow-grid>.visual-wire{display:none}.operation-event{grid-column:1/-1;margin-top:12px;min-height:210px}.visual-branches{gap:5px}.visual-branches article{padding:7px 10px;gap:8px}.visual-branches strong{font-size:12px}.branch-building{font-size:18px}.branch-state{font-size:7px}.operation-stream svg{height:160px}.operation-hub{width:125px;justify-self:center}.operation-hub img{width:45px;height:45px}.operation-hub small{font-size:7px}.operation-event h3{font-size:18px;margin:6px 0 10px}.op-data-row{padding:7px 0}.op-message{padding:10px}.op-message p{font-size:11px}.op-action{margin-top:9px;padding:8px}.op-release{margin:10px 0}.operation-event>small{font-size:8px}}
