/* ============================================================
   common.css — 全站共享样式
   ------------------------------------------------------------
   适用页面: index.html / downloads.html
   包含: 设计令牌 / 重置 / 头部 / 状态徽章 / 语言切换 /
        头部 CTA / 通用按钮 / 底部 CTA / 页脚 / 光标跟随 /
        响应式断点
   ============================================================ */

/* ============================================================
   响应式断点约定 — 四档制 (2026-10-14 P2-1 收敛)
   ------------------------------------------------------------
   历史遗留 14 种断点(1180/1120/1100/1024/960/900/860/768/720/
   640/601/600/560/480)造成媒体查询碎片化、边界态难维护。统一收敛为：
     · 560px  —— 手机竖屏上界(<560 单列极致紧凑)
     · 768px  —— 平板/大屏手机分界
     · 1024px —— 笔记本/桌面起(桌面兜底布局)
     · 1180px —— 宽屏容器最大内容宽
   新代码只允许使用以上四档；min-width 移动优先为主。存量查询随功能
   改动就近并入四档,不做一次性全量替换(避免不可目视验证的布局回归)。
   禁止再引入 601/860/960/1120 这类"贴边微调"断点。
   ============================================================ */

/* ============================================================
   Design tokens — 品牌色板 v2.2「黛蓝雅正」(light 主题)
   ------------------------------------------------------------
   v7 (2026-09-19) 定调 light 工业极简; 2026-10-09 接入色板 v2.2,
   2026-10-10 明度微调。原则:
     a) 白底 + 黛蓝中性阶 (背景 5 档 / 文字 4 档), 层次靠阴影 + 1px 描边;
     b) brand 锚点 黛蓝 #143467 做主 CTA / 链接 / focus 环;
     c) 状态色 ok/warn/err 是工控 HMI 三色灯语义正位, 不随品牌换色;
     d) 阴影用深蓝透明不用纯黑; 光晕 token 已归零关闭;
     e) 圆角 4-8px。
   各 token 以下方变量实际值为准 —— 值即真源, 不再维护快照对照表。
   ============================================================ */
