/* ========================================
   结果页面（共享排序 / 个人排序）：树形浏览 + 详情面板
   ======================================== */

.results-layout {
  display: flex;
  gap: 0;
  height: calc(100dvh - var(--topbar-height) - var(--content-pad) * 2);
  max-height: calc(100dvh - var(--topbar-height) - var(--content-pad) * 2);
}

/* ---- 左侧树面板 ----
   宽度引用 CSS 变量（sidebar_resize.js 拖拽写 --results-tree-width，
   范围 240~520px、localStorage 记忆、双击把手恢复 300px）；
   var() 兜底值 = 默认宽度，未拖过时与原 300px 布局一致 */
.results-tree-panel {
  width: var(--results-tree-width, 300px);
  min-width: 240px;
  /* 微信风：树面板底用页面灰（#ededed），列表内叶子节点以白色卡片上浮
     （微信「服务」页分组列表观感）；详情面板保持白底文章页，两栏形成灰/白对比 */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* 下拉刷新指示器的定位基准（2026-09-11）：指示器 absolute 挂本面板顶部，
     margin-top:-44px 隐藏于面板外，overflow:hidden 兜底不外溢遮工具条 */
  position: relative;
}

.results-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px 12px;
  flex-shrink: 0;
}

/* 2026-09-11 用户拍板：排序口径提示行已移除（.results-tree-sort-hint 样式随之删除，
   共享树/个人树两处 DOM 与共享树的 JS 写入逻辑同步清理） */

.results-tree-header h2 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* header 右侧操作按钮组（一键上传公共 + 刷新树 + 树排序下拉）。
   2026-09-08 排序下拉加入本行后，窄面板（共享树面板实测 200px）下整行
   min-content 369px 溢出 169px，下拉被裁到面板外不可见（DOM 在、拷贝有、
   视觉无）。修复两件套：①去掉 flex-shrink:0 / 加 min-width:0——本行作为
   .results-tree-header 的 flex 子项原来拒绝收缩，容器恒为内容宽，换行
   永不触发；②flex-wrap:wrap——被约束到面板宽后放不下的下拉/按钮折行 */
.results-tree-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 「官方树 / 个人社区树 / 关注动态」视图切换按钮组（共享树工具条）
   WHY: 关注动态 = 在全部共享数据上按关注人过滤的动态视图，
        与全部视图共用同一棵树容器与右侧详情区，用切换避免新增整块面板。
   微信化：顶部文字 tab 风格（与 P1 的 .wx-seg 视觉一致——激活绿色 + 底部
   短指示条），仅作用于 #global-view-toggle 这一组；接口文档页同名的
   .view-toggle-btn（美化/原始视图）不受影响，避免跨面板视觉串改。
   2026-09-11 工具条合并为一行：可见入口统一到 #rank-seg-global，本组仅作
   状态载体保留 DOM（JS 依赖 .active + .click() 驱动视图切换），全端隐藏 */
.global-view-toggle {
  display: none;
}

#global-view-toggle .view-toggle-btn {
  position: relative;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  padding: 6px 2px;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

#global-view-toggle .view-toggle-btn:hover { color: var(--color-text-primary); }

#global-view-toggle .view-toggle-btn.active {
  background: none;
  color: var(--color-brand);
  font-weight: 600;
}

/* 激活指示条：底部 2px 圆角绿色短条居中（对齐 .wx-seg-item.active::after 口径） */
#global-view-toggle .view-toggle-btn.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-brand);
}

/* ===== 2026-09-11 共享排序页工具条合并为一行 =====
   把「页级分段条（#rank-seg-global）」放开为全端单行工具条：4 个分段项 +
   排序下拉 + 搜索按钮（2026-09-11 二次改造：刷新按钮移除，改为树容器下拉
   刷新，见 .pull-refresh-indicator 区块）。桌面端由 id 选择器覆盖 components.css 的
   `.wx-seg--page { display:none }`（不改其基准规则，否则会影响积分域 5 条
   分段条）；移动端 sticky 吸附仍由 responsive.css 的 .wx-seg--page 规则提供，
   此处不重复定义。
   注：分段项 .wx-seg-item 基准是 flex:1 等分 + 15px/44px，本行要「内容宽 +
   操作控件右对齐」，故在 id 作用域内改 flex:0 0 auto 并缩小字号/高度 */
#rank-seg-global,
#rank-seg-personal {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
}

#rank-seg-global .wx-seg-item,
#rank-seg-personal .wx-seg-item {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 10px;
  /* 绝对 px 而非 rem：html font-size 随断点变化（桌面 15px / ≤768 14px / ≤480 13px），
     rem 会被层层缩小（0.75rem 在 375px 下仅 9.75px —— 2026-09-11 浏览器实测发现） */
  font-size: 13px;
  font-weight: 500;
}

