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

.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/110px 口径）：
     ① 字号 12px —— 比同行分段项（13px）小一档（用户明确要求「字号也小一号」）；
     ② 观感对齐分段项 —— 灰色（--color-text-secondary = #888，与未激活的「我的」**同一令牌**）+ 常规字重；
     ③ 外框收紧贴紧文字 —— padding 0 2px、max-width 68px（=「默认排序」12px 下 48px
        文字 + 2×2 padding + 2 border + ~14 原生箭头）。
     代价与遗留：12px < 16px，iOS 聚焦该下拉可能触发页面自动放大（防缩放口径见
     coding-standards #29，本条为「视觉一致」优先的用户决策）；max-width 只够「默认排序」，
     若选中更长的排序项（如「热点（赞+评+看）」12px 下 102px）关闭态文字会被裁切——
     根治需缩短选项文案，尚未做。 */
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  min-height: 40px;
  max-width: 68px;
  padding: 0 2px;
}

/* 工具条图标按钮（一键上传 / 搜索放大镜等）不参与拉伸，紧跟排序下拉 */
#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 隐藏，
   行尾「关闭 ✕」收起（放大镜与关闭 ✕ 互斥，见下方 .tree-search-close 规则）。
   展开态（工具条行加 .is-searching）：隐藏 4 分段/排序下拉/一键上传/放大镜，
   .tree-search-box 显示并占满整行 + 行尾「关闭 ✕」；输入框有内容时行内
   再出现「清空 ✕」（JS 用 hidden 属性控制，故必须配 .tree-search-clear[hidden]
   规则——否则被本块 display:inline-flex 压过，空输入也常显，与关闭 ✕ 并成两个）。
   2026-09-11 用户报「两个 ✕」即上述两点：空输入时清空 ✕ 未隐藏 + 关闭 ✕ 默认态常驻。
   特异性说明：隐藏规则一律 #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);
}

/* 清空 ✕ 的显隐由 JS 置 hidden 属性控制（有内容才显示），但上面的
   display:inline-flex 是作者样式、优先级高于 UA 的 [hidden]{display:none}，
   不加本条则属性失效、空输入也常显 —— 2026-09-11 修复 */
.tree-search-clear[hidden] {
  display: none;
}

/* 关闭搜索 ✕：图标按钮，与放大镜同规格（.btn-icon-sm 提供底样式）。
   仅展开态显示（与放大镜互斥）：id 选择器特异性压过 .btn-icon-sm 的
   display:inline-flex，且不依赖文件加载顺序 */
#rank-seg-global .tree-search-close,
#rank-seg-personal .tree-search-close {
  display: none;
  flex: 0 0 auto;
}

#rank-seg-global.is-searching .tree-search-close,
#rank-seg-personal.is-searching .tree-search-close {
  display: inline-flex;
}

/* 展开态隐藏（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 T5）=====
   搜到个股表有、树上无数据的标的时，在树容器尾部出现的可点结果卡。
   紧凑口径：字号用绝对 px（html 字号随断点 15/14/13px，rem 会被层层缩小，
   见 coding-standards #29）；颜色只用 --color-* 令牌，禁止硬编码（#22）。
   区块由 _renderDictionaryCards 动态创建/移除（随关键词生灭），无默认可见态——
   此处不写 display 硬可见规则，避免与 hidden 属性控显隐打架（corrections 2026-09-11）。 */
.tree-search-dict {
  margin: 8px 0 4px;
  border-top: 1px solid var(--color-border);
}

