/* ============================================================
   CmsPro 论坛社区 · 前台设计系统 forum.css
   风格定位：现代资讯流社区风（白底卡片 / 清晰层级 / 信息密度适中）
   品牌主色：科技蓝 #2563eb
   结构：
     01 设计令牌 → 02 基础重置 → 03 排版工具类 → 04 核心组件
     05 Shell 布局（Header/Footer） → 06 三栏社区布局
     07 首页组件 → 08 认证布局 → 09 移动端底部导航
     10 全站细节优化 → 11 EasyMDE 编辑器适配 → 12 代码高亮适配
     13 消息中心 → 14 设置页 → 15 个人中心 → 16 用户排行榜
     17 管理后台侧边栏（manage 深色侧边栏） → 18 帖子详情页
   说明：旧版样式已迁移至 forum-legacy.css（供未改造页面过渡使用）
   ============================================================ */

/* ============================================================
   01 设计令牌（Brand Design Tokens）
   ============================================================ */

:root {
  /* ---- 品牌主色阶（科技蓝，单一主色调政策） ---- */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;

  /* ---- 中性色阶 ---- */
  --neutral-0: #ffffff;
  --neutral-25: #fafafa;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ---- 状态色令牌（仅语义状态使用） ---- */
  --state-success: #16a34a;
  --state-success-bg: #f0fdf4;
  --state-warning: #d97706;
  --state-warning-bg: #fffbeb;
  --state-error: #dc2626;
  --state-error-bg: #fef2f2;
  --state-info: var(--brand-600);
  --state-info-bg: var(--brand-50);

  /* ---- 语义别名（浅色模式） ---- */
  --forum-background: var(--neutral-50);
  --forum-foreground: var(--neutral-900);
  --forum-card: var(--neutral-0);
  --forum-card-foreground: var(--neutral-900);
  --forum-popover: var(--neutral-0);
  --forum-popover-foreground: var(--neutral-900);
  --forum-primary: var(--brand-600);
  --forum-primary-foreground: var(--neutral-0);
  --forum-secondary: var(--neutral-100);
  --forum-secondary-foreground: var(--neutral-700);
  --forum-muted: var(--neutral-100);
  --forum-muted-foreground: var(--neutral-500);
  --forum-accent: var(--brand-50);
  --forum-accent-foreground: var(--brand-700);
  --forum-destructive: var(--state-error);
  --forum-destructive-foreground: var(--neutral-0);
  --forum-border: var(--neutral-200);
  --forum-input: var(--neutral-200);
  --forum-ring: var(--brand-500);

  /* 图表配色（管理后台数据可视化专用） */
  --forum-chart-1: #2563eb;
  --forum-chart-2: #60a5fa;
  --forum-chart-3: #93c5fd;
  --forum-chart-4: #1e40af;
  --forum-chart-5: #bfdbfe;

  /* ---- 后台侧边栏（manage 深色侧边栏语义令牌） ---- */
  --forum-sidebar: var(--neutral-900);
  --forum-sidebar-foreground: var(--neutral-300);
  --forum-sidebar-primary: var(--brand-600);
  --forum-sidebar-primary-foreground: var(--neutral-0);
  --forum-sidebar-accent: rgba(255, 255, 255, 0.08);
  --forum-sidebar-accent-foreground: var(--neutral-0);

  /* ---- 圆角刻度（克制刻度：上限 12px） ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ---- 字体系统（中文优先 sans-serif） ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* ---- 字号刻度 ---- */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* ---- 字重 ---- */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ---- 行高 ---- */
  --leading-tight: 1.35;
  --leading-normal: 1.65;

  /* ---- 间距刻度（4px 基准网格） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- 表面与深度模型：静态表面以描边/分层为主，阴影透明度 <= 0.05；仅浮动层可用更深投影 ---- */
  --shadow-static: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-overlay: 0 12px 32px rgba(15, 23, 42, 0.14);

  /* ---- 布局尺寸 ---- */
  --layout-max-width: min(1600px, 96vw);
  --header-height: 60px;
  /* 主站导航顶部条高度（<=1024px 隐藏时按 0 处理） */
  --topbar-height: 32px;
}

/* ---- 深色模式变量覆盖（预留运营暗色主题能力） ---- */
.dark {
  --forum-background: var(--neutral-900);
  --forum-foreground: var(--neutral-100);
  --forum-card: #1e293b;
  --forum-card-foreground: var(--neutral-100);
  --forum-popover: #1e293b;
  --forum-popover-foreground: var(--neutral-100);
  --forum-primary: var(--brand-500);
  --forum-primary-foreground: var(--neutral-0);
  --forum-secondary: #273449;
  --forum-secondary-foreground: var(--neutral-200);
  --forum-muted: #273449;
  --forum-muted-foreground: var(--neutral-400);
  --forum-accent: rgba(96, 165, 250, 0.12);
  --forum-accent-foreground: var(--brand-300);
  --forum-destructive: #ef4444;
  --forum-destructive-foreground: var(--neutral-0);
  --forum-border: #334155;
  --forum-input: #334155;
  --forum-ring: var(--brand-400);
}

/* ============================================================
   02 基础重置与排版
   ============================================================ */

html {
  font-size: var(--text-base);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--forum-foreground);
  background-color: var(--forum-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--forum-foreground);
  line-height: var(--leading-tight);
  margin: 0;
  font-weight: var(--font-semibold);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0; }

a {
  color: var(--forum-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover { color: var(--brand-700); }

ul, ol { margin: 0; padding: 0; }

img { background-color: var(--neutral-100); }

/* ============================================================
   03 排版工具类
   ============================================================ */

.text-heading-1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.text-heading-2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.text-heading-3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--forum-foreground);
}

.text-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--forum-muted-foreground);
}

/* ============================================================
   04 核心组件基础类
   ============================================================ */

/* 卡片容器：资讯流社区的核心表面 */
.forum-card {
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-static);
}

/* 主按钮 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  background-color: var(--forum-primary);
  color: var(--forum-primary-foreground);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-primary:hover { background-color: var(--brand-700); color: var(--forum-primary-foreground); }

/* 次级按钮 */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  background-color: var(--forum-card);
  color: var(--forum-foreground);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.btn-secondary:hover {
  border-color: var(--brand-400);
  color: var(--forum-primary);
  background-color: var(--brand-50);
}

/* 关注按钮（btn-secondary 变体）：激活态品牌化，与服务端 active 状态类契约对齐 */
.forum-follow-btn { white-space: nowrap; }

.forum-follow-btn.active {
  border-color: var(--brand-200);
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.forum-follow-btn.active:hover {
  border-color: var(--brand-400);
  background-color: var(--brand-100);
  color: var(--brand-800);
}

/* 关注按钮文字（category / rank / user 页复用） */
.follow-text { white-space: nowrap; }

/* 输入框 */
.input-field {
  width: 100%;
  padding: 9px 12px;
  background-color: var(--forum-card);
  border: 1px solid var(--forum-input);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--forum-foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.input-field:focus {
  outline: none;
  border-color: var(--forum-ring);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.input-field::placeholder { color: var(--forum-muted-foreground); }

/* 标签徽章：版块/话题标签统一使用品牌蓝色调 */
.tag-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background-color: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

/* 用户角色徽章：普通用户/版主/管理员 */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.role-badge-user {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

.role-badge-moderator {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.role-badge-admin {
  background-color: var(--brand-600);
  color: var(--neutral-0);
}

/* 头像占位 */
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--brand-100);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

/* ============================================================
   05 Shell 布局：共享 Header / 下拉面板 / 移动端抽屉 / Footer
   ============================================================ */

/* ---- 共享 Header ---- */
/* 高度自适应：主站导航顶部条（forum-topbar，可被 @if 省略） + 论坛导航条（forum-header-inner） */
.forum-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: auto;
  background-color: var(--forum-card);
  border-bottom: 1px solid var(--forum-border);
}

.forum-header.scrolled {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  border-bottom-color: transparent;
}

.forum-header-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* ---- 主站导航顶部条：左上角展示前端 home 菜单，窄屏隐藏 ---- */
.forum-topbar {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--forum-border);
}

.forum-topbar-link {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  white-space: nowrap;
  line-height: 1;
  padding: 4px 2px;
}

.forum-topbar-link:hover { color: var(--forum-primary); }

.forum-topbar-link[data-active="true"] { color: var(--forum-primary); font-weight: var(--font-medium); }

.forum-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--forum-foreground);
  white-space: nowrap;
}

.forum-brand:hover { color: var(--forum-foreground); }

.forum-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background-color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.forum-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.forum-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--neutral-600);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.forum-nav-link:hover {
  color: var(--forum-primary);
  background-color: var(--brand-50);
}

/* 激活态：唯一强调方式 = 品牌色文字（禁止叠加边框/加粗等多重强调） */
.forum-nav-link[data-active="true"] { color: var(--forum-primary); }

.forum-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.forum-search {
  position: relative;
  width: 220px;
  margin: 0;
}

.forum-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--neutral-400);
  pointer-events: none;
}

.forum-search .input-field {
  padding-left: 32px;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.forum-search .input-field:focus { background-color: var(--forum-card); }

.forum-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.forum-icon-btn:hover {
  background-color: var(--neutral-100);
  color: var(--forum-foreground);
}

.forum-icon-btn:focus-visible,
.forum-nav-link:focus-visible,
.forum-avatar-btn:focus-visible {
  outline: 2px solid var(--forum-ring);
  outline-offset: 2px;
}

.forum-badge-dot {
  position: absolute;
  top: 0px;
  right: 0px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background-color: var(--state-error);
  color: #ffffff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-weight: var(--font-medium);
}

.forum-avatar-wrap { position: relative; }

.forum-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: none;
  border-radius: var(--radius-full);
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
}

.forum-avatar-btn:hover { background-color: var(--neutral-100); }

.forum-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
}

/* ---- 下拉面板（通知 / 头像菜单）：浮动层允许 overlay 阴影 ---- */
.forum-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background-color: var(--forum-popover);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 110;
}

.forum-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- 弹窗组件（发起新私信 / 详情页操作共用） ----
   说明：此前仅 forum-legacy.css 定义，shell/auth 布局只加载 forum.css，
   导致弹窗打开后无遮罩无卡片，表现为"UI 没有渲染"。此处按设计令牌重建。 */
.forum-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.forum-modal[hidden] { display: none; }

.forum-modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.45);
}

.forum-modal-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  animation: forum-modal-in 0.18s ease-out;
}

.forum-modal-sm { max-width: 420px; }

.forum-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--forum-border);
}

.forum-modal-header h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
}

.forum-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--forum-muted-foreground);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.forum-modal-close:hover {
  background-color: var(--neutral-100);
  color: var(--forum-foreground);
}

.forum-modal-body {
  padding: var(--space-5);
  overflow-y: auto;
}

.forum-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--forum-border);
  background-color: var(--neutral-25);
}

@keyframes forum-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 弹窗内按钮（与 .btn-* 同体系，专供模态使用） */
.forum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.forum-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.forum-btn-primary {
  background-color: var(--forum-primary);
  color: var(--forum-primary-foreground);
}

.forum-btn-primary:hover { background-color: var(--brand-700); }

.forum-btn-secondary {
  background-color: var(--forum-card);
  border-color: var(--forum-border);
  color: var(--neutral-700);
}

.forum-btn-secondary:hover {
  border-color: var(--brand-300);
  color: var(--forum-primary);
}

.forum-btn-danger {
  background-color: var(--state-error);
  color: #fff;
}

.forum-btn-danger:hover { background-color: #b91c1c; }

/* 弹窗内表单控件（showPrompt / 密码弹窗等） */
.forum-form-input,
.forum-form-textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: var(--text-sm);
  color: var(--neutral-800, #1e293b);
  background: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.forum-form-input:focus,
.forum-form-textarea:focus {
  border-color: var(--forum-primary);
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(37, 99, 235, 0.1));
}

.forum-form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* 账号注销高危确认弹窗 */
.forum-deactivate-warn { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--state-error); margin: 0 0 var(--space-2); }
.forum-deactivate-list {
  margin: 0; padding-left: 18px;
  font-size: var(--text-sm); color: var(--neutral-600);
  display: grid; gap: 6px; line-height: 1.6;
}
.forum-deactivate-list strong { color: var(--state-error); font-weight: var(--font-semibold); }

@media (max-width: 640px) {
  .forum-modal { padding: var(--space-3); }
  .forum-modal-content { max-height: calc(100vh - 32px); }
  .forum-modal-body,
  .forum-modal-footer { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .forum-modal-content { animation: none; }
}

/* ---- 空状态组件（消息中心/排行榜/个人中心/用户主页共用） ----
   说明：此前仅 forum-legacy.css 定义，shell 布局页面空数据区无样式。 */
.forum-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--forum-muted-foreground);
  font-size: var(--text-sm);
}

.forum-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--neutral-100);
  color: var(--neutral-400);
  font-size: 22px;
}

.forum-empty-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
}

/* ---- 加载态（列表分页/楼中楼加载中） ---- */
.forum-loading-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

.forum-loading-text::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid var(--neutral-300);
  border-top-color: var(--forum-primary);
  border-radius: 50%;
  animation: forum-spin 0.6s linear infinite;
}

@keyframes forum-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .forum-loading-text::before { animation: none; }
}

/* ---- 加载更多按钮（消息中心列表分页） ---- */
.msg-load-more {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: 10px;
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  background-color: var(--forum-card);
  color: var(--neutral-600);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.msg-load-more:hover {
  border-color: var(--brand-300);
  background-color: var(--brand-50);
  color: var(--forum-primary);
}

.msg-load-more:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- 前台管理员操作菜单（详情页置顶/加精等） ---- */
.forum-top-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.forum-top-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  background-color: var(--forum-card);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.forum-top-option:hover {
  border-color: var(--brand-300);
  background-color: var(--brand-50);
}

.forum-top-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--brand-50);
  color: var(--forum-primary);
  font-size: 14px;
}

.forum-top-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.forum-top-option-text strong {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
}

.forum-top-option-text em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

.forum-top-option-cancel {
  justify-content: center;
  border-color: transparent;
  color: var(--neutral-500);
}

.forum-top-option-cancel:hover {
  border-color: var(--forum-border);
  background-color: var(--neutral-50);
  color: var(--forum-foreground);
}

/* ---- 弹窗内表单（移动帖子等） ---- */
.form-group { margin-bottom: var(--space-4); }

/* 举报弹窗补充说明多行文本 */
.forum-modal-textarea { width: 100%; }

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
}

.forum-form-select {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  background-color: var(--forum-card);
  color: var(--forum-foreground);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.forum-form-select:focus {
  outline: none;
  border-color: var(--forum-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 点赞计数：等宽数字避免跳动 */
.like-count { font-variant-numeric: tabular-nums; }

.forum-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--forum-border);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
}

.forum-pop-head a { font-size: var(--text-xs); font-weight: var(--font-normal); }

.forum-pop-list { list-style: none; margin: 0; padding: 0; }

.forum-pop-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
  transition: background-color 0.12s ease;
}

.forum-pop-item:last-child { border-bottom: none; }
.forum-pop-item:hover { background-color: var(--neutral-50); }

.forum-pop-item-title {
  font-size: var(--text-sm);
  color: var(--forum-foreground);
  line-height: 1.45;
}

.forum-pop-item-meta {
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  margin-top: 2px;
}

.forum-menu { width: 200px; padding: var(--space-2); }

.forum-menu a,
.forum-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 8px var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--forum-foreground);
  font-family: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.forum-menu a:hover,
.forum-menu button:hover { background-color: var(--neutral-100); }

.forum-menu-divider {
  height: 1px;
  margin: var(--space-2) var(--space-1);
  background-color: var(--forum-border);
}

/* ---- 移动端抽屉（<=1024px 生效） ---- */
.forum-hamburger { display: none; }

.forum-mobile-drawer {
  display: none;
  position: fixed;
  inset: var(--header-height) 0 auto 0;
  bottom: auto;
  background-color: var(--forum-card);
  border-bottom: 1px solid var(--forum-border);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-3) var(--space-4) var(--space-4);
  z-index: 99;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.forum-mobile-drawer.is-open {
  display: block;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.forum-mobile-drawer a {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--forum-foreground);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
}

.forum-mobile-drawer a:hover { background-color: var(--neutral-100); }

.forum-mobile-drawer a[data-active="true"] {
  color: var(--forum-primary);
  background-color: var(--brand-50);
}

@media (max-width: 1024px) {
  .forum-nav,
  .forum-search { display: none; }
  .forum-hamburger { display: inline-flex; }
  .forum-mobile-drawer { display: none; }
  .forum-mobile-drawer.is-open { display: block; }
  /* 窄屏隐藏主站导航顶部条，header 恢复单行高度 */
  .forum-topbar { display: none; }
  :root { --topbar-height: 0px; }
}

/* ---- 共享 Footer ---- */
.forum-footer {
  margin-top: var(--space-12);
  background-color: var(--forum-card);
  border-top: 1px solid var(--forum-border);
}

.forum-footer-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--space-4) var(--space-8);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.forum-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--forum-foreground);
}

.forum-footer-desc {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
  line-height: var(--leading-normal);
  max-width: 320px;
}