/* 排序下拉推到右侧并缩小（覆盖 .tree-sort-select 默认 150px/0.8125rem/36px） */
#rank-seg-global .tree-sort-select,
#rank-seg-personal .tree-sort-select {
  margin-left: auto;
  /* 2026-09-11 用户拍板：字号/高度与同行分段项（官方树/社区树/关注/我的）保持一致
     ——同为 13px、行高 40px 对齐。注意：13px < 16px，iOS 聚焦该下拉时浏览器可能
     自动放大页面（防缩放口径见 coding-standards #29，本条为「视觉一致」优先的
     用户决策，若要恢复防缩放改回 16px 即可） */
  font-size: 13px;
  min-height: 40px;
  max-width: 110px;
  padding: 0 8px;
}

/* 工具条图标按钮（一键上传 / 搜索放大镜等）不参与拉伸，紧跟排序下拉 */
#rank-seg-global .btn-icon-sm,
#rank-seg-personal .btn-icon-sm {
  flex: 0 0 auto;
}

/* header 容器已无可见内容（排序/搜索迁出、按钮组隐藏），整体隐藏避免残留 padding 空白 */
#panel-global-results .results-tree-header {
  display: none;
}

/* 一键上传公共按钮：与 .btn-icon-sm 同规格，绿色系引导上传 */
.btn-upload-public-batch {
  color: var(--color-success);
}

.btn-upload-public-batch:hover {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

/* ===== 2026-09-11 树搜索（放大镜展开式，spec Q1/Q1b） =====
   默认态：放大镜按钮（.btn-icon-sm 同规格）可见，.tree-search-box 隐藏。
   展开态（工具条行加 .is-searching）：隐藏 4 分段/排序下拉/一键上传/放大镜，
   .tree-search-box 显示并占满整行，独立 ✕ 关闭按钮收起。
   特异性说明：隐藏规则一律 #rank-seg-*.is-searching .x（0,2,1），压过本文件
   117-160 的 (0,1,1) 规则与 responsive.css 各断点同名覆盖（corrections
   2026-09-11 教训：同名覆盖源含主文件尾部 @media 块，改前须 grep 全量枚举）。
   排序下拉的 hidden 属性归 _updateGlobalViewToggle 管，此处只用 display，勿混用 */
.tree-search-box {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.tree-search-input {
  flex: 1;
  min-width: 0;
  /* 绝对 px（coding-standards #29：紧凑控件不用 rem，html 字号随断点缩放）；
     ≤768 断点升 16px 防 iOS 聚焦缩放，见 responsive.css */
  font-size: 13px;
  min-height: 40px;
  padding: 0 8px;
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tree-search-input:focus {
  border-color: var(--color-brand);
  outline: none;
}

.tree-search-input::placeholder {
  color: var(--color-text-muted);
}

/* 清空 ✕：无边框文字按钮，40px 触摸区 */
.tree-search-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 28px;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.tree-search-clear svg {
  width: 16px;
  height: 16px;
}

.tree-search-clear:hover {
  color: var(--color-text-primary);
}

/* 关闭搜索 ✕：图标按钮，与放大镜同规格（.btn-icon-sm 提供底样式） */
.tree-search-close {
  flex: 0 0 auto;
}

/* 展开态隐藏（0,2,1 特异性） */
#rank-seg-global.is-searching .wx-seg-item,
#rank-seg-personal.is-searching .wx-seg-item,
#rank-seg-global.is-searching .tree-sort-select,
#rank-seg-personal.is-searching .tree-sort-select,
#rank-seg-personal.is-searching .btn-upload-public-batch,
#rank-seg-global.is-searching .tree-search-btn,
#rank-seg-personal.is-searching .tree-search-btn {
  display: none;
}

/* 展开态显示搜索框 */
#rank-seg-global.is-searching .tree-search-box,
#rank-seg-personal.is-searching .tree-search-box {
  display: flex;
}

/* 搜索无匹配空态的「清除搜索」按钮（_applyTreeSearch 动态创建） */
.tree-search-empty-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--color-link);
  font-size: 14px;
  cursor: pointer;
}

.tree-search-empty-clear:hover {
  text-decoration: underline;
}

/* 搜索过滤隐藏类（叶子/祖先/空态通用；只做 display，不动渲染结构） */
.tree-node.tree-search-hide,
.empty-state.tree-search-hide,
.official-tree-gate-card.tree-search-hide {
  display: none;
}

/* ===== 2026-09-11 树容器下拉刷新指示器（微信风，spec Q6） =====
   挂载点：.results-tree-panel（JS 惰性创建，见 _bindPullToRefresh——树容器被
   渲染 innerHTML='' 反复 wipe，不能作为容器静态子元素）。默认 margin-top:-44px
   隐藏于面板顶外（面板 overflow:hidden 兜底），拉拽时由 JS 写内联 transform
   跟随位移（0.5 阻尼）。pointer-events:none 保证不挡树交互 */
