/* ================= 右侧菜单 ================= */

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.38);
  opacity:0;
  visibility:hidden;
  transition:all .28s ease;
  z-index:9998;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

.drawer-menu{
  position:fixed;
  top:0;
  right:0;
  width:min(88vw,360px);
  height:100vh;
  background:#fff;
  transform:translateX(100%);
  transition:transform .32s ease;
  z-index:9999;
  display:flex;
  flex-direction:column;
  box-shadow:-12px 0 28px rgba(0,0,0,.14);
}

.drawer-menu.active{
  transform:translateX(0);
}

.drawer-header{
  padding:18px 16px 14px;
  border-bottom:1px solid #edf0f5;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.drawer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.drawer-title{
  font-size:20px;
  font-weight:800;
  color:#111;
}

.drawer-close{
  width:38px;
  height:38px;
  border:none;
  border-radius:10px;
  background:#f4f6fa;
  color:#666;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.drawer-desc{
  font-size:13px;
  color:#888;
  line-height:1.55;
}

.drawer-content{
  padding:14px;
  overflow-y:auto;
}

.menu-group{
  background:#fff;
  border:1px solid #edf0f5;
  border-radius:16px;
  padding:14px 14px 10px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.035);
}

.menu-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:800;
  color:#111;
  margin-bottom:10px;
}

.group-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  background:#eef3ff;
  color:#2f6fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex:0 0 auto;
}

.menu-sub{
  list-style:none;
  padding-left:12px;
  margin-left:16px;
  border-left:2px solid #e8efff;
}

.menu-sub li{
  margin:4px 0;
}

.menu-sub a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#333;
  font-size:15px;
  transition:all .18s ease;
}

.menu-sub a:hover{
  background:#f8fbff;
  color:#2f6fff;
  transform:translateX(2px);
}

.sub-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.sub-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#94b8ff;
  flex:0 0 auto;
}

.sub-arrow{
  color:#a0a7b4;
  font-size:14px;
  flex:0 0 auto;
}