.forum-footer-col h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
  margin-bottom: var(--space-4);
}

.forum-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.forum-footer-col a {
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
}

.forum-footer-col a:hover { color: var(--forum-primary); }

.forum-footer-bottom {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-top: 1px solid var(--forum-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .forum-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .forum-footer-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .forum-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   06 三栏社区布局：左版块导航 / 中主内容槽位 / 右运营侧栏
   ============================================================ */

.community-layout {
  max-width: var(--layout-max-width);
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  gap: var(--space-6);
  align-items: start;
}

/* ===== 左栏：版块导航 + 标签云 ===== */
.community-rail {
  position: sticky;
  top: calc(var(--header-height) + var(--topbar-height) + var(--space-6));
  display: grid;
  gap: var(--space-4);
}

.rail-card {
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.rail-card-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--forum-muted-foreground);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.rail-nav { list-style: none; margin: 0; padding: 0; }

.rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--neutral-700);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.rail-link:hover { background-color: var(--neutral-100); color: var(--forum-primary); text-decoration: none; }

.rail-link[data-active="true"] { background-color: var(--brand-50); color: var(--forum-primary); }

.rail-link .rail-count {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  font-variant-numeric: tabular-nums;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.rail-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 9999px;
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.rail-tag:hover { color: var(--forum-primary); background-color: var(--neutral-200); }

/* ===== 右栏：公告 / 热门帖子 / 活动推广 / 广告位 ===== */
.community-side {
  position: sticky;
  top: calc(var(--header-height) + var(--topbar-height) + var(--space-6));
  display: grid;
  gap: var(--space-4);
}

.side-card {
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.side-card-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--forum-foreground); }

.side-card-more { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.side-card-more:hover { color: var(--forum-primary); }

.hot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: hot; }

.hot-item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--forum-foreground);
}

.hot-item::before {
  counter-increment: hot;
  content: counter(hot);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background-color: var(--brand-50);
  color: var(--forum-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-align: center;
  line-height: 18px;
  transform: translateY(2px);
}

.hot-meta { display: block; font-size: var(--text-xs); color: var(--forum-muted-foreground); margin-top: 2px; }

.promo-banner {
  display: block;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #ffffff;
  transition: filter 0.15s ease;
}

.promo-banner:hover { filter: brightness(1.06); text-decoration: none; color: #ffffff; }

.promo-banner:hover strong, .promo-banner:hover span { color: #ffffff; }

.promo-banner strong { display: block; font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: 4px; }

.promo-banner span { font-size: var(--text-xs); opacity: 0.88; line-height: 1.5; display: block; }

.ad-slot {
  border: 1px dashed var(--neutral-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

/* 右栏资料卡：登录态 / 访客态块 */
.side-profile-block { min-width: 0; }

/* 快捷操作链接（创建帖子 / 我的帖子） */
.side-quick-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--space-3);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  background-color: var(--forum-card);
  color: var(--neutral-700);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.side-quick-link:hover {
  border-color: var(--brand-300);
  color: var(--forum-primary);
  background-color: var(--brand-50);
  text-decoration: none;
}

/* 签到连续天数高亮 */
.side-checkin-num { color: var(--forum-primary); font-weight: var(--font-semibold); }

/* 友情链接标签 */
.flink {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.flink:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
  text-decoration: none;
}

/* 右栏资料卡签到按钮：已签态（forum.js 签到成功后追加 is-checked） */
.side-checkin-btn.is-checked,
.side-checkin-btn.is-checked:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  cursor: default;
}

/* ===== 响应式：<=1024px 收起左右两栏 ===== */
@media (max-width: 1024px) {
  .community-layout { grid-template-columns: minmax(0, 1fr); }
  .community-rail,
  .community-side { position: static; }
}

/* ============================================================
   07 首页组件：公告条 / 活动横幅 / 排序Tab / 帖子feed / 推荐关注
   ============================================================ */

.community-main { display: grid; gap: var(--space-4); align-content: start; }

/* 置顶公告条 */
.page-announce {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background-color: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.page-announce-icon { display: inline-flex; flex-shrink: 0; color: var(--brand-600); }

.page-announce-text { flex: 1; min-width: 0; color: var(--brand-800); }

.page-announce-link { flex-shrink: 0; font-weight: var(--font-medium); color: var(--brand-600); white-space: nowrap; }

.page-announce-link:hover { color: var(--brand-700); }

/* 公告标题可点击（首页横幅 → 公告详情） */
.page-announce-title-link { color: inherit; font-weight: var(--font-semibold); text-decoration: none; }
.page-announce-title-link:hover { color: var(--brand-600); text-decoration: underline; }

/* 全部公告列表页 */
.announce-list { list-style: none; margin: 0; padding: 0; }
.announce-item { border-bottom: 1px solid var(--forum-border); }
.announce-item:last-child { border-bottom: none; }
.announce-item-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-2); color: inherit; text-decoration: none;
}
.announce-item-link:hover .announce-item-title { color: var(--forum-primary); }
.announce-item-title { font-weight: var(--font-medium); color: var(--neutral-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-item-time { flex-shrink: 0; font-size: var(--text-xs); color: var(--neutral-500); }

/* 公告详情页 */
.announcement-detail { padding: var(--space-6); }
.announcement-detail-head { border-bottom: 1px solid var(--forum-border); padding-bottom: var(--space-4); margin-bottom: var(--space-5); }
.announcement-detail-title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--neutral-900); line-height: 1.35; }
.announcement-detail-meta { margin: 0; display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--neutral-500); }
.announcement-detail-body { color: var(--neutral-700); line-height: 1.75; }
.announcement-detail-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--forum-border); display: flex; justify-content: flex-end; }

/* 活动推广横幅 */
.page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5) var(--space-5);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: var(--neutral-0);
}

.page-hero-body { min-width: 240px; }

.page-hero-title { font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--neutral-0); letter-spacing: -0.01em; }

.page-hero-sub {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--neutral-0);
  opacity: 0.9;
  line-height: var(--leading-normal);
  max-width: 460px;
}

.page-hero-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--space-5);
  border: 1px solid var(--neutral-0);
  border-radius: var(--radius-md);
  color: var(--neutral-0);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-hero-btn:hover { background-color: var(--neutral-0); color: var(--brand-700); }

.page-hero-dots { display: flex; gap: 6px; width: 100%; }

.page-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background-color: var(--neutral-0); opacity: 0.45; }

.page-dot[data-current="true"] { opacity: 1; }

/* 列表页头（发现页/版块页）：标题 + 描述 + 统计与操作 */
.page-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5);
}

.page-list-head-body { min-width: 240px; }

.page-list-head-title { font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--forum-foreground); letter-spacing: -0.01em; }

.page-list-head-desc { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--forum-muted-foreground); line-height: var(--leading-normal); max-width: 520px; }

.page-list-head-stats { display: flex; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--forum-muted-foreground); font-variant-numeric: tabular-nums; }
/* 统计与版主同行：统计居左，版主列表靠右 */
.page-list-head-stats-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
/* 版块页头版主列表 */
.page-list-head-moderators { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-xs); }
.page-moderators-label { color: var(--forum-muted-foreground); }
.page-moderator-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: var(--radius-full); background-color: var(--neutral-100); color: var(--neutral-700); text-decoration: none; }
.page-moderator-item:hover { background-color: var(--brand-50); color: var(--brand-700); }
.page-moderator-item img, .page-moderator-item > span:first-child { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background-color: var(--brand-100, #dbeafe); color: var(--brand-700); font-size: 10px; font-weight: var(--font-semibold); }

.page-list-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 列表筛选行（子版块/分类） */
.page-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-1); }

.page-filter-label { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.tag-badge[data-active="true"] { background-color: var(--forum-primary); color: var(--forum-primary-foreground); }

/* 排序选项卡行 */
.page-feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-1);
  border-bottom: 1px solid var(--forum-border);
}

.page-tabs { display: flex; gap: var(--space-5); }

.page-tab {
  position: relative;
  appearance: none;
  background: none;
  border: none;
  padding: 10px 2px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--neutral-500);
  cursor: pointer;
  transition: color 0.15s ease;
}

.page-tab:hover { color: var(--forum-primary); }

.page-tab[data-active="true"] { color: var(--forum-primary); font-weight: var(--font-semibold); }

.page-tab[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--forum-primary);
}

.page-feed-count { font-size: var(--text-xs); color: var(--forum-muted-foreground); font-variant-numeric: tabular-nums; }

/* 帖子 feed 流（两行紧凑列表行，参考设计稿图1） */
.page-feed-list {
  display: flex;
  flex-direction: column;
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 帖子列表行：flex 三栏 — 头像 + 主内容（标题行 + meta行） + 右侧数字 */
.page-post-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--forum-border);
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: background-color 0.12s ease;
}

.page-post-card:last-child { border-bottom: none; }
.page-post-card:hover { background-color: var(--neutral-50); }

/* 左侧头像区（44x44 方形圆角，色卡+首字母） */
.ppc-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
}

.ppc-avatar-img { width: 100%; height: 100%; object-fit: cover; }

.ppc-avatar-placeholder {
  font-size: 18px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

/* 中间主内容区：两行 */
.ppc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 第一行：状态徽章 + 标题 */
.ppc-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ppc-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppc-title a { color: var(--forum-foreground); }
.ppc-title a:hover { color: var(--forum-primary); }

/* 状态徽章 */
.ppc-badge {
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: var(--font-medium);
  border-radius: 3px;
  line-height: 1.5;
}

.ppc-badge-top { background-color: #fef3c7; color: #92400e; }
.ppc-badge-essence { background-color: #fce7f3; color: #9d174d; }
.ppc-badge-pending { background-color: #e0e7ff; color: #3730a3; }
.ppc-badge-hidden { background-color: #f3f4f6; color: #6b7280; }
.ppc-badge-mod { background-color: #dcfce7; color: #166534; }
.ppc-badge-reward { background-color: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
.ppc-badge-redpacket { background-color: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; font-weight: 700; }

/* 第二行 meta：灰色版块标签 · 作者 · 时间 · 最后回复 */
.ppc-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 灰色版块标签（小方角色块，浅灰底深灰字） */
.ppc-cat-tag {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--neutral-600);
  background-color: var(--neutral-100);
  border-radius: 3px;
  line-height: 1.6;
}

.ppc-meta-author {
  color: var(--forum-foreground);
  font-weight: var(--font-medium);
}
.ppc-meta-author:hover { color: var(--forum-primary); }

.ppc-meta-sep { color: var(--neutral-300); }
.ppc-meta-reply-label { color: var(--neutral-500); }
.ppc-meta-reply-user { color: var(--forum-foreground); }
.ppc-meta-reply-user:hover { color: var(--forum-primary); }

/* 右侧大数字区（回复数为主，查看数小） */
.ppc-stats {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}

.ppc-reply-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--forum-foreground);
}

.ppc-view-num {
  font-size: 11px;
  color: var(--neutral-400);
  margin-top: 2px;
}

/* 兼容旧类：rank.blade.php 等页面仍在使用 */
.page-avatar-sm { width: 24px; height: 24px; font-size: var(--text-xs); }
.page-avatar-img { width: 24px; height: 24px; border-radius: var(--radius-full); object-fit: cover; }

/* 推荐关注卡 */
.page-follow-card { padding: var(--space-4); }

.page-follow-title { font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: var(--space-3); }

.page-follow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.page-follow-item { display: flex; align-items: center; gap: var(--space-3); }

.page-follow-item .avatar-circle { width: 36px; height: 36px; font-size: var(--text-sm); }

.page-follow-info { flex: 1; min-width: 0; }

.page-follow-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--forum-foreground); }

.page-follow-bio {
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-follow-btn { flex-shrink: 0; padding: 5px 14px; font-size: var(--text-xs); }

.page-follow-btn.is-followed,
.page-follow-btn.is-followed:hover,
.page-follow-btn.active,
.page-follow-btn.active:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-200);
  color: var(--forum-muted-foreground);
}

.page-follow-more { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.page-follow-more:hover { color: var(--forum-primary); }

/* 分页器（Laravel paginator 视图 pagination/default.blade.php 使用，风格取自设计稿 pl-pagination） */
.forum-paginator {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.forum-paginator .page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--space-2);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  background-color: var(--forum-card);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.forum-paginator a.page-item:hover { border-color: var(--forum-primary); color: var(--forum-primary); }

.forum-paginator .page-item.active {
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
  color: #ffffff;
  cursor: default;
}

.forum-paginator .page-item.disabled { opacity: 0.45; cursor: not-allowed; }

.forum-paginator .page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
}

/* ============================================================
   08 认证布局：左品牌叙事 / 右表单槽位 + 表单组件
   ============================================================ */

.auth-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: calc(100vh - var(--header-height));
}

/* ===== 左侧品牌叙事面板 ===== */
.auth-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 56px clamp(40px, 6vw, 88px);
  background: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  color: var(--neutral-0);
}

.auth-brand-panel::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
}

.auth-brand-quote { position: relative; z-index: 1; }

.auth-brand-quote h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--neutral-0);
}

.auth-brand-quote p { margin: 0; font-size: 14px; opacity: 0.85; line-height: 1.7; }

.auth-value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.auth-value-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; opacity: 0.94; }

.auth-value-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--brand-200);
  margin-top: 8px;
}

.auth-stats { display: flex; gap: 36px; position: relative; z-index: 1; }

.auth-stat-num { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.auth-stat-label { font-size: 12px; opacity: 0.78; margin-top: 2px; }

/* ===== 右侧表单列 ===== */
.auth-form-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.back-index {
  position: absolute;
  top: 22px;
  left: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.15s ease;
}

.back-index:hover { color: var(--brand-600); }

.auth-form-card {
  width: 100%;
  max-width: 400px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
  padding: 34px 32px 28px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--neutral-400);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--neutral-100); }

.auth-social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.auth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 0;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  font-size: 13px;
  font-family: inherit;
  color: var(--neutral-700);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.auth-social-btn:hover { border-color: var(--brand-300); color: var(--brand-600); }

.auth-agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--neutral-500);
  cursor: pointer;
}

.auth-agreement input { margin-top: 3px; accent-color: var(--brand-600); }

.auth-agreement a { color: var(--brand-600); text-decoration: none; }

/* ===== 认证表单组件 ===== */
.auth-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }

.auth-form-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--forum-foreground); line-height: 1.25; }

.auth-form-sub { margin: 6px 0 0; font-size: var(--text-sm); color: var(--forum-muted-foreground); line-height: 1.5; }

.auth-field { display: grid; gap: 6px; }

.auth-field label { font-size: var(--text-sm); font-weight: 500; color: var(--neutral-700); }

.auth-field input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--forum-foreground);
  font-family: inherit;
  background: var(--neutral-0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--forum-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.auth-field-hint { margin: 0; font-size: 12px; color: var(--forum-muted-foreground); }

.auth-pwd-wrap { position: relative; }

.auth-pwd-wrap input { padding-right: 40px; }

.auth-pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background-color 0.12s ease;
}

.auth-pwd-toggle:hover { color: var(--forum-primary); background: var(--neutral-50); }

.auth-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.auth-remember { display: inline-flex; align-items: center; gap: 6px; color: var(--neutral-600); cursor: pointer; }

.auth-remember input { accent-color: var(--brand-600); margin: 0; }

.auth-forgot { color: var(--forum-primary); text-decoration: none; font-weight: 500; }

.auth-forgot:hover { text-decoration: underline; }

.auth-submit {
  width: 100%;
  height: 44px;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.auth-switch-line {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

.auth-switch-line a { color: var(--forum-primary); font-weight: 500; text-decoration: none; }

.auth-switch-line a:hover { text-decoration: underline; }

/* ===== 响应式：窄屏隐藏品牌面板 ===== */
@media (max-width: 1024px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-col { padding: 40px 20px; }
}

/* ============================================================
   09 移动端底部导航（<=640px 显示）
   ============================================================ */

.mobile-tab-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--forum-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-tab-bar-inner { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 480px; margin: 0 auto; }

.mobile-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: var(--neutral-500);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  min-height: 52px;
  transition: color 0.15s ease;
}

.mobile-tab-item svg { width: 22px; height: 22px; stroke-width: 1.8; }

.mobile-tab-item[data-active="true"] { color: var(--forum-primary); }

.mobile-tab-item[data-active="true"] svg { stroke-width: 2.2; }

/* ============================================================
   10 全站细节优化与移动端增强
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }

a, button, input, select, textarea { transition-duration: 0.18s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.btn-primary:active,
.btn-secondary:active,
.auth-social-btn:active,
.auth-submit:active { transform: scale(0.97); }

.card-hover { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }

@supports (padding: max(0px)) {
  .forum-header { padding-top: max(0px, env(safe-area-inset-top)); }
}

@media (max-width: 480px) {
  .forum-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .forum-footer-brand-col { grid-column: 1 / -1; }
  .btn-primary, .btn-secondary { padding-inline: var(--space-4); font-size: var(--text-sm); }
}

@media (max-width: 640px) {
  .mobile-tab-bar { display: block; }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0)); }
  .forum-footer-bottom { padding-bottom: calc(var(--space-6) + 52px + env(safe-area-inset-bottom, 0)); }
  .page-hero h1 { font-size: 22px; }
  .page-hero p { font-size: var(--text-sm); }
}

@media (min-width: 1025px) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--neutral-300); }
}

::selection { background-color: var(--brand-100); color: var(--brand-800); }

/* ============================================================
   11 EasyMDE 编辑器适配（新主题变量）
   ============================================================ */

.EasyMDEContainer { margin-bottom: var(--space-4); }

.EasyMDEContainer .editor-toolbar {
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--neutral-50);
}