/* Self-hosted fonts — 移除 Google Fonts CDN(国内不稳), 改本地 woff2。
   JetBrains Mono v24 latin 可变字体, 单文件覆盖 100-900 全字重;
   unicode-range 限定 latin, CJK 自动回退到系统字体栈。 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 背景分层 — 5 档白→浅灰, 层次靠阴影 + 描边驱动 */
  /* 2026-10-09 品牌色板 v2.2「黛蓝雅正」接入 — 背景/文字/描边三族全部换黛灰中性阶,
     中性阶注入青调, 不再使用暖白 #FAFAF8 与暖灰 #E5E3DD 系(色板外色值) */
  --bg: #F5F7FA;                   /* 主背景 — 月白·页底 (neutral-50) */
  --bg-soft: #EDF0F5;              /* 次级层 (section--alt/stats) — 素笺 (neutral-100) */
  --bg-elev: #FFFFFF;              /* 抬升面 (nav-dropdown) — 纯白 surface */
  --bg-surface-1: #EDF0F5;         /* 卡片层 — 素笺, 与 --bg-soft 同值 */
  --bg-surface-2: #E0E5EC;         /* 浅卡片 — 缟素 (neutral-200) */
  --bg-surface-3: #D3DAE4;         /* 最亮浮层 / divider — 卡片描边档 */
  --bg-deep: #0B1E3D;              /* 代码编辑器 / 终端腔 / 首页 hero 暗带 — 沉渊 (primary-900) */
  /* v15: 暗面统一 token — header 与 footer 共用同一近黑 navy。
     2026-10-09 色板接入: 近黑底统一改玄冥 #061226 (primary-950) —— 它是品牌双极的暗端,
     原 #0C1220 不在色板内 */
  --surface-dark: #061226;
  --footer-bg: var(--surface-dark);
  /* 兼容旧命名: light 模式统一指向 surface-1 */
  --bg-surface: var(--bg-surface-1);
  /* 展示窗面板渐变 (.window 专用) — 纯白到月白微差 */
  --panel-grad-1: #FFFFFF;
  --panel-grad-2: #F5F7FA;

  /* 文字层级 — 4 档黛灰 (色板中性阶, 非纯灰) */
  --ink-1: #0B1E3D;               /* Hero 标题、H1-H3 — 沉渊 (primary-900), 白底 16.57:1 */
  --ink-2: #3B4B64;               /* 次级正文 — 松烟 (neutral-700), 白底 8.85:1 AAA; 2026-10-10 由 #43526A 调沉 */
  --ink-3: #55677E;               /* caption/标签 — 石青 (neutral-600), 白底 5.79:1 AA; 2026-10-10 由 #5D6E86 调沉 */
  --ink-4: #5E7390;               /* 极弱化 / 版本号 / placeholder — 青灰 (neutral-500), 白底 4.86:1 AA */

  /* 描边 — 3 档装饰线 + 1 档表单描边 (色板 v2.2 要求表单边界 ≥3:1) */
  --line: #E0E5EC;                /* 装饰描边 — 缟素 (neutral-200), 装饰性不要求 3:1 */
  --line-strong: #D3DAE4;         /* 卡片边界 — neutral-card */
  --line-bright: #CBD3DE;         /* 分割线 — 银灰 (neutral-300) */
  /* 兼容别名 */
  --border: var(--line);
  /* 表单控件描边 (v2.2 新增) — 输入框/下拉/复选框专用, 白底 3.43:1 达标。
     装饰线继续用 --line / --line-bright, 两者不可混用 */
  --control-border: #7A8CA6;

  /* 品牌主色 — navy, 用于主 CTA / 链接 / focus 环 / active 态 / 选中下划线
     这是用户在 7 色里唯一挑定的高强度识别色, 用途:
       · 主 CTA 按钮背景 (.btn--primary)
       · 链接默认色 (a:hover 不变色; a 默认继承 ink-1)
       · 导航 active 态 / focus ring / 选中下划线
       · 卡片 hover 边框 / eyebrow 装饰小字 (例外: CTA 不映射)
     中性 --neutral (#55677E) 用途:
       · 弱化文字 / 占位符 / 弱标签
       · 次级按钮描边 / 次级 hover */
  /* 2026-10-09 色板接入: navy #23477A → 黛蓝 #143467 (primary-700 锚点, 白字 12.23:1)
     hover 玄青 #2A4A75 (600) / pressed 夜航 #102A52 (800) / 文字档 沉渊 #0B1E3D (900) */
  --brand: #143467;
  --brand-soft: #2A4A75;          /* hover 态 — 玄青 (primary-600) */
  --brand-deep: #102A52;          /* 渐变深档 / focus 环 / pressed — 夜航 (primary-800) */
  --brand-ink: #0B1E3D;           /* 最深档, on-light 文字色 — 沉渊 (primary-900) */

  /* — 中性色单独 token, 给弱化场景用 (替代 v6 --brand-soft) — */
  --neutral: #55677E;             /* 石青 (neutral-600); 2026-10-10 由 #5D6E86 调沉 */
  --neutral-soft: #A2AEBC;        /* neutral-400 — 禁用态 */
  --neutral-deep: #3B4B64;        /* 松烟 (neutral-700); 2026-10-10 由 #43526A 调沉 */

  /* 状态语义色 — 2026-10-09 色板 v2.2 接入 (覆盖设计原则 d 的旧约定):
     成功色偏移翠青 #22706B, 与朱砂 #9F382C 在红绿色盲下拉开距离;
     所有状态必配图标 (✓ / ! / ✕ / i), 颜色只是第三通道。
     色板每档只给一个值, 故 -ink 深档与主体同值, -soft 浅档取色板的深色模式值,
     两者仅作填充/边框使用, 不承载小字。 */
  --ok: #22706B;                  /* 翠青 · success — 白底 5.84:1 AA */
  --ok-soft: #5FB5AC;             /* 翠青浅档 — 仅填充/边框, 禁作白底文字 */
  --ok-ink: #22706B;              /* 深档与主体同值 (色板 success 仅一档) */
  --ok-on: #FFFFFF;
  --amber: #8A5A17;               /* 琥珀棕 · warning — 白底 5.91:1 AA */
  --amber-soft: #C98A2E;          /* 琥珀棕浅档 — 仅填充/边框, 禁作白底文字 */
  --amber-ink: #8A5A17;
  --amber-on: #FFFFFF;
  --red: #9F382C;                 /* 朱砂 · danger — 白底 6.83:1 AA */
  --red-soft: #E07A6D;            /* 朱砂浅档 — 仅填充/边框, 禁作白底文字 */
  --red-ink: #9F382C;
  --red-on: #FFFFFF;
  /* --- 兼容别名 (2026-10-04 批次1 修正) ---------------------------------
     v7 把 warn/err 改名成 --amber/--red 时漏改了调用点:
     --warn / --err 全站从未定义, 却被引用 15 处
     (software.css 5 处: IDE 三色灯 / 红色 HMI 按钮整条渐变 / 停止按钮 / 状态圆点 /
      项目树图标 / HMI 表数值 / 驱动状态胶囊; common.css 2+3 处: --warn-a-sm / --err-a-* 派生)
     → 67 处声明在渲染时被浏览器整体丢弃 (invalid at computed-value time)。
     这里补别名而不是改 15 个调用点: 调用点分散在 software.css / common.css 两个文件,
     补别名的改动面最小且不会漏改。语义映射: --warn → --amber, --err → --red。
     修复后请勿再删除这两个别名, 除非同步改完 software.css 的全部调用点。 */
  --warn: var(--amber);
  --err: var(--red);
  --offline: #A2AEBC;             /* 离线态 — neutral-400, 黛灰同源 */

  /* 行动强调 — 主 CTA 转化动作色 (赭金) */
  /* 2026-10-09 色板接入: 强调色由 safety green #22C55E 改为赭金 #9A6226。
     赭金是全站唯一暖色, 按色板红线只允许出现在转化动作, 全站占比 ≤5%。 */
  /* 2026-10-10 提亮: 赭金 #9A6226 → #A46A1E, 暖色识别度提升 (白字 4.51:1 AA) */
  --accent: #A46A1E;

  /* 主 CTA — 赭金 · CTA (accent-cta 档), 白字 4.51:1 AA (2026-10-10 提亮同 --accent) */
  --accent-cta: #A46A1E;
  /* 取名带 soft 但实际承载 .btn--accent:hover 的白字, 因此取加深档赭深 #85551E
     (白字 6.34:1)。若按字面给浅档 #A26B28, 白字仅 4.497:1 贴线不达标。 */
  --accent-cta-soft: #85551E;
  --accent-cta-ink: #684116;      /* 古铜 (accent-700) — 白底赭金文字, 8.91:1 AAA */
  --accent-cta-on: #FFFFFF;

  /* brand 边框/填充 — 由 brand 派生, light 模式下浅灰填 */
  /* 基色 rgb(20,52,103) = 黛蓝 #143467 (色板接入前为 #23477A) */
  --brand-line: rgba(20, 52, 103, 0.16);
  --brand-line-strong: rgba(20, 52, 103, 0.32);
  --brand-fill: rgba(20, 52, 103, 0.06);
  --brand-fill-strong: rgba(20, 52, 103, 0.12);
  /* 主 CTA 边框/填充 — 与 brand 同源 */

  /* 内容区宽度 — 全站统一两档（文档页除外）*/
  --content-w-wide: 1200px;
  --content-w-read: 800px;

  /* 历史别名 --cyan / --green — 保留指向, 调用点零改动
     --cyan v6 指向 teal var(--brand), v7 改指 brand (用户主动放弃 teal) */
  --cyan: var(--brand);
  --green: var(--ok);             /* 色板接入: 指向翠青 success, 不再用色板外的 #3FB68B */

  /* 琥珀派生组 — 里程碑/警示标签专用。基色 rgb(138,90,23) = 琥珀棕 #8A5A17 */
  --amber-line: rgba(138, 90, 23, 0.32);
  --amber-line-strong: rgba(138, 90, 23, 0.5);
  --amber-fill: rgba(138, 90, 23, 0.12);
  --amber-fill-strong: rgba(138, 90, 23, 0.2);

  /* HMI 状态别名 — software.css 的 IDE-HMI 仿真大量复用 var(--ok) / var(--warn) / var(--err)。
     半透明色阶 --ok-a-* / --warn-a-* / --err-a-* 有真实引用
     (其中 --ok-a-sm/md/xl 被 activation 会员端 member.css 引用)。 */
  /* 半透明派生 — 只留低/中/强三档 */
  --ok-a-sm:   color-mix(in srgb, var(--ok) 10%, transparent);
  --ok-a-md:   color-mix(in srgb, var(--ok) 16%, transparent);
  --ok-a-lg:   color-mix(in srgb, var(--ok) 40%, transparent);
  --ok-a-xl:   color-mix(in srgb, var(--ok) 30%, transparent);
  --warn-a-sm: color-mix(in srgb, var(--warn) 10%, transparent);
  --err-a-sm:  color-mix(in srgb, var(--err) 10%, transparent);
  --err-a-md:  color-mix(in srgb, var(--err) 20%, transparent);

  /* 产品线档位色 — v7 改中性灰同系深浅递增
     v6 三档 teal 全部反中性灰收束, 改:
       nl100 (入门) = #95A5A6  (浅灰)
       nl300 (主力) = #6C757D  (中性灰, ≈ --neutral 同色)
       nl500 (旗舰) = #2C3E50  (深炭灰, ≈ --brand 同色)
     档位越深 = 越旗舰, 不再用 teal "一色" */
  /* 色板接入: 产品线三档全部收进黛蓝/青瓷族
     nl100 黛中 #7189A9 (primary-400) / nl300 黛蓝 #143467 (primary-700 锚点) /
     nl500 青瓷中 #5F95AC (celadon-400, 暗底代码树标签/index 装饰均可读) */
  --nl100: #7189A9;
  --nl300: #143467;
  --nl500: #5F95AC;

  /* 圆角 — 【2026-10-20 视觉精致化】收敛为 3 档语义 token, 取值对齐 4px 栅格;
     旧 --radius-sm|md|lg|xl 一律**别名指向三档**(避免既有调用点失效), 不再各自取值。
       hair(极细 chip/标签 4px) / control(控件: 按钮/输入框/小卡 6px) / surface(表面: 卡片/面板 12px) */
  --radius-hair: 4px;         /* 由 3px 上调: 与 4px 间距基线一致, 消除"锐角 3px"历史写法 */
  --radius-control: 6px;
  --radius-surface: 12px;     /* 由 14px 下调: 与 12px 档对齐 */
  /* 兼容别名(勿新增独立取值) */
  --radius-sm: var(--radius-hair);
  --radius-md: var(--radius-control);
  --radius-lg: var(--radius-control);
  --radius-xl: var(--radius-surface);

  /* 阴影 — 深蓝半透明 rgba(11,30,61,x), 不用纯黑(light 下纯黑阴影会"脏")。
     【2026-10-20 视觉精致化】收敛为 3 档语义 token, 旧名一律别名指向三档, 不再各自取值:
       card-rest(静止) / card-hover(悬停 = 抬升 + brand 1px ring) / float(浮层, 全站唯一浮层档) */
  --shadow-card-rest:  0 1px 2px rgba(11, 30, 61, 0.04), 0 2px 6px rgba(11, 30, 61, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(11, 30, 61, 0.10), 0 0 0 1px var(--brand-line-strong);
  --shadow-float:      0 8px 24px rgba(11, 30, 61, 0.10);
  /* 兼容别名(勿新增独立取值) */
  --shadow-sm:   var(--shadow-card-rest);
  --shadow-md:   var(--shadow-card-rest);
  --shadow-lg:   var(--shadow-float);
  --shadow-card: var(--shadow-card-rest);

  /* 动效 — 【2026-10-20 中期批次】由单一时长扩为 3 档时长 + 2 条缓动:
     fast=微反馈(颜色/描边翻转) / base=常规过渡(卡片抬升、展开) / slow=进入与滚动揭示 */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --ease-out:    cubic-bezier(.16, .84, .44, 1);   /* 进入/揭示: 快出缓停 */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);       /* 状态切换 */
  /* 兼容别名(旧名指向 base 档) */
  --ease-soft: cubic-bezier(.2, .8, .2, 1);
  --dur-soft:  var(--dur-base);

  /* 【2026-10-20 视觉精致化】光晕组已**全站零引用**(实测), 连同下列死 token 一并删除:
       --shadow-glow(g: none) / --green-glow / --amber-glow / --red-glow。
     若未来启用 dark mode 需要发光, 按需新增, 不再"留位挂名"。 */

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas,
               "PingFang SC", "Microsoft YaHei", monospace;

  /* —— Type scale —— 【2026-10-20 中期批次·字级收敛】
     目标 6 档: 12 / 14 / 16 / 20 / 26 / 32 (+h1/h2 clamp)。同一档多种命名一律**别名**, 不再各自命名:
       caption(12) / body(14) / h4&input(16) / display-sm(20) / stat-lg(26) / display(32)
     说明: 下列 3 个"中间值"(body-sm 13 / h3 18 / stat 22) 被引用 130+ 处, **直接改值会造成
       全站排版漂移**, 故本轮只做命名收敛(零视觉变化), 待视觉评审后再并档。 */
  --fs-caption: 12px;                 /* 档 1: 小字 / mono / 标签 (原 mono-sm / mono 收敛至此) */
  --fs-mono-sm: var(--fs-caption);    /* 兼容别名 */
  --fs-mono:    var(--fs-caption);    /* 兼容别名 */
  --fs-input: 16px;                   /* 档 3: 表单输入(锁死 16px, 否则 iOS 聚焦自动缩放整页) */
  --fs-h4:    16px;                   /* 档 3: 小标题 */
  --fs-body:    14px;                 /* 档 2: 正文 */
  --fs-body-sm: 13px;                 /* 紧凑列表(密度档; 待并档) */
  --fs-h3:      18px;                 /* 卡片标题(介于 16 与 20; 待并档) */
  --fs-display-sm: 20px;              /* 档 4 */
  --fs-stat:     22px;                /* 数据 stat(介于 20 与 26; 待并档) */
  --fs-stat-lg:  26px;                /* 档 5 */
  --fs-display:  32px;                /* 档 6: 数字展示 */
  --fs-h2: clamp(23px, 2.4vw, 29px);  /* 区块标题(2026-10-10 修正, 与主视觉拉开主次) */
  --fs-h1: clamp(36px, 5vw, 56px);    /* Hero 标题 */

  /* —— Font weight (5 档) —— */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* —— Line height (4 档) —— */
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.85;

  /* —— Letter spacing (3 档) —— */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;

  /* —— Spacing scale (4 倍数制) —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-30: 120px;

  /* —— News card 胶囊底衬 —— */
  --news-chip-bg:            rgba(255, 255, 255, 0.85); /* 白胶囊, 半透叠加 */
  --news-chip-bg-soft:       rgba(255, 255, 255, 0.75);

  /* ================================================================
     品牌色板 v2.2「黛蓝雅正」原始色阶 (2026-10-09 接入)
     ------------------------------------------------------------
     单一事实来源: 品牌色板/盖利克品牌色板规范.md
     治理规则: 新增色必须归入黛蓝/赭金/青瓷/黛灰四族之一, 不另起色相;
               不得绕过本块在组件里直接写 hex。
     上面 v7 时代的历史 token (--ink-* / --bg-* / --brand-* / --ok 等)
     已全部改指向下列色阶的等价值, 两处需保持同步修改。
     ================================================================ */
  /* 黛蓝 — 213° 色相轴, #143467 锚定 700 档 */
  --primary-50:#F2F5F9; --primary-100:#E3E9F1; --primary-200:#C5D1E0;
  --primary-300:#9EB1C9; --primary-400:#7189A9; --primary-500:#48648B;
  --primary-600:#2A4A75; --primary-700:#143467; --primary-800:#102A52;
  --primary-900:#0B1E3D; --primary-950:#061226;

  /* 赭金 — 转化专用, 全站占比 ≤5%
     注: CTA 档 --accent-cta 在本文件上方 v7 块已定义(2026-10-10 起为 #A46A1E), 此处不重复 */
  --accent-50:#FBF5EC; --accent-100:#F5E7D2; --accent-200:#E7CBA1;
  --accent-300:#D3A968; --accent-400:#B98640;
  --accent-500:#A26B28; --accent-600:#85551E; --accent-700:#684116;
  --accent-800:#4A2E10; --accent-900:#2E1C0A; --accent-950:#1B1006;

  /* 青瓷 — 数据可视化第二色, 与主色同冷调 */
  --celadon-50:#F0F6F8; --celadon-100:#DEEAEF; --celadon-200:#B9D2DC;
  --celadon-300:#8DB5C5; --celadon-400:#5F95AC; --celadon-500:#3A7CA6;
  --celadon-600:#2C6385; --celadon-700:#214C66; --celadon-800:#183747;
  --celadon-900:#102430; --celadon-950:#091620;

  /* 黛灰 — 中性阶, 注入青调, 禁止使用纯灰 #808080 */
  --neutral-50:#F5F7FA; --neutral-100:#EDF0F5; --neutral-200:#E0E5EC;
  --neutral-card:#D3DAE4; --neutral-300:#CBD3DE; --neutral-400:#A2AEBC;
  --neutral-500:#7A8CA6; --neutral-600:#55677E; --neutral-700:#3B4B64;
  --neutral-800:#2C3748; --neutral-900:#1A2231; --neutral-950:#0D1219;
  --control-border-dark:#5E82B5;   /* 深色主题表单描边, 对 #0B1E3D 4.21:1 */

  /* 语义色 — 必配图标 ✓/!/✕/i, 颜色只是第三通道 */
  --success:#22706B; --success-bg:#E8F2F1;
  --warning:#8A5A17; --warning-bg:#FAF1E3;
  --danger:#9F382C;  --danger-bg:#F8EDEC;
  --info:#2A4A75;    --info-bg:#E3E9F1;

  /* 角色令牌 · 浅色 */
  --surface:#FFFFFF; --surface-sunken:#EDF0F5;
  --border-card:#D3DAE4;
  --fg:#0B1E3D; --fg-muted:#3B4B64; --fg-subtle:#55677E; --fg-disabled:#A2AEBC;
  --ring-inner:#FFFFFF; --ring-outer:#143467; --link:#143467;
  --celadon:#3A7CA6; --celadon-text:#214C66;
  --brand-subtle:#E3E9F1;

  /* 图片蒙版 — 禁止纯黑蒙版 */
  --scrim-light:rgba(6,18,38,0.32);   /* 仅压 ≥18px 大字/标签 */
  --scrim:rgba(6,18,38,0.55);         /* 压正文的最低档 */
  --scrim-strong:rgba(6,18,38,0.72);  /* 高亮图保险档 */

  /* 数据可视化固定色序 — 最多 4 色; 超过 3 条线必须加线型 + 标记形状 */
  --seq-1:#143467; --seq-2:#3A7CA6; --seq-3:#B98640; --seq-4:#9EB1C9;
  --seq-context:#7A8CA6; }