.tree-search-dict-hd {
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* 每项为可点击按钮：40px 触摸行高（绝对 px），名称过长省略号截断 */
.tree-search-dict-item {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 10px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-search-dict-item:hover {
  background: var(--color-surface-sunken);
}

.tree-search-dict-item.active {
  background: var(--color-surface-sunken);
  color: var(--color-brand);
}

.tree-search-dict-ft {
  padding: 6px 10px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ===== 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);
}

/* hover 仅限真指针设备（@media (hover: hover)）：Android webview tap 后 :hover
   态粘滞不消退（2026-09-15 用户报「选中返回后叶子白卡变灰底」根因之一），触屏端
   一律不放 hover 底色，按压反馈交给 :active（松手即消） */
@media (hover: hover) {
  .tree-node-header:hover {
    background: var(--wx-pressed);
  }
}

/* 选中态（叶子点击后，2026-09-15 用户拍板改口径）：白卡保留，只用「名称品牌绿
   + 左缘绿色竖条」标记上次查看项——原「微信式轻按压灰底」口径退役（灰底在触屏
   端与 hover 粘滞叠加，观感=白卡消失） */
.tree-node-header.selected .tree-node-name {
  color: var(--color-brand);
  font-weight: 600;
}

/* 竖条叠加在白卡投影上（inset 不占布局空间）：高特异性压过叶子白卡规则的
   box-shadow 单值声明，投影保留、绿条叠加 */
.tree-node.leaf > .tree-node-header.selected {
  box-shadow: var(--shadow-sm), inset 3px 0 0 var(--color-brand);
}

/* 叶子行 = 白色卡片（.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);
}

/* 触屏端只保留 ：active 按压反馈（松手即消）；hover 底色限真指针设备
   （Android tap 后 :hover 粘滞，见上方 @media (hover: hover) 注释） */
.tree-node.leaf > .tree-node-header:active {
  background: var(--wx-pressed);
}
@media (hover: hover) {
  .tree-node.leaf > .tree-node-header:hover {
    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); }

/* 「7 日前」新鲜度分组分隔行（2026-10-16 排序口径 #12b 配套；2026-10-20 窗口由 72h 改 7 日）：
   7 日内有更新的数据排完后，陈旧组开始处插入一条标注行，让用户理解排序突变。
   左右 hairline + 中间灰字小号（tokens 取色，禁硬编码），自身不占叶子排名序号 */
.tree-freshness-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  font-size: 11px;
  color: var(--color-text-muted);
  user-select: none;
}
.tree-freshness-divider::before,
.tree-freshness-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* 公共树固定指数区分割线（2026-10-28，计划 docs/superpowers/plans/2026-10-28-official-tree-pinned-indices.md）：
   视觉复刻上方「7 日前」分隔行（hairline + 灰字小号，tokens 取色），独立类
   .tree-pinned-divider 与 freshness divider 语义隔离（既有测试按
   .tree-freshness-divider 计数，两语义互不串台）；以上为固定指数，以下按当前排序展示 */
.tree-pinned-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  font-size: 11px;
  color: var(--color-text-muted);
  user-select: none;
}
.tree-pinned-divider::before,
.tree-pinned-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* 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); }

/* 「已上传」三态文字徽章（2026-09-11 官方数据上传收口 T2，取代原 .uploaded-public 整行变绿）：
   market=集市 / official=官方 / community=社区，未上传不渲染。
   三态判定顺序见 ranking_ui.js _resolveUploadState（market → official → community）。
   绝对 px 字号 10px（coding-standards #29：紧凑控件不用 rem，会被断点根字号层层缩小）；
   nowrap + flex-shrink:0 保证不挤压节点名、窄面板（28%≈199px）下不折行；
   配色全部走 tokens.css 既有令牌，禁止硬编码色值 */
.tree-node-upload-badge {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.tree-node-upload-badge--community { background: var(--color-success-subtle); color: var(--color-success); }
.tree-node-upload-badge--official  { background: var(--color-info-subtle);    color: var(--color-info); }
.tree-node-upload-badge--market    { background: var(--color-warning-subtle); color: var(--color-warning); }

/* 树叶子「加自选」星标（2026-10-10 自选功能）：叶子第二行 meta 末尾（互动徽章
   「赞/评/看」之后，2026-10-25 用户拍板「放到看后面」，原 2026-10-23「名称行首位」
   口径退役），点击加入/移出自选。16px 紧凑尺寸与同行 10px 徽章协调、不撑高第二行；
   flex-shrink:0 防窄面板挤压（coding-standards #29）。插入点见 JS `_decorateFavoriteStars`
   ——追加在 .tree-node-meta 末尾。选中态金色实心 */
.tree-node-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.tree-node-fav svg { width: 12px; height: 12px; }
.tree-node-fav:hover { color: var(--color-warning); }
.tree-node-fav.active { color: var(--color-warning); }
.tree-node-fav.active svg { fill: currentColor; }

/* 子节点容器：缩进引导线（微信分组列表的浅灰 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;
}

/* 详情导航滑动切换动画（2026-10-17 上线；同日三版）：
   初版「淡出→渲染→淡入」被用户否（「有闪动、闪眼」——透明度 1→0→1 往复
   即闪烁本身）；二版改整幅传送带（零透明度纯位移、替换发生在视口外）；
   **三版（用户拍板「头部固定住，稳定一些」）：动画目标从容器收窄为「容器内
   除 .detail-header 外的子元素」**——标题/代码/前后切换按钮所在的头部栏固定
   不动，仅头部以下内容区（行情区/图片区/明细等）横滑交接。子元素各自挂同
   一 keyframes 位移一致=观感仍是一整块；方向变量 --detail-nav-dx 挂在容器类
   上，子元素经自定义属性继承取得位移方向。
   编排逻辑（挂类/摘类/防重入/双保险完成信号/同帧衔接）唯一实现 =
   ranking_ui.js _playDetailNavAnim（类仍挂容器上，本文件只管观感分发）。
   已知边界：动画期子元素带 transform 会临时新建包含块（详情内 .pred-data-table
   th sticky 表头吸附基准短暂偏移，位移中肉眼不可辨）；桌面并排布局下滑出会
   短暂掠过左邻树区（交接 ~160ms，可接受）。 */
@keyframes detailNavOut {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--detail-nav-dx) * -100%)); }
}
@keyframes detailNavIn {
  from { transform: translateX(calc(var(--detail-nav-dx) * 100%)); }
  to   { transform: translateX(0); }
}
.detail-content.detail-nav-out-left > :not(.detail-header),
.detail-content.detail-nav-out-right > :not(.detail-header) {
  animation: detailNavOut 160ms ease-out forwards;
  will-change: transform;
}
.detail-content.detail-nav-in-left > :not(.detail-header),
.detail-content.detail-nav-in-right > :not(.detail-header) {
  animation: detailNavIn 180ms ease-out forwards;
  will-change: transform;
}
/* 方向语义：类名 = 位移方向。out-left=旧面板向左滑出（dx=+1 → keyframe 位移 -36px）；
   in-right=新面板从右侧滑入（dx=+1 → keyframe 起点 +36px 归零）。
   dir=+1（下一个）→ out-left + in-right；dir=-1（上一个）→ 镜像。
   （2026-10-17 review 修正：in 类 dx 初版与 JS 三元接反——in-right 误配 -1 致
   「下一个」时新面板从左滑入；node mock 测不出 CSS var 数学，靠 review 抓出） */
