/* ============================================================
   顶部导航栏 Apple/macOS 毛玻璃样式 (custom inject)
   - 悬浮 fixed 顶部，左右留边距，圆角胶囊
   - 半透明背景 + backdrop-filter 高斯模糊 + 高饱和（macOS 毛玻璃）
   - light/dark 双模式适配
   覆盖主题默认 #nav（absolute、透明、无背景模糊）
   ============================================================ */

/* ---- 指针周围局部光斑（跟随鼠标，仅指针附近亮起） ----
   用户要求：光效限制在指针周围一点，而非整条导航栏发光。
   做法：nav 内注入一个 .nav-glow 覆盖层（pointer-events:none），JS 用
   mousemove 更新其 --gx/--gy 变量；光斑为径向渐变，只在指针附近亮起。
   去掉原先整条 #nav:hover 的 box-shadow 外发光，避免全栏泛光。 */
#nav {
  position: fixed !important;
  top: 12px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  z-index: 999 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(15, 25, 50, .14) !important;
  opacity: 1 !important;
  /* 注意：不能设 overflow:hidden！它会把挂在 .menus_item 下的
     悬浮下拉 .nav-drop（top:calc(100%+14px)，超出 nav 边界）裁掉，
     导致"向下展开没了"。光斑 ::after / 边缘环 ::before 都在 nav 内部
     (inset:0)，用自身 border-radius 即可，无需靠 overflow 裁剪。 */
  transform: none !important;
  transition: opacity .3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  /* light：macOS 毛玻璃 */
  background: linear-gradient(150deg, rgba(246, 248, 252, .58), rgba(232, 238, 248, .48)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .60);
}

/* 跟随指针的局部光晕层：改为独立合成层(元素) + transform 平移。
   原方案是在 ::after 上移动 radial-gradient 中心(改 --gx/--gy)，
   但那属于每帧重绘(paint)；改用固定尺寸光斑元素 + transform:translate3d，
   transform 只走合成器(compositor)不触发重绘，帧数更高、更跟手。
   光斑轻量 (椭圆 96x76px，即元素 192x152)：仅指针附近微亮，不泛满整栏。
   羽化拉高：过渡带 28%/52%/75% 均匀停点，边缘渐进弥散到 100% 透明。 */
#nav .nav-glow-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;   /* 只裁光斑到 nav 圆角内；不影响 .nav-drop(它不在本容器) */
  pointer-events: none;
  z-index: 0;
}
#nav .nav-glow-spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 192px;
  height: 152px;
  border-radius: 50%;
  background: radial-gradient(
    96px 76px at 50% 50%,
    rgba(140, 195, 255, .30),
    rgba(150, 205, 255, .20) 28%,
    rgba(160, 210, 255, .12) 52%,
    rgba(170, 215, 255, .05) 75%,
    transparent 100%
  );
  /* 位置与亮度由 JS 直写 style.transform / style.opacity（合成层最快路径）。
     这里仅作 JS 未注入时的静态兜底定位；无 transition：JS 每帧写入的
     连续值已天然平滑，transition 反而引入滞后(拖尾)。 */
  transform: translate3d(-96px, -76px, 0);
  will-change: transform;
  opacity: 0;
}
/* ---- 光斑点亮时导航栏边缘高亮（跟随指针方向）----
   在光斑引发的同时, 胶囊边缘也泛起一圈描边高亮, 且最亮处跟随指针:
   指针靠近哪条边, 哪条边的边缘就亮。
   结构：.nav-edge(固定 mask 抠 1.5px 环, 不随指针重绘) 内嵌
   .nav-edge-light(大尺寸径向渐变层, JS 用 transform 直写平移光心)。
   关键：light 的 transform 只走合成器，绝不在 ::before/背景上改
   渐变中心(CSS 变量 → 每帧 paint)，消除快速移动的拖影/跳动。 */
