.order-demo { border: 1px solid #d8e7df; border-radius: 22px; background: #f0f8f4; box-shadow: 0 24px 60px #123c221a; min-width: 0; overflow: hidden; }
.order-demo .flow-scene { padding: 24px 20px 0; height: 470px; }
.flow-scene[hidden] { display: none; }
.flow-window { height: 355px; background: #fff; border: 1px solid #dae4df; border-radius: 12px; box-shadow: 0 8px 22px #10351e12; overflow: hidden; }
.flow-windowbar { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #f8faf9; border-bottom: 1px solid var(--line); }
.flow-windowbar > strong { font-size: 13px; white-space: nowrap; }
.flow-windowdots { font-size: 9px; letter-spacing: 2px; color: #bbc9c1; }
.flow-windowlabel { margin-left: auto; font-size: 10px; color: var(--ink-muted); }
.flow-brand em { color: var(--brand); }
.flow-inbox { display: grid; grid-template-columns: 29% 71%; height: 312px; }
.flow-mail-list { border-right: 1px solid var(--line); padding: 16px 8px; background: #fafcfb; font-size: 10px; }
.flow-inbox-title { display: flex; justify-content: space-between; font-weight: 700; padding: 0 6px 12px; }
.flow-inbox-title span { color: var(--brand); }
.flow-mail-selected, .flow-mail-muted { padding: 12px 8px; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
.flow-mail-selected { background: #dff2e8; border-left: 2px solid var(--brand); }
.flow-mail-list b { font-size: 10px; }.flow-mail-list span,.flow-mail-list small { color: var(--ink-muted); }
.flow-mail-muted { opacity: .55; border-bottom: 1px solid var(--line); }
.flow-message { padding: 18px 16px; min-width: 0; }
.flow-message-top { display: flex; align-items: center; gap: 8px; }
.flow-avatar { background: #e2f0e9; color: var(--brand-deep); border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.flow-message-top strong { font-size: 11px; display: block; }.flow-message-top small { display: block; font-size: 9px; color: var(--ink-muted); }
.flow-time { font-size: 9px; color: var(--ink-muted); margin-left: auto; }
.flow-message h3 { font-size: 15px; margin: 14px 0 10px; }
.flow-message p { font-size: 11px; line-height: 1.7; color: var(--ink-soft); }
.flow-attachment { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-top: 12px; }
.flow-attachment strong { font-size: 11px; display: block; }.flow-attachment small { display: block; font-size: 9px; color: var(--ink-muted); }
.flow-attachment > span:last-child { margin-left: auto; color: var(--brand); }
.flow-pdf { font-size: 9px; font-weight: 700; background: #fff0eb; color: #b7503a; padding: 8px 5px; border-radius: 4px; }
.flow-forward,.flow-approve-action { position: relative; text-align: center; background: var(--brand); color: white; padding: 9px 4px; border-radius: 6px; font-size: 11px; margin-top: 14px; }
.flow-after { display: none; }
.flow-cursor { display: none; position: absolute; width: 23px; height: 27px; right: 20%; top: 14px; fill: #0f1f1a; stroke: white; stroke-width: 1.5; }
.flow-processing { height: 312px; padding: 15px 18px; position: relative; }
.flow-transfer { display: flex; width: 70%; height: 44px; margin: 0 auto 14px; align-items: center; gap: 12px; }
.flow-mail-source { font-size: 25px; color: var(--ink-muted); }.flow-transfer-line { flex: 1; border-top: 2px dashed #a9cdbb; }
.flow-repgo-node { display: grid; place-items: center; border-radius: 12px; background: var(--brand); color: white; width: 42px; height: 42px; font-weight: 700; font-style: italic; box-shadow: 0 0 0 5px #e4f3eb; }
.flow-flying-pdf { position: absolute; top: 15px; left: 15%; width: 54px; padding: 8px; border: 1px solid #dce6df; background: white; border-radius: 5px; box-shadow: 0 5px 10px #123c2220; z-index: 3; opacity: 0; }
.flow-flying-pdf b { font-size: 9px; background: #d96349; color: white; padding: 2px; border-radius: 2px; }
.flow-flying-pdf i { display: block; height: 2px; background: #dbe6df; margin-top: 5px; }.flow-flying-pdf small { font-size: 7px; }
.flow-extracted { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; height: 168px; }
.flow-doc-preview { position: relative; padding: 12px; border: 1px solid var(--line); box-shadow: 0 3px 8px #123c220c; overflow: hidden; }
.flow-doc-preview .flow-pdf { display: inline-block; padding: 2px 5px; margin-bottom: 8px; }.flow-doc-preview strong { display: block; font-size: 8px; }.flow-doc-preview small { font-size: 8px; color: var(--ink-muted); }
.flow-doc-preview i { display: block; background: #e1e9e4; height: 4px; margin-top: 8px; }.flow-doc-preview i:nth-of-type(2) { width: 70%; }.flow-doc-preview b { display: block; font-size: 10px; margin-top: 10px; }
.flow-fields-title { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; margin-bottom: 8px; }.flow-fields-title span { color: var(--brand); }
.flow-data-row { margin-top: 7px; padding: 6px 9px; border-radius: 5px; border: 1px solid #d9e8df; background: #f6fbf8; }
.flow-data-row small { display: block; color: var(--ink-muted); font-size: 8px; }.flow-data-row strong { display: block; font-size: 11px; font-weight: 500; }
.flow-checks { display: flex; justify-content: space-between; gap: 4px; margin-top: 18px; font-size: 9px; color: var(--brand-deep); }
.flow-order { padding: 18px; }
.flow-order-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }.flow-order-title small { font-size: 8px; color: var(--ink-muted); letter-spacing: .07em; }.flow-order-title h3 { font-size: 16px; margin: 1px 0 0; }
.flow-tag { background: #fff6dc; color: #82611d; padding: 3px 7px; border-radius: 20px; font-size: 9px; }
.flow-table-row { display: grid; grid-template-columns: 1fr .5fr 1fr; gap: 8px; padding: 7px 10px; font-size: 10px; border-bottom: 1px solid var(--line); }.flow-table-row span:last-child { text-align: right; }.flow-table-row:nth-child(odd) { background: #f4faf7; }.flow-table-head { background: #e5f2eb !important; color: var(--brand-deep); font-weight: 700; }
.flow-total { display: flex; justify-content: space-between; font-size: 11px; margin: 12px 0 0; }.flow-order .flow-approve-action { margin-top: 12px; }
.flow-erp-screen { position: relative; padding: 20px 16px; }
.flow-erp-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }.flow-erp-toolbar h3 { font-size: 16px; }.flow-erp-toolbar span { font-size: 10px; color: var(--ink-muted); }
.flow-erp-columns,.flow-erp-new,.flow-erp-old { display: grid; grid-template-columns: 1.3fr 1fr .9fr; gap: 8px; align-items: center; padding: 12px 8px; font-size: 10px; border-bottom: 1px solid var(--line); }
.flow-erp-columns { color: var(--ink-muted); font-size: 9px; background: #f7faf8; }
.flow-erp-old i { background: #e8eeeb; height: 5px; width: 80%; border-radius: 10px; }
.flow-erp-new { background: #e4f5eb; border-left: 2px solid var(--brand); }.flow-erp-new strong { font-size: 10px; font-weight: 500; }.flow-erp-new b { font-size: 8px; color: var(--brand-deep); background: #cdebdc; padding: 3px; border-radius: 4px; text-align: center; }
.flow-receipt { width: 84%; padding: 16px 8px; border: 1px solid #d6e8de; background: white; position: absolute; top: 155px; left: 8%; border-radius: 10px; box-shadow: 0 10px 28px #103d2420; display: flex; align-items: center; flex-direction: column; gap: 4px; }
.flow-receipt > span { display: grid; place-items: center; background: var(--brand); color: white; width: 30px; height: 30px; border-radius: 50%; }.flow-receipt strong { font-size: 13px; }.flow-receipt small { font-size: 10px; color: var(--ink-muted); }
.flow-caption { display: flex; gap: 12px; align-items: center; margin-top: 22px; }.flow-caption > span { font-size: 12px; font-weight: 700; color: var(--brand); border: 1px solid #b9dccb; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }.flow-caption strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }.flow-caption small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 11px; }
.flow-navigation { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 4px 20px 0; gap: 4px; }
.flow-step { font: inherit; font-size: 10px; color: var(--ink-muted); background: transparent; border: 0; padding: 10px 0; cursor: pointer; border-top: 3px solid #dce9e1; }.flow-step > span { margin-right: 4px; }.flow-step.is-current { border-color: var(--brand); color: var(--brand-deep); font-weight: 700; }.flow-step.is-done { border-color: #96cdb0; }
.flow-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px 14px; font-size: 9px; color: var(--ink-muted); }.flow-play { font: inherit; background: none; border: 0; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; cursor: pointer; }
.flow-step:focus-visible,.flow-play:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.order-demo.is-playing .flow-window { animation: flow-window-in .5s both; }
.order-demo.is-playing .flow-mail-selected { animation: flow-mail-in .6s both; }
.order-demo.is-playing .flow-message { animation: flow-window-in .5s .6s both; }
.order-demo.is-playing .flow-cursor { display: block; animation: flow-cursor-click 3s .7s both; }
.order-demo.is-playing .flow-before { display: block; animation: flow-hide .01s 3s forwards; }
.order-demo.is-playing .flow-after { display: block; position: absolute; inset: 9px 0; animation: flow-appear .3s 3s both; }
.order-demo.is-playing .flow-flying-pdf { animation: flow-send-pdf 1.7s .1s both; }
.order-demo.is-playing .flow-attachment { animation: flow-attachment-send .8s 3.5s both; }
.order-demo.is-playing .flow-extracted { animation: flow-window-in .5s 1.3s both; }
.order-demo.is-playing .flow-data-row { animation: flow-window-in .4s 1.8s both; }.order-demo.is-playing .flow-data-row:nth-child(3) { animation-delay: 2.1s; }.order-demo.is-playing .flow-data-row:nth-child(4) { animation-delay: 2.4s; }
.order-demo.is-playing .flow-scan { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #48c98c; box-shadow: 0 0 15px #48c98c; animation: flow-scan 1.7s 1.8s both; }
.order-demo.is-playing .flow-checks span { animation: flow-appear .3s 3s both; }.order-demo.is-playing .flow-checks span:nth-child(2) { animation-delay: 3.4s; }.order-demo.is-playing .flow-checks span:nth-child(3) { animation-delay: 3.8s; }
.order-demo.is-playing .flow-erp-new { animation: flow-window-in .7s .6s both; }.order-demo.is-playing .flow-receipt { animation: flow-window-in .5s 1.8s both; }
.order-demo.is-paused .flow-scene * { animation-play-state: paused !important; }
@keyframes flow-window-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flow-mail-in { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } }
@keyframes flow-cursor-click { 0%,25% { opacity: 0; transform: translate(28px,25px); } 60% { opacity: 1; transform: translate(0,0); } 72% { transform: scale(.8); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes flow-send-pdf { 0% { opacity: 0; left: 15%; transform: translateY(10px) rotate(-8deg); } 15% { opacity: 1; } 75% { opacity: 1; left: calc(85% - 42px); transform: rotate(5deg) scale(.7); } 100% { opacity: 0; left: calc(85% - 42px); transform: scale(.2); } }
@keyframes flow-attachment-send { to { opacity: 0; transform: translate(70px,-25px) scale(.65); } }
@keyframes flow-scan { 0% { opacity: 0; top: 15%; } 15%,85% { opacity: .8; } 100% { top: 90%; opacity: 0; } }
@keyframes flow-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes flow-hide { to { opacity: 0; } }
@media (max-width: 600px) { .order-demo .flow-scene { padding: 16px 12px 0; height: 455px; }.flow-windowbar { padding-inline: 10px; gap: 7px; }.flow-inbox { grid-template-columns: 25% 75%; }.flow-mail-list { padding: 14px 4px; }.flow-mail-list b { font-size: 8px; }.flow-mail-list span,.flow-mail-list small { font-size: 8px; }.flow-mail-selected,.flow-mail-muted { padding: 10px 4px; }.flow-message { padding: 15px 10px; }.flow-time { display: none; }.flow-windowdots { font-size: 7px; letter-spacing: 1px; }.flow-windowlabel { font-size: 8px; }.flow-windowbar > strong { font-size: 12px; }.flow-caption { gap: 8px; margin-top: 20px; }.flow-caption strong { font-size: 13px; }.flow-caption small { font-size: 10px; }.flow-processing { padding: 15px 12px; }.flow-extracted { gap: 10px; }.flow-checks { font-size: 8px; }.flow-order { padding: 14px 12px; }.flow-erp-screen { padding-inline: 10px; }.flow-erp-columns,.flow-erp-new,.flow-erp-old { gap: 4px; padding-inline: 5px; font-size: 9px; }.flow-erp-new strong { font-size: 9px; }.flow-navigation { padding-inline: 12px; }.flow-footer { padding-inline: 12px; }.flow-doc-preview { padding: 8px; }.flow-doc-preview strong { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { .order-demo,.order-demo * { animation: none !important; transition: none !important; }.order-demo .flow-before { opacity: 1; }.order-demo .flow-after,.flow-flying-pdf,.flow-cursor,.flow-scan { display: none !important; } }