/* ==========================================================
   社区功能 - 样式表
   设计系统：线条图标 + 柔和圆角 + 统一间距节奏
   ========================================================== */

/* ---------- 图标基础（Lucide 风格） ---------- */
.ic{
  width:1em; height:1em;
  display:inline-block;
  vertical-align:-.15em;
  flex-shrink:0;
  color:currentColor;
}
.ic-sm{width:.9em; height:.9em}
.ic-md{width:1.1em; height:1.1em}
.ic-lg{width:1.4em; height:1.4em}
.ic-xl{width:1.8em; height:1.8em}
.ic-2x{width:2em; height:2em}
.ic-3x{width:3em; height:3em}

/* ---------- 色板 ---------- */
/* 社区主色直接继承全局主题（style.css 中 :root / [data-theme=...] / [data-festival=...]
   暴露的 --p / --pl / --bg / --border / --c-primary-rgb），切换主题/节日时社区自动跟随。
   分类语义色（学习/生活/求助等）保留固定色——它们是分类标签语义，不应跟主题变。 */
:root{
  --c-primary-rgb: 232,115,74;       /* 默认主色 RGB（仅在无 data-theme 覆盖时用）*/
  --c-bg:        var(--bg, #fafaf8);
  --c-surface:   #ffffff;
  --c-surface-2: #faf6f2;
  --c-border:    var(--border, #f0e4d8);
  --c-border-2:  #f5f0eb;
  --c-text:      #2a2a2a;
  --c-text-2:    #666;
  --c-text-3:    #999;
  --c-text-4:    #bbb;
  --c-primary:   var(--p,  #E8734A);  /* 主色：跟随全局主题 */
  --c-primary-l: var(--pl, #FFB88A);  /* 浅主色：跟随全局主题 */
  --c-primary-bg:rgba(var(--c-primary-rgb), .10); /* 由主色派生的淡背景 */
  --c-accent-y:  #F0A020;   /* 金色(收藏) */
  --c-accent-y-bg:#FFF7E6;
  --c-accent-g:  #2D7D2D;   /* 绿(学习分类) */
  --c-accent-g-bg:#DEF7DE;
  --c-accent-b:  #1976D2;   /* 蓝(求助) */
  --c-accent-b-bg:#E3F2FD;
  --c-accent-p:  #8B5CF6;   /* 紫(生活) */
  --c-accent-p-bg:#F3EBFF;
  --c-accent-r:  #D9534F;   /* 红(危险/举报) */
  --c-accent-r-bg:#FFEBEE;
  --c-shadow:    0 2px 12px rgba(0,0,0,.04);
  --c-shadow-2:  0 4px 20px rgba(var(--c-primary-rgb),.12);
}

/* ---------- 社区容器 ---------- */
.cmt-root{
  padding-bottom:24px;
  color:var(--c-text);
}

/* ---------- 卡片基础 ---------- */
.cmt-card{
  background:var(--c-surface);
  border-radius:16px;
  border:1px solid var(--c-border);
  box-shadow:var(--c-shadow);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.cmt-card:hover{border-color:var(--c-primary-l)}
.cmt-card:active{transform:scale(.995)}

/* ---------- 身份卡 ---------- */
.cmt-identity{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  margin-bottom:12px;
  background:linear-gradient(135deg,#fff 0%,#fefaf5 100%);
  border:1px solid var(--c-border);
  border-radius:18px;
  cursor:pointer;
  transition:all .2s;
}
.cmt-identity:hover{box-shadow:var(--c-shadow-2); border-color:var(--c-primary-l)}

.cmt-avatar{
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-l));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.2);
}
.cmt-avatar img{width:100%; height:100%; object-fit:cover}
.cmt-avatar .ic{width:60%; height:60%}
.cmt-avatar.cmt-avatar-sm{width:32px; height:32px}
.cmt-avatar.cmt-avatar-md{width:40px; height:40px}
.cmt-avatar.cmt-avatar-lg{width:56px; height:56px}
.cmt-avatar.cmt-avatar-xl{width:72px; height:72px}

/* ---------- 顶部工具栏（搜索 + 动作） ---------- */
.cmt-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.cmt-search{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
}
.cmt-search .ic{
  position:absolute;
  left:14px;
  color:var(--c-text-3);
  pointer-events:none;
}
.cmt-search input{
  width:100%;
  height:40px;
  padding:0 16px 0 40px;
  border:1.5px solid var(--c-border);
  border-radius:20px;
  font-size:13px;
  background:var(--c-surface);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.cmt-search input:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.1);
}

/* ---------- 动作按钮（圆形图标按钮） ---------- */
.cmt-iconbtn{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  color:var(--c-text-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:all .15s;
  flex-shrink:0;
}
.cmt-iconbtn:hover{
  border-color:var(--c-primary-l);
  color:var(--c-primary);
  transform:translateY(-1px);
}
.cmt-iconbtn:active{transform:translateY(0)}
.cmt-iconbtn .ic{width:18px; height:18px}
.cmt-iconbtn.is-active{
  background:var(--c-primary-bg);
  color:var(--c-primary);
  border-color:var(--c-primary-l);
}
.cmt-iconbtn .cmt-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:10px;
  background:var(--c-accent-r);
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  border:1.5px solid #fff;
  box-sizing:border-box;
}
/* 纯小红点（不显示数字）：低调提示"有未读" */
.cmt-iconbtn .cmt-badge-dot{
  top:2px; right:2px;
  min-width:9px;
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  border:1.5px solid #fff;
  box-shadow:0 0 0 1px rgba(217,83,79,.25);
}

/* ---------- 分类 Tab（胶囊切换） ---------- */
.cmt-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:4px 0;
  margin-bottom:10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cmt-tabs::-webkit-scrollbar{display:none}
.cmt-tab{
  flex-shrink:0;
  padding:8px 14px;
  border-radius:16px;
  font-size:12.5px;
  font-weight:600;
  background:transparent;
  border:1.5px solid transparent;
  color:var(--c-text-2);
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:all .15s;
}
.cmt-tab:hover{color:var(--c-text)}
.cmt-tab.is-active{
  background:var(--c-primary);
  color:#fff;
  box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.3);
}
.cmt-tab .ic{width:14px; height:14px}

/* ---------- 排序切换 ---------- */
.cmt-sort{
  display:inline-flex;
  background:var(--c-surface-2);
  border-radius:18px;
  padding:3px;
  margin-bottom:10px;
}
.cmt-sort button{
  padding:6px 14px;
  border-radius:15px;
  font-size:12.5px;
  font-weight:600;
  border:none;
  background:transparent;
  color:var(--c-text-2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:all .15s;
}
.cmt-sort button.is-active{
  background:#fff;
  color:var(--c-primary);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.cmt-sort .ic{width:13px; height:13px}

/* ---------- 帖子卡片（列表项） ---------- */
.cmt-post{
  padding:14px;
  margin-bottom:10px;
  cursor:pointer;
}
.cmt-post-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  min-width:0;
}
.cmt-post-author{
  font-size:13px;
  font-weight:700;
  color:var(--c-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.cmt-post-meta{
  font-size:11px;
  color:var(--c-text-4);
  margin-left:auto;
  flex-shrink:0;
}
.cmt-post-title{
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  color:var(--c-text);
  margin-bottom:6px;
  word-break:break-word;
}
.cmt-post-body{
  font-size:13px;
  line-height:1.65;
  color:var(--c-text-2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.cmt-post-imgs{
  display:flex;
  gap:6px;
  margin-top:10px;
  flex-wrap:wrap;
}
.cmt-post-imgs img{
  width:calc((100% - 12px) / 3);
  aspect-ratio:1;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--c-border-2);
}
.cmt-post-foot{
  display:flex;
  gap:16px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--c-border-2);
  font-size:12px;
  color:var(--c-text-3);
  align-items:center;
}
.cmt-post-foot .cmt-stat{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.cmt-post-foot .cmt-stat .ic{width:14px; height:14px}

/* ---------- 标签/徽章 ---------- */
.cmt-tag{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:10px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.02em;
  flex-shrink:0;
}
.cmt-tag .ic{width:11px; height:11px}
.cmt-tag-chat{background:var(--c-primary-bg); color:var(--c-primary)}
.cmt-tag-study{background:var(--c-accent-g-bg); color:var(--c-accent-g)}
.cmt-tag-life{background:var(--c-accent-p-bg); color:var(--c-accent-p)}
.cmt-tag-help{background:var(--c-accent-b-bg); color:var(--c-accent-b)}

/* 状态徽章 */
.cmt-badge-anon{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px 7px;
  background:var(--c-surface-2);
  color:var(--c-text-3);
  font-size:10px;
  font-weight:600;
  border-radius:8px;
}
.cmt-badge-anon .ic{width:10px; height:10px}
.cmt-badge-mine{
  padding:2px 7px;
  background:var(--c-primary);
  color:#fff;
  font-size:10px;
  font-weight:600;
  border-radius:8px;
}
.cmt-badge-pin{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px 7px;
  background:#FFF3CD;
  color:#A06A00;
  font-size:10px;
  font-weight:700;
  border-radius:8px;
}
.cmt-badge-pin .ic{width:11px; height:11px}
/* 求助贴状态徽章 */
.cmt-badge-solved{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  background:linear-gradient(135deg,#DEF7DE 0%,#C3F0C3 100%);
  color:#1F6B1F;
  font-size:10.5px;
  font-weight:700;
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(45,125,45,.18) inset;
}
.cmt-badge-solved .ic{width:11px; height:11px}
.cmt-badge-help-open{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  background:#E3F2FD;
  color:#1565C0;
  font-size:10.5px;
  font-weight:700;
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(21,101,192,.18) inset;
}
.cmt-badge-help-open .ic{width:11px; height:11px}
.cmt-badge-author{
  padding:1px 6px;
  background:var(--c-primary);
  color:#fff;
  font-size:9.5px;
  font-weight:600;
  border-radius:7px;
  letter-spacing:.02em;
}

/* AI 审核状态徽章（仅作者本人可见） */
.cmt-badge-ai{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 7px;
  font-size:10px;
  font-weight:700;
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
  white-space:nowrap;
}
.cmt-badge-ai .ic{width:10px; height:10px}
.cmt-badge-ai-pending,
.cmt-badge-ai-processing{background:#FFF3DA; color:#B06A00}
.cmt-badge-ai-pending .ic,
.cmt-badge-ai-processing .ic{animation:cmtAiSpin 1.2s linear infinite}
@keyframes cmtAiSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.cmt-badge-ai-review{background:#E3F2FD; color:#1565C0}
.cmt-badge-ai-hidden{background:#FCE8E6; color:#C5221F}
.cmt-badge-ai-recovered{background:#E6F4EA; color:#1E6F3E}
.cmt-badge-ai-pass{background:var(--c-surface-2); color:var(--c-text-3)}
/* failed 视觉与 review 一致（LLM 异常走人工，对作者统一"等待人工复核"） */
.cmt-badge-ai-failed{background:#E3F2FD; color:#1565C0}

/* AI 状态提示横幅（帖子/回复详情页，醒目） */
.cmt-ai-notice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  margin:8px 0 12px;
  font-size:12.5px;
  line-height:1.55;
  border:1px solid transparent;
}
.cmt-ai-notice .cmt-ai-notice-icon{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:1px;
}
.cmt-ai-notice-title{
  font-weight:700;
  margin-right:6px;
}
.cmt-ai-notice-body{
  flex:1;
  min-width:0;
  color:inherit;
}
.cmt-ai-notice-meta{
  margin-top:4px;
  font-size:11px;
  opacity:.75;
}
/* 变体：审核中（橙） */
.cmt-ai-notice-pending,
.cmt-ai-notice-processing{
  background:#FFF8ED; color:#8A4A00;
  border-color:#FFE0A8;
}
.cmt-ai-notice-pending .ic,
.cmt-ai-notice-processing .ic{animation:cmtAiSpin 1.2s linear infinite}
/* 待复核（蓝） */
.cmt-ai-notice-review{
  background:#EAF4FE; color:#0D4A8C;
  border-color:#B6D8F7;
}
/* 已隐藏（红） */
.cmt-ai-notice-hidden{
  background:#FDECEA; color:#9B1D14;
  border-color:#F5B8B1;
}
/* 已恢复（绿） */
.cmt-ai-notice-recovered{
  background:#E7F5EC; color:#14552F;
  border-color:#A8D9B8;
}
/* 已通过（灰） */
.cmt-ai-notice-pass{
  background:var(--c-surface-2); color:var(--c-text-3);
  border-color:var(--c-border);
}
/* 审核异常 → 与 review 同样样式（对作者暴露为"等待人工复核"） */
.cmt-ai-notice-failed{
  background:#EAF4FE; color:#0D4A8C;
  border-color:#B6D8F7;
}
/* 回复里的紧凑版 —— 用更小字号与内边距 */
.cmt-reply .cmt-ai-notice{
  padding:6px 10px;
  font-size:11.5px;
  margin:4px 0 6px;
}

/* ---------- 互动工具栏（点赞/收藏/浏览） ---------- */
.cmt-actions{
  display:flex;
  gap:6px;
  padding:12px 0;
  border-top:1.5px solid var(--c-border-2);
  border-bottom:1.5px solid var(--c-border-2);
  margin-bottom:14px;
  flex-wrap:wrap;
  align-items:center;
}
.cmt-action-btn{
  background:none;
  border:none;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  color:var(--c-text-3);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:all .15s;
}
.cmt-action-btn:hover{color:var(--c-text-2); background:var(--c-surface-2)}
.cmt-action-btn .ic{width:16px; height:16px}
.cmt-action-btn.is-liked{
  color:var(--c-primary);
  background:var(--c-primary-bg);
}
.cmt-action-btn.is-favorited{
  color:var(--c-accent-y);
  background:var(--c-accent-y-bg);
}

.cmt-view-stat{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--c-text-4);
  font-size:12.5px;
}
.cmt-view-stat .ic{width:14px; height:14px}

/* ---------- 发帖/主要操作按钮 ---------- */
.cmt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 18px;
  height:40px;
  border-radius:20px;
  border:none;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  background:var(--c-surface);
  color:var(--c-text-2);
  border:1.5px solid var(--c-border);
}
.cmt-btn .ic{width:15px; height:15px}
.cmt-btn:hover{border-color:var(--c-primary-l); color:var(--c-primary)}
.cmt-btn:disabled{opacity:.5; cursor:not-allowed}
.cmt-btn.cmt-btn-primary{
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-l));
  color:#fff;
  border-color:transparent;
  box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.25);
}
.cmt-btn.cmt-btn-primary:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.35);
}
.cmt-btn.cmt-btn-primary:disabled{background:#ddd; color:#aaa; box-shadow:none; transform:none}
.cmt-btn.cmt-btn-danger{background:var(--c-accent-r-bg); color:var(--c-accent-r); border-color:#ffd1d1}
.cmt-btn.cmt-btn-ghost{background:transparent; border-color:transparent; color:var(--c-text-3)}
.cmt-btn.cmt-btn-ghost:hover{background:var(--c-surface-2); border-color:transparent}
.cmt-btn.cmt-btn-sm{height:32px; padding:0 12px; font-size:12px; border-radius:16px}
.cmt-btn.cmt-btn-xs{height:26px; padding:0 10px; font-size:11.5px; border-radius:13px}
.cmt-btn.cmt-btn-block{width:100%; height:44px; font-size:14px; border-radius:22px}

/* 浮动发帖按钮 */
.cmt-fab{
  position:fixed;
  right:18px;
  bottom:90px;
  width:52px; height:52px;
  border-radius:26px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-l));
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(var(--c-primary-rgb),.4);
  transition:transform .15s, box-shadow .15s;
  z-index:90;
}
.cmt-fab:hover{transform:translateY(-2px) scale(1.05); box-shadow:0 8px 26px rgba(var(--c-primary-rgb),.5)}
.cmt-fab .ic{width:24px; height:24px}

/* ---------- 评论楼层 ---------- */
.cmt-reply{
  padding:14px 0;
  border-bottom:1px solid var(--c-border-2);
}
.cmt-reply:last-child{border-bottom:none}
.cmt-reply-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.cmt-reply-name{
  font-size:13px;
  font-weight:700;
  color:var(--c-text);
}
.cmt-reply-time{
  font-size:11px;
  color:var(--c-text-4);
  margin-left:auto;
}
.cmt-reply-body{
  font-size:13.5px;
  line-height:1.75;
  color:var(--c-text-2);
  padding-left:40px;
  white-space:pre-wrap;
  word-break:break-word;
}
.cmt-reply-body.is-deleted{
  color:var(--c-text-4);
  font-style:italic;
  font-size:12.5px;
}
.cmt-reply-tools{
  padding-left:40px;
  margin-top:6px;
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}

/* 引用回复浮动按钮 */
.cmt-quote-fab{
  position:fixed;
  z-index:260;
  transform:translate(-50%,-100%);
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-l));
  color:#fff;
  border:none;
  padding:6px 14px;
  border-radius:18px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.4);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  animation:cmtQuoteFabIn .15s ease-out;
}
.cmt-quote-fab .ic{width:13px; height:13px}
.cmt-quote-fab:active{transform:translate(-50%,-100%) scale(.95)}
@keyframes cmtQuoteFabIn{
  from{opacity:0; transform:translate(-50%,-90%) scale(.9)}
  to  {opacity:1; transform:translate(-50%,-100%) scale(1)}
}