#nav .nav-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* 只保留紧贴边缘的一圈(1.5px 环), 内部挖空；mask 固定，不随指针变化 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
  opacity: 0; /* JS 直写(与光斑同步) */
  overflow: hidden;
}
#nav .nav-edge-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 400px;
  background: radial-gradient(
    340px 120px at 50% 50%,
    rgba(140, 195, 255, .55),
    rgba(150, 205, 255, .22) 45%,
    rgba(160, 210, 255, .08) 70%,
    transparent 90%
  );
  /* JS 直写 transform 使渐变光心落在指针(clamp)处；初始移到不可见位 */
  transform: translate3d(-800px, -200px, 0);
  will-change: transform;
}
/* 悬停兜底（纯 CSS，JS 未启用时鼠标进入导航栏仍会点亮） */
#nav:hover .nav-glow-spot,
#nav:hover .nav-edge {
  opacity: 1;
}
/* 文字与内容浮在光斑之上 */
#nav #blog-info,
#nav #menus,
#nav > *:not(.nav-glow-clip) {
  position: relative;
  z-index: 1;
}
html[data-theme='dark'] #nav {
  background: linear-gradient(150deg, rgba(36, 42, 60, .55), rgba(20, 24, 36, .52)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .40) !important;
}
html[data-theme='dark'] #nav .nav-glow-spot {
  background: radial-gradient(
    96px 76px at 50% 50%,
    rgba(100, 160, 255, .28),
    rgba(85, 135, 235, .18) 28%,
    rgba(75, 125, 225, .10) 52%,
    rgba(65, 115, 215, .05) 75%,
    transparent 100%
  );
}
html[data-theme='dark'] #nav .nav-edge-light {
  background: radial-gradient(
    340px 120px at 50% 50%,
    rgba(120, 180, 255, .60),
    rgba(90, 150, 250, .25) 45%,
    rgba(70, 120, 230, .08) 70%,
    transparent 90%
  );
}

/* ---- 布局：站名(标题)在最左，然后是最新文章/归档，汉堡按钮靠右 ----
   用户要求：标题在最左，之后紧跟菜单项。
   覆盖主题默认为 #menus 设置的 margin-left:auto（会把菜单推到最右）。
   关键：#blog-info 必须收缩到内容宽度(width:max-content / flex:0 0 auto)，
   否则它会被撑满(实测 642px)，把「最新文章/归档」挤到中间偏右 → 位置错误。
   修复后实测：#blog-info=164px，菜单从 x=223 开始，最新文章/归档紧贴标题居左。 */
#nav #blog-info {
  order: 0 !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-right: 18px !important;
  display: block !important;
}
#nav #blog-info .nav-site-title {
  white-space: nowrap !important;
}
#nav #menus {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#nav #menus .menus_items {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#nav #menus #toggle-menu {
  order: 9 !important;
  margin-left: auto !important;
}

/* ---- dark：深色毛玻璃 ---- */
html[data-theme='dark'] #nav {
  background: linear-gradient(150deg, rgba(36, 42, 60, .55), rgba(20, 24, 36, .52)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .40) !important;
}

/* ---- 滚动后（#page-header.nav-fixed）：主题会把 nav 移到 top:-60px 隐藏、
     背景改 rgba(255,255,255,.7)、blur(7px)。我们让它始终悬浮在顶、保留毛玻璃。 ---- */
#page-header.nav-fixed #nav,
#page-header.full_page #nav {
  top: 12px !important;
  transform: none !important;
  transition: opacity .3s ease !important;
  background: linear-gradient(150deg, rgba(246, 248, 252, .58), rgba(232, 238, 248, .48)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .60);
}
html[data-theme='dark'] #page-header.nav-fixed #nav,
html[data-theme='dark'] #page-header.full_page #nav {
  background: linear-gradient(150deg, rgba(36, 42, 60, .55), rgba(20, 24, 36, .52)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .40) !important;
}

/* ---- 文字颜色（毛玻璃会改变底色，需同步） ---- */
#nav .site-name,
#nav .site-page,
#nav a,
#nav span.site-page {
  color: rgba(40, 44, 60, .90) !important;
  text-shadow: none;
}
html[data-theme='dark'] #nav .site-name,
html[data-theme='dark'] #nav .site-page,
html[data-theme='dark'] #nav a,
html[data-theme='dark'] #nav span.site-page {
  color: rgba(255, 255, 255, .88) !important;
}