/* ============================================================
   深色主题 · v16 碳黑集（2026-11-10 官网改版落地）
   ------------------------------------------------------------
   变更说明: 本块原为色板 v2.2「黛蓝深色集」存档(玄冥 #061226 底 +
   赭金 CTA), 2026-11-10 官网按 v16 方案整体转深, 深色集改写为
   「碳黑 + 宝马蓝」, 取值全部来自 首页视觉配色与美学规范-V1.1 第三节。
   原黛蓝深色集已被本块取代, 如需追溯见 git 历史。
   生效方式: 在页面 <html data-theme="dark"> 即可整体切换。
   红线(取代原"金底深字"红线): 深色下品牌蓝只允许出现在功能位
   (CTA / 选中态 / 焦点环 / 数据值), CTA 用蓝底白字; 禁止赭金回潮,
   禁止 #143467 等深蓝做深底实心按钮(对比不足)。
   ============================================================ */
[data-theme="dark"] {
  /* 深色上下文声明 — 浏览器原生控件(表单/滚动条/下拉/输入法面板)随主题走深
     (美学规范 V1.1 十·第一步第 2 条; 缺失时 textarea/输入框会出现白底浅字) */
  color-scheme: dark;

  /* 背景分层 — 碳黑 4 档 + 代码腔更深一档 */
  --bg:#16171B; --bg-soft:#1B1C20; --bg-elev:#222429;
  --bg-surface-1:#1B1C20; --bg-surface-2:#222429; --bg-surface-3:#2E3035;
  --bg-deep:#101216;
  --surface-dark:#16171B; --footer-bg:#16171B;
  --bg-surface:var(--bg-surface-1);
  --panel-grad-1:#222429; --panel-grad-2:#1B1C20;

  /* 文字层级 — v16 灰阶四档 */
  --ink-1:#F5F6F7; --ink-2:#B3B5B8; --ink-3:#8A8D91; --ink-4:#5F6266;
  --neutral:#8A8D91; --neutral-soft:#5F6266; --neutral-deep:#B3B5B8;

  /* 描边 — 深色三档 + 表单描边(对 #1B1C20 约 3.2:1) */
  --line:#2E3035; --line-strong:#3A3D43; --line-bright:#3A3D43;
  --control-border:#5A6068;

  /* 品牌主色 — 宝马蓝 #1C69D4(白字 5.1:1), hover 提亮 / pressed 加深 / 文字档用亮蓝 */
  --brand:#1C69D4; --brand-soft:#2B7DE1; --brand-deep:#1554A8; --brand-ink:#4D93E8;
  --brand-line:rgba(28,105,212,0.28);
  --brand-line-strong:rgba(28,105,212,0.45);
  --brand-fill:rgba(28,105,212,0.12);
  --brand-fill-strong:rgba(28,105,212,0.20);

  /* 行动强调 — v16 单一强调色即品牌蓝, 赭金在深色主题下退役 */
  --accent:#1C69D4; --accent-cta:#1C69D4; --accent-cta-soft:#2B7DE1;
  --accent-cta-ink:#4D93E8; --accent-cta-on:#FFFFFF;

  /* 状态语义 — 深底提亮主体色, 浅档改作填充/边框的深档 */
  --ok:#4FD08C; --ok-soft:#1E5A3C; --ok-ink:#4FD08C; --ok-on:#0B1214;
  --amber:#E0A33E; --amber-soft:#6E4C15; --amber-ink:#E0A33E; --amber-on:#14100A;
  --red:#E8766A; --red-soft:#6E2720; --red-ink:#E8766A; --red-on:#160B0A;
  --offline:#5F6266;

  /* 色板角色令牌 · 深色 */
  --surface:#1B1C20; --surface-sunken:#16171B;
  --border-card:#2E3035;
  --fg:#F5F6F7; --fg-muted:#B3B5B8; --fg-subtle:#8A8D91; --fg-disabled:#5F6266;
  --ring-inner:#16171B; --ring-outer:#4D93E8; --link:#4D93E8;
  --celadon:#5F95AC; --celadon-text:#B9D2DC;
  --brand-subtle:rgba(28,105,212,0.16);

  /* 语义色对(文字 + 淡底) — 淡底用同色低透明, 不再用浅米色实底 */
  --success:#4FD08C; --success-bg:rgba(79,208,140,0.10);
  --warning:#E0A33E; --warning-bg:rgba(224,163,62,0.10);
  --danger:#E8766A;  --danger-bg:rgba(232,118,106,0.10);
  --info:#4D93E8;    --info-bg:rgba(77,147,232,0.10);

  /* 阴影 — 纯黑透明(light 下用深蓝透明, 深底上改纯黑才可见) */
  --shadow-card-rest:  0 1px 2px rgba(0,0,0,0.28), 0 10px 28px -14px rgba(0,0,0,0.45);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.30), 0 0 0 1px var(--brand-line-strong);
  --shadow-float:      0 8px 24px rgba(0,0,0,0.50);

  /* 产品线档位色 — 深底提亮, nl300 由深蓝换亮蓝 */
  --nl100:#7189A9; --nl300:#4D93E8; --nl500:#5F95AC;

  /* 数据可视化色序 — 首色深底改亮蓝 */
  --seq-1:#4D93E8; --seq-2:#5F95AC; --seq-3:#D3A968; --seq-4:#9EB1C9;
  --seq-context:#5A6068;

  /* 胶囊底衬 — 白胶囊改深灰胶囊 */
  --news-chip-bg:rgba(34,36,41,0.88); --news-chip-bg-soft:rgba(34,36,41,0.78);
  --scrim-light:rgba(0,0,0,0.40); --scrim:rgba(0,0,0,0.58); --scrim-strong:rgba(0,0,0,0.74); }

/* ============================================================
   功能下线通告条 — 旧经销体系页面专用(dealer/partners/warranty/repair)
   token 驱动, 深浅主题自适应; 四页同构, 物理删除后本样式一并移除
   ============================================================ */
.page-retire-note{
  padding:14px 20px;text-align:center;
  background:var(--amber-fill);
  border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.7;color:var(--ink-2);
}
.page-retire-note a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* noscript 降级导航 — 无 JS 时的站点导航, token 驱动深浅自适应(原 index.html 内联样式收编) */
.noscript-nav{
  display:flex;gap:20px;flex-wrap:wrap;
  padding:12px 20px;
  background:var(--surface-dark);
  border-bottom:1px solid var(--line);
}
.noscript-nav a{color:#EDF0F5;text-decoration:none;font-weight:600}
.noscript-nav a:not(:first-child){color:var(--ink-3);font-weight:400}
.noscript-nav a:hover{color:var(--link)}

/* ============================================================
   焦点双环 — 色板 v2.2 红线
   白底: 白环融掉, 深蓝环跳出 / 深底: 深蓝环融掉, 白环跳出 / 金底: 白环跳出
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--ring-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ring-outer); }

/* ============================================================
   高对比模式回退 — 边界交给系统色, 状态图标保留自身通道
   ============================================================ */
@media (forced-colors: active) {
  :root {
    --brand: ButtonText; --accent: ButtonText;
    --surface: ButtonFace; --border: ButtonText;
  }
  .btn, .input, .card { border: 1px solid ButtonText; }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
  .status-icon { forced-color-adjust: none; }
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink-1);
  /* v7 light + 中性灰: 不需要顶部 brand 边, 用极弱深灰微差让 hero 与
     下方 section 区分; 简化为单色 var(--bg), 后续 .section--alt 控节奏 */
  background-color: var(--bg);
  background-image: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  isolation: isolate;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* 中英文/数字之间视觉缓冲 (E1) — 0.04em 不影响纯中文段落节奏 */
body,
p, li, h1, h2, h3, h4, h5, h6 {
  word-spacing: 0.04em; }

/* 卡片悬浮感统一规范 (B) — 所有可交互卡片用同一套
   v4: box-shadow 追加 inset 0 1px 0 白色 5% 顶边内高光 —
   模拟光从上方打在卡片"面"上的物理质感, 让深底卡片轮廓更像实体可读;
   浅色主题下白卡片上不可见, 无需主题分支
   v6 akytec 式 hover 位移投影 + 微光晕 — 只留边框 + teal,
   akytec 的卡片是"贴在黑板上的盒子", 不漂浮 */
.cta-card, .cap-card, .mvv-card, .matrix__card, .pillar,
.news-card, .about-card,
.pd-related__card, .pd-app-card {
  background: var(--bg-surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition:
    border-color var(--dur-soft) var(--ease-soft),
    background  var(--dur-soft) var(--ease-soft);
  position: relative;
  overflow: hidden;
} .cta-card:hover, .cap-card:hover, .mvv-card:hover, .matrix__card:hover, .pillar:hover, .news-card:hover, .about-card:hover, .pd-related__card:hover, .pd-app-card:hover{
  border-color: var(--brand-line-strong); }

/* 技术术语视觉标记 (F) — 首次出现用品牌色, 后续不重复 */
.term {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--brand-soft);
  padding: 0.15em 0.45em;
  background: var(--brand-fill);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  white-space: nowrap;
  line-height: inherit;
  vertical-align: 0.05em;
  font-weight: 500; }

/* ============================================================
   Grain / Noise 纹理 — v7 light 关闭
   ------------------------------------------------------------
   黑底靠颗粒提质感, light + 中性灰不需要噪点;
   整段保留为零成本行风: ::after 设为 none 即可
   ============================================================ */
body::after { display: none; }
h1, h2, h3, h4, h5, h6 {
  color: var(--ink-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
h4 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
h5, h6 {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
p, li, dd {
  color: var(--ink-2);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-3);
}
small { font-size: var(--fs-caption); color: var(--ink-3); }
strong, b {
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
}
em, i { font-style: normal; color: var(--ink-1); }
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--brand-soft);
}

.container {
  width: 100%;
  max-width: var(--content-w-wide);
  margin: 0 auto;
  padding: 0 24px; }

/* ============================================================
   Hero — 全站统一基线 (2026-10-09)
   ------------------------------------------------------------
   背景: 这套 .hero__* 规则原先只存在于 index.css, 而 index.css
   已不被任何页面加载(首页 index.html 改用 hero-carousel 后移除了引用)。
   结果 products / solutions / software 等子页全部拿不到 hero 样式,
   只能各写各的内联 style —— 列宽出现 1.05fr 与 1.1fr 两种, 有的补了
   display:grid 有的没补(没补的 grid-template-columns 直接失效, 退化成
   上下堆叠), 标题/副标题/eyebrow 也全部退回浏览器默认样式。
   现将基线收进本文件(全站必载), 各页内联一律清除。
   注意: 首页 .hero-carousel 是另一套组件, 不受本区块影响。
   ============================================================ */
.hero {
  position: relative;
  padding: 120px 0 64px;
  overflow: hidden;
  /* 底色用色板黛蓝低透明光晕, 不用纯黑也不用色板外色 */
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(20, 52, 103, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 60%, rgba(20, 52, 103, 0.08) 0%, transparent 60%);
  background-color: var(--bg); }

/* 子页紧凑版 — 原定义在 products.css, 但 about/ 等页面不加载 products.css,
   而它们同样可能用到 hero, 故提升到这里 */
.hero--compact {
  padding-top: 100px;
  padding-bottom: 60px;
  min-height: 360px;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero__title {
  /* 子页 hero 主视觉标题: 2026-10-10 层级修正, 与首页轮播标题同档 32–44px 并收紧字距 */
  font-size: clamp(32px, 4vw, 44px);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--ink-1);
  margin: 0;
  word-break: keep-all;
  animation: rise 0.6s ease-out both;
}
.hero__title em {
  font-style: normal;
  color: var(--brand);   /* 纯色强调, 不用渐变/发光 */
}
.hero__sub {
  font-size: var(--fs-body);
  color: var(--ink-2);
  max-width: 540px;
  line-height: var(--lh-normal);
  margin: 0;
  animation: rise 0.6s 0.08s ease-out both; }

/* 页面实际使用的是单数 .hero__cta; index.css 里的 .hero__ctas 是首页
   旧组件(两列卡片), 与本按钮组无关, 不要混用 */
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  animation: rise 0.6s 0.16s ease-out both;
}
.hero__right {
  position: relative;
  animation: rise 0.6s 0.12s ease-out both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 无障碍: 用户要求减少动效时直接呈现终态 */
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__sub, .hero__cta, .hero__right { animation: none; }
}

