/* ============================================================
   梦之源官网 - header.css
   依据 Figma「梦之源-导航」(1920 基准, 内容列 1440)
   - 顶栏 64px: logo 124×36 / 导航 8 项 14px 间距48 / 工厂实景VR 胶囊
     / 搜索 / 语言切换
   - 双态: 白色底子(白底+底边 1px #EBEBEB) / 无底子(透明+反白)
   - 下拉面板:
     * 硬件产品: 二级分类 4 项 + 6 产品卡(220×256) + 查看全部(72px)
     * 软件服务: 系统平台 3 卡(252×176) + AI软件 5 图标(60×60)
     * 关于我们/解决方案/服务与支持: 图标行 (136px)
     * 语言弹窗 160×112
   ============================================================ */

/* ---------- 顶栏基础 ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* ---------- logo ---------- */
.logo { display: block; flex: none; }
.logo-img { height: 36px; width: auto; display: block; }
.logo .logo-dark { display: none; }   /* 透明底 → 反白 logo */
.logo .logo-light { display: block; }

/* ---------- 主导航 ---------- */
.main-nav { position: absolute; left: 50%; transform: translateX(-50%); }
.navbar { display: flex; align-items: center; }
.navbar > li { position: relative; }
.navbar > li > a {
  display: block;
  padding: 0 24px;
  height: 64px;
  line-height: 64px;
  font-size: 14px;
  font-weight: 513;
  color: #fff;                 /* 透明底 → 白字 */
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.navbar > li > a:hover { color: #fff; opacity: .85; }
.navbar > li.active > a {
  color: #2168E5;
  font-weight: 666;
}
/* 激活项视觉对齐: 保持与其他项一致的盒模型, 仅颜色/字重不同 */

/* ---------- 头部工具(搜索/语言/VR) ---------- */
.header-tools {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
}
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  cursor: pointer;
}
.icon-btn img { width: 20px; height: 20px; display: block; }

/* 工厂实景VR 胶囊 */
.vr-pill {
  display: flex; align-items: center; justify-content: center;
  height: 26px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 200px;
  font-size: 13px;
  font-weight: 513;
  color: #fff;
  white-space: nowrap;
  transition: all .3s var(--ease);
}

/* ---------- 白色底子态 ---------- */
.site-header.is-scrolled,
.site-header.dd-open,
.site-header.is-search-solid {
  background: #fff;
  box-shadow: inset 0 -1px 0 0 #EBEBEB;
}
.site-header.is-scrolled .logo .logo-dark,
.site-header.dd-open .logo .logo-dark,
.site-header.is-search-solid .logo .logo-dark { display: block; }
.site-header.is-scrolled .logo .logo-light,
.site-header.dd-open .logo .logo-light,
.site-header.is-search-solid .logo .logo-light { display: none; }
.site-header.is-scrolled .navbar > li > a,
.site-header.dd-open .navbar > li > a,
.site-header.is-search-solid .navbar > li > a { color: #2E3033; }
.site-header.is-scrolled .navbar > li > a:hover,
.site-header.dd-open .navbar > li > a:hover,
.site-header.is-search-solid .navbar > li > a:hover { color: #2168E5; }
.site-header.is-scrolled .navbar > li.active > a,
.site-header.dd-open .navbar > li.active > a,
.site-header.is-search-solid .navbar > li.active > a { color: #2168E5; }
.site-header.is-scrolled .vr-pill,
.site-header.dd-open .vr-pill,
.site-header.is-search-solid .vr-pill {
  border-color: #5C6066;
  color: #2E3033;
}
/* 图标随底切换: 透明底反白(白色), 白底用原色 */
.site-header:not(.is-scrolled):not(.dd-open) .icon-btn img {
  filter: brightness(0) invert(1);
}

/* ---------- 下拉面板公共 ----------
   展开动画 (类似搜索快速链接):
   - 面板从上方滑入 (translateY -12px → 0)
   - 面板内子项依次淡入上移 (opacity + translateY + 递增 delay) */
.dropdown {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: 1920px;
  max-width: 100vw;
  background: #fff;
  box-shadow: 0 24px 48px rgba(0,0,0,.08);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.navbar > li.has-drop:hover > .dropdown,
.navbar > li.has-drop:focus-within > .dropdown,
.navbar > li.has-drop > .dropdown:hover {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 面板内子项: 默认隐藏下移, hover 时淡入上移 */
.dropdown .dd-cats a,
.dropdown .dd-card,
.dropdown .dd-soft-card,
.dropdown .dd-soft-icon,
.dropdown .dd-mini a,
.dropdown .dd-all {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-cats a, .navbar > li.has-drop .dropdown:hover .dd-cats a,
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card, .navbar > li.has-drop .dropdown:hover .dd-card,
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-card, .navbar > li.has-drop .dropdown:hover .dd-soft-card,
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-icon, .navbar > li.has-drop .dropdown:hover .dd-soft-icon,
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-mini a, .navbar > li.has-drop .dropdown:hover .dd-mini a,
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-all, .navbar > li.has-drop .dropdown:hover .dd-all {
  opacity: 1;
  transform: translateY(0);
}
/* 依次出现 (递增 delay): 硬件分类 → 产品卡 → 查看全部 */
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-cats a:nth-child(1) , .navbar > li.has-drop .dropdown:hover .dd-cats a:nth-child(1) { transition-delay: .04s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-cats a:nth-child(2) , .navbar > li.has-drop .dropdown:hover .dd-cats a:nth-child(2) { transition-delay: .09s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-cats a:nth-child(3) , .navbar > li.has-drop .dropdown:hover .dd-cats a:nth-child(3) { transition-delay: .14s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-cats a:nth-child(4) , .navbar > li.has-drop .dropdown:hover .dd-cats a:nth-child(4) { transition-delay: .19s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card:nth-child(1) , .navbar > li.has-drop .dropdown:hover .dd-card:nth-child(1) { transition-delay: .16s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card:nth-child(2) , .navbar > li.has-drop .dropdown:hover .dd-card:nth-child(2) { transition-delay: .22s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card:nth-child(3) , .navbar > li.has-drop .dropdown:hover .dd-card:nth-child(3) { transition-delay: .28s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card:nth-child(4) , .navbar > li.has-drop .dropdown:hover .dd-card:nth-child(4) { transition-delay: .34s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card:nth-child(5) , .navbar > li.has-drop .dropdown:hover .dd-card:nth-child(5) { transition-delay: .40s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-card:nth-child(6) , .navbar > li.has-drop .dropdown:hover .dd-card:nth-child(6) { transition-delay: .46s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-all, .navbar > li.has-drop .dropdown:hover .dd-all { transition-delay: .52s; }
/* 软件服务: 系统平台卡 → AI 图标 */
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-card:nth-child(1) , .navbar > li.has-drop .dropdown:hover .dd-soft-card:nth-child(1) { transition-delay: .06s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-card:nth-child(2) , .navbar > li.has-drop .dropdown:hover .dd-soft-card:nth-child(2) { transition-delay: .12s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-card:nth-child(3) , .navbar > li.has-drop .dropdown:hover .dd-soft-card:nth-child(3) { transition-delay: .18s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-icon:nth-child(1) , .navbar > li.has-drop .dropdown:hover .dd-soft-icon:nth-child(1) { transition-delay: .20s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-icon:nth-child(2) , .navbar > li.has-drop .dropdown:hover .dd-soft-icon:nth-child(2) { transition-delay: .25s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-icon:nth-child(3) , .navbar > li.has-drop .dropdown:hover .dd-soft-icon:nth-child(3) { transition-delay: .30s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-icon:nth-child(4) , .navbar > li.has-drop .dropdown:hover .dd-soft-icon:nth-child(4) { transition-delay: .35s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-soft-icon:nth-child(5) , .navbar > li.has-drop .dropdown:hover .dd-soft-icon:nth-child(5) { transition-delay: .40s; }
/* 迷你下拉: 链接依次出现 */
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-mini a:nth-child(1) , .navbar > li.has-drop .dropdown:hover .dd-mini a:nth-child(1) { transition-delay: .06s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-mini a:nth-child(2) , .navbar > li.has-drop .dropdown:hover .dd-mini a:nth-child(2) { transition-delay: .12s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-mini a:nth-child(3) , .navbar > li.has-drop .dropdown:hover .dd-mini a:nth-child(3) { transition-delay: .18s; }
.navbar > li.has-drop:is(:hover, :focus-within) .dropdown .dd-mini a:nth-child(4) , .navbar > li.has-drop .dropdown:hover .dd-mini a:nth-child(4) { transition-delay: .24s; }

/* ============================================================
   硬件产品 下拉 (设计帧 544px 含导航 64px → 面板 480px)
   ============================================================ */
.dropdown--hardware { height: 480px; }
.dd-cats {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 96px;
  width: 686px;
}
.dd-cats a {
  font-size: 14px;
  font-weight: 513;
  color: #2E3033;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.dd-cats a:hover { color: #2168E5; }
.dd-cats a.active { color: #2168E5; font-weight: 666; }

.dd-panel { position: absolute; top: 104px; left: 0; right: 0; display: none; }
.dd-panel.active { display: block; }
.dd-cards {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* 产品卡 220×256 (设计稿: 背景块只在顶部200px, 标题脱离背景) */
.dd-card {
  width: 220px;
  height: 256px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;      /* 卡片本身无背景 */
  border-radius: 6px;
  transition: transform .3s var(--ease);
}
.dd-card:hover { transform: translateY(-4px); }

/* 顶部灰色背景块 (220×200, #EFF0F2, 圆角6px) — 产品图区域 */
.dd-card-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  background: #EFF0F2;
  border-radius: 6px;
  overflow: hidden;
}
/* 双图: 默认黑屏图, hover 彩屏图 */
.dd-card-img img {
  max-height: 85%;
  max-width: 85%;
  object-fit: contain;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.img-color { position: absolute; opacity: 0; }   /* 彩屏图默认隐藏 */
/* hover: 黑屏淡出, 彩屏显示 + 放大 */
.dd-card:hover .img-dark { opacity: 0; }
.dd-card:hover .img-color { opacity: 1; transform: scale(1.06); }

/* 标题 (脱离背景块, 在白底上) */
.dd-card-name {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 513;
  color: #222426;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dd-card-sub {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(34,36,38,.5);
}

/* NEW / HOT 标签 */
.dd-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 666;
  line-height: 14px;
  color: #fff;
}
.tag-new { background: #FA901E; }
.tag-hot { background: #FA3E3E; }

/* 查看全部产品 条 (72px) */
.dd-all {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 513;
  color: rgba(34,36,38,.85);
  box-shadow: inset 0 1px 0 0 #EBEBEB;
  transition: color .25s var(--ease);
}
.dd-all svg { width: 18px; height: 18px; fill: none; stroke: #393C40; stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: round; }
.dd-all:hover { color: #2168E5; }
.dd-all:hover svg { stroke: #2168E5; }

/* ============================================================
   软件服务 下拉 (设计帧 630px 含导航 64px → 面板 566px)
   ============================================================ */
.dropdown--software {
  height: 566px;
  display: flex;
  flex-direction: column;
  padding: 40px 240px 0;
  box-sizing: border-box;
}
.dd-soft-block + .dd-soft-block { margin-top: 60px; }
.dd-soft-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                    /* 标题底 → 描述顶 8px */
}
.dd-soft-title { font-size: 16px; font-weight: 666; color: #2E3033; line-height: 24px; }
.dd-soft-desc { font-size: 13px; color: rgba(34,36,38,.5); line-height: 16px; }

.dd-soft-cards {
  display: flex;
  gap: 40px;
  margin-top: 16px;            /* 描述底 → 卡顶 16px */
}
.dd-soft-card { width: 252px; }
.dd-soft-img {
  display: block;
  width: 252px;
  height: 148px;
  border-radius: 6px;
  overflow: hidden;
  background: #D9D9D9;
}
.dd-soft-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.dd-soft-card:hover .dd-soft-img img { transform: scale(1.08); }   /* hover: 图片稍微放大 */
.dd-soft-name {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #2E3033;
  text-align: center;
}

.dd-soft-icons {
  display: flex;
  gap: 40px;
  margin-top: 14px;            /* 描述底 → 图标顶 14px */
}
.dd-soft-icon {
  width: 60px;
  text-align: center;
  transition: transform .3s var(--ease);
}
.dd-soft-icon:hover { transform: translateY(-4px); }
.dd-soft-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(133deg, #DBEAFF 0%, #F5E2FF 100%);
}
.dd-soft-ic img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.dd-soft-icon:hover .dd-soft-ic img { transform: scale(1.12); }   /* hover: 图标稍微放大 */
.dd-soft-icon .dd-soft-name { margin-top: 8px; }

/* ============================================================
   迷你下拉: 关于我们 / 解决方案 / 服务与支持
   (设计帧 136px 含导航 64px → 面板 72px)
   ============================================================ */
.dropdown--mini { height: 72px; }
.dd-mini {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 64px;
  align-items: center;
}
.dd-mini--3 { gap: 80px; }
.dd-mini a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 513;
  color: #2E3033;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.dd-mini a:hover { color: #2168E5; }
/* 当前页面对应子项: 高亮 */
.dd-mini a.active { color: #2168E5; font-weight: 666; }
.dd-mini a.active svg { color: #2168E5; }
/* 白底导航页面 (视频中心/售后/FAQ/下载) 下, 非激活项始终保持深色, 不受透明导航白字规则影响 */
body .site-header .dropdown .dd-mini a { color: #2E3033; }
body .site-header .dropdown .dd-mini a:hover { color: #2168E5; }
body .site-header .dropdown .dd-mini a.active { color: #2168E5; }
/* 内联 SVG 图标: 20×20, 颜色跟随文字 (currentColor) */
.dd-mini svg { width: 20px; height: 20px; display: block; flex: none; }
.dd-mini svg path { transition: fill .25s var(--ease), stroke .25s var(--ease); }
.dd-mini a:hover svg { color: #2168E5; }

/* ============================================================
   搜索面板 (设计图「全局搜索」精确数据)
   白色卡片 (560,0) 800×340 圆角[0,0,12,12] 无阴影, 从右滑入
   - 卡片内: 搜索图标(580,22) 20×20 + 占位文字(612,18) 16px #222426α0.65
   - logo 在导航栏(240,14) 卡片外不被覆盖
   - icon-取消 (1616,22) 在导航栏右侧
   - 快速连接 (612,84) 111×228, 点击搜索框后显示
   ============================================================ */

/* 全屏黑色遮罩 (α0.5) */
.search-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
  z-index: 99;
}
.search-mask.show { visibility: visible; opacity: 1; }

/* 搜索打开时: 隐藏导航项 + 右侧按钮, logo 保留 */
body.search-open .main-nav,
body.search-open .header-tools { visibility: hidden; opacity: 0; pointer-events: none; }

/* 搜索面板 (560,0) 800宽 — 从右到左滑入
   滑入态: 高度64px 与头部一致; 点击搜索框后展开到340px 显示快速链接 */
.search-panel {
  position: fixed;
  top: 0;
  left: 560px;
  width: 800px;
  height: 64px;                /* 初始: 与头部同高 */
  background: #fff;
  transform: translateX(900px);   /* 初始: 在右侧外 */
  visibility: hidden;
  opacity: 0;
  transition:
    transform .5s var(--ease),
    height .35s var(--ease) .1s,   /* 展开动画 */
    opacity .35s var(--ease),
    visibility .5s var(--ease);
  z-index: 102;   /* 高于导航(100) */
  overflow: hidden;
}
.search-panel.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);   /* 滑入到位 (从右到左) */
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
/* 聚焦后: 展开到 340px 显示快速链接 */
.search-panel.focused {
  height: 340px;
}
.search-open header {
    border-bottom: 1px solid #EDEFF2;
}
/* 搜索框容器 — 胶囊 800×48 (Rectangle 67 radius 100) */
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  width: 800px;
  padding: 0 24px;
  box-sizing: border-box;
  background: #fff;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .3s var(--ease) .2s, transform .3s var(--ease) .2s;
}
.search-panel.show .search-box { opacity: 1; transform: translateX(0); border-bottom: 1px solid #EDEFF2;}
.search-ic { width: 20px; height: 20px; flex: none; }
.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 16px;
  line-height: 28px;
  color: #222426;
}
.search-input::placeholder { color: rgba(34,36,38,.65); }

/* icon-取消 (1616,22) — 导航栏右侧, 卡片外; 独立元素 */
.search-cancel {
  position: fixed;
  left: auto;
  right: 256px;          /* 面板右缘 1360 + 256 = 1616 (设计稿 1920) */
  top: 22px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .3s var(--ease) .25s, transform .3s var(--ease) .25s;
  z-index: 103;
  visibility: hidden;
}
.search-cancel.show { visibility: visible; opacity: 1; transform: translateX(0); }
.search-cancel svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #666;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* 快速连接 (612,84) — 卡片内相对 x=52,y=84 — 点击搜索框后显示 */
.search-links {
  position: absolute;
  left: 52px;       /* 612-560 */
  top: 84px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
}
.search-panel.focused .search-links { visibility: visible; opacity: 1; transform: translateY(0); }
.search-links-title {
  font-size: 14px;
  font-weight: 666;
  line-height: 28px;
  color: rgba(34,36,38,.65);
  margin-bottom: 8px;
}
.search-links a {
  display: block;
  font-size: 16px;
  line-height: 28px;
  color: #222426;
  padding: 6px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: color .2s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
/* 每条快捷词依次出现 (i 递增延迟) */
.search-links a:nth-child(2) { transition-delay: .05s; }
.search-links a:nth-child(3) { transition-delay: .1s; }
.search-links a:nth-child(4) { transition-delay: .15s; }
.search-links a:nth-child(5) { transition-delay: .2s; }
.search-links a:nth-child(6) { transition-delay: .25s; }
.search-panel.focused .search-links a { opacity: 1; transform: translateY(0); }
.search-links a:hover { color: #2168E5; }

/* ============================================================
   搜索面板 — 响应式 (设计基准 1920, 面板 800px 居中)
   ============================================================ */
/* ≤1600: 面板缩到 620 (覆盖 1440 笔记本) */
@media (max-width: 1600px) {
  .search-panel {
    left: calc(50% - 310px);
    width: 620px;
  }
  .search-box {
    width: 620px;
    padding: 0 20px;
  }
  .search-links { left: 20px; }
  .search-cancel { right: calc(50% - 310px - 40px); }  /* 面板右缘(50%+310) 右侧 40px 间隙 */
}

/* ≤1100: 面板缩到 520 */
@media (max-width: 1100px) {
  .search-panel {
    left: calc(50% - 260px);
    width: 520px;
  }
  .search-box {
    width: 520px;
  }
  .search-links { left: 20px; }
  .search-cancel { right: calc(50% - 260px - 40px); }
}

/* ≤767: 面板近全宽 (左右留 16px), 高度保持 64 */
@media (max-width: 767px) {
  .search-panel {
    left: 16px;
    width: calc(100% - 32px);
    height: 64px;
  }
  .search-panel.focused { height: 300px; }
  .search-box {
    width: 100%;
    height: 64px;
    padding: 0 16px;
  }
  .search-links { left: 16px; top: 76px; }
  .search-cancel { right: 16px; top: 22px; }
}

/* ============================================================
   语言切换弹窗
   ============================================================ */
.lang-wrap { position: relative; }
.lang-pop {
  position: absolute;
  top: 42px;
  right: -8px;
  width: 160px;
  background: #fff;
  border: 1px solid #EDEFF2;
  border-radius: 4px;
  box-shadow: 0 2px 24px rgba(0,0,0,.05);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.lang-pop a {
  display: block;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #2E3033;
}
.lang-pop a.active { color: #2168E5; }
.lang-wrap:hover .lang-pop,
.lang-wrap:focus-within .lang-pop {
  visibility: visible;
  opacity: 1;
}

/* ============================================================
   移动端: 汉堡按钮 / 抽屉 / 遮罩 (默认隐藏, ≤1100 显示)
   ============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #2E3033;
  border-radius: 1px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
/* 透明底时汉堡为白 */
.site-header:not(.is-scrolled):not(.dd-open) .nav-toggle span { background: #fff; }

.m-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.m-mask.show { visibility: visible; opacity: 1; }

.m-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: #fff;
  z-index: 101;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.m-drawer.open { transform: translateX(0); }
.m-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid #EBEBEB;
}
.m-drawer-head .logo-img { height: 28px; }
.m-close {
  font-size: 28px;
  line-height: 1;
  color: #2E3033;
  cursor: pointer;
  padding: 4px;
}
.m-nav { padding: 8px 0 20px; }
.m-nav > li { border-bottom: 1px solid #F2F3F4; }
.m-nav > li > a,
.m-sub-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 20px;
  font-size: 15px;
  color: #2E3033;
}
.m-sub-title i {
  font-style: normal;
  font-size: 18px;
  color: #9DA5B2;
  transition: transform .3s var(--ease);
}
.m-sub {
  display: none;
  padding: 0 20px 12px 32px;
}
.m-sub.open { display: block; }
.m-sub a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #737780;
  border-bottom: 1px solid #F7F8F9;
}
.m-sub a:last-child { border-bottom: 0; }
.m-sub a:active { color: #2168E5; }
/* 当前页面对应子项: 高亮 */
.m-sub a.active { color: #2168E5; font-weight: 666; }
/* 白底导航页面下, 非激活项保持灰色 */
body .m-drawer .m-sub a { color: #737780; }
body .m-drawer .m-sub a.active { color: #2168E5; }
.m-drawer-foot {
  margin-top: auto;
  padding: 16px 20px 24px;
  display: flex;
  justify-content: center;
}
.m-drawer-foot .vr-pill { border-color: #5C6066; color: #2E3033; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1336px) {
  .navbar > li > a { padding: 0 16px; }
  .header-tools { gap: 16px; }
  .vr-pill { padding: 0 12px; }
}

/* 小桌面: 隐藏 VR 胶囊, 收窄导航 */
@media (max-width: 1100px) {
  .vr-pill { display: none; }
  .navbar > li > a { padding: 0 12px; font-size: 13px; }
  .dropdown--software { padding-left: 40px; padding-right: 40px; }
  .dd-cats { gap: 48px; }
}

/* 平板: 切换为抽屉菜单 */
@media (max-width: 767px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .logo { margin-right: auto; }
  .header-inner { justify-content: flex-start; gap: 16px; }
  .header-tools { margin-left: auto; }
  .vr-pill { display: none; }
  .lang-pop { right: -40px; }
}