/* ============================================
   /portal/assets/css/portal.nav.css
   ============================================ */ 
/* ============================================
   第一层+第二层导航栏（PC 端）---基础框架
   ============================================ */
/*  固定导航栏（企业级门户专用） */
.portal-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--portal-nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1000;
  
  /* ⭐ 关键修复：允许搜索框边框完整显示 */
  overflow: visible;
}

/* 导航内部容器（全宽 + 左右留白 + 居中） */
.portal-nav-inner {
  display: flex;
  align-items: center;
  position: relative; /* ⭐ 在这里加这一行 */

  width: 100%;
  max-width: none; /* ⭐ 关键：让导航真正占满全宽 */
  margin: 0; /* ⭐ 不要居中，否则汉堡永远靠不到右边 */
  padding: 0 24px; /* ⭐ PC 端左右各留 24px */
}

/* 左侧整体：Logo + 菜单 */
.portal-nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 0 0 auto;   /* ← 左侧宽度由内容决定 */
}

/* 右侧按钮区域：始终贴右 */
.portal-nav-actions {
  flex: 0 0 auto;                 /* ← 右侧宽度由内容决定 */
  display: flex;
  justify-content: flex-end;      /* 内部按钮靠右 */
  align-items: center;
  gap: 10px;
}

/* 允许搜索建议浮层显示 */
.portal-nav { overflow: visible; }

/* PC：登录 / 注册 / 已登录区域默认隐藏，交给 JS 控制显示，避免闪烁 */
#portal-btn-login,
#portal-btn-register,
#portal-user-area {
  display: none;
}

/* 页面处于 portal-loading 状态时，先把 PC 端会切换状态的区域隐身 */
body.portal-loading #portal-btn-login,
body.portal-loading #portal-btn-register,
body.portal-loading #portal-user-area {
  visibility: hidden;
}

/* 手机端汉堡按钮（默认隐藏） */
.portal-nav-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  user-select: none;
}

/* ⭐ PC 端隐藏手机端面包按钮（新结构） */
.portal-mobile-menu-toggle {
    display: none;
}

/* 全局头像样式（PC + Mobile + Dropdown 统一） */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* 用户名昵称设置 */
.portal-nav-actions .username {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.2px;   /* ⭐ 字间距 */
    line-height: 1.45;       /* ⭐ 行高 */
    padding: 4px 6px;        /* ⭐ 让点击区域更舒服 */
    color: var(--portal-text-main);

    max-width: 6em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* ======================================================================================================================
   ---------------------------------------------------------PC 第二层导航栏----------------------------------------------
   ==================================================================================================================== */
/* ============================================
   Logo 区域
   ============================================ */
/* 左侧 Logo 区域 */
.portal-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 18px;               /* ⭐ Logo 文本字号 */
  font-weight: 600;              /* ⭐ Logo 文本粗细 */
  letter-spacing: 0.5px;         /* ⭐ 字间距：让中文更大气 */
  line-height: 1.4;              /* ⭐ 行高：视觉更稳 */
  color: var(--portal-text-main);
}