/* 窄屏单列 — 原只在 products.css 对加载它的页面生效, 现提到基线里 */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__sub { max-width: none; }
}
@media (max-width: 600px) {
  .hero--compact { padding-top: 80px; min-height: 280px; }
}

/* 图片型 hero 主视觉 — 原为 software/index.html 私有 <style> 块,
   提到这里后所有子页可复用同一套呈现(截图 + 说明条) */
.hero-visual {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface-1);
}
.hero-visual__img {
  display: block;
  width: 100%;
  /* ⚠️ height: auto 不能删 —— HTML 上的 width/height 属性会变成 presentational
     hint(相当于显式 height), 显式高度优先于 aspect-ratio, 删了这行图会被拉成
     原始像素高的竖条。software/index.html 的 width="2048" height="1152" 就是这个坑。 */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 600ms var(--ease-soft);
}
.hero-visual:hover .hero-visual__img { transform: scale(1.02); }
.hero-visual figcaption {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual__img { transition: none; }
  .hero-visual:hover .hero-visual__img { transform: none; }
}


/* 场景图带 .scene-band / .figure-band / .figure-card 已于 2026-10-10
   首页"最新动态 mosaic 拼贴"改版后下线, 全站无消费方, 样式移至 index.css */

/* 单张宽幅插图 — 用于正文段落之间(公司简介/案例详情),
   默认带下间距, 页面里不要再写内联 margin */
.figure-wide {
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elev);
}
.figure-wide img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-wide figcaption {
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  background: var(--bg-elev); }

/* ============================================================
   Header — v6 akytec 三段式(工具条/主栏/导航条)
   原"固定吸顶单层"已废弃: .header 改为常驻文档流 (akytec 式
   header 不吸顶), is-scrolled 减亮逻辑随之失效(无伤保留)

   【2026-11-11 考证警示】不要再次把“不吸顶”当缺陷修掉：
   本轮曾因规范§五「导航吸顶」与全站 scroll-margin-top 补偿值
   (78/84/110/130px) 而判定 .header{position:static} 为“全站既有缺陷”
   并尝试把 sticky 上移，读完本段注释后已回退——上面那行“is-scrolled
   失效但无伤保留”本身就是知情决策。规范§五是 preview-v16 首页稿的
   口径，与主站 header 的 v6 三段式属不同时期不同来源的设计，不能互证。
   另注意：在不吸顶前提下，那些 scroll-margin-top 确实会在顶部留出
   无谓空白（属另一个待讨论问题，不靠改吸顶来解决）。
   ============================================================ */
.header {
  /* 常驻文档流、不吸顶：v6 刻意设计，详见上方考证警示 */
  position: static;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header.is-scrolled {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink-1);
  transition: opacity 0.15s;
}
.logo:hover { opacity: 0.85; }

/* v15: logo 上色机制 —— 不再用 <img> + invert 滤镜, 改用同一 SVG 文件做 CSS mask,
   颜色直接走 currentColor (继承 .logo 的 color).
   好处: 几何仍以 assets/img/logo-guericke.svg 为唯一真源 (不复制 path),
   无滤镜栅格化 (边缘更锐), 子目录页面不再依赖 ${p} 路径前缀拼接.
   url() 相对本样式表解析, 故写 ../img/ 而非页面相对路径.
   mask 默认 match-source → 对 SVG 图片取 alpha, 与源文件颜色无关. */
.logo__mark {
  display: block;
  height: 28px;
  aspect-ratio: 3680 / 1120;   /* = logo-guericke.svg 画布比例, 换 logo 时同步 */
  background: currentColor;
  -webkit-mask: url('../img/logo-guericke.svg') no-repeat center / contain;
  mask: url('../img/logo-guericke.svg') no-repeat center / contain;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 12px; }

/* a11y: 键盘 focus 可见性由文件上方"焦点双环"(:focus-visible, 色板 v2.2 红线)统一接管。
   此处原有一条 `*:focus-visible` 泛规则与 :focus-visible 同特异性却书写在后，
   会覆盖双环规范的 box-shadow 外环（只剩 outline），故删除，保持双环为唯一焦点样式。 */

/* a11y: skip-link 静态时移到屏幕外, focus 时显示 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--brand);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }
/* a11y: 视觉隐藏但保留焦点/读屏可达 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nav-link {
  padding: 8px 14px;
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}


.nav-link:hover { background: var(--brand-fill); color: var(--ink-1); }
.nav-link.is-active {
  background: var(--brand-fill);
  color: var(--brand-soft);
}

.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
/* v16: 一级「产品」经用户指令暂时隐藏(2026-11-10) — 恢复时删除本条即可, 模板与菜单样式均保留;
   双段特异性(0,2,0)/(0,3,0)压过上方基线(display:inline-flex)与移动抽屉 display:block, 桌面/移动两端一致隐藏。
   注: 原先同排隐藏的「暂存」(nav-dropdown--staging) 已连模板一起删除, 故此处只剩 --mega。 */
.nav-dropdown.nav-dropdown--mega,
.mobile-drawer__nav .nav-dropdown.nav-dropdown--mega { display: none; }
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 1px solid transparent;  /* v7: light theme 不需要顶部白色高光 */
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(11, 30, 61, 0.10),
    0 2px 4px rgba(11, 30, 61, 0.06);  /* v7: light 阴影 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__link {
  display: block;
  padding: 8px 12px;
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown__link:hover {
  background: var(--brand-fill);
  color: var(--brand-soft); }

/* Mega menu: 3 级导航 (产品 → 4 系列 → 具体型号) */
.nav-dropdown__menu--mega {
  min-width: 760px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--bg-elev);
  border-color: var(--line);
  box-shadow:
    0 16px 48px rgba(11, 30, 61, 0.10),
    0 4px 8px rgba(11, 30, 61, 0.06);
}
.mega-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mega-col__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-1);
  transition: background 0.15s ease;
}
.mega-col__head:hover { background: var(--brand-fill); }
.mega-col__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
}
.mega-col__icon svg { width: 17px; height: 17px; display: block; }
.mega-col__title {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mega-col__title strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-col__title span {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}
.mega-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mega-col__list li a {
  display: block;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.15s ease, color 0.15s ease;
}
.mega-col__list li a:hover {
  background: var(--brand-fill);
  color: var(--brand-soft);
}
.mega-col__ext { color: var(--brand) !important; font-weight: 500; }

/* Mega 菜单底栏: 兼容系列PLC 入口, 横跨全部列 */
.mega-foot {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mega-foot__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-1);
  transition: background 0.15s ease;
}
.mega-foot__link:hover { background: var(--brand-fill); }
.mega-foot__link .mega-col__icon { color: var(--brand); }

.header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: -12px;
}

.header__member-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.header__member-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.header__member-link:hover { color: var(--ink-1); background: var(--brand-fill); }

