/* @@SPLIT_HEADER@@
   css/menu.css —— 顶栏三组大菜单
      由 redesign2.html 拆分而来（原行号 1755-1801），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   14. 顶栏大菜单（售后 5 项 / 更多功能 27 项 / 设置 15 项）
   ◆ 菜单挂在 .navdd 里（position:relative），面板 top:calc(100% + 6px)。
   ◆ 为什么面板上方要留一段 ::before 透明区（高 6px 正好盖住缝隙）：
     鼠标从菜单项往下走到面板，中间那 6px 空隙一经过就会触发 .navdd 的
     mouseleave，菜单当场收起 —— 这块透明区把「移动路径」连起来。
   ◆ 为什么面板最大宽 760px 还要 4 列等宽：27 项一列会拉成一条长条，4 列才像
     真实站点那种「大菜单」；列标题用 11px 灰字，和项区分开。
   ========================================================================== */
.navdd{position:relative;display:inline-flex}
.navmenu{
  display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  z-index:150;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.06);
  padding:10px;grid-template-columns:1fr;gap:2px 10px;
}
.navdd.open>.navmenu{display:grid}
.navmenu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.navmenu.cols4{width:760px;grid-template-columns:repeat(4,1fr)}
.navmenu.cols5{width:920px;grid-template-columns:repeat(5,1fr)}
.navmenu.cols3{width:560px;grid-template-columns:repeat(3,1fr)}
.navmenu.cols1{width:220px;grid-template-columns:1fr}
/* 窄屏（1280）：920px 面板居中会顶出视口右侧，改成「贴着左右各 16px、横向铺满」
   的固定定位板。这样任何宽度都不会出头，也不会把文档撑出横向滚动。 */
@media (max-width:1500px){
  .navmenu.cols5,.navmenu.cols4{position:fixed;left:16px;right:16px;width:auto;
    top:48px;transform:none;grid-template-columns:repeat(5,1fr)}
  .navmenu.cols4{grid-template-columns:repeat(4,1fr)}
}
.nm-col{min-width:0;display:flex;flex-direction:column;gap:1px}
.nm-hd{font-size:11px;color:var(--faint);padding:6px 8px 4px;white-space:nowrap}
.nm-item{
  display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:6px;
  font-size:12px;color:var(--text-2);white-space:nowrap;cursor:pointer;min-width:0;
}
.nm-item:hover{background:#f3f4f6}
/* 当前页：沿用第 9 条那套「浅蓝底 + 左蓝条」的选中样式 */
.nm-item.on{background:var(--accent-weak);color:var(--accent);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nm-item .nm-i{width:14px;height:14px;flex:none;color:#94a3b8}
.nm-item.on .nm-i{color:var(--accent)}
.nm-item .nm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nm-item .nm-check{width:12px;height:12px;flex:none;color:var(--accent);visibility:hidden}
.nm-item.on .nm-check{visibility:visible}
.nm-crown{width:12px;height:12px;flex:none;fill:#d4a017;stroke:none}
.nm-new{flex:none;font-size:9px;line-height:14px;padding:0 4px;border-radius:4px;background:#ef4444;color:#fff;font-weight:600}
.nm-tag{flex:none;font-size:9px;line-height:14px;padding:0 4px;border-radius:4px;background:#f59e0b;color:#fff;font-weight:600}