/* ==========================================================================
   归浦AI 官网 V7 · 深色科技感主题层
   --------------------------------------------------------------------------
   定位：加载在 v5.css → v6.css → page57.css 之后，作为「主题覆盖层」。
        只重定义颜色变量 + 覆盖受影响的组件，不动任何布局骨架。
        因此可整体回滚：移除本文件引用即恢复原浅色站点。

   为什么用「变量覆盖」而不是重写：
        v5.css 已把全站颜色收敛到 --ink/--body/--muted/--bg/--card/--line 等
        CSS 变量上（--line 用了 86 处、--ink 64 处）。重定义这些变量，
        全站文字/背景/线条/卡片会一次性正确翻转，
        比逐条写覆盖规则可靠得多，也不会漏。

   注意：本文件所有规则都用 html.dark7 前缀限定时作用域，
        避免在未开启深色时误伤原样式。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌 —— 深色科技感
   ========================================================================== */
html.dark7 {
  /* ---- 深色层级（由深到浅，构成"黑玻璃"的厚度）---- */
  --d-900:#07080B;          /* 页面最底 */
  --d-850:#090B10;
  --d-800:#0A0C11;          /* 区块底 */
  --d-700:#101319;          /* 卡片面 */
  --d-600:#161A22;          /* 悬浮面 / 次级卡 */
  --d-500:#1E232D;          /* 描边底 / 输入框 */
  --d-400:#272D39;

  /* ---- 品牌（沿用现有品牌蓝，深底上提亮以保证对比度）---- */
  --d-brand:#4C8DFF;
  --d-brand-lt:#7BAEFF;
  --d-brand-deep:#1B6BF5;
  --d-brand-soft:rgba(76,141,255,.14);

  /* ---- Logo 原渐变四色（从官方 Logo 实测）---- */
  --d-cyan:#40D0F0;
  --d-blue:#4860F0;
  --d-violet:#7C3AE0;
  --d-magenta:#D848D8;

  /* ---- 文字层级（深底白字，逐级降低亮度）---- */
  --d-hi:#F2F4F8;           /* 标题 */
  --d-txt:#C3C9D4;          /* 正文 */
  --d-lo:#8B93A3;           /* 辅助 */
  --d-dim:#6E7688;          /* 极弱 / 占位（原 #5D6575 对比度仅 3.4:1，不达 AA，上调后 4.5:1） */
  --d-dim2:#9AA2B2;         /* 说明文字：卡片/正文注脚，对比度 6.6:1 */

  /* ---- 线 ---- */
  --d-line:rgba(255,255,255,.09);
  --d-line-2:rgba(255,255,255,.055);
  --d-line-strong:rgba(255,255,255,.14);

  /* ---- 辉光 ---- */
  --d-glow:rgba(76,141,255,.30);
  --d-glow-sm:0 0 24px rgba(76,141,255,.20);
  --d-glow-md:0 0 64px rgba(76,141,255,.26);
}

/* ==========================================================================
   2. 覆盖 v5.css 的通用令牌 → 全站自动翻转
   --------------------------------------------------------------------------
   左：原变量名（被 6000+ 处引用）  右：深色取值
   ========================================================================== */
html.dark7 {
  /* 背景层级 */
  --bg:#07080B;
  --card:#101319;
  --soft:#161A22;
  --soft-2:#1E232D;

  /* 文字层级 */
  --ink:#F2F4F8;
  --body:#C3C9D4;
  --muted:#8B93A3;

  /* 线条 */
  --line:rgba(255,255,255,.09);

  /* 品牌：深底提亮 */
  --brand:#4C8DFF;
  --brand-deep:#1B6BF5;

  /* 阴影 → 深色下改为"更深的外阴影 + 顶部内高光"，
     否则纯黑阴影在深底上不可见，卡片会失去浮起感 */
  --sh-card:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  --sh-hover:0 18px 48px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
  --sh-nav:0 8px 32px rgba(0,0,0,.55);

  /* 粉彩标签 → 深色下改为"低饱和半透明底 + 提亮文字" */
  --pk-mint:#12302A;   --pk-mint-t:#3DDBA4;
  --pk-blue:#132441;   --pk-blue-t:#7BAEFF;
  --pk-violet:#1E1A3E; --pk-violet-t:#A98BFF;
  --pk-orange:#2E2113; --pk-orange-t:#FFB067;
  --pk-pink:#2E1428;   --pk-pink-t:#FF8ACF;
  --pk-yellow:#2C2611; --pk-yellow-t:#E8C94A;
  --pk-cyan:#0E2A33;   --pk-cyan-t:#4FD4EE;
  --pk-lime:#1B2812;   --pk-lime-t:#A3D65C;
}