.pull-refresh-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin-top: -44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  color: var(--color-text-secondary);
  font-size: 13px; /* 绝对 px（coding-standards #29：紧凑控件不用 rem） */
  z-index: var(--z-sticky);
  opacity: 0;
}

/* 拖拽中（pulling/armed）：只淡入，不给 transform 过渡——内联 transform 跟手零延迟 */
.pull-refresh-indicator.is-pulling,
.pull-refresh-indicator.is-armed {
  opacity: 1;
}

/* 释放后（refreshing/done）：过渡到完全可见位（translateY(44px) = 高度全露出） */
.pull-refresh-indicator.is-refreshing,
.pull-refresh-indicator.is-done {
  opacity: 1;
  transform: translateY(44px);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* armed 态文字强调（松开刷新） */
.pull-refresh-indicator.is-armed .pull-refresh-text {
  color: var(--color-text-primary);
}

/* 转圈 svg：refreshing 态旋转；stroke=currentColor 继承令牌色 */
.pull-refresh-indicator .pull-refresh-spinner {
  width: 16px;
  height: 16px;
}

.pull-refresh-indicator.is-refreshing .pull-refresh-spinner,
.pull-refresh-indicator.is-done .pull-refresh-spinner {
  animation: pull-refresh-spin 0.8s linear infinite;
}

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

.btn-upload-public-batch svg { width: 16px; height: 16px; }

.results-tree {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* 下拉刷新（2026-09-11）：阻断滚动链到外层容器，避免顶部下拉透传成页面回弹 */
  overscroll-behavior: contain;
  padding: 10px 10px 16px;
}

.results-tree .empty-state { padding: 32px 16px; }
.results-tree .empty-state svg { width: 36px; height: 36px; }
.results-tree .empty-state h3 { font-size: 0.875rem; }
.results-tree .empty-state p { font-size: 0.75rem; }

/* ---- 树节点 ----
   微信两段式：
   · 分组头（大类/小类/人）= 微信 group-header：灰底透出、次级色、
     保留层级缩进引导线，箭头细 chevron（2026-09-11 紧凑化，字号 12px 绝对 px）；
   · 叶子（数据项 .tree-node.leaf）= 白色卡片：radius-md 白底 + 轻阴影在灰底上浮，
     按压态 --wx-pressed；2026-09-11 起改「两行」布局——第一行 名称、第二行
     涨幅/赞评看/RunID/状态/删除（见下方 .tree-node-lead / .tree-node-body /
     .tree-node-meta），字号用绝对 px 不随断点缩放 */
.tree-node { user-select: none; }

/* 分组头（基类即分组形态；叶子样式在下方按 .leaf 覆写） */
.tree-node-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.tree-node-header:hover {
  background: var(--wx-pressed);
}

/* 选中态（叶子点击后）：微信式轻按压底 + 名称品牌绿，不再用旧金色描边圈 */
.tree-node-header.selected {
  background: var(--wx-pressed);
  box-shadow: none;
}

.tree-node-header.selected .tree-node-name {
  color: var(--color-brand);
  font-weight: 600;
}

/* 叶子行 = 白色卡片（.leaf 由 _createTreeNode 按 hasChildren=false 写入）；
   2026-09-11 紧凑化：min-height 48→40px、字号 15→14px、padding 10/12→8/10 */
.tree-node.leaf > .tree-node-header {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: 8px 10px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
}

.tree-node.leaf > .tree-node-header:hover,
.tree-node.leaf > .tree-node-header:active {
  background: var(--wx-pressed);
}

/* 叶子两行布局（2026-09-11 用户拍板，官方树/社区树/关注动态/个人排序四视图统一）：
   header = 左前导 .tree-node-lead（箭头/图标/名次，不收缩、垂直居中跨两行）
          + 右主体 .tree-node-body（弹性列）。
   body 自身 flex-wrap 让「第一行 名称」与「第二行 .tree-node-meta」自然分行；
   第二行起点与名称同源（同从 body 左沿起），无需硬编码缩进像素。
   防窄面板裁切：body 允许收缩(min-width:0) + meta 可换行（corrections 2026-09-08） */
.tree-node-lead {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;            /* 前导列不收缩，箭头/图标/名次恒完整 */
}

.tree-node-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;           /* 名称与 meta 分行；窄面板下再折行兜底 */
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
}

