/* ==========================================================================
   论坛组件样式：板块卡片、帖子列表、遮罩区、进度条、页脚
   ========================================================================== */

/* --- 全站公告条 --- */
.site-notice {
  padding: 7px 0;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.08), rgba(168, 85, 247, 0.08));
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
.site-notice .container { display: flex; align-items: center; gap: var(--space-2); }
.site-notice .notice-icon { flex-shrink: 0; }

/* --- 首页横幅 --- */
.hero {
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
}
.hero-title {
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 700;
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #e2e8f0 0%, var(--neon-cyan) 45%, var(--neon-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-md);
  margin-bottom: var(--space-5);
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat .stat-value {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  line-height: 1.2;
}
.hero-stat .stat-label { font-size: var(--font-xs); color: var(--text-muted); }

/* --- 板块卡片网格 --- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.board-card {
  position: relative;
  display: block;
  overflow: hidden;
}
.board-card.locked { border-color: rgba(239, 68, 68, 0.22); }
.board-card.locked::after {
  /* 锁定板块的斜纹遮罩，视觉上区分可进与不可进 */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(239, 68, 68, 0.028) 10px,
    rgba(239, 68, 68, 0.028) 20px
  );
}
.board-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.board-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4));
}
.board-card-head .board-meta { flex: 1; min-width: 0; }
.board-name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.board-card:hover .board-name { color: var(--neon-cyan); }
.board-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.board-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-xs);
  color: var(--text-muted);
}
.board-stats { display: flex; gap: var(--space-3); }
.board-stats span { white-space: nowrap; }

/* 板块门槛标签 */
.board-req {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  color: var(--text-muted);
  white-space: nowrap;
}
.board-req.ok { border-color: rgba(52, 211, 153, 0.35); background: rgba(52,211,153,0.08); color: var(--neon-green); }
.board-req.locked { border-color: rgba(239, 68, 68, 0.4); background: rgba(239,68,68,0.1); color: var(--neon-red); }

/* --- 帖子列表 --- */
.post-list { display: flex; flex-direction: column; gap: var(--space-2); }
.post-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.post-row:hover { border-color: var(--border-strong); box-shadow: var(--glow-sm); }
.post-row.is-pinned { border-left: 2px solid var(--neon-amber); }
.post-row.is-featured { border-left: 2px solid var(--neon-purple); }
.post-row.is-pinned.is-featured {
  border-left: 2px solid;
  border-image: linear-gradient(180deg, var(--neon-amber), var(--neon-purple)) 1;
}

.post-main { flex: 1; min-width: 0; }
.post-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.post-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.post-title:hover { color: var(--neon-cyan); }
.post-row.locked .post-title { color: var(--text-secondary); }

.post-summary {
  margin: 0 0 6px;
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}
.post-meta .author { color: var(--text-secondary); }
.post-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 56px;
}
.post-stats .stat-num { font-weight: 600; color: var(--text-secondary); }

/* --- 权限遮罩区：本站核心视觉元素 --- */
.content-mask {
  position: relative;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.05), rgba(168, 85, 247, 0.06));
  overflow: hidden;
}
.mask-preview {
  padding: var(--space-4);
  padding-bottom: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.8;
  /* 底部渐隐，制造"内容被截断"的视觉暗示 */
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.mask-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
  background: linear-gradient(180deg, transparent, var(--bg-card) 35%);
  border-top: 1px dashed rgba(239, 68, 68, 0.25);
}
.mask-icon {
  font-size: 26px;
  display: block;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}
.mask-title {
  margin: 0 0 6px;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
}
.mask-title strong { color: var(--neon-red); text-shadow: 0 0 10px rgba(239, 68, 68, 0.45); }
.mask-desc {
  margin: 0 0 var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.7;
}
.mask-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; align-items: center; }