.EasyMDEContainer .editor-toolbar a { color: var(--neutral-500); }

.EasyMDEContainer .editor-toolbar a:hover,
.EasyMDEContainer .editor-toolbar a.active {
  background: var(--neutral-100);
  border-color: var(--forum-border);
  color: var(--forum-foreground);
}

.EasyMDEContainer .CodeMirror {
  border: 1px solid var(--forum-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.6;
  font-family: var(--font-sans);
  color: var(--forum-foreground);
}

.EasyMDEContainer .CodeMirror-focused {
  border-color: var(--forum-ring);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.EasyMDEContainer .editor-preview {
  padding: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--forum-foreground);
}

.EasyMDEContainer .editor-preview pre {
  background: var(--neutral-800);
  color: var(--neutral-200);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.EasyMDEContainer .editor-preview code {
  padding: 2px 6px;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.EasyMDEContainer .editor-preview pre code {
  padding: 0;
  background: transparent;
}

.EasyMDEContainer .editor-preview blockquote {
  border-left: 3px solid var(--forum-primary);
  padding: var(--space-2) var(--space-4);
  background: var(--neutral-50);
  color: var(--neutral-500);
  margin: var(--space-2) 0;
}

.EasyMDEContainer .editor-preview table { border-collapse: collapse; width: 100%; }

.EasyMDEContainer .editor-preview th,
.EasyMDEContainer .editor-preview td {
  border: 1px solid var(--forum-border);
  padding: var(--space-2) var(--space-3);
}

.EasyMDEContainer .editor-preview th {
  background: var(--neutral-50);
  font-weight: var(--font-semibold);
}

/* 回复区编辑器缩小 */
.forum-reply-form .EasyMDEContainer .CodeMirror { min-height: 100px; }

/* 可视化分屏预览（side-by-side）：预览侧栏边框与编辑区圆角贴合论坛主题 */
.EasyMDEContainer .editor-preview-side { border-color: var(--forum-border); }
.EasyMDEContainer .CodeMirror-sided { border-bottom-right-radius: 0; }

/* 编辑器图片串行上传遮罩：上传进行中覆盖编辑器，提示当前进度并防止误操作/误提交 */
.forum-editor-upload-wrap { position: relative; }
.forum-editor-upload-mask {
    position: absolute; inset: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: rgba(255, 255, 255, .72);
    border-radius: inherit;
    font-size: 14px; color: #444;
}
.forum-editor-upload-spinner {
    width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid #e5e7eb; border-top-color: var(--forum-primary, #4a6cf7);
    animation: forum-spin .8s linear infinite;
}
@keyframes forum-spin { to { transform: rotate(360deg); } }

/* 子回复编辑器 */
.forum-sub-reply-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  border: 1px solid var(--forum-input);
  border-radius: var(--radius-md);
  resize: vertical;
  font-family: inherit;
  color: var(--forum-foreground);
  background: var(--forum-card);
  box-sizing: border-box;
}

.forum-sub-reply-textarea:focus {
  outline: none;
  border-color: var(--forum-ring);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ============================================================
   11.1 附件上传（发帖/回帖编辑场景 + 详情页展示）
   ============================================================ */

/* 附件操作行：上传按钮 + 数量提示 */
.forum-attachment-section { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.forum-attachment-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* 发布回复按钮：推至附件栏最右侧 */
.forum-attachment-submit { margin-left: auto; }

/* 回帖编辑器容器：字数统计绝对定位在富文本编辑区右下角 */
.reply-editor-wrap { position: relative; margin-bottom: var(--space-4); }
/* 帖子页回复区：附件栏向上贴近编辑器 */
.reply-editor-wrap + .forum-attachment-section { margin-top: -30px; }
.reply-editor-count {
  position: absolute; right: 14px; bottom: 10px; z-index: 5;
  pointer-events: none;
  background: color-mix(in srgb, var(--forum-card) 88%, transparent);
  padding: 2px 10px; border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px var(--forum-border);
}
.forum-attachment-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-md);
  border: 1px dashed var(--neutral-300); background: var(--forum-card);
  color: var(--neutral-600); font-size: var(--text-sm); font-family: inherit;
  cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.forum-attachment-btn:hover { border-color: var(--forum-primary); color: var(--forum-primary); background: var(--brand-50); }
.forum-attachment-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.forum-attachment-btn svg { width: 14px; height: 14px; }
.forum-attachment-hint { font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.forum-attachment-count { font-size: var(--text-xs); color: var(--forum-muted-foreground); font-variant-numeric: tabular-nums; }

/* 附件列表 */
.forum-attachment-list { display: grid; gap: var(--space-2); }
.forum-attachment-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 12px; border: 1px solid var(--forum-border);
  border-radius: var(--radius-md); background: var(--neutral-50);
  font-size: var(--text-sm);
}
.forum-attachment-icon { width: 16px; height: 16px; color: var(--forum-primary); flex-shrink: 0; }
.forum-attachment-name { color: var(--forum-foreground); font-weight: var(--font-medium); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-attachment-name:hover { color: var(--forum-primary); text-decoration: underline; }
.forum-attachment-size { color: var(--forum-muted-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.forum-attachment-remove {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--neutral-300); background: var(--forum-card);
  color: var(--neutral-500); font-size: var(--text-xs); font-family: inherit;
  cursor: pointer; line-height: 1.4;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.forum-attachment-remove svg { width: 12px; height: 12px; }
.forum-attachment-remove:hover { border-color: var(--state-error); color: var(--state-error); background: #fef2f2; }
.forum-attachment-remove.is-uploading-remove { border-style: dashed; }
.forum-attachment-insert {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--neutral-300); background: var(--forum-card);
  color: var(--forum-primary); font-size: var(--text-xs); font-family: inherit;
  cursor: pointer; line-height: 1.4;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.forum-attachment-insert svg { width: 12px; height: 12px; }
.forum-attachment-insert:hover { border-color: var(--forum-primary); background: var(--brand-50); }

/* 上传中状态 */
.forum-attachment-item.is-uploading { opacity: 0.6; }
.forum-attachment-item.is-uploading .forum-attachment-name { color: var(--forum-muted-foreground); }
.forum-attachment-spinner {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid var(--neutral-200); border-top-color: var(--forum-primary);
  border-radius: 50%; animation: forumAttSpin 0.8s linear infinite;
}
@keyframes forumAttSpin { to { transform: rotate(360deg); } }

/* 详情页附件展示区（帖子正文下方/回复内容下方） */
.forum-attachments { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.forum-attachments-title { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--forum-muted-foreground); letter-spacing: 0.04em; }

/* ============================================================
   12 代码高亮（highlight.js github 主题微调）
   ============================================================ */

.markdown-body pre,
.forum-content pre {
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.markdown-body pre code,
.forum-content pre code { background: transparent; }

/* ============================================================
   13 消息中心：类型页签 / 消息列表 / 私信会话 / 私信对话视图
   ============================================================ */

/* ---- 消息类型页签 ---- */
.msg-tab {
  position: relative;
  white-space: nowrap;
  padding: 13px var(--space-3);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-500);
  cursor: pointer;
}

.msg-tab:first-child { margin-left: var(--space-3); }

.msg-tab:hover { color: var(--forum-foreground); }

.msg-tab-underline {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--forum-primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.msg-tab[aria-selected="true"] { color: var(--forum-primary); }

.msg-tab[aria-selected="true"] .msg-tab-underline { opacity: 1; }

.msg-tab-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: var(--radius-full);
  background-color: var(--state-error);
  color: #ffffff;
  font-size: 11px;
  line-height: 16px;
  display: inline-block;
  font-weight: var(--font-medium);
}

.msg-panel[hidden] { display: none; }

/* ---- 消息列表项 ---- */
.msg-list { list-style: none; margin: 0; padding: 0; }

.msg-item {
  display: flex;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--forum-border);
  cursor: pointer;
  transition: background-color 0.12s ease;
  position: relative;
}

.msg-item:hover { background-color: var(--neutral-50); }

.msg-item:last-child { border-bottom: none; }

.msg-item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msg-item-icon--reply { background-color: var(--brand-50); color: var(--brand-600); }
.msg-item-icon--mention { background-color: #fef3c7; color: #d97706; }
.msg-item-icon--like { background-color: #fce7f3; color: #db2777; }
.msg-item-icon--system { background-color: var(--neutral-100); color: var(--neutral-500); }

.msg-item-icon svg { width: 18px; height: 18px; stroke-width: 2; }

.msg-item-body { min-width: 0; flex: 1; }

.msg-item-title {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--forum-foreground);
}

.msg-item-title a { color: var(--brand-600); font-weight: 600; text-decoration: none; }

.msg-item-title a:hover { text-decoration: underline; }

.msg-item-desc {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  line-height: 1.6;
}

.msg-item-time {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

.msg-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background-color: var(--state-error);
}

.msg-item-dot.is-read { background-color: transparent; }

/* ---- 私信会话列表 ---- */
.pm-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--forum-border);
}

.pm-item {
  display: flex;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--forum-border);
  align-items: center;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.pm-item:hover { background-color: var(--neutral-50); }

.pm-item-body { min-width: 0; flex: 1; }

.pm-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.pm-item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--forum-foreground);
  text-decoration: none;
}

.pm-item-time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

.pm-item-preview {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pm-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--state-error);
}

/* ============================================================
   17 @ 提及下拉组件（ForumMention）
   ============================================================ */
.forum-mention-dropdown {
  position: absolute;
  z-index: 9999;
  min-width: 200px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 14px;
}

.forum-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.forum-mention-item:hover,
.forum-mention-item.active {
  background-color: #eff6ff;
}

.forum-mention-item.active {
  background-color: #dbeafe;
}

.forum-mention-icon {
  width: 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.forum-mention-name {
  flex: 1;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-mention-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  color: #8b5cf6;
  background-color: #f3e8ff;
}

.forum-mention-empty {
  padding: 12px 14px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}

/* ---- 私信对话视图 ---- */
.msg-chat-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height) - 200px);
  min-height: 400px;
}

/* display:flex 会覆盖 hidden 属性的 UA display:none，必须显式兜底，否则未点开会话时对话框直接可见 */
.msg-chat-view[hidden] { display: none; }

.msg-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--forum-border);
  background: var(--forum-card);
}

.msg-chat-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.msg-chat-back:hover { background: var(--neutral-100); color: var(--forum-foreground); }

.msg-chat-user { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }

.msg-chat-avatar { width: 36px; height: 36px; font-size: var(--text-sm); }

.msg-chat-name { font-size: var(--text-base); font-weight: 600; color: var(--forum-foreground); }

.msg-chat-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  margin-top: 2px;
}

.msg-chat-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--state-success); }

.msg-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--neutral-50);
}

.msg-chat-date {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  padding: var(--space-2) 0;
}

.msg-chat-bubble { display: flex; gap: var(--space-2); max-width: 75%; }

.msg-chat-bubble--them { align-self: flex-start; }

.msg-chat-bubble--me { align-self: flex-end; flex-direction: row-reverse; }

.msg-chat-bubble-avatar { width: 28px; height: 28px; font-size: var(--text-xs); flex-shrink: 0; margin-top: 2px; }

.msg-chat-bubble-body { display: flex; flex-direction: column; gap: 4px; }

.msg-chat-bubble--me .msg-chat-bubble-body { align-items: flex-end; }

.msg-chat-bubble-text {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 100%;
  word-break: break-word;
}

.msg-chat-bubble--them .msg-chat-bubble-text {
  background: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-top-left-radius: 4px;
  color: var(--forum-foreground);
}

.msg-chat-bubble--me .msg-chat-bubble-text {
  background: var(--forum-primary);
  color: var(--forum-primary-foreground);
  border-top-right-radius: 4px;
}

.msg-chat-bubble-time { font-size: 11px; color: var(--forum-muted-foreground); padding: 0 4px; }

.msg-chat-input {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--forum-border);
  background: var(--forum-card);
}

.msg-chat-textarea {
  flex: 1;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--forum-input);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--forum-foreground);
  background: var(--neutral-0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  max-height: 120px;
  line-height: 1.5;
}

.msg-chat-textarea:focus {
  outline: none;
  border-color: var(--forum-ring);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.msg-chat-emoji {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.msg-chat-emoji:hover {
  background: var(--neutral-100);
}

/* 表情选择面板（ForumEmoji 组件，与 CmsproComment 表情选择一致） */
.forum-emoji-panel {
  display: none;
  position: absolute;
  z-index: 9999;
  width: 340px;
  background: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.forum-emoji-tabs {
  display: flex;
  border-bottom: 1px solid var(--forum-border);
  background: var(--neutral-50);
  padding: 0 4px;
}

.forum-emoji-tab {
  padding: 8px 12px;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}

.forum-emoji-tab:hover {
  color: var(--forum-foreground);
}

.forum-emoji-tab.active {
  color: var(--forum-primary);
  border-bottom-color: var(--forum-primary);
  font-weight: 500;
}

.forum-emoji-content {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.forum-emoji-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}

.forum-emoji-item:hover {
  background: var(--neutral-100);
  transform: scale(1.2);
}

.forum-emoji-trigger {
  cursor: pointer;
}

.msg-chat-send {
  padding: 9px 16px;
  gap: 6px;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ============================================================
   14 设置页：页头 / 分区表单 / 横向分类Tab / 开关 / 黑名单 / 账号安全
   ============================================================ */

/* ---- 页头 ---- */
.settings-page-header { margin-bottom: var(--space-5); }

.settings-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--forum-foreground);
  line-height: var(--leading-tight);
}

.settings-page-subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
}

/* ---- 分区表单 ---- */
.settings-layout { min-width: 0; }

.settings-form-wrap { min-width: 0; }

.settings-form {
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.settings-section {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--forum-border);
  scroll-margin-top: calc(var(--header-height) + var(--topbar-height) + var(--space-4));
}

.settings-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.settings-section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
  margin-bottom: var(--space-4);
}

.settings-section.is-hidden { display: none; }

/* ---- 表单行布局 ---- */
.form-row { display: flex; gap: var(--space-5); margin-bottom: var(--space-4); }

/* display:flex/grid 会覆盖 UA 对 [hidden] 的 display:none，须显式补回（水印联动行依赖 hidden 显隐） */
.form-row[hidden] { display: none; }

.form-row:last-child { margin-bottom: 0; }

.form-label {
  flex-shrink: 0;
  width: 100px;
  padding-top: 9px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-700);
  text-align: right;
}

.form-required { color: var(--state-error); margin-left: 2px; }

.form-control { flex: 1; min-width: 0; }

.form-hint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.form-textarea { resize: vertical; min-height: 72px; line-height: var(--leading-normal); }

/* ---- 头像设置 ---- */
.avatar-setting-row { display: flex; align-items: center; gap: var(--space-5); }

.avatar-current {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background-color: var(--brand-100);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

.avatar-actions { display: flex; flex-direction: column; gap: var(--space-2); }

.avatar-hint { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* ---- 单选组 ---- */
.radio-group { display: flex; gap: var(--space-6); flex-wrap: wrap; }

.radio-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--forum-foreground);
}

.radio-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.radio-custom {
  width: 16px;
  height: 16px;
  border: 2px solid var(--neutral-300);
  border-radius: var(--radius-full);
  position: relative;
  transition: border-color 0.15s ease;
}

.radio-item input[type="radio"]:checked + .radio-custom { border-color: var(--forum-primary); }

.radio-item input[type="radio"]:checked + .radio-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--forum-primary);
}

.radio-label { user-select: none; }

/* ---- 地区选择 / 标签选择 ---- */
.date-picker-wrap { max-width: 200px; }

.region-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 400px;
}

.region-province,
.region-city { min-width: 0; }

.tag-selector { display: flex; flex-direction: column; gap: var(--space-3); }

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-2);
  background-color: var(--neutral-50);
  border: 1px dashed var(--neutral-200);
  border-radius: var(--radius-md);
}

.tag-selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background-color: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.tag-remove {
  border: none;
  background: none;
  color: var(--brand-500);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease;
}

.tag-remove:hover { background-color: var(--brand-100); color: var(--brand-700); }

.available-tags { display: flex; flex-direction: column; gap: var(--space-2); }

.available-tags-label {
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  margin-bottom: var(--space-2);
}

.available-tags-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag-available {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tag-available:hover { background-color: var(--brand-50); color: var(--brand-700); }

/* ---- 表单操作区 ---- */
.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--forum-border);
}

/* ---- Tips 提示卡 ---- */
.tips-card {
  background: linear-gradient(135deg, var(--brand-50), var(--neutral-0));
  border-color: var(--brand-100);
}