/* Logo 图标（导航栏左侧） */
.portal-nav-brand-mark {
  width: 28px;                 /* ⭐ 图标宽度 */
  height: 28px;                /* ⭐ 图标高度 */
  border-radius: 10px;         /* ⭐ 圆角 */
  background: linear-gradient(135deg, #2563eb, #4f46e5);

  display: flex;               /* ⭐ 让内部文字居中 */
  align-items: center;
  justify-content: center;

  font-size: 14px;             /* ⭐ 图标内文字字号 */
  font-weight: 700;            /* ⭐ 图标内文字粗细 */
  line-height: 1;              /* ⭐ 避免文字上下偏移 */
  color: #ffffff;

  flex-shrink: 0;              /* ⭐ 防止图标被压缩 */
}

/* ======================================
   第二层导航栏PC 菜单 + 二级菜单
   ==================================== */

/* 中间菜单区域 */
.portal-nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 导航栏一级菜单文字（PC） */
.portal-nav-link {
  font-size: 16px;                 /* ⭐ 字号：导航栏标准字号 */
  font-weight: 400;                /* ⭐ 字重：常规，不加粗 */
  color: var(--portal-text-main);  /* ⭐ 默认字体颜色 */
  text-decoration: none;           /* 去掉下划线 */

  height: auto;                    /* ⭐ 不强制高度，由 padding 决定点击区域 */
  padding: 8px 14px;               /* ⭐ 上下 8px，左右 14px，保证点击区域舒适 */
  display: inline-flex;            /* ⭐ 让文字垂直居中 */
  align-items: center;             /* ⭐ 垂直居中对齐 */

  letter-spacing: 1.2px;           /* ⭐ 字间距：让中文不挤，更高级 */
  line-height: 1.45;               /* ⭐ 行高：更舒服的阅读体验 */

  border-radius: 999px;            /* ⭐ 胶囊形状（阿里云同款） */
  transition: color 0.15s ease,    /* ⭐ hover 文字颜色渐变 */
              background 0.15s ease; /* ⭐ hover 背景渐变 */
}

/* ⭐ 商品分类一级菜单字体加粗 */
.portal-nav-link.nav-item-category {
    font-weight: 600 !important;
}

/* /*------------- PC 导航栏底部滑块条（Vercel 风格）-----------------/* */

/* 底部滑块条（Vercel 风格） */
.portal-nav-menu {
  position: relative;
}

.portal-nav-underline {
  position: absolute;
  bottom: 8px; /* 根据字体/行高微调（可改为 6px 或 10px） */
  height: 2px;
  background: var(--portal-primary); /* 站点主色 */
  border-radius: 2px;

  width: 0;
  left: 0;
  transform: translateX(0);
  opacity: 0;

  transition:
    width 0.25s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.18s ease;
  pointer-events: none;
  will-change: width, transform, opacity;
}

/* 移动端隐藏滑块条（通常不需要） */
@media (max-width: 768px) {
  .portal-nav-underline { display: none; }
}
/* /*------------------- 菜单滑条代码结束---------------/* */

/* PC：导航栏菜单字体颜色 + hover 风格 */
.portal-nav-link:hover {
  color: var(--portal-primary);   /* 蓝色hover（字体变蓝），原来是var(--portal-text-main); */
  background: #f3f4f6;            /* 如不要灰底hover就换成：transparent;  */
}

/* ⭐ 一级菜单：当 mega panel 打开时保持高亮 */
.portal-nav-item-with-children.active-parent > .portal-nav-link {
    color: var(--portal-primary) !important;
    background: #f3f4f6 !important;
}

/* ⭐ 激活态（当前页面） */
.portal-nav-link.active {
  color: var(--portal-primary);
  background: var(--portal-primary-soft);
}

/* ====== PC 二级菜单（hover 下拉） ====== */

/* 包含子菜单的导航项 */
.portal-nav-item-with-children {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--portal-nav-height);
}

/* 一级菜单（有子菜单）样式 */
.portal-nav-link.has-children {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* PC 菜单下拉箭头（尺寸对齐右上角用户箭头） */
.portal-nav-link.has-children .arrow {
  font-size: 12px;      /* 缩小到和右上角一致的视觉大小 */
  line-height: 1;
  opacity: 0.7;
  font-weight: 400;
  transform: translateY(1px); /* 微调垂直位置，让箭头更居中 */
}

/* ⭐ PC 菜单：隐藏下拉箭头（不影响右上角用户菜单箭头） */
.portal-nav-menu .portal-nav-link.has-children .arrow {
    display: none !important;
}

/* 二级菜单容器 */
.portal-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 4px 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  z-index: 2000;
}

/* hover 展开二级菜单 */
.portal-nav-item-with-children:hover .portal-submenu {
  display: block;
}

.portal-submenu a {
  display: block;
  padding: 6px 14px;
  white-space: nowrap;
  color: #111;
}

.portal-submenu a:hover {
  background: #f3f4f6;
}

/* ============================================================
   按双层导航栏高度设置变量（高度数值到base.css内设置）
   ========================================================== */
/* ⭐ 第一层导航栏（portal_topbar.php） */
.portal-topbar {
    height: var(--portal-topbar-height);  
    /* ↑ 设置第一层导航栏的高度，使用你在 :root 定义的变量 --portal-topbar-height */
}

