/*
 * 社区圈页面样式文件
 * 包含：首页、帖子详情页、用户中心、想法、祷告、问答、代祷箱等页面样式
 */

/* ============================================================ 
 * 1. 首页样式
 * ============================================================ */

/* 首页容器 */
.home-page {
  padding: var(--spacing-lg) 0;
}

/* 首页头部 */
.home-header {
  margin-bottom: var(--spacing-lg);
}

/* 首页标题 */
.home-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 首页描述 */
.home-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}

/* 帖子列表容器 */
.posts-list {
  margin-top: var(--spacing-lg);
}

/* 帖子列表头部 */
.posts-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

/* 帖子列表标题 */
.posts-list__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* 帖子列表筛选 */
.posts-list__filter {
  display: flex;
  gap: var(--spacing-sm);
}

/* ============================================================ 
 * 2. 帖子详情页样式
 * ============================================================ */

/* 详情页容器 */
.single-post {
  padding: var(--spacing-lg) 0;
}

/* 详情页内容区 */
.single-post__content-area {
  margin-bottom: var(--spacing-xl);
}

/* 详情页底部互动区 */
.single-post__actions {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* 详情页评论区 */
.single-post__comments {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 详情页评论标题 */
.single-post__comments-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

/* ============================================================ 
 * 3. 用户中心样式
 * ============================================================ */

/* 用户中心容器 */
.user-center {
  padding: var(--spacing-lg) 0;
}

/* 用户中心布局 */
.user-center__layout {
  display: flex;
  gap: var(--spacing-lg);
}

/* 用户中心侧边栏 */
.user-center__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 用户中心主内容 */
.user-center__content {
  flex: 1;
}

/* 用户中心页面标题 */
.user-center__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color-light);
}

/* 用户中心内容卡片 */
.user-center__card {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

/* 用户中心卡片标题 */
.user-center__card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

/* ============================================================ 
 * 4. 想法页面样式
 * ============================================================ */

/* 想法页面容器 */
.thoughts-page {
  padding: var(--spacing-lg) 0;
}

/* 想法页面头部 */
.thoughts-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 想法页面标题 */
.thoughts-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 想法页面描述 */
.thoughts-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 想法页面内容区 */
.thoughts-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 想法页面侧边栏 */
.thoughts-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 想法页面主内容 */
.thoughts-page__main {
  flex: 1;
}

/* ============================================================ 
 * 5. 祷告页面样式
 * ============================================================ */

/* 祷告页面容器 */
.prayers-page {
  padding: var(--spacing-lg) 0;
}

/* 祷告页面头部 */
.prayers-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 祷告页面标题 */
.prayers-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 祷告页面描述 */
.prayers-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 祷告页面选项卡 */
.prayers-page__tabs {
  margin-bottom: var(--spacing-lg);
}

/* 祷告页面内容区 */
.prayers-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 祷告页面侧边栏 */
.prayers-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 祷告页面主内容 */
.prayers-page__main {
  flex: 1;
}

/* ============================================================ 
 * 6. 问答页面样式
 * ============================================================ */

/* 问答页面容器 */
.qa-page {
  padding: var(--spacing-lg) 0;
}

/* 问答页面头部 */
.qa-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 问答页面标题 */
.qa-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 问答页面描述 */
.qa-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 问答页面选项卡 */
.qa-page__tabs {
  margin-bottom: var(--spacing-lg);
}

/* 问答页面内容区 */
.qa-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 问答页面侧边栏 */
.qa-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 问答页面主内容 */
.qa-page__main {
  flex: 1;
}

/* 问答列表项 */
.qa-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-normal);
}

.qa-item:hover {
  box-shadow: var(--shadow-md);
}

/* 问答项头部 */
.qa-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

/* 问答项标题 */
.qa-item__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-md);
}

/* 问答项元数据 */
.qa-item__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 问答项统计 */
.qa-item__stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--bg-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

/* 问答项统计项 */
.qa-item__stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ============================================================ 
 * 7. 代祷箱页面样式
 * ============================================================ */

/* 代祷箱页面容器 */
.prayerbox-page {
  padding: var(--spacing-lg) 0;
}

/* 代祷箱页面头部 */
.prayerbox-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 代祷箱页面标题 */
.prayerbox-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 代祷箱页面描述 */
.prayerbox-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 代祷箱页面选项卡 */
.prayerbox-page__tabs {
  margin-bottom: var(--spacing-lg);
}

/* 代祷箱页面内容区 */
.prayerbox-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 代祷箱页面侧边栏 */
.prayerbox-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 代祷箱页面主内容 */
.prayerbox-page__main {
  flex: 1;
}

/* 代祷箱列表 */
.prayerbox-list {
  margin-top: var(--spacing-lg);
}