.tips-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--brand-100);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.tips-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
  margin-bottom: var(--space-2);
}

.tips-desc {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.tips-progress-track {
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--neutral-200);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.tips-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--brand-500);
  transition: width 0.3s ease;
}

.tips-progress-text {
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  font-weight: var(--font-medium);
}

/* ---- 账号安全评分 ---- */
.security-score-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--state-warning-bg);
  color: var(--state-warning);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.security-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--forum-border);
}

.security-score-circle { position: relative; width: 64px; height: 64px; flex-shrink: 0; }

.security-score-circle svg { width: 100%; height: 100%; }

.security-score-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--forum-foreground);
}

.security-score-desc { flex: 1; min-width: 0; }

.security-score-desc p { font-size: var(--text-sm); color: var(--neutral-700); }

.security-score-tip { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.security-value { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin-right: var(--space-4); }

.security-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.security-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }

.security-item-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-item.is-ok .security-item-icon { background-color: var(--state-success-bg); color: var(--state-success); }

.security-item.is-warn .security-item-icon { background-color: var(--state-warning-bg); color: var(--state-warning); }

.security-item-label { flex: 1; color: var(--neutral-700); }

.security-item-status { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.security-item.is-ok .security-item-status { color: var(--state-success); }

.security-item.is-warn .security-item-status { color: var(--state-warning); }

/* ---- 开关行 ---- */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--forum-border);
}

.switch-row:last-child { border-bottom: none; }

.switch-label { font-size: var(--text-sm); color: var(--forum-foreground); }

.switch-control { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }

.switch-control input { opacity: 0; width: 0; height: 0; position: absolute; }

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--neutral-200);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.switch-control input:checked + .switch-slider { background: var(--forum-primary); }

.switch-control input:checked + .switch-slider::before { transform: translateX(18px); }

/* ---- 黑名单 ---- */
.avatar-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--brand-100);
  color: var(--brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

.blacklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--forum-border);
}

.blacklist-item:last-child { border-bottom: none; }

.blacklist-name { font-size: var(--text-sm); color: var(--forum-foreground); }

.blacklist-since {
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  margin-left: auto;
  margin-right: var(--space-3);
}

.settings-btn-danger {
  padding: 8px 20px;
  border-radius: var(--radius-md);
  background: var(--state-error);
  color: #ffffff;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.settings-btn-danger:hover { opacity: 0.88; }

/* ---- 设置分类横向 Tab ---- */
.settings-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar { display: none; }

.settings-tab {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--neutral-600);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.settings-tab svg { flex-shrink: 0; }

.settings-tab:hover { color: var(--forum-foreground); background-color: var(--neutral-50); }

.settings-tab:focus-visible {
  outline: 2px solid var(--forum-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.settings-tab.is-active {
  color: var(--forum-primary);
  font-weight: var(--font-medium);
  border-bottom-color: var(--forum-primary);
}

.settings-tab.is-danger { color: var(--state-error); }

.settings-tab.is-danger:hover { background-color: var(--state-error-bg); }

.settings-tab.is-danger.is-active { border-bottom-color: var(--state-error); }

/* 分类 Tab 与表单卡拼接时去掉上方圆角 */
.settings-form { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ---- 分区头部（标题 + 描述） ---- */
.settings-section-head { margin-bottom: var(--space-4); }

.settings-section-head .settings-section-title { margin-bottom: 0; }

.settings-section-desc {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  line-height: 1.5;
}

/* ---- 安全区行布局 ---- */
.settings-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--forum-border);
}

.settings-security-row:last-child { border-bottom: none; }

.settings-security-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.settings-security-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); }

.settings-security-status { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* ---- 开关行内容（标签 + 描述） ---- */
.settings-switch-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.settings-switch-desc { font-size: var(--text-xs); color: var(--forum-muted-foreground); line-height: 1.5; }

/* ---- 隐私单选组 ---- */
.privacy-radio-group { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }

.privacy-radio-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  cursor: pointer;
}

.privacy-radio-label { user-select: none; }

/* ---- 黑名单输入行 ---- */
.settings-blacklist-input {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  max-width: 360px;
}

/* ---- 注销危险区域 ---- */
.settings-danger-zone {
  padding: var(--space-4);
  border: 1px solid var(--state-error-bg);
  border-radius: var(--radius-md);
  background-color: var(--state-error-bg);
}

.settings-danger-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }

.settings-danger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--state-error);
  color: #ffffff;
  flex-shrink: 0;
}

.settings-danger-header .settings-section-title { margin-bottom: 0; }