/* ⭐ 第二层导航栏（portal_nav.php） */
.portal-nav-second {
    height: var(--portal-nav-height);      
    /* ↑ 设置第二层导航栏的高度，使用变量 --portal-nav-height */

    top: var(--portal-topbar-height);      
    /* ↑ 第二层导航栏往下移动“第一层导航栏的高度”，避免两个导航栏重叠 */

    z-index: 900;                           
    /* ↑ 第二层导航栏的层级比第一层低（第一层是 1000），确保第一层在上面 */
}

/* ======================================================================================================================
   ------------------------------------PC 第一层导航栏的“搜索框区域”的样式---------------------------------------
   ====================================================================================================================== */
/* ============================================
   Amazon 搜索框：强制三块在一行显示
   ============================================ */

/* 外层容器本身就是一行 */
.portal-topbar-search .ui-search-bar {
    display: flex;
    align-items: center;
}

/* 表单强制用 flex，一行排布 */
.portal-topbar-search .ui-search-form {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}

/* 左侧分类块：不要被全局样式拉满一行 */
.portal-topbar-search .ui-search-category {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 分类下拉：取消 width:100% 之类的全局影响 */
.portal-topbar-search .ui-search-category select {
    width: auto !important;
    display: inline-block !important;
}

/* 中间输入框：占据中间所有剩余空间 */
.portal-topbar-search .ui-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    display: block;
}

/* 右侧按钮：固定宽度，不要 100% */
.portal-topbar-search .ui-search-btn {
    flex: 0 0 auto;
    width: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* ============================================
   顶部搜索框（中间栏，真正让搜索框居中）
   ============================================ */
.portal-topbar-search {
    flex: 1;                     /* 让它占据中间所有空间 */
    display: flex;
    justify-content: center;     /* 水平居中搜索框 */
    align-items: center;         /* 垂直居中 */
    min-width: 0;                /* 防止被左右挤爆 */
}
/* ------------------------------------------------------下面是双栏菜单样式----------------------------------------------------------- */  
/* ------------------------------------------------------左侧栏----------------------------------------------------------- */  
/* ================================================================
   PC Mega Menu（阿里云风格）
   ================================================================ */

/* ============================
   左侧区域（固定宽度 + 独立滚动）
   ============================ */
#portal-mega-panel .mega-left {
  width: 900px;              /* ⭐ 左侧栏固定宽度 */
  background: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  padding: 20px 25px;         /* ⭐ 数值代表：上下---左右距离 */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 20px;          /* ⭐ 左侧栏二级菜单与上面的间距 */
  overflow-y: auto;  /* ⭐ 左侧栏独立滚动 */
  max-height: calc(100vh - var(--portal-nav-height) - 20px); /* ⭐ 背景无限延伸 */
}

