/* 导航栏 */
header {
  background: linear-gradient(90deg, #00b3e6, #f9f8fa, #852eb8); /* 渐变背景 */
  color: white;
  padding: 0px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: top 0.3s;
  overflow: hidden; /* 确保伪元素不会超出header区域 */
}

/* Logo 样式 */
.logo {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-right: 20px; /* 调整 Logo 和导航菜单之间的间距 */
}

/* 导航栏容器 */
header nav {
  margin: 0 auto; /* 居中 */
  display: flex;
  justify-content: flex-start; /* 将内容靠左对齐 */
  align-items: center;
  padding: 0 20px;
}

/* 导航菜单 */
header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px; /* 菜单项之间的间距 */
  font-size: 20px;
}

/* 主菜单项 */
header nav ul li a {
  color: rgb(24, 7, 182);
  text-decoration: none;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s, transform 0.2s;
}

/* 鼠标悬停效果 */
header nav ul li a:hover {
  background-color: #19b19d; /* 背景颜色 */
  transform: scale(1.1); /* 增加放大效果 */
  border-radius: 4px; /* 圆角效果 */
}


/* 响应式设计 */
@media (max-width: 768px) {
  /* 导航栏调整为垂直排列 */
  header nav ul {
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }

  header nav ul li a {
      padding: 10px 20px;
      font-size: 14px;
  }

  section {
      margin: 10px;
  }
}


/* 右侧登录/注册按钮和用户状态 */
.auth-buttons {
    margin-left: auto; /* 将内容推到右侧 */
    display: flex;
    align-items: center;
    gap: 10px; /* 按钮之间的间距 */
}

/* 登录和注册按钮 */
.auth-btn {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 0px solid white;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.auth-btn.login-btn {
    background-color: #00b3e600; /* 登录按钮背景色 */
}

.auth-btn.register-btn {
    background-color: #00b3e600; /* 注册按钮背景色 */
}

.auth-btn:hover {
    background-color: white;
    color: #3a19b1; /* 悬停时的文字颜色 */
}

/* 用户状态和下拉菜单 */
.user-status {
    position: relative;
    display: flex;
    align-items: center;
}

/* 下拉菜单容器 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉菜单图标 */
.dropdown-toggle {
    cursor: pointer;
    transition: transform 0.3s;
}

.dropdown-toggle:hover {
    transform: scale(1.1); /* 悬停时放大图标 */
}

/* 下拉菜单内容 */
.dropdown-menu {
    display: none; /* 默认隐藏 */
    position: absolute;
    right: 0; /* 从右侧对齐 */
    top: 100%; /* 显示在图标下方 */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 150px; /* 设置最小宽度 */
    white-space: nowrap; /* 防止文字换行 */
}

/* 下拉菜单项 */
.dropdown-item {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    transition: background-color 0.3s;
}

.dropdown-item img {
    margin-right: 10px; /* 图标和文字之间的间距 */
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
}

.dropdown-item:hover {
    background-color: #f5f5f5; /* 悬停时的背景色 */
}

/* 显示下拉菜单 */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* 确保下拉菜单不被导航栏遮挡 */
header {
    overflow: visible; /* 允许内容溢出 */
    z-index: 1000; /* 确保导航栏在最上层 */
}

.dropdown-menu {
    z-index: 1001; /* 确保下拉菜单在导航栏之上 */
}

        /* 底部栏样式 */
        footer {
            background-color: #0a0555;
            color: #fff;
            padding: 20px 0;
            text-align: center;
            left: 0;
            bottom: 0;
            width: 100%;
            font-size: 12px;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        footer a:hover {
            text-decoration: underline;
        }