.settings-danger-desc {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

/* ============================================================
   隐藏内容模块（详情页折叠面板 + 编辑器配置面板）
   ============================================================ */

/* -- 详情页隐藏内容面板：与普通内容视觉区分（边框 + 背景色） -- */
.forum-hidden-panel {
  margin: var(--space-4) 0;
  border: 1px dashed var(--forum-primary, #4a6cf7);
  border-radius: 10px;
  background: var(--forum-primary-bg, rgba(74, 108, 247, 0.05));
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.forum-hidden-panel.is-unlocked {
  border-style: solid;
  background: var(--forum-surface, #fff);
}

.forum-hidden-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  color: var(--forum-primary, #4a6cf7);
  font-weight: var(--font-medium, 500);
}

.forum-hidden-panel.is-unlocked .forum-hidden-head { color: var(--text-primary, #1f2937); }

.forum-hidden-icon { display: inline-flex; flex-shrink: 0; }

.forum-hidden-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-hidden-toggle { font-size: var(--text-xs, 12px); color: var(--text-tertiary, #9ca3af); flex-shrink: 0; }

.forum-hidden-body { display: none; padding: 0 var(--space-4) var(--space-4); }
.forum-hidden-panel.is-open .forum-hidden-body { display: block; }

/* -- 锁定状态类型化引导信息 -- */
.forum-hidden-lockinfo { margin-top: var(--space-2); }

.forum-hidden-meta {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs, 12px);
  color: var(--text-secondary, #6b7280);
}

/* 指定用户名单标签 */
.forum-hidden-lockusers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-1);
}

.forum-hidden-lockuser {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--forum-primary-bg, rgba(74, 108, 247, 0.08));
  color: var(--forum-primary, #4a6cf7);
  font-size: var(--text-xs, 12px);
  line-height: 1.6;
}

/* 付费支付记录列表 */
.forum-hidden-buyers {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  border-top: 1px dashed var(--forum-border, #e5e7eb);
}

.forum-hidden-buyers li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-xs, 12px);
  border-bottom: 1px dashed var(--forum-border, #e5e7eb);
}

.forum-hidden-buyer-name {
  color: var(--text-primary, #1f2937);
  font-weight: var(--font-medium, 500);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-hidden-buyer-amt {
  color: var(--forum-warning, #f59e0b);
}

.forum-hidden-buyer-time {
  margin-left: auto;
  color: var(--text-tertiary, #9ca3af);
}

.forum-hidden-content { animation: forumHiddenFadeIn 0.25s ease; }

.forum-hidden-content > *:first-child { margin-top: 0; }
.forum-hidden-content > *:last-child { margin-bottom: 0; }

@keyframes forumHiddenFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 未解锁引导区 */
.forum-hidden-guide { text-align: center; padding: var(--space-2) 0; }

.forum-hidden-tip {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary, #6b7280);
  font-size: var(--text-sm, 14px);
}

.forum-hidden-action { display: flex; justify-content: center; }

.forum-hidden-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--forum-primary, #4a6cf7);
  border-radius: 8px;
  background: transparent;
  color: var(--forum-primary, #4a6cf7);
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.forum-hidden-btn:hover { background: var(--forum-primary-bg, rgba(74, 108, 247, 0.08)); }

.forum-hidden-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.forum-hidden-btn-primary {
  background: var(--forum-primary, #4a6cf7);
  color: #fff;
}

.forum-hidden-btn-primary:hover { opacity: 0.9; background: var(--forum-primary, #4a6cf7); }

/* -- 编辑器"隐藏内容"配置面板 -- */
.forum-hidden-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: var(--space-4);
}

.forum-hidden-modal {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--forum-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.forum-hidden-modal-head {
  padding: var(--space-4);
  font-size: var(--text-base, 16px);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary, #1f2937);
  border-bottom: 1px solid var(--forum-border, #e5e7eb);
}

.forum-hidden-modal-body { padding: var(--space-4); }

.forum-hidden-field { margin-bottom: var(--space-3); }

.forum-hidden-field > label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs, 12px);
  color: var(--text-secondary, #6b7280);
}

.forum-hidden-field input[type="text"],
.forum-hidden-field input[type="number"],
.forum-hidden-field select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 8px;
  font-size: var(--text-sm, 14px);
  color: var(--text-primary, #1f2937);
  background: var(--forum-surface, #fff);
  box-sizing: border-box;
}

.forum-hidden-field input:focus,
.forum-hidden-field select:focus {
  outline: none;
  border-color: var(--forum-primary, #4a6cf7);
}

.forum-hidden-price-row { display: flex; gap: var(--space-2); }
.forum-hidden-price-row input { flex: 1; }
.forum-hidden-price-row select { width: 100px; flex-shrink: 0; }

/* -- "指定用户"多选搜索组件 -- */
.forum-hidden-userpicker {
  position: relative;
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 8px;
  background: var(--forum-surface, #fff);
  padding: var(--space-1);
}

.forum-hidden-userpicker:focus-within {
  border-color: var(--forum-primary, #4a6cf7);
}

.forum-hidden-user-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.forum-hidden-user-tags:not(:empty) { margin-bottom: 4px; }

.forum-hidden-user-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: 6px;
  background: var(--forum-primary-bg, rgba(74, 108, 247, 0.08));
  color: var(--forum-primary, #4a6cf7);
  font-size: var(--text-xs, 12px);
  line-height: 1.5;
}

.forum-hidden-user-tag-del {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--forum-primary, #4a6cf7);
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}

.forum-hidden-user-tag-del:hover {
  background: var(--forum-primary, #4a6cf7);
  color: #fff;
}

.forum-hidden-user-search {
  width: 100%;
  border: none !important;
  padding: var(--space-1) var(--space-2) !important;
  font-size: var(--text-sm, 14px);
  background: transparent !important;
  box-sizing: border-box;
}

.forum-hidden-user-search:focus { outline: none; }

/* 下拉为 body 级 fixed 浮层（由 JS 定位），避免被 modal 的 overflow 裁剪 */
.forum-hidden-user-dropdown {
  position: fixed;
  z-index: 11100;
  max-height: 220px;
  overflow-y: auto;
  background: var(--forum-surface, #fff);
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.forum-hidden-user-option {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm, 14px);
  color: var(--text-primary, #1f2937);
  cursor: pointer;
}

.forum-hidden-user-option:hover { background: var(--forum-primary-bg, rgba(74, 108, 247, 0.06)); }

.forum-hidden-user-option.is-selected {
  color: var(--text-tertiary, #9ca3af);
  cursor: default;
}

.forum-hidden-user-option.is-selected::after { content: '（已选）'; font-size: var(--text-xs, 12px); }

.forum-hidden-user-empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #9ca3af);
  text-align: center;
}

.forum-hidden-modal-tip {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #9ca3af);
  line-height: 1.6;
}

.forum-hidden-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--forum-border, #e5e7eb);
}

.forum-hidden-modal-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: var(--text-sm, 14px);
  cursor: pointer;
}

.forum-hidden-modal-btn-primary {
  background: var(--forum-primary, #4a6cf7);
  border-color: var(--forum-primary, #4a6cf7);
  color: #fff;
}

/* 编辑器工具栏隐藏内容按钮（直观区分普通文本功能） */
.EasyMDE .editor-toolbar .forum-hidden-trigger,
.editor-toolbar .forum-hidden-trigger { color: var(--forum-primary, #4a6cf7); }

/* 红包图标：FontAwesome 无红包图形，统一用红包 emoji 渲染（编辑器工具栏/列表徽标/详情卡片） */
.editor-toolbar .forum-redpacket-trigger::before,
.forum-icon-redpacket::before {
  content: '🧧';
  font-style: normal;
  font-size: 15px;
  line-height: 1;
}

/* 详情页红包卡片大图标 */
.forum-redpacket-card-icon .forum-icon-redpacket::before { font-size: 20px; }

/* 帖子列表徽标小图标 */
.forum-badge-redpacket .forum-icon-redpacket::before { font-size: 13px; }

/* -- 编辑器富文本增强（颜色/背景/字号/音视频）面板与按钮 -- */
/* 工具栏按钮着色提示（颜色=红、背景=绿，其余沿用主题色） */
.editor-toolbar .forum-richtext-trigger { color: inherit; }
.editor-toolbar .forum-richtext-trigger-rich-color { color: #e74c3c; }
.editor-toolbar .forum-richtext-trigger-rich-bg { color: #2ecc71; }

/* 颜色面板弹窗复用 forum-hidden-modal 布局，仅扩展内容区样式 */
/* 预设色板：10 个色块一行展示，正方形等分，避免换行成两行 */
.forum-richtext-swatch-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--space-1);
}

.forum-richtext-swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.forum-richtext-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.forum-richtext-swatch-white {
  border-color: var(--forum-border, #e5e7eb);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.forum-richtext-color-row { display: flex; gap: var(--space-2); }
.forum-richtext-color-row input[type="color"] {
  width: 48px;
  height: 38px;
  padding: 2px;
  flex-shrink: 0;
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 8px;
  background: var(--forum-surface, #fff);
  cursor: pointer;
}

/* 字号档位列表 */
.forum-richtext-size-list { display: flex; flex-direction: column; gap: var(--space-2); }

.forum-richtext-size-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: 8px;
  background: var(--forum-surface, #fff);
  color: var(--text-primary, #1f2937);
  font-size: var(--text-sm, 14px);
  cursor: pointer;
}

.forum-richtext-size-option:hover {
  border-color: var(--forum-primary, #4a6cf7);
  background: var(--forum-primary-bg, rgba(74, 108, 247, 0.06));
}

.forum-richtext-size-tag {
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #9ca3af);
}

/* 音视频面板上传行 */
.forum-richtext-upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.forum-richtext-upload-status {
  font-size: var(--text-xs, 12px);
  color: var(--text-secondary, #6b7280);
  word-break: break-all;
}

/* 正文渲染：字号档位与媒体元素（容器为视图实际使用的 forum-markdown-body） */
.forum-markdown-body .forum-rich-size-small { font-size: 12px; }
.forum-markdown-body .forum-rich-size-normal { font-size: 15px; }
.forum-markdown-body .forum-rich-size-large { font-size: 18px; }
.forum-markdown-body .forum-rich-size-x-large { font-size: 22px; }
.forum-markdown-body .forum-rich-size-xx-large { font-size: 26px; }

.forum-markdown-body .forum-rich-audio,
.forum-markdown-body .forum-rich-video {
  max-width: 100%;
  margin: var(--space-2) 0;
  border-radius: 8px;
  outline: none;
}

.forum-markdown-body .forum-rich-video { width: 100%; max-height: 600px; object-fit: contain; }

/* 音频播放列表：正文内富文本音频 ≥2 个时自动插入内容最上方（聚合范围为单个内容容器） */
.forum-audio-playlist {
  margin: var(--space-3, 16px) 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-elevated, #fafafa);
  overflow: hidden;
}

.forum-audio-playlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-subtle, #f5f6f8);
}

/* 播放列表控制组：上一曲 / 播放暂停 / 下一曲 */
.forum-audio-playlist-ctrls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.forum-audio-playlist-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary, #4b5563);
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}

.forum-audio-playlist-ctrl:hover {
  color: var(--primary, #3b82f6);
  background: var(--bg-body, #eef2f7);
}

.forum-audio-playlist-ctrl svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 播放/暂停图标随容器内真实播放状态切换 */
.forum-audio-playlist .forum-audio-playlist-icon-pause { display: none; }
.forum-audio-playlist.is-playing .forum-audio-playlist-icon-pause { display: block; }
.forum-audio-playlist.is-playing .forum-audio-playlist-icon-play { display: none; }

.forum-audio-playlist-title {
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.forum-audio-playlist-playall {
  border: none;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: var(--text-xs, 12px);
  cursor: pointer;
  color: #fff;
  background: var(--primary, #3b82f6);
  transition: filter .15s ease;
}

.forum-audio-playlist-playall:hover { filter: brightness(1.08); }

/* 头部右侧成组：「播放全部」紧靠折叠箭头 */
.forum-audio-playlist-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 列表默认收起（is-collapsed）：隐藏条目区，头部右侧箭头切换展开/收起 */
.forum-audio-playlist.is-collapsed .forum-audio-playlist-list { display: none; }
.forum-audio-playlist.is-collapsed .forum-audio-playlist-head { border-bottom: none; }
.forum-audio-playlist .forum-audio-playlist-icon-chevron-right { display: none; }
.forum-audio-playlist.is-collapsed .forum-audio-playlist-icon-chevron-right { display: block; }
.forum-audio-playlist.is-collapsed .forum-audio-playlist-icon-chevron-down { display: none; }

.forum-audio-playlist-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.forum-audio-playlist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: var(--text-sm, 13px);
  color: var(--text-primary, #111827);
  transition: background .15s ease;
}

.forum-audio-playlist-item:hover { background: var(--bg-subtle, #f0f2f5); }

.forum-audio-playlist-item.is-playing {
  color: var(--primary, #3b82f6);
  background: color-mix(in srgb, var(--primary, #3b82f6) 8%, transparent);
}

.forum-audio-playlist-item.is-playing .forum-audio-playlist-name::after {
  content: ' ♪';
}

.forum-audio-playlist-index {
  flex-shrink: 0;
  min-width: 1.6em;
  color: var(--text-tertiary, #9ca3af);
  font-variant-numeric: tabular-nums;
}

.forum-audio-playlist-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 音频播放器卡片：替换原生 audio 控件外观（原生元素隐藏保留在卡片后方驱动播放） */
.forum-audio-card + audio.forum-rich-audio { display: none; }

.forum-audio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: var(--space-2, 8px) 0;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.forum-audio-card:hover {
  border-color: color-mix(in srgb, var(--primary, #3b82f6) 35%, var(--border, #e5e7eb));
  box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
}

.forum-audio-card.is-playing {
  border-color: color-mix(in srgb, var(--primary, #3b82f6) 55%, transparent);
  background: linear-gradient(135deg, #eff6ff, #e0edff);
}

.forum-audio-card-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--primary, #3b82f6), #6366f1);
  box-shadow: 0 2px 6px rgba(59, 130, 246, .35);
  transition: filter .15s ease, transform .15s ease;
}

.forum-audio-card-btn:hover { filter: brightness(1.08); transform: scale(1.05); }
.forum-audio-card-btn:active { transform: scale(.96); }
.forum-audio-card-btn svg { width: 16px; height: 16px; fill: currentColor; }

.forum-audio-card .forum-audio-card-icon-pause { display: none; }
.forum-audio-card.is-playing .forum-audio-card-icon-pause { display: block; }
.forum-audio-card.is-playing .forum-audio-card-icon-play { display: none; }

.forum-audio-card-main {
  flex: 1;
  min-width: 0;
}

.forum-audio-card-name {
  margin-bottom: 7px;
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  color: var(--text-primary, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-audio-card-bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgba(15, 23, 42, .12);
  cursor: pointer;
  transition: height .15s ease;
}

.forum-audio-card-bar:hover { height: 7px; }

.forum-audio-card-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary, #3b82f6), #6366f1);
}

.forum-audio-card-time {
  flex-shrink: 0;
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #9ca3af);
  font-variant-numeric: tabular-nums;
}

/* 播放器卡片封面（data-cover 选填）：方形缩略图，播放按钮悬浮居中 */
.forum-audio-card-cover {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-subtle, #eef2f7);
}

.forum-audio-card-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.forum-audio-card-cover .forum-audio-card-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background: rgba(17, 24, 39, .45);
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.forum-audio-card-cover .forum-audio-card-btn svg { width: 14px; height: 14px; }

/* 播放列表条目封面缩略图（data-cover 选填） */
.forum-audio-playlist-cover {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-subtle, #eef2f7);
}

/* 第三方视频平台嵌入播放器（B站/腾讯/优酷）：16:9 自适应容器 */
.forum-rich-video-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 600px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.forum-rich-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 已知无公开嵌入播放器的视频平台（爱奇艺页/芒果TV/Netflix 等）：直接输出可点击链接 */
.forum-markdown-body .forum-rich-video-link {
  display: inline-block;
  max-width: 100%;
  margin: var(--space-2) 0;
  padding: 6px 12px;
  background: var(--bg-tertiary, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  color: var(--primary-color, #155bd4);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.forum-markdown-body .forum-rich-video-link:hover {
  background: var(--bg-secondary, #e8eefc);
  border-color: var(--primary-color, #155bd4);
  text-decoration: none;
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .form-row { flex-direction: column; gap: var(--space-2); }
  .form-label { width: auto; text-align: left; padding-top: 0; }
  .region-select { grid-template-columns: 1fr; }
  .settings-form-actions { flex-direction: column-reverse; }
  .settings-form-actions .btn-primary,
  .settings-form-actions .btn-secondary { width: 100%; }
  .settings-tabs { padding: var(--space-1) var(--space-2) 0; gap: 0; }
  .settings-tab { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .settings-tab svg { width: 15px; height: 15px; }
  .settings-security-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .settings-security-row .btn-secondary { width: fit-content; }
}

@media (max-width: 480px) {
  .settings-form { padding: var(--space-4); }
  .avatar-setting-row { flex-direction: column; align-items: flex-start; }
  .settings-blacklist-input { flex-direction: column; align-items: stretch; max-width: none; }
  .settings-blacklist-input .btn-secondary { width: fit-content; }
}

/* ============================================================
   15 用户主页（up）：资料头卡 / 选项卡 / 帖子·评论·收藏·关于TA
   ============================================================ */

/* ---- 资料头卡 ---- */
.up-profile-card { position: relative; overflow: hidden; padding: 0; background: linear-gradient(135deg, var(--brand-50) 0%, var(--neutral-0) 60%), var(--forum-card); }
.up-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); padding-bottom: var(--space-4); }
.up-profile-left { display: flex; align-items: flex-start; gap: var(--space-4); flex: 1; min-width: 0; }
.up-avatar { width: 64px; height: 64px; font-size: var(--text-2xl); flex-shrink: 0; border: 3px solid var(--neutral-0); box-shadow: 0 2px 8px rgba(37,99,235,.15); }
.up-profile-info { flex: 1; min-width: 0; }
.up-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.up-name { font-size: 20px; font-weight: var(--font-bold); color: var(--forum-foreground); margin: 0; }
.up-level-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; font-size: var(--text-xs); font-weight: var(--font-semibold); white-space: nowrap; }
.up-moderator-badge { align-self: center; }
/* 版主身份：个人主页「管理版块」行 */
.up-moderating { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-6) var(--space-4); font-size: var(--text-sm); }
.up-moderating-label { color: var(--neutral-500); }
.up-moderating-list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.up-moderating-item { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); background-color: var(--brand-50); color: var(--brand-700); font-size: var(--text-xs); font-weight: var(--font-medium); text-decoration: none; }
.up-moderating-item:hover { background-color: var(--brand-100, #dbeafe); color: var(--brand-700); }
.up-bio { margin-top: var(--space-2); font-size: var(--text-base); color: var(--neutral-600); line-height: 1.6; }
.up-profile-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); flex-shrink: 0; }
.up-actions { display: flex; gap: var(--space-2); }
.up-stats { display: flex; gap: var(--space-5); }
.up-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.up-stat-num { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--forum-foreground); font-variant-numeric: tabular-nums; }
.up-stat-label { font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.up-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--forum-border); background-color: var(--forum-card); font-size: var(--text-sm); color: var(--neutral-500); }
.up-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.up-meta-item svg { color: var(--neutral-400); }
.up-meta-sep { color: var(--neutral-300); }

/* ---- 选项卡 ---- */
.up-tabs-wrap { margin-top: var(--space-4); }
.up-tabs { display: flex; gap: var(--space-2); padding: 0 var(--space-5); border-bottom: 1px solid var(--forum-border); }
.up-tab { position: relative; padding: var(--space-3) var(--space-3); border: none; background: none; font-family: inherit; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--neutral-500); cursor: pointer; transition: color .15s ease; }
.up-tab::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; border-radius: var(--radius-full); background-color: transparent; transition: background-color .15s ease; }
.up-tab:hover { color: var(--forum-foreground); }
.up-tab.is-active { color: var(--forum-primary); }
.up-tab.is-active::after { background-color: var(--forum-primary); }
.up-panel { padding: var(--space-5); }
.up-panel[hidden] { display: none; }

/* ---- 帖子列表 ---- */
.up-post-list { display: grid; gap: var(--space-4); }
.up-post-item { padding: var(--space-4); border: 1px solid var(--forum-border); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease; }
.up-post-item:hover { border-color: var(--brand-200); box-shadow: var(--shadow-hover); }
.up-post-title a { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); line-height: var(--leading-tight); }
.up-post-title a:hover { color: var(--forum-primary); }
.up-post-excerpt { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--neutral-500); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-post-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); gap: var(--space-3); }
.up-post-metas { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.up-post-meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--forum-muted-foreground); font-variant-numeric: tabular-nums; }
.up-post-time { font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.up-load-more { margin-top: var(--space-5); }

/* ---- 评论列表 ---- */
.up-comment-list { display: grid; gap: var(--space-4); }
.up-comment-item { padding: var(--space-4); border: 1px solid var(--forum-border); border-radius: var(--radius-md); }
.up-comment-post { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.up-comment-label { font-size: var(--text-xs); color: var(--forum-muted-foreground); flex-shrink: 0; }
.up-comment-post-title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-comment-post-title:hover { color: var(--forum-primary); }
.up-comment-content { font-size: var(--text-sm); color: var(--neutral-600); line-height: 1.65; }
.up-comment-foot { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.up-comment-meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.up-comment-time { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* ---- 收藏列表 ---- */
.up-fav-list { list-style: none; margin: 0; padding: 0; }
.up-fav-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--neutral-100); }
.up-fav-row:last-child { border-bottom: none; }
.up-fav-star { flex-shrink: 0; }
.up-fav-title { flex: 1; min-width: 0; font-size: var(--text-base); color: var(--forum-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-fav-title:hover { color: var(--forum-primary); }
.up-fav-time { flex-shrink: 0; font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* ---- 关于 TA ---- */
.up-about-section { margin-bottom: var(--space-6); }
.up-about-section:last-child { margin-bottom: 0; }
.up-about-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--forum-foreground); margin-bottom: var(--space-4); }
.up-achievements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.up-achievement { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background-color: var(--neutral-50); border-radius: var(--radius-md); }
.up-achievement-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.up-achievement-info { min-width: 0; }
.up-achievement-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); }
.up-achievement-desc { font-size: var(--text-xs); color: var(--forum-muted-foreground); margin-top: 2px; }
.up-skills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.up-skill-tag { display: inline-flex; align-items: center; padding: 5px 12px; background-color: var(--brand-50); color: var(--brand-700); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); }
.up-signature { font-size: var(--text-base); color: var(--neutral-600); line-height: 1.8; padding: var(--space-4); background-color: var(--neutral-50); border-radius: var(--radius-md); border-left: 3px solid var(--brand-400); }
.up-follower-list { display: grid; gap: var(--space-3); }
.up-follower-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); transition: background-color .12s ease; }
.up-follower-item:hover { background-color: var(--neutral-50); text-decoration: none; }
.up-follower-info { min-width: 0; flex: 1; }
.up-follower-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); }
.up-follower-desc { font-size: var(--text-xs); color: var(--forum-muted-foreground); margin-top: 2px; }

/* ---- 用户主页响应式 ---- */
@media (max-width: 1024px) {
  .up-profile-header { flex-wrap: wrap; }
  .up-profile-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .up-achievements { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .up-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .up-tabs::-webkit-scrollbar { display: none; }
  .up-tab { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 480px) {
  .up-profile-header { flex-direction: column; gap: var(--space-4); }
  .up-profile-left { flex-direction: column; align-items: center; text-align: center; }
  .up-name-row { justify-content: center; }
  .up-profile-right { flex-direction: column-reverse; align-items: center; }
  .up-stats { justify-content: center; }
  .up-profile-meta { justify-content: center; }
  .up-post-foot { flex-direction: column; align-items: flex-start; }
  .up-post-metas { margin-left: 0; }
}

/* ============================================================
   15 个人中心：面包屑 / 资料卡 / 选项卡 / 帖子·收藏·关注·私信
   ============================================================ */

/* ---- 面包屑 ---- */
.uc-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
}

.uc-breadcrumb a { color: var(--forum-muted-foreground); }

.uc-breadcrumb a:hover { color: var(--forum-primary); }

.uc-breadcrumb-sep { color: var(--neutral-300); }

.uc-breadcrumb-current { color: var(--forum-foreground); font-weight: var(--font-medium); }

/* ---- 资料头部卡 ---- */
.uc-profile-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
}

.uc-profile-avatar {
  width: 64px;
  height: 64px;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.uc-profile-main { flex: 1; min-width: 0; }

.uc-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.uc-name {
  font-size: 18px;
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
}

.uc-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.uc-bio {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--neutral-600);
}

.uc-checkin-line {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

.uc-level-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.uc-progress-track {
  flex: 1;
  max-width: 280px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--neutral-100);
  overflow: hidden;
}

.uc-progress-fill {
  width: 58%;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--brand-500);
}

.uc-progress-text { font-size: var(--text-xs); color: var(--forum-muted-foreground); white-space: nowrap; }

.uc-stats {
  display: flex;
  gap: var(--space-6);
  flex-shrink: 0;
  padding-left: var(--space-6);
  border-left: 1px solid var(--forum-border);
}

.uc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.uc-stat-num {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
  font-variant-numeric: tabular-nums;
}

.uc-stat-label { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.uc-edit-btn { flex-shrink: 0; }

/* ---- 选项卡行 ---- */
.uc-tabs-wrap { margin-top: var(--space-4); }

.uc-tabs {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--forum-border);
}

.uc-tab {
  position: relative;
  padding: var(--space-3) var(--space-3);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--neutral-500);
  cursor: pointer;
  transition: color 0.15s ease;
}

.uc-tab::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.uc-tab:hover { color: var(--forum-foreground); }

.uc-tab.is-active { color: var(--forum-primary); }

.uc-tab.is-active::after { background-color: var(--forum-primary); }

.uc-panel { padding: var(--space-5); }

.uc-panel[hidden] { display: none; }

/* ---- 我的帖子：2×2 卡片网格 ---- */
.uc-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.uc-post-card {
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.uc-post-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-hover);
}

.uc-post-title a {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
  line-height: var(--leading-tight);
}

.uc-post-title a:hover { color: var(--forum-primary); }

.uc-post-tags { margin-top: var(--space-2); }

.uc-post-foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.uc-post-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  font-variant-numeric: tabular-nums;
}

.uc-post-time { margin-left: auto; font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* ---- 我的收藏 ---- */
.uc-fav-list { list-style: none; margin: 0; padding: 0; }

.uc-fav-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--neutral-100);
}

.uc-fav-row:last-child { border-bottom: none; }

.uc-fav-star { flex-shrink: 0; }

.uc-fav-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  color: var(--forum-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-fav-title:hover { color: var(--forum-primary); }

.uc-fav-time { flex-shrink: 0; font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.uc-unfav-btn {
  flex-shrink: 0;
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.uc-unfav-btn:hover {
  color: var(--state-error);
  background-color: var(--state-error-bg);
}

/* ---- 我的关注 ---- */
.uc-follow-list { list-style: none; margin: 0; padding: 0; }

.uc-follow-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--neutral-100);
}

.uc-follow-row:last-child { border-bottom: none; }

.uc-follow-body { flex: 1; min-width: 0; }

.uc-follow-name { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--forum-foreground); }

.uc-follow-desc { margin-top: 2px; font-size: var(--text-xs); color: var(--forum-muted-foreground); }

.uc-following-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-full);
  background-color: var(--neutral-100);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--neutral-500);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.uc-following-btn:hover {
  color: var(--state-error);
  border-color: var(--state-error);
  background-color: var(--forum-card);
}

/* ---- 私信 ---- */
.uc-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.uc-msg-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--forum-foreground); }

.uc-convo-list { list-style: none; margin: 0; padding: 0; }

.uc-convo-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--neutral-100);
}

.uc-convo-row:last-child { border-bottom: none; }

.uc-convo-body { flex: 1; min-width: 0; }

.uc-convo-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

.uc-convo-name { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--forum-foreground); }

.uc-convo-time { font-size: var(--text-xs); color: var(--forum-muted-foreground); white-space: nowrap; }

.uc-convo-snippet {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-convo-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--state-error);
}

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .uc-profile-card { flex-wrap: wrap; }
  .uc-stats { border-left: none; padding-left: 0; }
  .uc-post-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .uc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab { flex-shrink: 0; white-space: nowrap; }
  .uc-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .uc-stat-card { padding: var(--space-3); }
  .uc-stat-num { font-size: 20px; }
}

@media (max-width: 480px) {
  .uc-profile-card { flex-direction: column; text-align: center; gap: var(--space-3); }
  .uc-profile-info { align-items: center; }
  .uc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}

/* ============================================================
   16 用户排行榜：前三甲领奖台 / 排名表格
   ============================================================ */

.rank-section { padding: var(--space-5); }

.rank-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: end;
}

.rank-top-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--forum-border);
  background-color: var(--forum-card);
}

.rank-top-card[data-rank="1"] {
  order: -1;
  border-color: var(--brand-200, #c7d2fe);
  background-image: linear-gradient(180deg, var(--brand-50), var(--forum-card) 55%);
}

.rank-top-card .page-follow-btn { margin-top: var(--space-2); }

.rank-medal {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.rank-gold { background: linear-gradient(135deg, #fbbf24, #d97706); }
.rank-silver { background: linear-gradient(135deg, #cbd5e1, #64748b); }
.rank-bronze { background: linear-gradient(135deg, #e5a06b, #b4622d); }

.rank-top-card .avatar-circle {
  box-shadow: 0 0 0 3px var(--forum-card), 0 0 0 4px var(--forum-border);
}

.rank-name {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--forum-foreground);
}

.rank-score {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
  font-variant-numeric: tabular-nums;
}

.rank-top-stats {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}

.rank-table-card { padding: var(--space-2) var(--space-5) var(--space-4); }

.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.rank-table th {
  padding: var(--space-3) var(--space-2);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--forum-muted-foreground);
  border-bottom: 1px solid var(--forum-border);
  white-space: nowrap;
}

.rank-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--forum-border);
  vertical-align: middle;
}

.rank-table tbody tr:last-child td { border-bottom: none; }

.rank-table tbody tr:hover td { background-color: var(--neutral-50, #fafafa); }

.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

.rank-user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.rank-user-name {
  margin: 0;
  font-weight: var(--font-medium);
  color: var(--forum-foreground);
}

.rank-num-right { text-align: right; font-variant-numeric: tabular-nums; }

.rank-col-num { min-width: 60px; }

.rank-col-action { text-align: right; }

.rank-col-action .page-follow-btn { padding: 4px 12px; font-size: var(--text-xs); }

.rank-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--forum-muted-foreground);
}

@media (max-width: 640px) {
  .rank-podium { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .rank-col-hide { display: none; }
  .rank-table-card { padding: var(--space-2) var(--space-3) var(--space-3); }
}

/* ============================================================
   17 管理后台侧边栏（manage）：深色侧边栏 + 双列布局骨架
   ============================================================ */

.ad-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - var(--header-height));
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.ad-main {
  background-color: var(--forum-bg, #f8fafc);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.ad-sidebar {
  background-color: var(--brand-800, #1e3a8a);
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-4) 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.ad-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ad-sidebar-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.ad-sidebar-title { font-size: var(--text-base); font-weight: 600; color: #ffffff; line-height: 1.2; }

.ad-sidebar-sub { font-size: var(--text-xs); opacity: 0.6; margin-top: 2px; }

.ad-side-nav { display: grid; gap: 2px; padding: 0 var(--space-2); }

.ad-side-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
  position: relative;
}

.ad-side-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; text-decoration: none; }

.ad-side-link[data-active-tmp="true"] { background: var(--forum-primary); color: #ffffff; }

.ad-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.ad-badge-danger { background: var(--state-error); }

.ad-side-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: var(--space-2) var(--space-3); }

@media (max-width: 1024px) {
  .ad-layout { grid-template-columns: 1fr; }
  .ad-sidebar { display: none; }
}

@media (max-width: 640px) {
  .ad-main {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-6) + 52px + env(safe-area-inset-bottom, 0));
  }
}

/* ============================================================
   18 帖子详情页：面包屑 / 正文卡 / 评论区 / 楼中楼 / 相关讨论 / 回复框
   设计稿基线：test/bbs/pages/post-detail.html
   ============================================================ */

/* ---- 页面骨架与面包屑 ---- */
.post-page { display: grid; gap: var(--space-4); }

.post-breadcrumb {
  font-size: var(--text-sm);
  color: var(--forum-muted-foreground);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.post-breadcrumb a { color: var(--forum-primary); display: inline-flex; align-items: center; gap: 4px; }
.post-breadcrumb-sep { color: var(--neutral-300); }

/* ---- 帖子正文卡 ---- */
.post-article { padding: var(--space-6); }

.post-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 26px;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

/* 标题文字占主体，状态徽标组靠右 */
.post-title-text { flex: 1; min-width: 0; }
.post-title-badges { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); flex-shrink: 0; margin-top: 2px; }
.post-title .role-badge { vertical-align: middle; }

.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
}

.avatar-post {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background-color: var(--brand-100);
  color: var(--brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
  object-fit: cover;
}

.post-author-name { font-size: var(--text-md); font-weight: var(--font-medium); color: var(--forum-foreground); }
.post-author-name:hover { color: var(--forum-primary); }
.post-meta-sub { font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.post-meta-dot { color: var(--neutral-300); }
.meta-reply-btn { margin-left: auto; flex-shrink: 0; text-decoration: none; }

/* ---- 正文 Markdown 渲染（新令牌版 forum-markdown-body） ---- */
.post-body {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--neutral-800);
}

.forum-markdown-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--neutral-800); word-break: break-word; }

.forum-markdown-body h1,
.forum-markdown-body h2,
.forum-markdown-body h3,
.forum-markdown-body h4,
.forum-markdown-body h5,
.forum-markdown-body h6 {
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--forum-foreground);
}

.forum-markdown-body h1 { font-size: var(--text-xl); }
.forum-markdown-body h2 { font-size: var(--text-lg); }
.forum-markdown-body h3 { font-size: var(--text-md); }
.forum-markdown-body h4,
.forum-markdown-body h5,
.forum-markdown-body h6 { font-size: var(--text-base); }

.forum-markdown-body p { margin: 0 0 var(--space-3); }
.forum-markdown-body p:last-child { margin-bottom: 0; }

.forum-markdown-body a { color: var(--forum-primary); text-decoration: none; }
.forum-markdown-body a:hover { text-decoration: underline; }

.forum-markdown-body img { max-width: 100%; border-radius: var(--radius-md); }

/* 正文图片大图查看：可放大图片悬停样式与遮罩层 */
.forum-markdown-body img.forum-img-zoomable { cursor: zoom-in; transition: opacity .15s ease; }
.forum-markdown-body img.forum-img-zoomable:hover { opacity: .85; }

.forum-img-viewer-mask {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, .78);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 24px;
}
.forum-img-viewer-mask img,
.forum-img-viewer-mask .forum-img-viewer-img {
  max-width: 96vw; max-height: 94vh;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}

/* 多图切换按钮与计数器 */
.forum-img-viewer-mask .forum-img-viewer-prev,
.forum-img-viewer-mask .forum-img-viewer-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 32px; line-height: 44px; cursor: pointer;
  transition: background .15s ease;
}
.forum-img-viewer-mask .forum-img-viewer-prev:hover,
.forum-img-viewer-mask .forum-img-viewer-next:hover { background: rgba(255, 255, 255, .3); }
.forum-img-viewer-mask .forum-img-viewer-prev { left: 24px; }
.forum-img-viewer-mask .forum-img-viewer-next { right: 24px; }
.forum-img-viewer-mask .forum-img-viewer-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-size: 13px;
  background: rgba(0, 0, 0, .4); border-radius: 999px; padding: 3px 12px;
}

.forum-markdown-body blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--forum-primary);
  background: var(--neutral-50);
  color: var(--neutral-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.forum-markdown-body blockquote p { margin: 0; }

.forum-markdown-body pre {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.forum-markdown-body pre code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--neutral-800);
  white-space: pre;
  background: transparent;
  padding: 0;
}

.forum-markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background-color: var(--neutral-100);
  color: var(--neutral-800);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

/* ---- 代码块 macOS 窗口风格（JS 包裹 .code-window 结构后生效） ---- */
.code-window {
  margin: var(--space-3) 0;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.code-window pre {
  margin: 0;
  border: none;
  border-radius: 0;
}

.code-window-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
  border-bottom: 1px solid var(--neutral-200);
}

.code-window-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
}

.code-dot-red { background: #ff5f57; }
.code-dot-yellow { background: #febc2e; }
.code-dot-green { background: #28c840; }

.code-copy-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 10px;
  font-size: var(--text-xs);
  color: var(--neutral-600);
  background: var(--neutral-200, #e2e8f0);
  border: 1px solid var(--neutral-300, #cbd5e1);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.code-copy-btn:hover { background: var(--neutral-300, #cbd5e1); color: var(--neutral-900); }

.forum-markdown-body ul,
.forum-markdown-body ol { margin: var(--space-2) 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.forum-markdown-body li::marker { color: var(--forum-primary); }

.forum-markdown-body table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-sm); }
.forum-markdown-body th,
.forum-markdown-body td { border: 1px solid var(--forum-border); padding: var(--space-2) var(--space-3); text-align: left; }
.forum-markdown-body th { background: var(--neutral-50); font-weight: var(--font-semibold); }

.forum-markdown-body hr { border: none; border-top: 1px solid var(--forum-border); margin: var(--space-4) 0; }
.forum-markdown-body strong { font-weight: var(--font-semibold); color: var(--forum-foreground); }
.forum-markdown-body del { color: var(--neutral-400); }

/* ---- 作者签名 / 话题标签 / 楼层锚点 / 楼主徽章 ---- */
.user-signature {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--forum-border);
  font-size: 12px;
  color: var(--forum-muted-foreground);
  max-height: 60px;
  overflow: hidden;
}

.user-signature::before { content: "—— "; opacity: 0.7; }

.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

.floor-anchor { scroll-margin-top: 90px; position: relative; }

.op-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 18px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-weight: var(--font-medium);
  flex-shrink: 0;
}

/* ---- 操作条：点赞 / 收藏 / 分享 / 举报 / 管理 ---- */
.post-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-100);
}

.post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-full);
  color: var(--neutral-600);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.post-action-btn:hover { color: var(--forum-primary); border-color: var(--brand-300); background-color: var(--brand-50); }
.post-action-btn.active,
.post-action-btn.is-active { color: var(--forum-primary); border-color: var(--brand-500); background-color: var(--brand-50); }
.post-action-btn .action-fill { fill: none; transition: fill 0.15s ease; }
.post-action-btn.active .action-fill,
.post-action-btn.is-active .action-fill { fill: var(--brand-500); }

.post-report-link { margin-left: auto; font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.post-report-link:hover { color: var(--state-error); }

.post-admin-actions { border-top: 1px dashed var(--forum-border); margin-top: var(--space-2); padding-top: var(--space-2); }

.post-action-admin { color: var(--neutral-500); font-size: var(--text-xs); padding: 5px 10px; }
.post-action-admin:hover { color: var(--state-error); border-color: var(--state-error); background-color: var(--state-error-bg); }

/* ---- 评论区 ---- */
.comment-section { padding: var(--space-5) var(--space-6) var(--space-6); }

.comment-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
.comment-title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin: 0; }
.comment-sort { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.comment-sort-item { color: var(--forum-muted-foreground); text-decoration: none; padding: 2px 8px; border-radius: var(--radius-sm); transition: color 0.15s ease, background-color 0.15s ease; }
.comment-sort-item:hover { color: var(--forum-primary); }
.comment-sort-item.active { color: var(--forum-primary); font-weight: var(--font-medium); background: color-mix(in srgb, var(--forum-primary) 10%, transparent); }

.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }

.comment {
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-100);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
  /* 锚点定位补偿（如 /t/85#reply-78）：避开 sticky header（主站导航条 + 论坛导航）并预留 20px 间距 */
  scroll-margin-top: calc(var(--header-height) + var(--topbar-height) + 20px);
}

.comment:hover { background-color: var(--neutral-25); }
.comment.is-best { background-color: var(--state-success-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3) var(--space-3); }

.avatar-comment { width: 32px; height: 32px; font-size: var(--text-sm); object-fit: cover; }

.comment-head-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.comment-author { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--forum-foreground); }
.comment-author:hover { color: var(--forum-primary); }
.comment-time { font-size: var(--text-xs); color: var(--forum-muted-foreground); }
.comment-floor { margin-left: auto; font-size: var(--text-xs); color: var(--neutral-400); font-variant-numeric: tabular-nums; }

.comment-text { margin-top: var(--space-2); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--neutral-700); }

.comment-foot { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-4); }

.comment-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--forum-muted-foreground);
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color 0.15s ease;
}