/* 积分差额提示：解锁按钮不可用时，仍要让用户看到差多少、去哪补 */
.mask-shortfall {
  font-size: 11px;
  color: var(--neon-amber);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.07);
}
.mask-shortfall:hover { color: #fde68a; text-shadow: none; border-color: rgba(251, 191, 36, 0.7); }

/* 遮罩区的模糊内容层：仅视觉装饰，不含任何真实受限内容 */
.mask-blur-lines {
  padding: 0 var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0.5;
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}
.mask-blur-lines span {
  height: 9px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bg-elevated), rgba(148,163,184,0.14));
}
.mask-blur-lines span:nth-child(2) { width: 88%; }
.mask-blur-lines span:nth-child(3) { width: 76%; }
.mask-blur-lines span:nth-child(4) { width: 92%; }
.mask-blur-lines span:nth-child(5) { width: 60%; }

/* --- 晋升进度条 --- */
.rank-progress { margin: var(--space-3) 0; }
.rank-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 6px;
  font-size: var(--font-xs);
}
.rank-progress-head .cur { color: var(--text-primary); font-weight: 600; }
.rank-progress-head .next { color: var(--text-muted); }
.rank-progress-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.rank-progress-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--badge-color, var(--neon-cyan)), color-mix(in srgb, var(--badge-color, var(--neon-cyan)) 55%, var(--neon-purple)));
  box-shadow: 0 0 10px var(--badge-color, var(--neon-cyan));
  transition: width 0.6s var(--ease-out);
}
.rank-progress.is-max .rank-progress-track { border-color: rgba(239, 68, 68, 0.4); }
.rank-progress.is-max .rank-progress-bar {
  background: linear-gradient(90deg, var(--neon-amber), var(--neon-red));
  animation: bar-shimmer 2.6s linear infinite;
  background-size: 200% 100%;
}
@keyframes bar-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.rank-progress-foot {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

/* --- 等级体系表 --- */
.rank-table { display: flex; flex-direction: column; gap: var(--space-2); }
.rank-row {
  display: grid;
  grid-template-columns: 44px minmax(110px, 1fr) 96px minmax(0, 2fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rank-row:hover { border-color: var(--badge-color, var(--border-strong)); box-shadow: var(--badge-glow, var(--glow-sm)); }
.rank-row.is-current {
  border-color: var(--badge-color, var(--neon-cyan));
  background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color, #00f0ff) 9%, var(--bg-card)), var(--bg-card) 65%);
  box-shadow: var(--badge-glow, var(--glow-md));
}
.rank-no {
  font-size: var(--font-xl);
  font-weight: 700;
  text-align: center;
  color: var(--badge-color, var(--text-muted));
  text-shadow: 0 0 12px color-mix(in srgb, var(--badge-color, transparent) 55%, transparent);
  font-family: var(--font-mono);
}
.rank-name-cell { display: flex; flex-direction: column; gap: 4px; }
.rank-points { font-size: var(--font-xs); color: var(--text-secondary); font-family: var(--font-mono); }
.rank-desc { font-size: var(--font-xs); color: var(--text-muted); line-height: 1.6; margin: 0; }

/* --- 规则表格（功勋/积分规则展示） --- */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}
.rule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: var(--font-sm);
}
.rule-item .rule-label { color: var(--text-secondary); }
.rule-item .rule-value { font-family: var(--font-mono); font-weight: 600; }
.rule-item .rule-value.positive { color: var(--neon-green); }
.rule-item .rule-value.negative { color: var(--neon-red); }
.rule-item .rule-cap { display: block; font-size: 11px; color: var(--text-muted); font-family: var(--font-sans); font-weight: 400; }

/* --- 版规正文 --- */
.rules-content {
  font-size: var(--font-sm);
  line-height: 1.85;
  color: var(--text-secondary);
}
.rules-content h2 {
  color: var(--text-primary);
  font-size: var(--font-lg);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.rules-content ol li, .rules-content ul li { margin-bottom: var(--space-2); }
.rules-content strong { color: var(--neon-amber); font-weight: 600; }

/* --- 侧边栏 --- */
.sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.sidebar-widget .widget-list { list-style: none; margin: 0; padding: 0; }
.sidebar-widget .widget-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}
.sidebar-widget .widget-list li:last-child { border-bottom: 0; }
.widget-user-box { text-align: center; }
.widget-user-box .user-avatar-lg {
  width: 58px; height: 58px;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: var(--bg-elevated);
  border: 2px solid var(--badge-color, var(--neon-cyan));
  box-shadow: var(--badge-glow, var(--glow-md));
}
.widget-user-box .user-name { font-weight: 600; margin-bottom: 4px; }

/* --- 用户 ID 徽章（views/partials/user-id.ejs）---
   追加在用户名/昵称之后，不替换原有元素，故各处原有字号字重不受影响。
   刻意做得比等级徽章更弱：ID 是辅助信息，不应抢过昵称与等级的视觉权重。 */
.user-id-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}
/* 导航栏用户胶囊内空间紧凑，进一步收窄。
   弱化视觉权重【不能】用容器 opacity：那会把承载文字的整块一起压暗，
   10px 小字混色后跌破 4.5:1（配色可读性回归对此有专门断言，阈值 0.91
   是按「最暗文字叠最亮背景」的最坏情况推导的，不是经验值）。
   改用去掉底色与边框来降噪——文字仍是 --text-muted，满不透明下 5.15:1 达标。 */