/* 导航项 hover：主题色 */
#nav a:hover,
#nav span.site-page:hover {
  color: var(--theme-color, #49b1f5) !important;
}
html[data-theme='dark'] #nav a:hover,
html[data-theme='dark'] #nav span.site-page:hover {
  color: var(--theme-color, #49b1f5) !important;
}

/* ---- 悬浮光感（HarmonyOS 6.0 按压光感，但触发改为指针悬浮） ----
   HarmonyOS 的"按压光感"是一种柔和、漫射的辉光（软光晕，非硬边框胶囊）：
   从上往下透出的浅色亮晕 + 轻微内发光，按压/悬浮时平滑浮现。
   这里把触发从"按压"改为"指针悬浮"(hover / focus-within)。
   关键：光晕用 ::before 绝对定位 inset:0，不占布局、不做 scale/位移，
   避免造成 UI 错位或把文字顶开；文字(z-index:1)保持在光晕之上。
   布局用父级 a 的 padding，不在 .menus_item 上加会挤位的 padding。 */
#nav .menus_item {
  position: relative;
  border-radius: 10px;
  /* 覆盖主题默认 padding-left:14px，统一左右水平留白，避免不对称错位 */
  padding: 0 11px !important;
  margin: 0;
}
/* 链接去掉主题自带的下 padding（会造成文字顶天），由 .menus_item 统一控制 */
#nav .menus_item > a.site-page,
#nav .menus_item > span.site-page {
  padding: 7px 0 !important;
  display: inline-block;
}
/* 光晕本体：浅色径向漫射辉光 + 顶部柔光（HarmonyOS 质感） */
#nav .menus_item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255, 255, 255, .66), rgba(255, 255, 255, .10) 55%, transparent 78%),
    linear-gradient(180deg, rgba(120, 180, 250, .30), rgba(150, 205, 255, .16) 55%, rgba(180, 215, 255, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .50), inset 0 0 14px rgba(140, 195, 255, .18);
  opacity: 0;
  transition: opacity .26s ease;
  pointer-events: none;
  z-index: 0;
}
/* 指针悬浮 / 聚焦时浮现光感 */
#nav .menus_item:hover::before,
#nav .menus_item:focus-within::before {
  opacity: 1;
}
/* 文字浮在光晕之上 (链接自带主题 padding，放在其父级 .menus_item 上) */
#nav .menus_item > a,
#nav .menus_item > span {
  position: relative;
  z-index: 1;
}
/* 悬浮时文字转主题色 */
#nav .menus_item:hover > a,
#nav .menus_item:hover > span {
  color: var(--theme-color, #49b1f5) !important;
}

/* dark：深色的 HarmonyOS 辉光（更低透明白 + 偏蓝冷调） */
html[data-theme='dark'] #nav .menus_item::before {
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 55%, transparent 78%),
    linear-gradient(180deg, rgba(90, 150, 255, .34), rgba(70, 115, 210, .20) 55%, rgba(80, 130, 230, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 16px rgba(90, 150, 255, .22);
}
html[data-theme='dark'] #nav .menus_item:hover > a,
html[data-theme='dark'] #nav .menus_item:hover > span {
  color: var(--theme-color, #49b1f5) !important;
}

/* ---- 菜单子项（下拉）毛玻璃 ---- */
#nav .menus_item_child {
  background: linear-gradient(150deg, rgba(246, 248, 252, .90), rgba(238, 243, 250, .86)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 10px 30px rgba(15, 25, 50, .18);
  border: 1px solid rgba(255, 255, 255, .60);
  border-radius: 10px !important;
}
html[data-theme='dark'] #nav .menus_item_child {
  background: linear-gradient(150deg, rgba(34, 40, 58, .94), rgba(20, 24, 36, .92)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .50);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* 收起菜单图标颜色 */
#nav #toggle-menu i {
  color: rgba(40, 44, 60, .90) !important;
}
html[data-theme='dark'] #nav #toggle-menu i {
  color: rgba(255, 255, 255, .88) !important;
}