/* 引用块在回复输入框中的视觉提示（textarea 不渲染样式，但 placeholder 提示可保留） */

/* ---------- 链接卡片（onebox 轻量版） ---------- */
.cmt-link-card{
  --cmt-link-accent: var(--c-primary);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  margin:4px 0;
  background:var(--c-surface-2);
  border:1.5px solid var(--c-border);
  border-radius:10px;
  text-decoration:none;
  color:var(--c-text);
  font-size:12.5px;
  line-height:1.4;
  max-width:100%;
  overflow:hidden;
  transition:all .15s;
  vertical-align:middle;
}
.cmt-link-card:hover{
  border-color:var(--cmt-link-accent);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.cmt-link-card:active{transform:translateY(0)}
.cmt-link-icon{
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--cmt-link-accent);
  padding:4px;
  background:#fff;
  border-radius:8px;
  border:1px solid var(--c-border-2);
}
.cmt-link-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:1px;
}
.cmt-link-site{
  font-weight:700;
  font-size:11.5px;
  color:var(--cmt-link-accent);
  letter-spacing:.02em;
}
.cmt-link-url{
  font-size:11px;
  color:var(--c-text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* 楼层永久链接：高亮闪烁 2.4s */
.cmt-reply-highlight,.cmt-subreply.cmt-reply-highlight{
  animation:cmtReplyHighlight 2.4s ease-out;
  border-radius:10px;
}
@keyframes cmtReplyHighlight{
  0%   { background:rgba(var(--c-primary-rgb),.18); box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.2); }
  60%  { background:rgba(var(--c-primary-rgb),.08); box-shadow:0 0 0 2px rgba(var(--c-primary-rgb),.1); }
  100% { background:transparent; box-shadow:none; }
}

/* 被采纳的回复：整楼淡绿底 + 绿色左边框 */
.cmt-reply.cmt-reply-accepted{
  position:relative;
  background:linear-gradient(90deg,rgba(46,160,67,.06) 0%,rgba(46,160,67,0) 60%);
  border-left:3px solid #2EA043;
  padding-left:12px;
  margin-left:-15px;
  padding-right:2px;
  border-radius:6px 10px 10px 6px;
}
/* "楼主采纳" 横幅 */
.cmt-accepted-banner{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  padding:8px 12px;
  background:linear-gradient(135deg,#2EA043 0%,#238636 100%);
  color:#fff;
  border-radius:10px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(46,160,67,.25);
}
.cmt-accepted-banner .ic{width:14px;height:14px;flex-shrink:0}
.cmt-accepted-banner>span{flex:1}
.cmt-accepted-undo{
  background:rgba(255,255,255,.22);
  color:#fff;
  border:none;
  padding:3px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.cmt-accepted-undo:hover{background:rgba(255,255,255,.34)}

/* 工具栏 "采纳" 按钮：绿色强调款 */
.cmt-btn.cmt-btn-accept{
  background:linear-gradient(135deg,#2EA043 0%,#238636 100%);
  color:#fff;
  border:none;
  font-weight:700;
  box-shadow:0 1px 3px rgba(46,160,67,.25);
}
.cmt-btn.cmt-btn-accept:hover{
  filter:brightness(1.06);
  box-shadow:0 2px 6px rgba(46,160,67,.35);
}
.cmt-btn.cmt-btn-accept .ic{color:#fff}

/* 楼中楼容器 */
.cmt-subreplies{
  margin-top:10px;
  margin-left:40px;
  padding:10px 12px;
  background:var(--c-surface-2);
  border-left:3px solid var(--c-border);
  border-radius:0 10px 10px 0;
}
.cmt-subreply{
  padding:6px 0;
  border-bottom:1px dashed var(--c-border);
  font-size:12.5px;
}
.cmt-subreply:last-child{border-bottom:none}
.cmt-subreply-more{
  margin-top:6px;
  padding:4px 0;
  font-size:11.5px;
  color:var(--c-primary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-weight:600;
}
.cmt-subreply-more .ic{width:12px; height:12px}

/* ---------- 空状态 ---------- */
.cmt-empty{
  text-align:center;
  padding:48px 20px;
  color:var(--c-text-4);
  font-size:13px;
}
.cmt-empty .ic{
  width:48px; height:48px;
  color:var(--c-border);
  margin-bottom:10px;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- 加载更多 / 列表底部 ---------- */
.cmt-loadmore{
  text-align:center;
  padding:14px 0;
  font-size:13px;
  color:var(--c-text-3);
  cursor:pointer;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.cmt-loadmore:hover{color:var(--c-primary)}
.cmt-loadmore .ic{width:14px; height:14px}
.cmt-list-end{
  text-align:center;
  padding:18px 0 26px;
  font-size:11.5px;
  color:var(--c-text-4);
  letter-spacing:.18em;
  user-select:none;
}

/* ---------- 头像选择网格（名片弹窗用） ---------- */
.cmt-avatar-picker{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  padding:8px;
  background:var(--c-surface-2);
  border-radius:12px;
  margin-bottom:10px;
  max-height:200px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.cmt-avatar-picker::-webkit-scrollbar{width:4px}
.cmt-avatar-picker::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}
.cmt-avatar-option{
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  border:2px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--c-text-2);
  transition:all .15s;
}
.cmt-avatar-option .ic{width:52%; height:52%}
.cmt-avatar-option:hover{border-color:var(--c-border); color:var(--c-primary)}
.cmt-avatar-option.is-active{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
  transform:scale(1.08);
  box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.3);
}

/* ---------- 性别选择 ---------- */
.cmt-gender-group{display:flex; gap:8px}
.cmt-gender-btn{
  flex:1;
  height:38px;
  border-radius:19px;
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-text-2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:all .15s;
}
.cmt-gender-btn .ic{width:14px; height:14px}
.cmt-gender-btn.is-active{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
  box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.2);
}

/* ---------- 弹窗内部标题栏 ---------- */
.cmt-modal-title{
  font-size:17px;
  font-weight:800;
  color:var(--c-text);
  display:flex;
  align-items:center;
  gap:6px;
}
.cmt-modal-title .ic{width:20px; height:20px; color:var(--c-primary)}
.cmt-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1.5px solid var(--c-border);
  background:linear-gradient(180deg,#fdfcfb,#ffffff);
  position:sticky;
  top:0;
  z-index:5;
}
.cmt-close{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--c-surface-2);
  color:var(--c-text-3);
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s;
}
.cmt-close .ic{width:15px; height:15px}
.cmt-close:hover{background:#f0e4d8; color:var(--c-text)}

/* 表单字段组 */
.cmt-field{margin-bottom:14px}
.cmt-field-label{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:700;
  color:var(--c-text);
  margin-bottom:6px;
}
.cmt-field-hint{font-size:11px; color:var(--c-text-4); font-weight:400}
.cmt-input,.cmt-textarea{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--c-border);
  border-radius:12px;
  font-size:14px;
  background:var(--c-surface);
  outline:none;
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
  line-height:1.6;
}
.cmt-input:focus,.cmt-textarea:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.08);
}
.cmt-textarea{min-height:120px; resize:vertical; line-height:1.7}

/* ---------- 草稿恢复横幅 ---------- */
.cmt-draft-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin-bottom:14px;
  background:linear-gradient(135deg,#FFF7E6 0%,#FFF3EC 100%);
  border:1.5px solid #f5d895;
  border-radius:12px;
  font-size:12.5px;
}
.cmt-draft-banner > .ic{
  width:18px; height:18px;
  color:var(--c-accent-y);
  flex-shrink:0;
}
.cmt-draft-text{flex:1; min-width:0}
.cmt-draft-title{
  font-weight:700;
  color:var(--c-text);
  font-size:12.5px;
  margin-bottom:2px;
}
.cmt-draft-preview{
  font-size:11.5px;
  color:var(--c-text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmt-draft-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.cmt-draft-banner-sm{
  padding:8px 10px;
  margin-bottom:8px;
  border-radius:10px;
}
.cmt-draft-banner-sm > .ic{width:14px; height:14px}
.cmt-draft-banner-sm .cmt-draft-title{font-size:11.5px}
.cmt-draft-banner-sm .cmt-draft-preview{font-size:11px}

/* ---------- 通用小统计行 ---------- */
.cmt-stat{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--c-text-3);
}
.cmt-stat .ic{width:13px; height:13px}

/* ---------- 通知列表 ---------- */
.cmt-notif-item{
  padding:12px 18px;
  border-bottom:1px solid var(--c-border-2);
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
  transition:background .15s;
}
.cmt-notif-item:hover{background:var(--c-surface-2)}
.cmt-notif-item.is-unread{background:var(--c-primary-bg)}
.cmt-notif-icon{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--c-surface-2);
  color:var(--c-text-3);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1.5px solid var(--c-border);
}
.cmt-notif-icon .ic{width:18px; height:18px}
.cmt-notif-icon.is-reply{background:var(--c-primary-bg); color:var(--c-primary); border-color:var(--c-primary-l)}
.cmt-notif-icon.is-like{background:var(--c-accent-y-bg); color:var(--c-accent-y); border-color:#f5d895}
.cmt-notif-icon.is-report{background:var(--c-accent-g-bg); color:var(--c-accent-g); border-color:#a8d8a8}
.cmt-notif-icon.is-danger{background:var(--c-accent-r-bg); color:var(--c-accent-r); border-color:#f5b5b5}
.cmt-notif-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-primary);
  flex-shrink:0;
  margin-top:8px;
}

/* ============================================================
   高级配置面板：Bottom Sheet / 全屏 Composer / Segmented / Hero
   ============================================================ */

/* ---------- Bottom Sheet 底部抽屉 ---------- */
.cmt-sheet-mask{
  position:fixed; inset:0;
  background:rgba(20,12,8,.42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:210;
  display:flex; align-items:flex-end; justify-content:center;
}
.cmt-sheet{
  width:100%;
  max-width:560px;
  max-height:92vh;
  background:linear-gradient(180deg,#fffdfb 0%,#fff 18%);
  border-radius:22px 22px 0 0;
  box-shadow:0 -8px 32px rgba(0,0,0,.12);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:cmtSheetUp .48s cubic-bezier(.32,.72,0,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.cmt-sheet-handle{
  width:36px; height:4px;
  background:#e4d8cc;
  border-radius:2px;
  margin:9px auto 4px;
  flex-shrink:0;
}
.cmt-sheet-head{
  display:flex; align-items:center;
  padding:8px 18px 12px;
  gap:10px;
  flex-shrink:0;
}
.cmt-sheet-title{
  flex:1;
  font-size:17px; font-weight:800;
  color:var(--c-text);
  display:flex; align-items:center; gap:8px;
  letter-spacing:-.2px;
}
.cmt-sheet-title .ic{width:20px; height:20px; color:var(--c-primary)}
.cmt-sheet-close{
  width:32px; height:32px; border-radius:50%;
  border:none; background:var(--c-surface-2);
  color:var(--c-text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cmt-sheet-close:hover{background:var(--c-border); color:var(--c-text)}
.cmt-sheet-close .ic{width:16px; height:16px}
.cmt-sheet-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 16px 12px;
  overscroll-behavior:contain;
}
.cmt-sheet-body::-webkit-scrollbar{width:4px}
.cmt-sheet-body::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}
.cmt-sheet-footer{
  padding:12px 18px 14px;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--c-border-2);
  flex-shrink:0;
}

@keyframes cmtFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cmtSheetUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes cmtSlideIn{
  from{transform:translateY(20px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

/* ---------- 全屏 Composer ---------- */
.cmt-composer{
  position:fixed; inset:0;
  background:var(--c-surface);
  z-index:210;
  display:flex; flex-direction:column;
  animation:cmtComposerUp .4s cubic-bezier(.32,.72,0,1);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@keyframes cmtComposerUp{
  from{transform:translateY(18px); opacity:0}
  to{transform:translateY(0); opacity:1}
}
.cmt-composer-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(255,253,251,.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--c-border-2);
  flex-shrink:0;
  position:sticky; top:0; z-index:2;
}
.cmt-composer-close{
  width:36px; height:36px; border-radius:50%;
  border:none; background:transparent;
  color:var(--c-text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cmt-composer-close:hover{background:var(--c-surface-2); color:var(--c-text)}
.cmt-composer-close .ic{width:20px; height:20px}
.cmt-composer-title{
  flex:1; min-width:0;
  font-size:15px; font-weight:700; color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-composer-publish{
  height:34px; padding:0 18px;
  border-radius:17px;
  background:linear-gradient(135deg,var(--c-primary),#d9521c);
  color:#fff;
  border:none;
  font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; transition:all .18s;
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.32);
}
.cmt-composer-publish:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(var(--c-primary-rgb),.4)}
.cmt-composer-publish:disabled{
  background:#e8e8e8; color:#bbb;
  box-shadow:none; cursor:not-allowed;
  transform:none;
}
.cmt-composer-publish .ic{width:14px; height:14px}
.cmt-composer-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px 18px 14px;
}
.cmt-composer-body::-webkit-scrollbar{width:4px}
.cmt-composer-body::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}

/* Composer 大标题输入 */
.cmt-composer-title-input{
  width:100%;
  font-size:22px; font-weight:800;
  color:var(--c-text);
  background:transparent;
  border:none;
  outline:none;
  padding:6px 0;
  line-height:1.35;
  letter-spacing:-.3px;
  font-family:inherit;
}
.cmt-composer-title-input::placeholder{color:#ccc; font-weight:700}
.cmt-composer-title-input:focus::placeholder{color:#d9d9d9}

/* Composer 正文 textarea */
.cmt-composer-text{
  width:100%;
  min-height:160px;
  font-size:15px;
  color:var(--c-text);
  background:transparent;
  border:none;
  outline:none;
  resize:none;
  line-height:1.65;
  padding:10px 0;
  font-family:inherit;
}
.cmt-composer-text::placeholder{color:#c8c8c8}

/* Composer 分隔线 */
.cmt-composer-divider{
  height:1px; background:var(--c-border-2);
  margin:12px 0;
}

/* Composer 底部工具条 */
.cmt-composer-toolbar{
  display:flex; align-items:center; gap:4px;
  padding:10px 14px;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid var(--c-border-2);
  flex-shrink:0;
}
.cmt-composer-tool{
  width:40px; height:40px;
  border:none; background:transparent;
  border-radius:10px;
  color:var(--c-text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cmt-composer-tool:hover{background:var(--c-surface-2); color:var(--c-primary)}
.cmt-composer-tool.is-active{color:var(--c-primary); background:var(--c-primary-bg)}
.cmt-composer-tool .ic{width:20px; height:20px}
.cmt-composer-tool:disabled{opacity:.4; cursor:not-allowed}
.cmt-composer-toolbar-spacer{flex:1}

/* ---------- Hero 名片预览卡片 ---------- */
.cmt-hero{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px;
  margin-bottom:14px;
  background:linear-gradient(135deg,#FFF5EC 0%,#FFE9D6 60%,#FFD9BD 100%);
  border-radius:16px;
  border:1px solid rgba(var(--c-primary-rgb),.18);
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.08);
  position:relative;
  overflow:hidden;
}
.cmt-hero::before{
  content:'';
  position:absolute; top:-24px; right:-24px;
  width:110px; height:110px;
  background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 65%);
  pointer-events:none;
}
.cmt-hero-avatar{
  width:54px; height:54px; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border:2.5px solid #fff;
  box-shadow:0 4px 12px rgba(var(--c-primary-rgb),.22);
  color:var(--c-primary);
  position:relative;
  overflow:hidden;
}
.cmt-hero-avatar img{width:100%; height:100%; object-fit:cover}
.cmt-hero-avatar .ic{width:28px; height:28px}
.cmt-hero-avatar .emoji{font-size:26px}
.cmt-hero-info{flex:1; min-width:0; position:relative}
.cmt-hero-name{
  font-size:16px; font-weight:800;
  color:var(--c-text);
  display:flex; align-items:center; gap:6px;
  letter-spacing:-.2px;
  margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-hero-name .ic{width:14px; height:14px; color:var(--c-text-3); flex-shrink:0}
.cmt-hero-name .ic.gender-male{color:#1976D2}
.cmt-hero-name .ic.gender-female{color:#E91E63}
.cmt-hero-bio{
  font-size:12.5px;
  color:var(--c-text-2);
  line-height:1.45;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
}
.cmt-hero-placeholder{font-style:italic; color:var(--c-text-3)}

/* ---------- 分组小标题 ---------- */
.cmt-section-title{
  font-size:12.5px; font-weight:700;
  color:var(--c-text-2);
  margin:10px 0 8px;
  display:flex; align-items:center; gap:6px;
  letter-spacing:.2px;
}
.cmt-section-title::before{
  content:'';
  width:3px; height:13px;
  background:var(--c-primary);
  border-radius:1.5px;
}
.cmt-section-title .cmt-section-hint{
  margin-left:auto;
  font-size:11px; font-weight:500; color:var(--c-text-3);
}

/* ---------- Segmented Pill 滑块（性别） ---------- */
.cmt-segmented{
  display:flex;
  background:var(--c-surface-2);
  border-radius:12px;
  padding:4px;
  position:relative;
  border:1px solid var(--c-border-2);
  --seg-pos:0;
  --seg-count:3;
}
.cmt-segmented-item{
  flex:1;
  height:36px;
  border:none; background:transparent;
  border-radius:9px;
  font-size:13px; font-weight:600;
  color:var(--c-text-2);
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; transition:color .18s;
  -webkit-tap-highlight-color:transparent;
  position:relative; z-index:1;
}
.cmt-segmented-item .ic{width:14px; height:14px; transition:transform .25s}
.cmt-segmented-item.is-active{
  color:#fff;
}
.cmt-segmented-item.is-active .ic{transform:scale(1.1)}
.cmt-segmented-thumb{
  position:absolute;
  top:4px; bottom:4px;
  width:calc((100% - 8px) / var(--seg-count));
  left:calc((100% - 8px) / var(--seg-count) * var(--seg-pos) + 4px);
  background:linear-gradient(135deg,var(--c-primary),#d9521c);
  border-radius:9px;
  box-shadow:0 3px 10px rgba(var(--c-primary-rgb),.35);
  transition:left .32s cubic-bezier(.34,1.56,.64,1), width .32s cubic-bezier(.34,1.56,.64,1);
  z-index:0;
}

/* ---------- Floating Label 浮动标签输入 ---------- */
.cmt-float{
  position:relative;
  margin-bottom:14px;
}
.cmt-float-input{
  width:100%; height:52px;
  padding:18px 14px 6px;
  font-size:14.5px; color:var(--c-text);
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  border-radius:12px;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
  font-family:inherit;
}
.cmt-float-input:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.10);
}
.cmt-float-input::placeholder{color:transparent}
.cmt-float-label{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  font-size:14px; color:var(--c-text-3);
  pointer-events:none;
  transition:all .18s ease-out;
  background:transparent;
  padding:0 4px;
}
.cmt-float-input:focus ~ .cmt-float-label,
.cmt-float-input:not(:placeholder-shown) ~ .cmt-float-label{
  top:14px;
  font-size:11px;
  color:var(--c-primary);
  font-weight:600;
  transform:translateY(-50%);
}
.cmt-float-counter{
  position:absolute;
  right:12px; top:14px;
  font-size:11px; color:var(--c-text-3);
  pointer-events:none;
  font-weight:500;
}
.cmt-float-textarea{
  width:100%; min-height:88px;
  padding:22px 14px 12px;
  font-size:14.5px; color:var(--c-text);
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  border-radius:12px;
  outline:none;
  resize:vertical;
  line-height:1.55;
  transition:border-color .18s, box-shadow .18s;
  font-family:inherit;
}
.cmt-float-textarea:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.10);
}
.cmt-float-textarea::placeholder{color:transparent}
.cmt-float-textarea ~ .cmt-float-label{top:18px; transform:translateY(0)}
.cmt-float-textarea:focus ~ .cmt-float-label,
.cmt-float-textarea:not(:placeholder-shown) ~ .cmt-float-label{top:8px; transform:translateY(0)}

/* ---------- iOS Toggle Switch ---------- */
.cmt-toggle{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.cmt-toggle-track{
  width:42px; height:24px;
  border-radius:12px;
  background:#d8d2cc;
  position:relative;
  transition:background .25s ease-out;
  flex-shrink:0;
}
.cmt-toggle-thumb{
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  transition:left .28s cubic-bezier(.34,1.56,.64,1);
}
.cmt-toggle.is-on .cmt-toggle-track{background:linear-gradient(135deg,var(--c-primary),#d9521c)}
.cmt-toggle.is-on .cmt-toggle-thumb{left:20px}
.cmt-toggle-label{
  font-size:13px; font-weight:600; color:var(--c-text);
  display:inline-flex; align-items:center; gap:4px;
}
.cmt-toggle-label .ic{width:14px; height:14px; color:var(--c-text-3)}
.cmt-toggle.is-on .cmt-toggle-label .ic{color:var(--c-primary)}
/* 评论身份切换条（小号 toggle + 当前身份提示） */
.cmt-reply-identity{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:8px; padding:0 2px;
  min-width:0;
}
.cmt-reply-identity-who{
  font-size:12px; color:var(--c-text-3); line-height:1.4;
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-reply-identity-who strong{ color:var(--c-text); font-weight:700; }
/* 小号 toggle：外面包一层 padding 扩大手机上的可点区域，避免只有小滑块能点 */
.cmt-reply-identity .cmt-toggle-sm{
  flex-shrink:0;
  padding:8px 8px 8px 12px;
  margin:-4px -4px;              /* 抵消 padding 占位，视觉不变但热区变大 */
  border-radius:16px;
  min-height:44px;               /* 触控标准最小热区 */
  position:relative;
  z-index:2;                     /* 浮在同排文字之上，避免被遮挡点不到 */
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.cmt-reply-identity .cmt-toggle-sm:active{ background:rgba(0,0,0,.06); }
.cmt-toggle-sm .cmt-toggle-track{ width:36px; height:20px; border-radius:10px; }
.cmt-toggle-sm .cmt-toggle-thumb{ width:16px; height:16px; }
.cmt-toggle-sm.is-on .cmt-toggle-thumb{ left:18px; }
.cmt-toggle-sm .cmt-toggle-label{ font-size:12px; white-space:nowrap; }
/* ---------- 头像分组 Tabs（横向滑动） ---------- */
.cmt-avatar-tabs{
  display:flex; gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 8px;
  scrollbar-width:none;
}
.cmt-avatar-tabs::-webkit-scrollbar{display:none}
.cmt-avatar-tab{
  flex-shrink:0;
  height:30px;
  padding:0 12px;
  border-radius:15px;
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-text-2);
  font-size:12px; font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.cmt-avatar-tab .ic{width:13px; height:13px}
.cmt-avatar-tab:hover{border-color:var(--c-primary-l); color:var(--c-primary)}
.cmt-avatar-tab.is-active{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
  box-shadow:0 3px 10px rgba(var(--c-primary-rgb),.3);
}

/* 头像选项升级（弹簧选中态 + Halo 光晕） */
.cmt-avatar-option{position:relative}
.cmt-avatar-option.is-active{
  animation:cmtPick .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cmtPick{
  0%{transform:scale(.85)}
  60%{transform:scale(1.18)}
  100%{transform:scale(1.08)}
}
.cmt-avatar-option.is-active::after{
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid var(--c-primary);
  opacity:.35;
  pointer-events:none;
  animation:cmtHalo .8s ease-out;
}
@keyframes cmtHalo{
  0%{transform:scale(.6); opacity:.7}
  100%{transform:scale(1.25); opacity:0}
}

/* ---------- Composer 内紧凑 chip 分类 ---------- */
.cmt-chip-row{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:6px 0 4px;
}
.cmt-chip{
  height:30px; padding:0 12px;
  border-radius:15px;
  background:var(--c-surface-2);
  border:1.5px solid transparent;
  color:var(--c-text-2);
  font-size:12px; font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cmt-chip .ic{width:13px; height:13px}
.cmt-chip:hover{color:var(--c-primary); background:var(--c-primary-bg)}
.cmt-chip.is-active{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
  box-shadow:0 3px 10px rgba(var(--c-primary-rgb),.3);
}

/* Composer 身份小条 */
.cmt-identity-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:var(--c-surface-2);
  border-radius:12px;
  margin-bottom:14px;
}
.cmt-identity-bar .name{
  flex:1; min-width:0;
  font-size:13px; font-weight:600; color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-identity-bar .hint{font-size:11px; color:var(--c-text-3); font-weight:400}

/* Composer 图片网格升级 */
.cmt-img-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media (max-width:380px){.cmt-img-grid{grid-template-columns:repeat(3,1fr)}}
.cmt-img-cell{
  position:relative;
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  background:var(--c-surface-2);
  border:1.5px solid var(--c-border-2);
}
.cmt-img-cell img{width:100%; height:100%; object-fit:cover; display:block}
.cmt-img-cell .rm{
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.cmt-img-cell .rm .ic{width:11px; height:11px}
.cmt-img-add{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  border:2px dashed var(--c-border);
  color:var(--c-text-3);
  font-size:11px; gap:4px;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cmt-img-add:hover{border-color:var(--c-primary-l); color:var(--c-primary); background:var(--c-primary-bg)}
.cmt-img-add .ic{width:24px; height:24px}

/* ---------- 举报按钮（红色文字"举报TA"，无图标） ---------- */
.cmt-report-btn{
  color:var(--c-accent-r);
  background:transparent;
  border:1.5px solid transparent;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
  padding:4px 10px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s, border-color .15s, transform .12s;
  font-family:inherit;
}
.cmt-report-btn:hover,.cmt-report-btn:focus-visible{
  background:var(--c-accent-r-bg);
  color:#a83432;
  border-color:transparent;
  outline:none;
}
.cmt-report-btn:active{transform:scale(.94)}
/* 与 .cmt-btn / .cmt-btn-xs 组合时强制覆盖灰边白底 */
.cmt-btn.cmt-report-btn{
  background:transparent;
  border-color:transparent;
  color:var(--c-accent-r);
}
.cmt-btn.cmt-report-btn:hover{
  background:var(--c-accent-r-bg);
  color:#a83432;
  border-color:transparent;
  transform:none;
}

/* 升级版草稿条 */
.cmt-draft-pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  margin-bottom:14px;
  background:linear-gradient(135deg,#FFF8EE,#FFEFD9);
  border:1px solid #F5D89A;
  border-radius:12px;
  font-size:12.5px;
}
.cmt-draft-pill .ic{width:16px; height:16px; color:var(--c-accent-y); flex-shrink:0}
.cmt-draft-pill .txt{flex:1; min-width:0}
.cmt-draft-pill .ttl{font-weight:700; color:var(--c-text); margin-bottom:1px}
.cmt-draft-pill .prv{color:var(--c-text-2); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmt-draft-pill .acts{display:flex; gap:5px; flex-shrink:0}

/* ==========================================================
   讨论广场 · 视觉升级 v2（2026）
   - 顶部 Feed Header：标题 + 搜索合并为 Hero
   - 分类 Tab + 排序 合并为一行
   - 帖子卡片左侧分类色条 + 更强层次
   ========================================================== */

/* Feed 顶部 Hero */
.cmt-feed-header{
  position:relative;
  padding:18px 18px 14px;
  margin:0 -2px 14px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb),.10) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(240,160,32,.08) 0%, transparent 50%),
    linear-gradient(135deg, #fffaf5 0%, #fff 50%, #fff7f0 100%);
  border:1px solid var(--c-border);
  box-shadow:var(--c-shadow);
  overflow:hidden;
}
.cmt-feed-header::after{
  content:'';
  position:absolute;
  top:-40px; right:-30px;
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(var(--c-primary-rgb),.12) 0%, transparent 70%);
  pointer-events:none;
}
.cmt-feed-heading{position:relative; margin-bottom:14px}
.cmt-feed-heading h2{
  font-size:22px;
  font-weight:800;
  color:var(--c-text);
  margin:0 0 3px;
  letter-spacing:.02em;
  background:linear-gradient(135deg, #2a2a2a 0%, var(--c-primary) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}
.cmt-feed-heading p{
  font-size:12px;
  color:var(--c-text-3);
  margin:0;
  letter-spacing:.02em;
}
.cmt-feed-header .cmt-toolbar{margin-bottom:0}

/* 搜索结果控制台（替代旧 cmt-search-hint） */
.cmt-search-panel{
  margin-bottom:14px;
  background:linear-gradient(135deg, var(--c-primary-bg) 0%, #fff 110%);
  border-radius:14px;
  border:1px solid var(--c-primary-l);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(var(--c-primary-rgb),.08);
}
.cmt-search-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px 9px;
  border-bottom:1px dashed var(--c-border-2);
  font-size:12.5px;
  color:var(--c-text-2);
  flex-wrap:wrap;
  gap:8px;
}
.cmt-search-summary{flex:1; min-width:160px; line-height:1.7}
.cmt-search-summary strong{color:var(--c-text); font-weight:700}
.cmt-search-count{
  display:inline-block;
  padding:0 7px; min-width:22px; height:20px; line-height:20px;
  border-radius:10px;
  background:var(--c-primary);
  color:#fff;
  font-weight:700;
  font-size:11.5px;
  text-align:center;
  margin:0 3px;
}
.cmt-search-count-detail{
  font-size:11px; color:var(--c-text-3); margin-left:2px;
}
.cmt-search-back{
  color:var(--c-primary);
  cursor:pointer;
  font-weight:600;
  display:inline-flex; align-items:center; gap:3px;
  white-space:nowrap;
  font-size:12.5px;
}
.cmt-search-back .ic{width:12px; height:12px}
.cmt-search-controls{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px 9px;
  flex-wrap:wrap;
}
.cmt-search-types{
  display:flex; gap:4px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:10px;
  padding:3px;
  flex:1; min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.cmt-search-types::-webkit-scrollbar{display:none}
.cmt-search-types button{
  background:transparent; border:none;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px;
  font-size:12px; font-weight:600;
  color:var(--c-text-3);
  cursor:pointer;
  border-radius:8px;
  transition:background .18s, color .18s;
  white-space:nowrap;
}
.cmt-search-types button .ic{width:13px; height:13px}
.cmt-search-types button:hover{color:var(--c-text)}
.cmt-search-types button.is-active{
  background:linear-gradient(135deg, var(--c-primary), var(--c-primary-l));
  color:#fff;
  box-shadow:0 2px 6px rgba(var(--c-primary-rgb),.32);
}
.cmt-search-type-num{
  display:inline-block;
  padding:0 5px; min-width:18px; height:16px; line-height:16px;
  border-radius:8px;
  background:rgba(var(--c-primary-rgb),.14);
  color:var(--c-primary);
  font-size:10.5px; font-weight:700;
  text-align:center;
}
.cmt-search-types button.is-active .cmt-search-type-num{
  background:rgba(255,255,255,.28); color:#fff;
}
.cmt-search-sorts{
  display:flex; gap:4px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:10px;
  padding:3px;
  flex-shrink:0;
}
.cmt-search-sorts button{
  background:transparent; border:none;
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px;
  font-size:11.5px; font-weight:600;
  color:var(--c-text-3);
  cursor:pointer;
  border-radius:8px;
  transition:background .18s, color .18s;
}
.cmt-search-sorts button .ic{width:12px; height:12px}
.cmt-search-sorts button.is-active{
  background:rgba(var(--c-primary-rgb),.12);
  color:var(--c-primary);
}

/* 搜索分组标题（"帖子" / "评论"） */
.cmt-search-section-title{
  display:flex; align-items:center; gap:6px;
  margin:14px 4px 8px;
  font-size:12.5px; font-weight:700;
  color:var(--c-text-2);
}
.cmt-search-section-title .ic{width:13px; height:13px; color:var(--c-primary)}
.cmt-search-section-num{
  display:inline-block;
  padding:0 6px; min-width:18px; height:18px; line-height:18px;
  border-radius:9px;
  background:var(--c-primary-bg);
  color:var(--c-primary);
  font-weight:700;
  font-size:11px;
  text-align:center;
}

/* 搜索结果中的"评论卡片"（点击进入帖子 + 锚定该楼） */
.cmt-search-reply{
  margin-bottom:10px;
  padding:11px 13px 12px;
  cursor:pointer;
  transition:transform .15s, box-shadow .18s, border-color .18s;
  border:1px solid var(--c-border);
}
.cmt-search-reply:hover{
  transform:translateY(-1px);
  border-color:var(--c-primary-l);
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.12);
}
.cmt-search-reply-topic{
  display:flex; align-items:center; gap:6px;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px dashed var(--c-border-2);
  font-size:12px;
}
.cmt-search-reply-topic .cmt-tag{flex-shrink:0}
.cmt-search-reply-topic-title{
  flex:1; min-width:0;
  font-weight:600;
  color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-search-reply-arrow{
  width:14px; height:14px;
  color:var(--c-text-4);
  flex-shrink:0;
}
.cmt-search-reply-body{
  display:flex; gap:10px; align-items:flex-start;
}
.cmt-search-reply-author{
  font-size:12px; font-weight:600;
  color:var(--c-text-2);
  display:flex; align-items:center; gap:4px;
  margin-bottom:4px;
}
.cmt-search-reply-meta{
  font-size:11px; color:var(--c-text-4); font-weight:500;
  display:inline-flex; align-items:center; gap:3px;
}
.cmt-search-reply-meta .ic{width:11px; height:11px}
.cmt-search-reply-snippet{
  font-size:13px;
  color:var(--c-text);
  line-height:1.65;
  word-break:break-word;
  /* 限制 3 行 + 省略号（含 webkit 前缀以兼容老版浏览器） */
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 分类 + 排序 合并行（sticky 在 navbar 下方，z-index 低于 navbar） */
.cmt-filter-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding:0 2px;
  position:sticky;
  /* 留出 navbar (50px) 高度，避免遮挡顶部"已有 N 位经贸同学使用"徽章 */
  top:50px;
  /* 必须低于 .navbar 的 z-index:10，否则会盖住顶部徽章 */
  z-index:8;
  background:
    linear-gradient(to bottom, var(--c-bg) 0%, var(--c-bg) 80%, rgba(250,250,248,0) 100%);
  padding-top:6px;
  padding-bottom:4px;
}
.cmt-filter-bar .cmt-tabs{
  flex:1;
  min-width:0;
  margin-bottom:0;
  padding:0;
}
.cmt-filter-bar .cmt-sort{
  flex-shrink:0;
  margin-bottom:0;
}

/* 分类 Tab 激活态：不同分类用对应色 */
.cmt-tab.cmt-tab-chat.is-active{background:var(--c-primary); box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.3)}
.cmt-tab.cmt-tab-study.is-active{background:var(--c-accent-g); box-shadow:0 2px 8px rgba(45,125,45,.28)}
.cmt-tab.cmt-tab-life.is-active{background:var(--c-accent-p); box-shadow:0 2px 8px rgba(139,92,246,.3)}
.cmt-tab.cmt-tab-help.is-active{background:var(--c-accent-b); box-shadow:0 2px 8px rgba(25,118,210,.3)}

/* ---------- 帖子卡片视觉升级 ---------- */
.cmt-post{
  position:relative;
  padding:16px 16px 14px 20px;   /* 左内边距给色条 */
  margin-bottom:8px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
/* 左侧分类色条 */
.cmt-post::before{
  content:'';
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:3px;
  background:var(--c-border-2);
  border-radius:0 3px 3px 0;
  transition:background .2s;
}
.cmt-post.cmt-post-cat-chat::before{background:linear-gradient(180deg,var(--c-primary) 0%,var(--c-primary-l) 100%)}
.cmt-post.cmt-post-cat-study::before{background:linear-gradient(180deg,var(--c-accent-g) 0%,#6FBF73 100%)}
.cmt-post.cmt-post-cat-life::before{background:linear-gradient(180deg,var(--c-accent-p) 0%,#B794F6 100%)}
.cmt-post.cmt-post-cat-help::before{background:linear-gradient(180deg,var(--c-accent-b) 0%,#64B5F6 100%)}

.cmt-post:hover{
  border-color:var(--c-primary-l);
  box-shadow:0 6px 18px rgba(var(--c-primary-rgb),.10);
  transform:translateY(-1px);
}
.cmt-post:active{transform:translateY(0)}

/* 置顶帖子：背景微金 */
.cmt-post.cmt-post-pinned{
  background:linear-gradient(180deg, #FFFBF0 0%, #fff 40%);
  border-color:#F3DCA0;
}
.cmt-post.cmt-post-pinned::before{
  background:linear-gradient(180deg, #F0A020 0%, #FFD47A 100%);
  width:4px;
}

/* 已解决求助贴：绿色调 */
.cmt-post.cmt-post-solved{
  background:linear-gradient(180deg, rgba(46,160,67,.04) 0%, #fff 40%);
}
.cmt-post.cmt-post-solved::before{
  background:linear-gradient(180deg, #2EA043 0%, #6FCF73 100%);
  width:4px;
}

/* 帖子标题字号与行距调整 */
.cmt-post-title{
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.55;
  margin:8px 0 6px;
  color:var(--c-text);
}

/* 正文字号微调 + 行高 */
.cmt-post-body{
  font-size:13px;
  line-height:1.7;
  color:var(--c-text-2);
}

/* 列表卡片之间的分隔优化：连贯感 */
.cmt-post-foot{
  padding-top:10px;
  margin-top:12px;
  border-top:1px dashed var(--c-border-2);
  gap:18px;
}
.cmt-post-foot .cmt-stat{
  opacity:.72;
  transition:opacity .15s, color .15s;
}
.cmt-post:hover .cmt-post-foot .cmt-stat{opacity:1}

/* 身份卡片升级 Hero CTA 感 */
.cmt-identity{
  padding:16px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb),.14) 0%, transparent 70%),
    linear-gradient(135deg, #fff 0%, #fffaf5 100%);
  border:1px solid var(--c-border);
  box-shadow:0 2px 12px rgba(var(--c-primary-rgb),.05);
  transition:box-shadow .2s, transform .15s;
}
.cmt-identity:hover{
  box-shadow:0 8px 24px rgba(var(--c-primary-rgb),.14);
  transform:translateY(-1px);
}
.cmt-identity .cmt-btn-primary{
  padding:8px 16px;
  border-radius:14px;
  font-weight:700;
  font-size:13px;
  box-shadow:0 4px 12px rgba(var(--c-primary-rgb),.3);
}

/* ==========================================================
   话题详情页 · 视觉精修
   ========================================================== */
.cmt-detail-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:18px 18px 24px;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
/* 顶部装饰条：按分类着色（静态顶条，避免和 sticky header 冲突） */
.cmt-detail-scroll::before{
  content:'';
  display:block;
  height:3px;
  margin:-18px -18px 14px;
  background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-l) 100%);
}
.cmt-detail-scroll.cmt-detail-cat-chat::before{background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-l) 100%)}
.cmt-detail-scroll.cmt-detail-cat-study::before{background:linear-gradient(90deg, var(--c-accent-g) 0%, #6FBF73 100%)}
.cmt-detail-scroll.cmt-detail-cat-life::before{background:linear-gradient(90deg, var(--c-accent-p) 0%, #B794F6 100%)}
.cmt-detail-scroll.cmt-detail-cat-help::before{background:linear-gradient(90deg, var(--c-accent-b) 0%, #64B5F6 100%)}
.cmt-detail-scroll.cmt-detail-solved::before{background:linear-gradient(90deg, #2EA043 0%, #6FCF73 100%)}

/* 作者信息条 */
.cmt-topic-author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.cmt-topic-author-info{
  flex:1;
  min-width:0;
}
.cmt-topic-author-line{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:3px;
}
.cmt-topic-author-name{
  font-size:14.5px;
  font-weight:700;
  color:var(--c-text);
  cursor:pointer;
  transition:color .15s;
}
.cmt-topic-author-name:hover{color:var(--c-primary)}
.cmt-topic-meta{
  font-size:11.5px;
  color:var(--c-text-4);
  letter-spacing:.02em;
}

/* 作者操作按钮区 */
.cmt-topic-actions{
  display:flex;
  gap:6px;
  margin-bottom:16px;
  justify-content:flex-end;
}
.cmt-btn.cmt-btn-edit{
  background:var(--c-primary-bg);
  color:var(--c-primary);
  border-color:var(--c-primary-l);
}
.cmt-btn.cmt-btn-edit:hover{
  background:var(--c-primary);
  color:#fff;
}

/* 详情页大标题 */
.cmt-topic-title-detail{
  font-size:20px;
  font-weight:800;
  color:var(--c-text);
  line-height:1.5;
  margin:0 0 12px;
  letter-spacing:.01em;
  word-break:break-word;
}

/* 详情页正文 */
.cmt-topic-content{
  font-size:14.5px;
  color:var(--c-text);
  line-height:1.9;
  margin-bottom:14px;
  word-break:break-word;
}

/* 详情页图片 - 缩略图正方形网格（点击看原图） */
.cmt-topic-imgs{
  display:grid;
  gap:6px;
  margin-bottom:16px;
}
/* 1 张：单图较大但不全宽，~50% */
.cmt-topic-imgs.tn-1{grid-template-columns:1fr; max-width:240px}
/* 2 张：2 列 */
.cmt-topic-imgs.tn-2{grid-template-columns:repeat(2, 1fr); max-width:75%}
/* 3 张：3 列 */
.cmt-topic-imgs.tn-3{grid-template-columns:repeat(3, 1fr)}
/* 4 张：2x2 */
.cmt-topic-imgs.tn-4{grid-template-columns:repeat(2, 1fr); max-width:75%}
/* 5-9 张：3 列网格 */
.cmt-topic-imgs.tn-5,
.cmt-topic-imgs.tn-6,
.cmt-topic-imgs.tn-7,
.cmt-topic-imgs.tn-8,
.cmt-topic-imgs.tn-9{grid-template-columns:repeat(3, 1fr)}

.cmt-topic-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--c-surface-2);
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--c-border-2);
  transition:transform .2s, box-shadow .2s;
}
.cmt-topic-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:pointer;
  animation:cmtThumbFadeIn .35s ease-out;
}
.cmt-topic-thumb:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

@media (max-width:480px){
  .cmt-topic-imgs{gap:4px}
  .cmt-topic-imgs.tn-1{max-width:60%}
  .cmt-topic-imgs.tn-2{max-width:88%}
  .cmt-topic-imgs.tn-4{max-width:80%}
}

/* 修复 stat 排序：原 style="margin-left:0" 抽到 class */
.cmt-view-stat-replies{margin-left:0}

/* ---------- 回复列表标题 ---------- */
.cmt-replies-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 0 12px;
  margin:18px -2px 12px;
  border-top:1px solid var(--c-border-2);
  border-bottom:1px dashed var(--c-border-2);
  position:sticky;
  top:0;
  background:#fff;
  z-index:3;
}
.cmt-replies-header .ic{
  width:18px; height:18px;
  color:var(--c-primary);
  flex-shrink:0;
}
.cmt-replies-title{
  font-size:15px;
  font-weight:800;
  color:var(--c-text);
  letter-spacing:.02em;
}
.cmt-replies-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 7px;
  border-radius:10px;
  background:var(--c-primary-bg);
  color:var(--c-primary);
  font-size:11.5px;
  font-weight:700;
}
/* 空状态：回复 */
.cmt-empty-replies{
  padding:32px 20px !important;
  background:linear-gradient(180deg, var(--c-surface-2) 0%, #fff 100%);
  border-radius:14px;
  border:1px dashed var(--c-border);
}

/* ---------- 回复楼层升级 ---------- */
.cmt-reply{
  position:relative;
  padding:14px 12px 14px 14px;
  border-bottom:1px solid var(--c-border-2);
  border-radius:10px;
  transition:background .15s;
}
.cmt-reply:hover{
  background:linear-gradient(90deg, rgba(var(--c-primary-rgb),.025) 0%, transparent 90%);
}
.cmt-reply:last-child{border-bottom:none}

/* 已采纳回复：覆盖默认 padding 不变 hover 效果 */
.cmt-reply.cmt-reply-accepted:hover{
  background:linear-gradient(90deg,rgba(46,160,67,.10) 0%,rgba(46,160,67,0) 60%);
}

/* ---------- 详情页底部回复输入区 ---------- */
.cmt-reply-bar{
  flex-shrink:0;
  padding:10px 16px 12px;
  border-top:1px solid var(--c-border-2);
  background:linear-gradient(180deg, #fdfcfb 0%, #fff 100%);
  box-shadow:0 -4px 12px rgba(0,0,0,.03);
}
/* "回复某某" 提示条 */
.cmt-reply-to-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 12px;
  margin-bottom:8px;
  background:var(--c-primary-bg);
  border-radius:14px;
  font-size:12px;
  color:var(--c-text-2);
  animation:cmtReplyPillIn .25s ease-out;
}
@keyframes cmtReplyPillIn{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}
.cmt-reply-to-text{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.cmt-reply-to-text .ic{
  width:13px; height:13px;
  color:var(--c-primary);
}
.cmt-reply-to-text strong{
  color:var(--c-primary);
  font-weight:700;
  margin:0 2px;
}
.cmt-reply-to-cancel{
  cursor:pointer;
  color:var(--c-text-3);
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:8px;
  transition:background .15s, color .15s;
}
.cmt-reply-to-cancel:hover{
  color:var(--c-accent-r);
  background:rgba(217,83,79,.08);
}
.cmt-reply-to-cancel .ic{width:11px; height:11px}

/* 输入行 */
.cmt-reply-input-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.cmt-reply-input{
  flex:1;
  min-width:0;
  height:42px;
  padding:0 18px;
  border:1.5px solid var(--c-border);
  border-radius:21px;
  font-size:14px;
  background:#fff;
  outline:none;
  color:var(--c-text);
  transition:border-color .15s, box-shadow .15s;
  font-family:inherit;
  box-sizing:border-box;
}
.cmt-reply-input::placeholder{color:var(--c-text-4)}
.cmt-reply-input:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12);
}
.cmt-reply-send{
  min-width:76px;
  height:42px;
  padding:0 18px;
  border-radius:21px;
  font-size:13.5px;
  font-weight:700;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(var(--c-primary-rgb),.25);
}
.cmt-reply-send:disabled{
  background:#e8e8e8;
  color:#bbb;
  box-shadow:none;
}

/* 评论框：图片上传按钮（输入行左侧） */
.cmt-reply-pick{
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  background:var(--c-bg-soft, #f5f5f7);
  color:var(--c-text-3);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid var(--c-border-2, transparent);
  transition:transform .12s ease, background .18s, color .18s;
}
.cmt-reply-pick:hover:not(:disabled){
  background:rgba(var(--c-primary-rgb),.08);
  color:var(--c-primary);
}
.cmt-reply-pick:active:not(:disabled){ transform:scale(.94); }
.cmt-reply-pick:disabled{ opacity:.45; cursor:not-allowed }
.cmt-reply-pick .ic{ width:18px; height:18px }

/* 评论框：发送前的图片预览 */
.cmt-reply-img-preview{
  margin:6px 0;
}
.cmt-reply-img-thumb{
  position:relative;
  display:inline-block;
  width:84px;
  height:84px;
  border-radius:10px;
  overflow:hidden;
  background:#f5f5f7;
  border:1px solid var(--c-border-2);
}
.cmt-reply-img-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:zoom-in;
  display:block;
}
.cmt-reply-img-remove{
  position:absolute;
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  padding:0;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s;
}
.cmt-reply-img-remove:hover{ background:rgba(0,0,0,.8) }
.cmt-reply-img-remove .ic{ width:11px; height:11px }

/* 评论列表：已发送图片缩略图 */
.cmt-reply-imgs{
  margin-top:6px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.cmt-reply-img{
  max-width:160px;
  max-height:160px;
  border-radius:10px;
  cursor:zoom-in;
  border:1px solid var(--c-border-2);
  object-fit:cover;
  display:block;
}

/* ==========================================================
   通用 modal-box 升级（社区弹窗）
   - 编辑/举报/通知/收藏 都用 .cmt-mbox
   ========================================================== */

/* 修复：触摸屏在社区弹窗滑动时穿透到底层帖子列表
   原因：社区弹窗用 .modal-mask 全屏遮罩 + 内部滚动容器（.cmt-notif-list 等）。
         当 list 滚到顶/底后，浏览器把触摸事件沿 scroll chain 继续传给 body
         → 底层帖子列表跟着滑动。
   方案：
     1. modal 本体不滚动，只允许内部滚动容器滚动
     2. 弹窗打开时由 JS 给 body/html 加 .cmt-body-locked 并恢复原 scrollTop
     3. iOS 由 JS 额外阻断滚动链 */
.modal-mask{
  overscroll-behavior:contain;
  overflow:hidden;
}
.cmt-sheet-mask,
.cmt-composer{
  overscroll-behavior:contain;
}
.community-detail-modal{
  overflow:hidden;
  min-height:0;
  overscroll-behavior:contain;
}
.community-detail-modal .cmt-modal-head{
  flex:0 0 auto;
}
.community-detail-modal > .cmt-modal-head{
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
}
.community-detail-modal.cmt-userpage .cmt-userpage-head{
  padding-top:calc(24px + env(safe-area-inset-top, 0px));
}
.community-detail-modal .cmt-reply-bar{
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
.modal-box,
.modal-box.cmt-mbox,
.community-detail-modal,
.cmt-detail-scroll,
.cmt-userpage-list,
.cmt-sheet-body,
.cmt-composer-body,
.cmt-avatar-picker,
.cmt-notif-list,
.cmt-favorites-list,
.cmt-edit-body,
.cmt-edit-form-body,
.cmt-mbox-body,
.cmt-modal-scroll{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* 由 app.js 切换：任何社区浮层打开时立刻加 .cmt-overlay-open。
   ★ 这里曾经有一条 body.…-locked .content{position:relative; z-index:9000}，
     它是"橙条"的真正根因，已删除：把 .content 提到 9000 之后，feed 卡片会
     反过来盖在 z-index:10 的吸顶导航之上——页面滚动过之后，卡片正好压住导航栏，
     只在 .content 左右各 14px 的内边距缝隙里漏出导航的橙色，卡片圆角处还会显得"圆润"。
     实测（滚动 300px，y=25 横扫）：提层级后 x=14..360 最上层是卡片、x=1..13 与
     x=361..374 是透明的 .content（漏出下面的橙色导航）。
     而这条规则本来就不需要：社区所有浮层 z-index 都 ≥200，本身已经压过
     .tabbar(100)、.navbar(10)、.cmt-fab(90)；唯一更高的抽奖横幅(9990)由下面单独隐藏。 */
/* 抽奖横幅 z-index 9990 会压在面板之上，必须立刻撤走 */
body.cmt-overlay-open .lottery-guide-banner{
  opacity:0;
  visibility:hidden;
  pointer-events:none !important;
  transition:opacity .18s ease-out, visibility .18s;
}
/* 浮层期间底层的导航/菜单栏不可点（视觉不动，只断交互） */
body.cmt-overlay-open .navbar,
body.cmt-overlay-open .tabbar,
body.cmt-overlay-open .festival-banner,
body.cmt-overlay-open .cmt-fab{
  pointer-events:none !important;
}

/* 由 app.js 切换：真正的滚动锁。
   ★ 关键：全屏面板（话题详情/个人主页/全屏发帖）会把这个 class 推迟到面板盖满屏幕之后
     才加，因为 body:position:fixed 会让 position:sticky 的顶部导航瞬间掉回文档流原位
     （页面滚动过之后就是"顶部瞬间消失"）。推迟之后，这个位移发生在不透明面板底下，看不见。
     局部弹窗（居中弹窗/底部抽屉）仍然立刻加锁，并同时隐藏导航栏——和一直以来的行为相同。 */
html.cmt-body-locked,
body.cmt-body-locked{
  overflow:hidden !important;
  overscroll-behavior:none;
}
body.cmt-body-locked .navbar,
body.cmt-body-locked .tabbar,
body.cmt-body-locked .festival-banner{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ------------------------------------------------------------------
   全屏面板的遮罩：移动端不要黑灰遮罩。
   面板本身是铺满全屏的白色页面，遮罩在它上升的那半秒里只会造成
   「原页面 → 黑灰 → 白」的亮度来回跳变，这就是"被闪一下"的根源。
   移动端直接让遮罩透明，白色面板从下方盖上来即可（原生 App 的做法）。
   桌面端面板只占中间 500px、盖不住整页，遮罩仍然需要。
   ------------------------------------------------------------------ */
.modal-mask.cmt-mask-cover{background:transparent}
@media(min-width:680px){
  .modal-mask.cmt-mask-cover{background:rgba(0,0,0,.4)}
}

/* ------------------------------------------------------------------
   帧率：面板打开时把底层页面所有"永久循环"的装饰动画停掉。
   这些动画在面板背后照样每帧重绘/重合成，白白抢走上升动画的帧：
   - .stats-num 的 colorChange 动画的是 color（非合成属性），会持续重绘整条导航
   - .cmt-feed-header::after 的光晕漂移、求助/已解决卡片的高光扫动都是无限循环
   ------------------------------------------------------------------ */
body.cmt-overlay-open .stats-num,
body.cmt-overlay-open .festival-banner::before,
body.cmt-overlay-open .festival-banner .icon,
body.cmt-overlay-open .award-badge::before,
body.cmt-overlay-open .award-badge::after,
body.cmt-overlay-open .cmt-feed-header::before,
body.cmt-overlay-open .cmt-feed-header::after,
body.cmt-overlay-open .cmt-post::after,
body.cmt-overlay-open .cmt-post-solved::after,
body.cmt-overlay-open .cmt-badge-solved,
body.cmt-overlay-open .cmt-badge-help-open,
body.cmt-overlay-open .cmt-badge-ai-processing .ic,
body.cmt-overlay-open .cmt-ai-notice-processing .ic{
  animation:none !important;
}

.modal-box.cmt-mbox{
  padding:0 !important;
  width:calc(100% - 24px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 12px 36px rgba(0,0,0,.12),
    0 24px 60px rgba(var(--c-primary-rgb),.05);
  animation:cmtMboxIn .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cmtMboxIn{
  from{opacity:0; transform:translateY(8px) scale(.97)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.modal-box.cmt-mbox-md{max-width:420px}
.modal-box.cmt-mbox-lg{max-width:520px}
.modal-box.cmt-mbox-xl{max-width:560px}
.modal-box.cmt-mbox-tall{max-height:85vh}

/* 顶部装饰条（默认橙），可在不同弹窗上覆盖 */
.modal-box.cmt-mbox::before{
  content:'';
  display:block;
  height:3px;
  background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-l) 100%);
  flex-shrink:0;
}
.modal-box.cmt-mbox-danger::before{
  background:linear-gradient(90deg, var(--c-accent-r) 0%, #FF8585 100%);
}

/* 弹窗 body */
.cmt-mbox-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px;
}
.cmt-mbox-body::-webkit-scrollbar{width:4px}
.cmt-mbox-body::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}

/* 弹窗 footer */
.cmt-mbox-footer{
  flex-shrink:0;
  padding:12px 18px;
  border-top:1px solid var(--c-border-2);
  background:linear-gradient(180deg, #fdfcfb 0%, #fff 100%);
}
.cmt-mbox-actions{
  display:flex;
  gap:10px;
}
.cmt-mbox-btn-cancel{flex:1}
.cmt-mbox-btn-submit{flex:2}

/* 顶栏右侧工具区（通知中心） */
.cmt-mbox-tools{
  display:flex;
  gap:8px;
  align-items:center;
}
.cmt-mark-all-read{
  background:none;
  border:none;
  font-size:12px;
  color:var(--c-primary);
  cursor:pointer;
  font-weight:600;
  padding:5px 12px;
  border-radius:12px;
  transition:background .15s;
}
.cmt-mark-all-read:hover{background:var(--c-primary-bg)}

/* 红色标题（举报弹窗） */
.cmt-modal-title-danger{color:var(--c-accent-r)}
.cmt-modal-title-danger .ic{color:var(--c-accent-r) !important}

/* 分类/原因选择按钮组（编辑/举报弹窗共用） */
.cmt-cat-picker{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* 举报内容预览 */
.cmt-report-snippet{
  background:linear-gradient(135deg, var(--c-surface-2) 0%, #fff 130%);
  border-left:3px solid var(--c-text-4);
  border-radius:8px;
  padding:10px 12px;
  font-size:12px;
  color:var(--c-text-2);
  line-height:1.6;
  margin-bottom:14px;
  max-height:80px;
  overflow:hidden;
  position:relative;
}
.cmt-report-snippet::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:18px;
  background:linear-gradient(180deg, transparent, var(--c-surface-2));
  pointer-events:none;
}

/* 通知筛选条 */
.cmt-notif-filter{
  display:flex;
  gap:6px;
  padding:10px 16px;
  border-bottom:1px solid var(--c-border-2);
  background:#fff;
  flex-shrink:0;
}
.cmt-notif-filter-count{margin-left:3px; opacity:.85}

/* 通知列表 */
.cmt-notif-list{
  flex:1;
  overflow-y:auto;
  padding:6px 0;
  -webkit-overflow-scrolling:touch;
}
.cmt-notif-list::-webkit-scrollbar{width:4px}
.cmt-notif-list::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}

/* 收藏列表 */
.cmt-favorites-list{
  flex:1;
  overflow-y:auto;
  padding:14px;
  -webkit-overflow-scrolling:touch;
}
.cmt-favorites-list::-webkit-scrollbar{width:4px}
.cmt-favorites-list::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}

/* ==========================================================
   微动画与调色加强 v3
   ========================================================== */

/* Hero 头部光晕缓慢旋转 */
@keyframes cmtAuraDrift{
  0%, 100%{transform:translate(0,0) scale(1); opacity:1}
  50%{transform:translate(-14px,10px) scale(1.08); opacity:.85}
}
.cmt-feed-header::after{
  animation:cmtAuraDrift 14s ease-in-out infinite;
}

/* 帖子卡片入场淡入 */
@keyframes cmtCardIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}
.cmt-post{
  animation:cmtCardIn .32s ease-out backwards;
}

/* 加载图标自转（加 .cmt-spin class 使用） */
@keyframes cmtSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.cmt-spin{
  animation:cmtSpin 1.1s linear infinite;
  transform-origin:center;
}

/* ---------- 刷新按钮（含 20s 限频倒计时） ---------- */
.cmt-refresh-btn{ position:relative }
.cmt-refresh-btn.is-busy{
  color:var(--c-primary);
  border-color:var(--c-primary-l);
}
.cmt-refresh-btn.is-cooldown{
  /* 倒计时期间：图标淡出，让数字突出；禁用感的灰底 */
  background:var(--c-surface-2);
  border-color:var(--c-border);
  color:var(--c-text-4);
  cursor:not-allowed;
}
.cmt-refresh-btn.is-cooldown .ic{ opacity:.35 }
.cmt-refresh-btn .cmt-refresh-countdown{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  color:var(--c-primary);
  letter-spacing:.02em;
  pointer-events:none;
  font-variant-numeric:tabular-nums;  /* 数字等宽，跳变更稳 */
}

/* 点赞按钮按下：burst 动画 */
@keyframes cmtLikeBurst{
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  70%{transform:scale(.92)}
  100%{transform:scale(1)}
}
.cmt-action-btn.is-liked .ic{
  animation:cmtLikeBurst .42s ease-out;
}
.cmt-action-btn.is-favorited .ic{
  animation:cmtLikeBurst .42s ease-out;
}
.cmt-btn.is-active .ic{
  animation:cmtLikeBurst .42s ease-out;
}

/* 通知图标 hover 微摇 */
@keyframes cmtBellShake{
  0%, 100%{transform:rotate(0deg)}
  20%{transform:rotate(-12deg)}
  40%{transform:rotate(10deg)}
  60%{transform:rotate(-6deg)}
  80%{transform:rotate(4deg)}
}
.cmt-iconbtn:has(use[href="#ic-bell"]):hover svg{
  animation:cmtBellShake .65s ease-in-out;
  transform-origin:center top;
}

/* 收藏图标 hover 微弹 */
@keyframes cmtBookmarkPop{
  0%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
.cmt-iconbtn:has(use[href*="bookmark"]):hover svg{
  animation:cmtBookmarkPop .35s ease-out;
}

/* 标签 hover 时微微浮起 */
.cmt-tag{transition:transform .15s, box-shadow .15s}
.cmt-tag:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* 头像 hover 光圈 */
.cmt-avatar{transition:box-shadow .25s, transform .15s}
.cmt-post-head .cmt-avatar:hover,
.cmt-topic-author .cmt-avatar:hover{
  transform:scale(1.05);
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.3);
}

/* 已采纳横幅闪光扫光 */
@keyframes cmtAcceptedShine{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.cmt-accepted-banner{
  background:
    linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%) -200% 0/200% 100%,
    linear-gradient(135deg, rgba(46,160,67,.16) 0%, rgba(46,160,67,.08) 100%);
  background-repeat:no-repeat;
  animation:cmtAcceptedShine 3.6s ease-in-out infinite 1.2s;
}

/* 求助贴"求助中"徽章柔和呼吸 */
@keyframes cmtHelpPulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(25,118,210,.25)}
  50%{box-shadow:0 0 0 4px rgba(25,118,210,0)}
}
.cmt-badge-help-open{
  animation:cmtHelpPulse 2.4s ease-out infinite;
}

/* 已解决徽章柔光 */
.cmt-badge-solved{
  position:relative;
  overflow:hidden;
}
.cmt-badge-solved::after{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation:cmtSolvedShine 4.5s ease-in-out infinite 2s;
}
@keyframes cmtSolvedShine{
  0%, 80%{left:-100%}
  90%{left:140%}
  100%{left:140%}
}

/* 通知项点击/未读时微亮 */
.cmt-notif-item.is-unread{
  position:relative;
}
.cmt-notif-item.is-unread::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--c-primary), var(--c-primary-l));
  border-radius:0 2px 2px 0;
}

/* Tab 切换时下划线动效（CSS-only） */
.cmt-tab{position:relative}
.cmt-tab.is-active::after{
  content:'';
  position:absolute;
  left:50%; bottom:-2px;
  transform:translateX(-50%);
  width:24px; height:2px;
  background:rgba(255,255,255,.55);
  border-radius:1px;
  animation:cmtTabUnderline .25s ease-out;
}
@keyframes cmtTabUnderline{
  from{width:0; opacity:0}
  to{width:24px; opacity:1}
}

/* 卡片底部 stat 数字 hover 时微放大 */
.cmt-post-foot .cmt-stat{transition:transform .15s, opacity .15s, color .15s}
.cmt-post-foot .cmt-stat:hover{transform:translateY(-1px) scale(1.04)}

/* 重要按钮（发布/发帖/采纳）按下回弹反馈 */
.cmt-btn.cmt-btn-primary,
.cmt-btn.cmt-btn-accept,
.cmt-composer-publish,
.cmt-reply-send{
  transition:transform .12s ease, box-shadow .18s, background .18s, color .18s;
}
.cmt-btn.cmt-btn-primary:active:not(:disabled),
.cmt-btn.cmt-btn-accept:active:not(:disabled),
.cmt-composer-publish:active:not(:disabled),
.cmt-reply-send:active:not(:disabled){
  transform:scale(.96);
}

/* ==========================================================
   帖子卡片 · 缩略图 9 宫格
   - 后端缩略图：160x160 居中裁切 / q=55 / ~3-6KB/张
   - 9 张 ≈ 30-50KB，含 lazy loading 节省更多
   ========================================================== */
.cmt-post-thumbs{
  display:grid;
  gap:4px;
  margin-top:10px;
}
/* 1 张：占 1 列 (~33% 宽)，单图较大 */
.cmt-post-thumbs.n-1{
  grid-template-columns:repeat(3, 1fr);
  /* 1 张时占左上一格，看起来更协调 */
}
.cmt-post-thumbs.n-1 .cmt-post-thumb-cell{
  grid-column:span 1;
}
/* 2 张：2 列，每张 ~33%（占 2 格） */
.cmt-post-thumbs.n-2{
  grid-template-columns:repeat(3, 1fr);
}
/* 3 张：3 列均分 */
.cmt-post-thumbs.n-3{grid-template-columns:repeat(3, 1fr)}
/* 4 张：2x2 矩阵 */
.cmt-post-thumbs.n-4{grid-template-columns:repeat(2, 1fr); max-width:66%}
/* 5-9 张：3 列网格（5/6 张第二行不满） */
.cmt-post-thumbs.n-5,
.cmt-post-thumbs.n-6,
.cmt-post-thumbs.n-7,
.cmt-post-thumbs.n-8,
.cmt-post-thumbs.n-9{grid-template-columns:repeat(3, 1fr)}

.cmt-post-thumb-cell{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--c-surface-2);
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--c-border-2);
  transition:transform .15s, box-shadow .15s;
}
.cmt-post-thumb-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* 加载淡入 */
  animation:cmtThumbFadeIn .35s ease-out;
}
@keyframes cmtThumbFadeIn{
  from{opacity:0; filter:blur(4px)}
  to{opacity:1; filter:blur(0)}
}
.cmt-post-thumb-cell:hover{
  transform:scale(.97);
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}

/* 移动端：缩略图 cell 略缩小 */
@media (max-width:480px){
  .cmt-post-thumbs{gap:3px}
  .cmt-post-thumbs.n-4{max-width:75%}
}

/* 标记已解决按钮（楼主独立标记，绿色） */
.cmt-btn.cmt-btn-solve{
  background:linear-gradient(135deg, #2EA043, #6FCF73);
  color:#fff;
  border:none;
  box-shadow:0 2px 8px rgba(46,160,67,.28);
}
.cmt-btn.cmt-btn-solve:hover{
  box-shadow:0 4px 14px rgba(46,160,67,.45);
  transform:translateY(-1px);
}
.cmt-btn.cmt-btn-solve:active{transform:translateY(0)}
.cmt-btn.cmt-btn-solve .ic{color:#fff}

/* ==========================================================
   个人主页弹窗 · 视觉精修
   ========================================================== */

/* 顶部 Hero 渐变 + 装饰 */
.cmt-userpage-head{
  position:relative;
  padding:24px 18px 18px;
  background:
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.30) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,.18) 0%, transparent 50%),
    linear-gradient(135deg, var(--c-primary) 0%, #d9521c 100%);
  color:#fff;
  overflow:hidden;
}
/* 顶部装饰光环 */
.cmt-userpage-head::before{
  content:'';
  position:absolute;
  top:-60px; right:-50px;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  pointer-events:none;
}
.cmt-userpage-head::after{
  content:'';
  position:absolute;
  bottom:-40px; left:-30px;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(255,200,140,.22) 0%, transparent 70%);
  pointer-events:none;
}
.cmt-userpage-close{
  position:absolute;
  top:14px; right:14px;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  cursor:pointer;
  width:34px; height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .18s;
  z-index:2;
}
.cmt-userpage-close:hover{
  background:rgba(255,255,255,.35);
  transform:rotate(90deg);
}
.cmt-userpage-close .ic{width:14px; height:14px}

/* 用户信息区 */
.cmt-userpage-info{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:1;
}
.cmt-userpage-avatar{
  background:rgba(255,255,255,.28) !important;
  border:3px solid rgba(255,255,255,.45);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.cmt-userpage-avatar .emoji{font-size:28px}
.cmt-userpage-meta{
  flex:1;
  min-width:0;
}
.cmt-userpage-name{
  font-size:19px;
  font-weight:800;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.12);
}
.cmt-userpage-bio{
  font-size:12.5px;
  opacity:.92;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.cmt-userpage-gender{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  background:rgba(255,255,255,.22);
  border-radius:8px;
  font-weight:600;
  font-size:11.5px;
}
.cmt-userpage-gender .ic{width:11px; height:11px}
.cmt-userpage-bio-text{opacity:.85}
.cmt-userpage-bio-anon{opacity:.78}
.cmt-userpage-bio-anon .ic{width:11px; height:11px}

/* 统计栏 - 玻璃态 */
.cmt-userpage-stats{
  position:relative;
  display:flex;
  margin-top:18px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  z-index:1;
}
.cmt-userpage-stat{
  flex:1;
  text-align:center;
  padding:11px 0;
  transition:background .15s;
}
.cmt-userpage-stat:hover{background:rgba(255,255,255,.12)}
.cmt-userpage-stat-num{
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.cmt-userpage-stat-lbl{
  font-size:10.5px;
  opacity:.88;
  margin-top:2px;
  letter-spacing:.04em;
}
.cmt-userpage-stat-divider{
  width:1px;
  background:rgba(255,255,255,.28);
  margin:8px 0;
}

/* 操作按钮区 */
.cmt-userpage-actions{
  padding:12px 16px;
  border-bottom:1px solid var(--c-border-2);
  background:linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}

/* Tab 切换 */
.cmt-userpage-tabs{
  display:flex;
  border-bottom:1px solid var(--c-border-2);
  background:#fff;
  position:sticky;
  top:0;
  z-index:5;
}
.cmt-userpage-tab{
  flex:1;
  padding:13px 0;
  font-size:13.5px;
  font-weight:700;
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
  transition:color .15s;
  color:var(--c-text-2);
  letter-spacing:.02em;
}
.cmt-userpage-tab:hover{color:var(--c-text)}
.cmt-userpage-tab.is-active{color:var(--c-primary)}
.cmt-userpage-tab.is-active::after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:3px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-primary-l));
  border-radius:2px 2px 0 0;
  animation:cmtUserPageTabIn .25s ease-out;
}
@keyframes cmtUserPageTabIn{
  from{width:0; opacity:0}
  to{width:36px; opacity:1}
}
.cmt-userpage-tab-count{
  font-weight:500;
  margin-left:3px;
  color:var(--c-text-3);
  font-size:12px;
}
.cmt-userpage-tab.is-active .cmt-userpage-tab-count{color:var(--c-primary); opacity:.7}

/* 内容列表 */
.cmt-userpage-list{
  flex:1;
  overflow-y:auto;
  padding:14px 14px 24px;
  -webkit-overflow-scrolling:touch;
  background:var(--c-bg);
}
.cmt-userpage-list::-webkit-scrollbar{width:4px}
.cmt-userpage-list::-webkit-scrollbar-thumb{background:var(--c-border); border-radius:2px}
.cmt-userpage-empty{padding:36px 20px !important}

/* 帖子卡片（紧凑版） */
.cmt-userpage-card{
  padding:12px 12px 10px 16px;
  margin-bottom:10px;
}
.cmt-userpage-card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.cmt-userpage-card-time{
  font-size:11px;
  color:var(--c-text-4);
  margin-left:auto;
}
.cmt-userpage-card-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--c-text);
  line-height:1.55;
  word-break:break-word;
}
.cmt-userpage-card-foot{
  margin-top:10px;
  padding-top:8px;
  gap:14px;
}

/* 评论卡片（更轻量） */
.cmt-userpage-reply{
  padding:10px 14px;
  margin-bottom:8px;
  cursor:pointer;
  border-left:3px solid var(--c-border);
  border-radius:0 12px 12px 0;
  transition:border-color .15s, background .15s;
}
.cmt-userpage-reply:hover{
  border-left-color:var(--c-primary);
  background:linear-gradient(90deg, var(--c-primary-bg) 0%, transparent 80%);
}
.cmt-userpage-reply-meta{
  font-size:11.5px;
  color:var(--c-text-4);
  margin-bottom:5px;
  letter-spacing:.02em;
}
.cmt-userpage-reply-text{
  font-size:13px;
  color:var(--c-text-2);
  line-height:1.65;
  word-break:break-word;
}

/* 移动端调整 */
@media (max-width:480px){
  .cmt-userpage-head{padding:20px 16px 16px}
  .cmt-userpage-name{font-size:17px}
  .cmt-userpage-stat-num{font-size:18px}
}

/* ---------- 响应式 ---------- */
@media (max-width:480px){
  .cmt-avatar-picker{grid-template-columns:repeat(6,1fr); gap:5px; padding:7px}
  .cmt-post-imgs img{width:calc((100% - 6px) / 2)}
  .cmt-fab{right:14px; bottom:84px}
  .cmt-hero{padding:10px 12px; margin-bottom:12px}
  .cmt-hero-avatar{width:48px; height:48px}
  .cmt-hero-avatar .ic{width:26px; height:26px}
  .cmt-hero-avatar .emoji{font-size:22px}
  .cmt-hero-name{font-size:15px}
  .cmt-composer-title-input{font-size:20px}
  /* Feed Header 移动端紧凑化 */
  .cmt-feed-header{padding:14px 14px 12px; border-radius:18px}
  .cmt-feed-heading h2{font-size:19px}
  .cmt-feed-heading p{font-size:11.5px}
  /* 移动端 filter-bar 堆叠为两行，避免挤 */
  .cmt-filter-bar{gap:6px}
  .cmt-filter-bar .cmt-sort{padding:2px}
  .cmt-filter-bar .cmt-sort button{padding:5px 10px; font-size:11.5px}
  .cmt-post{padding:14px 14px 12px 18px}
}

/* ==================================================================
   分类下拉选择器（替代移动端横滑标签栏）
   ================================================================== */
.cmt-catpick{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px 8px 13px;
  border-radius:999px;
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  box-shadow:var(--c-shadow);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.cmt-catpick:hover{border-color:var(--c-primary-l)}
.cmt-catpick:active{background:var(--c-surface-2)}
.cmt-catpick:focus-visible{outline:2px solid var(--c-primary); outline-offset:2px}
.cmt-catpick-key{
  font-size:11px;
  font-weight:600;
  color:var(--c-text-4);
  letter-spacing:.04em;
  flex-shrink:0;
}
.cmt-catpick-ic{
  width:15px; height:15px;
  color:var(--c-primary);
  flex-shrink:0;
}
.cmt-catpick-val{
  flex:1;
  min-width:0;
  text-align:left;
  font-size:13.5px;
  font-weight:700;
  color:var(--c-text);
  letter-spacing:.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmt-catpick-caret{
  width:14px; height:14px;
  color:var(--c-text-3);
  flex-shrink:0;
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.cmt-catpick[aria-expanded=true] .cmt-catpick-caret{transform:rotate(180deg)}

/* 当前分类用语义色着色边框与图标（与卡片左侧色条同一套语义） */
.cmt-catpick-chat{border-color:rgba(var(--c-primary-rgb),.38)}
.cmt-catpick-chat .cmt-catpick-ic{color:var(--c-primary)}
.cmt-catpick-study{border-color:rgba(45,125,45,.32)}
.cmt-catpick-study .cmt-catpick-ic{color:var(--c-accent-g)}
.cmt-catpick-life{border-color:rgba(139,92,246,.30)}
.cmt-catpick-life .cmt-catpick-ic{color:var(--c-accent-p)}
.cmt-catpick-help{border-color:rgba(25,118,210,.30)}
.cmt-catpick-help .cmt-catpick-ic{color:var(--c-accent-b)}
.cmt-catpick-all .cmt-catpick-ic{color:var(--c-text-3)}

/* ---------- 分类选择面板 ---------- */
.cmt-catsheet{max-width:480px}
.cmt-catsheet .cmt-sheet-body{padding:2px 12px 14px}
.cmt-catopt{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  margin-bottom:4px;
  border:1.5px solid transparent;
  border-radius:14px;
  background:transparent;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s, border-color .16s;
}
.cmt-catopt:active{background:var(--c-surface-2)}
.cmt-catopt:focus-visible{outline:2px solid var(--c-primary); outline-offset:-2px}
.cmt-catopt-ic{
  width:34px; height:34px;
  padding:8px;
  border-radius:11px;
  background:var(--c-surface-2);
  color:var(--c-text-2);
  flex-shrink:0;
  box-sizing:border-box;
}
.cmt-catopt-label{
  flex:1;
  font-size:14.5px;
  font-weight:600;
  color:var(--c-text);
  letter-spacing:.01em;
}
.cmt-catopt-check{
  width:17px; height:17px;
  color:var(--c-primary);
  flex-shrink:0;
}
.cmt-catopt.is-active{background:var(--c-primary-bg); border-color:rgba(var(--c-primary-rgb),.22)}
.cmt-catopt.is-active .cmt-catopt-label{font-weight:800}

/* 各分类的图标底色（未选中时也带一点语义色，便于扫读） */
.cmt-catopt-chat .cmt-catopt-ic{background:var(--c-primary-bg); color:var(--c-primary)}
.cmt-catopt-study .cmt-catopt-ic{background:var(--c-accent-g-bg); color:var(--c-accent-g)}
.cmt-catopt-life .cmt-catopt-ic{background:var(--c-accent-p-bg); color:var(--c-accent-p)}
.cmt-catopt-help .cmt-catopt-ic{background:var(--c-accent-b-bg); color:var(--c-accent-b)}

/* 面板动画：去掉回弹超调，改用与详情页一致的减速曲线 */
.cmt-catsheet{animation:cmtSheetUp .5s cubic-bezier(.32,.72,0,1) both}

@media(prefers-reduced-motion:reduce){
  .cmt-sheet,.cmt-sheet-mask,.cmt-catsheet,.cmt-catpick-caret,
  .navbar,.tabbar,.festival-banner,.lottery-guide-banner{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* ==================================================================
   排版打磨：8pt 间距节奏 + 拉开字阶层次 + 帖子卡片降高
   目标：标题主导、正文次之、元信息退后，纵向留白只留必要的
   ================================================================== */

/* --- Feed 头部：收到内容真正需要的高度 --- */
.cmt-feed-header{padding:16px 16px 12px; margin:0 -2px 12px; border-radius:20px}
.cmt-feed-heading{margin-bottom:12px}
.cmt-feed-heading h2{font-size:21px; line-height:1.25; margin:0 0 2px}
.cmt-feed-heading p{font-size:12px; line-height:1.4}

/* --- 筛选行 --- */
.cmt-filter-bar{gap:8px; margin-bottom:10px; padding-top:6px; padding-bottom:6px}
/* 两个控件等高，整行读作同一条控件带（高度由分类选择器决定） */
.cmt-catpick{min-height:36px}
.cmt-filter-bar .cmt-sort{align-self:stretch}
.cmt-filter-bar .cmt-sort button{height:100%}

/* --- 身份卡：与列表拉开一档，但不再抢高度 --- */
.cmt-identity{padding:13px 14px; margin-bottom:12px; border-radius:18px}

/* --- 帖子卡片 --- */
.cmt-post{padding:14px 15px 12px 19px; margin-bottom:8px}
.cmt-post::before{top:13px; bottom:13px}
.cmt-post-head{margin-bottom:8px; gap:8px}
.cmt-post-author{font-size:12.5px}
/* 标题是卡片的主角：字号提上去、行距收紧 */
.cmt-post-title{font-size:16px; line-height:1.45; margin-bottom:5px}
.cmt-post-body{font-size:13px; line-height:1.6}
/* 元信息退到最后一层：更小、更淡、分隔线更近 */
.cmt-post-foot{margin-top:9px; padding-top:8px; gap:15px; font-size:11.5px}
.cmt-post-foot .cmt-stat .ic{width:13px; height:13px}

/* 徽章绝不在内部折行：昵称长 + 多个徽章时，整块换行而不是把"匿名"竖排成两行 */
.cmt-badge-anon,.cmt-badge-mine,.cmt-badge-pin,
.cmt-badge-solved,.cmt-badge-help-open,.cmt-badge-ai{
  white-space:nowrap;
  flex-shrink:0;
}


/* --- 移动端：进一步收紧，并让筛选行占满一行 --- */
@media (max-width:480px){
  .cmt-feed-header{padding:13px 14px 11px; margin-bottom:10px; border-radius:18px}
  .cmt-feed-heading{margin-bottom:10px}
  .cmt-feed-heading h2{font-size:18.5px}
  .cmt-feed-heading p{font-size:11.5px}

  .cmt-filter-bar{gap:8px; margin-bottom:9px}
  .cmt-catpick{padding:7px 11px 7px 12px}
  .cmt-catpick-val{font-size:13px}

  .cmt-identity{padding:12px; margin-bottom:10px; border-radius:16px}

  .cmt-post{padding:13px 14px 11px 18px; margin-bottom:7px}
  .cmt-post::before{top:12px; bottom:12px}
  .cmt-post-head{margin-bottom:7px}
  .cmt-post-title{font-size:15.5px; line-height:1.45}
  .cmt-post-body{font-size:12.5px; line-height:1.6}
  .cmt-post-foot{margin-top:8px; padding-top:7px; gap:14px}

  .cmt-catsheet .cmt-sheet-body{padding:2px 10px 12px}
  .cmt-catopt{padding:10px 11px; gap:11px}
  .cmt-catopt-ic{width:32px; height:32px; padding:7px; border-radius:10px}
  .cmt-catopt-label{font-size:14px}
}