.user-id-badge.in-chip {
  margin-left: 4px;
  padding: 0;
  font-size: 9px;
  line-height: 14px;
  background: transparent;
  border-color: transparent;
}
/* 帖子作者栏内：作者栏字号本就小（11px），徽章需更收敛 */
.author-badge .user-id-badge {
  margin-left: 4px;
  font-size: 9px;
  line-height: 14px;
  padding: 0 4px;
}

/* --- 头像（预设 / 自定义上传） ---
   .avatar-box 由 views/partials/avatar.ejs 输出，同时套在既有的
   .user-avatar-lg / .ab-avatar 上，因此尺寸、圆角、边框都沿用原有作用域规则，
   这里只补两件原样式没有的事：图片本身的填充与裁剪，以及加载失败降级后的形态。 */
.avatar-box { overflow: hidden; }
.avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 非正方形的原图居中裁切，不拉伸变形 */
  display: block;
  border-radius: inherit;
}
/* 图片 404 或解码失败时由 main.js 加此类：回到首字母兜底，
   继承容器的字号与配色即可，无需重复定义颜色 */
.avatar-box.avatar-fallback img { display: none; }
.avatar-box.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
  text-align: center;
}
.widget-stats .ws-item {
  padding: var(--space-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.widget-stats .ws-value { display: block; font-weight: 700; font-family: var(--font-mono); color: var(--neon-cyan); }
.widget-stats .ws-label { font-size: 10px; color: var(--text-muted); }

/* --- 页脚 --- */
.site-footer {
  margin-top: var(--space-7);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  /* 与 --bg-sunken 同步（旧值 rgba(5,8,14,.6) 是提亮前的 bg-sunken） */
  background: rgba(9, 15, 24, 0.6);
  text-align: center;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.footer-links a { font-size: var(--font-xs); color: var(--text-muted); }
.footer-links a:hover { color: var(--neon-cyan); }
.footer-text { margin: 0 0 4px; font-size: var(--font-xs); color: var(--text-muted); }
/* ICP 备案号是【法规要求公示】的信息，且是可点击链接，不能用禁用色：
   disabled 在页脚 bg-base 上仅 2.60:1，12px 备案号几乎读不出来。
   与同区域 .footer-links a / .footer-text 一致用 muted，视觉权重不突兀。 */
.footer-icp a { color: var(--text-muted); }

/* --- 分页 --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  transition: all var(--dur-fast);
}
.pagination a:hover { border-color: var(--border-strong); color: var(--neon-cyan); box-shadow: var(--glow-sm); text-shadow: none; }
.pagination .current {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
  font-weight: 600;
  box-shadow: var(--glow-sm);
}
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* --- 小分类筛选 Tab --- */
.category-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.category-tab {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.category-tab:hover { border-color: var(--cat-color, var(--neon-cyan)); color: var(--cat-color, var(--neon-cyan)); text-shadow: none; }
.category-tab.active {
  border-color: var(--cat-color, var(--neon-cyan));
  background: color-mix(in srgb, var(--cat-color, var(--neon-cyan)) 14%, transparent);
  color: var(--cat-color, var(--neon-cyan));
  font-weight: 600;
  box-shadow: 0 0 8px color-mix(in srgb, var(--cat-color, var(--neon-cyan)) 35%, transparent);
}

/* --- 空状态 --- */
.empty-state {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 40px; display: block; margin-bottom: var(--space-3); opacity: 0.5; }
.empty-state p { margin: 0 0 var(--space-3); font-size: var(--font-sm); }

/* --- 错误页 --- */
.error-page { padding: var(--space-7) 0; text-align: center; }
.error-code {
  font-size: clamp(56px, 14vw, 104px);
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.35));
}
.error-page h1 { font-size: var(--font-xl); margin-bottom: var(--space-3); }
.error-page .error-msg { color: var(--text-secondary); margin-bottom: var(--space-5); }

/* --- 板块详情页头部 --- */
.board-header { padding: var(--space-5); }
.board-header-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.board-header-icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.45));
}
.board-header-main { flex: 1; min-width: 0; }
.board-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--font-xl);
  margin-bottom: 6px;
}
.board-header-desc {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.75;
}
.board-header-stats {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-subtle);
}
.bhs-item { text-align: center; }
.bhs-value {
  display: block;
  font-size: var(--font-lg);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  line-height: 1.2;
}
.bhs-label { font-size: 10px; color: var(--text-muted); }
.board-header-actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
}