/* 代祷箱列表为空 */
.prayerbox-list__empty {
  text-align: center;
  padding: var(--spacing-xxl) 0;
  color: var(--text-muted);
}

/* ============================================================ 
 * 8. 个人资料页面样式
 * ============================================================ */

/* 个人资料页面容器 */
.profile-page {
  padding: var(--spacing-lg) 0;
}

/* 个人资料头部 */
.profile-header {
  background-color: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

/* 个人资料头像 */
.profile-header__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  margin: 0 auto var(--spacing-md);
  border: 4px solid var(--bg-primary);
  box-shadow: var(--shadow-md);
}

.profile-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 个人资料用户名 */
.profile-header__username {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

/* 个人资料简介 */
.profile-header__bio {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* 个人资料统计 */
.profile-header__stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

/* 个人资料统计项 */
.profile-header__stat {
  text-align: center;
}

/* 个人资料统计数字 */
.profile-header__stat-number {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* 个人资料统计标签 */
.profile-header__stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 个人资料操作 */
.profile-header__actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
}

/* 个人资料内容区 */
.profile-content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 个人资料侧边栏 */
.profile-sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 个人资料主内容 */
.profile-main {
  flex: 1;
}

/* 个人资料内容卡片 */
.profile-card {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

/* 个人资料卡片标题 */
.profile-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
}

/* ============================================================ 
 * 9. 搜索结果页面样式
 * ============================================================ */

/* 搜索结果页面容器 */
.search-page {
  padding: var(--spacing-lg) 0;
}

/* 搜索结果头部 */
.search-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 搜索结果标题 */
.search-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 搜索结果统计 */
.search-page__count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}

/* 搜索结果内容区 */
.search-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 搜索结果侧边栏 */
.search-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 搜索结果主内容 */
.search-page__main {
  flex: 1;
}

/* 搜索结果项 */
.search-result-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-normal);
}

.search-result-item:hover {
  box-shadow: var(--shadow-md);
}

/* 搜索结果项标题 */
.search-result-item__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-md);
}

.search-result-item__title a {
  color: var(--color-primary);
  text-decoration: none;
}

.search-result-item__title a:hover {
  text-decoration: underline;
}

/* 搜索结果项内容 */
.search-result-item__content {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-md);
}

/* 搜索结果项元数据 */
.search-result-item__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 搜索结果高亮 */
.search-highlight {
  background-color: #fff3cd;
  color: #856404;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-xs);
}

/* 搜索结果筛选 */
.search-filters {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

/* 搜索筛选标题 */
.search-filters__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
}

/* 搜索筛选组 */
.search-filters__group {
  margin-bottom: var(--spacing-md);
}

/* 搜索筛选组标题 */
.search-filters__group-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

/* 搜索筛选选项 */
.search-filters__options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* 搜索筛选选项 */
.search-filters__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.search-filters__option:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* 搜索筛选选项输入 */
.search-filters__option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ============================================================ 
 * 10. 我的页面样式
 * ============================================================ */

/* 我的页面容器 */
.my-page {
  padding: var(--spacing-lg) 0;
}

/* 我的页面头部 */
.my-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 我的页面标题 */
.my-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 我的页面描述 */
.my-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 我的页面内容区 */
.my-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 我的页面侧边栏 */
.my-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 我的页面主内容 */
.my-page__main {
  flex: 1;
}

/* 我的页面内容卡片 */
.my-page__card {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

/* 我的页面卡片标题 */
.my-page__card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
}

/* ============================================================ 
 * 11. 关注页面样式
 * ============================================================ */

/* 关注页面容器 */
.following-page {
  padding: var(--spacing-lg) 0;
}

/* 关注页面头部 */
.following-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 关注页面标题 */
.following-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 关注页面描述 */
.following-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 关注列表 */
.following-list {
  margin-top: var(--spacing-lg);
}

/* 关注列表项 */
.following-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: box-shadow var(--transition-normal);
}

.following-item:hover {
  box-shadow: var(--shadow-md);
}

/* 关注项头像 */
.following-item__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  flex-shrink: 0;
}

.following-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 关注项内容 */
.following-item__content {
  flex: 1;
  min-width: 0;
}

/* 关注项用户名 */
.following-item__username {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

/* 关注项简介 */
.following-item__bio {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-sm);
}

/* 关注项统计 */
.following-item__stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 关注项操作 */
.following-item__actions {
  flex-shrink: 0;
}

/* ============================================================ 
 * 12. 粉丝页面样式
 * ============================================================ */

/* 粉丝页面容器 */
.followers-page {
  padding: var(--spacing-lg) 0;
}

/* 粉丝页面头部 */
.followers-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 粉丝页面标题 */
.followers-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 粉丝页面描述 */
.followers-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 粉丝列表 */
.followers-list {
  margin-top: var(--spacing-lg);
}