/* 第二行容器：flex-basis:100% 强制独占一行（起点与第一行名称一致）；
   承载 涨幅 / 赞评看互动徽章 / RunID / 状态 / 删除（删除按钮 margin-left:auto 靠右）。
   flex-wrap:nowrap + overflow:hidden：窄面板（横屏低高度下树面板仅视口 28%≈199px，
   与 corrections 2026-09-08 同款场景）若允许换行，5 个元素会逐项折行把行高撑到
   140px+（线上实测），破坏紧凑目标；改为不换行、超出裁剪——与改动前单行布局在该
   窄面板下的表现一致（横向溢出裁剪、不回绕），不引入新回归 */
.tree-node-meta {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* 卡片间距：分组子树内同级兄弟留 8px 呼吸（灰底上白卡分离感）；
   打平列表 .tree-flat-list 自身已用 flex gap:8px，不重复加 margin */
.tree-children > .tree-node + .tree-node { margin-top: 4px; }

/* 展开/折叠箭头（细 chevron，微信 cell 同款线宽） */
.tree-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
  color: var(--color-text-muted);
}

.tree-arrow svg { width: 12px; height: 12px; }

.tree-node.expanded > .tree-node-header .tree-arrow { transform: rotate(90deg); }
/* 叶子无子节点、无展开语义：箭头不渲染（原 visibility:hidden 仍占 16px，
   2026-09-11 用户要求内容贴左对齐 → 改 display:none 释放占位） */
.tree-node.leaf > .tree-node-header .tree-arrow { display: none; }

/* 2026-09-11 用户拍板：叶子数据项卡片去掉文件图标，内容更贴左。
   WHY 用 CSS 而非改模板：图标 DOM 由 _createTreeNode 统一生成，四树视图共用；
   CSS 隐藏零 JS 改动、可单行回滚。仅作用于叶子（分类/子类/人节点图标保留） */
.tree-node.leaf > .tree-node-header .tree-node-icon { display: none; }

/* 节点图标（类型配色） */
.tree-node-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-node-icon svg { width: 14px; height: 14px; }

.tree-node-icon.category { color: var(--color-brand); }
.tree-node-icon.sub-category { color: var(--color-info); }
.tree-node-icon.user { color: var(--color-warning); }
/* 关注动态树人节点（_createTreeNode type='person'，此前无配色定义按 currentColor 兜底） */
.tree-node-icon.person { color: var(--color-info); }
.tree-node-icon.data-item { color: var(--color-text-muted); }

/* 节点名称（叶子卡片内为主文案，15px 主色） */
.tree-node-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  font-size: inherit;
}

/* 排名序号（数据项，按预测涨幅降序的第几名；前三名小色块强调，token 化配色） */
.tree-node-rank {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: none;
}