.detail-content.detail-nav-out-left  { --detail-nav-dx: 1; }
.detail-content.detail-nav-in-right  { --detail-nav-dx: 1; }
.detail-content.detail-nav-out-right { --detail-nav-dx: -1; }
.detail-content.detail-nav-in-left   { --detail-nav-dx: -1; }
/* 减弱动效偏好：时长归零（JS 侧 matchMedia 同口径跳过编排，这里是 CSS 层双保险；
   与上方动画分发选择器同构——作用在子元素上，容器自身无动画） */
@media (prefers-reduced-motion: reduce) {
  .detail-content.detail-nav-out-left > :not(.detail-header),
  .detail-content.detail-nav-out-right > :not(.detail-header),
  .detail-content.detail-nav-in-left > :not(.detail-header),
  .detail-content.detail-nav-in-right > :not(.detail-header) { animation-duration: 0.01ms; }
}

/* 移动端返回按钮微信化（仅作用结果详情两处，接口文档页同 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; }

/* 通达信顶栏搜索钮（2026-09-29 T1）：桌面基础隐藏，移动端详情态由
   responsive.css 的 .mobile-detail-open 作用域放开显示。
   2026-10-16 收合改造：按钮已搬入 .detail-more-menu 菜单容器，桌面隐藏口径
   仅对「头部裸露形态」成立——菜单内由下方 .detail-more-menu 作用域显式
   display:flex 放开（树搜索恒为菜单行） */
.detail-search-btn { display: none; }

/* 详情头「加自选」按钮（2026-10-10 自选功能）：桌面端常显于详情头右侧（flex 项，
   .detail-header 的 space-between 将其推至右缘）；移动端详情态由 responsive.css 改为
   绝对定位、与搜索按钮并列。选中态金色实心（当前详情标的已在自选中） */
.detail-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.detail-fav-btn svg { width: 18px; height: 18px; }
.detail-fav-btn:hover { color: var(--color-warning); }
.detail-fav-btn.active { color: var(--color-warning); }
.detail-fav-btn.active svg { fill: currentColor; }

.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);
  position: relative; /* 「⋯」更多菜单 .detail-more-menu 的 absolute 定位锚点（2026-10-16 收合改造；移动端 responsive.css 同值已有，不冲突） */
}

/* ===== 详情头「⋯」更多菜单（2026-10-16 收合改造）=====
   操作类按钮（加自选/树搜索/一键官方领取/上传）收进下拉菜单，头部只留一个
   「⋯」圆钮。触发钮复用 .detail-fav-btn 视觉口径保证头部观感一致；菜单为
   absolute 下拉卡，锚 header 右缘。菜单行 = 图标 + .detail-menu-label 文字，
   既有按钮 id 搬家不改名（规范 #25③），JS 绑定与状态单出口零改动 */

.detail-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;   /* 与 .detail-fav-btn 同口径（30px 圆钮） */
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.detail-more-btn svg { width: 18px; height: 18px; }
.detail-more-btn:hover,
.detail-more-btn.is-open { color: var(--color-text-primary); }

.detail-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30; /* 高于头部内容与行情快照行（同面板内浮层级） */
  min-width: 168px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
}

/* corrections「hidden 压不过 display」：hidden 属性兜底必须显式成对写 */
.detail-more-menu[hidden] { display: none; }

/* 菜单行：既有按钮搬入后由本作用域改写为「图标+文字」通栏行。
   min-height 44px 触摸目标；字号绝对 px（规范 #29，rem 会被断点根字号缩小） */
