:root { color-scheme:light; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:#1d2939; background:#f4f7fb; }
button,input { font:inherit; }
.feature-demo-page { --accent:#155eef; --soft:#eff4ff; }
.feature-demo-page--violet { --accent:#6938ef; --soft:#f4f3ff; }
.feature-demo-page--green { --accent:#067647; --soft:#ecfdf3; }
.feature-demo-page--amber { --accent:#b54708; --soft:#fffaeb; }
.feature-demo-page--teal { --accent:#087e8b; --soft:#ecfdff; }
.feature-demo-page--indigo { --accent:#3538cd; --soft:#eef4ff; }
.feature-demo-page--red { --accent:#c01048; --soft:#fff1f3; }
.feature-demo-page #aff-im-root { display:none!important; }
.feature-demo-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:24px 0 32px; }
.feature-demo-heading { margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.feature-demo-heading span { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.08em; }
.feature-demo-heading h1 { margin:6px 0 7px; color:#101828; font-size:clamp(26px,4vw,38px); letter-spacing:-.035em; }
.feature-demo-heading p { max-width:680px; margin:0; color:#667085; font-size:12px; line-height:1.7; }
.feature-demo-heading__actions { display:flex; align-items:center; gap:8px; }.feature-demo-heading__actions > a { padding:8px 11px; color:var(--accent); background:#fff; border:1px solid #d0d5dd; border-radius:999px; font-size:9px; font-weight:800; text-decoration:none; white-space:nowrap; }
.feature-demo-safe { padding:8px 11px; display:flex; align-items:center; gap:7px; color:#475467; background:#fff; border:1px solid #e4e7ec; border-radius:999px; font-size:9px; white-space:nowrap; }
.feature-demo-safe i { width:7px; height:7px; background:#12b76a; border-radius:50%; }
.feature-demo-layout { display:grid; grid-template-columns:minmax(0,1fr) 210px; align-items:start; gap:14px; }
.feature-demo-window { min-width:0; overflow:hidden; background:#e9eef6; border:1px solid #d0d5dd; border-radius:16px; box-shadow:0 20px 46px rgba(16,24,40,.13); }
.feature-demo-bar { height:40px; padding:0 12px; display:flex; align-items:center; gap:5px; color:#667085; background:#fff; border-bottom:1px solid #eaecf0; font-size:8px; }
.feature-demo-bar > i { width:7px; height:7px; background:#f97066; border-radius:50%; }.feature-demo-bar > i:nth-child(2){background:#fdb022}.feature-demo-bar > i:nth-child(3){background:#32d583}
.feature-demo-bar > span { margin-left:7px; flex:1; text-align:center; }.feature-demo-bar > em { color:var(--accent); font-style:normal; font-weight:800; }
.feature-demo-app { min-height:500px; display:grid; grid-template-columns:112px minmax(0,1fr); position:relative; background:linear-gradient(180deg,#f8fafc,#f3f6fb); }
.feature-demo-nav { padding:16px 9px; display:flex; flex-direction:column; gap:3px; color:#b2ccff; background:#102a56; }
.feature-demo-nav__brand { margin:0 5px 12px; padding-bottom:12px; display:flex; align-items:center; gap:7px; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }.feature-demo-nav__brand > i { width:24px; height:24px; display:grid; place-items:center; color:#1849a9; background:#fff; border-radius:7px; font-size:9px; font-style:normal; font-weight:900; }.feature-demo-nav__brand strong { font-size:10px; }
.feature-demo-nav > span { padding:7px 8px; display:flex; align-items:center; gap:7px; border-radius:7px; font-size:7px; }.feature-demo-nav > span > i { width:17px; height:17px; display:grid; place-items:center; background:rgba(255,255,255,.08); border-radius:5px; font-size:6px; font-style:normal; }.feature-demo-nav > span.is-current { color:#fff; background:rgba(255,255,255,.14); }
.feature-demo-main { min-width:0; padding:16px; }
.feature-demo-apphead { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }.feature-demo-apphead small,.feature-demo-apphead strong { display:block; }.feature-demo-apphead small { color:#98a2b3; font-size:7px; }.feature-demo-apphead strong { margin-top:4px; color:#101828; font-size:14px; }.feature-demo-apphead button { padding:8px 10px; color:#fff; background:var(--accent); border:0; border-radius:7px; font-size:7px; font-weight:800; }
.feature-demo-context { padding:12px 14px; display:grid; grid-template-columns:1fr 1.3fr auto; align-items:center; gap:12px; background:#fff; border:1px solid #e4e7ec; border-radius:10px; transition:border-color .25s,box-shadow .25s; }
.feature-demo-context small,.feature-demo-context strong { display:block; }.feature-demo-context small { color:#98a2b3; font-size:7px; }.feature-demo-context strong { margin-top:4px; overflow:hidden; color:#344054; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.feature-demo-context > span { padding:5px 8px; color:#067647; background:#ecfdf3; border-radius:999px; font-size:8px; font-weight:800; }
.feature-search { margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:8px; }
.feature-search__input { height:44px; padding:0 12px; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #d0d5dd; border-radius:9px; }
.feature-search__input i { width:12px; height:12px; border:2px solid #98a2b3; border-radius:50%; position:relative; }.feature-search__input i::after { content:""; width:5px; height:2px; position:absolute; right:-4px; bottom:-2px; background:#98a2b3; transform:rotate(45deg); }
.feature-search__input input { min-width:0; flex:1; color:#344054; background:transparent; border:0; outline:0; font-size:10px; }
.feature-search button { color:#fff; background:var(--accent); border:0; border-radius:9px; font-size:9px; font-weight:800; }
.feature-operations { margin-top:10px; display:grid; grid-template-columns:minmax(0,1fr) 82px 54px; gap:7px; }.feature-operations__search { min-width:0; height:36px; padding:0 10px; display:flex; align-items:center; gap:8px; color:#98a2b3; background:#fff; border:1px solid #d0d5dd; border-radius:8px; font-size:7px; }.feature-operations__search i { width:10px; height:10px; border:1.5px solid #98a2b3; border-radius:50%; }.feature-operations button { color:#667085; background:#fff; border:1px solid #d0d5dd; border-radius:8px; font-size:7px; }.feature-operations button:last-child { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:800; }
.feature-result-card,.feature-panel { margin-top:12px; padding:14px; background:#fff; border:1px solid #e4e7ec; border-radius:11px; transition:border-color .25s,box-shadow .25s,transform .25s; }
.feature-result-head,.feature-panel__head { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }.feature-result-head strong,.feature-panel__head strong { font-size:11px; }.feature-result-head span,.feature-panel__head span { color:#98a2b3; font-size:8px; }
.feature-result-row { padding:10px; display:grid; grid-template-columns:.75fr 1.2fr 1.15fr auto; align-items:center; gap:8px; border-top:1px solid #eaecf0; transition:background .25s; }.feature-result-row b,.feature-result-row span,.feature-result-row em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }.feature-result-row b { color:var(--accent); }.feature-result-row span { color:#667085; }.feature-result-row em { padding:4px 6px; color:#067647; background:#ecfdf3; border-radius:999px; font-style:normal; }
.feature-product-table { overflow:hidden; border:1px solid #eaecf0; border-radius:8px; }.feature-product-row { padding:9px 10px; display:grid; grid-template-columns:1.7fr .55fr .8fr .8fr; align-items:center; gap:8px; border-top:1px solid #eaecf0; font-size:8px; }.feature-product-row:first-child { border-top:0; }.feature-product-row--head { color:#667085; background:#f8fafc; font-weight:800; }.feature-product-row b,.feature-product-row small { display:block; }.feature-product-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.feature-product-row small { margin-top:2px; color:#98a2b3; font-size:7px; }
.feature-total { margin-top:10px; padding:12px; display:flex; justify-content:flex-end; align-items:baseline; gap:16px; color:#475467; background:var(--soft); border-radius:8px; font-size:9px; }.feature-total strong { color:var(--accent); font-size:16px; }
.feature-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.feature-progress > div { min-width:0; padding:13px 10px; position:relative; background:#f8fafc; border:1px solid #eaecf0; border-radius:9px; }.feature-progress i { width:24px; height:24px; display:grid; place-items:center; color:#98a2b3; background:#eaecf0; border-radius:50%; font-size:8px; font-style:normal; font-weight:800; }.feature-progress b,.feature-progress span { display:block; }.feature-progress b { margin-top:9px; font-size:9px; }.feature-progress span { margin-top:4px; color:#98a2b3; font-size:7px; line-height:1.45; }.feature-progress .is-done i,.feature-progress .is-current i { color:#fff; background:var(--accent); }.feature-progress .is-current { border-color:var(--accent); background:var(--soft); }
.feature-attachment-drop { padding:14px; display:flex; align-items:center; gap:11px; border:1px dashed #84adff; border-radius:9px; background:#f8faff; }.feature-attachment-drop > i { width:30px; height:30px; display:grid; place-items:center; color:var(--accent); background:#fff; border-radius:8px; font-style:normal; font-weight:800; }.feature-attachment-drop b,.feature-attachment-drop span { display:block; }.feature-attachment-drop b { font-size:9px; }.feature-attachment-drop span { margin-top:3px; color:#667085; font-size:7px; }
.feature-file-row { margin-top:9px; padding:10px; display:flex; align-items:center; gap:10px; border:1px solid #eaecf0; border-radius:8px; }.feature-file-row > i { width:32px; height:32px; display:grid; place-items:center; color:var(--accent); background:var(--soft); border-radius:7px; font-size:7px; font-style:normal; font-weight:800; }.feature-file-row div { flex:1; }.feature-file-row b,.feature-file-row span { display:block; }.feature-file-row b { font-size:9px; }.feature-file-row span { margin-top:3px; color:#98a2b3; font-size:7px; }.feature-file-row em { color:#067647; font-size:7px; font-style:normal; }
.feature-quality-product { padding:13px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#f8fafc; border:1px solid #eaecf0; border-radius:9px; }.feature-quality-product small,.feature-quality-product strong,.feature-quality-product span { display:block; }.feature-quality-product small { color:#98a2b3; font-size:7px; }.feature-quality-product strong { margin-top:4px; font-size:11px; }.feature-quality-product span { margin-top:3px; color:#667085; font-size:8px; }.feature-quality-product > b { padding:7px 9px; color:var(--accent); background:var(--soft); border-radius:7px; font-size:8px; }
.feature-quality-result { margin-top:10px; padding:14px; display:flex; align-items:center; gap:12px; border:1px solid #abefc6; border-radius:9px; background:#f6fef9; }.feature-quality-result > i { width:32px; height:32px; display:grid; place-items:center; color:#fff; background:#12b76a; border-radius:50%; font-style:normal; font-weight:800; }.feature-quality-result small,.feature-quality-result strong,.feature-quality-result span { display:block; }.feature-quality-result small { color:#667085; font-size:7px; }.feature-quality-result strong { margin-top:3px; color:#067647; font-size:11px; }.feature-quality-result span { margin-top:3px; color:#667085; font-size:7px; }
.feature-report-ready,.feature-document-preview { margin-top:10px; padding:12px; display:flex; align-items:center; gap:10px; background:var(--soft); border-radius:9px; }.feature-report-ready span { color:#667085; font-size:8px; }.feature-report-ready strong { flex:1; font-size:9px; }.feature-report-ready b { color:var(--accent); font-size:8px; }
.feature-document-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.feature-document-grid article { padding:12px; display:grid; grid-template-columns:auto 1fr; gap:4px 9px; border:1px solid #eaecf0; border-radius:9px; }.feature-document-grid i { width:27px; height:27px; grid-row:span 2; display:grid; place-items:center; color:var(--accent); background:var(--soft); border-radius:7px; font-size:8px; font-style:normal; font-weight:800; }.feature-document-grid b { font-size:9px; }.feature-document-grid span { color:#98a2b3; font-size:7px; }.feature-document-grid article.is-target { border-color:#84adff; background:#f8faff; }
.feature-document-preview > i { width:27px; height:27px; display:grid; place-items:center; color:#fff; background:#12b76a; border-radius:50%; font-style:normal; }.feature-document-preview strong,.feature-document-preview span { display:block; }.feature-document-preview strong { font-size:9px; }.feature-document-preview span { margin-top:3px; color:#667085; font-size:7px; }
.feature-workflow-panel { padding:12px; }.feature-workflow-table { overflow-x:auto; border:1px solid #eaecf0; border-radius:8px; }.feature-workflow-row { min-width:520px; padding:9px 10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border-top:1px solid #eaecf0; background:#fff; }.feature-workflow-row:first-child { border-top:0; }.feature-workflow-row--head { color:#667085; background:#f8fafc; font-weight:800; }.feature-workflow-row span { overflow:hidden; color:#475467; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }.feature-workflow-row:not(.feature-workflow-row--head) span:first-child { color:#1d2939; font-weight:750; }.feature-workflow-row.is-target { transition:background .25s,box-shadow .25s; }.feature-demo-window.is-stage-2 .feature-workflow-row.is-target { background:var(--soft); box-shadow:inset 3px 0 0 var(--accent); }
.feature-operation-result { margin-top:10px; padding:12px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #d0d5dd; border-radius:9px; }.feature-operation-result > i { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; color:#fff; background:#12b76a; border-radius:50%; font-style:normal; font-weight:900; }.feature-operation-result > div { min-width:0; flex:1; }.feature-operation-result strong,.feature-operation-result span { display:block; }.feature-operation-result strong { color:#1d2939; font-size:9px; }.feature-operation-result span { margin-top:3px; color:#667085; font-size:7px; line-height:1.45; }.feature-operation-result > b { color:var(--accent); font-size:7px; white-space:nowrap; }
[data-feature-stage] { transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s; }.feature-demo-window:not(.is-stage-2):not(.is-stage-3) [data-feature-stage="2"],.feature-demo-window:not(.is-stage-3) [data-feature-stage="3"] { opacity:.28; }.feature-demo-window.is-stage-2 [data-feature-stage="2"],.feature-demo-window.is-stage-3 [data-feature-stage="3"] { border-color:#84adff; box-shadow:0 8px 20px rgba(21,94,239,.1); }.feature-demo-window.is-stage-3 .is-target { background:var(--soft); }
.feature-demo-pointer { position:absolute; z-index:5; left:60%; top:35%; opacity:0; pointer-events:none; transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),opacity .18s; }.feature-demo-pointer.is-visible { opacity:1; }.feature-demo-pointer > i { width:0; height:0; display:block; border-top:15px solid #101828; border-right:10px solid transparent; transform:rotate(-18deg); filter:drop-shadow(0 2px 1px #fff); }.feature-demo-pointer > span { margin:2px 0 0 8px; padding:4px 6px; display:block; color:#fff; background:#101828; border-radius:5px; font-size:7px; white-space:nowrap; }
.feature-demo-steps { padding:14px; background:#fff; border:1px solid #e4e7ec; border-radius:13px; box-shadow:0 8px 22px rgba(16,24,40,.05); }.feature-demo-steps > span { display:block; margin-bottom:7px; color:var(--accent); font-size:9px; font-weight:800; }.feature-demo-steps button[data-stage] { width:100%; padding:11px 7px; display:flex; align-items:center; gap:9px; color:#667085; text-align:left; background:transparent; border:0; border-bottom:1px solid #eaecf0; cursor:pointer; }.feature-demo-steps button[data-stage] i { color:#98a2b3; font-size:8px; font-style:normal; font-weight:800; }.feature-demo-steps button[data-stage] b { font-size:9px; }.feature-demo-steps button.is-active { color:#1d2939; }.feature-demo-steps button.is-active i { color:var(--accent); }.feature-demo-replay { width:100%; margin-top:12px; padding:9px; color:var(--accent); background:var(--soft); border:0; border-radius:8px; font-size:8px; font-weight:800; cursor:pointer; }.feature-demo-steps p { margin:10px 0 0; color:#98a2b3; font-size:7px; line-height:1.55; }

/* 订单方案页中的演示入口与弹窗 */
.solution-feature-grid--interactive article { padding:0; overflow:hidden; }
.solution-feature-demo-link { height:100%; padding:22px; display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.solution-feature-demo-link::before { content:attr(data-index); margin-bottom:16px; color:#98a2b3; font-size:9px; font-weight:800; }
.solution-feature-demo-link > span { margin-top:18px; display:flex; align-items:center; justify-content:space-between; color:#175cd3; font-size:10px; font-weight:800; }
.solution-feature-demo-link > span i { width:25px; height:25px; display:grid; place-items:center; background:#eff4ff; border-radius:50%; font-style:normal; transition:transform .18s; }
.solution-feature-demo-link:hover > span i { transform:translateX(3px); }
.solution-feature-grid--interactive article::before { display:none; }
.feature-modal { padding:18px; display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; background:rgba(16,24,40,.64); backdrop-filter:blur(8px); }
.feature-modal.is-open { display:flex; }.feature-modal__backdrop { position:absolute; inset:0; border:0; background:transparent; cursor:default; }.feature-modal__dialog { width:min(1180px,100%); height:min(780px,calc(100vh - 36px)); position:relative; z-index:1; overflow:hidden; background:#f4f7fb; border-radius:20px; box-shadow:0 28px 90px rgba(0,0,0,.3); }.feature-modal__bar { height:52px; padding:0 13px 0 20px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e4e7ec; }.feature-modal__bar strong { color:#344054; font-size:13px; }.feature-modal__close { width:34px; height:34px; display:grid; place-items:center; color:#475467; background:#f2f4f7; border:0; border-radius:9px; font-size:20px; cursor:pointer; }.feature-modal iframe { width:100%; height:calc(100% - 52px); display:block; border:0; }.feature-modal-open { overflow:hidden; }

@media (max-width:720px) { .feature-demo-shell { width:calc(100% - 20px); padding:14px 0 22px; }.feature-demo-heading { align-items:flex-start; flex-direction:column; gap:10px; }.feature-demo-heading__actions { width:100%; flex-wrap:wrap; }.feature-demo-layout { grid-template-columns:1fr; }.feature-demo-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.feature-demo-steps > span,.feature-demo-steps p,.feature-demo-replay { grid-column:1/-1; }.feature-demo-steps button[data-stage] { padding:8px; align-items:flex-start; flex-direction:column; border:1px solid #eaecf0; border-radius:8px; }.feature-demo-app { min-height:440px; grid-template-columns:1fr; }.feature-demo-nav { display:none; }.feature-demo-main { padding:12px; }.feature-demo-context { grid-template-columns:1fr 1fr; }.feature-demo-context > span { grid-column:1/-1; width:max-content; }.feature-progress { grid-template-columns:repeat(2,1fr); }.feature-demo-pointer { display:none; }.feature-modal { padding:0; }.feature-modal__dialog { width:100%; height:100vh; border-radius:0; } }
@media (max-width:420px) { .feature-demo-heading h1 { font-size:26px; }.feature-search { grid-template-columns:1fr 62px; }.feature-operations { grid-template-columns:1fr 70px; }.feature-operations button:nth-of-type(1) { display:none; }.feature-result-row { grid-template-columns:.8fr 1.2fr auto; }.feature-result-row span:nth-of-type(2) { display:none; }.feature-product-row { grid-template-columns:1.45fr .45fr .8fr; }.feature-product-row span:nth-child(3) { display:none; }.feature-document-grid { grid-template-columns:1fr; }.feature-operation-result { align-items:flex-start; }.feature-operation-result > b { display:none; } }
@media (prefers-reduced-motion:reduce) { [data-feature-stage],.feature-demo-pointer { transition:none; } }