.tree-node-rank.top-1 { background: var(--color-brand); color: var(--color-surface); }
.tree-node-rank.top-2 { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.tree-node-rank.top-3 { background: var(--color-warning-subtle); color: var(--color-warning); }

/* 预测涨幅徽章（叶子第二行 meta 首项）：A 股习惯 涨红 / 跌绿 / 平灰。
   微信行情样式 = 无底色纯色粗体数字（14px 绝对 px 加粗），不再是浅底胶囊 */
.tree-node-score {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.01em;
  background: none;
}

.tree-node-score.up { color: var(--color-danger); }
.tree-node-score.down { color: var(--color-success); }
.tree-node-score.flat { color: var(--color-text-muted); }

/* runId 标签（叶子第二行，点击复制）：轻灰圆角小标签（无边框）。
   2026-09-11 紧凑化：字号 11→10px 绝对 px（.tree-node-hot 互动徽章复用本类） */
.tree-node-runid {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-left: 6px;
  flex-shrink: 0;
  cursor: pointer;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.tree-node-runid:hover {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
}

/* ==================== 树排序（2026-09-08 树排序功能） ==================== */

/* 排序选择器（共享树/个人树 header 右侧，复用 header-actions 布局）。
   微信 H5 惯例保留系统原生 select（含原生右侧箭头），仅换肤：
   白底浅描边无边框感；字号移动端 16px（防 iOS 聚焦缩放），高度 44px 触摸友好 */
.tree-sort-select {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  min-height: 36px;
  cursor: pointer;
  max-width: 150px;
}
.tree-sort-select:hover { border-color: var(--color-border-strong); }
.tree-sort-select:focus { outline: none; border-color: var(--color-brand); }

/* 打平列表容器（非默认排序时替代层级树）：单列白卡列表，间距与层级树一致 */
.tree-flat-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 4px; }

/* 打平节点的大类/小类面包屑（打平后层级信息靠它保留）：微信次级说明文案 12px */
.tree-node-crumb {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-right: 6px;
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 打平节点的当前排序指标值徽章（赞/评/看/热 N；复用 runid 徽章底子，改禁点击） */
.tree-node-metric {
  cursor: default;
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-color: transparent;
}
.tree-node-metric:hover {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-color: transparent;
}

/* 互动徽章（赞/评/看，30 天窗口跨用户合计，2026-09-08 常显于涨幅徽章后）：
   单项计数 0 灰显（--zero），打平排序时当前指标枚高亮（--active，品牌色） */
.tree-node-hot {
  cursor: default;
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border-color: transparent;
}
.tree-node-hot:hover {
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border-color: transparent;
}
.tree-node-hot--zero {
  color: var(--color-text-muted);
  opacity: 0.6;
}
.tree-node-hot--active,
.tree-node-hot--active:hover {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-color: transparent;
}

/* 「N人」贡献徽章（global 模式同名 project 多用户合并节点）
   WHY: 树不按用户分组，多用户数据合并成一个节点，此徽章提示可点进详情逐段比对。
   样式复用 .tree-node-runid 底子，仅换橙字提示「多人」语义 */
.tree-node-users {
  font-size: 0.6875rem;
  color: var(--color-warning);
  background: var(--color-warning-subtle);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-left: 6px;
  flex-shrink: 0;
  cursor: default;
}

/* 「发布者」徽章（global 社区树叶子节点，2026-09-11）：展示该数据是谁发布的
   （如 ouyang），多用户合并节点显示最新发布者（配合 .tree-node-users 的 N人徽章）。
   盒模型对齐 .tree-node-users；中性灰区别于 N人 橙色。
   字号 10px 绝对 px（coding-standards #29 紧凑控件不用 rem）；
   长昵称 max-width 截断省略，窄面板下与行内其他徽章同为 nowrap 裁剪口径 */
.tree-node-publisher {
  font-size: 10px;
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-left: 6px;
  flex-shrink: 0;
  cursor: default;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* global 模式按用户分段详情：一段 = 一个用户的完整预测（头部 + 描述 + 图） */
.global-user-segment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.global-user-segment + .global-user-segment { margin-top: 16px; }

.segment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.segment-user {
  font-weight: 600;
  font-size: 0.9rem;
  /* 修正：tokens v7 无 --color-text（原值引用失效走继承），对齐一级文字色 */
  color: var(--color-text-primary);
}

.segment-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 3px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.segment-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.segment-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 数据项删除按钮（🗑，仅本人/管理员可见）
   WHY: 用户在数据浏览面板删除自己不满意的项目；管理员可清理他人不合格数据 */
.tree-node-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 3px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}
.tree-node-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

/* ==================== 关注动态视图（关注人 → 大类 → 小类 → project 树） ==================== */

/* 人节点动态徽章：「N条 · 相对时间」
   WHY: 关注动态的核心信息是"谁更新了多少、多久前更新的"，直接放在人节点名后，
        用户不展开也能扫一眼全部关注对象的活跃度 */
.tree-node-person-badge {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-left: 6px;
  flex-shrink: 0;
  cursor: default;
  white-space: nowrap;
}

/* 人节点「取消关注」按钮（✕）：默认隐藏，hover 人节点行时出现，防误触 */
.tree-node-unfollow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 2px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: all 0.15s ease;
}

.tree-node-header:hover .tree-node-unfollow { opacity: 1; }

.tree-node-unfollow:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.tree-node-unfollow svg { width: 12px; height: 12px; }

/* 详情区用户分段高亮：关注树点叶子 → 详情分段视图滚动定位到该用户的段后短暂高亮，
   帮助用户在一堆分段里快速锁定"我关注的那个人"的数据 */
.global-user-segment.segment-highlight {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand-subtle);
  transition: box-shadow 0.2s ease;
}

/* 节点状态标记（叶子第二行）2026-09-11 紧凑化：字号 10.4→10px 绝对 px */
.tree-node-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.tree-node-badge.pending { background: var(--color-surface-sunken); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.tree-node-badge.running { background: var(--color-running-subtle); color: var(--color-running); }
.tree-node-badge.completed { background: var(--color-success-subtle); color: var(--color-success); }
.tree-node-badge.failed { background: var(--color-danger-subtle); color: var(--color-danger); }

/* 「已上传公共」标记：不用文字徽章，整行节点名变绿（ranking_ui.js 给 header 加 .uploaded-public）
   放在 .selected 规则之后，selected 时仍保持品牌色选中态 */
.tree-node-header.uploaded-public .tree-node-name {
  color: var(--color-success);
}

.tree-node-header.uploaded-public.selected .tree-node-name {
  color: var(--color-brand-strong);
}

/* 子节点容器：缩进引导线（微信分组列表的浅灰 hairline 引导）。
   2026-09-11 用户要求「线再细点、尽量靠左、间距缩小」：
   - 线色由 --color-border(#e5e5e5) 换 --color-border-subtle(#f0f0f0)（视觉更细）
   - 每级缩进 14+8=22px → 6+6=12px（三层嵌套少缩 30px，内容整体靠左） */
.tree-children {
  display: none;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--color-border-subtle);
}