.detail-more-menu .detail-fav-btn,
.detail-more-menu .detail-search-btn,
.detail-more-menu .btn-upload-public {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}
/* 树搜索行：显式放开 .detail-search-btn 的桌面 display:none（头部裸露口径已随
   搬家失效，菜单内恒显示） */
.detail-more-menu .detail-search-btn { display: flex; }
/* 搜索 svg 尺寸：原 .detail-search-btn 桌面态无 svg 规则（曾靠 display:none 隐身、
   尺寸只在 responsive.css 移动端），菜单内不补会落 SVG 默认尺寸撑爆行高
   （harness 实测行高 98px，2026-10-16） */
.detail-more-menu .detail-search-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.detail-more-menu button + button { border-top: 1px solid var(--color-border-subtle); }

.detail-more-menu .detail-fav-btn:hover,
.detail-more-menu .detail-search-btn:hover { background: var(--color-surface-sunken); }

/* label 基础隐藏：仅菜单作用域内显示——按钮被挪出菜单也不会露出文字 */
.detail-menu-label { display: none; }

.detail-more-menu .detail-menu-label {
  display: inline;
  font-size: 14px;
  color: var(--color-text-primary);
}

/* 上传行三态在菜单内的观感：微信绿引导态收窄为「绿字行」（实底块在菜单里过重），
   uploaded 灰态文字保持次级色可读；disabled（官方已上传官方树）用 muted 色 */
.detail-more-menu .btn-upload-public { color: var(--color-brand); }
.detail-more-menu .btn-upload-public:hover { background: var(--color-surface-sunken); color: var(--color-brand-strong); }
.detail-more-menu .btn-upload-public.uploaded { color: var(--color-text-secondary); }
.detail-more-menu .btn-upload-public.uploaded:hover { color: var(--color-text-primary); }
.detail-more-menu .btn-upload-public:disabled { color: var(--color-text-muted); cursor: default; background: transparent; }
.detail-more-menu .btn-upload-public svg { width: 16px; height: 16px; }

.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; }

/* 预测涨幅徽章（详情头部醒目位）：微信行情式纯色文字（去浅底胶囊），
   口径标签在上（small）+ 数值大字在下（2026-10-27 用户拍板竖排，DOM 顺序
   small→.chip-num-row 即视觉顺序），红涨/绿跌/灰平（class 语义沿用 up/down/flat） */
.detail-score-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  background: none;
}

/* 数字 + AI 徽章同行（横排子行，外层竖排的第二行） */
.detail-score-chip .chip-num-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.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;
}

/* 上一个/下一个导航条：detail-header-main 内、标题行与面包屑之间的紧凑控件行。
   紧凑控件字号一律绝对 px（coding-standards #29：html font-size 随断点变化，rem 被层层缩小） */
.detail-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* hidden 属性控显隐必须配 [hidden] 兜底（corrections 2026-09-11/12：
   CSS 无条件声明 display 会静默压过 UA 的 [hidden]{display:none}） */
.detail-nav[hidden] { display: none !important; }

.detail-nav-btn {
  width: 28px;
  height: 24px;
  padding: 0;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.detail-nav-btn:hover {
  background: var(--wx-seg-bg);
  color: var(--color-text-primary);
}

.detail-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.detail-nav-pos {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* 元信息：微信详情页「信息行」列表——一张白卡，行高 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; }

/* 「资讯」入口（2026-09-19 从行情区顶部 tab 挪入本行「点赞」旁）：无计数、带文字标签，
   左右内边距收紧一档，保证窄屏四项同行不溢出 */
.action-btn.action-news { padding: 0 8px; }

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

.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;
}

/* ==== 预测数据卡片（2026-09-22 plan Task 4：历史列表顶部 prediction 预测段） ====
   容器观感对齐 .history-card（白卡+hairline），表格窄行紧凑；头部沿用
   history-card-header 的字号口径。仅 _buildPredictionCardHtml 产出。 */
.pred-data-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 10px;
}

.pred-data-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.pred-data-card-title {
  font-weight: 600;
  color: var(--color-brand);
  flex-shrink: 0;
}

.pred-data-card-range {
  color: var(--color-text-primary);
  font-weight: 500;
  flex-shrink: 0;
}

.pred-data-date {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.pred-data-card-count {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

/* 表格区限高内滚（预测段 ~30 天，全显会顶长详情面板） */
.pred-data-card-scroll {
  max-height: 260px;
  overflow-y: auto;
}

.pred-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pred-data-table th,
.pred-data-table td {
  padding: 6px 12px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.pred-data-table th {
  color: var(--color-text-muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--color-surface);
}

.pred-data-table td:first-child,
.pred-data-table th:first-child {
  text-align: left;
}

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

.pred-data-table tbody tr:hover {
  background: var(--color-bg);
}