/*============ 公共场景引擎 inc_scene.css ============*/
/*方案页/产品页/各行业方案页共用的「适用场景」四卡焦点布局 + 场景插画引擎。
   统一容器: .scene-show-grid / .scene-show / .scene-demo / .scene-point
   插画基础件: .scene-win/nav/hero/chip/phone/map/orbit/…(由 common/inc_solution_scene.html 宏库输出)
   颜色走 --scene-* 中性变量,各页覆盖换主题: .xxx-page{--scene-primary:<主题色>;--scene-soft:<浅底色>;}
   默认 --scene-primary:#246bfd(方案页蓝)。响应式 991/575 断点与动效降级内置。
   注意:本表为公共层,禁止出现页面级前缀(.ai-dialogue-page/.solution-page);插画基础件 scene-* 为全站公共前缀。*/
:root { --scene-primary: #246bfd; --scene-soft: #eff4ff; --scene-accent: #246bfd; --scene-ink: #172033; --scene-line: #e2eaf7; }
/*---------- 适用场景（四卡横向焦点布局，四方案页共用；插画全部由 HTML/CSS 绘制） ----------*/
/*区块底色：柔和蓝系渐变 + 双径向光斑（保持站点蓝色系）*/
.scene-show-grid { display: flex; align-items: stretch; gap: 0.875rem; }
/*8 场景拆为两排时，第二排与首排保持同距*/
.scene-show-grid + .scene-show-grid { margin-top: 0.875rem; }
.scene-show { position: relative; display: flex; min-height: 25rem; min-width: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; border: 1px solid #e2eaf7; border-radius: 1.1rem; background: #fff; padding: 1.75rem 1.5rem 1.35rem; box-shadow: 0 1.1rem 2.4rem rgba(49, 91, 154, 0.09); cursor: pointer; outline: none; transition: flex-grow 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.scene-show:hover { border-color: color-mix(in srgb, var(--scene-primary, #246bfd) 40%, transparent); box-shadow: 0 1.6rem 3rem rgba(49, 91, 154, 0.16); transform: translateY(-0.35rem); }
.scene-show:focus-visible { box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--scene-primary, #246bfd) 20%, transparent), 0 1.6rem 3rem rgba(49, 91, 154, 0.16); }
/*选中态（悬停/聚焦/点按）：品牌蓝渐变 + 白色文案 + 顶部光晕*/
.scene-show.is-active { flex-grow: 1.42; border-color: transparent; background: linear-gradient(152deg, color-mix(in srgb, var(--scene-primary, #246bfd) 90%, #fff) 0%, var(--scene-primary, #246bfd) 46%, color-mix(in srgb, var(--scene-primary, #246bfd) 68%, #101f4b) 100%); box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--scene-primary, #246bfd) 32%, transparent); }
.scene-show.is-active::before { position: absolute; top: -4.5rem; right: -4.5rem; width: 13rem; height: 13rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); content: ""; }
.scene-show.is-active:hover { box-shadow: 0 1.9rem 3.4rem color-mix(in srgb, var(--scene-primary, #246bfd) 42%, transparent); }
.scene-show > header { position: relative; z-index: 1; margin-bottom: 1.4rem; }
.scene-show h3 { margin: 0 0 0.6rem; color: #172033; font-size: 1.18rem; font-weight: 750; }
.scene-show header p { margin: 0; color: #667085; font-size: 0.8rem; line-height: 1.7; }
.scene-show.is-active h3 { color: #fff; }
.scene-show.is-active header p { color: rgba(255, 255, 255, 0.82); }
/*场景副标题 chip*/
.scene-point { display: inline-flex; align-items: center; gap: 0.28rem; margin-top: 0.8rem; border-radius: 999px; background: var(--scene-soft, #eff4ff); padding: 0.24rem 0.66rem; color: var(--solution-accent, var(--scene-primary, #246bfd)); font-size: 0.68rem; font-weight: 650; }
.scene-show.is-active .scene-point { border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); color: #fff; }
/*样机画布：钉在卡片底部，元素绝对定位*/
.scene-demo { position: relative; z-index: 1; height: 13rem; margin-top: auto; }
/*--- 样机基础件：浏览器窗口 ---*/
.scene-demo .scene-win { position: absolute; overflow: hidden; border: 1px solid rgba(190, 210, 241, 0.9); border-radius: 0.7rem; background: #fff; box-shadow: 0 0.9rem 1.9rem rgba(49, 91, 154, 0.16); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.scene-demo .scene-win-bar { display: flex; align-items: center; gap: 0.18rem; height: 1.05rem; padding: 0 0.45rem; border-bottom: 1px solid #e7edf6; background: #f8fafc; }
.scene-demo .scene-win-bar > i { width: 0.24rem; height: 0.24rem; border-radius: 50%; background: #f97066; }
.scene-demo .scene-win-bar > i:nth-child(2) { background: #fdb022; }
.scene-demo .scene-win-bar > i:nth-child(3) { background: #32d583; }
.scene-demo .scene-win-bar > span { flex: 1; height: 0.42rem; margin-left: 0.3rem; border-radius: 0.2rem; background: #eef2f8; }
.scene-demo .scene-win-body { padding: 0.5rem; }
.scene-demo .scene-nav { display: flex; align-items: center; gap: 0.25rem; height: 1rem; }
.scene-demo .scene-nav > b { display: grid; width: 0.85rem; height: 0.85rem; margin-right: auto; place-items: center; border-radius: 0.2rem; background: var(--scene-primary, #246bfd); color: #fff; font-size: 0.42rem; }
.scene-demo .scene-nav-plain > b { background: #98a2b3; }
.scene-demo .scene-nav > i { width: 0.75rem; height: 0.12rem; border-radius: 1rem; background: #ccd5e4; }
.scene-demo .scene-nav > span { width: 1.1rem; height: 0.45rem; border-radius: 0.12rem; background: var(--scene-primary, #246bfd); }
.scene-demo .scene-line { display: block; height: 0.18rem; border-radius: 1rem; background: #c4d2e8; }
.scene-demo .scene-line-lg { width: 78%; }
.scene-demo .scene-line-md { width: 55%; }
.scene-demo .scene-line-sm { width: 38%; }
.scene-demo .scene-line-xs { width: 26%; }
.scene-demo .scene-btn { display: inline-block; width: 1.9rem; height: 0.55rem; border-radius: 0.14rem; background: var(--scene-primary, #246bfd); }
.scene-demo .scene-thumb { display: block; height: 1.15rem; border-radius: 0.2rem; background: #eef2f7; }
.scene-demo .scene-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; margin-top: 0.45rem; }
.scene-demo .scene-row-2 { grid-template-columns: repeat(2, 1fr); }
/*hero 区三种形态：左图右文 / 纯文案 / 居中品牌*/
.scene-demo .scene-hero { margin-top: 0.4rem; border-radius: 0.35rem; background: linear-gradient(135deg, color-mix(in srgb, var(--scene-primary, #246bfd) 5%, #fff), color-mix(in srgb, var(--scene-primary, #246bfd) 11%, #fff)); }
.scene-demo .scene-hero-product { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem; }
.scene-demo .scene-hero-product > u { display: grid; width: 2.7rem; height: 2.7rem; flex: none; place-items: center; border-radius: 0.32rem; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0.3rem 0.8rem color-mix(in srgb, var(--scene-primary, #246bfd) 12%, transparent); color: var(--scene-primary, #246bfd); font-size: 1rem; }
.scene-demo .scene-hero-product > div { flex: 1; min-width: 0; }
.scene-demo .scene-hero-product .scene-line { margin-bottom: 0.28rem; }
.scene-demo .scene-hero-product p { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.scene-demo .scene-hero-product em { width: 1.3rem; height: 0.45rem; border: 1px solid color-mix(in srgb, var(--scene-primary, #246bfd) 8%, #fff); border-radius: 1rem; background: #fff; }
.scene-demo .scene-hero-plain { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.28rem; padding: 0.6rem 0.55rem; }
.scene-demo .scene-hero-brand { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem 0.6rem; }
.scene-demo .scene-logo { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--scene-primary, #246bfd); box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--scene-primary, #246bfd) 30%, transparent); color: #fff; font-size: 0.85rem; }
.scene-demo .scene-goods { min-width: 0; }
.scene-demo .scene-goods .scene-thumb { height: 1.5rem; }
.scene-demo .scene-goods .scene-line { margin-top: 0.25rem; }
/*浮动说明卡*/
.scene-demo .scene-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.42rem; border: 1px solid rgba(214, 226, 246, 0.95); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.97); padding: 0.38rem 0.55rem; box-shadow: 0 0.7rem 1.5rem rgba(49, 91, 154, 0.18); }
.scene-demo .scene-chip > i { display: grid; width: 1.2rem; height: 1.2rem; flex: none; place-items: center; border-radius: 0.32rem; background: var(--scene-soft, #eff4ff); color: var(--scene-primary, #246bfd); font-size: 0.62rem; }
.scene-demo .scene-chip > span { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.scene-demo .scene-chip b { color: #172033; font-size: 0.52rem; font-weight: 700; white-space: nowrap; }
.scene-demo .scene-chip em { color: #8a97ab; font-size: 0.44rem; font-style: normal; white-space: nowrap; }
.scene-demo .scene-chip-tr { top: 0; right: 0; }
.scene-demo .scene-chip-tl { top: 0; left: 0; }
.scene-demo .scene-chip-br { right: 0; bottom: 0; }
.scene-demo .scene-chip-bl { bottom: 0; left: 0; }
/*--- 各场景构图 ---*/
/*新品验证 / 多区域 / 规模化：主窗口居中下锚*/
.scene-demo .scene-win-main { top: 1.7rem; right: 5%; bottom: 0; left: 5%; }
.scene-show:hover .scene-win-main { transform: translateY(-0.2rem); }
/*社媒承接：后置落地页窗口 + 前置手机帖*/
.scene-demo .scene-win-back { top: 0.4rem; right: 0; width: 66%; }
.scene-demo .scene-phone { position: absolute; z-index: 2; bottom: 0; left: 1%; width: 4.4rem; overflow: hidden; border: 1px solid #d7e2f3; border-radius: 0.8rem; background: #fff; box-shadow: 0 1rem 2rem rgba(49, 91, 154, 0.2); }
.scene-demo .scene-phone-notch { height: 0.8rem; }
.scene-demo .scene-phone-notch::after { display: block; width: 1.2rem; height: 0.22rem; margin: 0.3rem auto 0; border-radius: 1rem; background: #e2e9f4; content: ""; }
.scene-demo .scene-phone-screen { padding: 0.1rem 0.4rem 0.5rem; }
.scene-demo .scene-post-head { display: flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.35rem; }
.scene-demo .scene-post-head > b { width: 0.7rem; height: 0.7rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--scene-primary, #246bfd), color-mix(in srgb, var(--scene-primary, #246bfd) 60%, #fff)); }
.scene-demo .scene-post-head .scene-line { flex: 1; }
.scene-demo .scene-post-photo { display: grid; height: 3.4rem; place-items: center; border-radius: 0.35rem; background: linear-gradient(135deg, color-mix(in srgb, var(--scene-primary, #246bfd) 5%, #fff), color-mix(in srgb, var(--scene-primary, #246bfd) 11%, #fff)); color: var(--scene-primary, #246bfd); font-size: 1rem; }
.scene-demo .scene-post-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; color: #b7c4d8; font-size: 0.5rem; }
.scene-demo .scene-post-actions i:first-child { color: #f97066; }
/*渠道拓展：平台店铺与独立站双窗口 + 中心互换徽标*/
.scene-demo .scene-win-half { top: 1.9rem; bottom: 0.9rem; width: 47%; }
.scene-demo .scene-win-platform { left: 0; }
.scene-demo .scene-win-own { right: 0; z-index: 1; }
.scene-demo .scene-swap { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--scene-primary, #246bfd); box-shadow: 0 0.5rem 1.1rem color-mix(in srgb, var(--scene-primary, #246bfd) 35%, transparent); color: #fff; font-size: 0.75rem; transform: translate(-50%, -50%); }
/*B2B 询盘：询盘表单（标签线 + 输入条 + 提交按钮）*/
.scene-demo .scene-form { display: flex; flex-direction: column; gap: 0.38rem; margin-top: 0.55rem; }
.scene-demo .scene-form > p { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.scene-demo .scene-form > p > span { width: 22%; flex: none; }
.scene-demo .scene-form > p > i { flex: 1; height: 0.5rem; border: 1px solid color-mix(in srgb, var(--scene-primary, #246bfd) 8%, #fff); border-radius: 0.14rem; background: #fff; }
.scene-demo .scene-form > p > i.scene-form-text { height: 0.95rem; }
.scene-demo .scene-form-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; }
/*会员复购：会员卡（头像 + 等级进度条） + 双优惠券*/
.scene-demo .scene-member { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.5rem; border-radius: 0.35rem; background: linear-gradient(135deg, color-mix(in srgb, var(--scene-primary, #246bfd) 5%, #fff), color-mix(in srgb, var(--scene-primary, #246bfd) 11%, #fff)); padding: 0.55rem; }
.scene-demo .scene-avatar { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0.3rem 0.8rem color-mix(in srgb, var(--scene-primary, #246bfd) 12%, transparent); color: var(--scene-primary, #246bfd); font-size: 0.85rem; }
.scene-demo .scene-member-info { flex: 1; min-width: 0; }
.scene-demo .scene-level { height: 0.32rem; margin-top: 0.35rem; overflow: hidden; border-radius: 1rem; background: rgba(255, 255, 255, 0.85); }
.scene-demo .scene-level > i { display: block; width: 68%; height: 100%; border-radius: 1rem; background: linear-gradient(90deg, var(--scene-primary, #246bfd), color-mix(in srgb, var(--scene-primary, #246bfd) 60%, #fff)); }
.scene-demo .scene-coupons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; margin-top: 0.45rem; }
.scene-demo .scene-coupon { position: relative; height: 1.1rem; border: 1px dashed color-mix(in srgb, var(--scene-primary, #246bfd) 45%, #fff); border-radius: 0.25rem; background: color-mix(in srgb, var(--scene-primary, #246bfd) 7%, #fff); }
.scene-demo .scene-coupon::before { position: absolute; top: 50%; left: 0.45rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--scene-primary, #246bfd); content: ""; opacity: 0.75; transform: translateY(-50%); }
.scene-demo .scene-coupon::after { position: absolute; top: 50%; right: 0.4rem; left: 1.1rem; height: 0.14rem; border-radius: 1rem; background: #c4d2e8; content: ""; transform: translateY(-50%); }
/*AI 生成（site_build）：提示词输入条（文案线 + 生成按钮）*/
.scene-demo .scene-prompt { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; border: 1px solid color-mix(in srgb, var(--scene-primary, #246bfd) 8%, #fff); border-radius: 0.35rem; background: #fff; padding: 0.3rem 0.35rem 0.3rem 0.5rem; box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--scene-primary, #246bfd) 8%, transparent); }
.scene-demo .scene-prompt .scene-line { flex: 1; }
.scene-demo .scene-btn-ai { display: grid; width: 1.5rem; height: 0.85rem; flex: none; place-items: center; color: #fff; font-size: 0.5rem; }
/*内容列表（site_build/official_web/global_site 资讯、公告与 SEO 场景共用）：行卡片（缩略块 + 双文案线）*/
.scene-demo .scene-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.scene-demo .scene-list > p { display: flex; align-items: center; gap: 0.45rem; margin: 0; border: 1px solid #e7edf6; border-radius: 0.3rem; background: #f8fafc; padding: 0.3rem 0.4rem; }
.scene-demo .scene-list .scene-thumb { width: 1.2rem; height: 0.9rem; flex: none; }
.scene-demo .scene-list > p > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.18rem; }
/*移动优先（site_build）：手机屏内文案线组（替代社媒动作行）*/
.scene-demo .scene-phone-lines { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.35rem; }
/*品牌商城：居中旗舰店窗口*/
.scene-demo .scene-win-brand { top: 1.9rem; right: 9%; bottom: 0; left: 9%; }
.scene-show:hover .scene-win-brand { transform: translateY(-0.2rem); }
/*多区域：币种圆片 + 地球仪浮标*/
.scene-demo .scene-coins { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.45rem; }
.scene-demo .scene-coins > span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid color-mix(in srgb, var(--scene-primary, #246bfd) 8%, #fff); border-radius: 50%; background: #fff; box-shadow: 0 0.2rem 0.5rem rgba(49, 91, 154, 0.1); color: var(--scene-primary, #246bfd); font-size: 0.6rem; font-weight: 700; }
.scene-demo .scene-coins > .scene-line { flex: 1; margin-left: 0.2rem; }
.scene-demo .scene-globe { position: absolute; z-index: 2; top: 0.2rem; right: 1%; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--scene-primary, #246bfd), color-mix(in srgb, var(--scene-primary, #246bfd) 65%, #fff)); box-shadow: 0 0.7rem 1.5rem color-mix(in srgb, var(--scene-primary, #246bfd) 32%, transparent); color: #fff; font-size: 1rem; }
.scene-demo .scene-globe::after { position: absolute; right: -0.18rem; bottom: 0.05rem; width: 0.5rem; height: 0.5rem; border: 2px solid #fff; border-radius: 50%; background: #fdb022; content: ""; }
/*规模化：看板窗口（侧栏 + 指标 + 柱状图）*/
.scene-demo .scene-dash-body { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.5rem; }
.scene-demo .scene-side { display: flex; flex-direction: column; align-items: center; gap: 0.32rem; border-right: 1px solid #e7edf6; padding-right: 0.4rem; }
.scene-demo .scene-side > b { display: grid; width: 0.9rem; height: 0.9rem; margin-bottom: 0.15rem; place-items: center; border-radius: 0.22rem; background: var(--scene-primary, #246bfd); color: #fff; font-size: 0.44rem; }
.scene-demo .scene-side > i { width: 100%; height: 0.16rem; border-radius: 1rem; background: #d7e0ee; }
.scene-demo .scene-side > i.active { background: var(--scene-primary, #246bfd); }
.scene-demo .scene-dash-main { min-width: 0; }
.scene-demo .scene-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.scene-demo .scene-stats > u { display: block; border: 1px solid #e7edf6; border-radius: 0.3rem; background: #f8fafc; padding: 0.3rem; }
.scene-demo .scene-stats b { display: block; width: 60%; height: 0.3rem; margin-bottom: 0.22rem; border-radius: 1rem; background: #9db8e5; }
.scene-demo .scene-bars { display: flex; align-items: flex-end; gap: 0.35rem; height: 2.6rem; margin-top: 0.5rem; padding: 0 0.1rem; }
.scene-demo .scene-bars > i { flex: 1; border-radius: 0.12rem 0.12rem 0 0; background: color-mix(in srgb, var(--scene-primary, #246bfd) 22%, #fff); }
.scene-demo .scene-bars > i:nth-child(1) { height: 38%; }
.scene-demo .scene-bars > i:nth-child(2) { height: 56%; }
.scene-demo .scene-bars > i:nth-child(3) { height: 46%; }
.scene-demo .scene-bars > i:nth-child(4) { height: 72%; background: color-mix(in srgb, var(--scene-primary, #246bfd) 45%, #fff); }
.scene-demo .scene-bars > i:nth-child(5) { height: 92%; background: var(--scene-primary, #246bfd); }
/*迷你胶囊:小图标 + 单行小字(orbit 环绕节点/tiles 瓦片共用基底)*/
.scene-demo .scene-dot { display: inline-flex; align-items: center; gap: 0.28rem; border: 1px solid #e7edf6; border-radius: 1rem; background: #fff; padding: 0.2rem 0.5rem; box-shadow: 0 0.25rem 0.6rem rgba(49, 91, 154, 0.1); color: #475467; font-size: 0.44rem; font-weight: 600; white-space: nowrap; }
.scene-demo .scene-dot > i { color: var(--scene-primary, #246bfd); font-size: 0.55rem; }
/*中心枢纽:中心图标 + 虚线轨道 + 环绕 4~6 节点(生态环绕/AI 能力辐射/服务矩阵)*/
.scene-demo .scene-orbit-body { display: grid; place-items: center; }
.scene-demo .scene-orbit { position: relative; width: 8.6rem; height: 8.6rem; margin-top: 0.2rem; }
.scene-demo .scene-orbit::before { position: absolute; inset: 1.5rem; border: 1px dashed color-mix(in srgb, var(--scene-primary, #246bfd) 40%, #fff); border-radius: 50%; content: ""; }
.scene-demo .scene-orbit-hub { position: absolute; top: 50%; left: 50%; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--scene-primary, #246bfd), color-mix(in srgb, var(--scene-primary, #246bfd) 60%, #fff)); box-shadow: 0 0.6rem 1.3rem color-mix(in srgb, var(--scene-primary, #246bfd) 35%, transparent); color: #fff; font-size: 1rem; transform: translate(-50%, -50%); }
.scene-demo .scene-orbit-node { position: absolute; transform: translate(-50%, -50%); }
.scene-demo span.scene-orbit-node:nth-of-type(1) { top: 8%; left: 50%; }
.scene-demo span.scene-orbit-node:nth-of-type(2) { top: 30%; left: 90%; }
.scene-demo span.scene-orbit-node:nth-of-type(3) { top: 70%; left: 90%; }
.scene-demo span.scene-orbit-node:nth-of-type(4) { top: 92%; left: 50%; }
.scene-demo span.scene-orbit-node:nth-of-type(5) { top: 70%; left: 10%; }
.scene-demo span.scene-orbit-node:nth-of-type(6) { top: 30%; left: 10%; }
/*地图路线:仿地图网格 + 虚线路线 + 双定位针 + 移动徽标(出行交通/文旅导览/门店分布)*/
.scene-demo .scene-map-body { padding: 0; }
.scene-demo .scene-map { position: relative; height: 9.2rem; overflow: hidden; background: repeating-linear-gradient(0deg, transparent 0 1.1rem, #e8eef7 1.1rem calc(1.1rem + 1px)), repeating-linear-gradient(90deg, transparent 0 1.1rem, #e8eef7 1.1rem calc(1.1rem + 1px)), color-mix(in srgb, var(--scene-primary, #246bfd) 5%, #f6f9fd); }
.scene-demo .scene-map-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-demo .scene-map-route path { fill: none; opacity: 0.85; stroke: var(--scene-primary, #246bfd); stroke-dasharray: 5 4; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.scene-demo .scene-map-pin { position: absolute; z-index: 1; color: var(--scene-primary, #246bfd); font-size: 0.9rem; filter: drop-shadow(0 0.15rem 0.25rem rgba(49, 91, 154, 0.35)); transform: translate(-50%, -90%); }
.scene-demo .scene-map-pin-a { top: 78%; left: 9%; }
.scene-demo .scene-map-pin-b { top: 26%; left: 91%; }
.scene-demo .scene-map-bus { position: absolute; z-index: 2; top: 55%; left: 47%; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--scene-primary, #246bfd); box-shadow: 0 0.4rem 0.9rem color-mix(in srgb, var(--scene-primary, #246bfd) 35%, transparent); color: #fff; font-size: 0.65rem; transform: translate(-50%, -50%); }
/*图标宫格:4 格一行(超 4 个转 3×2)图标+文字瓦片(功能矩阵/便民服务/经营模块)*/
.scene-demo .scene-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.5rem; }
.scene-demo .scene-tiles-6 { grid-template-columns: repeat(3, 1fr); }
.scene-demo .scene-tile { flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0.55rem 0.3rem; border-radius: 0.35rem; text-align: center; white-space: normal; }
.scene-demo .scene-tile > i { font-size: 0.95rem; }
/*直播场景:深色直播间手机(观看人数胶囊/弹幕行/礼物行)*/
.scene-demo .scene-phone-live { border-color: #344054; }
.scene-demo .scene-live-screen { background: linear-gradient(160deg, #1d2939, #344054); }
.scene-demo .scene-live-head { display: flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.3rem; }
.scene-demo .scene-live-head > b { display: grid; width: 0.95rem; height: 0.95rem; flex: none; place-items: center; border-radius: 50%; background: var(--scene-primary, #246bfd); color: #fff; font-size: 0.5rem; }
.scene-demo .scene-live-head > span { display: inline-flex; align-items: center; gap: 0.15rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.16); padding: 0.08rem 0.3rem; color: #fff; font-size: 0.4rem; }
.scene-demo .scene-live-barrages { display: flex; min-height: 2.7rem; flex-direction: column; align-items: flex-start; gap: 0.22rem; }
.scene-demo .scene-live-barrages > span { max-width: 92%; overflow: hidden; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); padding: 0.12rem 0.35rem; color: rgba(255, 255, 255, 0.92); font-size: 0.4rem; text-overflow: ellipsis; white-space: nowrap; }
.scene-demo .scene-live-actions { display: flex; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.5rem; }
.scene-demo .scene-live-actions i { color: rgba(255, 255, 255, 0.75); }
.scene-demo .scene-live-actions i:first-child { color: #f97066; }
.scene-demo .scene-live-actions i:nth-child(2) { color: #fdb022; }
/*插画图:等距/手绘插画直出(区块项 image_ 字段)*/
.scene-demo .scene-image { position: absolute; inset: 0.3rem 6% 0; display: grid; place-items: center; }
.scene-demo .scene-image > img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0.8rem 1.6rem rgba(49, 91, 154, 0.18)); }
@media (max-width: 991px) {
  .scene-show-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-show { min-height: 24rem; }
  .scene-demo { height: 12rem; }
}
@media (max-width: 575px) {
  .scene-show-grid { grid-template-columns: 1fr; }
  .scene-show { min-height: 22rem; padding: 1.4rem 1.4rem 1.25rem; }
  .scene-demo { height: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-show,
  .scene-demo .scene-win { transition: none; }
}