.tree-node.expanded > .tree-children { display: block; }

/* ---- 右侧详情面板 ----
   微信文章页式：白底、无重描边，信息以「白卡 + hairline 分隔」组织 */
.results-detail-panel {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.results-detail-panel .empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.results-detail-panel .empty-state svg { width: 48px; height: 48px; opacity: 0.25; }
.results-detail-panel .empty-state h3 { font-size: 1rem; color: var(--color-text-secondary); }
.results-detail-panel .empty-state p { font-size: 0.8rem; color: var(--color-text-muted); }

.detail-content {
  padding: 16px;
  flex: 1;
}

/* 移动端返回按钮微信化（仅作用结果详情两处，接口文档页同 class 不受影响）：
   微信导航返回 = 「‹ + 文字」贴左、透明底、主色文字、44px 触摸高 */
.detail-content .mobile-back-btn {
  background: none;
  color: var(--color-text-primary);
  border-radius: 0;
  margin: 0 0 4px -6px;
  padding: 0 8px 0 0;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 400;
}

.detail-content .mobile-back-btn:active { opacity: 0.5; }

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.detail-header-main {
  flex: 1;
  min-width: 0;
}

/* 文章页标题：17px 加粗（微信文章 H1 口径） */
.detail-header h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* 标题行：项目名 + 预测涨幅徽章并排 */
.detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-title-row h2 { margin-bottom: 0; }

/* 预测涨幅徽章（详情头部醒目位）：微信行情式纯色文字（去浅底胶囊），
   数值大 + 口径标签小，红涨/绿跌/灰平（class 语义沿用 up/down/flat） */
.detail-score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  background: none;
}

.detail-score-chip strong {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.detail-score-chip small {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.detail-score-chip.up { color: var(--color-danger); }
.detail-score-chip.down { color: var(--color-success); }
.detail-score-chip.flat { color: var(--color-text-muted); }

/* 「上传公共」按钮：微信绿主按钮（实底）——本文件在 components.css 之后加载，
   覆盖 .btn-secondary 默认灰。默认（未上传）= 微信绿实底引导上传；
   .uploaded（当前用户已上传）= 灰色次按钮，仍可点击覆盖更新 */
.btn-upload-public {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--color-brand);
  color: var(--color-surface);
  border-color: var(--color-brand);
}

.btn-upload-public:hover {
  background: var(--color-brand-strong);
  border-color: var(--color-brand-strong);
  color: var(--color-surface);
}

.btn-upload-public.uploaded {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}

.btn-upload-public.uploaded:hover {
  background: var(--wx-pressed);
  color: var(--color-text-primary);
}

.btn-upload-public svg { width: 14px; height: 14px; }

/* 面包屑：13px muted（微信文章页作者行灰字口径） */
.detail-breadcrumb {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.detail-breadcrumb span { color: var(--color-text-secondary); }

.detail-breadcrumb .sep {
  color: var(--color-text-muted);
  margin: 0 2px;
}

/* 元信息：微信详情页「信息行」列表——一张白卡，行高 44px，
   label 14px 次级色居左、value 14px 居右对齐，行间 hairline 分隔 */
.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-wrap: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.detail-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 0.875rem;
}

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

.detail-meta-item .label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}

.detail-meta-item .value {
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: right;
  word-break: break-all;
}

.detail-meta-item .value.runId {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-link);
}

/* 长文分析：信息卡内的整行阅读块；默认折叠 3 行，点击展开全文 */
.detail-meta-item.detail-description {
  flex: 1 1 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 0;
  background: none;
}

.detail-meta-item.detail-description .value {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* 折叠态：3 行截断 + 底部渐隐，示意还有内容 */
.detail-description .desc-text.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.detail-description .desc-text.collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  /* 渐隐到信息卡白底（detail-meta 已从灰底芯片改为白卡，渐变终点同步跟随） */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface));
  pointer-events: none;
}

/* 「展开全文 / 收起」按钮 */
.detail-description .desc-toggle {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-brand);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.detail-description .desc-toggle:hover { color: var(--color-brand-strong); }

/* 分区标题：微信列表 group-title 口径（13px 次级色，无大写修饰） */
.detail-section { margin-bottom: 16px; }

.detail-section-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.detail-section-title svg {
  width: 16px;
  height: 16px;
  color: var(--color-brand);
}

/* K线图片区：图表是详情页的核心内容，全宽大图展示。
   WHY: 旧版 220px 网格 + 150px 裁剪把 K 线/MACD 细节全部切掉，
   改为单列纵向排列、按原始宽高比完整显示，首图（hero）再强调。 */