/* --- 版规折叠区 --- */
.rules-collapse { padding: 0; overflow: hidden; }
.rules-collapse > summary {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--dur-fast), background var(--dur-fast);
  user-select: none;
}
.rules-collapse > summary::-webkit-details-marker { display: none; }
.rules-collapse > summary:hover { color: var(--neon-cyan); background: var(--bg-elevated); }
.rules-collapse[open] > summary {
  color: var(--neon-cyan);
  border-bottom: 1px solid var(--border-subtle);
}
.rules-collapse .rules-content { padding: var(--space-4); }

/* --- 板块工具栏：排序 + 搜索 --- */
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.board-sort { display: flex; gap: 4px; }
.sort-link {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: all var(--dur-fast);
}
.sort-link:hover { color: var(--text-primary); background: var(--bg-elevated); text-shadow: none; }
.sort-link.active {
  color: var(--neon-cyan);
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.08);
  font-weight: 600;
}
.board-search { display: flex; gap: 6px; align-items: center; }

@media (max-width: 768px) {
  .board-header { padding: var(--space-4) var(--space-3); }
  .board-header-icon { font-size: 30px; }
  .board-header-title { font-size: var(--font-lg); }
  /* 窄屏把统计移到标题下方，避免与图标挤压 */
  .board-header-top { flex-wrap: wrap; }
  .board-header-stats {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    justify-content: space-around;
  }
  .board-header-actions { justify-content: stretch; }
  .board-header-actions .btn { width: 100%; }
  .board-toolbar { flex-direction: column; align-items: stretch; }
  .board-search .form-control { width: 100% !important; flex: 1; }
}

/* --- 回到顶部按钮 --- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  /* 与 --bg-card 同步（旧值 rgba(14,21,33,.92) 是提亮前的 bg-card） */
  background: rgba(21, 30, 46, 0.92);
  color: var(--neon-cyan);
  font-size: 17px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base), box-shadow var(--dur-fast);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { box-shadow: var(--glow-md); border-color: var(--neon-cyan); }

@media (max-width: 768px) {
  .back-to-top { right: 14px; bottom: 18px; width: 36px; height: 36px; }
}

