/* 菜单按钮样式 */
    .menu-toggle {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 1005;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #1f2937;
      outline: none;
	  background: none;
    }

    .menu-toggle:hover {
      color: #fff;
    }

    .menu-toggle:focus {
    }

    /* 菜单按钮激活状态（关闭样式） */
    .menu-toggle.btn-close-active .fa-times i{
      transform: rotate(90deg);
      color: #fff;
    }
	.menu-toggle .fa-bars i { background: url(../images/dexcii_menu_white.png) no-repeat center center; background-size: 100%; display: block; width: 35px; height: 35px;}
	.menu-toggle .fa-times i { background: url(../images/dexcii_close_white.png) no-repeat center center; background-size: 100%; display: block; width: 25px; height: 25px; margin: 0 0 0 10px;}
	.menu-toggle .fa-bars.inpage i { background: url(../images/dexcii_menu_black.png) no-repeat center center; background-size: 100%; display: block; width: 35px; height: 35px;}
	.menu-toggle .fa-bars{ display: flex; align-items: center; color: #ffffff; font-size: 20px; width: 100px; justify-content: flex-end;}
	.menu-toggle .fa-times{ display: flex; align-items: center; color: #ffffff; font-size: 25px; right: 2%;}
    .menu-toggle i {
      font-size: 1.25rem;
      transition: all 0.3s ease;
    }

    .menu-toggle .fa-times {
      position: absolute;
      opacity: 0;
    }

    .menu-toggle.btn-close-active .fa-bars {
      opacity: 0;
    }

    .menu-toggle.btn-close-active .fa-times {
      opacity: 1;
    }

    /* 遮罩层样式（透明度0，无磨砂） */
    .menu-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(31, 41, 55, 0); /* 增加透明度，提升交互感知 */
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .menu-backdrop.backdrop-visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* 侧边菜单样式（核心：垂直居中） */
    .side-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: 300px;
      height: 100vh; /* 占满整个视口高度 */
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1002;
      transform: translateX(100%);
      overflow-y: auto; /* 内容超出时可滚动 */
      transition: transform 0.4s ease-out;
      display: flex; /* 开启flex布局 */
      align-items: center; /* 垂直居中（核心属性） */
	  font-family: pingfang;
    }

    /* 菜单滑入动画（从右往左） */
    .side-menu.menu-open {
      animation: menuSlideIn 0.4s ease-out forwards;
    }

    /* 菜单滑出动画（从左往右） */
    .side-menu.menu-close {
      animation: menuSlideOut 0.4s ease-in-out forwards;
    }

    /* 菜单内容容器（控制内边距，文字左对齐） */
    .side-menu-content {
      width: 100%;
      padding: 32px;
      text-align: left; /* 容器内文字默认左对齐 */
    }

    .menu-header {
      margin-bottom: 40px;
      text-align: left; /* 标题左对齐 */
    }

    .menu-header h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1f2937;
    }

    /* 菜单项样式（核心：一级菜单统一对齐+选中样式） */
    .menu-nav ul {
      list-style: none;
    }

    .menu-item {
      margin-bottom: 4px;
    }

    /* 一级菜单统一样式：无论是否有二级菜单，结构完全一致 */
    .menu-link-primary, .menu-button-primary {
      display: flex;
      align-items: center;
      padding: 16px;
	  font-size: 20px;
      border-radius: 8px;
      color: #ffffff;
      text-decoration: none;
      transition: background-color 0.2s ease, color 0.2s ease;
      position: relative;
      font-weight: 400; /* 默认常规字重 */
    }

    /* 一级菜单选中样式：文字加粗+背景高亮 */
    .menu-link-primary.active, .menu-button-primary.active {
      font-weight: bold; /* 选中文字加粗 */
    }

    /* 按钮样式统一（无背景、无边框） */
    .menu-button-primary {
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
	  font-size: 20px;
      padding-left: 16px; /* 与无二级菜单项保持一致内边距 */
    }
	.fa-chevron-down:before{ content: ''; background: url(../images/dexcii_fold_white.png) no-repeat center center; background-size: 100%; display: block; width: 20px; height: 20px;}
    /* hover效果统一（非选中状态） */
    .menu-link-primary:not(.active):hover, .menu-button-primary:not(.active):hover {
      font-weight: bold;
    }

    /* 文字容器：确保所有一级菜单文字左对齐且间距一致 */
    .menu-text-container {
      display: flex;
      align-items: center;
      flex: 1; /* 占据除箭头外的所有空间，确保文字左对齐 */
    }

    /* 徽章样式（保留通知数字） */
    .badge {
      background-color: #165dff;
      color: #ffffff;
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 12px;
      margin-right: 8px;
    }

    /* 下拉箭头样式（核心修复：箭头翻转动画） */
    .menu-chevron {
      color: #9ca3af;
      margin-left: auto; /* 箭头固定靠右，不影响文字对齐 */
      width: 20px; /* 固定宽度，避免箭头位置晃动 */
      text-align: center;
      transform-origin: center; /* 旋转中心点设置为箭头中心 */
      /* 关键修复：独立的过渡动画，不被其他样式覆盖 */
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
    }

    /* 箭头翻转状态（展开时）- 关键修复：确保类名正确生效 */
    .menu-chevron.chevron-rotate {
      transform: rotate(180deg) !important; /* 强制翻转180度，向下→向上 */
      color: #165dff !important; /* 选中时箭头同步变色 */
    }

    .menu-button-primary:hover .menu-chevron {
      color: #165dff;
    }

    /* 无二级菜单的项：添加空箭头占位，确保对齐 */
    .menu-link-primary .menu-chevron-placeholder {
      width: 20px; /* 与箭头宽度一致，占位用 */
      margin-left: auto;
    }

    /* 二级菜单样式（核心：平滑收放动画） */
    .submenu {
      margin-left: 16px; /* 缩进调整，体现层级关系 */
      max-height: 0; /* 初始高度0，用于动画过渡 */
      opacity: 0;
      overflow: hidden;
      /* 收缩动画：慢进慢出，延迟0.15s触发，确保子项先动 */
      transition: max-height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease 0.15s;
      transform-origin: top center; /* 展开/收起的原点都在顶部，保证视觉连贯性 */
    }

    /* 展开状态：慢进慢出，无延迟，立即触发 */
    .submenu.submenu-open {
      max-height: 500px; /* 足够容纳所有二级项 */
      opacity: 1;
      margin-top: 4px;
      /* 展开动画：慢进慢出，无延迟 */
      transition: max-height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    }

    .submenu .menu-link-secondary {
      display: block;
      padding: 12px 16px;
	  font-size: 16px;
      border-radius: 8px;
      color: #cccccc;
      text-decoration: none;
      transition: background-color 0.2s ease, color 0.2s ease;
      font-weight: 400; /* 默认常规字重 */
      opacity: 0;
      transform: translateY(15px); /* 初始位置向下偏移，修复"掉下来"感 */
    }

    /* 展开：子项从上至下平缓弹出（优化缓动+延迟） */
    .submenu.submenu-open .menu-link-secondary {
      animation: submenuItemFadeIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    /* 延迟间隔优化：0.1s递进，更自然的依次弹出 */
    .submenu.submenu-open .menu-link-secondary:nth-child(1) { animation-delay: 0.05s; }
    .submenu.submenu-open .menu-link-secondary:nth-child(2) { animation-delay: 0.15s; }
    .submenu.submenu-open .menu-link-secondary:nth-child(3) { animation-delay: 0.25s; }
    .submenu.submenu-open .menu-link-secondary:nth-child(4) { animation-delay: 0.35s; }

    /* 收起：子项从下至上渐进消失（优化缓动+反向延迟） */
    .submenu:not(.submenu-open) .menu-link-secondary {
      animation: submenuItemFadeOut 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }
    /* 反向延迟：最后一个先消失，第一个最后消失，间隔0.1s */
    .submenu:not(.submenu-open) .menu-link-secondary:nth-child(1) { animation-delay: 0.3s; }
    .submenu:not(.submenu-open) .menu-link-secondary:nth-child(2) { animation-delay: 0.2s; }
    .submenu:not(.submenu-open) .menu-link-secondary:nth-child(3) { animation-delay: 0.1s; }
    .submenu:not(.submenu-open) .menu-link-secondary:nth-child(4) { animation-delay: 0s; }

    /* 二级菜单选中样式：文字加粗+背景高亮 */
    .submenu .menu-link-secondary.active {
      font-weight: bold;
    }

    .submenu .menu-link-secondary:not(.active):hover {
      font-weight: bold;
    }

    /* 文字滑入动画（从左往右） */
    .text-element {
		opacity: 0;
      transform: translateX(-30px);
    }

    .animate-text-slide-in {
      animation: textSlideIn 0.5s ease-out forwards;
    }

    .animate-text-slide-out {
      animation: textSlideOut 0.3s ease-in-out forwards;
    }

    /* 动画关键帧定义 */
    @keyframes menuSlideIn {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }

    @keyframes menuSlideOut {
      from { transform: translateX(0); }
      to { transform: translateX(100%); }
    }

    @keyframes textSlideIn {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes textSlideOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(-30px);
      }
    }

    /* 展开：子项从上至下平缓弹出（优化偏移和透明度） */
    @keyframes submenuItemFadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px); /* 向上偏移，模拟"从上至下"弹出 */
      }
      to {
        opacity: 1;
        transform: translateY(0); /* 平稳复位 */
      }
    }

    /* 收起：子项从下至上渐进消失（优化偏移和透明度） */
    @keyframes submenuItemFadeOut {
      from {
        opacity: 1;
        transform: translateY(0); /* 初始位置正常 */
      }
      to {
        opacity: 0;
        transform: translateY(15px); /* 向下偏移，模拟"从下至上"收缩 */
      }
    }
	
