* { box-sizing: border-box; padding: 0; margin: 0; }


/* ================= 导航栏 - 增强玻璃态效果 ================= */
#nav {
  position: fixed;
  top: 10px; /* 顶部距离10px */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px; /* 白色圆角框 */
  display: flex;
  list-style: none;
  background: rgba(255, 255, 255, 0.9); /* 增加不透明度使背景更明显 */
  backdrop-filter: blur(40px) saturate(150%); /* 增强模糊和饱和度 */
  -webkit-backdrop-filter: blur(40px) saturate(150%); /* Safari兼容 */ 
  border: 2px solid rgba(255, 255, 255, 0.2); /* 更明显的玻璃边框 */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15), /* 更深的外阴影 */
              0 0 0 1px rgba(255, 255, 255, 0.345) inset, /* 内发光 */
              0 2px 8px rgba(255, 255, 255, 0.142) inset; /* 顶部高光 */
  padding: 16px;
  z-index: 100000;
  transition: all 0.3s ease;
  justify-content: center;
  align-items: center;
}

/* 悬停时增强玻璃效果 */
#nav:hover {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset,
              0 2px 12px rgba(255, 255, 255, 0.4) inset;
}

#nav li {
  position: relative; /* 为下拉菜单定位 */
}

#nav li a {
  position: relative;
  padding: 3px 42px;
  font: 700 15px Arial, sans-serif;
  color: #23502c;
  display: block;
  text-decoration: none;
  z-index: 3;
  transition: color 0.3s ease;
  white-space: nowrap;
  text-align: center;
}

/* 为每个导航选项设置不同的颜色 */
#nav li:nth-child(3) a { color: #333333; } /* Home - 深灰色 */
#nav li:nth-child(4) a { color: #C00000; } /* Team - 深红色（增强明度） */
#nav li:nth-child(5) a { color: #FF5722; } /* Project - 深橙色（增强明度） */
#nav li:nth-child(6) a { color: #F9A825; } /* Human Practices - 深黄色 */
#nav li:nth-child(7) a { color: #2E7D32; } /* WetLab - 深绿色（增强明度） */
#nav li:nth-child(8) a { color: #1565C0; } /* DryLab - 深蓝色（增强明度） */
#nav li:nth-child(9) a { color: #6A1B9A; } /* Entrepreneurship - 深紫色（增强明度） */

#nav li div a {
  font: 700 13px Arial, sans-serif;
  align-items: center;
  justify-content: center;
  padding: 15px 12px;
  min-width: 110px;
}

/* 默认悬停和激活状态 */
#nav li a:hover { color: #0c7012; }
#nav li a.active { color: #228237; font-weight: 600; }

/* 为每个导航选项设置不同的悬停和激活状态颜色 */
#nav li:nth-child(3) a:hover { color: #1a1a1a; } /* Home - 深灰色加深 */
#nav li:nth-child(3) a.active { color: #555555; font-weight: 600; }

#nav li:nth-child(4) a:hover { color: #800000; } /* Team - 深红色加深 */
#nav li:nth-child(4) a.active { color: #E53935; font-weight: 600; }

#nav li:nth-child(5) a:hover { color: #BF360C; } /* Project - 深橙色加深 */
#nav li:nth-child(5) a.active { color: #FF7043; font-weight: 600; }

#nav li:nth-child(6) a:hover { color: #c67f00; } /* Human Practices - 深黄色加深 */
#nav li:nth-child(6) a.active { color: #ffc107; font-weight: 600; }

#nav li:nth-child(7) a:hover { color: #1B5E20; } /* WetLab - 深绿色加深 */
#nav li:nth-child(7) a.active { color: #43A047; font-weight: 600; }

#nav li:nth-child(8) a:hover { color: #0D47A1; } /* DryLab - 深蓝色加深 */
#nav li:nth-child(8) a.active { color: #1E88E5; font-weight: 600; }

#nav li:nth-child(9) a:hover { color: #4A148C; } /* Entrepreneurship - 深紫色加深 */
#nav li:nth-child(9) a.active { color: #8E24AA; font-weight: 600; }

.navslide1, .navslide2 {
  position: absolute;
  height: 34px;
  border-radius: 10em;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1.05);
}
.navslide1 { z-index: 2;} /* 默认颜色 */