.detail-images {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-image-card {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
  cursor: zoom-in;
}

.detail-image-card:hover {
  box-shadow: var(--shadow-md);
}

/* 首图为主图：轻阴影强调（不再用描边区分） */
.detail-image-card.hero {
  box-shadow: var(--shadow-md);
}

.detail-image-card img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  background: var(--color-surface-sunken);
}

.detail-image-card .image-label {
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
}

.detail-image-card .image-label .type-badge {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

.detail-empty-hint {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding: 8px 0;
}

/* 历史记录列表 */
.detail-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 历史记录无限滚动：触底加载提示与 sentinel（不可见占位，触发 IntersectionObserver） */
.history-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.history-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: history-spin 0.7s linear infinite;
}

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

.history-load-more-sentinel {
  height: 1px;
  width: 100%;
  /* 不占视觉空间，仅作触底信号 */
}

.history-load-more-error {
  padding: 8px 14px;
  color: var(--color-danger);
  font-size: 0.78rem;
  text-align: center;
}

/* 历史卡片（扁平一级列表，替代旧的 .history-item 两级交互） */

.history-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.history-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

/* 展开态高亮：边框变主题色 */
.history-card[data-expanded="true"] {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.history-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.82rem;
}

.history-card-date {
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 90px;
  flex-shrink: 0;
}

.history-card-project {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.history-card-cat {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.history-card-arrow {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

/* 历史卡展开箭头：细 chevron SVG（模板已从「▼」字符换成 svg，微信 cell 同款线宽） */
.history-card-arrow svg { width: 14px; height: 14px; display: block; }

/* 历史卡片删除按钮（✕，仅本人/管理员可见）
   WHY: 用户在历史详情面板删除自己不满意的历史；管理员可清理他人历史
   NOTE: 与 .history-card-header 同级，事件委托在 bindEvents 中拦截 stopPropagation */
.history-card-delete {
  margin-left: auto;
  padding: 0 6px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  user-select: none;
}
.history-card-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

/* 展开时箭头旋转 180deg */
.history-card[data-expanded="true"] .history-card-arrow {
  transform: rotate(180deg);
}

.history-card-summary {
  padding: 0 14px 10px 14px;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
  /* 2 行截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-card-body {
  padding: 10px 14px;
  border-top: 1px dashed var(--color-border);
}

.history-card-fulltext {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  margin-bottom: 10px;
  line-height: 1.5;
}

.history-card-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.history-card-thumb-grid img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  background: var(--color-surface-sunken);
  transition: opacity 0.2s ease;
}

/* 图片加载失败时的降级提示 */
.detail-image-card.img-load-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.detail-image-card.img-load-failed::after {
  content: '图片加载失败';
}

.history-card-loading,
.history-card-error {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 12px 0;
}

.history-card-error {
  color: var(--color-danger);
}

/* 响应式：≤768px（与 responsive.css 主断点一致）微信触摸规格。
   注意 responsive.css 在本文件之后加载，同特异性规则会覆盖这里；
   触摸规格类规则一律用更高特异性（带 .results-tree / .tree-node.leaf 前缀）压过 */
@media (max-width: 768px) {
  /* 叶子白卡：2026-09-11 紧凑口径与桌面端一致（原 12px 16px/52px/1rem 的
     「舒适触摸」规格在本文件靠后位置，把上方 compact 值又盖回去了 —— 改为
     8px 10px/40px/14px，字号用绝对 px 见规范 #29；两行内容下实际行高由内容决定） */
  .tree-node.leaf > .tree-node-header {
    padding: 8px 10px;
    min-height: 40px;
    font-size: 14px;
  }

  /* 分组头 40px 触摸区（responsive.css 的 40px 同特异性会被这里的高特异性覆盖） */
  .results-tree .tree-node-header { min-height: 40px; }

  /* 排序下拉：16px（防 iOS 聚焦缩放）+ 44px 触摸高 */
  .tree-sort-select {
    font-size: 1rem;
    min-height: 44px;
    padding: 8px 10px;
  }

  /* 详情信息行：左右 16px（微信 cell 水平内边距） */
  .detail-meta { padding: 0 var(--wx-cell-pad-h); }

  /* 窄屏历史卡 header 换行、cat 换行 */
  .history-card-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .history-card-cat {
    margin-left: 0;
    width: 100%;
    white-space: normal;
  }

  .history-card-date {
    min-width: auto;
  }
}

/* 图片大图预览模态框：微信图片查看器式深色遮罩（token 化黑遮罩） */
.image-preview-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-mask);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-preview);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

.image-preview-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
}

.image-preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.image-preview-close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  transform: scale(1.05);
}

/* ==================== 社区互动栏（点赞/评论/收藏，community_ui.js） ==================== */
/* 微信朋友圈式轻量化（P2-T2.2）：图标+计数的轻动作，无重边框大按钮；
   挂在 .global-user-segment 尾部，顶部分割线与段内容拉开层次 */