/* Language toggle — 语言切换: 极简下拉(当前语言+箭头触发, hover/focus 展开; English 上线前 disabled) */
.lang-toggle { position: relative; display: inline-flex; }
.lang-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 6px 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);   /* 触发按钮恒在 header 深幕内: 字面值白系防主题翻转 */
  cursor: pointer;
  transition: color 0.15s;
}
.lang-toggle__btn::after { content: ""; border: 3px solid transparent; border-top-color: currentColor; margin-top: 2px; }
.lang-toggle__btn:hover { color: #FFFFFF; }
.lang-toggle__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 120px;
  padding: 6px;
  background: var(--bg-elev);         /* 菜单弹出在页面区域: 走 token 随深浅主题翻转 */
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(11, 30, 61, 0.10),
    0 2px 4px rgba(11, 30, 61, 0.06);  /* 与导航下拉菜单同款阴影 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);        /* 与导航下拉同向: 从触发件下方落下 */
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.lang-toggle:hover .lang-toggle__menu,
.lang-toggle:focus-within .lang-toggle__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-toggle__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.lang-toggle__item:hover { color: var(--brand-soft); background: var(--brand-fill); }
.lang-toggle__item.is-active { color: var(--ink-1); font-weight: 600; }
.lang-toggle__item.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Generic button (shared)
   v6 akytec 式 圆角胶囊 → 直角; hover 位移去光晕;
   主按钮改 ghost 描边 (akytec "MEHR ERFAHREN" 语言: 透明底 +
   teal 描边 + 淡字, hover 反填 teal 底深字); 现在该填充只留给
   主 CTA (--accent) 做全页唯一强色点
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  /* 【2026-10-20 视觉精致化】由写死 3px(锐角) 改为走控件圆角 token, 与输入框/小卡统一为 6px */
  border-radius: var(--radius-control);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  border: 1px solid transparent;
}
.btn--primary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand); color: #FFFFFF; }
.btn--secondary {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--brand-fill); border-color: var(--line-bright); }
/* 2026-10-26 hero dark-bg CTA fix: keep contrast on --navy-900 dark hero. Scoped to .hero-slide__cta so the default light-bg usage on products/*.html is untouched. */
.hero-slide__cta .btn--primary { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255,255,255,0.08); }
.hero-slide__cta .btn--primary:hover { background: #FFFFFF; color: var(--brand); border-color: #FFFFFF; }
.hero-slide__cta .btn--secondary { color: #E7ECF5; border-color: rgba(255,255,255,0.55); }
.hero-slide__cta .btn--secondary:hover { background: rgba(255,255,255,0.16); color: #FFFFFF; border-color: #FFFFFF; }
.btn--ghost {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--brand-fill); border-color: var(--line-bright); }
.btn--accent {
  background: var(--accent-cta);
  color: var(--accent-cta-on);
  border-color: var(--accent-cta);
  font-weight: var(--fw-semibold);
}
.btn--accent:hover { background: var(--accent-cta-soft); border-color: var(--accent-cta-soft); color: var(--accent-cta-on); }
.btn svg { width: 14px; height: 14px; }

/* Breathing — subtle rhythmic animation */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.93; }
}
@keyframes shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================
    Bottom CTA — v16: 纯色扁平(禁网格/渐隐遮罩红线), h2 对齐 sec-head 标题语言
    ============================================================ */
  .bottom-cta,
  .dl-cta {
    text-align: center;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-deep);
    background-image: none;
  }
  .bottom-cta__inner{ position: relative; z-index: 1; }
  .bottom-cta h2,
  .dl-cta h2 {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.32;
    letter-spacing: -0.015em;
    font-weight: var(--fw-semibold);
    color: var(--ink-1);
    margin: 0 0 14px;
  }
.bottom-cta p,
.dl-cta p {
  color: var(--ink-2);
  font-size: var(--fs-body);
  max-width: 560px;
  margin: 0 auto 32px;
} .dl-cta__buttons{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  background: var(--footer-bg);
  color: var(--ink-3);
  padding: 64px 0 32px;
}
.footer__top {
  display: grid;
  /* v12: keep 9 列结构 (JS 注入对齐).
     配合下方 .footer__col h4/a 的 keep-all, 双层防御: 即使列窄也不拆单字,
     "EXT-MD（数字量）" 自然换行成 "EXT-MD" / "（数字量）" 2 行
     v15: 列间距改由 gap 单一控制 (20 -> 28px), 列内 padding 归 0 —
     原来 gap 20 + 两侧 padding 8 使文字间距实际 36px, 却挤掉 16px 列宽.
     v15.1: brand 轨道改 minmax(150px, 1.4fr) — fr 实际是 minmax(auto, 1fr),
     宽度由各列 min-content 决定, 旧 0.7fr 下 brand 列被 logo 宽度钉在 92px,
     tagline 被拆成 3 行; 给到 150px 下限后自然收成对仗两行. */
  /* v16: 栏目由 9 列收缩为 6 列 (brand + 5 栏目) — 产品 4 系列已合并.
     旧 9 列模板在 6 块内容下右侧空 2 列, 栏目拥挤于左.
     brand 列给足 1.6fr, 与右侧栏目组拉开体量差, 更显均衡. */
  /* v17: 移除页脚"软件"列 → brand + 4 栏目, 轨道同步由 6 收缩为 5,
     否则末尾多一条空轨道会把链接列整体挤偏左、右侧空死。 */
  grid-template-columns: minmax(180px, 1.6fr) repeat(4, 1fr);
  gap: 32px;
  /* 页脚行距单一真源（2026-11-12）：旧状由 `.footer__col ul{gap:10px}` 与全局
     `p,li,dd{margin:0 0 var(--sp-3)}` 两处**相加**得 22px，而成员网站栏当时是
     `div > a` 不吃 li margin，只得到 10px → 两栏从第二行起逐行错 12px。
     22px 是现观感的合成值，改此一处两栏同步；若要收紧整页页脚，改成 10px 即可。 */
  --footer-row-gap: 22px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer__brand p,
.footer__tagline {
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
  margin: 12px 0 0;
  line-height: var(--lh-normal);
  letter-spacing: 0.02em;           /* 2026-10-10 东亚字距: 中文 0.08em 过宽, 收紧 */
}
/* 页脚品牌口号折行宽度的唯一真源——目标: 在中文逗号处断成对仗两行。
   2026-11-11 按终版口号重算: 「让硬件自主，让控制从容」为 5+,，+5 结构。
   15px 字号 + 0.02em 字距 ≈ 每字 15.3px: 前半「让硬件自主，」6 字 ≈ 91.81px(6.12em),
   再多容纳一字（第二个「让」）需 ≈ 107.11px(7.14em)，整句 11 字 ≈ 168.31px。
   可行区间 [6.12em, 7.14em)：小于下界会跳成 3 行，达到上界则断点越过逗号。
   取 6.75em ≈ 101px 居中以容字体渲染浮动。
   历史坑：旧值 8em 是按上一版口号「让控制更从容，让联结更广泛」（6+,，+6）推导的，
   且长期被下方 body > footer.footer 的高特异度规则覆盖而未实际生效。 */
.footer__tagline {
  max-width: 6.75em; }

/* v12: CJK keep-all + overflow-wrap:anywhere
   - keep-all: 中文/日文/韩文不在词中断开, 只在空格/标点处换行
   - overflow-wrap:anywhere: 长 token (URL/设备ID) 仍可断
   - 实测: "NexLink 奈联" → "NexLink" / "奈联" (2 行, 不再 "NEXLINK 奈" / "联")
            "EXT-MD（数字量）" → "EXT-MD" / "（数字量）" (2 行, 不再 3 行单字) */
.footer__col h4,
.footer__col a {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.footer__col h4 {
  /* v15: 12 -> 13px — 原来 h4 与链接同为 12px, 标题与条目没有层级 */
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--ink-1);
  margin: 0 0 12px;
  /* v15: 字距 0.06 -> 0.08em, 并取消暗带规则里的 0.16em ——
     中文标题 ("方案" / "软件") 尾部字距会在右缘拖出空白, 0.16em 时尤明显
     2026-10-10 东亚字距: 再收紧到 0.02em, 中文栏目标题不再拖沓 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  /* v16: 左侧 2px 品牌色竖条点缀, 栏目标题识别度提升
     (深底颜色在 body>footer 覆盖块另配) */
  position: relative;
  padding-left: 10px;
}
.footer__col h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--brand);
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* 2026-11-12: 10px 硬写 → 引用 --footer-row-gap（单点真源，见 .footer__top）。
     旧注释「v15: 8 -> 10px, 行间呼吸」与实际渲染不符——当时 li 的 12px margin
     正在背地里叠加，真实行距一直是 22px。 */
  gap: var(--footer-row-gap);
}
/* v17: li flex 化 —— 当时认为两栏逐行错位是 li 行盒 strut/基线空隙所致，
   但 `display:flex` 只消除了 strut，**没碰 gap 与 li margin 的叠加**，错位原样存在。
   2026-11-12 补上 margin:0 切断叠加（否则全局 `p,li,dd` 的 12px 会与 gap 相加），
   并让成员网站栏也走 li 结构 —— 两栏从此同源同构。
   【教训】注释描述的“已修”不等于命中根因；改完必须实测逐行 top 而不是只看注释。 */
.footer__col ul li { display: flex; margin: 0; }
.footer__col a {
  display: inline-block;
  position: relative;
  padding: 4px 0;          /* v12: 触达区 17px -> ~25px */
  font-size: 12px;
  color: var(--ink-3);
  transition: color 0.15s; }
/* 44px 热区(保守扩热): 页脚链接行距仅 10px, 若补足至 44px 会侵入相邻链接盒造成误点，
   故仅向上下各扩张 5px 填满纯死区间距 + 左右 4px, 命中由 ~25px 提至 ~35px, 零重叠无回归风险 */
.footer__col a::before { content: ""; position: absolute; top: -5px; bottom: -5px; left: -4px; right: -4px; }
/* 悬停下划线: 从左往右扫出, 品牌赭色, 与各列标题前的赭色小竖条呼应 */
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--brand);
  transition: width 0.25s ease; }

/* v16: 悬停提亮 + 下划线扫出(取代旧的右移微动) */
.footer__col a:hover { color: var(--ink-1); }
.footer__col a:hover::after { width: 100%; }

/* v16 P2: 弱化链接("全部产品 →")——原为注入模板内联样式收编进 CSS;
   弱化色与 .footer__legal 同档 0.45 白, hover 提亮到全白。
   需带 body > footer.footer 前缀压过上方同 important 的 0.78 白通用链接色 */