.comment-mini-btn:hover { color: var(--forum-primary); }
.comment-mini-btn:disabled { color: var(--neutral-300); cursor: not-allowed; }
.comment-mini-btn.active { color: var(--forum-primary); }

.comment-report-link:hover { color: var(--state-error); }

.comment-best-btn:hover { color: var(--state-success); }

.comment-empty { padding: var(--space-8) 0; text-align: center; font-size: var(--text-sm); color: var(--forum-muted-foreground); }

/* ---- 楼中楼：左缩进 + 竖向引导线（设计稿 reply-thread 皮肤） ---- */
.forum-sub-replies {
  margin-top: var(--space-3);
  padding-left: var(--space-10);
  border-left: 1px solid var(--neutral-200);
}

.forum-sub-reply-list { display: grid; gap: var(--space-3); }

.forum-sub-reply-item { display: flex; gap: var(--space-2); padding-top: var(--space-3); }

.forum-sub-reply-avatar { flex-shrink: 0; }
.forum-sub-reply-avatar img,
.forum-sub-reply-avatar .forum-avatar-sm { width: 28px; height: 28px; border-radius: var(--radius-full); object-fit: cover; }

.forum-sub-reply-avatar .forum-user-avatar,
.forum-sub-reply-avatar .forum-user-avatar-sm,
.forum-sub-reply-avatar .forum-user-avatar-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.forum-sub-reply-body { flex: 1; min-width: 0; }

.forum-sub-reply-quote {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  background-color: var(--neutral-50);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-sub-reply-quote-author { color: var(--forum-primary); font-weight: var(--font-medium); }
.forum-sub-reply-quote-content { color: var(--neutral-500); }

.forum-sub-reply-author { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); margin-right: var(--space-2); }
.forum-sub-reply-author:hover { color: var(--forum-primary); }

.forum-sub-reply-time { font-size: var(--text-xs); color: var(--forum-muted-foreground); margin-right: var(--space-2); }
.forum-sub-reply-content { margin-top: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--neutral-700); }

.forum-reply-actions { margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-3); }

.forum-reply-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--forum-muted-foreground);
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color 0.15s ease;
}

.forum-reply-action-btn:hover { color: var(--forum-primary); }

.forum-sub-reply-more { margin-top: var(--space-2); font-size: var(--text-xs); }
.forum-sub-reply-more a { color: var(--forum-primary); }

/* ---- 楼中楼自动收起（超过 3 层）：收起时隐藏第 4 条起的回复与分页入口 ---- */
.forum-sub-replies.is-collapsed .forum-sub-reply-collapsed { display: none; }
.forum-sub-replies.is-collapsed .forum-sub-reply-more { display: none; }
.forum-sub-reply-toggle { margin-top: var(--space-2); font-size: var(--text-xs); }
.forum-sub-reply-toggle a { color: var(--forum-primary); }

/* ---- 楼中楼分页页码 ---- */
.forum-sub-sub-replies {
  margin-top: var(--space-2);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--forum-border);
}

.forum-sub-sub-replies .forum-sub-sub-replies {
  margin-left: 8px;
  padding-left: 10px;
  border-left-color: var(--forum-border-light, #e5e7eb);
}

.forum-sub-reply-pages {
  margin-top: var(--space-2);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.forum-sub-reply-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--space-1);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-sm);
  background-color: var(--forum-card);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

a.forum-sub-reply-page:hover {
  border-color: var(--forum-primary);
  color: var(--forum-primary);
}

.forum-sub-reply-page.current {
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
  color: var(--forum-primary-foreground);
  cursor: default;
}

/* ---- 行内回复框（点击「回复」展开） ---- */
.inline-reply[hidden] { display: none; }