/* ----------------二级菜单（左侧栏）-------------------- */
.mega-l2-item {
    margin: 0 -25px;           /* ⭐ 左侧菜单蓝色hover宽度调整 */    
    padding: 10px 30px;        /* ⭐ 更舒适的上下左右间距 *//* hover 背景的“内边距 + 高度 + 宽度” */
    /*font-size: 15px;           /* ⭐ 字号（由底部统一样式设置） */
    /*font-weight: 400;          /* ⭐ 粗细（由底部统一样式设置） */
    letter-spacing: 1.2px;     /* ⭐ 字间距微调，让中文不挤 */
    line-height: 1.45;         /* ⭐ 行高更舒服 */
    color: #374151;            /* 默认深灰 */
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* hover：背景变浅蓝，文字保持原色 */
.mega-l2-item:hover {
    background: #eef2ff;
}

/* active：阿里云同款蓝色 + 半粗 */
.mega-l2-item.active {
    background: #e0e7ff;
    color: #1d4ed8;
    font-weight: 500;
}

/* -----------------------------------------右侧栏相关代码------------------------------------------------ */
/* ================================
   右侧栏（无三级菜单时）二级菜单
   ================================ */
/* 卡片容器 */
.mega-l2-link {
    font-size: 14px;
    color: #374151;
    text-decoration: none;

    display: block;          /* ⭐ 让卡片自然随内容高度撑开 */
    padding: 12px 14px;      /* ⭐ 自适应卡片常用 padding，可自行调整 */

    border-radius: 6px;
    background: transparent;

}

/* 右侧栏二级标题风格 */
.mega-l2-title {
     /*font-size: 16px;          /* ⭐ 字号（由底部统一样式设置） */
     /*font-weight: 500;         /* ⭐ 粗细（由底部统一样式设置） */
    letter-spacing: 1.2px;    /* ⭐ 字间距，让中文不挤 */
    line-height: 1.45;        /* ⭐ 行高更舒服 */
    color: var(--portal-text-main);
}

/* ================================
   右侧栏三级菜单
   ================================ */
/* 卡片容器 */
.mega-l3-link {
    font-size: 14px;
    color: #374151;
    text-decoration: none;

    display: block;          /* ⭐ 让卡片自然随内容高度撑开 */
    padding: 12px 14px;      /* ⭐ 自适应卡片常用 padding，可自行调整 */

    border-radius: 6px;
    background: transparent;
}

/* 右侧栏三级标题风格 */
.mega-l3-title {
    /*font-size: 16px;          /* ⭐ 字号（由底部统一样式设置） */
   /* font-weight: 500;         /* ⭐ 粗细（由底部统一样式设置） */
    letter-spacing: 1.2px;    /* ⭐ 字间距，让中文不挤 */
    line-height: 1.45;        /* ⭐ 行高更舒服 */
    color: var(--portal-text-main);
}

/* ===================================================
   右侧栏三级菜单标题 + 四级菜单
   ================================================== */

/* -------四级卡片容器（整体卡片样式）--------*/
/* ⭐ 四级菜单整体（唯品会浅灰小字风格） */
.mega-l4-link {
    display: inline-block;
    padding: 4px 8px;          /* 更轻盈 */
    font-size: 13px;           /* ⭐ 小字号（唯品会风格） */
    color: #6b7280;            /* ⭐ 浅灰色（唯品会同款） */
    text-decoration: none;
    background: transparent;
}

/* ---------四级标题（大字标题）（四级菜单上的分组标题字体设置放最后的）---------- */
.mega-l4-title {
    font-size: 14px;           /* ⭐ 小字号 */
    font-weight: 400;          /* ⭐ 不加粗 */
    color: #6b7280;            /* ⭐ 浅灰色 */
    letter-spacing: 0.5px;     /* ⭐ 微字间距 */
    line-height: 1.35;         /* ⭐ 更紧凑 */
}

/* ======================================================================
   -------------右侧栏标题 hover 变蓝，小字说明保持灰色------------------
   ===================================================================== */

/* 二级菜单（无三级时）：hover 只影响标题 */
#portal-mega-panel .mega-right .mega-l2-link:hover .mega-l2-title {
    color: var(--portal-primary);
}

/* 二级菜单：描述保持灰色 */
#portal-mega-panel .mega-right .mega-l2-desc {
    color: #6b7280;
}

/* 右侧栏二级菜单描述小字 */
.mega-l2-desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.0px;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 4px;
}  
   
/* ⭐ 三级菜单：hover 只影响标题 */
#portal-mega-panel .mega-right .mega-l3-link:hover .mega-l3-title {
    color: var(--portal-primary);
}

/* ⭐ 三级菜单：描述保持灰色 */
#portal-mega-panel .mega-right .mega-l3-desc {
    color: #6b7280;
}

/* 右侧栏三级菜单描述小字 */
.mega-l3-desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.0px;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 4px;
}

/* ⭐ 四级菜单：hover 只影响标题（新增） */
#portal-mega-panel .mega-right .mega-l4-link:hover .mega-l4-title {
    color: var(--portal-primary);
}

/* ⭐ 四级菜单：描述保持灰色（新增） */
#portal-mega-panel .mega-right .mega-l4-desc {
    color: #6b7280;
}

/* --------四级描述（小字说明）---------- */
.mega-l4-desc {
    font-size: 14px;          /* ⭐ 小字字号 */
    font-weight: 400;         /* ⭐ 常规字体，不加粗 */
    letter-spacing: 1.0px;    /* ⭐ 字间距（让中文不挤） */
    line-height: 1.4;         /* ⭐ 行高（更易读） */
    color: #6b7280;           /* ⭐ 阿里云灰色（描述色） */
    margin-top: 4px;          /* ⭐ 标题与描述之间的垂直间距 */
}

