/* 怎么做（L8）：右边一张吸顶的系统画布，左边六段文字和一条轨道。只选中 #flow 里的元素。
   画布里的东西都写在 820x600 的虚拟坐标上（手机 420x560，用 --mx/--my/--mw/--mh），整体按 --s 缩放。
   [data-in=N]：阶段到 N 时出现；[data-out=M]：阶段到 M 时消失；data-d 是这一阶段里的出现延迟（毫秒），由脚本写进 transition-delay。 */
#flow {
  --fl-e: cubic-bezier(.165, .84, .44, 1);
  --fl-ok: #5fd38a;
  --fl-card: linear-gradient(180deg, #1c2024 0%, #15181b 100%);
  --fl-edge: rgba(255, 255, 255, .075);
  --s: 1;
  overflow: clip;
}
#flow .fl-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- 左：文字和轨道 ---------- */
#flow .fl-steps { grid-column: 1 / span 4; grid-row: 1; list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; }
#flow .fl-rail { position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: var(--line); }
#flow .fl-rail-fill { position: absolute; left: 0; top: 0; width: 1px; height: var(--fl-fill, 0px); background: linear-gradient(180deg, rgba(242, 179, 61, 0), var(--amber)); }
#flow .fl-packet { position: absolute; left: -4px; top: var(--fl-fill, 0px); width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: #ffe2a6;
  box-shadow: 0 0 0 3px rgba(242, 179, 61, .18), 0 0 18px 4px rgba(242, 179, 61, .55); opacity: var(--fl-pk, 0); transition: opacity .4s; }
#flow .fl-step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 40px 0; color: var(--ink-3); transition: color .5s var(--fl-e); }
#flow .fl-step:first-of-type { min-height: 64vh; }
#flow .fl-step.is-current { color: var(--ink-1); }
#flow .fl-k { position: relative; display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); letter-spacing: .12em; color: var(--ink-3); }
#flow .fl-k b { font-family: var(--mono); font-weight: 400; letter-spacing: .04em; color: var(--ink-4); transition: color .4s; }
#flow .fl-k::before { content: ""; position: absolute; left: -38px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong); transition: border-color .4s, background .4s, box-shadow .4s; }
#flow .fl-step.is-done .fl-k::before { border-color: rgba(242, 179, 61, .55); background: rgba(242, 179, 61, .25); }
#flow .fl-step.is-current .fl-k::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 5px rgba(242, 179, 61, .12); }
#flow .fl-step.is-current .fl-k b { color: var(--amber); }
#flow .fl-step .hl-h3 { margin-top: 18px; color: inherit; transition: color .5s; }
#flow .fl-p-text { margin-top: 16px; font-size: var(--fs-body); line-height: 1.75; color: var(--ink-3); max-width: 24em; transition: color .5s; }
#flow .fl-step.is-current .fl-p-text { color: var(--ink-2); }
#flow .fl-tags { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.7; color: var(--ink-3); max-width: 24em; }
#flow .fl-tags span { display: block; margin-bottom: 4px; font-size: var(--fs-label); letter-spacing: .12em; color: var(--ink-4); }

/* ---------- 右：吸顶画布 ---------- */
#flow .fl-stage { grid-column: 5 / span 8; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; z-index: 1; }
#flow .fl-frame { position: relative; border: 1px solid var(--line); border-radius: 16px; background: #0b0d0f; overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04); }
#flow .fl-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: radial-gradient(60% 40% at 50% 0%, rgba(242, 179, 61, .06), transparent 70%); }

#flow .fl-bar { position: relative; z-index: 3; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
#flow .fl-bar-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--ink-3); white-space: nowrap; }
#flow .fl-bar-title i { width: 7px; height: 7px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 10px rgba(242, 179, 61, .7); }
#flow .fl-tabs { display: flex; gap: 2px; margin: 0 auto; }
#flow .fl-tab { position: relative; font: inherit; font-size: var(--fs-label); color: var(--ink-4); background: none; border: 0; border-radius: 7px; padding: 7px 11px; cursor: pointer; transition: color .25s, background .25s; }
#flow .fl-tab:hover { color: var(--ink-1); }
#flow .fl-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
#flow .fl-tab.is-done { color: var(--ink-2); }
#flow .fl-tab.is-current { color: var(--ink-1); background: rgba(255, 255, 255, .06); }
#flow .fl-tab::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--amber); transform: scaleX(0); transition: transform .5s var(--fl-e); }
#flow .fl-tab.is-current::after { transform: scaleX(1); }
#flow .fl-live { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: var(--fs-label); color: var(--fl-ok);
  background: rgba(95, 211, 138, .08); border: 1px solid rgba(95, 211, 138, .22); white-space: nowrap; }