body > footer.footer .footer__col a.footer__link-soft { color: rgba(255, 255, 255, 0.45) !important; }
body > footer.footer .footer__col a.footer__link-soft:hover { color: #FFFFFF !important; }

/* 平台入口行(商城/知控社区/Unite 合壹): 从各列抽出的"平台级"入口, 单独一行
   置于栏目区与法务行之间; 品牌名加粗亮白, tagline 弱化, 窄屏堆叠 */
.footer__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 36px;
  margin-top: 32px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__platform {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0;            /* 触控热区 ~43px, 贴近 44px 底线 */
  font-size: 13px;
  color: rgba(237, 240, 245, 0.92);
  text-decoration: none;
  transition: color 0.15s;
}
/* 成员网站栏内的平台链接组: 结构与其余栏完全同构（ul > li > a），
   行距不再在此重写 —— 由上方 `.footer__col ul` 的 --footer-row-gap 单点控制
   (2026-11-12 删除旧 `gap: 10px` 硬写，那正是两栏错位的另一半原因) */
.footer__col .footer__platforms { flex-direction: column; align-items: flex-start; margin-top: 0; padding-top: 0; border-top: none; }
/* 成员网站栏平台链接保险丝: 图标与文字强制同行（三段特异性压过潜在级联干扰, nowrap 禁文字折行）; 行距/字号对齐栏目链接(4px 0 / 12px) */
.footer__col .footer__platforms .footer__platform { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12px; white-space: nowrap; }
.footer__col .footer__platforms .footer__platform svg { width: 16px; height: 16px; flex: none; }
/* 栏目链接专属图标(方案/支持栏): 与成员网站栏图标同语言(16px stroke + gap 7px), 行内距/字号沿用栏目链接基线 */
.footer__col .footer__icon-link { display: inline-flex; align-items: center; gap: 7px; }
.footer__col .footer__icon-link svg { width: 16px; height: 16px; flex: none; transition: transform 0.22s cubic-bezier(.4, 0, .2, 1); }
.footer__col .footer__icon-link:hover svg { transform: translateY(-2px) scale(1.12); }
.footer__platform svg { width: 16px; height: 16px; flex: none; transition: transform 0.22s cubic-bezier(.4, 0, .2, 1); }
.footer__platform b { font-weight: 400; }
.footer__platform:hover { color: #FFFFFF; }
/* 图标微动效: 悬停轻轻上浮 + 放大, 呼应社交圆环的上浮手感 */
.footer__platform:hover svg { transform: translateY(-2px) scale(1.12); }

.footer__platform:focus-visible { outline: 2px solid #EDF0F5; outline-offset: 2px; border-radius: 4px; }   /* 恒深幕区块: 字面值防主题 token 翻转 */
/* 下划线扫出: platform 与 icon-link 均走 .footer__col a::after 基线(单条全行扫出), 不再挂 b::after 双线 */
.footer__bottom {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__legal {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}
.footer__legal-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: var(--fs-caption);
}
.footer__legal-links a {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  transition: color 0.15s; }

/* v16: 链接间以细分隔线划分, 替代宽松 gap — 视觉更紧凑, 层级更清楚 */
.footer__legal-links a + a {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.footer__legal-links a:hover {
  color: #FFFFFF;
}
.footer__socials {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 圆形描边环按钮: 正圆 + 细描边, 图标居中 */
.footer__socials a,
.footer__socials .footer__social-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
}

/* v16: hover 提亮描边 + 淡白底 + 轻微上浮 */
.footer__socials a:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* v12: 即将开通的微博/B站改用 <button disabled> 替代 <a href="#" aria-disabled>.
   disabled 按钮天然从 tab order 移除 + 屏幕阅读器告知, 比 hack a 更语义化.
   v16: 降低禁用态透明度, 明确不可用; 不响应 hover 反馈 */
.footer__socials .footer__social-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.12);
}
.footer__socials svg { width: 16px; height: 16px; }
.footer__socials a[aria-label*="B 站"] svg,
.footer__socials .footer__social-btn[aria-label*="B 站"] svg { width: 15px; height: 15px; }

/* v17: 桌面/平板页脚社交行预留右侧安全区 — 右下角 AI 客服悬浮球(FAB, fixed right:24 + 56 宽)
   会在滚到底时完全遮住最右的"邮件"圆环, 使其不可见/不可点; 预留 88px 让整排圆环左移避开。
   ≤600px 页脚底栏转纵向、社交行靠左, 不与 FAB 同列, 故仅在 ≥601px 生效。 */
@media (min-width: 601px) {
  .footer__socials { padding-right: 88px; }
}

/* ============================================================
   【2026-11-12 增强】页脚最末行 — 返回顶部入口
   ------------------------------------------------------------
   独立成行右对齐, 不并入 .footer__bottom 的 space-between 布局
   (否则会挤动法务行与社交圆环的既有两端位置, 造成视觉回归)。
   ≥601px 预留 88px 右安全区, 与上方社交圆环同一避让口径:
   右下角 AI 客服 FAB 滚到底时 fixed 在视口右下, 不预留会被完全盖住不可点。
   配色对齐 .footer__legal(--ink-3 灰字, hover 提亮为白), 与页脚既有层级一致。
   ============================================================ */
.footer__end {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}
@media (min-width: 601px) {
  .footer__end { padding-right: 88px; }
}
.footer__back-top {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s ease;
}
.footer__back-top:hover { color: #FFFFFF; }

/* ============================================================
   Cursor ring — 光标跟随光环
   ------------------------------------------------------------
   m3 优化说明: 此处仅保留样式, 事件监听在 common.js
   改为事件委托 (单一 document 监听 + closest 匹配),
   避免给每个 a/button 挂监听器造成的性能开销
   ============================================================ */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  border: 1.5px solid rgba(20, 52, 103, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s;
  opacity: 0;
}
.cursor-ring.is-active {
  width: 48px; height: 48px;
  border-color: rgba(20, 52, 103, 0.9);
}
@media (hover: none) { .cursor-ring { display: none; }
}

/* 深色主题: 黛蓝环在碳黑底上不可见, 换亮蓝(--acc-ink 同源档) */
[data-theme="dark"] .cursor-ring { border-color: rgba(77, 147, 232, 0.7); }
[data-theme="dark"] .cursor-ring.is-active { border-color: rgba(77, 147, 232, 0.95); }

/* ============================================================
   Scroll reveal — IntersectionObserver entrance animation
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0); }

/* ============================================================
   Mobile drawer — 移动端浮层导航
   setupMobileNav() 把 header nav 注入 .mobile-drawer;
   桌面端默认隐藏, < 900px 才启用滑出抽屉 + 遮罩
   ============================================================ */
.mobile-drawer,
.mobile-drawer__overlay { display: none !important; }

@media (max-width: 900px) {
  .mobile-drawer,
  .mobile-drawer__overlay { display: block !important; }
  .mobile-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px);
    background: var(--bg-surface-1);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
    padding: 24px 0 48px;
  }
  .mobile-drawer.is-open { transform: translateX(0); }
  .mobile-drawer__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
    z-index: 999;
  }
  .mobile-drawer__overlay.is-open { opacity: 1; visibility: visible; }
  /* 会员入口: 抽屉顶部的会员中心按钮 (与顶栏被隐藏的那份对应) */
  .mobile-drawer__tools { padding: 0 16px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
  .mobile-drawer__tools .header__member-link {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600;
    letter-spacing: 0.02em; color: #FFFFFF; background: var(--brand);
    border-radius: 10px; text-decoration: none;
  }
  .mobile-drawer__tools .header__member-link:active { opacity: 0.88; }
  .mobile-drawer__tools .header__member-link svg { width: 16px; height: 16px; flex-shrink: 0; }
  .mobile-drawer__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
  .mobile-drawer__nav .nav-dropdown { display: block; }
  .mobile-drawer__nav .nav-link {
    display: block;
    padding: 12px;
    color: var(--ink-1);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
  }
  .mobile-drawer__nav .nav-link.is-active {
    color: var(--brand);
    background: var(--brand-fill);
  }
  .mobile-drawer__nav .nav-dropdown__menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 8px 16px;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mobile-drawer__nav .nav-dropdown__link {
    display: block;
    padding: 8px 12px;
    color: var(--ink-3);
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
  }
  .mobile-drawer__nav .nav-dropdown__link:hover {
    color: var(--brand);
    background: var(--brand-fill); }

/* Mega menu in mobile: 2 列 grid, 列内列表压缩 */
  .mobile-drawer__nav .nav-dropdown__menu--mega {
    min-width: 0;
    padding: 4px 0 8px 16px;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .mobile-drawer__nav .mega-col__head { padding: 4px 8px; }
  .mobile-drawer__nav .mega-col__list li a { padding: 4px 8px; font-size: 12px; }
}

/* ============================================================
  移动端汉堡按钮 (nav-toggle) — common.js setupMobileDrawer 注入
   此前全站只有 900px 媒体查询里一条 display:flex, 无任何基础样式,
   实测按钮 16×6px 几乎不可见. 补齐: ≥44×44 热区 + 暗底三条杠 +
   展开态 (aria-expanded=true) 变形为 ✕
   ============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);   /* header 暗带 --surface-dark 上的浅色条 */
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
  Responsive — 公共断点
   ============================================================ */
@media (max-width: 1180px) {
  /* v15.1: 中间断点 — brand 整行, 4 栏目一行铺满 (正好 4 轨) */
  .footer__top { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .header__nav { display: none; }
  .nav-toggle { display: flex; }
  /* v17: 4 栏目收成 2×2, 避免旧 3 轨下"关于"落单成孤儿列 */
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  /* v17: 手机单列堆叠最稳, 去掉旧的 :last-child 跨列(4 列下会留空格) */
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  /* 2026-11-12 增强: 窄屏页脚底栏已转纵向左对齐, 返回顶部末行同步左对齐,
     并撤销桌面端为避让 FAB 预留的 88px 右安全区(窄屏社交行靠左不与 FAB 同列) */
  .footer__end { justify-content: flex-start; padding-right: 0; }
  /* 2026-11-12 删除旧规则 `.footer__platforms { gap: 0 }`：它是为台账 5-37 已
     删除的「平台入口行」写的，类名被成员网站栏复用后会在窄屏命中该栏（当时仅靠
     特异度 0,1,0 < 0,2,0 侥幸未生效），属埋雷死规则 */
}

/* ============================================================
  Reduced motion — 尊重用户系统偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cursor-ring { display: none; }
}

/* ============================================================
   Header 单层布局 (当前态)
   ------------------------------------------------------------
   设计: 单层导航条, 品牌 / 导航 / 工具组同一视觉层; header 与 footer
         共用暗面底色 --surface-dark, 首尾暗带闭环; 子页面为深色顶部条 + 浅色内容对比。
   结构: .header-main > .container > .header-main__bar
           ├─ .logo (mask + currentColor 直接上白)
           ├─ nav.header__nav (一级导航 8 项可见: 固件/KeyAuth/支持/关于/文档/商城/社区/合壹,
           │    另有暂存/产品两项 CSS 隐藏; 支持与关于为 hover 下拉)
           └─ .header-tools (会员中心 | 语言切换下拉)
   文字: 白系 rgba(255,255,255) 4 档, hover/active 白色反色底;
         下拉菜单保持浅色卡片 (--bg-elev), 深底浅卡对比清晰。
         scroll 状态由 setupHeaderScroll 加 .is-scrolled 类。
   ============================================================ */
.header-main {
  /* --brand 归位为文字/按钮填充色, 不再充当大面积容器底色; 底色与 footer 闭环 */
  background: var(--surface-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* 保留 sticky 写法不动（v6 历史遗留）。注意：因外层 .header 为 static 且仅 66px 高，
     本 sticky 可用行程实际只有 1px，顶栏并不会吸顶——这是 .header 那段注释里
     写明的有意行为，不视为缺陷（参见 common.css 中 Header 段的 2026-11-11 考证警示）。 */
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s;
}
.header-main.is-scrolled {
  /* v15: 底色变深后阴影同步加深一档, 保持浮起感 */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

.header-main__bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 22px;
  padding: 12px 0;
  min-height: 64px;
}
.header-main__bar > .logo { flex-shrink: 0; }

/* v15: 深底 logo — 直接给 .logo 上白色 (mask + currentColor), 取代旧 invert 滤镜 */
.header-main__bar > .logo {
  color: #FFFFFF; }

/* 主导航: 与 logo 保持宽松距离, 占中间; v17 整体右移两格(+112px ≈ 2×固件项宽, 固件落在原文档项左侧),
   恢复 = margin-left 改回 20px */
.header-main__bar > nav.header__nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 132px;
}
.header-main__bar .nav-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
  /* 2026-10-10 东亚字距: 中文导航 0.08em 过宽显松散, 收紧到 0.02em。
     注意本条在 .header-main__bar .nav-link 高优先级选择器内,
     改基础 .nav-link 规则不会生效, 必须在这里改 */
  letter-spacing: 0.02em;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.header-main__bar .nav-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.header-main__bar .nav-link.is-active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16); }

/* v8: 下拉菜单展开时导航项高亮 — 指示当前打开的下拉 (hover / 键盘 focus-within) */
.header-main__bar .nav-dropdown:hover > .nav-link,
.header-main__bar .nav-dropdown:focus-within > .nav-link {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16); }

/* v16: 可展开导航项右侧加小箭头指示器 — 明示存在下拉层级,
   hover / 键盘聚焦展开时箭头旋转 180°, 与下拉滑入动效呼应.
   仅作用于深底 header (桌面端), 不影响移动抽屉 */
.header-main__bar .nav-dropdown > .nav-link::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.header-main__bar .nav-dropdown:hover > .nav-link::after,
.header-main__bar .nav-dropdown:focus-within > .nav-link::after {
  transform: rotate(225deg) translateY(0);
  opacity: 1; }

/* 右侧工具组: 账号 + 语言 + CTA, 始终最右 */
.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}
.header-tools .header__member-link {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.header-tools .header__member-link:hover { color: #FFFFFF; }
/* 语言切换下拉形态已收编到上方 .lang-toggle 区块(触发按钮字面值, 菜单 token 自适应), 深底覆盖区无需重复 */

/* 移动端: 主导航藏起 (走 mobile-drawer), tools 保留 */
@media (max-width: 900px) {
  .header-main__bar > nav.header__nav { display: none; }
  .header-main__bar { gap: 14px; padding: 10px 0; min-height: 56px; }
  .header-tools .header__member-link { display: none; }
  .header-main__cta { padding: 7px 14px; font-size: 12px; }
}
@media (max-width: 640px) {
  .header-tools .lang-toggle { display: none; }
}

/* ============================================================
   Footer 暗炭灰带 — v7 light + 中性灰 (2026-09-19)
   ------------------------------------------------------------
   设计: 整段 footer 用 --brand (#2C3E50) 炭灰底, 内嵌卡片用
         半透明白底 (rgba 255/255/255/0.04) 与炭灰区分,
         形成"深炭盒"层次; 文字主色用 rgba(255,255,255,0.92),
         副文字用 rgba(255,255,255,0.6) 渐次。
   与 hero-banner-band (同色炭灰) 首尾呼应, 全页形成
   "亮带 → 暗带 → 亮带 → 暗带" 的节奏。
   ============================================================ */
/* v7 修复: line 882 的 .footer 浅色规则跟 line 1338 同 specificity 后定义胜出,
   但实测 Vite dev 下浏览器渲染 background 仍走 line 882 (原因: var() 解析 + cascade
   顺序的边缘情况, color 生效 background 不生效).
   提 specificity 到 body > footer.footer + !important 强制覆盖, 不依赖 cascade 顺序. */
/* v15: 已删除 .footer::before 渐变发光线 —— v7 就用 display:none !important 关掉了,
   首尾分隔统一交给下面 body > footer.footer 的 border-top, 不留死代码. */
body > footer.footer {
  /* v13: 用户指定 #0C1220 替代 #2C3E50, 更深的近黑蓝底色
     (GitHub dark / Material You dark surface 同款亮度区间).
     文字白/灰白 rgba 不变, 对比度反而更高 (白 on #0C1220 ≈ 17:1). */
   /* v16 收口: 底色走字面值 #16171B 碳黑 — 不走 var(--footer-bg): 浅色语境下
      该 token 回落 :root 旧值 #061226(玄冥), 造成浅色页页脚与深色页页脚两种深色;
      字面值后浅色页(legal/docs 浅色态)页脚与深色页完全一致 */
   background: #16171B !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body > footer.footer .footer__top { border-bottom: 0 !important; padding-bottom: 24px !important; }

/* v16: 底栏单独一条细分隔线, 与整段 footer「溶成一块」的风格呼应,
   分隔版权区与社交区, 避免上下两段粘连 */
body > footer.footer .footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 20px !important;
  margin-top: 8px; }

/* v7 用户指示: 不要卡片半透明盒, 整段 footer 溶成一块, 列之间靠间距划分.
   v15: padding 归 0 — 列间距已由 .footer__top 的 gap 单一控制. */
body > footer.footer .footer__brand,
body > footer.footer .footer__col {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
body > footer.footer .footer__brand a,
body > footer.footer .footer__col a {
  color: rgba(255, 255, 255, 0.78) !important;
}
/* v16 收口: 成员网站栏(.footer__platform)在浅色语境(legal/docs 浅色态)下曾被观察到非白色 —
   补一条专属纯白保障, 图标(currentColor)与 b 文字一并恒白, 不依赖 .78 通用档的级联推导 */
body > footer.footer .footer__platform,
body > footer.footer .footer__platform b { color: #FFFFFF !important; }
body > footer.footer .footer__brand a:hover,
body > footer.footer .footer__col a:hover { color: #FFFFFF !important; }
body > footer.footer .footer__tagline { color: rgba(255, 255, 255, 0.6) !important; }

/* v15: 只留颜色覆盖 — 字距 / 下边距 / border-bottom 已归位到基础 .footer__col h4,
   不再在此处加 !important (旧 0.16em 字距会让中文标题右缘拖白) */
body > footer.footer .footer__col h4 {
  color: rgba(255, 255, 255, 0.6) !important; }

/* v16: 深底上品牌蓝 (#143467) 与底色 #0C1220 拉不开对比,
   竖条换用暗色模式下的品牌亮蓝替代值 #A9C4E8 */
body > footer.footer .footer__col h4::before {
  background: rgba(169, 196, 232, 0.6) !important;
}
/* v17: 悬停下划线同理 — 深底上 var(--brand) 黛蓝几乎不可见, 改用亮蓝与标题竖条同源 */
body > footer.footer .footer__col a::after {
  background: rgba(169, 196, 232, 0.85) !important;
}

body > footer.footer .footer__legal,
body > footer.footer .footer__legal a { color: rgba(255, 255, 255, 0.45) !important; }
body > footer.footer .footer__legal a:hover { color: #FFFFFF !important; }

/* v15: footer logo 上白 — specificity (0,3,2) 高于上方 .footer__brand a (0,2,3),
   同为 !important 时按 specificity 胜出, 不需再加 filter */
body > footer.footer .footer__brand .logo { color: #FFFFFF !important; }

/* v16: 页脚品牌区适当放大 — 与导航 logo (28px) 保持同一量级, 略增到 32px 突出品牌;
   标语由 13px 增到 15px。
   2026-11-11: 删除本行的 max-width: 10em —— 它以特异度 (0,2,2) 压住了基础规则的
   折行宽度, 导致页脚口号长期断在句中而非逗号处；字号靠此高特异度行设置,
   折行宽度单一真源归位到上方 .footer__tagline。 */
body > footer.footer .footer__brand .logo__mark { height: 32px; }
body > footer.footer .footer__tagline { font-size: 15px; }

/* socials 也提 specificity, 一致兜底 */
body > footer.footer .footer__socials a,
body > footer.footer .footer__socials .footer__social-btn { color: rgba(255, 255, 255, 0.55) !important; }
body > footer.footer .footer__socials a:hover { color: #FFFFFF !important; }
body > footer.footer .footer__socials .footer__social-btn:disabled { color: rgba(255, 255, 255, 0.25) !important; }

/* ============================================================
 * Share & Favorites — 右侧操作栏 / 分享弹层 / 收藏抽屉
 * (common.js 注入; 避开右下角 AI 聊天 FAB, 采用右侧居中竖排)
 * ============================================================ */
.gf-rail {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 9100;
}
.gf-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff; color: var(--ink-3);
  cursor: pointer; box-shadow: 0 6px 20px -8px rgba(6, 18, 38, 0.28);
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.gf-btn svg { width: 20px; height: 20px; fill: currentColor; }
.gf-btn:hover { color: var(--brand); border-color: var(--brand-soft); transform: translateY(-1px); }
.gf-btn:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.gf-btn--fav.is-fav { color: #fff; background: var(--brand); border-color: var(--brand); }
.gf-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 11px; line-height: 16px; text-align: center;
}

.gf-overlay {
  position: fixed; inset: 0; z-index: 9600; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 18, 38, 0.45); backdrop-filter: blur(3px);
}
.gf-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 420px; padding: 18px;
  box-shadow: 0 24px 60px -20px rgba(6, 18, 38, 0.5);
}
.gf-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gf-card__head h3 { margin: 0; font-size: 16px; color: var(--ink-1); }
.gf-card__name { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
.gf-close { border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-4); cursor: pointer; padding: 2px 8px; }
.gf-close:hover { color: var(--ink-1); }
.gf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gf-act {
  font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: #f7f9fc; color: var(--ink-2);
  cursor: pointer; text-decoration: none;
}
.gf-act:hover { border-color: var(--brand-soft); color: var(--brand); }
.gf-qr {
  display: flex; align-items: center; justify-content: center; min-height: 120px;
  padding: 10px; border: 1px dashed var(--border); border-radius: 12px; background: #fbfcfe;
}
.gf-qr img { display: block; border-radius: 6px; }
.gf-qr__ph, .gf-qr__fail { font-size: 12px; color: var(--ink-4); }
.gf-hint { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-4); text-align: center; }

.gf-overlay--drawer { justify-content: flex-end; padding: 0; }
.gf-drawer {
  display: flex; flex-direction: column; height: 100%; width: min(380px, 92vw);
  padding: 18px; background: #fff; box-shadow: -12px 0 40px -16px rgba(6, 18, 38, 0.5);
}
.gf-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gf-drawer__head h3 { margin: 0; font-size: 16px; color: var(--ink-1); }
.gf-drawer__body { overflow: auto; }
.gf-favlist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gf-favitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.gf-favitem__a { font-size: 14px; color: var(--ink-1); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-favitem__a:hover { color: var(--brand); }
.gf-favitem__rm { border: none; background: transparent; font-size: 12px; color: var(--ink-4); cursor: pointer; }
.gf-favitem__rm:hover { color: var(--red); }
.gf-empty { font-size: 13px; line-height: 1.7; color: var(--ink-4); }

@media (max-width: 560px) {
  .gf-rail { right: 10px; gap: 8px; }
  .gf-btn { width: 40px; height: 40px; }
  .gf-btn svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-btn { transition: none; }
  .gf-btn:hover { transform: none; }
}

/* ============================================================
   Shop (.gs- 前缀, 避让 .gf-/.gc-) — 工业品自营商城 阶段A
   购物车按钮/角标 + 商城目录页(分类导航/搜索/栅格/价格锁/标签) + 购物车抽屉
   移动优先: 栅格 auto-fill, ≤560px 收紧; 触控目标 ≥44px
   ============================================================ */
.header__cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; margin-right: 4px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.header__cart-btn svg { width: 22px; height: 22px; }
.header__cart-btn:hover { color: var(--brand); background: rgba(20, 52, 103, 0.06); border-color: var(--border); }
.gs-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; line-height: 18px;
  text-align: center; font-weight: 700; box-shadow: 0 1px 4px rgba(6,18,38,.3);
}

/* 页面壳 */
.gs-page { padding: 96px 0 64px; }
.gs-head { margin-bottom: 20px; }
.gs-head__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--brand-soft); margin: 0 0 8px; }
.gs-head__title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: var(--ink-1); margin: 0 0 8px; }
.gs-head__sub { font-size: 14px; color: var(--ink-3); line-height: 1.7; margin: 0; }

/* 运营 banner / 公告(后台「商城设置」录入, 前台据目录响应回显) */
.gs-banner { margin: 4px 0 0; padding: 14px 18px; border-radius: 12px; background: linear-gradient(135deg, #143467, #0b1a33); color: #eaf0f8; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: .01em; }
.gs-notice { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--brand); background: rgba(20,52,103,.06); border-radius: 0 8px 8px 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.gs-more { display: flex; justify-content: center; margin: 22px 0 4px; }

/* 工具条: 搜索 + 结果计数 */
.gs-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 18px 0 12px; }
.gs-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 460px; }
.gs-search__input { flex: 1; height: 44px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ink-1); background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.gs-search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20,52,103,.12); }
.gs-search__btn { height: 44px; padding: 0 18px; border: none; border-radius: 10px; background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gs-search__btn:hover { filter: brightness(1.06); }
.gs-result-count { font-size: 13px; color: var(--ink-4); }

/* 分类导航 chips */
.gs-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.gs-cat { font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-2); cursor: pointer; transition: all .16s ease; min-height: 38px; }
.gs-cat:hover { border-color: var(--brand); color: var(--brand); }
.gs-cat.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.gs-cat--sub { font-size: 12px; padding: 6px 12px; }
.gs-cats__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.gs-cats__grouplabel { font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); margin-right: 2px; }