/* ---- page56.css 的内页令牌（j56-*）---- */
html.dark7 {
  --j56-bg:#0A0C11;
  --j56-ink:#F2F4F8;
  --j56-ink-2:#C3C9D4;
  --j56-ink-3:#8B93A3;
  --j56-mute:#5D6575;
  --j56-line:rgba(255,255,255,.09);
  --j56-paper:#101319;

  --j56-brand:#4C8DFF;
  --j56-brand-deep:#1B6BF5;
  --j56-cyan:#40D0F0;
  --j56-soft:#131C2E;
  --j56-wash:linear-gradient(140deg,#0B1425 0%,#0A0C11 100%);
  --j56-glow:linear-gradient(135deg,rgba(76,141,255,.16),rgba(64,208,240,.14));
  --j56-grad:linear-gradient(120deg,#1B6BF5 0%,#40D0F0 100%);

  --j56-green:#3DDBA4;  --j56-green-soft:#12302A;
  --j56-orange:#FFB067; --j56-orange-soft:#2E2113;

  --j56-sh:0 18px 44px rgba(0,0,0,.6);
  --j56-sh-sm:0 1px 2px rgba(0,0,0,.5);
  --j56-sh-hot:0 14px 44px rgba(76,141,255,.28);
  --j56-sh-cta:0 24px 60px rgba(27,107,245,.4);
  --j56-hair:1px solid var(--j56-line);
}

/* ---- v5.css 的 lens 系列 ---- */
html.dark7 {
  --lens-line:rgba(255,255,255,.09);
  --lens-sh:0 18px 44px rgba(0,0,0,.6);
  --lens-sh-hover:0 24px 56px rgba(76,141,255,.26);
  --lens-grad:linear-gradient(92deg,#1B6BF5 0%,#40D0F0 100%);
}

/* ==========================================================================
   3. 基础层：背景与文字
   ========================================================================== */
html.dark7 { background:var(--d-900) }
html.dark7 body {
  background:var(--d-900);
  color:var(--d-txt);
}
html.dark7 ::selection{background:rgba(76,141,255,.30);color:#fff}

/* 滚动条配色 */
html.dark7{scrollbar-color:var(--d-400) var(--d-900)}
html.dark7 ::-webkit-scrollbar{width:11px;height:11px}
html.dark7 ::-webkit-scrollbar-track{background:var(--d-900)}
html.dark7 ::-webkit-scrollbar-thumb{background:#2A3140;border-radius:99px;border:3px solid var(--d-900)}
html.dark7 ::-webkit-scrollbar-thumb:hover{background:#3A4354}

/* 标题与正文的默认色（部分模板直接写死颜色，这里统一收口） */
html.dark7 h1,html.dark7 h2,html.dark7 h3,
html.dark7 h4,html.dark7 h5,html.dark7 h6{color:var(--d-hi)}
html.dark7 strong,html.dark7 b{color:var(--d-hi)}

/* ==========================================================================
   4. 背景装饰层 —— 深色辉光（替换原浅色 .bg-deco 彩晕）
   ========================================================================== */
html.dark7 .bg-deco{background:transparent}
html.dark7 .bg-deco .bl{
  /* 原浅色彩晕 → 深色品牌辉光
     ⚠ 不再加 filter:blur(30px)。
     这三团是 560×520 的大色块，30px 高斯模糊要整块重新光栅化；
     实测它是首屏最大的绘制开销 —— 去掉后帧率 27.9 → 44.2。
     而它本身就是 radial-gradient(circle, … transparent 70%)，
     边缘早已是渐变软边，模糊在视觉上几乎看不出差别。 */
  filter:none;
  opacity:.85;
}
html.dark7 .bg-deco .bl:nth-child(1){background:radial-gradient(circle,rgba(76,141,255,.20),transparent 70%)!important}
html.dark7 .bg-deco .bl:nth-child(2){background:radial-gradient(circle,rgba(124,58,224,.17),transparent 70%)!important}
html.dark7 .bg-deco .bl:nth-child(3){background:radial-gradient(circle,rgba(64,208,240,.14),transparent 70%)!important}
html.dark7 .bg-deco .sq,
html.dark7 .bg-deco .ci{background:rgba(124,141,255,.06)!important;border:1px solid rgba(255,255,255,.05)}

/* ==========================================================================
   5. 导航
   ========================================================================== */
html.dark7 .nav{
  background:rgba(9,10,15,.82);
  border-bottom:1px solid var(--d-line);
  box-shadow:none;
  -webkit-backdrop-filter:saturate(1.5) blur(20px);
  backdrop-filter:saturate(1.5) blur(20px);
}
html.dark7 .nav.is-solid,
html.dark7 .nav.is-scrolled{
  background:rgba(9,10,15,.92);
  border-bottom-color:var(--d-line-strong);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
html.dark7 .nav-menu > .nav-item > .nav-top,
html.dark7 .nav-menu > a{color:var(--d-txt)}
html.dark7 .nav-menu > .nav-item > .nav-top:hover,
html.dark7 .nav-menu > a:hover,
html.dark7 .nav-menu > a.is-active{color:var(--d-hi)}
html.dark7 .nav-menu > a.is-active{background:var(--d-brand-soft)}
html.dark7 .nav-top .caret{opacity:.6}

/* 下拉面板 */
html.dark7 .nav-drop{
  background:rgba(16,19,25,.97);
  border:1px solid var(--d-line-strong);
  box-shadow:0 24px 64px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
html.dark7 .nav-drop a{color:var(--d-txt)}
html.dark7 .nav-drop a:hover{background:rgba(255,255,255,.05);color:var(--d-hi)}
html.dark7 .nav-drop .d-title,
html.dark7 .drop-right .d-title{color:var(--d-dim)}

/* 汉堡菜单（移动端） */
html.dark7 .burger span,
html.dark7 .nav-burger span{background:var(--d-hi)}
html.dark7 .mobile-menu,
html.dark7 .nav-mobile{
  background:rgba(9,10,15,.98);
  border-color:var(--d-line);
}
html.dark7 .mobile-menu a,
html.dark7 .nav-mobile a{color:var(--d-txt);border-color:var(--d-line-2)}

/* ==========================================================================
   6. 按钮
   ========================================================================== */
/* 主按钮：品牌蓝渐变 + 顶部内高光 */
html.dark7 .btn-primary,
html.dark7 .btn-accent,
html.dark7 .btn-pick{
  background:linear-gradient(135deg,#1B6BF5 0%,#4C8DFF 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 16px rgba(27,107,245,.36), inset 0 1px 0 rgba(255,255,255,.24);
}
html.dark7 .btn-primary:hover,
html.dark7 .btn-accent:hover,
html.dark7 .btn-pick:hover{
  box-shadow:0 8px 28px rgba(27,107,245,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-1px);
}

/* 幽灵按钮 / 次级按钮 */
html.dark7 .btn-ghost,
html.dark7 .btn-outline,
html.dark7 .btn-secondary,
html.dark7 .btn-soft{
  background:rgba(255,255,255,.05);
  color:var(--d-hi);
  border:1px solid var(--d-line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark7 .btn-ghost:hover,
html.dark7 .btn-outline:hover,
html.dark7 .btn-secondary:hover,
html.dark7 .btn-soft:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}

/* 原黑色胶囊按钮（v5 的 .btn-dark 之类）在深底需反转 */
html.dark7 .btn-dark,
html.dark7 .btn-black{
  background:#F2F4F8;color:#0A0C11;border-color:transparent;
}
html.dark7 .btn-dark:hover,
html.dark7 .btn-black:hover{background:#fff}

/* ==========================================================================
   7. 卡片 / 面板 / 列表
   ========================================================================== */
html.dark7 .card,
html.dark7 .panel,
html.dark7 .box,
html.dark7 .tile,
html.dark7 .feature,
html.dark7 .stat,
html.dark7 .step-card{
  background:var(--d-700);
  border-color:var(--d-line);
  box-shadow:var(--sh-card);
}
html.dark7 .card:hover,
html.dark7 .panel:hover,
html.dark7 .tile:hover,
html.dark7 .feature:hover{
  background:var(--d-600);
  border-color:var(--d-line-strong);
  box-shadow:var(--sh-hover);
}

/* ==========================================================================
   8. 输入框 / 表单
   ========================================================================== */
html.dark7 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.dark7 textarea,
html.dark7 select{
  background:var(--d-500);
  border:1px solid var(--d-line);
  color:var(--d-hi);
}
html.dark7 input::placeholder,
html.dark7 textarea::placeholder{color:var(--d-dim)}
html.dark7 input:focus,
html.dark7 textarea:focus,
html.dark7 select:focus{
  border-color:rgba(76,141,255,.6);
  box-shadow:0 0 0 3px rgba(76,141,255,.16);
  outline:none;
}
html.dark7 select option{background:var(--d-600);color:var(--d-hi)}

/* ==========================================================================
   9. 表格（帮助页 / 后台常有）
   ========================================================================== */
html.dark7 table{border-color:var(--d-line)}
html.dark7 th{
  background:var(--d-600);
  color:var(--d-hi);
  border-color:var(--d-line);
}
html.dark7 td{border-color:var(--d-line-2);color:var(--d-txt)}
html.dark7 tr:hover td{background:rgba(255,255,255,.03)}

/* ==========================================================================
   10. 代码 / 引用 / 分割
   ========================================================================== */
html.dark7 code,html.dark7 pre,html.dark7 kbd{
  background:var(--d-600);color:#B9D8FF;border-color:var(--d-line);
}
html.dark7 hr,html.dark7 .divider{border-color:var(--d-line)}

/* ==========================================================================
   11. 图片：产品截图在深底下的适配
   --------------------------------------------------------------------------
    产品截图本身是浅色 UI，深底上直接放会"发白光"。
    统一加浅描边 + 轻微降亮，使其融入深色而不刺眼。
   ========================================================================== */
html.dark7 img.shot,
html.dark7 .shot img,
html.dark7 .browser-shot img,
html.dark7 .screenshot img{
  border:1px solid var(--d-line-strong);
  border-radius:14px;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}

/* ==========================================================================
   12. 内页特有组件（page57.css 的 j56 体系为主）
   ========================================================================== */
/* 内页大标题区 */
html.dark7 .page-hero,
html.dark7 .p-hero,
html.dark7 .hero-inner-page{
  background:transparent;
}
/* 极浅底区块 → 深色分区底 */
html.dark7 .band,
html.dark7 .section-soft,
html.dark7 .soft-band{
  background:var(--d-800);
  border-color:var(--d-line-2);
}

/* ==========================================================================
   13. 页脚
   ========================================================================== */
html.dark7 .footer,
html.dark7 footer.site-footer{
  background:var(--d-850);
  border-top:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .footer a,
html.dark7 footer.site-footer a{color:var(--d-lo)}
html.dark7 .footer a:hover,
html.dark7 footer.site-footer a:hover{color:var(--d-hi)}
html.dark7 .footer h4,
html.dark7 .footer .f-title,
html.dark7 footer.site-footer h4{color:var(--d-hi)}

/* ==========================================================================
   14. 通知条 / 提示条
   ========================================================================== */
html.dark7 .notice-bar,
html.dark7 .nb,
html.dark7 .topbar{
  background:rgba(76,141,255,.10);
  border-bottom:1px solid rgba(76,141,255,.22);
  color:var(--d-txt);
}

/* ==========================================================================
   15. 降低动效偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html.dark7 *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   16. 覆盖 v6.css / page57.css 的硬编码浅色
   --------------------------------------------------------------------------
     v6.css 是"钉钉语言升级层"，里面把 Hero 与 CTA 的颜色写死成浅色值
     （h1 color:#111114、.hero-badge 白底、.btn-line 白底、.big-cta .display #111214 等），
     这些不走 CSS 变量，因此变量覆盖对它们无效，需要显式覆盖。
     下面每条都注明原值，便于回溯。
   ========================================================================== */

/* ---- Hero 主标题：原 color:#111114 / #0A0A0A ---- */
html.dark7 .hero .hero-type,
html.dark7 .hero h1.display,
html.dark7 h1, html.dark7 h2, html.dark7 h3,
html.dark7 h4, html.dark7 h5, html.dark7 h6,
html.dark7 .display,
html.dark7 .section-title,
html.dark7 .sub-title{
  color:var(--d-hi);
}
/* 标题里的高亮词（品牌渐变 / 强调）保持品牌色，只把基底字色换掉 */
html.dark7 .hero-type .ht-line,
html.dark7 .hero-type .ht-char{color:inherit}
html.dark7 .grad-word,
html.dark7 .hero-type .bub{color:var(--d-brand-lt)}

/* ---- Hero 副标题：原 .hero-sub 用 --muted（已随变量变），
        但内层 .hs-lead/.hs-line b 写死 #181C1F ---- */
html.dark7 .hero-sub{color:var(--d-txt)}
html.dark7 .hero-sub .hs-lead{color:var(--d-lo)}
html.dark7 .hero-sub .hs-line b,
html.dark7 .hero-sub .hs-line strong{color:var(--d-hi)}
html.dark7 .hero-sub .hs-num{color:var(--d-brand-lt)}
html.dark7 .hero-stats-note{color:var(--d-dim)}

/* ---- Hero 徽标：原 body.gp-home .hero-badge 白底 rgba(255,255,255,.86) ---- */
html.dark7 .hero-badge,
html.dark7 body.gp-home .hero-badge{
  background:rgba(76,141,255,.12);
  border:1px solid rgba(76,141,255,.26);
  color:var(--d-txt);
}
html.dark7 .hero-badge svg{color:var(--d-brand-lt)}

/* ---- 次级按钮 .btn-line：原白底 + 边框 #E3E5E8 ---- */
html.dark7 .btn-line,
html.dark7 a.btn-line,
html.dark7 button.btn-line{
  background:rgba(255,255,255,.06);
  color:var(--d-hi);
  border:1px solid var(--d-line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark7 .btn-line:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}

/* ---- 主按钮：v6 里 .btn-primary 可能被写成深色 #111114 ---- */
html.dark7 .btn-primary,
html.dark7 a.btn-primary,
html.dark7 button.btn-primary{
  background:linear-gradient(135deg,#1B6BF5 0%,#4C8DFF 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 18px rgba(27,107,245,.38), inset 0 1px 0 rgba(255,255,255,.24);
}
html.dark7 .btn-primary:hover{
  box-shadow:0 8px 30px rgba(27,107,245,.52), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ---- Hero 数据带：原 .hero-stats 卡片白底 ---- */
html.dark7 .hero-stats .stat,
html.dark7 .hero-stats > div,
html.dark7 .hstat{
  background:var(--d-700);
  border:1px solid var(--d-line);
  box-shadow:var(--sh-card);
}
html.dark7 .hero-stats b,
html.dark7 .hero-stats .n,
html.dark7 .hstat b{color:var(--d-hi)}
html.dark7 .hero-stats span,
html.dark7 .hstat span{color:var(--d-lo)}

/* ---- 底部大 CTA：原 body.gp-home .big-cta .display 写死 #111214 ---- */
html.dark7 .big-cta,
html.dark7 body.gp-home .big-cta{
  background:linear-gradient(160deg,#0C1220 0%,#0A0C11 100%);
  border:1px solid var(--d-line-strong);
}
html.dark7 .big-cta .display,
html.dark7 body.gp-home .big-cta .display{color:var(--d-hi)}
html.dark7 .big-cta p,
html.dark7 .big-cta .sub{color:var(--d-txt)}
html.dark7 .big-cta .underline-scribble{
  color:var(--d-brand-lt);
  background:none;
}

/* ---- Hero 产品预览区（右侧工作台截图卡）---- */
html.dark7 .hero-preview,
html.dark7 .hero-preview .pv-card,
html.dark7 .preview-card{
  background:var(--d-700);
  border:1px solid var(--d-line-strong);
  box-shadow:0 32px 80px rgba(0,0,0,.66);
}
html.dark7 .hero-preview .pv-head,
html.dark7 .pv-chrome{
  background:var(--d-600);
  border-bottom:1px solid var(--d-line);
  color:var(--d-lo);
}

/* ---- 页脚深色 ---- */
html.dark7 .foot,
html.dark7 .site-foot,
html.dark7 footer{
  background:var(--d-850);
  border-top:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .foot a,html.dark7 .site-foot a{color:var(--d-lo)}
html.dark7 .foot a:hover,html.dark7 .site-foot a:hover{color:var(--d-hi)}

/* ---- 通用兜底：任何残留的白底卡片 ---- */
html.dark7 .bg-white,
html.dark7 .white-card,
html.dark7 .paper{
  background:var(--d-700);
  border-color:var(--d-line);
}

/* ---- 内页 page57 硬编码 ---- */
html.dark7 .j56-paper,
html.dark7 .j56-card,
html.dark7 .j56-panel{
  background:var(--d-700);
  border-color:var(--d-line);
}
html.dark7 .j56-hero,
html.dark7 .j56-head{background:transparent}

/* ---- 选中/激活态的文字对比 ---- */
html.dark7 .is-active,
html.dark7 .on{color:var(--d-hi)}

/* ============================================================
   17. 结构性白底容器收口
   v5.css 里有一批组件把背景写死成 #fff，不经过变量，
   前面的令牌覆盖打不到。这里逐类收口。
   注意：刻意保留白底的内容层（二维码/灯箱图/白标签/白色徽标）
   不在此列——它们在深色下作为高对比内容块是正确的。
   ============================================================ */

/* 17.1 页面头部 banner */
html.dark7 .page-head{
  background:linear-gradient(180deg,#0C1017 0%,#07080B 100%);
  border-bottom:1px solid var(--d-line);
}

/* 17.2 演示舞台 / 终端壳体 */
html.dark7 .stage-shell,
html.dark7 .geo-stage,
html.dark7 .geo-showcase{
  background:var(--d-700);
  border:1px solid var(--d-line);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 .dtlive{background:transparent}
html.dark7 .dtcard{
  background:var(--d-700);
  border:1px solid var(--d-line);
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 .dtcard:hover{
  background:var(--d-600);
  border-color:var(--d-line-strong);
  box-shadow:0 18px 48px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
}

/* 17.3 内嵌模拟界面（mini-ui / art-frame / hp-* 预览） */
html.dark7 .mini-ui,
html.dark7 .ai-card .art-frame,
html.dark7 .art-frame{
  background:var(--d-800);
  border:1px solid var(--d-line-2);
}
html.dark7 .hp-agent .hp-bar,
html.dark7 .hp-geo .hp-bar{background:var(--d-600)}
html.dark7 .hp-agent .hp-dots i,
html.dark7 .hp-geo .hp-dots i{background:var(--d-400)}
html.dark7 .hp-plat-b{background:var(--d-700)}
html.dark7 .hp-chip.light{
  background:rgba(255,255,255,.07);
  color:var(--d-txt);
}
html.dark7 .hp-src i{background:var(--d-500)}
/* GEO 预览卡：网格线 / 曲线端点 / 平台图标底 —— 原为浅色写死，深底下会发白 */
html.dark7 .hp-chart g.hp-grid line{stroke:rgba(255,255,255,.10)}
html.dark7 .hp-chart .hp-endpoint{fill:#0B0E14;stroke:#4C8DFF}
html.dark7 .hp-plat img{background:rgba(255,255,255,.06)}
html.dark7 .hp-plat em{color:rgba(255,255,255,.50)}

/* 17.4 统计块 / 步骤块 / 平台列 */
html.dark7 .gstat,
html.dark7 .gstep{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 .aiera-col{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 .gstep .gstep-tags i{background:rgba(255,255,255,.08);color:var(--d-txt)}
html.dark7 .geo-show .plat-row span,
html.dark7 .plat-row span{
  background:rgba(255,255,255,.06);
  border-color:var(--d-line);
  color:var(--d-txt);
}
html.dark7 .plat-logo{background:rgba(255,255,255,.06)}

/* 17.5 诊断面板 / 对比表 */
html.dark7 .diag-panel{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 .compare thead th,
html.dark7 .compare thead .feat-col{
  background:var(--d-600);
  color:var(--d-hi);
  border-color:var(--d-line);
}
html.dark7 .compare .feat-col{background:var(--d-700)}
html.dark7 .compare th,
html.dark7 .compare td{border-color:var(--d-line)}
html.dark7 .demo-metric{background:rgba(255,255,255,.05);color:var(--d-hi)}
html.dark7 .faq-item[open]{background:var(--d-700)}

/* 17.6 认证页 */
html.dark7 .auth-card{
  background:var(--d-700);
  border:1px solid var(--d-line);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
html.dark7 .auth-in .input:focus{background:var(--d-600)}
html.dark7 .auth-or span{background:var(--d-700)}

/* 17.7 评审元素：认证徽章 / 品牌 chip / 标识 tile */
html.dark7 .cert-chip,
html.dark7 .logo-chip,
html.dark7 .tile .ic,
html.dark7 .era-ic,
html.dark7 .flow-step i,
html.dark7 .era-flow i,
html.dark7 .era.new .era-flow i{
  background:rgba(255,255,255,.06);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .case-big .ph .clogo{
  background:rgba(10,12,17,.72);
  backdrop-filter:blur(8px);
}
html.dark7 .era-plats .ep.more{background:rgba(255,255,255,.06);color:var(--d-txt)}
html.dark7 .era-meter .m-bar{background:rgba(255,255,255,.1)}
html.dark7 .pipe-step .bulb{background:rgba(255,255,255,.08)}

/* 17.8 导航与移动菜单 */
html.dark7 .nav.pill .nav-inner{
  background:rgba(16,19,25,.86);
  border:1px solid var(--d-line);
  backdrop-filter:saturate(1.5) blur(20px);
}
html.dark7 .mobile-menu{
  background:rgba(9,11,16,.97);
  border-color:var(--d-line);
}
html.dark7 .mobile-menu a{color:var(--d-txt)}
html.dark7 .mobile-menu a:hover{background:rgba(255,255,255,.06);color:var(--d-hi)}
html.dark7 .rail-btn{background:rgba(255,255,255,.06);color:var(--d-txt)}

/* 17.9 问答 / 搜索交互面 */
html.dark7 .qa-ask .input:hover,
html.dark7 .qa-field .input:hover,
html.dark7 .qa-modal .btn-line{background:rgba(255,255,255,.06)}
html.dark7 .qa-chip:hover{background:rgba(76,141,255,.14);color:var(--d-hi)}
html.dark7 .ai-in{background:var(--d-600);color:var(--d-hi)}
html.dark7 .ai-quick button{background:rgba(255,255,255,.07);color:var(--d-txt)}
html.dark7 .bubble.ai,
html.dark7 .ai-body .msg.ai{background:var(--d-600);color:var(--d-hi)}

/* 17.10 通用白色按钮/标签转深色（内容层白标签除外） */
html.dark7 .btn-white{
  background:rgba(255,255,255,.08);
  color:var(--d-hi);
  border:1px solid var(--d-line-strong);
}
html.dark7 .btn-white:hover{background:rgba(255,255,255,.14)}
html.dark7 .btn-ghost-light{
  background:transparent;
  color:var(--d-txt);
  border:1px solid var(--d-line-strong);
}
html.dark7 .btn-ghost-light:hover{
  background:rgba(255,255,255,.07);
  color:var(--d-hi);
}
html.dark7 .tag.white{background:rgba(255,255,255,.09);color:var(--d-hi)}

/* 17.11 文本对比度兜底：任何残留深色文字在深底上不可见 */
html.dark7 .section-title,
html.dark7 .eyebrow b,
html.dark7 .dtlive-head .eyebrow,
html.dark7 .hp-result,
html.dark7 .hp-result *{color:inherit}
html.dark7 .hp-result{background:rgba(16,19,25,.95);color:var(--d-txt)}

/* ============================================================
   18. 高特异性收口（v5/v6 用了 !important 与长前缀的场景）
   ============================================================ */

/* 18.1 Hero 主按钮：v6.css 用 #111114!important 写死黑底，
       品牌色渐变在这里以同等特异性 + !important 夺回 */
html.dark7 body.gp-home .btn-primary:not(.qa-submit),
html.dark7 body.gp-home .hero-actions .btn-primary,
html.dark7 .hero-actions .btn-primary{
  background:linear-gradient(135deg,#1B6BF5 0%,#4C8DFF 100%)!important;
  background-image:linear-gradient(135deg,#1B6BF5 0%,#4C8DFF 100%)!important;
  border:1px solid rgba(76,141,255,.55)!important;
  color:#fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(27,107,245,.34);
}
html.dark7 body.gp-home .btn-primary:not(.qa-submit):hover,
html.dark7 body.gp-home .hero-actions .btn-primary:hover,
html.dark7 .hero-actions .btn-primary:hover{
  background:linear-gradient(135deg,#2578FF 0%,#6BA2FF 100%)!important;
  background-image:linear-gradient(135deg,#2578FF 0%,#6BA2FF 100%)!important;
  border-color:rgba(107,162,255,.7)!important;
  box-shadow:0 4px 10px rgba(0,0,0,.42),0 14px 34px rgba(27,107,245,.46);
}
html.dark7 body.gp-home .btn-primary:not(.qa-submit):focus-visible,
html.dark7 body.gp-home .hero-actions .btn-primary:focus-visible{
  outline:2px solid rgba(76,141,255,.7);outline-offset:3px;
}

/* 18.2 Hero 次按钮：v6.css 白底 #fff 需夺回 */
html.dark7 body.gp-home .hero-actions .btn-line,
html.dark7 .hero-actions .btn-line{
  background:rgba(255,255,255,.07)!important;
  color:var(--d-hi)!important;
  border:1px solid var(--d-line-strong)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
html.dark7 body.gp-home .hero-actions .btn-line:hover,
html.dark7 .hero-actions .btn-line:hover{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.24)!important;
}
html.dark7 body.gp-home .btn-line:not(.qa-submit){
  background:rgba(255,255,255,.07);
  color:var(--d-hi);
  border-color:var(--d-line-strong);
}
html.dark7 body.gp-home .btn-line:not(.qa-submit):hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.24);
}

/* 18.3 价格卡热销态按钮（v5.css:2284 写了 #ECEDF0 浅底） */
html.dark7 body.gp-home .price-card.hot .btn-primary{
  background:#fff!important;
  color:#0A0C11!important;
  border-color:#fff!important;
}
html.dark7 body.gp-home .price-card.hot .btn-primary:hover{
  background:#E6EAF2!important;
  border-color:#E6EAF2!important;
}

/* 18.4 全站按钮箭头与图标在深底上的描边 */
html.dark7 a.btn-primary .arw,
html.dark7 a.btn .arw{color:currentColor}

/* ============================================================
   19. 品牌 Logo 主题切换
   logo-brand.svg 内嵌的是深色位图，深色导航上会变成黑块。
   这里默认走深色版，dark7 下换成白色透明版。
   ============================================================ */
.brand .brand-logo--light{display:none}
.brand .brand-logo--dark{display:block}
html.dark7 .brand .brand-logo--dark{display:none}
html.dark7 .brand .brand-logo--light{display:block}
.brand{display:inline-flex;align-items:center}

/* ============================================================
   20. Hero 数据块：液态玻璃从「白玻璃」转「深玻璃」
   保留 v6 的四色色相（蓝/青/蓝/橙）与玻璃质感，
   只把底色与描边翻转为深色，让它融进深色首屏。
   ============================================================ */
html.dark7 .hero-copy .hero-stats .metric,
html.dark7 .hero-copy .hero-stats .metric:nth-child(2),
html.dark7 .hero-copy .hero-stats .metric:nth-child(3),
html.dark7 .hero-copy .hero-stats .metric:nth-child(4){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.45),
    0 12px 30px rgba(0,0,0,.5);
}
html.dark7 .hero-copy .hero-stats .metric{
  background:linear-gradient(150deg,rgba(76,141,255,.20) 0%,rgba(20,26,38,.72) 100%);
}
html.dark7 .hero-copy .hero-stats .metric:nth-child(2){
  background:linear-gradient(150deg,rgba(61,219,164,.18) 0%,rgba(18,32,30,.72) 100%);
}
html.dark7 .hero-copy .hero-stats .metric:nth-child(3){
  background:linear-gradient(150deg,rgba(124,58,224,.20) 0%,rgba(24,22,40,.72) 100%);
}
html.dark7 .hero-copy .hero-stats .metric:nth-child(4){
  background:linear-gradient(150deg,rgba(255,164,88,.18) 0%,rgba(34,26,20,.72) 100%);
}
/* 玻璃边缘描边转深色高光 */
html.dark7 .hero-copy .hero-stats .metric::after{
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
html.dark7 .hero-copy .hero-stats .metric::before{
  background:linear-gradient(120deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 62%);
}
html.dark7 .hero-copy .hero-stats .metric:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 6px 16px rgba(0,0,0,.5),
    0 20px 44px rgba(0,0,0,.58);
}
html.dark7 .hero-copy .hero-stats .metric big,
html.dark7 .hero-copy .hero-stats .metric span{color:var(--d-hi)}
html.dark7 .hero-copy .hero-stats .metric span{color:var(--d-lo)}
html.dark7 .hero-stats-note{color:var(--d-dim)}

/* 20.1 「工作台实录」等浅底胶囊按钮 */
html.dark7 .hero-rec,
html.dark7 .hero-record,
html.dark7 .rec-pill,
html.dark7 .watch-demo{
  background:rgba(255,255,255,.07);
  color:var(--d-hi);
  border:1px solid var(--d-line-strong);
}

/* ============================================================
   21. Eyebrow 标签胶囊：v5 用 body.gp-home 长前缀 + #fff 白底
   ============================================================ */
html.dark7 body.gp-home .eyebrow,
html.dark7 .eyebrow{
  background:rgba(76,141,255,.11);
  border:1px solid rgba(76,141,255,.25);
  color:var(--d-brand-lt);
  box-shadow:0 2px 14px rgba(27,107,245,.14);
}
html.dark7 body.gp-home .eyebrow::before,
html.dark7 .eyebrow::before{
  background:linear-gradient(135deg,#40D0F0 0%,#4C8DFF 55%,#7C3AE0 100%);
  box-shadow:0 0 10px rgba(76,141,255,.7);
}
html.dark7 .dtlive-head .eyebrow{background:rgba(76,141,255,.11);color:var(--d-brand-lt)}

/* ============================================================
   22. 深色卡片内的文字与分隔线
   卡片壳已深色化，内部文字/边框还是按白卡写的深色值，
   必须同步翻转，否则标题在深底上不可见。
   ============================================================ */
html.dark7 .dt-card-foot{
  border-top:1px solid var(--d-line);
  background:rgba(255,255,255,.02);
}
html.dark7 .dt-card-t{color:var(--d-hi)}
html.dark7 .dt-card-s{color:var(--d-lo)}
html.dark7 .dt-card-go{color:var(--d-brand-lt)}
html.dark7 .dtlive-tip{color:var(--d-dim)}

/* 22.1 卡片内的浅色分隔线与说明文字（通用兜底） */
html.dark7 .price-card,
html.dark7 .ai-card,
html.dark7 .case-card,
html.dark7 .gcard,
html.dark7 .res-card,
html.dark7 .svc-card,
html.dark7 .lab-card,
html.dark7 .feat-card{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 .price-card *,
html.dark7 .ai-card *,
html.dark7 .case-card *,
html.dark7 .gcard *,
html.dark7 .res-card *,
html.dark7 .svc-card *,
html.dark7 .lab-card *,
html.dark7 .feat-card *{border-color:var(--d-line)}

/* 22.2 卡片内标题/正文的深色兜底 */
html.dark7 .dtcard h3,
html.dark7 .dtcard h4,
html.dark7 .case-card h3,
html.dark7 .case-card h4,
html.dark7 .gcard h3,
html.dark7 .gcard h4,
html.dark7 .price-card h3,
html.dark7 .ai-card h3,
html.dark7 .svc-card h3{color:var(--d-hi)}
html.dark7 .dtcard p,
html.dark7 .case-card p,
html.dark7 .gcard p,
html.dark7 .svc-card p{color:var(--d-lo)}

/* ============================================================
   23. GEO「过去 vs 现在」对比区（.aiera / .era 体系）
   这是首页最重要的论证模块，白底面积最大，
   必须整块深色化，同时保留「旧=灰、新=蓝」的语义对比。
   ============================================================ */
html.dark7 .aiera-col{
  background:var(--d-800);
  border:1px solid var(--d-line);
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
html.dark7 .era{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 .era.new{
  background:linear-gradient(135deg,rgba(27,107,245,.16) 0%,rgba(16,30,58,.72) 100%);
  border-color:rgba(76,141,255,.32);
}
html.dark7 .era::before{
  background:radial-gradient(circle,rgba(76,141,255,.16),transparent 70%);
}
html.dark7 .era.old::before{
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);
}
html.dark7 .era-tag{
  background:rgba(255,255,255,.07);
  border:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .era-tag.accent{
  background:var(--d-brand);
  border-color:var(--d-brand);
  color:#fff;
}
html.dark7 .era-share{color:var(--d-dim)}
html.dark7 .era-share.up{color:var(--d-brand-lt)}

/* 图标与流程块 */
html.dark7 .era-ic,
html.dark7 .era-ic.sub{
  background:rgba(255,255,255,.06);
  border:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .era-plats .ep{
  background:rgba(76,141,255,.12);
  border:1px solid rgba(76,141,255,.26);
  color:var(--d-brand-lt);
}
html.dark7 .era-plats .ep.more{
  background:rgba(255,255,255,.06);
  border-color:var(--d-line);
  color:var(--d-lo);
}
html.dark7 .era-flow i{
  background:rgba(255,255,255,.07);
  border:1px solid var(--d-line);
  color:var(--d-hi);
}
html.dark7 .era.new .era-flow i{
  background:rgba(76,141,255,.14);
  border-color:rgba(76,141,255,.32);
  color:var(--d-hi);
}
html.dark7 .era-flow em{color:var(--d-brand-lt)}

/* 进度条 */
html.dark7 .era-meter .m-l{color:var(--d-dim)}
html.dark7 .era-meter .m-bar{
  background:rgba(255,255,255,.07);
  border:1px solid var(--d-line);
}
html.dark7 .era-meter .m-bar i{background:linear-gradient(90deg,#3A404E,#5C6473)}
html.dark7 .era-meter .m-bar.new i{background:linear-gradient(90deg,#4C8DFF,#3DDBA4)}
html.dark7 .era-meter .m-v{color:var(--d-hi)}
html.dark7 .era p{color:var(--d-lo)}

/* 结论条 */
html.dark7 .aiera-take{
  background:var(--d-700);
  border:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .aiera-take b{color:var(--d-hi)}
html.dark7 .aiera-take-key{
  background:linear-gradient(120deg,rgba(76,141,255,.18),rgba(124,58,224,.18));
  color:var(--d-hi);
}

/* ============================================================
   24. AI 对话模拟区（.chat / .bubble / .ans / .src-chip）
   这块是 GEO 板块右栏，面积大、层级多，必须逐层翻转。
   ============================================================ */
html.dark7 .aiera-demo .chat,
html.dark7 .chat{
  background:var(--d-800);
  border:1px solid var(--d-line);
}
html.dark7 .bubble.ai,
html.dark7 .bubble.ai.brief{
  background:var(--d-700);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .bubble.me{
  background:linear-gradient(135deg,#1B6BF5,#4C8DFF);
  color:#fff;
}
html.dark7 .chat-row.ai .av{
  background:linear-gradient(150deg,#4C8DFF,#0F56C8);
  box-shadow:0 3px 12px rgba(27,107,245,.4);
}
html.dark7 .bubble.ai .ans{border-bottom-color:var(--d-line-2)}
html.dark7 .scan-line{
  color:var(--d-lo);
  border-bottom-color:var(--d-line-2);
}
html.dark7 .scan-line b{color:var(--d-brand-lt)}
html.dark7 .ans b{color:var(--d-hi)}
html.dark7 .ans p{color:var(--d-lo)}
html.dark7 .ans .n{background:var(--d-brand);color:#fff}
html.dark7 .ans.you .n{background:#22A06B;color:#fff}
html.dark7 .ans.you{
  background:linear-gradient(120deg,rgba(34,160,107,.14),rgba(34,160,107,.06));
  border:1px solid rgba(61,219,164,.28);
}
html.dark7 .src-chip{
  background:rgba(255,255,255,.05);
  border:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .src-chip i{background:#3DDBA4}
html.dark7 .src-chip.more{
  color:var(--d-brand-lt);
  border-color:rgba(76,141,255,.3);
  background:rgba(76,141,255,.12);
}
html.dark7 .plat-logo{
  background:var(--d-700);
  border:1px solid var(--d-line);
  color:var(--d-hi);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
html.dark7 .plat-logo:hover{
  background:var(--d-600);
  border-color:var(--d-line-strong);
}

/* 24.1 「过去」栏进场后若被动画卡住，强制回到可见态 */
html.dark7 .era.old,
html.dark7 .era.new{opacity:1;transform:none}

/* 24.2 AI 面板 / 问答卡（.ai-panel-card / .answer-item 体系） */
html.dark7 .ai-panel-card,
html.dark7 .answer-item{
  background:var(--d-700);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .answer-item .rank{
  background:rgba(255,255,255,.09);
  color:var(--d-hi);
}
html.dark7 .answer-item.ai{
  background:linear-gradient(135deg,rgba(27,107,245,.14),rgba(16,30,58,.6));
  border-color:rgba(76,141,255,.28);
}
html.dark7 .qa-modal,
html.dark7 .qa-panel{
  background:var(--d-800);
  border:1px solid var(--d-line);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}

/* ============================================================
   25. 案例卡（.case-card / .case-chart / .case-metric-row）
   案例卡的图表区用 --c1/--c2 浅色渐变，卡片壳用 #fff，
   指标胶囊用 --soft，三层都要翻转。
   ============================================================ */
html.dark7 .case-card{
  background:var(--d-700);
  border:1px solid var(--d-line);
  box-shadow:0 6px 22px rgba(0,0,0,.44);
}
html.dark7 .case-card:hover{
  background:var(--d-600);
  border-color:rgba(76,141,255,.36);
  box-shadow:0 24px 50px rgba(0,0,0,.6);
}
html.dark7 .case-photo{
  background:linear-gradient(135deg,#101822,#0C1017);
}
html.dark7 .case-chart{
  background:linear-gradient(150deg,#131A26 0%,#0E131C 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
/* 图表 SVG 内的浅灰底与刻度在深底上需提亮 */
html.dark7 .case-chart svg text,
html.dark7 .case-chart svg tspan{fill:var(--d-lo)}
html.dark7 .case-chart svg [stroke="#E6E9F0"],
html.dark7 .case-chart svg [stroke="#EEF1F6"],
html.dark7 .case-chart svg [stroke="#E9ECF2"]{stroke:rgba(255,255,255,.10)}
html.dark7 .case-chart svg [fill="#F3F5F9"],
html.dark7 .case-chart svg [fill="#F5F7FA"],
html.dark7 .case-chart svg [fill="#EDF0F5"],
html.dark7 .case-chart svg [fill="#F0F2F6"]{fill:rgba(255,255,255,.06)}
html.dark7 .case-chart svg [fill="#fff"],
html.dark7 .case-chart svg [fill="#FFFFFF"]{fill:#161A22}
html.dark7 .case-chart svg [fill="#1F2430"],
html.dark7 .case-chart svg [fill="#111827"],
html.dark7 .case-chart svg [fill="#0F172A"]{fill:#F2F4F8}
html.dark7 .case-chart svg [fill="#5B6270"],
html.dark7 .case-chart svg [fill="#6B7280"],
html.dark7 .case-chart svg [fill="#9AA0A8"]{fill:#8B93A3}

/* 指标胶囊 */
html.dark7 .case-from{
  background:rgba(255,255,255,.07);
  color:var(--d-lo);
}
html.dark7 .case-from::after{color:var(--d-dim)}

/* 卡片表头徽章（制造业 / GEO / 归浦AI） */
html.dark7 .case-tag{
  background:rgba(16,19,25,.82);
  border:1px solid var(--d-line);
  color:var(--d-txt);
  backdrop-filter:blur(10px);
}
html.dark7 .case-tag.geo{
  background:rgba(76,141,255,.16);
  border-color:rgba(76,141,255,.3);
  color:var(--d-brand-lt);
}
html.dark7 .case-card h3,
html.dark7 .case-big h3,
html.dark7 .case-card .num,
html.dark7 .case-big .num{color:var(--d-hi)}
html.dark7 .case-card p,
html.dark7 .case-big p{color:var(--d-lo)}
html.dark7 .case-go{
  background:var(--d-brand);
  color:#fff;
  box-shadow:0 8px 22px rgba(27,107,245,.4);
}
html.dark7 .case-big{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 .case-big:hover{
  border-color:rgba(76,141,255,.36);
  box-shadow:0 24px 50px rgba(0,0,0,.6);
}
html.dark7 .case-big .ph .clogo{
  background:rgba(10,12,17,.78);
  color:var(--d-hi);
  border:1px solid var(--d-line);
}

/* ============================================================
   26. 产品截图区（.geo-stage / .geo-shot）
   截图本身是白底的产品界面，直接放深色环境里太空。
   处理：深色壳体 + 内描边 + 极轻降暗，让白截图变成「被框住的
   实体产品窗」而不是「一块漏光」。
   ============================================================ */
html.dark7 .geo-stage{
  background:var(--d-900);
  border:1px solid var(--d-line-strong);
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 .geo-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
html.dark7 .geo-pane img{
  filter:brightness(.94) contrast(1.02);
}
html.dark7 .geo-shot .frame{
  background:var(--d-800);
  border:1px solid var(--d-line-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 .geo-shot .frame img{filter:brightness(.94) saturate(.98)}

/* 浮动角标 */
html.dark7 .geo-shot .float-chip{
  background:rgba(16,19,25,.9);
  border:1px solid var(--d-line);
  color:var(--d-hi);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 32px rgba(0,0,0,.6);
}
html.dark7 .geo-shot .float-chip i{background:#22D37F}

/* GEO tab 条 */
html.dark7 .geo-tabs button{
  background:rgba(255,255,255,.05);
  border:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .geo-tabs button:hover{
  background:rgba(255,255,255,.09);
  color:var(--d-hi);
  border-color:rgba(76,141,255,.4);
}
html.dark7 .geo-tabs button.on{
  background:linear-gradient(135deg,#1B6BF5,#4C8DFF);
  color:#fff;
  border-color:rgba(76,141,255,.6);
  box-shadow:0 6px 20px rgba(27,107,245,.4);
}
html.dark7 .geo-cta .btn-line{background:rgba(255,255,255,.07);color:var(--d-hi)}

/* ============================================================
   27. 导航下拉 / 浮动控件 / 提示条
   ============================================================ */
/* 27.1 导航下拉里的产品图标块 */
html.dark7 .mm-ic{
  background:rgba(255,255,255,.07);
  border:1px solid var(--d-line);
  color:var(--d-hi);
}
html.dark7 .mm-art.agent .mm-ic{
  background:linear-gradient(140deg,rgba(76,141,255,.28),rgba(27,107,245,.14));
  border-color:rgba(76,141,255,.3);
  color:var(--d-brand-lt);
}
html.dark7 .mm-art.geo .mm-ic{
  background:linear-gradient(140deg,rgba(124,58,224,.28),rgba(64,208,240,.16));
  border-color:rgba(124,58,224,.32);
  color:#B79BFF;
}
html.dark7 .mm-prod{
  background:transparent;
  border:1px solid transparent;
}
html.dark7 .mm-prod:hover{
  background:rgba(255,255,255,.05);
  border-color:var(--d-line);
}
html.dark7 .nav-drop-in,
html.dark7 .nav-drop{
  background:rgba(12,15,21,.96);
  border:1px solid var(--d-line);
  box-shadow:0 20px 50px rgba(0,0,0,.7);
  backdrop-filter:saturate(1.5) blur(22px);
}
html.dark7 .mm-prod b,
html.dark7 .mm-prod strong{color:var(--d-hi)}
html.dark7 .mm-prod span,
html.dark7 .mm-prod p{color:var(--d-lo)}

/* 27.2 右下角浮动控件 */
html.dark7 .fd-top{
  background:rgba(255,255,255,.08);
  border:1px solid var(--d-line-strong);
  color:var(--d-hi);
  backdrop-filter:blur(14px);
}
html.dark7 .fd-top:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.3);
}
html.dark7 .fd-panel{
  background:rgba(14,17,23,.96);
  border:1px solid var(--d-line);
  color:var(--d-txt);
  box-shadow:0 24px 60px rgba(0,0,0,.72);
  backdrop-filter:blur(20px);
}
html.dark7 .fd-panel b,
html.dark7 .fd-panel strong,
html.dark7 .fd-panel h4{color:var(--d-hi)}
html.dark7 .fd-panel p,
html.dark7 .fd-panel span{color:var(--d-lo)}
html.dark7 .fd-items a,
html.dark7 .fd-item{
  background:rgba(255,255,255,.05);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .fd-items a:hover,
html.dark7 .fd-item:hover{
  background:rgba(255,255,255,.1);
  color:var(--d-hi);
}

/* 27.3 Toast 提示条 */
html.dark7 .toast{
  background:rgba(24,29,39,.96);
  border:1px solid var(--d-line-strong);
  color:var(--d-hi);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  backdrop-filter:blur(16px);
}

/* 27.4 案例卡图表内 SVG 的白色药丸块
       这些是图表的一部分（公司名占位条），
        必须转成深色才不刺眼，但要保留文字对比。 */
html.dark7 .case-chart svg rect[fill="#fff"],
html.dark7 .case-chart svg rect[fill="#FFFFFF"],
html.dark7 .case-chart svg rect[fill="#ffffff"],
html.dark7 .cchart svg rect[fill="#fff"]{fill:#1E232D}
html.dark7 .case-chart svg g[fill="#fff"] rect,
html.dark7 .cchart svg g[fill="#fff"] rect{fill:#1E232D}

/* 27.5 行业卡片图标块 */
html.dark7 .ind-ic,
html.dark7 .industry-card .ic,
html.dark7 .gcard .ic,
html.dark7 .cstat .ic{
  background:rgba(76,141,255,.13);
  border:1px solid rgba(76,141,255,.24);
  color:var(--d-brand-lt);
}

/* ============================================================
   28. 案例图表配色令牌（--cc-*）
   模板里的 SVG 走这些变量，深色下自动翻转，
   浅色默认值定义在 v5.css 的 :root 中。
   ============================================================ */
html.dark7{
  --cc-bar-soft:#232936;
  --cc-bar-soft-top:#2A3140;
  --cc-ink:#A8B0BF;
  --cc-ink-soft:#8B93A3;
  --cc-ink-mute:#78808F;
  --cc-ring-track:rgba(255,255,255,.09);
  --cc-badge-bg:#0F1319;
}

/* 28.1 导航下拉图标内层 */
html.dark7 .mm-ic i{
  background:transparent;
}
html.dark7 .mm-art .mm-ic i,
html.dark7 .nav-drop .mm-ic i{background:transparent}

/* 28.2 移动菜单与更多兜底 */
html.dark7 .nav-drop a{color:var(--d-txt)}
html.dark7 .nav-drop a:hover{background:rgba(255,255,255,.05);color:var(--d-hi)}

/* ============================================================
   29. 案例卡「优化前 → 优化后」指标块（.case-ba）
   浅蓝渐变底 + 深色数字，深色下需要整体翻转。
   ============================================================ */
html.dark7 .case-ba{
  background:linear-gradient(135deg,rgba(27,107,245,.13) 0%,rgba(16,26,44,.6) 100%);
  border:1px solid rgba(76,141,255,.24);
}
html.dark7 .case-ba-item span{color:var(--d-dim)}
html.dark7 .case-ba-item b{color:var(--d-hi)}
html.dark7 .case-ba-item b.ba-from{
  color:var(--d-lo);
  text-decoration-color:rgba(139,147,163,.45);
}
html.dark7 .case-ba-item b.ba-to{color:var(--d-brand-lt)}
html.dark7 .case-ba-arrow{color:var(--d-brand-lt)}

/* 29.1 案例卡摘要与公司名 */
html.dark7 .case-summary{color:var(--d-lo)}
html.dark7 .case-logo{
  background:rgba(255,255,255,.07);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .case-title{color:var(--d-hi)}

/* 29.2 案例区标题与说明 */
html.dark7 .case-body h3,
html.dark7 .case-body .case-title{color:var(--d-hi)}
html.dark7 .case-body p{color:var(--d-lo)}

/* ============================================================
   30. 导航下拉里的产品缩略图（.mm-art）
   浅色渐变 + 白色装饰圆，深色下要转成品牌色玻璃。
   ============================================================ */
html.dark7 .mm-art.agent{
  background:linear-gradient(120deg,rgba(76,141,255,.22) 0%,rgba(27,107,245,.08) 100%);
  border:1px solid rgba(76,141,255,.2);
}
html.dark7 .mm-art.geo{
  background:linear-gradient(120deg,rgba(124,58,224,.22) 0%,rgba(64,208,240,.1) 100%);
  border:1px solid rgba(124,58,224,.24);
}
html.dark7 .mm-art .mm-ic{
  background:rgba(16,19,25,.72);
  border:1px solid rgba(255,255,255,.14);
  color:var(--d-brand-lt);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
}
html.dark7 .mm-art.geo .mm-ic{color:#B79BFF}
html.dark7 .mm-art i:not(.mm-b2){background:rgba(255,255,255,.10)}
html.dark7 .mm-art .mm-b2{background:rgba(255,255,255,.07)}
html.dark7 .mm-prod h5{color:var(--d-hi)}
html.dark7 .mm-prod p{color:var(--d-lo)}
html.dark7 .mm-link{color:var(--d-brand-lt)}
html.dark7 .mm-tag{background:var(--d-brand);color:#fff}

/* ============================================================
   31. 服务卡强调项 + 价格切换器（v5 长前缀 + 浅色写死）
   ============================================================ */
/* 31.1 「7×12 小时在线响应」这张暗卡：v5 用 #F8FBFF 强制浅色，
        深色下应该回到品牌蓝渐变，作为四张卡里的强调项 */
html.dark7 body.gp-home .svc-card.dark{
  background:linear-gradient(150deg,#1B6BF5 0%,#4C8DFF 60%,#5B7BFF 100%);
  border-color:rgba(107,162,255,.5);
  color:#fff;
  box-shadow:0 10px 34px rgba(27,107,245,.36);
}
html.dark7 body.gp-home .svc-card.dark h4{color:#fff}
html.dark7 body.gp-home .svc-card.dark p{color:rgba(255,255,255,.94)}
html.dark7 body.gp-home .svc-card.dark p b{color:#FFE9A8}
html.dark7 .svc-card.dark .dot-arw{background:rgba(255,255,255,.92);color:#1B6BF5}

/* 31.2 其余三张服务卡（粉彩底）走深色玻璃 */
html.dark7 body.gp-home .svc-card{
  border:1px solid var(--d-line);
  box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 body.gp-home .svc-card:hover{
  border-color:var(--d-line-strong);
  box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
html.dark7 .svc-card h4{color:var(--d-hi)}
html.dark7 .svc-card p{color:var(--d-lo)}
html.dark7 .svc-card p b{color:var(--d-brand-lt)}

/* 31.3 价格切换器 */
html.dark7 body.gp-home .price-switch button{
  background:rgba(255,255,255,.06);
  border:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 body.gp-home .price-switch button:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(76,141,255,.4);
  color:var(--d-hi);
}
html.dark7 body.gp-home .price-switch button.on{
  background:linear-gradient(135deg,#1B6BF5,#4C8DFF);
  border-color:rgba(76,141,255,.6);
  color:#fff;
  box-shadow:0 6px 20px rgba(27,107,245,.42);
}

/* 31.4 价格卡 */
html.dark7 body.gp-home .price-card{
  background:var(--d-700);
  border:1px solid var(--d-line);
}
html.dark7 body.gp-home .price-card:hover{
  background:var(--d-600);
  border-color:var(--d-line-strong);
}
html.dark7 body.gp-home .price-card.hot{
  background:linear-gradient(160deg,rgba(27,107,245,.18) 0%,rgba(16,22,36,.85) 100%);
  border-color:rgba(76,141,255,.4);
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(76,141,255,.2);
}
html.dark7 .price-card .price,
html.dark7 .price-card .num,
html.dark7 .price-card h3,
html.dark7 .price-card .plan{color:var(--d-hi)}
html.dark7 .price-card li,
html.dark7 .price-card p{color:var(--d-lo)}
html.dark7 .price-card .sep,
html.dark7 .price-card hr{border-color:var(--d-line)}

/* ============================================================
   32. 底部大 CTA（.big-cta）
   v5 把它做成「浅色渐变卡」，深色下必须整块转深，
   否则页面最后一段会突然亮起来，破坏收尾节奏。
   ============================================================ */
html.dark7 body.gp-home .big-cta,
html.dark7 .big-cta{
  background:linear-gradient(160deg,#0C1220 0%,#0A0C11 60%,#0B0E15 100%)!important;
  border:1px solid var(--d-line)!important;
  border-left:0!important;
  border-right:0!important;
}
html.dark7 body.gp-home .big-cta::before{
  background:radial-gradient(circle,rgba(76,141,255,.2),transparent 68%);
}
html.dark7 body.gp-home .big-cta::after{
  background:radial-gradient(circle,rgba(124,58,224,.18),transparent 66%);
}
/* 内层浅色玻璃卡 */
html.dark7 .big-cta .container,
html.dark7 body.gp-home .big-cta .container{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html.dark7 body.gp-home .big-cta .display,
html.dark7 .big-cta .display{
  color:var(--d-hi)!important;
}
html.dark7 body.gp-home .big-cta .lead,
html.dark7 .big-cta .lead{color:var(--d-txt)!important}
html.dark7 body.gp-home .big-cta .display .underline-scribble,
html.dark7 .big-cta .display .underline-scribble{
  color:var(--d-brand-lt)!important;
}
/* 主按钮夺回品牌蓝 */
html.dark7 body.gp-home .big-cta .btn-accent,
html.dark7 .big-cta .btn-accent{
  background:linear-gradient(92deg,#1B6BF5 0%,#4C8DFF 100%)!important;
  background-image:linear-gradient(92deg,#1B6BF5 0%,#4C8DFF 100%)!important;
  color:#fff!important;
  border:1px solid rgba(76,141,255,.5)!important;
  box-shadow:0 10px 28px rgba(27,107,245,.4);
}
html.dark7 body.gp-home .big-cta .btn-accent:hover,
html.dark7 .big-cta .btn-accent:hover{
  background:linear-gradient(92deg,#2578FF 0%,#6BA2FF 100%)!important;
  background-image:linear-gradient(92deg,#2578FF 0%,#6BA2FF 100%)!important;
  border-color:rgba(107,162,255,.7)!important;
  box-shadow:0 16px 38px rgba(27,107,245,.5);
  transform:translateY(-2px);
}
/* 次按钮 */
html.dark7 body.gp-home .big-cta .btn-line,
html.dark7 .big-cta .btn-line{
  background:rgba(255,255,255,.07)!important;
  color:var(--d-hi)!important;
  border:1px solid var(--d-line-strong)!important;
}
html.dark7 body.gp-home .big-cta .btn-line:hover,
html.dark7 .big-cta .btn-line:hover{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.26)!important;
  color:var(--d-hi)!important;
}

/* ============================================================
   33. 内页（page57 极欧语言层）写死的浅色渐变
   page57.css 在页面头/页脚用三处 linear-gradient 写死了浅蓝，
   还带了 !important。这里逐处夺回。
   ============================================================ */

/* 33.1 内页页头晕染 */
html.dark7 .gp-page .page-head{
  background:
    radial-gradient(880px 320px at 82% -6%, rgba(76,141,255,.14), transparent 62%),
    radial-gradient(720px 300px at 6% 12%, rgba(124,58,224,.12), transparent 60%),
    linear-gradient(140deg,#0C1220 0%,#0A0C11 100%) !important;
  border-bottom:1px solid var(--d-line);
}
html.dark7 .gp-page .page-head::after{
  background:linear-gradient(90deg,transparent 0%,rgba(76,141,255,.5) 30%,rgba(124,58,224,.4) 50%,rgba(76,141,255,.5) 70%,transparent 100%);
}

/* 33.2 内页页脚 */
html.dark7 .gp-page footer,
html.dark7 .gp-page .footer,
html.dark7 footer.footer{
  background:linear-gradient(180deg,#0A0C11 0%,#07080B 100%) !important;
  color:var(--d-txt) !important;
  border-top:1px solid var(--d-line) !important;
}
html.dark7 .gp-page footer *,
html.dark7 footer.footer *{border-color:var(--d-line)}
html.dark7 .gp-page footer h4,
html.dark7 .gp-page footer h5,
html.dark7 .gp-page footer .brand,
html.dark7 .footer h4,
html.dark7 .footer h5,
html.dark7 .footer .brand,
html.dark7 .foot-nav h4,
html.dark7 .footer-grid h4{color:var(--d-hi)}
html.dark7 .gp-page footer a,
html.dark7 .footer a,
html.dark7 .footer-grid a,
html.dark7 .foot-nav a{color:var(--d-lo)}
html.dark7 .gp-page footer a:hover,
html.dark7 .footer a:hover,
html.dark7 .footer-grid a:hover{color:var(--d-hi)}
html.dark7 .footer-grid p,
html.dark7 .footer .small,
html.dark7 .foot-bottom{color:var(--d-dim)}
html.dark7 .footer{padding-bottom:40px}
html.dark7 .foot-bottom,
html.dark7 .footer-bottom{border-top:1px solid var(--d-line)}

/* 33.3 内页卡片式区块（45x 那组径向晕染卡） */
html.dark7 .gp-page .page-head::before,
html.dark7 .gp-page .wash-card,
html.dark7 .gp-page [class*="wash"]{
  background:
    radial-gradient(640px 260px at 84% -10%, rgba(76,141,255,.16), transparent 60%),
    radial-gradient(520px 240px at 8% 110%, rgba(124,58,224,.14), transparent 62%),
    linear-gradient(140deg,#0D1422 0%,#0A0C11 100%) !important;
  border:1px solid var(--d-line);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}

/* ============================================================
   34. 夺回 --j56-* 内页令牌
   page57.css 把整套 --j56-* 定义在 .gp-page 上（特异性高于
   单个 html.dark7），必须用 html.dark7 .gp-page 对齐才能覆盖。
   ============================================================ */
html.dark7 .gp-page{
  --j56-bg:#07080B;
  --j56-ink:#F2F4F8;
  --j56-ink-2:#C3C9D4;
  --j56-ink-3:#8B93A3;
  --j56-mute:#78808F;
  --j56-line:rgba(255,255,255,.09);
  --j56-paper:#101319;
  --j56-soft:#131C2E;
  --j56-hair:1px solid rgba(255,255,255,.09);
  --j56-wash:linear-gradient(140deg,#0C1220 0%,#0A0C11 100%);
  --j56-glow:linear-gradient(135deg,rgba(76,141,255,.14),rgba(124,58,224,.12));
  --j56-sh:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
  --j56-sh-sm:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  --lens-line:rgba(255,255,255,.09);
}
/* 同时也覆盖 page56 的同名体系 */
html.dark7 .gp-page.gp-page{
  --j56-paper:#101319;
  --j56-bg:#07080B;
}

/* 34.1 tag / crumb / shot-frame 走新令牌后仍有硬编码的部分 */
html.dark7 .gp-page .tag{
  background:rgba(255,255,255,.06);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .gp-page .tag.mint{background:rgba(61,219,164,.14);color:#4FE0B0;border-color:rgba(61,219,164,.28)}
html.dark7 .gp-page .tag.blue{background:rgba(76,141,255,.14);color:var(--d-brand-lt);border-color:rgba(76,141,255,.28)}
html.dark7 .gp-page .tag.violet{background:rgba(124,58,224,.16);color:#B79BFF;border-color:rgba(124,58,224,.3)}
html.dark7 .gp-page .tag.yellow{background:rgba(255,164,88,.14);color:#FFC078;border-color:rgba(255,164,88,.28)}
html.dark7 .gp-page .tag.gray{background:rgba(255,255,255,.07);color:var(--d-lo);border-color:var(--d-line)}
html.dark7 .gp-page .tag.white{background:rgba(255,255,255,.09);color:var(--d-hi)}

html.dark7 .gp-page .shot-frame{
  background:var(--d-800);
  border:1px solid var(--d-line-strong);
  box-shadow:0 20px 54px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 .gp-page .shot-frame img{filter:brightness(.94) saturate(.98)}
html.dark7 .gp-page .shot-cap{color:var(--d-dim)}
html.dark7 .gp-page .shot-cap .u{background:rgba(255,255,255,.07)}

/* 34.2 内页通用白卡兜底 */
html.dark7 .gp-page .card,
html.dark7 .gp-page .panel,
html.dark7 .gp-page .box,
html.dark7 .gp-page .faq-item,
html.dark7 .gp-page .qa-item{
  background:var(--d-700);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .gp-page .faq-item[open]{background:var(--d-700);border-color:var(--d-line-strong)}
html.dark7 .gp-page .input,
html.dark7 .gp-page input,
html.dark7 .gp-page textarea,
html.dark7 .gp-page select{
  background:rgba(255,255,255,.05);
  border:1px solid var(--d-line);
  color:var(--d-hi);
}
html.dark7 .gp-page input::placeholder,
html.dark7 .gp-page textarea::placeholder{color:var(--d-dim)}

/* ============================================================
   35. 内页剩余组件收口（扫描定位的 13 处，二维码除外）
   ============================================================ */

/* 35.1 产品总览页 · 双产品卡 */
html.dark7 .duo-card,
html.dark7 .duo-card.agent-light,
html.dark7 .duo-card.geo-light{
  background:linear-gradient(150deg,#101822 0%,#0C1017 100%) !important;
  border:1px solid var(--d-line);
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark7 .duo-card:hover{
  border-color:var(--d-line-strong);
  box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
html.dark7 .duo-card h3,
html.dark7 .duo-card h4,
html.dark7 .duo-card .duo-t{color:var(--d-hi)}
html.dark7 .duo-card p{color:var(--d-lo)}

/* 35.2 截图说明条 */
html.dark7 .shot-cap{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--d-line);
  color:var(--d-lo);
}
html.dark7 .shot-cap .u{background:rgba(255,255,255,.07);color:var(--d-dim)}

/* 35.3 诊断条 */
html.dark7 .diag-band{
  background:linear-gradient(135deg,rgba(27,107,245,.14) 0%,rgba(124,58,224,.1) 50%,rgba(16,22,36,.8) 100%) !important;
  border:1px solid rgba(76,141,255,.24);
}
html.dark7 .diag-band h3,
html.dark7 .diag-band h4,
html.dark7 .diag-band b{color:var(--d-hi)}
html.dark7 .diag-band p,
html.dark7 .diag-band li{color:var(--d-lo)}

/* 35.4 平台标签行 */
html.dark7 .plat-row span{
  background:rgba(255,255,255,.06);
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .plat-row span img{border-radius:5px}

/* 35.5 案例大卡的图表头 */
html.dark7 .case-big .ph.case-chart,
html.dark7 .case-big .case-chart{
  background:linear-gradient(150deg,#131A26 0%,#0E131C 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* 35.6 价格页切换器（ind-tabs 变体，v5 写死 #F0F1F4） */
html.dark7 .price-switch.ind-tabs,
html.dark7 .ind-tabs{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--d-line);
}
html.dark7 .ind-tabs button{color:var(--d-lo)}
html.dark7 .ind-tabs button.on{
  background:linear-gradient(135deg,#1B6BF5,#4C8DFF);
  color:#fff;
}

/* 35.7 关于页数据带 */
html.dark7 .stats-band{
  background:transparent;
  border:0;
}
html.dark7 .stats-band .metric{
  background:linear-gradient(165deg,rgba(255,255,255,.06) 0%,rgba(16,19,25,.8) 100%) !important;
  border:1px solid var(--d-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark7 .stats-band .metric big,
html.dark7 .stats-band .metric b,
html.dark7 .stats-band .metric span{color:var(--d-hi)}
html.dark7 .stats-band .metric span{color:var(--d-lo)}

/* 35.8 帮助中心搜索框 */
html.dark7 .help-search{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--d-line);
  box-shadow:none;
}
html.dark7 .help-search input{
  background:transparent;
  color:var(--d-hi);
}
html.dark7 .help-search input::placeholder{color:var(--d-dim)}

/* 35.9 联系页卡片兜底（圆角卡片整体） */
html.dark7 .gp-page .card,
html.dark7 .section .card[class*="reveal"]{
  background:var(--d-700) !important;
  border:1px solid var(--d-line);
  color:var(--d-txt);
}
html.dark7 .gp-page .card h3,
html.dark7 .gp-page .card h4,
html.dark7 .gp-page .card b{color:var(--d-hi)}
html.dark7 .gp-page .card p,
html.dark7 .gp-page .card li{color:var(--d-lo)}

/* 35.10 二维码刻意保留白底（深底上不可扫），只加描边 */
html.dark7 .wecom-qr img,
html.dark7 .wecom-qr{
  background:#fff;
  border:1px solid var(--d-line-strong);
  border-radius:14px;
  padding:10px;
}

/* 35.11 .geo-show .plat-row span 是双类选择器，需同特异性才能夺回 */
html.dark7 .geo-show .plat-row span,
html.dark7 .gp-page .plat-row span,
html.dark7 .geo-show .plat-row span:hover,
html.dark7 .gp-page .plat-row span:hover{
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--d-line) !important;
  color:var(--d-txt);
}
html.dark7 .geo-show .plat-row span .pdot,
html.dark7 .plat-row span .pdot{background:rgba(255,255,255,.16)}

/* ============================================================
   36. 数字渐变文字（.metric big）
   v5.css 用 linear-gradient(#0A0A0A→彩色) + background-clip:text
   做「黑到彩」的渐变数字。深色底上整段数字不可见。
   修复：深色下换成「亮白到彩色」，保留原来的四级色相。
   ============================================================ */
html.dark7 .metric big,
html.dark7 .metric:nth-child(1) big{
  background:linear-gradient(135deg,#F2F4F8 20%,#4C8DFF 120%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
html.dark7 .metric:nth-child(2) big{
  background:linear-gradient(135deg,#F2F4F8 20%,#3DDBA4 120%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
html.dark7 .metric:nth-child(3) big{
  background:linear-gradient(135deg,#F2F4F8 20%,#4C8DFF 120%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
html.dark7 .metric:nth-child(4) big{
  background:linear-gradient(135deg,#F2F4F8 20%,#FFA458 120%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
html.dark7 .metric:nth-child(5) big,
html.dark7 .metric:nth-child(5n) big{
  background:linear-gradient(135deg,#F2F4F8 20%,#7C3AE0 120%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
html.dark7 .metric big span,
html.dark7 .metric big b,
html.dark7 .metric big i{
  -webkit-text-fill-color:transparent !important;
  color:inherit !important;
  background:none !important;
}
html.dark7 .metric > span,
html.dark7 .metric span{color:var(--d-lo) !important}

/* 36.1 内页 gp-page 下的 metric：走实色，不用渐变 */
html.dark7 .gp-page .metric big{
  background:none !important;
  -webkit-text-fill-color:var(--d-hi) !important;
  color:var(--d-hi) !important;
}
html.dark7 .gp-page .metric big b,
html.dark7 .gp-page .metric big i{
  color:var(--d-brand-lt) !important;
  -webkit-text-fill-color:var(--d-brand-lt) !important;
}
html.dark7 .gp-page .metric big span{
  -webkit-text-fill-color:var(--d-hi) !important;
  color:var(--d-hi) !important;
}
html.dark7 .gp-page .metric > span:last-child{color:var(--d-lo) !important}

/* 36.2 其它渐变文字（hero 数字/演示指标）通用兜底 */
html.dark7 .demo-metric big,
html.dark7 #diagMetrics .demo-metric big{
  background:none !important;
  -webkit-text-fill-color:var(--d-hi) !important;
  color:var(--d-hi) !important;
}

/* ============================================================
   36.3 Hero 数据块放行
   第 20 节已把 hero-stats 的 metric 改成四色深玻璃 + 实色数字，
   不能用 36 节的 background-clip:text（会导致数字消失）。
   这里显式还原为实色。
   ============================================================ */
html.dark7 .hero-copy .hero-stats .metric big,
html.dark7 .hero-stats .metric big,
html.dark7 .hero-stats .metric:nth-child(1) big,
html.dark7 .hero-stats .metric:nth-child(2) big,
html.dark7 .hero-stats .metric:nth-child(3) big,
html.dark7 .hero-stats .metric:nth-child(4) big{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--d-hi) !important;
  color:var(--d-hi) !important;
}
html.dark7 .hero-stats .metric big span,
html.dark7 .hero-stats .metric big b,
html.dark7 .hero-stats .metric big i{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:inherit !important;
  color:inherit !important;
}
html.dark7 .hero-stats .metric > span{color:var(--d-lo) !important}

/* 37. 内页价格卡按钮（非 gp-home 上下文，走了 v5 基础 btn 样式） */
html.dark7 .price-card .btn,
html.dark7 .price-card .btn-primary,
html.dark7 .price-card .btn-line,
html.dark7 .price-card .btn-accent,
html.dark7 .price-card a.btn{
  background:linear-gradient(135deg,#1B6BF5 0%,#4C8DFF 100%) !important;
  background-image:linear-gradient(135deg,#1B6BF5 0%,#4C8DFF 100%) !important;
  color:#fff !important;
  border:1px solid rgba(76,141,255,.5) !important;
  box-shadow:0 6px 18px rgba(27,107,245,.32);
}
html.dark7 .price-card .btn:hover,
html.dark7 .price-card a.btn:hover{
  background:linear-gradient(135deg,#2578FF 0%,#6BA2FF 100%) !important;
  background-image:linear-gradient(135deg,#2578FF 0%,#6BA2FF 100%) !important;
  box-shadow:0 12px 28px rgba(27,107,245,.45);
}
/* 热销卡保持白底强调 */
html.dark7 .price-card.hot .btn{
  background:#fff !important;
  background-image:none !important;
  color:#0A0C11 !important;
  border-color:#fff !important;
}
html.dark7 .price-card.hot .btn:hover{background:#E6EAF2 !important}
/* 试用版（免费）按钮走次按钮样式 */
html.dark7 .price-card .btn.btn-line{
  background:rgba(255,255,255,.08) !important;
  background-image:none !important;
  color:var(--d-hi) !important;
  border:1px solid var(--d-line-strong) !important;
  box-shadow:none;
}
html.dark7 .price-card .btn.btn-line:hover{background:rgba(255,255,255,.15) !important}

/* 37.1 价格卡内的勾选图标与文字 */
html.dark7 .price-card li::before,
html.dark7 .price-card li svg{color:#3DDBA4}
html.dark7 .price-card .price-unit,
html.dark7 .price-card small{color:var(--d-dim)}

/* ==========================================================================
   38. LCP 首屏收口：抹掉 v6 遗留的浅色底过渡带
   --------------------------------------------------------------------------
   v6.css:109 .hero::after 是给浅色主题做的「由透明到 #F5F6F8」的底部收口，
   深色主题下会变成一条横贯首屏的灰带，把 Logo / 产品预览拦腰截断。
   这里直接取消该伪元素，改由 .hero-bg 自身的辉光完成过渡。
   ========================================================================== */
html.dark7 .hero::after{
  background:none !important;
  background-image:none !important;
  height:0 !important;
}
html.dark7 .hero::before{
  background:none !important;
  background-image:none !important;
}

/* ==========================================================================
   39. Hero 右栏 · Logo 2D 逐带绘制开场
   --------------------------------------------------------------------------
   作为 .hp-shell 的第 0 层，与产品预览卡同尺寸叠放，因此不影响
   v6.js stickPreview() 的高度锚定计算（外壳尺寸由另外两层决定）。
   时序：逐带生长 ~2.0s → 停留 0.6s → 淡出，交给产品轮播。
   ========================================================================== */
html.dark7 .hp-slide-logo{z-index:2}
html.dark7 .hp-logo-card{
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(76,141,255,.10) 0%,transparent 58%),
    var(--d-800);
  border:1px solid var(--d-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.2vh,26px);
  padding:clamp(20px,3vh,38px);
}
html.dark7 .hp-logo-card .gp-logo-stage{
  max-width:min(78%,430px);
  margin:0 auto;
}
/* 开场层的 Logo 不再跟随指针做大幅位移（它已在卡片里，避免溢出裁切） */
html.dark7 .hp-logo-card .gp-logo-stage{transform:none!important}

html.dark7 .hp-logo-t{
  margin:0;text-align:center;
  font-size:15px;font-weight:600;letter-spacing:.32em;
  color:var(--d-hi);
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  opacity:0;animation:gpHeroLogoType .8s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
html.dark7 .hp-logo-t em{
  font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.26em;
  color:var(--d-dim);
}
@keyframes gpHeroLogoType{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:translateY(0)}
}

/* 移动端：Logo 舞台适当收窄，文字间距收紧 */
@media (max-width:640px){
  html.dark7 .hp-logo-card .gp-logo-stage{max-width:82%}
  html.dark7 .hp-logo-t{font-size:13px;letter-spacing:.22em;gap:7px}
  html.dark7 .hp-logo-t em{font-size:9px;letter-spacing:.18em}
}

/* 39.1 产品预览卡 · 内部残留浅色元素收口 */
html.dark7 .hp-tag{
  color:#3DDBA4;
  background:rgba(61,219,164,.14);
  border:1px solid rgba(61,219,164,.26);
}
html.dark7 .hp-res-head>span:first-child{color:var(--d-hi)}
html.dark7 .hp-res-list li{color:var(--d-txt)}
html.dark7 .hp-res-list li i{background:rgba(255,255,255,.28)}

/* 39.2 产品预览卡 · 内容密度收回
   v6 用 space-between 把三块内容摊满整张卡（外壳被 JS 拉高到「标题顶→数据卡底」，
   约 570px），深色下留白显得空。这里改为「顶部对齐 + 结果卡吃掉余量」，
   结构接近真实的对话工作台：提问在上、结果在下，不留大片空洞。 */
html.dark7 .hp-slide>.hp-card>.hp-body{
  justify-content:flex-start;
  gap:12px;
  padding-top:18px;
}
html.dark7 .hp-slide>.hp-card>.hp-body > *{margin-top:0 !important}
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-msg,
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-flow,
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-metric,
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-plat,
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-src{flex:0 0 auto}
/* 结果卡 / 曲线区吃满剩余高度 */
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-result,
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-chart{flex:1 1 auto}
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-result{
  display:flex;flex-direction:column;
}
/* 曲线图：吃掉结果卡剩余高度，而不是靠 margin-top:auto 把它压到底部。
   之前用 auto 会留下 140px 空白，曲线缩成 34px 一条细线贴在最下沿，很难看。
   改成 flex:1 + min-height，图随卡片拉伸，面积感才成立。 */
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-result .hp-spark{
  flex:1 1 auto;
  min-height:34px;
  height:auto;
  margin-top:12px;
}
/* GEO 层的信息源标签贴底 */
html.dark7 .hp-slide>.hp-card>.hp-body > .hp-src{margin-top:auto !important}

/* 39.3 交棒后的合成层保险
   开场层被移除后，若下层卡片没有重新提交合成层，部分渲染路径会留下一块空白
   （DOM 与 computed style 全部正常，改了视口就恢复，是典型的图层失效）。
   这里给接管后的层显式建立独立合成层，配合 hero-logo-intro.js 的强制失效，
   保证「Logo 淡出 → 产品卡出现」在任何环境都稳定。 */
html.dark7 .hp-slide.is-on{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* ==========================================================================
   40. 首页首屏（移动端）视觉修整
   --------------------------------------------------------------------------
   针对评审提出的布局 / 层级 / 对比度问题统一处理：
     40.1 标题两行层级拉开（第一行主张，第二行收束）
     40.2 副标题对比度与产品条目可点击性
     40.3 按钮等宽与高度
     40.4 数据卡：统一色系 + 横竖同间距 + 内对齐一致
     40.5 口径说明改为短条目列表
     40.6 纵向留白（呼吸感）
   ========================================================================== */

/* ---------- 40.1 标题层级 ---------- */
html.dark7 .hero-type .ht-line{line-height:1.16}
html.dark7 .hero-type .ht-l1{font-weight:650;letter-spacing:-.022em}
/* 第二行轻一档，形成「主句 → 收束句」的节奏，不再和第一行平起平坐 */
html.dark7 .hero-type .ht-l2{
  font-size:.82em;
  font-weight:450;
  letter-spacing:.005em;
  margin-top:.14em;
  color:var(--d-txt);
}
/* 高亮词：左右 padding 对称，避免「管理」这类双字词被挤成孤块 */
html.dark7 .hero-type .bub{
  padding:.02em .16em;
  margin:0 .03em;
  border-radius:.16em;
}

/* ---------- 40.2 副标题与产品条目 ---------- */
html.dark7 .hero-sub{
  color:var(--d-txt);
  font-size:clamp(14.5px,1.2vw,16px);
}
html.dark7 .hero-sub .hs-lead{
  color:var(--d-dim2);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.08em;
  margin-bottom:14px;
}

/* 条目：整组水平居中。
   原先是 width:100% + 左对齐，两条文字长短不同（267 vs 233px），
   左缘对齐右缘参差，视觉上像没排整齐的列表。
   改为 fit-content 居中，两条各自以自身宽度居中，重心落在同一条中轴上。 */
html.dark7 .hero-sub .hs-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:fit-content;
  margin:0 auto;
  padding:7px 14px 7px 7px;
  border-radius:999px;
  color:var(--d-hi);
  text-decoration:none;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition:background-color .22s ease,border-color .22s ease,transform .22s ease;
  -webkit-tap-highlight-color:transparent;
}
html.dark7 .hero-sub .hs-line + .hs-line{margin-top:9px}
html.dark7 .hero-sub .hs-line:hover{
  background:rgba(76,141,255,.10);
  border-color:rgba(76,141,255,.28);
  transform:translateY(-1px);
}
html.dark7 .hero-sub .hs-line:active{transform:translateY(0) scale(.985)}
html.dark7 .hero-sub .hs-line b{color:var(--d-hi);font-weight:600;letter-spacing:-.005em}
html.dark7 .hero-sub .hs-line em{
  color:var(--d-dim2);
  font-size:.86em;
  font-weight:400;
  letter-spacing:.01em;
}
/* 序号：从「老式圆形编号」改为细边框 + 等宽数字，更像产品标记而非页码 */
html.dark7 .hero-sub .hs-num{
  flex:none;
  width:22px;height:22px;
  border-radius:50%;
  font-size:10.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:#8FB8FF;
  background:rgba(76,141,255,.14);
  border:1px solid rgba(76,141,255,.28);
}
html.dark7 .hero-sub .hs-arw{
  color:var(--d-lo);
  flex:none;
  margin-left:2px;
  transition:transform .22s ease,color .22s ease;
}
html.dark7 .hero-sub .hs-line:hover .hs-arw{transform:translateX(2px);color:#8FB8FF}

/* ---------- 40.3 按钮 ---------- */
html.dark7 .hero-actions{gap:10px}
html.dark7 .hero-actions .btn{
  min-width:0;
  padding:0 26px;                  /* 箭头绝对定位，左右留白对称即可 */
  justify-content:center;
  letter-spacing:.01em;
}
html.dark7 .hero-actions .ha-txt{justify-content:center}
html.dark7 .hero-actions .ha-txt b{font-weight:600}
html.dark7 .hero-actions .btn-line{
  background:rgba(255,255,255,.055) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:var(--d-hi) !important;
  box-shadow:none !important;
}
html.dark7 .hero-actions .btn-line:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.24) !important;
}

/* ---------- 40.4 数据卡：统一设计语言 ---------- */
/* 四张卡改为同一种玻璃质感，只保留一档极淡的品牌蓝倾向；
   色彩不再四色拼贴，视觉焦点交还给标题与按钮 */
html.dark7 .hero-copy .hero-stats .metric,
html.dark7 .hero-copy .hero-stats .metric:nth-child(2),
html.dark7 .hero-copy .hero-stats .metric:nth-child(3),
html.dark7 .hero-copy .hero-stats .metric:nth-child(4){
  background:
    linear-gradient(160deg,rgba(76,141,255,.10) 0%,rgba(76,141,255,.02) 46%,rgba(255,255,255,.02) 100%),
    rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 1px 2px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
html.dark7 .hero-copy .hero-stats .metric::after{
  border:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045) !important;
}
html.dark7 .hero-copy .hero-stats .metric::before{display:none !important}

/* 卡内：数字与说明统一内边距、统一基线 */
html.dark7 .hero-copy .hero-stats .metric{
  padding:16px 14px 15px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
html.dark7 .hero-copy .hero-stats .metric big{
  color:var(--d-hi) !important;
  font-weight:650;
  letter-spacing:-.03em;
  line-height:1.05;
  min-height:1.05em;
}
html.dark7 .hero-copy .hero-stats .metric > span{
  color:var(--d-dim2) !important;
  font-size:12px;
  font-weight:450;
  line-height:1.4;
  min-height:calc(1.4em * 1);      /* 单行即可容纳，不再虚留两行 */
  margin-top:8px;
  letter-spacing:.01em;
}

/* ---------- 40.5 口径说明：改为短条目 ---------- */
html.dark7 .hero-stats-note{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 18px;
  width:100%;
  text-align:left;
  font-size:11.5px;
  line-height:1.6;
  color:var(--d-dim2);
}
html.dark7 .hero-stats-note > div{display:flex;gap:6px;align-items:baseline;min-width:0}
html.dark7 .hero-stats-note dt{
  flex:none;
  font-weight:600;
  color:var(--d-txt);
  font-variant-numeric:tabular-nums;
  font-size:11px;
}
html.dark7 .hero-stats-note dd{margin:0;color:var(--d-dim2);min-width:0}

/* ---------- 40.6 纵向呼吸 ---------- */
html.dark7 .hero-sub{margin-top:22px}
html.dark7 .hero-actions{margin-top:32px}
html.dark7 .hero-copy .hero-stats{margin-top:34px;gap:12px}

/* ==========================================================================
   41. 移动端首屏重排（≤560px）
   ========================================================================== */
@media (max-width:560px){
  /* 留白：顶部给足，区块间距统一放大一档 */
  html.dark7 .hero{padding:calc(108px + var(--sat)) 20px 40px}
  html.dark7 .hero-badge{margin-bottom:22px}
  html.dark7 .hero-type{margin-top:4px}

  /* 标题：两行明显分层 */
  html.dark7 .hero-type .ht-l1{font-weight:650}
  html.dark7 .hero-type .ht-l2{
    font-size:.78em;
    font-weight:400;
    margin-top:.2em;
    letter-spacing:.01em;
  }

  html.dark7 .hero-sub{margin-top:24px;font-size:15px;line-height:1.7;width:100%}
  html.dark7 .hero-sub .hs-lead{font-size:12.5px;margin-bottom:13px}
  /* 移动端同样整组居中：宽度交给内容，不拉满 100% */
  html.dark7 .hero-sub .hs-line{
    font-size:14.5px;gap:8px;
    justify-content:center;
    width:fit-content;
    margin-left:auto;margin-right:auto;
    padding:8px 16px 8px 8px;
  }
  html.dark7 .hero-sub .hs-line em{font-size:.86em}
  html.dark7 .hero-sub .hs-line + .hs-line{margin-top:10px}

  /* 按钮：严格等宽，高度统一 */
  html.dark7 .hero-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
    width:100%;
    max-width:none;
    margin-top:28px;
  }
  html.dark7 .hero-actions .btn{height:48px;padding:0 14px !important;border-radius:13px}
  html.dark7 .hero-actions .ha-txt b{font-size:14px;letter-spacing:.01em}
  html.dark7 .hero-actions .btn .arw{display:none}   /* 等宽下箭头会挤压文字，去掉更干净 */

  /* 数据卡：横竖同间距 12px，卡内对齐统一 */
  html.dark7 .hero-copy .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    margin-top:32px;
    max-width:none;
  }
  html.dark7 .hero-copy .hero-stats .metric{
    padding:18px 12px 16px;
    border-radius:16px;
    min-height:118px;
  }
  html.dark7 .hero-copy .hero-stats .metric big{font-size:30px}
  html.dark7 .hero-copy .hero-stats .metric > span{font-size:12px;margin-top:9px}

  /* 口径说明：窄屏单列，逐条读 */
  html.dark7 .hero-stats-note{
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    margin-top:20px;
    font-size:11.5px;
  }
}

/* 平板/小桌面：保持两列但拉开间距 */
@media (min-width:561px) and (max-width:1080px){
  html.dark7 .hero-stats-note{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   42. 高亮词背景块收口
   --------------------------------------------------------------------------
   v5.css:93 给 .bub 加了一个 ::after 小三角（right:-.24em，浅蓝实色），
   是浅色主题下"手工涂色延伸出去"的效果。深色主题上它变成一块突兀的浅蓝斜块，
   看起来像高亮底被裁坏。深色下取消该伪元素，改用对称的圆角底。
   ========================================================================== */
html.dark7 .hero-type .bub::after,
html.dark7 .hero-type .bub.violet::after,
html.dark7 .hero-type .bub.blue::after,
html.dark7 .hero-type .bub.green::after,
html.dark7 .hero-type .bub.pink::after,
html.dark7 .hero-type .bub.mint::after,
html.dark7 .hero-type .bub.amber::after{
  display:none !important;
  content:none !important;
}
html.dark7 .hero-type .bub,
html.dark7 .hero-type .bub.violet{
  background:linear-gradient(180deg,rgba(76,141,255,.26) 0%,rgba(76,141,255,.16) 100%);
  color:#8FB8FF;
  border-radius:.18em;
  padding:.02em .14em;
  margin:0 .02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* ==========================================================================
   43. 移动端顶部导航配重
   --------------------------------------------------------------------------
   原状：Logo 右缘 201 →「联系我们」左缘 231（间距 30px 很松），
        按钮右缘 330 → 汉堡左缘 342（间距仅 12px，挤在一起）。
   且按钮是 98×40 实心深色胶囊，汉堡是 40×36 无底图标，重量差过大。
   处理：汉堡加同款浅玻璃底、尺寸对齐按钮高度；整体收紧右侧间距、
   让「页面右边距 = 汉堡右缘」这条基准线成立。
   ========================================================================== */
@media (max-width:1080px){
  html.dark7 .nav-inner{padding-left:20px;padding-right:16px}

  /* 汉堡：与按钮同高的玻璃方块，配重拉近 */
  html.dark7 .burger{
    width:40px;height:40px;
    padding:0;
    align-items:center;justify-content:center;
    gap:4.5px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    margin-left:0;
    transition:background-color .2s ease,border-color .2s ease;
  }
  html.dark7 .burger:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
  html.dark7 .burger:active{background:rgba(255,255,255,.14)}
  html.dark7 .burger span{width:17px;height:1.8px;background:var(--d-hi);border-radius:2px}
  /* 展开态：底色变浅以示激活 */
  html.dark7 .burger.x{background:rgba(255,255,255,.12)}

  /* 「联系我们」：降一档重量，与汉堡形成「主要 + 次要」而非「重 + 轻」 */
  html.dark7 .nav .btn-accent{
    height:40px;
    padding:0 18px;
    font-size:13.5px;
    font-weight:600;
    background:rgba(255,255,255,.10) !important;
    background-image:none !important;
    color:var(--d-hi) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
  }
  html.dark7 .nav .btn-accent:hover{
    background:rgba(255,255,255,.16) !important;
    border-color:rgba(255,255,255,.26) !important;
  }
}

/* ==========================================================================
   44. 首屏动态背景
   --------------------------------------------------------------------------
   深色主题原先没有任何背景处理：浅色的网格与冷光在白底上成立，
   深底上几乎不可见，首屏实际是一片纯黑 —— 这是"显老"的主要来源。

   新背景由四层构成，全部只用 transform / opacity 驱动（走合成层）：
     · hb-grid   极淡点阵网格，向中心聚拢，给空间一个「地平线」
     · hb-aurora 三团不同色相辉光，以 26~38s 的周期缓慢漂移、胀缩
     · hb-scan   一条极淡的斜向光带，18s 扫过一遍，制造"活着"的呼吸
     · hb-glow   预览区背后的主光，静态托底
   周期都刻意拉长（>18s）—— 快了会像加载动画，慢了才像空间自身的流动。
   ========================================================================== */
html.dark7 .hero{
  background:
    radial-gradient(120% 90% at 50% -10%,#0C1220 0%,#080A10 46%,#07080B 100%);
}
html.dark7 .hero-bg{overflow:hidden}

/* 点阵网格：替代原来的方块网格，更细密也更现代 */
html.dark7 .hero-bg .hb-grid{
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(96% 76% at 50% 18%,#000 0%,rgba(0,0,0,.55) 48%,transparent 78%);
  mask-image:radial-gradient(96% 76% at 50% 18%,#000 0%,rgba(0,0,0,.55) 48%,transparent 78%);
  animation:hbGridDrift 44s linear infinite;
}
@keyframes hbGridDrift{
  from{background-position:0 0}
  to  {background-position:32px 32px}
}

/* 三团极光：色相分别取品牌蓝 / 青 / 紫，彼此错开位置与周期 */
html.dark7 .hero-bg .hb-aurora{
  position:absolute;
  border-radius:50%;
  filter:blur(64px);
  will-change:transform,opacity;
  pointer-events:none;
}
html.dark7 .hero-bg .hb-a1{
  width:640px;height:520px;
  left:6%;top:-16%;
  background:radial-gradient(circle,rgba(27,107,245,.34) 0%,rgba(27,107,245,.10) 46%,transparent 72%);
  animation:hbFloat1 32s ease-in-out infinite;
}
html.dark7 .hero-bg .hb-a2{
  width:560px;height:560px;
  right:2%;top:2%;
  background:radial-gradient(circle,rgba(64,208,240,.20) 0%,rgba(64,208,240,.06) 46%,transparent 72%);
  animation:hbFloat2 38s ease-in-out infinite;
}
html.dark7 .hero-bg .hb-a3{
  width:520px;height:460px;
  left:32%;bottom:-18%;
  background:radial-gradient(circle,rgba(124,58,224,.20) 0%,rgba(124,58,224,.05) 46%,transparent 72%);
  animation:hbFloat3 26s ease-in-out infinite;
}
@keyframes hbFloat1{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.80}
  33%    {transform:translate3d(46px,34px,0) scale(1.10);opacity:1}
  66%    {transform:translate3d(-28px,18px,0) scale(.96);opacity:.72}
}
@keyframes hbFloat2{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.70}
  40%    {transform:translate3d(-52px,42px,0) scale(1.12);opacity:1}
  70%    {transform:translate3d(22px,-20px,0) scale(.94);opacity:.64}
}
@keyframes hbFloat3{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.62}
  50%    {transform:translate3d(38px,-34px,0) scale(1.14);opacity:.94}
}

/* 扫描光带：一条极淡的斜向高光，18s 从上掠过
   ⚠ 性能要点（实测）：这块是 160% × 60% 的大面积渐变（1440 视口下约 2300×970）。
   关键不在大小，而在「每帧改 transform 的哪个分量」：
     · rotate + translateY  → 47.6 fps   ← 旋转让整块渐变每帧重新光栅化
     · 只做 translateY      → 60.1 fps   ← 纯位移走 GPU 合成，零重绘
   所以把 -14° 的倾角从动画里搬到静态样式上，动画只保留位移。
   斜向观感完全不变，代价归零 —— 这是全场性价比最高的一处。 */
html.dark7 .hero-bg .hb-scan{
  position:absolute;
  left:-30%;top:-40%;
  width:160%;height:60%;
  background:linear-gradient(180deg,rgba(76,141,255,0) 0%,rgba(76,141,255,.055) 50%,rgba(76,141,255,0) 100%);
  transform:rotate(-14deg);
  pointer-events:none;
  will-change:transform;
}
html.dark7 .hero-bg .hb-scan-inner{
  display:block;
  width:100%;height:100%;
  animation:hbScan 18s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform,opacity;
}
@keyframes hbScan{
  0%      {transform:translateY(-40%);opacity:0}
  12%     {opacity:1}
  46%     {transform:translateY(150%);opacity:1}
  58%,100%{transform:translateY(150%);opacity:0}
}

/* 主光：预览区背后的静态托底，比原来更克制 */
html.dark7 .hero-bg .hb-glow{
  right:-8%;top:4%;
  width:820px;height:700px;
  background:radial-gradient(circle,rgba(76,141,255,.16) 0%,rgba(76,141,255,.05) 42%,transparent 70%);
}

/* 移动端：辉光收小、关掉扫描带（窄屏上斜光会显得脏），保留网格与两团极光 */
@media (max-width:1080px){
  html.dark7 .hero-bg .hb-scan{display:none}
  html.dark7 .hero-bg .hb-a1{width:420px;height:360px;left:-18%;top:-10%}
  html.dark7 .hero-bg .hb-a2{width:380px;height:380px;right:-16%;top:8%}
  html.dark7 .hero-bg .hb-a3{width:360px;height:320px;left:18%;bottom:-14%}
  html.dark7 .hero-bg .hb-glow{width:520px;height:460px;right:-20%;top:0}
  html.dark7 .hero-bg .hb-grid{background-size:28px 28px}
}

/* 减弱动效：全部停住，只留静态辉光 */
@media (prefers-reduced-motion: reduce){
  html.dark7 .hero-bg .hb-grid,
  html.dark7 .hero-bg .hb-aurora,
  html.dark7 .hero-bg .hb-scan{animation:none !important}
  html.dark7 .hero-bg .hb-scan{display:none}
}

/* ==========================================================================
   45. 标题装饰收口：去掉「AI」下方的手绘波浪线
   --------------------------------------------------------------------------
   v5.css:1762 的 .ai-art::after 是浅色主题的手绘笔触下划线（双层蓝渐变 + SVG 遮罩）。
   深色主题下它与「增长」的高亮块同时存在，两种装饰语言互相打架：
   一个是手绘感、一个是现代玻璃感，视觉上很"旧"。
   这里只保留高亮块一种强调方式，去掉下划线。
   ========================================================================== */
html.dark7 .hero-type .ai-art::after{
  display:none !important;
  content:none !important;
}

/* 45.1 高亮块内边距与外间距微调
   原 padding .14em 在高亮的左右不对称视觉上偏窄，
   与左侧「新」字几乎贴死。加到 .2em 并使左右外边距对称。 */
html.dark7 .hero-type .bub,
html.dark7 .hero-type .bub.violet{
  padding:.01em .2em .02em;
  margin:0 .06em;
  border-radius:.2em;
}

/* ==========================================================================
   46. GEO 产品页 · 参数口径说明
   --------------------------------------------------------------------------
   从首页首屏迁来。首页负责说清「是什么、点哪里」，参数口径属于产品页，
   用户在这里逐条对照版本时才需要。三列短条目，桌面一行读完。
   ========================================================================== */
html.dark7 .geo-terms{
  margin:20px 0 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 26px;
  padding:18px 20px;
  border-radius:14px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.07);
}
html.dark7 .geo-terms > div{display:flex;flex-direction:column;gap:5px;min-width:0}
html.dark7 .geo-terms dt{
  font-size:13px;font-weight:650;color:#8FB8FF;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
html.dark7 .geo-terms dd{
  margin:0;font-size:12px;line-height:1.62;color:var(--d-dim2);
}
@media (max-width:760px){
  html.dark7 .geo-terms{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 16px}
  html.dark7 .geo-terms > div{flex-direction:row;gap:9px;align-items:baseline}
  html.dark7 .geo-terms dt{flex:none;min-width:38px}
}

/* ==========================================================================
   47. 首屏收口：删掉口径说明后的节奏重排
   --------------------------------------------------------------------------
   少了最后一段文字，底部会显空。这里把数据带作为首屏的收尾，
   给足下边距，让「标题 → 条目 → 按钮 → 数据」这条线走完就结束。
   ========================================================================== */
html.dark7 .hero-copy .hero-stats{margin-bottom:2px}
@media (max-width:560px){
  /* 移动端：数据卡后留出与顶部等量的呼吸，首屏正好像一页 */
  html.dark7 .hero{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  html.dark7 .hero-copy .hero-stats{margin-top:30px}
}

/* 47.1 小屏收口（≤670px 高度，覆盖 iPhone SE / 8 这类 375×667 机型）
   iPhone SE 的高度比主流机短 170px，原间距会溢出。这里只压缩纵向留白，
   不动字号与信息量 —— 宁可挤一点，也不要让数据卡被切掉半张。 */
@media (max-width:560px) and (max-height:700px){
  html.dark7 .hero{padding-top:calc(84px + var(--sat))}
  html.dark7 .hero-badge{margin-bottom:14px;padding:6px 14px}
  html.dark7 .hero-sub{margin-top:16px}
  html.dark7 .hero-sub .hs-lead{margin-bottom:10px}
  html.dark7 .hero-sub .hs-line + .hs-line{margin-top:7px}
  html.dark7 .hero-actions{margin-top:20px}
  html.dark7 .hero-copy .hero-stats{margin-top:20px;gap:10px !important}
  html.dark7 .hero-copy .hero-stats .metric{padding:13px 10px 11px;min-height:100px}
  html.dark7 .hero-copy .hero-stats .metric big{font-size:26px}
  html.dark7 .hero-copy .hero-stats .metric > span{font-size:11.5px;margin-top:7px}
  html.dark7 .hero{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   第 48 节 · 滚动稳定化 —— 让页面「滑到哪定在哪」，不再自己闪
   --------------------------------------------------------------------------
   实测背景（1440×900，首页）：
     基线                        15.7 fps   ← 滚动时必然拖影、像在刷新
     去极光 blur(64px)           26.4 fps
     + 去多余毛玻璃              33.6 fps
     + 去冗余 will-change        60.7 fps   ← 真正的元凶
   三处一起改，帧率回到满帧，滚动就"定"住了。
   ========================================================================== */

/* --------------------------------------------------------------------------
   48.1 · 极光去掉实时模糊
   64px 模糊铺在 640×520 的大色块上，每帧都要重新光栅化整块区域；
   而它本身已经是一张软边 radial-gradient（透明过渡有 28% 的半径），
   模糊带来的视觉差异几乎为零 —— 拿掉是纯赚。
   把渐变的透明过渡拉长以补回"柔"的观感。
   -------------------------------------------------------------------------- */
html.dark7 .hero-bg .hb-aurora{filter:none}

html.dark7 .hero-bg .hb-a1{
  background:radial-gradient(circle,
    rgba(27,107,245,.30) 0%, rgba(27,107,245,.13) 34%,
    rgba(27,107,245,.045) 58%, transparent 80%);
}
html.dark7 .hero-bg .hb-a2{
  background:radial-gradient(circle,
    rgba(64,208,240,.24) 0%, rgba(64,208,240,.10) 34%,
    rgba(64,208,240,.03) 58%, transparent 80%);
}
html.dark7 .hero-bg .hb-a3{
  background:radial-gradient(circle,
    rgba(124,58,224,.26) 0%, rgba(124,58,224,.10) 34%,
    rgba(124,58,224,.03) 58%, transparent 80%);
}

/* --------------------------------------------------------------------------
   48.2 · 撤销"入场结束就没用了"的 will-change
   html.js .reveal 与 [data-wave] .wv-ch 各带一层 will-change，
   整站 69 + 87 个元素从此各占一个 GPU 合成层 —— 图层数爆炸，
   合成器每帧都要处理上百个层，这是 33 → 60fps 的那一步。
   入场动画一旦跑完，transform/opacity 不再变化，撤销它零副作用。
   -------------------------------------------------------------------------- */
html.js .reveal.in{will-change:auto}
html.js [data-wave].wv-in .wv-ch{will-change:auto}
.rv-items.rv-in > *{will-change:auto}

/* --------------------------------------------------------------------------
   48.3 · 小标签不再用毛玻璃
   LIVE 标签、案例角标、步骤序号、导航图标 —— 这些小件背后没有内容可透，
   backdrop-filter 只是白白让合成器多算一遍背景采样。
   改用半透明实色，深色底上肉眼几乎无法分辨。
   -------------------------------------------------------------------------- */
html.dark7 .dt-live-tag,
html.dark7 .case-tag,
html.dark7 .case-tag.geo,
html.dark7 .gstep,
html.dark7 .mm-ic{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(28,34,44,.82);
}

/* --------------------------------------------------------------------------
   48.4 · 只剩 3D 浮层动时，才允许它们占图层
   首屏滚出视口后，hero 的整组背景动画（点阵 / 极光 / 光带）已不可见，
   继续跑只是白烧 GPU。JS 会给 .hero 加 is-offscreen 挂起它们。
   -------------------------------------------------------------------------- */
html.dark7 .hero-bg.is-paused .hb-grid,
html.dark7 .hero-bg.is-paused .hb-aurora,
html.dark7 .hero-bg.is-paused .hb-scan{
  animation-play-state:paused;
}

/* 弱设备 / 省电模式：系统级降级，直接静态化 */
@media (prefers-reduced-motion: reduce){
  html.dark7 .hero-bg .hb-grid,
  html.dark7 .hero-bg .hb-aurora,
  html.dark7 .hero-bg .hb-scan{animation:none!important}
  html.js .reveal{will-change:auto!important}
}

/* --------------------------------------------------------------------------
   48.5 · 首屏数据卡不用毛玻璃
   四张卡是 2×2 网格、紧挨着极光背景，毛玻璃每帧都要采样背后的极光并重模糊，
   是首屏剩下的最后一块绘制开销。深色背景下改半透明实色后几乎看不出来，
   但省掉 4 次全卡面积的背景采样。
   -------------------------------------------------------------------------- */
html.dark7 .hero-copy .hero-stats .metric{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(20,24,32,.62);
}

/* 图片框的常驻滤镜：静态图不需要每帧算 brightness/contrast，交给 CSS 变量一次性着色 */
html.dark7 .geo-shot .frame img{filter:none}

/* --------------------------------------------------------------------------
   48.6 · 入场动画播完就「撒手」，不要一直挂着
   问题链条：
     body.gp-home .reveal.in { animation: gpTiltIn .65s ... both }
   `both` 让动画在结束后继续锁住终态（opacity:1 / transform），
   于是每一个已经入场的元素都被浏览器视为「动画仍在运行」——
   实测滚动 3 秒后，页面上仍有 180+ 个元素处于 running 状态。
   直接后果：整页永远有东西在动，用户滑到哪停下，画面还在微微变化，
   观感就是「页面一直在自己刷新」。
   解法：把 fill-mode 从 both 换成 backwards ——
     之前（backwards）：动画开始前先应用第 0 帧，避免闪一下；
     之后（不留 forward）：结束后不锁终态，元素回到自身样式。
   终态本来就是 opacity:1 / transform:none，所以视觉完全一致。
   -------------------------------------------------------------------------- */
body.gp-home .reveal.in,
body.gp-page .reveal.in{
  animation:gpTiltIn .65s cubic-bezier(.34,1.5,.64,1) backwards;
}

/* 同理：逐字波浪与卡片逐项入场，都不需要锁终态 */
html.js [data-wave].wv-in .wv-ch{
  animation:dtWave .62s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 30ms);
}
.rv-items.rv-in > *{
  animation:rvItem .62s cubic-bezier(.2,.7,.3,1) backwards;
}

/* 动画跑完连 animation 属性一起撤掉，彻底不留状态 */
body.gp-home .reveal.in.is-settled,
body.gp-page .reveal.in.is-settled,
html.js [data-wave].wv-in .wv-ch.is-settled,
.rv-items.rv-in > *.is-settled{animation:none}

/* --------------------------------------------------------------------------
   48.7 · 用户停手后，整条轨道静态化
   实测差异图显示：滑到第二屏停住后，仍在动的只有两处 ——
     · AI 卡轨（自动横向轮播）
     · 平台 logo 跑马灯
   它们都是「常驻无限滚动」，于是用户停在哪，余光里总有东西在挪，
   观感就是页面自己在刷新。
   统一策略：滚动/触摸停止 2.4s 后，JS 给 body 挂 .gp-idle，两处一起暂停；
   任何滚动、点击、触摸立刻恢复。悬停时也暂停（已有）。
   -------------------------------------------------------------------------- */
body.gp-idle .plat-track{animation-play-state:paused}

/* 悬停即停，让用户能安稳读卡 */
html.dark7 .plat-marquee:hover .plat-track{animation-play-state:paused}

/* 页面切到后台：全局暂停，回来再续 */
body.gp-hidden .plat-track,
body.gp-hidden .hb-grid,
body.gp-hidden .hb-aurora,
body.gp-hidden .hb-scan-inner,
body.gp-hidden .hero-type .ht-char{animation-play-state:paused!important}

/* --------------------------------------------------------------------------
   48.8 · 懒加载图片必须预留占位，杜绝「滚到此处页面自己跳一下」
   现象：给 <img loading="lazy"> 不写 width/height，加载前高度为 0，
        加载完成瞬间撑到真实高度，把下方所有内容整体下推。
        用户看不到图，只看到页面莫名其妙跳了一格 —— 正是「一直在刷新」的来源。
   两条防线：
     ① 模板里写真实 width/height（首选，语义也正确）
     ② CSS 兜底：img 声明 aspect-ratio 并撑满容器，图未到时也占住位置
   -------------------------------------------------------------------------- */
/* 图片容器：比例锁在【盒子】上，不依赖图片是否加载、也不依赖父级宽度是否已结算。
   ⚠ 这里踩过一个坑：只给 img 写 aspect-ratio 不够。
   实测 ai-industry.jpg 所在的 .reveal 初始为 opacity:0，其内部 width:100% 一度
   解析为 0，aspect-ratio 算不出高度 → 盒子塌成 0；图加载后突然撑到 587px，
   把整个「客户案例」区块顶高 586px，用户滚到这里会看到页面猛地跳一下。
   把 aspect-ratio 直接写在容器上，盒子的形状在布局阶段就确定，与图片无关。 */
.art-wide{
  overflow:hidden;border-radius:16px;
  background:rgba(20,24,32,.5);
  aspect-ratio:3 / 2;
  width:100%;
}
.art-wide img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  aspect-ratio:3 / 2;
}

/* 通用：正文区所有懒加载图都先占住位置，避免任何一处把内容顶下去 */
html.dark7 main img[loading="lazy"][width][height]{height:auto}

/* --------------------------------------------------------------------------
   48.9 · 未加载的图片也要占住位置（关键：height:auto 不解决问题）
   实测：即使写了 width/height 属性，下面的 CSS
       img{width:100%; height:auto}
   仍会让未加载的图塌成 0 高 —— 因为 height:auto 在图片没有固有比例时无法推算。
   只有 aspect-ratio 能在「图还没到」时就锁死盒子形状。
   这里对两类必须占位的容器显式声明比例（与源图一致）：
     · .art-wide   正文插画（3:2）
     · .geo-pane   产品截图舞台（多数 1536×1024）
   -------------------------------------------------------------------------- */
.art-wide img,
.art-wide{
  aspect-ratio:3 / 2;
}

/* 产品截图舞台：图片按容器宽度撑开，比例锁 3:2，切换 Tab 时高度不跳 */
.geo-pane img{
  display:block;width:100%;height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;object-position:top center;
}