#flow .fl-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fl-ok); box-shadow: 0 0 8px var(--fl-ok); }

#flow .fl-view { position: relative; height: calc(600px * var(--s)); overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.3px); background-size: 20px 20px; background-position: 10px 10px; }
#flow .fl-space { position: absolute; left: 50%; top: 0; width: 820px; height: 600px; transform-origin: 0 0; transform: scale(var(--s)) translateX(-50%); }

/* 出现 / 消失 */
#flow [data-in] { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .6s var(--fl-e), transform 1.3s var(--fl-e); }
#flow [data-in].is-on { opacity: 1; transform: none; }
#flow .fl-wires path[data-in] { opacity: 1; transform: none; fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--fl-e); }
#flow .fl-wires path[data-in].is-on { stroke-dashoffset: 0; }
#flow .fl-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#flow .fl-pulse { fill: #ffe2a6; filter: drop-shadow(0 0 4px rgba(242, 179, 61, .9)); }

#flow .fl-p { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); }

/* 01 需求 */
#flow .fl-req { border-radius: 12px; padding: 18px 20px; background: linear-gradient(180deg, #23272b, #1a1d20); border: 1px solid rgba(242, 179, 61, .28);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8), 0 0 0 6px rgba(242, 179, 61, .04), inset 0 1px 0 rgba(255, 255, 255, .06); }
#flow .fl-req-k { font-size: var(--fs-label); letter-spacing: .14em; color: var(--amber); }
#flow .fl-req p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--ink-1); }
#flow .fl-req em { font-style: normal; color: var(--amber); box-shadow: inset 0 -1px 0 rgba(242, 179, 61, .5); }
#flow .fl-ph { border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .012); display: grid; place-items: center; }
#flow .fl-ph span { font-size: 14px; color: var(--ink-3); letter-spacing: .08em; }

/* 卡片 */
#flow .fl-card, #flow .fl-group { border-radius: 10px; background: var(--fl-card); border: 1px solid var(--fl-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px -22px rgba(0, 0, 0, .85); transition: opacity .6s var(--fl-e), transform 1.3s var(--fl-e), border-color .3s, box-shadow .3s; }
#flow .fl-card { display: flex; flex-direction: column; }
#flow .fl-card:hover, #flow .fl-group:hover { border-color: rgba(242, 179, 61, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -22px rgba(0, 0, 0, .85), 0 0 0 4px rgba(242, 179, 61, .06); }
#flow .fl-ch { display: flex; align-items: center; gap: 8px; padding: 13px 14px 0; font-size: 14px; white-space: nowrap; }
#flow .fl-ch svg, #flow .fl-gl svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#flow .fl-ch b { font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; }
#flow .fl-ch em { margin-left: auto; font-style: normal; font-size: var(--fs-label); color: var(--ink-4); transition: color .3s; }
#flow .fl-ch .fl-dot { margin-left: auto; }
#flow .fl-sub { padding: 5px 14px 0 38px; font-size: var(--fs-label); color: var(--ink-3); white-space: nowrap; }
#flow .fl-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fl-ok); box-shadow: 0 0 8px rgba(95, 211, 138, .8); }
#flow .fl-st { margin-top: auto; display: flex; align-items: center; gap: 7px; padding: 8px 14px 9px; font-size: var(--fs-label); color: var(--ink-3); border-top: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; min-height: 34px; }
#flow .fl-st::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(242, 179, 61, .7); }
#flow .fl-st.is-run::before { background: var(--fl-ok); box-shadow: 0 0 8px rgba(95, 211, 138, .8); }
#flow .fl-st:empty { visibility: hidden; }

