/* 通用头像样式，可根据网站风格调整 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 圆形头像，贴合多数网站风格 */
  object-fit: cover;
  border: 2px solid #eee; /* 边框与网站主色调匹配 */
  cursor: default; /* 取消点击指针，避免用户误以为可跳转 */
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.1);
  border-color: #1a1a1a;
}

/* 登录状态容器，隐藏默认，登录后显示 */
.avatar-container {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}

/* 未登录状态 - 浅色登录按钮 */
.unlogin-btn {
  display: block;
  padding: 6px 12px;
  background: #f5f5f5;
  color: #1a1a1a;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.unlogin-btn:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border-color: #ccc;
}

/* 未登录状态 - 深色注册按钮 */
.unlogin-btn-dark {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #1a1a1a;
}

.unlogin-btn-dark:hover {
  background: #333333;
  border-color: #333333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 用户名样式 */
.username {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

/* 登出按钮样式 */
.logout-btn {
  display: none;
  padding: 6px 12px;
  background: #f5f5f5;
  color: #1a1a1a;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: #eee;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}