/* ---- 悬浮下拉：最新文章 / 归档 ----
   .menus_item:hover 时向下展开一个毛玻璃面板，列出文章链接。
   PC 用 CSS :hover 触发显示；面板由 nav-apple.js 动态构建（.nav-drop）。
   面板挂在 .menus_item 内，随其一起定位，避免被 nav 其它元素裁剪。 */
#nav .menus_item {
  position: relative;
}
#nav .nav-drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  max-width: 340px;
  /* 滚动区在内部 .nav-drop-scroll，外层只负责裁切圆角 */
  overflow: hidden;
  border-radius: 16px;
  /* 常规投影阴影；边缘发光由 .nav-drop-edge(环) 承担，与导航一致 */
  box-shadow: 0 18px 50px rgba(40, 54, 88, .28), 0 4px 14px rgba(40, 54, 88, .10);
  border: 1px solid rgba(255, 255, 255, .50);

  background: linear-gradient(
    150deg,
    rgba(232, 234, 242, .62) 0%,
    rgba(210, 216, 232, .50) 100%
  ) !important;
  -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(.97);
  backdrop-filter: blur(40px) saturate(170%) brightness(.97);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1000;
}
/* 悬停桥：填补菜单按钮与面板之间 12px 空隙，避免鼠标下滑时 :hover 丢失造成闪烁 */
#nav .nav-drop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
/* ---- 面板边缘发光（与导航栏 .nav-edge 完全同构）----
   外层 .nav-drop-edge 用固定 mask 抠出 1.5px 环（同 .nav-edge），内嵌
   .nav-drop-edge-light 大径向渐变层，JS transform 直写把光心平移到
   面板内指针位置——颜色/强度/范围/过渡与导航边缘高亮一致。 */
#nav .nav-drop-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
  overflow: hidden;
  z-index: 0;
}
#nav .nav-drop-edge-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 680px;
  height: 240px;
  background: radial-gradient(
    340px 120px at 50% 50%,
    rgba(140, 195, 255, .55),
    rgba(150, 205, 255, .22) 45%,
    rgba(160, 210, 255, .08) 70%,
    transparent 90%
  );
  transform: translate3d(-340px, -120px, 0);
  will-change: transform;
}
/* ---- 面板内指针光斑（与导航栏同款光效语言）----
   面板由 JS 构建时注入 .nav-drop-glow（固定渐变层, transform 直写平移），
   鼠标在面板上移动时, 光心跟随, 毛玻璃上泛起与导航栏一致的柔和辉光。
   glow 为面板内层；head/list 浮在其上。 */
#nav .nav-drop-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    130px 90px at 50% 50%,
    rgba(140, 195, 255, .26),
    rgba(150, 205, 255, .16) 30%,
    rgba(160, 210, 255, .08) 55%,
    transparent 80%
  );
  transform: translate3d(-130px, -90px, 0);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
html[data-theme='dark'] #nav .nav-drop-edge-light {
  background: radial-gradient(
    340px 120px at 50% 50%,
    rgba(120, 180, 255, .60),
    rgba(90, 150, 250, .25) 45%,
    rgba(70, 120, 230, .08) 70%,
    transparent 90%
  );
}
html[data-theme='dark'] #nav .nav-drop-glow {
  background: radial-gradient(
    130px 90px at 50% 50%,
    rgba(110, 170, 255, .30),
    rgba(90, 150, 250, .18) 30%,
    rgba(70, 120, 230, .09) 55%,
    transparent 80%
  );
}
#nav .nav-drop-head,
#nav .nav-drop-list,
#nav .nav-drop-empty {
  position: relative;
  z-index: 1;
}
/* ---- 面板滚动区：内容承载 + 自定义滚动条 ----
   外层 .nav-drop 不滚动(仅裁圆角)；head/list 放进 .nav-drop-scroll，
   超高时出现细窄的半透明主题色滚动条，与毛玻璃面板协调。 */