@media (max-width: 768px) {
	
	.menu-toggle {
	  position: fixed;
	  top: 24px;
	  right: 5%;
	  z-index: 1005;
	  width: auto;
	  height: 0.6rem;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: none;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  color: #1f2937;
	  outline: none;
	  background: none;
	}
	.menu-toggle{ height: 0.6rem; top: 0.35rem;}
	.menu-toggle .fa-bars.inpage i{ width: 0.6rem; height: 0.6rem;}
	.menu-toggle .fa-times i{ width: 0.6rem; height: 0.6rem;}
	.menu-toggle .fa-times{ font-size: 0.45rem;}
	.menu-link-primary, .menu-button-primary{ font-size: 0.5rem; padding: 0.3rem;}
	.side-menu-content{ padding: 0 5%;}
	.submenu .menu-link-secondary{ font-size: 0.4rem; padding: 0.2rem;}
	.fa-chevron-down:before{ width: 0.4rem; height: 0.4rem;}
	
	
	
}
    /* 响应式适配 */
    @media (max-width: 640px) {
      .side-menu {
        width: 85%;
      }
    }

    /* 当菜单内容过多时，确保居中且可滚动 */
    @media (max-height: 600px) {
      .side-menu {
        align-items: center; /* 小屏幕高度不足时，顶部对齐但保持滚动 */
        padding-top: 24px;
      }
    }