/* --- 内联表单（退出按钮等） --- */
.inline-form { display: inline; margin: 0; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.user-chip:hover { text-shadow: none; }
/* 昵称与 ID 竖排容器：ID 显示在昵称下方 */
.user-chip-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
  min-width: 0;
}
.user-chip-name {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip:hover .user-chip-name { color: var(--neon-cyan); }

/* --- 响应式 --- */
@media (max-width: 768px) {
  .board-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero { padding: var(--space-5) 0 var(--space-4); }
  .hero-stats { gap: var(--space-4); }

  .rank-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .rank-row .rank-points, .rank-row .rank-desc { grid-column: 2; }
  .rank-no { font-size: var(--font-lg); }

  .post-row { padding: var(--space-3); gap: var(--space-2); }
  .post-stats { min-width: 44px; }
  .user-chip-name { display: none; }
  .header-user .rank-badge .badge-lv { display: none; }
}

/* ==========================================================================
   关于本站：入口卡片列表
   两列网格，窄屏降为单列。悬停用辉光与描边，与全站深色科技风一致。
   ========================================================================== */
.about-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.about-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.about-link:hover {
  border-color: var(--border-strong);
  background: rgba(0, 240, 255, 0.05);
  box-shadow: var(--glow-sm);
}

.al-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 19px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.about-link:hover .al-icon {
  border-color: var(--border-strong);
  box-shadow: var(--glow-xs);
}

.al-body { min-width: 0; display: block; }

.al-title {
  display: block;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
}
.about-link:hover .al-title { color: var(--neon-cyan); }

.al-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--font-xs);
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .about-links { grid-template-columns: minmax(0, 1fr); }
  .about-link { padding: var(--space-3); }
}

/* ==========================================================================
   十阶功勋等级列表（通用组件）
   原位于 home.css（首页侧栏速览），现首页侧栏已移除该模块，
   改由「站务管理」板块页展示，故上移到全站样式表供多页复用。
   L 序号与名称同色，颜色取自各阶徽章的 --badge-color（variables.css）。
   ========================================================================== */
.rank-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rl-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 序号与标题都是 12-13px 小字，须用 --badge-text（L7/L10 用识别色只有 4.22/4.44，
   不足小字号所需的 4.5:1）。回退到 --badge-color，令牌缺失时仍按原逻辑着色。 */
.rl-lv {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-xs);
  color: var(--badge-text, var(--badge-color, var(--text-secondary)));
}
.rl-title {
  color: var(--badge-text, var(--badge-color, var(--text-primary)));
  font-size: var(--font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   用户展示栏的徽章条（partials/user-badges.ejs）

   放在 components.css 而非 badge.css：badge.css 只在徽章墙页面通过
   extraCss 加载，而徽章条出现在帖子作者栏（只加载 post.css）、回复者栏、
   会员名片等多个页面。components.css 由 layout.ejs 全站加载，任何页面
   include 这个 partial 都能拿到样式——否则徽章会退化成一串没有圆环的裸 emoji。

   用于横向空间紧张的位置，与徽章墙卡片是两套尺寸：这里只放图标，
   靠 title 悬停看名称与达成条件。

   可读性约束（沿用全站配色校准的结论）：
     · 图标是 emoji，不受文字对比度规则约束；
     · 但「+N」计数是真实文字，必须 >=4.5:1，故用 --text-secondary
       而非 muted，实测在 bg-card 上 9.26:1、在 bg-elevated 上 8.05:1；
     · 圆环与辉光用徽章自身色，一律 color-mix 降透明度，避免深色页面
       里出现刺眼的高饱和色块。
   ========================================================================== */
.user-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;           /* 徽章多时换行，不撑破作者栏 */
  gap: 4px;
  vertical-align: middle;
  min-width: 0;
}

.ub-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ub-color, var(--neon-cyan)) 45%, transparent);
  background: color-mix(in srgb, var(--ub-color, var(--neon-cyan)) 12%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ub-color, var(--neon-cyan)) 22%, transparent);
  cursor: default;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* 悬停时轻微放大并加强辉光，作为 title 提示出现的伴随反馈 */
.ub-item:hover {
  transform: translateY(-1px) scale(1.12);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ub-color, var(--neon-cyan)) 45%, transparent);
}

.ub-icon {
  font-size: 12px;
  line-height: 1;
  /* emoji 自带颜色，不需要 color；此行只为防止继承到意外的文字色 */
  filter: none;
}

/* 溢出计数：是真实文字，必须达标（见上方约束说明） */
.ub-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

a.ub-more:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* 会员名片里的徽章条：空间宽松，图标放大一号 */
.member-card .user-badges { gap: 6px; margin-top: var(--space-3); }
.member-card .ub-item { width: 28px; height: 28px; }
.member-card .ub-icon { font-size: 15px; }
.member-card .ub-more { height: 28px; font-size: 12px; }

@media (max-width: 768px) {
  .ub-item { width: 20px; height: 20px; }
  .ub-icon { font-size: 11px; }
}