.inline-reply {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.inline-reply-input { min-height: 64px; resize: vertical; font-family: inherit; box-sizing: border-box; }

.inline-reply-submit {
  padding: 6px 14px;
  background-color: var(--forum-primary);
  color: var(--forum-primary-foreground);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.inline-reply-submit:hover { background-color: var(--brand-700); }

/* inline-reply 底部操作区：emoji 按钮 + 提交按钮 */
.inline-reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: -30px;
}

.inline-reply-emoji-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: 1px solid var(--forum-border, #e5e7eb);
  border-radius: var(--radius-md);
  background-color: var(--forum-background, #fff);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.inline-reply-emoji-trigger:hover {
  background-color: var(--forum-secondary, #f3f4f6);
  border-color: var(--forum-primary, #3b82f6);
}

/* 全局动态行内回复框（template 克隆，由 JS 移动到目标回复旁） */
.forum-inline-reply-dynamic { width: 100%; }
.forum-inline-reply-form { display: grid; gap: var(--space-2); }

/* ---- 底部回复框卡 ---- */
.reply-composer { padding: var(--space-5) var(--space-6) var(--space-6); display: grid; gap: var(--space-3); }
.reply-composer form { display: grid; gap: var(--space-3); }
.reply-composer textarea { font-family: inherit; }

.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.composer-count { font-size: var(--text-xs); color: var(--forum-muted-foreground); font-variant-numeric: tabular-nums; }

.composer-notice {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--neutral-50);
  color: var(--forum-muted-foreground);
  font-size: var(--text-sm);
  text-align: center;
}

.composer-notice a { color: var(--forum-primary); font-weight: var(--font-medium); }

/* ---- 相关讨论 ---- */
.related-section { padding: var(--space-5) var(--space-6); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.related-card {
  display: block;
  padding: var(--space-4);
  background: var(--forum-background);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.related-card:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }

.related-title { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); margin-bottom: var(--space-2); }
.related-meta { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* ---- 分页容器 ---- */
.forum-paginator-wrap { margin-top: var(--space-5); }

/* ---- 帖子详情页移动端适配 ---- */
@media (max-width: 640px) {
  .post-article { padding: var(--space-4); }
  .post-title { font-size: 20px; line-height: 1.35; }
  .post-body { font-size: var(--text-sm); line-height: 1.75; }
  .post-body h2 { font-size: 18px; }
  .comment-section { padding: var(--space-4); }
  .reply-composer { padding: var(--space-4); }
  .related-section { padding: var(--space-4); }
  .related-grid { grid-template-columns: 1fr; }
  .forum-sub-replies { padding-left: var(--space-4); }
  .post-actions {
    position: sticky;
    bottom: calc(52px + env(safe-area-inset-bottom, 0));
    z-index: 80;
    background: var(--forum-card);
    border-top: 1px solid var(--forum-border);
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4);
    justify-content: space-around;
  }
  .post-report-link { display: none; }
}

@media (max-width: 480px) {
  .post-actions { margin: 0 calc(-1 * var(--space-3)); padding: var(--space-2) var(--space-3); }
  .post-action-btn { font-size: 12px; padding: 6px 10px; }
}

/* ============================================================
   19 回帖页（post-reply）：面包屑 / 页头 / 引用原帖卡 / 编辑器外壳 / 操作区 / 规范提示
   设计稿基线：test/bbs/pages/post-reply.html
   ============================================================ */

/* ---- 页面卡片容器（设计稿 community-main 卡片化，仅编辑类页面使用） ---- */
.compose-page {
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
}

/* ---- 面包屑 ---- */
.compose-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--forum-muted-foreground); }
.compose-breadcrumb a { color: var(--forum-muted-foreground); }
.compose-breadcrumb a:hover { color: var(--forum-primary); }
.compose-breadcrumb .breadcrumb-sep { color: var(--neutral-300); }
.compose-breadcrumb .breadcrumb-current { color: var(--forum-foreground); font-weight: var(--font-medium); }

/* ---- 页头 ---- */
.compose-header { display: grid; gap: var(--space-2); }
.compose-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--forum-foreground); line-height: var(--leading-tight); letter-spacing: -0.01em; margin: 0; }
.compose-subtitle { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; }
.compose-subtitle a { color: var(--forum-primary); font-weight: var(--font-medium); }
.compose-subtitle a:hover { text-decoration: underline; }

/* ---- 引用原帖摘要卡 ---- */
.reply-context { border-left: 3px solid var(--brand-500); background-color: var(--neutral-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); }
.reply-context-label { margin: 0; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--brand-700); letter-spacing: 0.05em; }
.reply-context-text { margin: 0; font-size: var(--text-sm); color: var(--neutral-600); line-height: 1.7; }
.reply-context-link { font-size: var(--text-xs); color: var(--forum-primary); font-weight: var(--font-medium); text-decoration: none; }
.reply-context-link:hover { text-decoration: underline; }

/* ---- 编辑器外壳：包住 EasyMDE，聚焦时描边 + 光环 ---- */
.editor-container { border: 1px solid var(--forum-input); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.editor-container:focus-within { border-color: var(--forum-ring); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.editor-container .EasyMDEContainer { margin-bottom: 0; }

/* ---- 操作区 ---- */
.compose-actions { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-2); border-top: 1px solid var(--forum-border); }
.compose-actions-left { display: flex; align-items: center; gap: var(--space-4); }
.compose-actions-right { display: flex; align-items: center; gap: var(--space-4); }
.cancel-link { font-size: var(--text-base); color: var(--neutral-500); cursor: pointer; font-family: inherit; background: none; border: none; padding: 0; transition: color 0.15s ease; }
.cancel-link:hover { color: var(--forum-primary); }

/* ---- 社区规范提示卡 ---- */
.compose-tips { background-color: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-3); }
.tips-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--brand-800); }
.tips-title svg { width: 16px; height: 16px; color: var(--brand-600); }
.tips-content { display: grid; gap: var(--space-2); }
.tips-item { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--brand-700); line-height: 1.6; }
.tips-item::before { content: ""; flex-shrink: 0; width: 4px; height: 4px; border-radius: var(--radius-full); background-color: var(--brand-400); margin-top: 7px; }

/* ---- 响应式 ---- */
@media (max-width: 640px) {
  .compose-page { padding: var(--space-4); }
  .compose-actions { flex-direction: column; gap: var(--space-3); align-items: stretch; }
  .compose-actions-right { justify-content: flex-end; }
}

/* ---- 发帖/编辑页（post-compose）：标题输入 / 版块+标签行 / 分类与悬赏行 / 错误提示 ---- */
.compose-form { display: grid; gap: var(--space-4); }

.title-input-wrap { position: relative; }
.title-input {
  width: 100%; padding: 14px 16px; padding-right: 84px;
  background-color: var(--forum-card); border: 1px solid var(--forum-input);
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg);
  font-weight: var(--font-semibold); color: var(--forum-foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box; line-height: 1.4;
}
.title-input:focus { outline: none; border-color: var(--forum-ring); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.title-input::placeholder { color: var(--forum-muted-foreground); font-weight: var(--font-normal); }
.title-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--forum-muted-foreground); font-variant-numeric: tabular-nums; }

.form-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-4); }

.category-select-wrap { position: relative; }
.category-select {
  width: 100%; padding: 10px 36px 10px 12px;
  background-color: var(--forum-card); border: 1px solid var(--forum-input);
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-base);
  color: var(--forum-foreground); cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box;
}
.category-select:focus { outline: none; border-color: var(--forum-ring); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.category-select:disabled { background-color: var(--neutral-50); color: var(--forum-muted-foreground); cursor: default; }
.category-select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 22px;
  width: 8px; height: 8px; border-right: 2px solid var(--neutral-400); border-bottom: 2px solid var(--neutral-400);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.tag-input-wrap {
  display: flex; align-items: center; gap: var(--space-2); padding: 0px 10px;
  background-color: var(--forum-card); border: 1px solid var(--forum-input);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; flex-wrap: wrap;
  position: relative;
}
.tag-input-wrap:focus-within { border-color: var(--forum-ring); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.tag-input-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; background-color: var(--brand-50); color: var(--brand-700); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); white-space: nowrap; }
.tag-item .tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: none; background: transparent; color: var(--brand-500); cursor: pointer; padding: 0; border-radius: var(--radius-full); font-size: 14px; line-height: 1; }
.tag-item .tag-remove:hover { background-color: var(--brand-100); color: var(--brand-700); }
.tag-input { flex: 1; min-width: 80px; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--text-sm); color: var(--forum-foreground); padding: 4px 0; }
.tag-input::placeholder { color: var(--forum-muted-foreground); }
.tag-add-btn {
  display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px;
  border: 1px dashed var(--neutral-300); border-radius: var(--radius-full);
  background: transparent; color: var(--neutral-500); font-size: var(--text-xs);
  font-weight: var(--font-medium); cursor: pointer; font-family: inherit;
  transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0;
}
.tag-add-btn:hover { border-color: var(--forum-primary); color: var(--forum-primary); background-color: var(--brand-50); }
.tag-add-btn svg { width: 12px; height: 12px; }

/* 标签搜索建议下拉（浮动层允许 overlay 阴影） */
.tag-input-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background-color: var(--forum-card); border: 1px solid var(--forum-border);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  max-height: 200px; overflow-y: auto; padding: 4px;
}
.tag-input-option { padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--forum-foreground); cursor: pointer; }
.tag-input-option:hover, .tag-input-option.tag-input-item-active { background-color: var(--brand-50); color: var(--forum-primary); }

/* 分类行与悬赏行 */
.classification-row, .reward-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.classification-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--forum-foreground); white-space: nowrap; }
.classification-row .category-select { width: 220px; flex-shrink: 0; }
.reward-input { width: 140px; padding: 10px 12px; background-color: var(--forum-card); border: 1px solid var(--forum-input); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-base); color: var(--forum-foreground); box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.reward-input:focus { outline: none; border-color: var(--forum-ring); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.reward-hint { font-size: var(--text-xs); color: var(--forum-muted-foreground); }

/* -- 悬赏徽标：编辑器工具栏"悬赏"按钮设置后回显，点 × 取消悬赏 -- */
.forum-bounty-bar { margin: 0 0 var(--space-2); }
.forum-bounty-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid rgba(202, 138, 4, 0.45); border-radius: 999px; background: rgba(234, 179, 8, 0.12); color: #b45309; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1.5; }
.forum-bounty-badge-text::before { content: '\f091'; font-family: FontAwesome; font-style: normal; margin-right: 4px; font-size: 12px; }
.forum-bounty-badge-del { border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.forum-bounty-badge-del:hover { color: var(--state-danger, #dc2626); }
.forum-bounty-modal .forum-bounty-btn-clear { margin-right: auto; color: var(--state-danger, #dc2626); }
.forum-bounty-modal .forum-bounty-btn-clear:hover { background: var(--state-danger-bg, #fef2f2); }

/* -- 帖子红包徽标：编辑器工具栏"红包"按钮设置后回显，点 × 取消红包 -- */
.forum-redpacket-bar { margin: 0 0 var(--space-2); }
.forum-redpacket-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid rgba(220, 38, 38, 0.45); border-radius: 999px; background: rgba(239, 68, 68, 0.12); color: #dc2626; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1.5; }
.forum-redpacket-badge-text::before { content: '🧧'; font-style: normal; margin-right: 4px; font-size: 13px; }
.forum-redpacket-badge-del { border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.forum-redpacket-badge-del:hover { color: var(--state-danger, #dc2626); }
.forum-redpacket-modal .forum-redpacket-btn-clear { margin-right: auto; color: var(--state-danger, #dc2626); }
.forum-redpacket-modal .forum-redpacket-btn-clear:hover { background: var(--state-danger-bg, #fef2f2); }

/* 红包类型 tab 切换：拼手气随机 / 固定金额 */
.forum-redpacket-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 var(--space-3, 12px);
  padding: 4px;
  border-radius: var(--radius-full, 999px);
  background: var(--bg-secondary, #f3f4f6);
}
.forum-redpacket-tab {
  flex: 1;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: var(--text-sm, 13px);
  font-weight: var(--font-medium, 500);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.forum-redpacket-tab:hover { color: var(--text-primary, #111827); }
.forum-redpacket-tab.is-active {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3);
}

/* 详情页红包卡片类型徽标：随机红包 / 固定红包 */
.forum-redpacket-card-type {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-medium, 500);
  line-height: 1.6;
  vertical-align: 1px;
}
.forum-redpacket-card-type.is-random { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.forum-redpacket-card-type.is-fixed { background: rgba(245, 158, 11, 0.15); color: #b45309; }

/* -- 帖子红包卡片：详情页展示红包金额/个数/领取状态 -- */
.forum-redpacket-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(248, 113, 113, 0.04));
}
.forum-redpacket-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}
.forum-redpacket-card-info { flex: 1; min-width: 0; }
.forum-redpacket-card-title {
  font-size: var(--text-base, 15px);
  font-weight: var(--font-semibold, 600);
  color: #dc2626;
  line-height: 1.4;
}
.forum-redpacket-card-sub {
  margin-top: 2px;
  font-size: var(--text-xs, 12px);
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
}
.forum-redpacket-card-action {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  text-decoration: none;
}
.forum-redpacket-card-action:hover { color: #fff; opacity: 0.9; }

/* 帖子列表项红包徽标（标题行红色信封图标） */
.forum-badge-redpacket { background: #fee2e2; color: #dc2626; }

/* -- 回帖红包领取徽标：领取到红包的回帖作者行金色特效徽标（呼吸光效） -- */
.forum-redpacket-claim-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(135deg, #fef3c7, #fde68a 50%, #fbbf24);
  border: 1px solid #f59e0b;
  color: #92400e;
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-medium, 500);
  line-height: 1.6;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
  animation: forum-redpacket-claim-glow 2s ease-in-out infinite;
}
.forum-redpacket-claim-icon { font-style: normal; font-size: 12px; }
.forum-redpacket-claim-text b { font-size: var(--text-sm, 13px); color: #b45309; }
@keyframes forum-redpacket-claim-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.85); }
}

/* 表单校验错误提示 */
.composer-notice-error { background-color: var(--state-danger-bg, #fef2f2); color: var(--state-danger, #dc2626); text-align: left; display: grid; gap: 4px; }
.composer-notice-error p { margin: 0; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .title-input { font-size: var(--text-md); padding: 12px 14px; padding-right: 72px; }
  .classification-row .category-select { width: 100%; }
}

/* ===== 21. 搜索页（bbs 设计稿 search-results） ===== */
.sr-page { display: grid; gap: var(--space-5); }

/* 大型搜索栏 */
.sr-hero { display: grid; gap: var(--space-3); }
.sr-search-bar { display: flex; gap: var(--space-2); align-items: stretch; }
.sr-search-input-wrap { flex: 1; position: relative; }
.sr-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--neutral-400); pointer-events: none; z-index: 1;
}
.sr-search-input {
  width: 100%; height: 48px; padding: 0 16px 0 48px;
  background-color: var(--neutral-50); border: 1.5px solid var(--forum-border);
  border-radius: var(--radius-lg); font-family: inherit; font-size: var(--text-md);
  color: var(--forum-foreground);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}
.sr-search-input:focus {
  outline: none; border-color: var(--forum-ring); background-color: var(--forum-card);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.sr-search-input::placeholder { color: var(--forum-muted-foreground); }
.sr-search-btn { height: 48px; padding: 0 var(--space-6); font-size: var(--text-md); font-weight: var(--font-semibold); border-radius: var(--radius-lg); white-space: nowrap; }
.sr-stats { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; }
.sr-stats strong { color: var(--forum-foreground); font-weight: var(--font-semibold); }

/* 分类 Tabs（下划线式） */
.sr-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--forum-border); padding: 0 var(--space-1); }
.sr-tab {
  position: relative; background: none; border: none; padding: var(--space-3) 0;
  font-family: inherit; font-size: var(--text-base); font-weight: var(--font-medium);
  color: var(--neutral-500); cursor: pointer; transition: color 0.15s ease;
}
.sr-tab:hover:not(:disabled) { color: var(--neutral-700); }
.sr-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.sr-tab[data-active="true"] { color: var(--forum-primary); font-weight: var(--font-semibold); }
.sr-tab[data-active="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background-color: var(--forum-primary); border-radius: 2px 2px 0 0;
}

/* 排序筛选行 */
.sr-filter-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.sr-sort-group { display: inline-flex; padding: 3px; background-color: var(--neutral-100); border-radius: var(--radius-full); gap: 2px; }
.sr-sort-btn {
  border: none; background: transparent; padding: 6px var(--space-4);
  border-radius: var(--radius-full); font-family: inherit; font-size: var(--text-sm);
  font-weight: var(--font-medium); color: var(--neutral-600); cursor: pointer;
  transition: all 0.15s ease; white-space: nowrap;
}
.sr-sort-btn:hover:not(:disabled) { color: var(--neutral-800); }
.sr-sort-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sr-sort-btn[data-active="true"] { background-color: var(--forum-card); color: var(--forum-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.sr-filter-selects { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sr-time-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--forum-border); border-radius: var(--radius-md);
  background-color: var(--forum-card); color: var(--neutral-700);
  font-size: var(--text-sm); font-family: inherit;
  padding: 7px var(--space-8) 7px var(--space-3);
  background-image: linear-gradient(45deg, transparent 50%, var(--neutral-400) 50%), linear-gradient(135deg, var(--neutral-400) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  cursor: pointer; min-width: 110px; transition: border-color 0.15s ease;
}
.sr-time-select:hover { border-color: var(--neutral-300); }
.sr-time-select:focus { outline: none; border-color: var(--forum-ring); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

/* 搜索结果列表 */
.sr-result-list { display: grid; gap: var(--space-4); }
.sr-result-item {
  display: flex; gap: var(--space-4); padding: var(--space-4);
  border: 1px solid var(--forum-border); border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative; overflow: hidden; background-color: var(--forum-card);
}
.sr-result-item:hover { border-color: var(--brand-300); box-shadow: var(--shadow-hover); }
.sr-result-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.sr-result-item.type-post::before { background-color: var(--brand-500); }

.sr-result-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.sr-result-icon.icon-post { background-color: var(--brand-50); color: var(--brand-600); }
.sr-result-icon svg { width: 20px; height: 20px; stroke-width: 2; }

.sr-result-content { flex: 1; min-width: 0; display: grid; gap: 6px; }
.sr-result-title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); line-height: 1.4; margin: 0; }
.sr-result-title a { color: inherit; }
.sr-result-title a:hover { color: var(--forum-primary); }
.sr-result-excerpt {
  font-size: var(--text-sm); color: var(--neutral-600); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-result-meta {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--forum-muted-foreground);
}
.sr-result-meta .meta-type { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--font-medium); }
.sr-result-meta .meta-type.type-post { color: var(--brand-600); }
.meta-dot { opacity: 0.5; }

/* 关键词高亮 */
.hl-keyword {
  background-color: var(--brand-600); color: #ffffff;
  padding: 0 3px; border-radius: 3px; font-weight: var(--font-medium);
}

/* 空状态与搜索引导 */
.sr-empty {
  display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--forum-border); border-radius: var(--radius-lg);
  background-color: var(--neutral-50); text-align: center;
}
.sr-empty-icon { width: 48px; height: 48px; border-radius: var(--radius-full); background-color: var(--neutral-100); display: flex; align-items: center; justify-content: center; color: var(--neutral-400); }
.sr-empty-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.sr-empty-title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); margin: 0; }
.sr-empty-hint { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; }

/* 未搜索初始态容器 */
.sr-initial { display: grid; gap: var(--space-4); }

/* 未搜索初始态：热门标签快捷入口 */
.sr-hot-tags { display: grid; gap: var(--space-3); }
.sr-hot-tags-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--forum-foreground); margin: 0; }
.sr-hot-tags-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 分页容器（沿用 pagination.default 的 forum-paginator） */
.sr-pagination { display: flex; justify-content: center; padding-top: var(--space-2); }

/* 搜索页移动端适配 */
@media (max-width: 640px) {
  .sr-search-input { height: 44px; font-size: var(--text-base); padding-left: 42px; }
  .sr-search-btn { height: 44px; padding: 0 var(--space-4); font-size: var(--text-sm); }
  .sr-search-icon { left: 14px; width: 18px; height: 18px; }
  .sr-tabs { gap: var(--space-4); overflow-x: auto; }
  .sr-filter-row { flex-direction: column; align-items: stretch; }
  .sr-filter-selects { width: 100%; }
  .sr-filter-selects .sr-time-select { flex: 1; min-width: 0; }
  .sr-result-item { padding: var(--space-3); gap: var(--space-3); }
  .sr-result-icon { width: 32px; height: 32px; }
  .sr-result-icon svg { width: 16px; height: 16px; }
  .sr-user-grid, .sr-board-grid, .sr-tag-grid { grid-template-columns: 1fr; }
}

/* ---------- 搜索页多类型结果（用户 / 标签 / 板块） ---------- */

/* Tab 为链接时的展示修正 */
a.sr-tab { text-decoration: none; }
/* 排序按钮为链接时的展示修正 */
a.sr-sort-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* 综合搜索分区（用户/标签/板块预览） */
.sr-section { display: grid; gap: var(--space-3); }
.sr-section-title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); margin: 0; }
.sr-section-title a { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; }
.sr-section-title a:hover { color: var(--forum-primary); }
.sr-section-count { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--forum-muted-foreground); }
.sr-section-more { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--forum-primary); margin-left: var(--space-2); }

/* 用户卡片 */
.sr-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.sr-user-list .sr-user-item { display: flex; align-items: flex-start; gap: var(--space-4); }
.sr-user-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
}
.sr-user-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-hover); }
.sr-user-avatar { width: 44px; height: 44px; font-size: var(--text-md); flex-shrink: 0; }
.sr-user-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sr-user-name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); margin: 0; line-height: 1.4; }
.sr-user-name a { color: inherit; }
.sr-user-name a:hover { color: var(--forum-primary); }
.sr-user-sub { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sr-user-bio { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 标签卡片 */
.sr-tag-list, .sr-board-list { display: block; }
.sr-tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.sr-tag-card {
  display: grid; gap: 4px; padding: var(--space-4);
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sr-tag-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-hover); }
.sr-tag-name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); }
.sr-tag-card:hover .sr-tag-name { color: var(--forum-primary); }
.sr-tag-count { font-size: var(--text-sm); color: var(--forum-muted-foreground); }

