/* ===== 交互组件库 · FlowStepper ===== */
.cmp-flow{margin-top:6px}
.flow-stepper{--fs-accent:#2997ff}
.fs-nav{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.fs-nav::-webkit-scrollbar{display:none}
.fs-step{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:118px;padding:16px 12px 12px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer;transition:border-color .4s ease,color .4s ease,background .4s ease}
.fs-step i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);font-style:normal;font-size:12px;color:var(--text-muted);transition:all .4s ease}
.fs-step span{line-height:1.4}
.fs-step:hover{border-color:#2997ff55;color:var(--text)}
.fs-step.active{border-color:var(--fs-accent);background:#2997ff10;color:var(--text)}
.fs-step.active i{background:var(--gradient);border-color:transparent;color:#fff}
.fs-step.done i{border-color:#2997ff66;color:var(--accent)}
.fs-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fs-panel{margin-top:24px;border:1px solid #ffffff1c;border-radius:20px;background:linear-gradient(180deg,#181d28,#131720);padding:28px 32px;min-height:168px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 40px #00000055}
.fs-panel-head{display:flex;align-items:center;gap:12px}
.fs-panel-head h5{margin:0;font-size:19px;color:var(--text)}
.fs-confirm{padding:4px 12px;border-radius:999px;background:#febc2e1e;color:#febc2e;font-size:12px;letter-spacing:.06em}
.fs-panel p{margin:0;font-size:15px;line-height:1.9;color:var(--text-secondary);max-width:none}
.fs-chips{display:flex;flex-wrap:wrap;gap:10px}
.fs-chips span{padding:6px 14px;border-radius:999px;border:1px solid #2997ff40;color:var(--accent);font-size:12.5px;background:#2997ff08}
.fs-track{margin-top:auto;height:2px;border-radius:2px;background:#ffffff12;overflow:hidden}
.fs-track i{display:block;height:100%;background:var(--gradient);border-radius:2px;transition:width .7s cubic-bezier(.16,1,.3,1)}
@media(max-width:800px){
.fs-step{min-width:96px;padding:12px 9px 10px;font-size:12px}
.fs-panel{padding:20px 18px;min-height:0}
}
@media(prefers-reduced-motion:reduce){
.fs-track i{transition:none}
.fs-step,.fs-step i{transition:none}
}
/* ===== SegmentTabs 分段标签 ===== */
.seg-tabs{margin-top:4px}
.seg-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.seg-btn{padding:11px 20px;border-radius:999px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .4s ease,color .4s ease,background .4s ease}
.seg-btn:hover{border-color:#2997ff55;color:var(--text)}
.seg-btn.active{border-color:#2997ff;background:#2997ff12;color:var(--text)}
.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg-note{margin:16px 0 0;font-size:13px;color:var(--text-muted)}
.evo-strip{display:flex;align-items:baseline;gap:14px;margin-top:22px;padding:16px 20px;border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:#2997ff08}
.evo-strip b{flex:0 0 auto;font-size:15px;color:var(--text)}
.evo-strip span{font-size:13.5px;line-height:1.8;color:var(--text-secondary)}
.case-shot-details summary{cursor:pointer;font-size:13.5px;color:var(--accent);padding:6px 0;list-style:none}
.case-shot-details summary::-webkit-details-marker{display:none}
.case-shot-details summary:before{content:'▸ ';}
.case-shot-details[open] summary:before{content:'▾ ';}
@media(prefers-reduced-motion:reduce){.seg-btn{transition:none}}
/* 完成态/激活态对比强化 */
.fs-step.done{color:var(--text-muted)}
.fs-step.done i{border-color:#2997ff33;background:transparent;color:var(--accent);font-size:11px}
.fs-step.active i{font-weight:600;text-shadow:0 1px 2px #00000040}
/* ===== FlowChain 蛇形流程图 ===== */
.cmp-chain{margin-top:10px;padding:26px 26px 30px;border:1px solid #ffffff14;border-radius:22px;background:linear-gradient(180deg,#12161f,#0e1118)}
.fc-row{display:flex;align-items:stretch}
.fc-row.rev{flex-direction:row-reverse}
.fc-node{position:relative;flex:1 1 0;min-width:0;min-height:104px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:18px 16px;border:1px solid #ffffff1a;border-radius:18px;background:linear-gradient(180deg,#1a1f2b,#141824);color:var(--text);font:inherit;font-size:14px;line-height:1.55;text-align:left;cursor:pointer;transition:border-color .45s ease,background .45s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
.fc-node:hover{border-color:#2997ff66;color:var(--text)}
.fc-node:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fc-node .fc-num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff2a;font-size:13px;color:var(--text-secondary);transition:all .45s ease}
.fc-node .fc-title{color:var(--text-secondary);font-size:14.5px}
.fc-node.active{border-color:#2997ff;background:linear-gradient(180deg,#1c2740,#151b2c);transform:translateY(-4px);box-shadow:0 10px 34px #2997ff2e}
.fc-node.active .fc-title{color:var(--text)}
.fc-node.active .fc-num{background:var(--gradient);border-color:transparent;color:#fff;font-weight:600}
.fc-node.done{color:var(--text-muted);background:#141824}
.fc-node.done .fc-num{border-color:#2997ff33;background:transparent;color:var(--accent);font-size:11px}
.fc-node.confirm{border-style:dashed;border-color:#febc2e80;background:#febc2e08}
.fc-node.confirm.active{border-color:#febc2e;background:#febc2e0d}
.fc-badge{position:absolute;top:-10px;right:10px;padding:3px 10px;border-radius:999px;background:#1a1a10;color:#febc2e;border:1px solid #febc2e59;font-size:11px;letter-spacing:.06em}
.fc-arrow{flex:0 0 40px;align-self:center;height:3px;margin:0 4px;border-radius:2px;background:repeating-linear-gradient(90deg,#2997ffcc 0 7px,transparent 7px,transparent 13px);background-size:13px 3px;animation:fcDash 1s linear infinite;position:relative}
.fc-arrow:after{content:'';position:absolute;right:-3px;top:-5px;border:6px solid transparent;border-left:9px solid #4da3ff}
.fc-arrow.rev{transform:scaleX(-1)}
@keyframes fcDash{to{background-position:-10px 0}}
.fc-turnrow{display:flex;height:26px}
.fc-turn{width:3px;height:100%;background:repeating-linear-gradient(180deg,#2997ffcc 0 7px,transparent 7px,transparent 13px);background-size:3px 13px;animation:fcDashV 1s linear infinite;position:relative}
.fc-turn:after{content:'';position:absolute;bottom:-3px;left:-5px;border:6px solid transparent;border-top:9px solid #4da3ff}
.fc-turn.right{margin-right:88px;margin-left:auto}
.fc-turn.left{margin-left:88px}
@keyframes fcDashV{to{background-position:0 -10px}}
@media(prefers-reduced-motion:reduce){
.fc-arrow,.fc-turn{animation:none;background:#2997ff66}
.fc-node{transition:none}
}