/* ---------------------------右侧栏菜单下滑和上滑控制---------------------------------- */
/* ============================================
   PC 全屏 Mega Panel（独立 DOM）
   ============================================ */

/* ⭐ 动画核心（方案 A：JS 控制高度动画） */
#portal-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;

  width: auto;        /* ⭐ 让 JS 控制宽度 */
  max-width: none;    /* ⭐ 不限制 */
  background: #fff;

  display: flex;
  flex-direction: row;

  /* ⭐ 初始收起（动画从这里开始） */
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease-out;

  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
/* ⭐ -----------------------------双栏菜单高度设置--------------------------------- */
/* ⭐ 打开状态（JS 控制高度，不写 height:auto） */
#portal-mega-panel.open {
  opacity: 1;
  pointer-events: auto;

  /* ⭐ 基础高度（阿里云同款） */
  min-height: 320px;

  /* ⭐ 最大高度（超过后整体滚动） */
  max-height: calc(100vh - var(--portal-nav-height) - 20px);

  /* ⭐ 超过最大高度才滚动 */
  overflow: hidden;   /* ⭐ 不让整个 panel 滚动 */
}

/* ================================================
   PC 全屏 Mega Panel - 右侧布局
   =============================================== */

/* ⭐ 右侧栏改成两列布局（左：三级/四级菜单，右：品牌推荐） */
#portal-mega-panel .mega-right {
    padding: 20px 48px 20px 48px;       /* 这个是控制右侧栏整体：距上左下右--间隙 */
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr 280px; /* 左边内容 + 右边品牌栏 *//* 想要品牌栏更宽就调大px这个数值 */
    gap: 20px;

    background: #ffffff;
    overflow-y: auto;
    max-height: calc(100vh - var(--portal-nav-height) - 20px);
}

/* ⭐ 品牌推荐标题 */
.mega-brand-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

/* ⭐ 品牌推荐网格（3 列） */
.mega-brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ⭐ 右侧品牌推荐栏整体背景（浅灰色） */
.mega-brand-panel {
    background: #f5f5f5;      /* ← 浅灰色 */
    border-radius: 8px;       /* ← 轻微圆角，更柔和 */
    padding: 16px;            /* ← 内边距，让内容不贴边 */
    box-sizing: border-box;

    margin-top: -20px;     /* ← 抵消 mega-right 的 padding-top */
    margin-right: -48px;   /* ← 抵消 padding-right */
    margin-bottom: -20px;  /* ← 抵消 padding-bottom */
}

/* ⭐ 默认隐藏所有品牌栏 */
.mega-brand-panel {
    display: none;
}

/* ⭐ 只有激活的品牌栏显示 */
.mega-brand-panel.active {
    display: block;
}

/* ⭐ 单个品牌格子（固定正方形 + 文字悬浮） */
.mega-brand-item {
    width: 75px;     /* ⭐ 格子宽度 */
    height: 75px;    /* ⭐ 格子高度 */

    position: relative;   /* ⭐ 关键：让 logo 和文字都能绝对定位 */
    overflow: hidden;

    background: #f9fafb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* ⭐ hover 效果 */
.mega-brand-item:hover {
    background: #eef2ff;
}

/* ⭐ Logo 绝对定位，可自由调整位置 */
.mega-brand-logo {
    position: absolute;
    top: 4px;              /* ← 调整 logo 距离顶部（你可以改，想靠上，就调小） */
    left: 50%;             /* ← 水平居中 */
    transform: translateX(-50%);

    width: 60px;           /* ← logo 大小--宽 */
    height: 60px;         /* ← logo 大小--高 */
    object-fit: contain;   /* 不变形 */
}

/* ⭐ 文字悬浮在格子底部，不占空间，不会挤压 logo */
.mega-brand-name {
    position: absolute;
    bottom: 4px;           /* ← 文字距离底部（你可以改） */
    left: 4px;
    right: 4px;

    font-size: 11px;
    color: #374151;
    text-align: center;

    line-height: 1.2;
    max-height: 24px;      /* 最多两行 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    background: rgba(255,255,255,0.55); /* ⭐ 提升可读性 */
    backdrop-filter: blur(2px);         /* ⭐ 唯品会磨砂效果 */
    border-radius: 3px;
    padding: 1px 2px;
}

/* ------------------------------分割线-------------------------------- */

/* 只让当前激活的三级菜单参与 grid */
/* 每个分组自己占一行容器 */
#portal-mega-panel .mega-right .mega-l3-list.active {
    display: flex;
    flex-wrap: wrap;        /* ⭐ 分组内部横向流式排列 */
    width: 100%;            /* ⭐ 分组独占一行 */
    gap: 12px 20px;         /* ⭐ 分组内部间距 */
}