/* 板块卡片 */
.sr-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.sr-board-card {
  display: grid; gap: 6px; padding: var(--space-4);
  background-color: var(--forum-card);
  border: 1px solid var(--forum-border); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sr-board-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-hover); }
.sr-board-name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--forum-foreground); margin: 0; }
.sr-board-card:hover .sr-board-name { color: var(--forum-primary); }
.sr-board-desc { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-board-meta { font-size: var(--text-sm); color: var(--forum-muted-foreground); margin: 0; }
/* ============================================================
   独立管理后台（admin-dashboard 设计稿 /manage 页面专用）
   ============================================================ */
.ad-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - var(--header-height)); max-width: var(--layout-max-width); margin: 0 auto; }
.ad-main { background-color: var(--neutral-50); padding: var(--space-6); display: grid; gap: var(--space-6); align-content: start; }

.ad-sidebar {
  background-color: var(--brand-800);
  color: rgba(255,255,255,0.88);
  padding: var(--space-4) 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}
.ad-sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ad-sidebar-logo {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.15); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.ad-sidebar-title { font-size: var(--text-base); font-weight: 600; color: #ffffff; line-height: 1.2; }
.ad-sidebar-sub { font-size: var(--text-xs); opacity: 0.6; margin-top: 2px; }

.ad-side-nav { display: grid; gap: 2px; padding: 0 var(--space-2); }
.ad-side-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius-md);
  color: rgba(255,255,255,0.78); font-size: var(--text-sm); font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
  position: relative;
}
.ad-side-link:hover { background: rgba(255,255,255,0.08); color: #ffffff; text-decoration: none; }
.ad-side-link[data-active="true"], .ad-side-link[data-active-tmp="true"] { background: var(--brand-600); color: #ffffff; }
.ad-side-link:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.ad-badge {
  margin-left: auto; background: rgba(255,255,255,0.2); color: #ffffff;
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}
.ad-badge-danger { background: var(--state-error); }
.ad-side-divider { height: 1px; background: rgba(255,255,255,0.12); margin: var(--space-2) var(--space-3); }

.ad-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ad-page-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--neutral-900); }
.ad-page-sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--neutral-500); }

.ad-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ad-stat-card {
  background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg);
  padding: var(--space-5); display: grid; gap: 8px; position: relative;
  box-shadow: var(--shadow-static);
}
.ad-stat-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.ad-stat-num { font-size: 28px; font-weight: 700; color: var(--neutral-900); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: var(--space-2); }
.ad-stat-label { font-size: var(--text-sm); color: var(--neutral-500); }
.ad-stat-trend { font-size: var(--text-xs); font-weight: 500; margin-top: 2px; }
.ad-trend-up { color: var(--state-success); }
.ad-trend-down { color: var(--neutral-400); }

.ad-charts-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); }
.ad-chart-card {
  background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-static);
}
.ad-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.ad-chart-title { font-size: var(--text-base); font-weight: 600; color: var(--neutral-900); }
.ad-chart-sub { font-size: var(--text-xs); color: var(--neutral-500); }
/* 趋势图为 JS 绘制的 SVG，必须有固定高度的定位容器 */
.ad-chart-body { position: relative; height: 260px; }
.ad-chart-body svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.ad-donut-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: center; padding: var(--space-3) 0; }
.ad-donut {
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(var(--neutral-200) 0 100%);
  position: relative; flex-shrink: 0;
}
.ad-donut-inner {
  position: absolute; inset: 16px; border-radius: 50%;
  background: var(--neutral-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ad-donut-num { font-size: 22px; font-weight: 700; color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.ad-donut-label { font-size: 11px; color: var(--neutral-500); margin-top: 2px; }
.ad-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 120px; }
.ad-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--neutral-700); }
.ad-legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.ad-legend-val { margin-left: auto; font-weight: 600; color: var(--neutral-900); font-variant-numeric: tabular-nums; }

.ad-table-card {
  background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-static);
}
.ad-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-200);
}
.ad-table-title { font-size: var(--text-base); font-weight: 600; color: var(--neutral-900); }
.ad-table-more { font-size: var(--text-sm); color: var(--brand-600); }
.ad-table-more:hover { text-decoration: none; }
.ad-table-scroll { overflow-x: auto; }
.ad-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ad-table th {
  text-align: left; font-weight: 500; color: var(--neutral-500);
  padding: 10px var(--space-5); background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-xs); letter-spacing: 0.04em;
}
.ad-table td {
  padding: 12px var(--space-5); border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-900); vertical-align: top;
}
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table tbody tr { transition: background-color 0.12s ease; }
.ad-table tbody tr:hover { background: var(--neutral-50); }
.ad-post-title { font-weight: 500; color: var(--neutral-900); margin-bottom: 3px; }
.ad-post-excerpt { font-size: var(--text-xs); color: var(--neutral-500); line-height: 1.5; }
.ad-table time { color: var(--neutral-500); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.ad-btn {
  border: 1px solid var(--neutral-200); background: var(--neutral-0);
  padding: 5px 12px; border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: 500; font-family: inherit;
  cursor: pointer; color: var(--neutral-700);
  transition: all 0.12s ease;
}
.ad-btn-approve:hover { border-color: var(--state-success); color: var(--state-success); }
.ad-btn-reject { color: var(--state-error); }
.ad-btn-reject:hover { background: var(--state-error-bg); border-color: var(--state-error); }
.ad-btn-warning { color: var(--state-warning); }
.ad-btn-warning:hover { background: var(--state-warning-bg); border-color: var(--state-warning); }
.ad-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ad-table-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}
.ad-table-count { font-size: var(--text-xs); color: var(--neutral-500); }
.ad-pagination { display: flex; gap: 4px; }
.ad-page-btn {
  min-width: 28px; height: 28px; padding: 0 8px;
  border: 1px solid var(--neutral-200); border-radius: var(--radius-sm);
  background: var(--neutral-0); cursor: pointer;
  font-size: var(--text-xs); color: var(--neutral-700); font-family: inherit;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.ad-page-btn:hover:not(:disabled):not([data-active]) { border-color: var(--brand-600); color: var(--brand-600); }
.ad-page-btn[data-active="true"], .ad-page-btn[data-active-tmp="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #ffffff; }
.ad-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 1024px) {
  .ad-layout { grid-template-columns: 1fr; }
  .ad-sidebar { display: none; }
  .ad-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ad-main { padding: var(--space-4); padding-bottom: calc(var(--space-6) + 52px + env(safe-area-inset-bottom, 0)); }
  .ad-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .ad-stat-card { padding: var(--space-4); }
  .ad-stat-num { font-size: 22px; }
  .ad-page-title { font-size: 18px; }
  .ad-table th, .ad-table td { padding: 10px var(--space-3); }
  .ad-chart-body { height: 200px; }
  .ad-table thead { display: none; }
  .ad-table, .ad-table tbody, .ad-table tr, .ad-table td { display: block; width: 100%; }
  .ad-table tr { border-bottom: 1px solid var(--neutral-200); padding: var(--space-3) 0; }
  .ad-table tr:last-child { border-bottom: 0; }
  .ad-table td { border: 0; padding: 4px var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
  .ad-table td::before { content: attr(data-label); font-size: var(--text-xs); color: var(--neutral-500); font-weight: 500; flex-shrink: 0; }
  .ad-table td.ad-actions { justify-content: flex-end; padding-top: var(--space-2); }
  .ad-table td.ad-actions::before { content: ""; }
  .ad-donut-wrap { flex-direction: column; gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-table tbody tr, .ad-btn, .ad-page-btn, .ad-side-link { transition: none; }
}

/* ============================================================
   管理后台六大功能页组件（筛选栏/表单/标签徽章/用户单元格）
   ============================================================ */

/* 筛选栏 */
.ad-filter-card { background: #ffffff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-5); }
.ad-filter-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ad-filter-form .ad-input[name="keyword"] { flex: 1 1 220px; min-width: 180px; }

/* 输入控件（筛选栏用；设置表单使用主体 .input-field，保持一致） */
.ad-input { padding: 8px 12px; border: 1px solid var(--neutral-200); border-radius: 8px; font-size: 13px; color: var(--forum-foreground, #0f172a); background: #ffffff; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ad-input:focus { border-color: var(--brand-500, #3b82f6); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.ad-select { min-width: 140px; cursor: pointer; }

/* 按钮（功能页补充） */
.ad-btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #ffffff; }
.ad-btn-primary:hover { background: var(--brand-700, #1d4ed8); border-color: var(--brand-700, #1d4ed8); }
.ad-btn-ghost { background: #ffffff; border-color: var(--neutral-200); color: var(--neutral-700, #334155); }
.ad-btn-ghost:hover { border-color: var(--brand-500, #3b82f6); color: var(--brand-600); }

/* 状态徽章 */
.ad-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--text-xs, 12px); font-weight: 500; background: var(--neutral-100, #f1f5f9); color: var(--neutral-600, #475569); margin-right: 4px; white-space: nowrap; }
.ad-tag-success { background: #ecfdf5; color: #059669; }
.ad-tag-warning { background: #fef3c7; color: #d97706; }
.ad-tag-danger { background: #fee2e2; color: #dc2626; }
.ad-tag-brand { background: var(--brand-100, #dbeafe); color: var(--brand-600, #2563eb); }

/* 用户单元格 */
.ad-user-cell { display: flex; align-items: center; gap: 10px; }
.ad-user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ad-user-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-100, #dbeafe); color: var(--brand-600, #2563eb); font-size: 14px; font-weight: 600; }

/* 子版块行 */
.ad-row-child { background: var(--neutral-50, #f8fafc); }
.ad-row-child td:first-child .ad-post-title { padding-left: 8px; color: var(--neutral-600, #475569); }

/* 设置表单：卡片框架用 ad-*，表单内部沿用主体 form-row / input-field / switch 组件（与个人设置页一致） */
.ad-settings-form { max-width: 860px; }
.ad-settings-body { padding: var(--space-4) var(--space-5); }
.ad-settings-body .switch-row { border-bottom: 1px dashed var(--neutral-200); }
.ad-settings-body .form-row:first-child { margin-top: var(--space-4); }
.ad-settings-body .form-row:last-child { margin-bottom: var(--space-4); }
/* 管理设置页人机验证配置行：开启开关后由 JS 控制显隐，显式声明 hidden 防止 grid display 覆盖 */
.captcha-config-row[hidden] { display: none; }
.ad-settings-actions { display: flex; justify-content: flex-end; }
.ad-settings-actions .btn-primary { padding: 10px 40px; }

@media (max-width: 640px) {
  .ad-settings-body { padding: var(--space-4); }
  .ad-settings-body .form-row { flex-direction: column; gap: var(--space-2); }
  .ad-settings-body .form-label { width: auto; text-align: left; padding-top: 0; }
  .ad-filter-form .ad-input { width: 100%; }
}

/* ---- @ 提及链接（帖子/回复正文中被@的用户名可点击） ---- */
.forum-mention-link {
  color: var(--forum-primary);
  font-weight: var(--font-medium);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--forum-primary) 8%, transparent);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.forum-mention-link:hover {
  text-decoration: none;
  background-color: color-mix(in srgb, var(--forum-primary) 15%, transparent);  
}

/* ============================================================
   签到弹窗（iframe 加载主站签到页；shell 布局未引入 forum-legacy.css，样式补齐于此）
   ============================================================ */
.forum-signin-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999; background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.forum-signin-modal-overlay.show { opacity: 1; visibility: visible; }
.forum-signin-modal {
  width: 90%; max-width: 520px; max-height: 85vh;
  background: var(--forum-card, #fff); border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex; flex-direction: column;
  transform: translateY(20px); transition: transform 0.3s ease;
}
.forum-signin-modal-overlay.show .forum-signin-modal { transform: translateY(0); }
.forum-signin-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--forum-border, #f1f5f9);
  font-size: 16px; font-weight: var(--font-semibold, 600); color: var(--neutral-900, #1e293b);
  flex-shrink: 0;
}
.forum-signin-modal-close {
  width: 28px; height: 28px; border: none; background: var(--neutral-100, #f1f5f9);
  border-radius: 6px; font-size: 18px; color: var(--neutral-500, #64748b);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.forum-signin-modal-close:hover { background: var(--neutral-200, #e2e8f0); color: var(--neutral-800, #334155); }
.forum-signin-modal-body { flex: 1; overflow: hidden; min-height: 400px; }
.forum-signin-modal-body iframe { width: 100%; height: 100%; min-height: 400px; border: none; }

@media (max-width: 768px) {
  .forum-signin-modal { width: 95%; max-height: 90vh; border-radius: 8px; }
  .forum-signin-modal-body { min-height: 600px; }
  .forum-signin-modal-body iframe { min-height: 600px; }
}

/* ---- 快捷滚动按钮组：滚动超 200px 显示回顶，未到底部显示下滚 ---- */
.forum-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--forum-border);
  color: var(--forum-muted-foreground);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s, color 0.15s, box-shadow 0.15s;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/* 回顶按钮在上，下滚按钮在下（44px 按钮高 + 8px 间距） */
.forum-back-to-top.forum-scroll-top {
  bottom: 76px;
}

.forum-back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.forum-back-to-top:hover {
  background: var(--forum-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.forum-back-to-top-percent {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--forum-muted-foreground);
  background: #fff;
  border-radius: 10px;
  padding: 1px 5px;
  border: 1px solid var(--forum-border);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

@media (max-width: 640px) {
  /* 移动端：缩小并抬高，避开底部导航栏（52px + 安全区） */
  .forum-back-to-top {
    bottom: calc(60px + env(safe-area-inset-bottom, 0));
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .forum-back-to-top.forum-scroll-top {
    bottom: calc(108px + env(safe-area-inset-bottom, 0));
  }
  .forum-back-to-top-percent {
    font-size: 9px;
    padding: 1px 4px;
  }
}