/* 侧边菜单容器 - 亮丽蓝色基调 */
.el-aside {
  /* background: linear-gradient(180deg, #0F3460 0%, #16213E 100%); */
  /* background: linear-gradient(180deg, rgb(247, 247, 249) 0%, #e4e7ed 100%); */
  background:#f9fafc;
  height: 100dvh;
  overflow-y: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-right: 1px solid rgba(72, 187, 255, 0.2);
  /* padding: 0 8px; */
      width: 250px;
}

/* 科技感网格背景装饰 */
.el-aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: 
    linear-gradient(rgba(72, 187, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 187, 255, 0.08) 1px, transparent 1px); */
  background-size: 30px 30px;
  pointer-events: none;
  z-index: -1;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .el-aside {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    transform: translateX(-100%);
    width: 255px !important;
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.3);
    padding: 0 5px; /* 移动端内边距稍小 */
  }
  
  .el-aside.mobile-active {
    transform: translateX(0);
  }
}

/* Logo样式 - 带蓝色光晕 */
.ali-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 20px auto 15px; /* 优化上下间距 */
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(72, 187, 255, 0.3));
}

.ali-logo:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 12px rgba(72, 187, 255, 0.4));
}

/* 菜单样式 */
.menu-top {
  border-right: none !important;
  background-color: transparent !important;
  padding: 8px 0; /* 优化内边距 */
  margin-top: 15px; /* 减小顶部间距 */
}

/* 分隔线 - 蓝色渐变线条 */
.line {
  height: 1px;
  margin: 15px 12px; /* 优化分隔线间距 */
  background: linear-gradient(90deg, 
    rgba(72, 187, 255, 0) 0%, 
    rgba(72, 187, 255, 0.4) 50%, 
    rgba(72, 187, 255, 0) 100%);
}

/* 菜单项基础样式 */
.el-menu-item,
.el-submenu__title {
  height: 50px; /* 略微减小高度 */
  line-height: 50px;
  font-size: 14px;
  transition: all 0.2s ease;
  /* margin: 3px 8px; /* 增加上下间距，减少拥挤感 */
  /* border-radius: 6px; */
  /* padding-left: 26px !important; /* 优化左内边距，更靠左 */
  position: relative;
  overflow: hidden;
}

/* 顶级导航样式 - 靠左加粗 */
.el-submenu__title {
  font-weight: 600 !important; /* 顶级导航加粗 */
  padding-left: 2px !important; /* 更靠左显示 */
}

/* 菜单项hover效果 - 蓝色流动光效 */
.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: rgba(72, 187, 255, 0.12) !important;
  color: #48BBFF !important;
}

.el-menu-item:hover::after,
.el-submenu__title:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(72, 187, 255, 0) 0%,
    rgba(72, 187, 255, 0.25) 50%,
    rgba(72, 187, 255, 0) 100%);
  animation: techShine 1.5s ease infinite;
}

@keyframes techShine {
  100% {
    left: 100%;
  }
}

/* 菜单项选中状态 - 亮蓝色光效 */
.el-menu-item.is-active {
  background-color: rgba(72, 187, 255, 0.18) !important;
  color: #48BBFF !important;
  font-weight: 500;
  position: relative;
  box-shadow: 0 0 15px rgba(72, 187, 255, 0.25);
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: #48BBFF;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(72, 187, 255, 0.9);
}

/* 二级菜单样式 */
.el-submenu .el-menu {
  /* background-color: rgba(22, 33, 62, 0.7) !important;
  border-radius: 6px;
  margin: 0 8px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(72, 187, 255, 0.1);
  padding: 5px 0;  */

  font-size: 14px;
  color: #181818;
  font-weight: 400;
  line-height: 40px;
}

.el-submenu .el-menu-item {
  height: 44px;
  line-height: 44px;
  min-width: auto;
  padding-left: 48px !important;
  margin: 2px 0;
  font-weight: 400 !important; /* 二级菜单不加粗 */
}

/* 展开/折叠箭头 - 蓝色动画 */
.el-submenu__icon-arrow {
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  margin-left: 5px; /* 增加箭头与文字的间距 */
}

.el-submenu.is-opened .el-submenu__icon-arrow {
  transform: rotate(180deg);
  color: #48BBFF;
}

/* 文字和图标 */
.aside-menu-text {
  margin-left: 10px; /* 优化文字与图标的间距 */
  transition: all 0.2s ease;
}

.iconfont {
  font-size: 18px;
  vertical-align: middle;
  width: 20px;
  text-align: center;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.el-menu-item:hover .iconfont,
.el-submenu__title:hover .iconfont,
.el-menu-item.is-active .iconfont {
  color: #48BBFF;
  text-shadow: 0 0 5px rgba(72, 187, 255, 0.6);
}

/* 滚动条样式 - 蓝色渐变 */
.el-aside::-webkit-scrollbar {
  width: 5px;
}

.el-aside::-webkit-scrollbar-track {
  background-color: rgba(22, 33, 62, 0.5);
  border-radius: 3px;
}

.el-aside::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #48BBFF, #94D1FF);
  border-radius: 3px;
  transition: all 0.2s ease;
}

.el-aside::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 8px rgba(72, 187, 255, 0.7);
}

/* 移动端菜单按钮 - 蓝色风格 */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: 1001;
  background: rgba(15, 52, 96, 0.9);
  color: #48BBFF;
  border: 1px solid rgba(72, 187, 255, 0.3);
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(72, 187, 255, 0.2);
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
}

.mobile-menu-toggle:hover {
  background-color: rgba(22, 33, 62, 0.9);
  box-shadow: 0 0 20px rgba(72, 187, 255, 0.35);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
}

/* 加载状态 - 蓝色覆盖层 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 52, 96, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(3px);



  
}

@media screen and (max-width: 750px) {
  .el-main {
    padding-top: 1.2rem;
  }

  .layui-elem-quote.blue-theme {
    width: 100%;
  }

  .bgw {
    display: grid;
  }

  .search-box {
    display: none  !important;
  }

  .drawer-menu {
    background: linear-gradient(180deg, #0F3460 0%, #16213E 100%);
    height: 100vh;
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border-right: 1px solid rgba(72, 187, 255, 0.2);
    padding: 0 8px;
    font-size: 0.32rem;
  }


  .el-header {
    padding-right: 18px!important;
  }
  .drawer-menu-logo {
        height: 52px;
    }
    .drawer-menu,.el-drawer__open .el-drawer.ltr {
        background:#f9fafc;
    }
    .drawer-menu-list-top {
         margin-top: 0;
         padding: 0; 
    }
    .drawer-menu-logo {
        display: block;
        width: 140px;
        height: auto;
        margin: 25px auto 1px;
        padding: 0 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        filter: drop-shadow(0 0 8px rgba(72, 187, 255, 0.3));
    }
    .el-menu {
        border-right: solid 1px #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #FFF;
        font-size: 14px;
      color: #181818;
      font-weight: 400;
      line-height: 40px;
    }
    .el-menu-item, .el-submenu__title {
        /*background-color: rgb(15, 23, 42) !important;*/
        color: #262626!important;
        font-weight: 600 !important;
        padding-left: 2px !important;
    }
    .menu-top .el-submenu__title i {
        color: black;
    }
    
    /*.el-submenu__icon-arrow {*/
    /*    margin-top: 14px;*/
    
    /*}*/
    .me-icon-i {
        margin-top: 14px;
    
    }
}