.flow-mobile{display:none}
.order-flow{--flow-ink:var(--text,#25312c);--flow-soft:var(--panel,#f7f8f5);--flow-line:var(--line,#dfe5dc);border:1px solid var(--flow-line);border-radius:20px;overflow:hidden;margin:24px 0;background:var(--bg,#fff)}
.flow-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;border-bottom:1px solid var(--flow-line)}
.flow-tabs{display:flex;gap:6px;background:var(--flow-soft);padding:5px;border-radius:12px}.flow-tabs button{padding:8px 16px;border-radius:8px;font-weight:700;font-size:14px}.flow-tabs [aria-selected=true]{background:var(--flow-ink);color:var(--bg,#fff)}
.flow-expand{border:1px solid var(--flow-line);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:650}.flow-scroll{overflow-x:auto;padding:12px}.order-flow svg{display:block;width:100%;min-width:680px;height:auto;color:var(--flow-ink);font-family:system-ui,sans-serif}.flow-lane{fill:var(--flow-soft);stroke:var(--flow-line)}.flow-owner{fill:var(--flow-ink);font-size:16px;font-weight:750;letter-spacing:1px}.flow-sub{fill:var(--muted,#536153);font-size:13px}.flow-node rect{fill:var(--bg,#fff);stroke:var(--flow-line);stroke-width:2}.flow-node.customer rect{stroke:#9dafa1}.flow-node.payment rect{stroke:#c6af86}.flow-node.courier rect{stroke:#aaa1c8}.flow-title{fill:var(--flow-ink);font-size:16px;font-weight:700}.flow-badge{fill:var(--flow-ink)}.flow-num{fill:var(--bg,#fff);font-size:13px;font-weight:700}.flow-arrow{fill:none;stroke:currentColor;stroke-width:2.1;opacity:.65}.flow-edge-label{fill:var(--muted,#536153);font-size:13px;font-weight:600}.flow-note{padding:0 18px 16px;margin:0;color:var(--muted,#536153);font-size:13px}.flow-legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 18px 16px;font-size:12px;color:var(--muted,#536153)}.flow-legend span:before{content:'';display:inline-block;width:8px;height:8px;background:var(--mark);border-radius:50%;margin-right:6px}.flow-links{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.flow-links a{padding:8px 12px;border:1px solid var(--flow-line,var(--line,#dfe5dc));border-radius:9px;font-size:13px}.flow-links a:hover{background:var(--panel,#f7f8f5)}.flow-callout{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;margin:24px 0;background:var(--panel);font-weight:650}.flow-callout span{white-space:nowrap}.flow-modal{color:var(--text,#25312c);background:var(--bg,#fff);border:1px solid var(--line,#dfe5dc);border-radius:16px;padding:14px;width:calc(100vw - 36px);max-width:1500px;max-height:94vh}.flow-modal::backdrop{background:#18251fd6}.flow-modal header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:4px 8px 12px}.flow-modal header button{padding:8px 12px;border:1px solid var(--line,#dfe5dc);border-radius:9px}.flow-modal svg{min-width:1120px}.flow-modal .flow-scroll{max-height:75vh}.flow-modal .order-flow{margin:0;border:0}.flow-modal .flow-toolbar{display:none}@media(max-width:700px){.flow-panel>.flow-scroll{display:none}.flow-mobile{display:block;list-style:none;padding:8px 18px 20px;margin:0}.flow-mobile li{position:relative;margin:12px 0 32px;padding:15px;border:1px solid var(--flow-line);border-left:3px solid #9dafa1;border-radius:12px;background:var(--flow-soft)}.flow-mobile li.payment{border-left-color:#c6af86}.flow-mobile li.courier{border-left-color:#aaa1c8}.flow-mobile li.store{border-left-color:#687d66}.flow-mobile li:not(:last-child):after{content:"↓";position:absolute;bottom:-31px;left:calc(50% - 8px);font-size:22px;color:var(--muted,#536153)}.flow-mobile li:last-child{margin-bottom:0}.flow-mobile-owner{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:750;color:var(--muted,#536153);margin-bottom:5px}.flow-mobile strong{display:block;font-size:15px}.flow-mobile p{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--muted,#536153)}.flow-callout{align-items:flex-start;flex-direction:column;gap:4px}.flow-toolbar{padding:12px}.flow-tabs button{padding:8px 13px}.flow-note{font-size:12px}.order-flow svg{min-width:900px}}@media print{.flow-mobile{display:none!important}.flow-panel>.flow-scroll{display:block!important}.flow-toolbar,.flow-expand,.flow-note{display:none}.order-flow svg{min-width:0!important}.flow-scroll{overflow:visible}.order-flow{break-inside:avoid}.flow-panel[hidden]{display:block!important}.flow-modal{display:none}}

.order-flow{border-color:var(--line,#dfe1e9);box-shadow:0 16px 42px #1516250a}.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;background:linear-gradient(110deg,#171922,#202030);color:#eef0f7}.flow-heading strong{font:700 11px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}.flow-heading span{font-size:12px;color:#b0b5c6}.flow-heading strong:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#b7a2ff;box-shadow:0 0 12px #a692ff80;margin-right:10px}.flow-tabs [aria-selected=true]{background:#7560c8;color:#fff;box-shadow:0 3px 10px #7560c82a}.flow-expand{border-color:var(--line,#dfe1e9)}.flow-expand:hover{background:var(--panel,#f4f4f7);border-color:#9d89e3}.flow-panel>.flow-scroll{background:#101217;padding:14px}.order-flow svg{color:#a7abc0}.flow-lane{fill:#15171fe8;stroke:#303340;stroke-width:1}.flow-lane-mark{fill:#a293df}.flow-lane-mark.role-0{fill:#92c7dd}.flow-lane-mark.role-1{fill:#e0bb85}.flow-lane-mark.role-2{fill:#b6a2f5}.flow-lane-mark.role-3{fill:#9baef4}.flow-owner{fill:#eff0f7;font-size:15px;letter-spacing:1.4px}.flow-sub{fill:#aeb3c4;font-size:13px}.flow-node rect{fill:#1b1e28;stroke:#54506a;stroke-width:1.5;filter:drop-shadow(0 4px 7px #0004)}.flow-node.customer rect{stroke:#506977}.flow-node.payment rect{stroke:#796348}.flow-node.store rect{stroke:#69578d}.flow-node.courier rect{stroke:#56658e}.flow-node:hover rect{stroke:#bdabff;fill:#222331}.flow-title{fill:#f2f1f8}.flow-badge{fill:#a78be6}.flow-num{fill:#14121d}.flow-arrow{stroke:#a59cce;opacity:.95;stroke-width:2}.flow-edge-label{fill:#bbb7ce;font-size:13px}.flow-node rect,.flow-tabs button{transition:fill .18s,border-color .18s,background .18s}.flow-modal{background:#111319;color:#eef0f7;border-color:#3b3e4c;box-shadow:0 25px 100px #0008}.flow-modal::backdrop{background:#080910d9;backdrop-filter:blur(8px)}.flow-modal .order-flow{background:#101217}.flow-modal header button{border-color:#424555;color:#e5e6ef}.flow-modal .flow-scroll{background:#101217}.flow-modal header strong{font-weight:650}.flow-legend span:nth-child(1):before{background:#92c7dd}.flow-legend span:nth-child(2):before{background:#e0bb85}.flow-legend span:nth-child(3):before{background:#b6a2f5}.flow-legend span:nth-child(4):before{background:#9baef4}.flow-links a{font-weight:600}.flow-links a:hover{border-color:#9d89e3}.flow-callout{border-color:var(--line,#dedee8)}.flow-callout span{color:var(--accent,#6b57aa)}
@media(max-width:700px){.flow-heading{padding:16px;align-items:flex-start;flex-direction:column;gap:5px}.flow-mobile{background-color:#111319;background-image:radial-gradient(#44485a65 .65px,transparent .65px);background-size:15px 15px;padding:12px 16px 24px}.flow-mobile li{background:#1b1e28;border-color:#373b4a;border-left-color:#92c7dd;box-shadow:0 5px 16px #0002;padding:16px}.flow-mobile li.payment{border-left-color:#e0bb85}.flow-mobile li.store{border-left-color:#b6a2f5}.flow-mobile li.courier{border-left-color:#9baef4}.flow-mobile strong{color:#f0f1f7;font-size:16px}.flow-mobile-owner{color:#b9b3d4;font:700 10px/1.5 ui-monospace,monospace;letter-spacing:.12em}.flow-mobile p{color:#b4b9cb;font-size:13px}.flow-mobile li:not(:last-child):after{color:#baa7ed}.flow-modal header{font-size:14px}.flow-modal header button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.flow-node rect,.flow-tabs button{transition:none}.flow-modal::backdrop{backdrop-filter:none}}
@media print{.flow-heading{background:#171922!important;color:white!important;print-color-adjust:exact}.flow-panel>.flow-scroll{background:#101217!important;print-color-adjust:exact}.flow-node rect{filter:none}}

.flow-actions{display:flex;gap:8px;flex-wrap:wrap}.flow-motion{border:1px solid var(--line,#dfe1e9);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:650}.flow-motion:hover{border-color:#9d89e3}.flow-signal{fill:none;stroke:#b5d9ef;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:22 280;stroke-dashoffset:302;animation:flow-signal-travel 6s linear infinite;pointer-events:none}.flow-badge{animation:flow-stage-pulse 7s ease-in-out infinite;animation-delay:calc(var(--step,1)*.55s)}.motion-paused .flow-signal,.motion-offscreen .flow-signal{animation-play-state:paused;opacity:0}.motion-paused .flow-badge,.motion-offscreen .flow-badge{animation:none}.flow-mobile li{animation:flow-stage-enter .45s both;animation-delay:calc(var(--step,1)*.08s)}.motion-paused .flow-mobile li{animation:none}.flow-modal .flow-motion{color:#e6e3f0;border-color:#424555}
@keyframes flow-signal-travel{from{stroke-dashoffset:302}to{stroke-dashoffset:0}}@keyframes flow-stage-pulse{0%,14%,100%{fill:#a78be6}7%{fill:#cfe5ff}}@keyframes flow-stage-enter{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .flow-signal,body:not(.motion-enabled) .flow-badge,body:not(.motion-enabled) .flow-mobile li{animation:none!important}body:not(.motion-enabled) .flow-signal{display:none}}@media print{.flow-actions{display:none}.flow-signal{display:none}.flow-badge,.flow-mobile li{animation:none!important}}