/* 每个分组：标题 + 四级菜单，横向流式排列 */
.mega-l3-group {
    display: flex;
    flex-wrap: wrap;      /* ⭐ 标题 + 四级菜单在同一行开始，超宽换行 */
    width: 100%;          /* ⭐ 每个分组独占一行 */
    gap: 8px 16px;        /* ⭐ 分组内部间距，可按视觉调 */
    margin-bottom: 4px;   /* ⭐ 分组之间的垂直间距 */
	align-items: flex-start;   /* ⭐ 防止标题被挤压 */
}

/* ⭐ 四级菜单容器：占据标题右侧一整列，内部自己换行 */
.mega-l4-wrap {
    display: flex;
    flex-wrap: wrap;      /* ⭐ 四级菜单在这一列里自己换行 */
    gap: 4px 12px;        /* ⭐ 四级菜单之间的间距 */
    flex: 1;              /* ⭐ 占据标题右侧所有剩余空间 */
}

/* 未激活的三级菜单继续隐藏 */
#portal-mega-panel .mega-right .mega-l3-list {
    display: none;
}

/* --------------------------（右侧栏）右上角关闭按钮--------------------------------- */
/* ⭐ 右上角关闭按钮（X） */
.mega-close-btn {
    position: absolute;   /* 绝对定位，让 X 固定在面板右上角 */
    top: 8px;            /* ⭐ 距离顶部的距离（调这里控制上下位置） */
    right: 48px;          /* ⭐ 距离右侧的距离（调这里控制左右位置） */

    font-size: 30px;      /* ⭐ X 的大小（越大越显眼） */
    font-weight: 600;     /* ⭐ X 的粗细（300=细，400=正常，500=稍粗） */

    color: #6b7280;       /* ⭐ 默认颜色（灰色） */
    cursor: pointer;      /* 鼠标变成手型，表示可点击 */

    z-index: 9999;        /* ⭐ 确保 X 永远在最上层，不被内容遮挡 */
    transition: color 0.15s ease;  /* ⭐ 悬停时颜色渐变更丝滑 */
}

/* ⭐ 鼠标悬停时的 X 颜色变化 */
.mega-close-btn:hover {
    color: #111827;       /* ⭐ hover 时变深色，更明显 */
}

/* --------------------------有三级 / 无三级的布局差异--------------------------------- */
/* 无三级菜单时：右栏显示二级，左栏更窄 */
.mega-menu.no-l3 .mega-left {
  width: 160px;
}

.mega-menu.no-l3 .mega-right {
  padding-left: 0;
}

/* 有三级菜单时：左栏显示二级，右栏显示三级 */
.mega-menu.has-l3 .mega-left {
  width: 200px;
}

.mega-menu.has-l3 .mega-right {
  padding-left: 0;
}
/* -------------------------------------------结束---------------------------------------- */  
/* ============================
   PC 下隐藏旧版 .mega-menu（可选）
   ============================ */

/* ⭐⭐ 在这里插入 PC/手机菜单切换 ⭐⭐ */
.portal-menu-pc {
    display: block;
}

.portal-menu-mobile-top {
    display: none;
}
/* ⭐⭐ 插入结束 ⭐⭐ */

@media (min-width: 769px) {
  .mega-menu {
    display: none !important;
  }
}

/* ============================
   全局滚动条美化（阿里云风格）
   ============================ */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
}

/* =================================================================
   Mega Menu 标题统一为导航栏风格（统一菜单文字样式）
   =============================================================== */
/* 左侧栏二级标题（左侧菜单） */
#portal-mega-panel .mega-left .mega-l2-item {
    font-size: 14px;       /* ← 左侧栏二级菜单字号 */
    font-weight: 400;      /* ← 左侧栏二级菜单粗细 */
}