/* 卡片栅格 */
.gs-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gs-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.gs-card:hover { border-color: var(--brand); box-shadow: 0 12px 30px -14px rgba(6,18,38,.28); transform: translateY(-2px); }
.gs-card__media { display: flex; align-items: center; justify-content: center; height: 140px; background: linear-gradient(180deg, #0b1a33, #0a1526); color: #8aa0c0; }
.gs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-card__media--ph { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; }
.gs-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; flex: 1; }
.gs-card__title { font-size: 15px; font-weight: 700; color: var(--ink-1); line-height: 1.35; }
.gs-card__title a { color: inherit; text-decoration: none; }
.gs-card__title a:hover { color: var(--brand); }
.gs-card__meta { font-size: 12px; color: var(--ink-4); }
.gs-card__sku { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.gs-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gs-card__price { font-size: 16px; font-weight: 800; color: var(--brand); margin-top: 4px; }
.gs-card__price .gs-card__pricefrom { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.gs-card__actions { display: flex; gap: 8px; margin-top: 10px; }
.gs-card__actions .gs-btn { flex: 1; }

/* 价格锁 */
.gs-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); background: rgba(20,52,103,.06); border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; margin-top: 4px; }

/* 标签 */
.gs-tag { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 999px; font-weight: 600; }
.gs-tag--stock { background: rgba(34,112,107,.12); color: var(--ok); }
.gs-tag--preorder { background: rgba(138,90,23,.14); color: var(--amber); }
.gs-tag--out { background: rgba(200,60,60,.12); color: var(--red); }
.gs-tag--contact { background: rgba(85,103,126,.14); color: var(--ink-3); }
.gs-tag--tier { background: rgba(20,52,103,.10); color: var(--brand); }
.gs-tag--featured { background: rgba(42,74,117,.12); color: var(--brand-soft); }
.gs-tag--goods { background: rgba(20,52,103,.08); color: var(--brand); }
.gs-tag--license { background: rgba(42,74,117,.12); color: var(--brand-soft); }
.gs-tag--inquiry { background: rgba(85,103,126,.12); color: var(--ink-3); }

/* 通用按钮 */
.gs-btn { font: inherit; font-size: 13px; min-height: 40px; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .16s ease; }
.gs-btn:hover { border-color: var(--brand); color: var(--brand); }
.gs-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.gs-btn--primary:hover { filter: brightness(1.06); color: #fff; }
.gs-btn--ghost { background: transparent; }
.gs-btn--disabled, .gs-btn[disabled] { opacity: .5; cursor: not-allowed; }
.gs-btn--block { width: 100%; }

/* 空/加载态 */
.gs-state { text-align: center; color: var(--ink-4); font-size: 14px; padding: 48px 16px; }

/* 购物车抽屉 */
.gs-drawer { display: flex; flex-direction: column; height: 100%; width: min(400px, 94vw); padding: 18px; background: #fff; box-shadow: -12px 0 40px -16px rgba(6,18,38,.5); }
.gs-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gs-drawer__head h3 { margin: 0; font-size: 16px; color: var(--ink-1); }
.gs-drawer__body { flex: 1; overflow: auto; }
.gs-cartlist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gs-cartitem { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.gs-cartitem__main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.gs-cartitem__name { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.gs-cartitem__sku { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }
.gs-cartitem__price { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.gs-qty { width: 64px; height: 32px; padding: 0 8px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; text-align: center; }
.gs-qty:focus { outline: none; border-color: var(--brand); }
.gs-cartitem__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gs-cartitem__sub { font-size: 14px; font-weight: 700; color: var(--brand); }
.gs-cartitem__rm { border: none; background: transparent; font-size: 12px; color: var(--ink-4); cursor: pointer; }
.gs-cartitem__rm:hover { color: var(--red); }
.gs-cartfoot { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 2px; margin-top: 12px; border-top: 1px solid var(--border); }
.gs-cartfoot__label { font-size: 13px; color: var(--ink-3); }
.gs-cartfoot__total { font-size: 18px; font-weight: 800; color: var(--brand); }
.gs-drawer__actions { display: flex; gap: 10px; margin-top: 14px; }
.gs-drawer__actions .gs-btn { flex: 1; }

@media (max-width: 560px) {
  .gs-page { padding-top: 84px; }
  .gs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .gs-card__media { height: 120px; }
  .gs-search { max-width: none; }
  .header__cart-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-card, .gs-card:hover, .gs-btn, .gs-cat, .header__cart-btn { transition: none; }
  .gs-card:hover { transform: none; }
}

/* ============================================================
   【2026-10-20 视觉精致化】数字排版: 等宽数字(tabular-nums)
   ------------------------------------------------------------
   目的: 参数表 / 统计值 / 价格 / 型号编号 / 时间戳 在切换或数字变化时不再左右
         跳动 —— 比例字体下 '1' 比 '8' 窄, 多行数字列会参差不齐(显脏)。
   范围: 以数字为主的容器与 .tnum 工具类(可手动加到任意元素)。
   风险: 仅改变数字字形宽度, 不改字号/颜色/布局; 纯文字段落不受影响。
   ============================================================ */
.tnum,
table,
time,
.pd-spec-table th,
.pd-spec-table td,
.stat__value,
[data-tnum] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   【2026-10-20 中期批次·动效补全】微交互三件套
   ------------------------------------------------------------
   ① 卡片 hover 轻抬升 2px + 一级阴影(不改圆角、不改文字)
   ② 进入淡入上移 / ③ 滚动渐进揭示 —— 由 assets/js/common.js 的 reveal 模块驱动:
      仅当 JS 就绪(html.reveal-ready)才隐藏元素 → **无 JS / JS 失败时内容照常可见**,
      且首屏内已可见的元素不参与揭示(避免"闪一下")。
   约束: 全程尊重 prefers-reduced-motion(下方媒体查询整体关闭动效)。
   ============================================================ */
.gs-card, .pd-cap, .pd-app-card, .pd-related__card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.gs-card:hover, .pd-cap:hover, .pd-app-card:hover, .pd-related__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* 滚动揭示态(仅 reveal-ready 时隐藏, 保证无 JS 安全) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(8px); }
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .gs-card, .pd-cap, .pd-app-card, .pd-related__card { transition: none; }
  .gs-card:hover, .pd-cap:hover, .pd-app-card:hover, .pd-related__card:hover { transform: none; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   超时占位面板 — about 系页面加载看门狗注入 (common.js setupAboutLoadingWatchdog)
   原为注入模板内联样式, 收编进 CSS; token 驱动深浅自适应
   ============================================================ */
.timeout-panel{ text-align:center; max-width:480px; padding:24px 16px; margin:0 auto; }
.timeout-panel__tag{ font-family:var(--font-mono); font-size:12px; color:var(--brand-soft); letter-spacing:.1em; margin:0 0 16px; }
.timeout-panel__title{ font-size:clamp(24px,3.5vw,36px); font-weight:800; margin:0 0 12px; color:var(--ink-1); }
.timeout-panel__sub{ font-size:14px; color:var(--ink-3); line-height:1.7; margin:0 0 20px; }
.timeout-panel__msg{ font-size:13px; color:var(--ink-4); line-height:1.7; margin:0 0 20px; font-family:var(--font-mono); }
.timeout-panel__btn{ display:inline-block; padding:10px 24px; background:var(--brand); color:#fff; border:none; border-radius:var(--radius-sm,6px); font-size:14px; font-weight:600; cursor:pointer; margin:0 8px 12px; }
.timeout-panel__back{ display:inline-block; padding:10px 24px; border:1px solid var(--border); border-radius:var(--radius-sm,6px); font-size:13px; color:var(--ink-2); text-decoration:none; margin:0 8px 12px; }
.timeout-panel__contact{ font-size:12px; color:var(--ink-4); margin:16px 0 0; }
.timeout-panel__contact a{ color:var(--brand-soft); text-decoration:none; }

/* ============================================================
  * gc-crumb 全站面包屑组件 (P2-15, common.js setupBreadcrumb 注入)
 * 硬件产品页生成区自带 .pd-breadcrumb, 不受影响。
 * ============================================================ */
.gc-crumb { font-size: 12.5px; color: var(--ink-4); padding-top: 18px; }
.gc-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.gc-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.gc-crumb a { color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
.gc-crumb a:hover { color: var(--brand-soft); }
.gc-crumb [aria-current] { color: var(--ink-2); font-weight: 600; }

/* 平台外链标识 (P2-20): 头部导航商城/社区/合壹等 target=_blank 项自动追加 ↗ */
.header .nav-link[target="_blank"]::after { content: "↗"; font-size: 0.72em; margin-left: 3px; vertical-align: super; opacity: 0.72; }