/* 02 线框和界面 */
#flow .fl-pv { position: relative; margin: 11px 14px 0; height: 62px; border-radius: 7px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05); overflow: hidden; }
#flow .fl-wire, #flow .fl-ui { position: absolute; inset: 0; }
#flow .fl-wire i { position: absolute; border: 1px dashed rgba(255, 255, 255, .22); border-radius: 4px; }
#flow .fl-app .w-thumb { left: 10px; top: 10px; width: 40px; height: 40px; }
#flow .fl-app .w-l1 { left: 60px; top: 14px; width: 64px; height: 9px; }
#flow .fl-app .w-l2 { left: 60px; top: 33px; width: 44px; height: 13px; }
#flow .fl-app .w-btn { right: 10px; top: 18px; width: 46px; height: 24px; border-radius: 12px; }
#flow .fl-ui { background: linear-gradient(180deg, #202428, #1a1d21); }
#flow .fl-app .u-thumb { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; border-radius: 8px;
  background: radial-gradient(circle at 35% 30%, #ffe0a0, #f2b33d 45%, #a8701c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 10px -4px rgba(242, 179, 61, .6); }
#flow .fl-app .u-text { position: absolute; left: 60px; top: 12px; display: flex; flex-direction: column; gap: 7px; }
#flow .fl-app .u-text i { width: 58px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .2); }
#flow .fl-app .u-price { font-size: 14px; font-weight: 600; color: var(--ink-1); white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity .3s; }
#flow .fl-app .u-btn { position: absolute; right: 10px; top: 18px; height: 24px; padding: 0 11px; border-radius: 12px; display: grid; place-items: center;
  font-size: var(--fs-label); font-weight: 600; color: var(--amber-ink); background: var(--amber); box-shadow: 0 4px 12px -4px rgba(242, 179, 61, .8); white-space: nowrap; transition: opacity .3s; }
#flow .fl-tap { position: absolute; right: 24px; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .85); opacity: 0; }
#flow.is-anim .fl-app .fl-ui.is-on .fl-tap { animation: fl-tap 3.6s 2s var(--fl-e) infinite; }
@keyframes fl-tap {
  0%, 70%, 100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  76% { opacity: 1; transform: scale(.8); }
  86% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
#flow .fl-admin .w-r1, #flow .fl-admin .w-r2, #flow .fl-admin .w-r3 { left: 10px; width: 120px; height: 10px; }
#flow .fl-admin .w-r1 { top: 10px; } #flow .fl-admin .w-r2 { top: 26px; } #flow .fl-admin .w-r3 { top: 42px; }
#flow .fl-admin .w-chart { right: 10px; top: 10px; width: 104px; height: 42px; }
#flow .fl-admin .a-rows { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
#flow .fl-admin .a-rows i { position: relative; display: block; width: 120px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
#flow .fl-admin .a-rows i::before { content: ""; position: absolute; left: 4px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--fl-ok); }
#flow .fl-admin .a-rows i::after { content: ""; position: absolute; left: 16px; top: 3px; width: 54px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .24); }
#flow .fl-admin .a-rows i:nth-child(2)::before { background: var(--amber); }
#flow .fl-admin .a-bars { position: absolute; right: 10px; top: 10px; width: 104px; height: 42px; display: flex; align-items: flex-end; gap: 5px; }
#flow .fl-admin .a-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg, rgba(242, 179, 61, .9), rgba(242, 179, 61, .25)); transform-origin: bottom; }
#flow.is-anim .fl-admin .fl-ui.is-on .a-bars i { animation: fl-bar 4.8s ease-in-out infinite; }
#flow .fl-admin .a-bars i:nth-child(2) { animation-delay: -.6s !important; } #flow .fl-admin .a-bars i:nth-child(3) { animation-delay: -1.2s !important; }
#flow .fl-admin .a-bars i:nth-child(4) { animation-delay: -1.8s !important; } #flow .fl-admin .a-bars i:nth-child(5) { animation-delay: -2.4s !important; }
#flow .fl-admin .a-bars i:nth-child(6) { animation-delay: -3s !important; }
@keyframes fl-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }

/* 03 服务组和数据库 */
#flow .fl-group { background: linear-gradient(180deg, rgba(242, 179, 61, .035), rgba(255, 255, 255, .01)); border-color: rgba(242, 179, 61, .2); }
#flow .fl-gl { position: absolute; left: 14px; top: 11px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--ink-2); letter-spacing: .06em; }
#flow .fl-svcs { position: absolute; left: 12px; right: 12px; bottom: 12px; top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#flow .fl-svc { position: relative; border-radius: 8px; padding: 12px 14px; background: var(--fl-card); border: 1px solid var(--fl-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 24px -16px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 5px; }
#flow .fl-svc b { font-size: 15px; font-weight: 600; color: var(--ink-1); }
#flow .fl-svc span { font-size: var(--fs-label); color: var(--ink-3); white-space: nowrap; }
#flow .fl-svc .fl-dot { position: absolute; right: 12px; top: 16px; }
#flow .fl-db .fl-sub { padding-top: 7px; }