/* 右侧栏二级标题（无三级菜单时） */
#portal-mega-panel .mega-right .mega-l2-title {
    font-size: 16px;      /* ← 右侧栏二级标题字号 */
    font-weight: 400;     /* ← 右侧栏二级标题粗细 */
    color: var(--portal-text-main);
}

/* 右侧栏三级标题（普通三级卡片用） */
#portal-mega-panel .mega-right .mega-l3-link .mega-l3-title {
    font-size: 16px;      /* ← 普通三级标题字号 */
    font-weight: 400;     /* ← 普通三级标题粗细 */
    color: var(--portal-text-main);
}

/* ⭐ 四级菜单的分组标题（分组标题永远固定在第一列，不参与换行） */
.mega-l3-title-block {
    flex: 0 0 auto;        /* ⭐ 固定宽度，不让它参与换行 */
	white-space: nowrap;   /* ⭐ 不允许标题换行 */
    font-size: 14px;        /* ← 分组标题字号（右侧栏最大的一层标题） */
    font-weight: 550;       /* ← 分组标题粗细 */
    color: #111827;
    margin: 0;
    padding: 0 6px;
}

/* ⭐ 分组标题右侧箭头（可调节版） */
.mega-l3-title-block::after {
    content: "›";              /* 你也可以换成 ▶ ► ▸ ▹ 等 */
    font-size: 18px;           /* ← 调整箭头大小 */
    font-weight: 550;          /* ← 调整箭头粗细 */
    color: #111827;            /* ← 调整箭头颜色（这里和标题一致） */
    margin-left: 6px;          /* ← 调整标题与箭头的间距 */
    display: inline-block;
    transform: translateY(1px); /* 微调垂直对齐 */
}

/* ------------------------手机端底部菜单图标，电脑段隐藏代码------------------------- */
/* PC 端隐藏手机底部导航栏 */
@media (min-width: 769px) {
  .portal-mobile-tabbar {
    display: none !important;
  }
}

/* ========================================================================================
   按钮体系（统一 + danger 按钮）
   ======================================================================================== */
/* 按钮体系（统一 + danger 按钮） */
.portal-btn-ghost,
.portal-btn-primary,
.portal-btn-secondary,
.portal-btn-danger {
  font-size: 15px;              /* ⭐ 字号 */
  font-weight: 400;             /* ⭐ 字体粗细 */
  letter-spacing: 0.5px;        /* ⭐ 字间距：让中文更高级 */
  line-height: 1.45;            /* ⭐ 行高：按钮高度更稳定 */
  border-radius: 999px;         /* ⭐ 胶囊按钮 */
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* 登录按钮 */
.portal-btn-ghost {
  border: none;
  background: transparent;
  padding: 6px 12px;
  color: var(--portal-text-muted);
}
.portal-btn-ghost:hover {
  background: #f3f4f6;
  color: var(--portal-text-main);
}

/* 注册按钮 */
.portal-btn-primary {
  border: none;
  background: var(--portal-primary);
  color: #ffffff;
  padding: 8px 16px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.portal-btn-primary:hover {
  background: var(--portal-primary-hover);
  transform: translateY(-1px);
}

/* 你的后台按钮 */
.portal-btn-secondary {
  border: none;
  background: #e5e7eb;
  color: #111827;
  padding: 8px 16px;
}
.portal-btn-secondary:hover {
  background: #d1d5db;
  transform: translateY(-1px);
}

/* 退出登录按钮 */
.portal-btn-danger {
  border: none;
  background: #ef4444;
  color: #ffffff;
  padding: 8px 16px;
}
.portal-btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}


/* PC 端隐藏 mobile 按钮 */
@media (min-width: 769px) {
  #portal-btn-login-mobile,
  #portal-btn-register-mobile,
  #portal-btn-dashboard-mobile,
  #portal-user-info-mobile,
  #portal-btn-logout-mobile {
    display: none;
  }

  /* ⭐ PC 端彻底隐藏 mobile 菜单 */
  .mobile-menu-list {
    display: none !important;
  }

  /* ⭐ PC 端隐藏 mobile 双栏菜单 */
  .portal-mobile-mega {
    display: none !important;
  }
}