/* 为不同导航项设置不同颜色的滑块1类 */
/* .navslide1-home { background-color: rgba(51, 51, 51, 0.3) !important; } 
.navslide1-team { background-color: rgba(192, 0, 0, 0.3) !important; } 
.navslide1-project { background-color: rgba(255, 152, 0, 0.3) !important; } 
.navslide1-hp { background-color: rgba(255, 235, 59, 0.3) !important; }
.navslide1-wl { background-color: rgba(46, 125, 50, 0.3) !important; } 
.navslide1-dl { background-color: rgba(21, 101, 192, 0.3) !important; } 
.navslide1-et { background-color: rgba(106, 27, 154, 0.3) !important; }  */
.navslide2 { opacity: 1; z-index: 1; box-shadow: 0 0 20px #a9a9a95e inset; }
/* 为不同导航项设置不同颜色的滑块2 */
/* #nav li:nth-child(4) .navslide2 { background-color: rgba(51, 51, 51, 0.3); } 
#nav li:nth-child(5) .navslide2 { background-color: rgba(192, 0, 0, 0.3); } 
#nav li:nth-child(6) .navslide2 { background-color: rgba(255, 152, 0, 0.3); } 
#nav li:nth-child(7) .navslide2 { background-color: rgba(255, 235, 59, 0.3); } 
#nav li:nth-child(8) .navslide2 { background-color: rgba(46, 125, 50, 0.3); } 
#nav li:nth-child(9) .navslide2 { background-color: rgba(21, 101, 192, 0.3); } 
#nav li:nth-child(10) .navslide2 { background-color: rgba(106, 27, 154, 0.3); } 
.squeeze { transform: scale(0.9); } */

/* ================= 下拉菜单 - 增强玻璃态效果 ================= */
.submenu {
  padding: 0;
  position: absolute;
  top: 200%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9); /* 增加不透明度使背景更明显 */
  backdrop-filter: blur(40px) saturate(150%); /* 增强模糊和饱和度 */
  -webkit-backdrop-filter: blur(40px) saturate(150%); /* Safari兼容 */ 
  border: 2px solid rgba(255, 255, 255, 0.3); /* 更明显的玻璃边框 */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15), /* 更深的外阴影 */
              0 0 0 1px rgba(255, 255, 255, 0.345) inset, /* 内发光 */
              0 2px 8px rgba(255, 255, 255, 0.142) inset; /* 顶部高光 */
  border-radius: 25px;
  display: none;
  flex-direction: column;
  min-width: 50px;
  
  z-index: 999;
}

.submenu a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #23502c; /* 默认颜色 */
  text-align: center;
  font-size: 10px;
  min-height: 40px;
}

/* 为每个导航选项的下拉菜单设置对应的颜色 */
#nav li:nth-child(3) .submenu a { color: #333333; } /* Home - 深灰色 */
#nav li:nth-child(4) .submenu a { color: #C00000; } /* Team - 深红色（增强明度） */
#nav li:nth-child(5) .submenu a { color: #FF5722; } /* Project - 深橙色（增强明度） */
#nav li:nth-child(6) .submenu a { color: #F9A825; } /* Human Practices - 深黄色 */
#nav li:nth-child(7) .submenu a { color: #2E7D32; } /* WetLab - 深绿色（增强明度） */
#nav li:nth-child(8) .submenu a { color: #1565C0; } /* DryLab - 深蓝色（增强明度） */
#nav li:nth-child(9) .submenu a { color: #6A1B9A; } /* Entrepreneurship - 深紫色（增强明度） */


.submenu a:hover { 
  /* background: rgba(255, 255, 255, 0.2); 增强玻璃态悬停效果 */
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border-radius: 25px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) inset; /* 内发光效果 */
}

/* 为每个导航选项的下拉菜单设置对应的悬停效果 */
#nav li:nth-child(3) .submenu a:hover { 
  color: #1a1a1a; 
  box-shadow: 0 0 20px rgba(51, 51, 51, 0.3) inset; 
} /* Home - 深灰色 */

#nav li:nth-child(4) .submenu a:hover { 
  color: #800000; 
  box-shadow: 0 0 20px rgba(192, 0, 0, 0.3) inset; 
} /* Team - 深红色（增强明度） */

#nav li:nth-child(5) .submenu a:hover { 
  color: #e2650c; 
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.3) inset; 
} /* Project - 深橙色（增强明度） */

#nav li:nth-child(6) .submenu a:hover { 
  color: #eba902; 
  box-shadow: 0 0 20px rgba(255, 235, 59, 0.3) inset; 
} /* Human Practices - 深黄色 */

#nav li:nth-child(7) .submenu a:hover { 
  color: #1B5E20; 
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.3) inset; 
} /* WetLab - 深绿色（增强明度） */

#nav li:nth-child(8) .submenu a:hover { 
  color: #0D47A1; 
  box-shadow: 0 0 20px rgba(21, 101, 192, 0.3) inset; 
} /* DryLab - 深蓝色（增强明度） */

#nav li:nth-child(9) .submenu a:hover { 
  color: #4A148C; 
  box-shadow: 0 0 20px rgba(106, 27, 154, 0.3) inset; 
} /* Entrepreneurship - 深紫色（增强明度） */

/* ================= 移动端 ================= */
.menu-toggle {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s ease;
  z-index: 1001;
}
.menu-toggle.open { transform: rotate(180deg); }

@media (max-width: 768px) {
  #nav {
    flex-direction: column;
    padding: 0;
    display: none; 
    width: 90%;
    max-width: 400px;
  }
  #nav li { 
    text-align: center; 
    border-bottom: 1px solid #ddd;
    padding: 15px 0; /* 增加上下内边距提高行高 */
  }
  #nav li:last-child { border-bottom: none; }
  .navslide1, .navslide2 { display: none; }
  .submenu { 
    position: static; 
    display: none; 
    box-shadow: none;
    left: auto; /* 移除左偏移 */
    transform: none; /* 移除变换 */
    width: 100%; /* 占满父容器宽度 */
    margin: 0; /* 移除外边距 */
  }
  .menu-toggle { display: block; }
}