.segment-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;            /* 微信触控标准：触摸区 ≥44px */
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;                /* 轻量化：无边框、无底色的大按钮 */
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.action-btn:hover {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 已点赞态：品牌绿 + 图标填充，一眼看出「我赞过」 */
.action-btn.active {
  color: var(--color-brand);
}

.action-btn.active svg { fill: currentColor; }

/* 已收藏态：微信黄（--color-warning），与已赞绿区分 */
.action-btn.action-favorite.active {
  color: var(--color-warning);
}

.action-btn .action-count { font-variant-numeric: tabular-nums; }

/* ---- 评论面板（段内内联展开，公众号留言式白卡） ---- */

.comment-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  background: var(--color-surface);   /* 白卡（原灰底 sunken） */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow-y: auto;
}

.comment-loading {
  padding: 8px 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* 公众号留言式三行结构：用户名 → 内容 → 时间/操作 */
.comment-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-size: 16px;             /* 内容主字号 */
  line-height: 1.5;
}

/* 两级回复：缩进 + 左侧细线（朋友圈式，刻意不做多级树/聊天气泡） */
.comment-item.comment-reply {
  margin-left: 16px;
  padding-left: 10px;
  border-left: 2px solid var(--color-border);
}

.comment-item.is-deleted { color: var(--color-text-muted); }

/* 评论定位高亮（论坛跳入详情定位目标评论，T8）：outline+背景短暂强调，
   由 CommunityUI.locateComment 添加，约 2.6s 后移除 */
.comment-item.comment-highlight {
  background: var(--color-brand-glow);
  outline: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  transition: background 0.3s ease;
}

/* 「← 返回论坛」面包屑链接（仅 from=forum 打开详情时插入 detail-breadcrumb，T8） */
.detail-back-forum {
  color: var(--color-brand);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.8rem;
}

.detail-back-forum:hover { text-decoration: underline; }

.comment-deleted-hint { font-size: 13px; font-style: italic; }

/* 用户名：微信链接蓝 15px，点按跳用户主页 */
.comment-author {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-link);
  cursor: pointer;
}

.comment-author:hover { color: var(--color-brand); text-decoration: underline; }

.comment-content { color: var(--color-text-primary); word-break: break-word; }

/* 「回复 @xxx」前缀：朋友圈式弱化蓝（corrections.md：动态 class 必有 CSS 定义） */
.comment-reply-at { color: var(--color-link); }

/* 时间/回复操作行：13px muted */
.comment-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.comment-reply-link,
.comment-delete-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;              /* 纵向扩触控区（文字链接过小） */
}

.comment-reply-link:hover { color: var(--color-link); }

/* 删除：13px 弱化危险色文字按钮（危险色低透明度常驻，hover 实色） */
.comment-delete-link {
  color: var(--color-danger);
  opacity: 0.65;
}
.comment-delete-link:hover { color: var(--color-danger); opacity: 1; }

/* ---- 输入条：微信胶囊式（白底圆角）+ 绿色发送 ---- */

.comment-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-input-row .comment-input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;        /* 微信胶囊输入条 */
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.comment-input-row .comment-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.comment-input-row .comment-send {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 999px;        /* 绿色胶囊发送按钮（btn-primary 品牌绿） */
}

/* 回复框取消按钮：弱化文字按钮，退出路径清晰可见 */
.comment-cancel {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comment-cancel:hover {
  color: var(--color-text-primary);
  background: var(--wx-pressed);
}

/* 回复框：缩进对齐回复层级文本 */
.reply-box { margin-left: 26px; }

/* ---- 手机端（≤768px）：评论布局单列紧凑（P2-T2.2） ---- */

@media (max-width: 768px) {
  .segment-actions { gap: 0; }
  .action-btn { flex: 1; padding: 0 8px; }  /* 三动作均分整行，触控区最大化 */
  .comment-panel { padding: 10px; }
  .comment-list { gap: 10px; max-height: 300px; }
  .comment-meta { gap: 10px; }
  .comment-input-row { gap: 6px; }
  .comment-input-row .comment-input { padding: 7px 12px; }
  .reply-box { margin-left: 16px; }
}

/* 评论时间戳（2026-09-10 P6 审计补定义：朋友圈评论区时间行规格） */
.comment-time { font-size: 13px; color: var(--color-text-muted); }

/* ==================== 合规标识（Task 1 基建） ==================== */

/* 2026-09-11 用户拍板：区域声明条（.ai-disclaimer）样式随之删除，AI 标识
   只保留下方内容级角标 + ranking.html 页脚站点免责声明 */

/* 内容级小角标：单条数据/卡片旁的「AI 生成」标记。
   WHY：《人工智能生成合成内容标识办法》的内容级显式标识要求——逐条内容需可识别角标 */
.ai-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--color-info);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}