/* 04 设备与算法 */
#flow .fl-meter { margin: auto 14px 14px; height: 30px; display: flex; align-items: flex-end; gap: 4px; }
#flow .fl-meter i { flex: 1; height: calc(var(--m, .18) * 100%); border-radius: 2px; background: linear-gradient(180deg, var(--amber), rgba(242, 179, 61, .2)); transition: height .5s var(--fl-e); }
#flow .fl-dev { border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2a2f34, #16191c 70%);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 20px -10px rgba(0, 0, 0, .9); }
#flow .fl-dev svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#flow .fl-dev.is-ping { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 4px rgba(242, 179, 61, .12), 0 0 18px rgba(242, 179, 61, .35); }

/* 05 检查光和打勾 */
#flow .fl-scan { position: absolute; left: -20px; right: -20px; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--amber) 20%, #fff2cf 50%, var(--amber) 80%, transparent); box-shadow: 0 0 26px 6px rgba(242, 179, 61, .35); }
#flow .fl-scan.run { animation: fl-scan 1.5s var(--ease-inout) forwards; }
@keyframes fl-scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(600px); } }
#flow .fl-ok { position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: #12301f; border: 1px solid rgba(95, 211, 138, .6); box-shadow: 0 0 10px rgba(95, 211, 138, .45); }
#flow .fl-ok svg { width: 10px; height: 10px; fill: none; stroke: var(--fl-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#flow .fl-ok[data-in] { transform: scale(.4); }
#flow .fl-ok[data-in].is-on { transform: none; }

/* 05 当地化 */
#flow .fl-lz { display: flex; gap: 8px; padding: 12px 14px 0; }
#flow .fl-lz span { height: 28px; padding: 0 11px 0 9px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-label); color: var(--ink-2);
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
#flow .fl-lz span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fl-ok); box-shadow: 0 0 6px rgba(95, 211, 138, .8); }
#flow .fl-locname { color: var(--amber) !important; transition: opacity .26s; }

/* 06 监控 */
#flow .fl-spark { display: block; margin: 10px 14px 0; width: calc(100% - 28px); height: 54px; }
#flow .fl-spark-a { fill: url(#fl-spark-g); fill: rgba(242, 179, 61, .1); }
#flow .fl-spark-l { fill: none; stroke: var(--amber); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#flow .fl-mon .fl-st { margin-top: 8px; }
#flow .fl-mon .fl-st::before { background: var(--fl-ok); box-shadow: 0 0 8px rgba(95, 211, 138, .8); }

