.no-underline {
  text-decoration: none;
  color: inherit;
}

.no-underline:hover {
  text-decoration: none;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  object-fit: contain;
}

.title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #6366F1; /* 使用与图片中紫色渐变相近的颜色 */
  transition: color 0.2s ease;
}

.logo-title-container {
  display: flex;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}

.logo-title-container .title {
  display: flex;
  align-items: center;
}

.logo-title-container:hover .title {
  color: #4F46E5; /* 悬停时稍微深一点的紫色 */
}

/* 添加一个简单的动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 为移动设备优化 */
@media (max-width: 768px) {
  .title {
    font-size: 1.3rem;
  }
}

header nav {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.menu-items {
  display: flex;
  align-items: center;
  margin-left: 40px; /* 调整导航菜单与标题之间的距离 */
}

.menu-items a {
  color: hsl(205deg, 25%, 23%);
  text-decoration: none;
  padding: 0 15px;
  font-size: 16px; /* 增大字体大小 */
  font-weight: 500; /* 调整字体粗细 */
  transition: color 0.2s ease;
}

.menu-items a:hover {
  color: #4F46E5; /* 悬停时的颜色，稍深的紫色 */
}

.menu-items a.active {
  color: #6366F1; /* 高亮颜色，与网站主题一致 */
  font-weight: bold;
  border-bottom: 2px solid #6366F1; /* 添加下划线高亮 */
}

.right-container {
  display: flex;
  align-items: center;
  margin-left: auto; /* 将右侧容器推到最右边 */
}

.right-container > * {
  margin-left: 15px;
}

.auth-container {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin-right: 10px;
}

.user-info button {
  padding: 5px 10px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .right-container {
    flex-direction: column;
    align-items: flex-end;
  }

  .right-container > * {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* 头像容器 */
.avatar-container {
  position: relative;
  display: inline-block;
}

/* 用户头像 */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

/* 下拉菜单 */
.dropdown-menu {
  position: absolute;
  top: 100%; /* 紧贴在头像下方 */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px; /* 可选：头像和菜单之间的间距 */
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  min-width: 100px; /* 可选：设置最小宽度 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* 下拉菜单中的按钮 */
.dropdown-menu button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}

.dropdown-menu button:hover {
  color: #007bff;
}

/* 调整导航栏布局 */
header nav {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.right-container {
  margin-left: auto; /* 将右侧容器推到最右边 */
  display: flex;
  align-items: center;
}