/* 粉丝列表项 */
.follower-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: box-shadow var(--transition-normal);
}

.follower-item:hover {
  box-shadow: var(--shadow-md);
}

/* 粉丝项头像 */
.follower-item__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  flex-shrink: 0;
}

.follower-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 粉丝项内容 */
.follower-item__content {
  flex: 1;
  min-width: 0;
}

/* 粉丝项用户名 */
.follower-item__username {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

/* 粉丝项简介 */
.follower-item__bio {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-sm);
}

/* 粉丝项统计 */
.follower-item__stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 粉丝项操作 */
.follower-item__actions {
  flex-shrink: 0;
}

/* ============================================================ 
 * 13. 通知页面样式
 * ============================================================ */

/* 通知页面容器 */
.notifications-page {
  padding: var(--spacing-lg) 0;
}

/* 通知页面头部 */
.notifications-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 通知页面标题 */
.notifications-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 通知页面选项卡 */
.notifications-page__tabs {
  margin-bottom: var(--spacing-lg);
}

/* 通知列表 */
.notifications-list {
  margin-top: var(--spacing-lg);
}

/* 通知列表项 */
.notification-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.notification-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

/* 未读通知 */
.notification-item--unread {
  border-left: 4px solid var(--color-primary);
}

/* 通知项头部 */
.notification-item__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

/* 通知项图标 */
.notification-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  flex-shrink: 0;
}

/* 通知项内容 */
.notification-item__content {
  flex: 1;
  min-width: 0;
}

/* 通知项标题 */
.notification-item__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-md);
}

/* 通知项时间 */
.notification-item__time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 通知项链接 */
.notification-item__link {
  color: var(--color-primary);
  text-decoration: none;
}

.notification-item__link:hover {
  text-decoration: underline;
}

/* 通知为空 */
.notifications-empty {
  text-align: center;
  padding: var(--spacing-xxl) 0;
  color: var(--text-muted);
}

/* ============================================================ 
 * 14. 收藏页面样式
 * ============================================================ */

/* 收藏页面容器 */
.collections-page {
  padding: var(--spacing-lg) 0;
}

/* 收藏页面头部 */
.collections-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 收藏页面标题 */
.collections-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 收藏页面描述 */
.collections-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 收藏页面内容区 */
.collections-page__content {
  display: flex;
  gap: var(--spacing-lg);
}

/* 收藏页面侧边栏 */
.collections-page__sidebar {
  flex: 0 0 280px;
  max-width: 280px;
}

/* 收藏页面主内容 */
.collections-page__main {
  flex: 1;
}

/* 收藏列表 */
.collections-list {
  margin-top: var(--spacing-lg);
}

/* 收藏列表项 */
.collection-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-normal);
}

.collection-item:hover {
  box-shadow: var(--shadow-md);
}

/* 收藏项头部 */
.collection-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

/* 收藏项标题 */
.collection-item__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

/* 收藏项元数据 */
.collection-item__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ============================================================ 
 * 15. 排行榜页面样式
 * ============================================================ */

/* 排行榜页面容器 */
.leaderboard-page {
  padding: var(--spacing-lg) 0;
}

/* 排行榜页面头部 */
.leaderboard-page__header {
  margin-bottom: var(--spacing-lg);
}

/* 排行榜页面标题 */
.leaderboard-page__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* 排行榜页面描述 */
.leaderboard-page__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 排行榜页面选项卡 */
.leaderboard-page__tabs {
  margin-bottom: var(--spacing-lg);
}

/* 排行榜列表 */
.leaderboard-list {
  margin-top: var(--spacing-lg);
}

/* 排行榜列表项 */
.leaderboard-item {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: box-shadow var(--transition-normal);
}

.leaderboard-item:hover {
  box-shadow: var(--shadow-md);
}

/* 排行榜项排名 */
.leaderboard-item__rank {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-light);
  background-color: var(--bg-tertiary);
  flex-shrink: 0;
}

/* 前三名排名样式 */
.leaderboard-item:nth-child(1) .leaderboard-item__rank {
  background-color: #ffd700;
  color: var(--text-primary);
}

.leaderboard-item:nth-child(2) .leaderboard-item__rank {
  background-color: #c0c0c0;
  color: var(--text-light);
}

.leaderboard-item:nth-child(3) .leaderboard-item__rank {
  background-color: #cd7f32;
  color: var(--text-light);
}

/* 排行榜项内容 */
.leaderboard-item__content {
  flex: 1;
  min-width: 0;
}

/* 排行榜项用户名 */
.leaderboard-item__username {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

/* 排行榜项统计 */
.leaderboard-item__stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 排行榜项得分 */
.leaderboard-item__score {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}