/* ---------- 画布底栏：进度 -> 交付 ---------- */
#flow .fl-foot { position: relative; z-index: 3; height: 50px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
#flow .fl-foot-layer { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 16px; font-size: var(--fs-label); color: var(--ink-3); }
#flow .fl-foot-layer > span:first-child { letter-spacing: .14em; flex: none; }
#flow .fl-prog { flex: 1; display: flex; gap: 6px; }
#flow .fl-prog i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
#flow .fl-prog i::after { content: ""; position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--fl-e); box-shadow: 0 0 8px rgba(242, 179, 61, .7); }
#flow .fl-prog i.is-on::after { transform: scaleX(1); }
#flow .fl-gift-chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
#flow .fl-gift-chips b { font-weight: 500; color: var(--ink-1); height: 28px; padding: 0 12px; border-radius: 7px; display: grid; place-items: center; white-space: nowrap;
  background: linear-gradient(180deg, #24292e, #1b1f23); border: 1px solid rgba(242, 179, 61, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1180px) {
  #flow .fl-steps { grid-column: 1 / span 5; }
  #flow .fl-stage { grid-column: 6 / span 7; }
  #flow .fl-bar-title { display: none; }
}
@media (max-width: 899px) {
  #flow .fl-body { display: block; }
  #flow .fl-stage { position: sticky; top: calc(var(--nav-h) + 6px); padding-bottom: 10px; background: linear-gradient(var(--bg) 85%, transparent); box-shadow: 0 -8px 0 var(--bg); }
  #flow .fl-frame { border-radius: 12px; }
  #flow .fl-bar { height: 42px; padding: 0 8px; }
  #flow .fl-tabs { margin: 0; flex: 1; justify-content: space-between; }
  #flow .fl-tab { padding: 6px 6px; }
  #flow .fl-tab::after { left: 6px; right: 6px; }
  #flow .fl-live { display: none; }
  #flow .fl-view { height: calc(560px * var(--s)); }
  #flow .fl-space { width: 420px; height: 560px; }
  #flow .fl-p { left: calc(var(--mx) * 1px); top: calc(var(--my) * 1px); width: calc(var(--mw) * 1px); height: calc(var(--mh) * 1px); }
  #flow .fl-ch { font-size: 17px; padding: 11px 12px 0; }
  #flow .fl-ch em, #flow .fl-sub { display: none; }
  #flow .fl-st { font-size: 15px; padding: 7px 12px; }
  #flow .fl-pv { margin: 8px 12px 0; height: 42px; }
  #flow .fl-app .w-thumb, #flow .fl-app .u-thumb { width: 26px; height: 26px; left: 8px; top: 7px; }
  #flow .fl-app .w-l1, #flow .fl-app .w-l2, #flow .fl-app .u-text { left: 42px; }
  #flow .fl-app .w-l1 { top: 9px; } #flow .fl-app .w-l2 { top: 22px; height: 11px; }
  #flow .fl-app .u-text { top: 6px; gap: 4px; }
  #flow .fl-app .u-text i { width: 40px; height: 6px; }
  #flow .fl-app .u-price { font-size: 14px; line-height: 1.2; }
  #flow .fl-app .w-btn, #flow .fl-app .u-btn { display: none; }
  #flow .fl-admin .w-r1, #flow .fl-admin .w-r2, #flow .fl-admin .w-r3, #flow .fl-admin .a-rows i { width: 74px; height: 8px; }
  #flow .fl-admin .w-r1 { top: 6px; } #flow .fl-admin .w-r2 { top: 17px; } #flow .fl-admin .w-r3 { top: 28px; }
  #flow .fl-admin .a-rows { top: 6px; gap: 3px; }
  #flow .fl-admin .a-rows i::before { top: 1px; } #flow .fl-admin .a-rows i::after { width: 34px; top: 2px; }
  #flow .fl-admin .w-chart, #flow .fl-admin .a-bars { width: 76px; height: 30px; top: 6px; }
  #flow .fl-gl { font-size: 15px; top: 9px; }
  #flow .fl-svcs { top: 34px; gap: 8px; bottom: 10px; left: 10px; right: 10px; }
  #flow .fl-svc { padding: 9px 10px; }
  #flow .fl-svc b { font-size: 17px; }
  #flow .fl-svc span { display: none; }
  #flow .fl-svc .fl-dot { top: 14px; right: 10px; }
  #flow .fl-db .fl-ch b { font-size: 15px; }
  #flow .fl-db .fl-ch svg, #flow .fl-db .fl-ch .fl-dot, #flow .fl-locz { display: none; }
  #flow .fl-meter { margin: 6px 12px 10px; height: 18px; }
  #flow .fl-req p { font-size: 18px; }
  #flow .fl-spark { margin-top: 6px; height: 40px; }
  #flow .fl-steps { padding-left: 32px; }
  #flow .fl-rail { left: 7px; }
  #flow .fl-k::before { left: -30px; }
  #flow .fl-step, #flow .fl-step:first-of-type { min-height: 0; padding: 28px 0 44vh; justify-content: flex-start; }
  #flow .fl-step:last-of-type { padding-bottom: 12vh; }
  #flow .fl-foot { height: 44px; }
  #flow .fl-foot-layer { padding: 0 10px; gap: 10px; }
  #flow .fl-gift-chips { gap: 5px; }
  #flow .fl-gift-chips b { padding: 0 7px; height: 26px; font-size: 12.5px; }
}

/* 减少动态：直接切到对应阶段的最终状态，不播放过渡和循环 */
@media (prefers-reduced-motion: reduce) {
  #flow [data-in], #flow .fl-wires path[data-in], #flow .fl-prog i::after, #flow .fl-step, #flow .fl-meter i { transition: none !important; }
  #flow .fl-scan, #flow .fl-tap { display: none; }
}

/* ?flow-stage=N 截图和减少动态：不播放过渡 */
#flow.fl-instant [data-in], #flow.fl-instant .fl-wires path[data-in], #flow.fl-instant .fl-prog i::after { transition: none !important; }