#nav .nav-drop-scroll {
  position: relative;
  z-index: 1;
  display: block;
  padding: 10px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Firefox 细滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 170, 255, .45) rgba(120, 170, 255, .08);
}
/* WebKit/Chromium 滚动条：窄轨 + 圆角半透明主题色滑块 */
#nav .nav-drop-scroll::-webkit-scrollbar {
  width: 7px;
}
#nav .nav-drop-scroll::-webkit-scrollbar-track {
  background: rgba(120, 170, 255, .07);
  border-radius: 999px;
}
#nav .nav-drop-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(130, 185, 255, .55), rgba(100, 160, 255, .45));
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
}
#nav .nav-drop-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(150, 200, 255, .75), rgba(110, 170, 255, .60));
}
html[data-theme='dark'] #nav .nav-drop-scroll {
  scrollbar-color: rgba(110, 175, 255, .5) rgba(110, 175, 255, .06);
}
html[data-theme='dark'] #nav .nav-drop-scroll::-webkit-scrollbar-track {
  background: rgba(110, 175, 255, .06);
}
html[data-theme='dark'] #nav .nav-drop-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(110, 175, 255, .6), rgba(90, 150, 250, .5));
  border: 1px solid rgba(255, 255, 255, .08);
}
/* 显示：桌面用 :hover，触屏用 .open（JS 点击切换）。
   不用 @media (hover:hover) 包裹（它在触屏/部分设备误判为 none，
   会让 hover 下拉"没生效"）。统一 :hover + .open 双通道，兼容最大。 */
#nav .menus_item:hover .nav-drop,
#nav .menus_item.open .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 面板头部 */
#nav .nav-drop-head {
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 6px 14px 10px;
  color: rgba(58, 68, 92, .78);
  border-bottom: 1px solid rgba(60, 80, 120, .18);
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 600;
}
html[data-theme='dark'] #nav .nav-drop-head {
  color: rgba(200, 210, 240, .60);
  border-bottom-color: rgba(140, 160, 210, .14);
}

/* 文章列表 */
#nav .nav-drop-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#nav .nav-drop-list li {
  margin: 0 !important;
  padding: 0 !important;
}
#nav .nav-drop-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(40, 44, 60, .90) !important;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
#nav .nav-drop-list a:hover {
  background: linear-gradient(150deg, rgba(120, 180, 250, .22), rgba(160, 210, 255, .16));
  color: var(--theme-color, #49b1f5) !important;
  transform: translateX(3px);
}
#nav .nav-drop-list a:active {
  transform: translateX(3px) scale(.985);
}
html[data-theme='dark'] #nav .nav-drop-list a {
  color: rgba(255, 255, 255, .88) !important;
}
html[data-theme='dark'] #nav .nav-drop-list a:hover {
  background: linear-gradient(150deg, rgba(90, 150, 255, .26), rgba(70, 110, 200, .14));
  color: var(--theme-color, #49b1f5) !important;
}

/* 空态 */
#nav .nav-drop-empty {
  padding: 12px;
  font-size: 13px;
  text-align: center;
  color: rgba(70, 80, 110, .60);
}
html[data-theme='dark'] #nav .nav-drop-empty {
  color: rgba(200, 210, 240, .55);
}

/* 深色模式面板 */
html[data-theme='dark'] #nav .nav-drop {
  background: linear-gradient(150deg, rgba(34, 40, 58, .96), rgba(20, 24, 36, .93)) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ---- 移动端：胶囊变窄，保留毛玻璃；下拉改点击触发 + 全宽面板 ---- */
@media (max-width: 768px) {
  #nav {
    left: 10px !important;
    right: 10px !important;
    height: 50px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
  }
  #nav .nav-drop {
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-6px) !important;
    max-width: none;
  }
  #nav .nav-drop-scroll {
    max-height: 300px;
  }
  /* 触屏 .open 生效时也要去掉 translateX(-50%)，用全宽定位 */
  #nav .menus_item.open .nav-drop {
    transform: translateY(0) !important;
  }
}