/* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: #f5f7fa;
      padding: 2rem;
    }

    /* 菜单容器样式 */
    .css-menu {
      width: 100%;
      max-width: 100%;
      background-color: #ffffff;
      /*border-radius: 8px;*/
      /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);*/
      overflow: hidden;
      margin-top:0rem;
    }

    /* 菜单列表样式 */
    .menu-list {
      list-style: none;
    }
    
        .menu-list li{
      width: 100%;
      margin-bottom: 0;
    }

    /* 菜单项样式 */
    .menu-item {
      border-bottom: 1px solid #f0f2f5;
    }

    .menu-item:last-child {
      border-bottom: none;
    }

    /* 菜单链接样式 - 统一基础样式 */
    .menu-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 20px;
      color: #333647;
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      transition: background-color 0.3s ease, color 0.3s ease;
      cursor: pointer;
    }

    .menu-link:hover {
      background-color: #f5f7fa;
      color: #165dff;
    }

    /* 折叠指示器样式 */
    .menu-toggle {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: relative;
      transition: transform 0.3s ease;
    }

    .menu-toggle::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid #86909c;
      border-bottom: 2px solid #86909c;
      transform: translate(-50%, -50%) rotate(45deg);
      transition: border-color 0.3s ease;
    }

    /* 子菜单基础样式 - 所有层级通用过渡 */
    .submenu {
      list-style: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
    }

    /* 二级子菜单样式 */
    .submenu {
      background-color: #fafbfc;
    }

    .submenu .menu-link {
      padding-left: 35px;
      font-size: 14px;
      color: #666c7c;
    }

    .submenu .menu-link:hover {
      background-color: #f0f5ff;
    }

    /* 三级子菜单样式 - 增加缩进和背景色区分 */
    .submenu .submenu {
      background-color: #f5f8ff;
    }

    .submenu .submenu .menu-link {
      padding-left: 55px;
      font-size: 13.5px;
      color: #555a66;
    }

    /* 四级子菜单样式 - 进一步缩进和背景色区分 */
    .submenu .submenu .submenu {
      background-color: #ebf2ff;
    }

    .submenu .submenu .submenu .menu-link {
      padding-left: 75px;
      font-size: 13px;
      color: #444852;
    }

    /* 四级子菜单 hover 效果强化 */
    .submenu .submenu .submenu .menu-link:hover {
      background-color: #e1edff;
    }

    /* 复选框隐藏 */
    .menu-checkbox {
      display: none;
    }

    /* 复选框选中状态 - 所有层级子菜单展开 */
    .menu-checkbox:checked ~ .submenu {
      max-height: 2000px; /* 足够容纳4级菜单所有子项 */
    }

    /* 复选框选中状态 - 旋转指示器（所有层级通用） */
    .menu-checkbox:checked ~ .menu-link .menu-toggle {
      transform: rotate(180deg);
    }

    /* 活跃菜单项样式 - 支持所有层级 */
    .menu-item.active .menu-link {
      /*background-color: #e8f3ff;*/
      color: #165dff;
      font-weight: 600;
    }

    .menu-item.active .menu-toggle::after,
    .menu-link:hover .menu-toggle::after {
      border-color: #165dff;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .css-menu {
        max-width: 100%;
      }
      
              .menu-list li{
      width: 100%;
      margin-bottom: 0;
    }

      /* 移动端优化缩进，避免过宽 */
      .submenu .menu-link {
        padding-left: 25px;
      }
      .submenu .submenu .menu-link {
        padding-left: 40px;
      }
      .submenu .submenu .submenu .menu-link {
        padding-left: 55px;
      }
    }