/* ==========================================================================
   Fund Insight 基金业务数据站
   main.css — 设计规范参照 website-UI.md：扁平直角 · 无阴影
   版本: v1.1.0
   说明: PC-Web 优先(>=1100px)，mobile.css 负责 <1100px 适配
   ========================================================================== */

/* ---------- 1. 设计令牌(禁止硬编码) ---------- */
:root {
  /* 品牌色 */
  --brand-900: #0B1F3A;
  --brand-700: #12345E;
  --brand-500: #1D4ED8;
  --brand-400: #3B82F6;
  --brand-100: #E8EEFB;
  --brand-50: #F4F7FD;

  /* 涨跌(A股习惯：红涨绿跌) */
  --pos: #D92D20;
  --pos-soft: #FEF1F0;
  --neg: #0E9F6E;
  --neg-soft: #EAFBF3;

  /* 表格行高亮 / 悬停：
     ⚠ 色值以 **Tailwind v4 官方**为准（`docs/reference/tailwind-colors.json`，来源 tailwindcss@4.3.3/theme.css），
       官方用百分比写法、这里按站点惯例写小数，两者等价；**引用必须写明版本**（v4 与 v3 色值不逐值相同）。
       规则：**直接写 oklch、勿转 hex**（Tailwind v4 本身就是 oklch 表示，canvas 也原生支持）。
     全站表格行的 hover 与「摩根基金」特殊标注**共用同一色**（--row-hover）。
     ⚠ 这是「表格行高亮」的唯一来源 —— 各页不要再写死色值，也不要用 --brand-50（那是品牌色阶，
       另有下拉/标签等 10+ 处在用，改它会连带影响非表格元素）。
     沿革：2026-09-28 由"浅灰（与背景几乎同色）"改为浅蓝 blue-100（用户指定）；
           2026-10-01 用户指定换成 **indigo-50**（`oklch(0.962 0.018 272.314)`），比原色更浅、略带紫调。 */
  --row-hover: oklch(0.962 0.018 272.314);          /* = indigo-50（官方写作 oklch(96.2% 0.018 272.314)） */
  /* ⚠ `-strong` **必须跟着换同色系**：它只在「摩根行再 hover」时用，若停留在旧的 blue-200，
     会出现"常态淡紫 → 悬停变蓝"的跨色相跳变。取 indigo-100 = 同色系加深一档（与原 blue-100→blue-200 的结构一致）。 */
  --row-hover-strong: oklch(0.93 0.034 272.788);    /* = indigo-100，仅用于「本已高亮的行再 hover」加深 */

  /* 中性 */
  --bg: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --border: #EDF1F7;
  --border-strong: #E1E7F0;
  --text: #1A2B45;
  --text-2: #46546A;
  --text-3: #6B7A92;
  --muted: #9AA7BC;
  --muted-2: #9AA3B2;   /* 次级弱化色(原文标题/条目meta行；2026-09-25 补登记，此前仅以内联 fallback 使用) */

  /* 装饰性渐变光晕（2026-09-27 新增）：
     仅供「页头 Hero / 页脚」的浅色底纹使用，
     ⚠ 不得用于任何信息着色（涨跌、状态、分类）——那走上面的语义色。
     ⚠ **2026-09-30 曾改为 logo 两色（#e0c3fc / #8ec5fc）→ 当日被用户退回**：
       「page-head 和 footer 底色改的还不如刚才，这个部分恢复回去吧」。
       原因：logo 两色明度远高于品牌蓝，在 alpha .10 下叠加后的**视觉强度只有原来的 43% / 61%**，
       光晕淡到几乎看不见（详见 §4.1）。**不要再用 logo 色替换这两个 token**。 */
  --glow-blue: rgba(29, 78, 216, .10);   /* = --brand-500 的 10% */
  --glow-sky: rgba(0, 166, 244, .10);    /* 天蓝（Tailwind v4 sky-500）。
                                            2026-10-01 用户指定：原「青绿 teal-600」改此色，仅页脚右下那团用。
                                            ⚠ 换色务必保持 alpha=.10 —— 这两团的视觉强度全靠它（见 §4.1）。 */

  /* 品牌标识尺寸（2026-09-30 用户指定：图标的上沿/下沿须与右侧文字的上沿/下沿**对齐**）：
     即「logo 高度 == 相邻文字块高度」，故尺寸由文字排版反推，**不要随手改这几个字号而不改这里**。
       --brand-text-h        = .brand-name(16.5px × 1.15 = 18.975) + .brand-text 的 gap(1px)
                             + .brand-sub(9.5px × 1.2 = 11.4) ≈ 31.375px（浏览器实测 31.359）
       --brand-text-h-narrow = ≤720px 时 .brand-sub 被 `display:none`（见 mobile.css），
                             文字块只剩 .brand-name(15px × 1.15 = 17.25px)
     ⚠ 页脚**不隐藏**副名 ⇒ 页脚在窄屏也仍用 --brand-text-h（由 .site-footer .brand-logo 显式指定）。 */
  --brand-text-h: 31.36px;
  --brand-text-h-narrow: 17.25px;

  /* 布局：全站直角、无阴影 */
  --radius: 0;
  --radius-sm: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --header-h: 64px;
  --content-max: 1280px;
  --font: Arial, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- 2. Reset & 基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: var(--radius);
}

/* 全站统一滚动条样式(直角、中性灰、无阴影)：
   页面纵向滚动条与产品列表底部自绘横条共用同一套视觉 */
html {
  scrollbar-width: thin;
  scrollbar-color: #C3CBD9 #F1F3F7;
  /* 稳定滚动条 gutter：不同页面内容高度不同(滚动条出现/消失)会导致
     视口内容区宽度跳动、整页左右晃动；预留固定 gutter 消除 layout shift */
  scrollbar-gutter: stable;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #F1F3F7;
}
::-webkit-scrollbar-thumb {
  background: #C3CBD9;
}
::-webkit-scrollbar-thumb:hover {
  background: #A7B1C4;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--brand-500);
  text-decoration: none;
}

a:hover {
  color: var(--brand-700);
  text-decoration: none;   /* 全站硬规则(2026-09-27)：hover 链接**不出下划线**，只变色 */
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 0;
}

/* ---------- 3. 顶栏(topbar) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1.1;
}

/* 品牌标识：✦ 的真字形矢量轮廓（2026-09-30 用户指定）
   - 轮廓来源：Segoe UI Symbol（seguisym.ttf）的 U+2726 —— 该字体是站点 font-family 回退后
     实际命中的字体（已用 canvas 逐像素比对确认，差异 0 px）。轮廓为 **24 条二次贝塞尔、零直线**，
     与字符形状逐像素一致（IoU 0.9768），凹槽由弧线构成。
   - 渐变：#e0c3fc → #8ec5fc（即 linear-gradient(120deg,…)，SVG 内按 120° 轴向换算为左上→右下）。
   - 该元素是装饰性图形（相邻 .brand-name 已提供文字），故 SVG 标 aria-hidden、不参与无障碍命名。
   ⚠ 尺寸由本规则控制，SVG 上不要写死 width/height；不做圆角/阴影（全站硬规则）。
   ⚠ 尺寸 = `--brand-text-h`（见 :root 说明），使**图标上/下沿与右侧文字块上/下沿对齐**（2026-09-30 用户指定）。
   ⚠ 历史：本类名此前是一套未被引用的「黑底白字字符」样式（main.js 从未使用），2026-09-30 一并修正。 */
.brand-logo {
  width: var(--brand-text-h);
  height: var(--brand-text-h);
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.brand-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.brand-name {
  font-size: 16.5px;
  font-weight: 600;
  color: #0B1F3A;
  letter-spacing: .5px;
  white-space: nowrap;
  line-height: 1.15;
}

.brand-sub {
  font-size: 9.5px;
  font-weight: 400;
  color: #6B7A92;
  letter-spacing: .6px;
  line-height: 1.2;
  white-space: nowrap;
}

/* 一级导航 */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #12345E;
  transition: color .18s, background .18s;
  cursor: pointer;
  user-select: none;
}

/* ⚠ hover 效果必须只在「真能 hover」的设备上生效（2026-09-28 用户指定）：
   触屏点一级菜单后 :hover 会**粘住**，与当前栏目的 .nav-item.active 叠加
   ⇒ 屏幕上同时有两个一级菜单标蓝（手机端实测：点「行业动态」后它 hover 蓝 + 当前栏目 active 蓝 = 两个蓝；
   再点「公募市场」仍是两个蓝）。包进 @media (hover: hover) 后，触屏只剩 .active 一个蓝。 */
@media (hover: hover) {
  .nav-link:hover {
    color: var(--brand-500);
  }
}

/* 按压瞬间的反馈：:active 只在按住期间存在，不会像 :hover 那样残留 ⇒ 触屏也有即时反馈 */
.nav-link:active {
  color: var(--brand-500);
}

.nav-item.active > .nav-link {
  color: var(--brand-500);
  font-weight: 700;
}

.nav-link .arrow {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .18s;
}

@media (hover: hover) {
  .nav-item:hover .nav-link .arrow {
    transform: rotate(180deg);
  }
}

/* 二级下拉菜单(扁平直角，参考 portfolio-cube-now) */
.subnav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px;
  display: none;
  z-index: 101;
}

.subnav::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

@media (hover: hover) {
  .nav-item:hover .subnav,
  .nav-item:focus-within .subnav {
    display: block;
  }
}

.subnav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  font-size: 14px;
  color: #46546A;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.subnav-link::before {
  content: '';
  width: 9px;
  height: 9px;
  background: #E1E7F0;
  flex-shrink: 0;
}

/* ⚠ 同 .nav-link：hover 只在真能 hover 的设备上生效（触屏点过的子项会留"浅底蓝字"，
   看起来像被选中）。2026-09-28 与一级菜单一并收敛。 */
@media (hover: hover) {
  .subnav-link:hover {
    background: var(--surface-2);
    color: var(--brand-500);
  }
}

/* 触屏/全端的按压反馈：:active 只在按住期间存在，不残留 */
.subnav-link:active {
  background: var(--surface-2);
}

.subnav-link.active {
  background: var(--brand-500);
  color: #fff;
}

.subnav-link.active::before {
  background: #fff;
}

/* 头部右侧工具 */
.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-doc {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  background: var(--surface);
  transition: all .18s;
}

.btn-doc:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

/* 移动端菜单按钮(仅 <1100px 显示) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform .2s, opacity .2s;
}

/* ---------- 4. 页面主体 / Hero ---------- */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px;
}

/* 页头 Hero：白→浅品牌蓝渐变底 + 右上光晕
   （光晕色 2026-09-30 曾改为 logo 紫 → 当日被用户退回，现为品牌蓝 --glow-blue，见 §4.1） */
.page-head {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, var(--brand-50) 100%);
  border: 1px solid var(--border);
  padding: 28px 32px 24px;
  margin-bottom: 24px;
  overflow: hidden;
}

.page-head::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--glow-blue) 0%, transparent 65%);
  pointer-events: none;
}

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

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

.breadcrumb a:hover {
  color: var(--brand-500);
}

.page-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-900);
  letter-spacing: .3px;
}

.page-desc {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-2);
  max-width: 900px;
}

/* 元信息条 */
.meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}

.meta-bar .dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 0;
}

.dot.live {
  background: var(--neg);
}

.dot.pending {
  background: #F79009;
}

/* ---------- 5. 筛选工具栏 ---------- */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

.filter-select,
.filter-input {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  min-width: 140px;
  outline: none;
  border-radius: 0;
  transition: border-color .18s;
}

.filter-select:focus,
.filter-input:focus {
  border-color: var(--brand-500);
}

/* ---------- 筛选器：分组标签 + 胶囊按钮(参考 dividend-guide 行布局，保留本站白底浅边框) ---------- */
.tagbar {
  display: block;              /* 每组独立一行(覆盖 .filter-bar 的 flex 横排) */
  /* 单一值：上下左右留白严格相等（2026-09-21 用户指定）。原为三值 12px 16px 4px，
     底部只有 4px —— 这是「新页面筛选器留白不一致」反复复发的根因，勿再改回多值。
     各页若无特殊需要**不要再写 padding 覆盖**（FOF/清盘/公司排名的旧覆盖已删除）。 */
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.tagbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 12px;
}
/* 若某行把标签包在容器里(便于按行重渲染，如红利ETF页的 #df-theme/#df-mkt/#df-fee/#df-mgr)，
   该容器必须自身是 flex 容器并套用同款 gap/对齐，否则：
     ① .tagbar-row 的 gap 只作用于直接子元素 → 包裹内标签之间 0 间距（与同页其他行、其他页面都不一致）；
     ② 包裹盒作为行内盒会有 line-height 行框撑高 → 整行多 1px（实测包裹高 26 vs 标签高 25）。
   用 :where() 让本规则特异性为 0 → 各页已有的自身样式（如 .scale-metric-switch / .dd-wrap / .scale-cats）
   一律优先、不受影响；新页面直接用包裹容器时自动获得正确间距。（2026-09-21 用户指定：筛选器留白与间距必须全站一致）
   ⚠ 必须排除 .tagbar-group（行标题，需保持 min-width 对齐）、.tagbar-summary（纯文本摘要，block 才会正常换行）、
     .pt-search-row —— 这三者虽是行的直接子 span/div，但不是「标签包裹容器」。 */
:where(.tagbar-row > span, .tagbar-row > div):where(:not(.tagbar-group, .tagbar-summary, .pt-search-row)) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.tagbar-row:last-child {
  margin-bottom: 0;
}
/* 分页表页关键词搜索行(行政审批页 2026-09-04；输入框复用 .news-search 样式，置于筛选条件之下、表格上方) */
.pt-search-row {
  display: flex;
  align-items: center;
  margin-top: 12px;
  /* 原 margin-bottom: 4px —— 该行恒为筛选条最后一行，其下应有的留白由 .tagbar 的 padding 提供，
     这 4px 会让底部留白比上/左多出 4px（实测 20 vs 16）。2026-09-21 用户指定统一，故置 0 */
  margin-bottom: 0;
}
.pt-search-row .news-search {
  flex: 0 1 460px;
}
.pt-search-row .news-search input {
  height: 30px;
}
.tagbar-group {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 52px;
  white-space: nowrap;
}
.tag {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: none;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.tag:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}
.tag.active {
  background: var(--brand-500);
  color: #fff;
  font-weight: 600;
}
.tag-reset {
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
}
.tag-reset:hover {
  color: var(--brand-500);
}
.tagbar-summary {
  font-size: 12px;
  color: var(--muted);
}

/* 资产类别下拉(两级，对标中证官网指数浏览器) */
.dd-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 4px;   /* hover 桥：按钮与菜单之间的间隙也计入悬停区，鼠标移动不中断 */
}
.dd-arrow {
  width: 12px;
  height: 12px;
  color: var(--muted);
  vertical-align: -2px;
  margin-left: 2px;
  flex-shrink: 0;
}
.dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;   /* 置顶：高于冻结表头(60)/顶栏(101)，避免弹窗被滚动后的元素覆盖 */
  min-width: 340px;
  margin-top: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border-strong, #DFE4EC);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}
/* 字母分组下拉(如管理人 A/B/C...)：纵向分组，组内横向排布 */
.dd-alpha-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  min-width: 160px;   /* 字母小弹窗：宽度自适应选项 */
}
.dd-alpha-wrap {
  padding-bottom: 4px;   /* hover 桥：字母标签与弹窗之间不中断 */
}
/* 字母弹窗(dd-alpha-tabs：管理人)：选项固定一行 3 个；不换行(原则)，
   列宽 max-content 自适应内容，弹窗宽度跟着最长项走 */
.dd-tabs-menu {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 4px;
  align-items: stretch;
  min-width: 0;           /* 不设固定宽度，由内容撑开 */
}
.dd-tabs-menu .dd-sub {
  text-align: center;
  white-space: nowrap;    /* 原则：名称不换行 */
}
/* 指数简称标蓝(行政审批：选中指数基金/被动ETF/指数增强时高亮名称中的指数简称段) */
.idx-part {
  color: var(--brand-500);
  font-weight: 600;
}
.dd-alpha-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.dd-alpha-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-2);
  min-width: 16px;
  text-align: center;
  margin-right: 2px;
}
.dd-group {
  width: 100%;
  padding: 4px 2px 2px;
  border-top: 1px solid #EEF1F6;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.dd-group:first-of-type {
  border-top: none;
}
.dd-group .tag {
  margin-left: 6px;
}

.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: all .18s;
}

.btn-primary {
  background: var(--brand-500);
  color: #fff;
}

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

.btn-ghost {
  background: transparent;
  color: var(--brand-500);
  border: 1px solid var(--brand-500);
}

.btn-ghost:hover {
  background: var(--brand-100);
}

/* 锁定分类 tab 的激活样式，覆盖 btn-ghost 权重 */
.cat-tab.cat-tab.cat-tab.active,
.cat-tab.cat-tab.active {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}
.cat-tab.cat-tab.cat-tab.active:hover,
.cat-tab.cat-tab.active:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
}

/* ---------- 6. 数据面板 ---------- */
/* 面板本身融入网站背景(去边框、透明)，panel-head 有竖线装饰，
   表格区域由 .panel-body 自补白底卡片边框。 */
.data-panel {
  background: transparent;
  border: none;
  margin-bottom: 20px;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 14px 20px;   /* 左侧让位竖线；右侧不留空间，panel-note 贴最右 */
  border-bottom: none;
  background: transparent;
  position: relative;
}

/* 左侧贴边粗竖线装饰(方角、品牌蓝；2026-08-26 用户指定固定 20px 高) */
.panel-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--brand-500);
}

/* 区块标题：与网页背景同色、无装饰竖条，融入背景(参照策略魔方 section-head) */
.panel-title {
  font-size: 17.5px;
  font-weight: 700;
  color: #0B1F3A;
  line-height: 1.4;
}

/* 产品列表特例：限高滚动容器 + 底部自绘横条，
   卡片底边由 xbar 补全(避免与 xbar 顶边框双线)
   ⚠⚠ 2026-09-28 用户指定统一列表页外框时发现：原选择器
   `.data-panel .panel-body.funds-scroll` 会命中**所有**分页表页面
   （指数发布 / 基金行政审批 / 基金产品 / 基金经理），把它们的表格**底边也去掉了** ——
   而那 3 页并没有自绘横条（xbar 只有产品页有），底边就真的缺了。
   ⇒ 用 `:has(#fund-xbar)` 限定到**只有产品页**。 */
.data-panel:has(#fund-xbar) .panel-body.funds-scroll {
  border-bottom: none;
}
.data-panel .funds-xbar {
  background: #F1F3F7;     /* 轨道色：与全站统一滚动条一致 */
  border: 1px solid var(--border);
}

.panel-title .badge {
  margin-left: 8px;
}

.panel-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* 空间不足时换行(移动端) */
  gap: 8px;
  row-gap: 4px;
  font-size: 12.5px;
  color: #9AA7BC;
}

/* 面板右侧信息：合计 n 只 · 数据更新至 … | 下载到本地 */
.note-item {
  white-space: nowrap;
}
.note-item b {
  color: var(--brand-500);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.note-sep {
  color: #C6D0DE;
}
.note-download {
  color: var(--brand-500);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.note-download:hover {
  color: var(--brand-700);
}

.panel-body {
  padding: 0;
  overflow-x: auto;
  background: var(--surface);   /* 表格区域自补白底卡片 */
  border: 1px solid var(--border);
}

/* ---------- 7. 表格(数据优先对齐) ---------- */
.data-table {
  font-size: 13px;
  min-width: 720px;
}

.data-table thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

/* 可排序表头 */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color .15s, background .15s;
}
.data-table th.sortable:hover {
  color: var(--brand-500);
  background: var(--brand-50);
}
/* 表头排序箭头（2026-10-02 用户指定：用 user-upload/上-小_up-small.svg 的图形替代排序字符）
   结构 = <span class="sort-arrow"> 内联一个 <svg>；降序（.desc）用 rotate(180deg) 复用同一图形。
   ⚠ 尺寸换算：该 SVG 的 viewBox 是 48×48，而路径本体只占中间 24 单位（12~36，两侧各留白 25%）
     ⇒ span 设 18px 时，**箭头本体实际显示约 9px**（与替换前的 9px 字符视觉相当）。
   ⚠ `margin-left:-4px` 的作用是**精确抵消 SVG 画布自身的左侧留白**，不是"缩小间距"：
     路径最左 x=12、stroke-width 2.8 且圆头外扩半宽 1.4 ⇒ 墨迹最左 = 10.6/48×18px ≈ **3.98px**
     ⇒ 用 -4px 抵掉它，**剩下的视觉间距就恰好等于 JS 常量里那一个前导空格**
     （2026-10-02 用户指定"箭头和表头的名字中间隔一个空格"）。⚠ 两个值是一对，改一个要同改另一个。
   ⚠ stroke 走 currentColor ⇒ 颜色由下面的 color 统一控制（品牌蓝，不写死 SVG 自带的 #333）；
     stroke-width 2.8 在 18px 显示下视觉约 1.05px（≈ 原设计与字符笔画粗细）。
   ⚠ 圆角端点/连接必须保留：路径端点若被裁会变平头（linecap:round 的圆头会越出路径端点）。 */
.data-table .sort-arrow {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: -4px;
  color: var(--brand-500);
  vertical-align: -4px;
}

.data-table .sort-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.data-table .sort-arrow svg path {
  stroke: currentColor;
  stroke-width: 2.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-table .sort-arrow.desc {
  transform: rotate(180deg);
}

/* 表头 hint：黑色圆圈 i 图标 + hover 小字提示 */
.data-table th[data-hint] {
  position: relative;
  cursor: help;
}

.hint-ico {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 3px;
  border-radius: 50%;
  background: #6B7280;
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  font-style: normal;
  line-height: 10px;
  text-align: center;
  vertical-align: super;
}

/* 悬停气泡（桌面）：⚠ 必须包 @media (hover: hover) —— 触屏没有 hover，手指点过表头
   会让 :hover 粘住、气泡一直挂着（§4.3 硬规则：hover 效果一律只在真能 hover 的设备上生效） */
@media (hover: hover) {
  .data-table th[data-hint]:hover::after {
    content: attr(data-hint);
    position: absolute;
    top: 100%;
    right: 0;              /* 右对齐表头右缘：最后一列 hint 不会超出表格边界被裁 */
    left: auto;
    z-index: 20;
    background: rgba(17, 24, 39, .92);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 0;
    pointer-events: none;
  }
}

/* 吸顶表头（.thead-stuck）禁掉上面那条伪元素气泡：它是 position:fixed + overflow-x:auto，
   而 CSS 规范里 overflow **无法只把一个方向设成 visible**（写了也会被强制算成 auto）
   ⇒ 气泡必被裁掉（这也是 2026-09-27 当初干脆摘掉 data-hint 的原因）。
   改由 body 下的独立浮层 .stuck-hint-tip 承担（位置由 JS 按该 th 的实时矩形算）。 */
.thead-stuck th[data-hint]:hover::after {
  content: none;
}

/* 吸顶表头的 hint 浮层（JS 生成，见 initStickyHeader）。视觉与上面那条伪元素气泡**逐项对齐**
   （直角 / 深底白字 / 12px / 6px 10px / nowrap），保证吸顶前后观感一致。 */
.stuck-hint-tip {
  position: fixed;
  display: none;
  z-index: 90;             /* 必须高于 .thead-stuck 的 z-index:60 */
  background: rgba(17, 24, 39, .92);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 0;
  pointer-events: none;
}

.data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #F5F7FC;
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

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

/* 行 hover：⚠ 必须包 @media (hover: hover) —— 触屏点过一行会让 :hover 粘住、整行一直亮着（§4.3 硬规则） */
@media (hover: hover) {
  .data-table tbody tr:hover {
    background: var(--row-hover);
  }
}

/* ⚠⚠ 凡「tbody td 有不透明白底」的表，都必须**在 td 上**再重置一次 hover 底色 ——
   因为 tr 的背景会被 td 的不透明白底整个盖住（这正是「公司排名页大部分行没有 hover」的根因，
   2026-09-28 用户指出）。**下面用组选择器一次写全所有白底表**：
   新增同类表请往这里加一行，不要再各页各写一条（那样必然漏页 —— 本轮就漏了 3 页）。 */
@media (hover: hover) {
  #tbl-funds tbody tr:hover td.fix-col,
  #tbl-company-ranking tbody tr:hover td,
  #tbl-company-ranking tbody tr:hover td.fix-col,
  #tbl-fof-holdings tbody tr:hover td,
  #tbl-closed tbody tr:hover td,
  #tbl-df tbody tr:hover td,
  #tbl-df-groups tbody tr:hover td {
    background: var(--row-hover);
  }
}

/* 对齐：名称/文本左对齐(默认)，数据右对齐(字体与正文统一) */
.data-table td.num,
.data-table th.num {
  text-align: right;
}

/* 加粗列(如指数发布页的指数简称) */
.data-table td.cell-bold,
.data-table td.cell-bold a,
.data-table a.cell-bold {
  font-weight: 600;
}

/* 涨跌着色 */
.up {
  color: var(--pos);
  font-weight: 600;
}

.down {
  color: var(--neg);
  font-weight: 600;
}

.flat {
  color: var(--muted);
}

/* ---------- 冻结列(仅产品列表 #tbl-funds)：基金代码 + 基金简称 ---------- */
/* 表格加宽触发横向滚动；前两列 sticky 冻结，左右拖动查看其余列 */
#tbl-funds.data-table {
  min-width: 1560px;
}

/* 已清盘精简视图(5 列，2026-09-27 用户指定)：只剩 5 列，无需 13 列那套大宽度，
   否则 3 个弹性列被撑到 400px+ 显得空。仅覆盖 min-width；
   列宽/冻结/分隔竖线一律沿用上面的规则(前两列仍是冻结列、基金简称右侧仍画竖线)。 */
#tbl-funds.data-table.is-compact {
  min-width: 680px;
}

/* 产品列表横向滚动容器：原生滚动条全部隐藏(横纵)，
   横向滚动由自绘 .funds-xbar 唯一接管，避免出现两条横杠 */
.panel-body.funds-scroll {
  scrollbar-width: none;              /* Firefox */
}
.panel-body.funds-scroll::-webkit-scrollbar {
  display: none;                      /* WebKit：横纵全部隐藏 */
}

/* 公司排名/FOF 持仓/基金清盘自绘表格容器：内容超宽时横向滚动（走全站统一滚动条样式；
   2026-09-01 修复：此前未定义 overflow-x，右侧列被截断且无法滚动查看）
   ⚠ 2026-09-28 用户指定：**列表页表格外侧统一浅灰描边 + 白底**，与 `.panel-body`
   （分页表那 4 个页面用的容器，见上文）保持一致。
   原状：只有 `.panel-body` 有边框，`.table-scroll` 只有 `overflow-x`
   ⇒ 基金清盘 / FOF 持仓 / 公司排名三页表格**没有外框**（红利ETF 是靠自己那条专属规则补的），
   全站样式不统一。现统一在此声明，各页不要再单独写 border/background。 */
.table-scroll,
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* 自绘横向滚动条(产品列表)：常驻可见，拖 thumb / 点轨道均可横向滚动 */
.funds-xbar {
  position: relative;
  height: 12px;
  background: #F1F3F7;     /* 轨道色：与全站统一滚动条一致 */
  border-top: 1px solid #E7EDF5;
  cursor: pointer;
  touch-action: none;  /* pointer 拖拽不被触摸滚动干扰 */
}
.funds-xbar-thumb {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  min-width: 40px;
  background: #C3CBD9;     /* 滑块色：与全站统一滚动条一致 */
  border-radius: 0;        /* 直角 */
  cursor: grab;
  transition: background .15s;
}
.funds-xbar-thumb:hover {
  background: #A7B1C4;
}

/* 吸顶表头(产品列表)：页面滚动时整行表头(含冻结列)固定在顶栏下方 */
.thead-stuck {
  position: fixed;
  top: var(--header-h);    /* 顶栏高度：桌面 64 / 窄屏 56（勿写死数字——写死会在窄屏留出 7px 缝隙，2026-09-26 修） */
  left: 0;
  z-index: 60;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: none;
  scrollbar-width: none;   /* 隐藏克隆表头的原生滚动条 */
}
.thead-stuck::-webkit-scrollbar {
  display: none;
}
.thead-stuck table {
  border-collapse: collapse;
}
.thead-stuck th {
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.thead-stuck th.num {
  text-align: right;
}
/* 吸顶表头内的冻结列：sticky left 锚定 .thead-stuck 自身的横向滚动 */
.thead-stuck th.fix-col {
  position: sticky;
  background: var(--surface-2);
  z-index: 2;
}
/* 冻结列的横向偏移(left)与宽度在 JS 里按**主表对应 th 的实算值**复制——
   各页冻结列宽不同(产品列表 代码116/简称左116、公司排名 排名64/公司左64、窄屏另有一套)，
   写死任一套都会让其它页错位。分隔竖线同理：仅当主表该列真画了 ::after 才补(JS 加 .has-divider)。 */
.thead-stuck th.has-divider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--border-strong);
  z-index: 1;
}

/* 分页条：共 N 条 · 上一页/页码/下一页(整块右对齐) */
/* 搜索结果分页容器(行业动态页全局标题搜索，2026-08-26) */
.pagination-wrap {
  margin: -1px 0 12px;
  padding: 4px 16px 10px;
  border: 1px solid var(--border);
  border-top: none;
  background: var(--surface);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0 14px 18px;   /* 右侧不留空间，分页信息贴最右 */
}
.pg-info {
  font-size: 12px;
  color: var(--muted);
  margin-right: 10px;
  white-space: nowrap;
}
.pg-btn {
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pg-btn:hover:not(:disabled):not(.active) {
  border-color: var(--brand-500);
  color: var(--brand-500);
}
.pg-btn.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  font-weight: 600;
  cursor: default;
}
.pg-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.pg-dots {
  color: var(--muted);
  padding: 0 2px;
}

#tbl-funds .fix-col {
  position: sticky;
  background: var(--surface);
}

/* 表头层：纵向吸顶 z3，冻结表头 z4 盖住横向穿过的普通表头 */
#tbl-funds thead th {
  z-index: 3;
}
#tbl-funds thead th.fix-col {
  z-index: 4;
  background: var(--surface-2);
}

/* 冻结表体单元格：z2 盖住普通单元格，被表头 z3 盖住 */
#tbl-funds tbody td.fix-col {
  z-index: 2;
}

/* 基金代码列 */
#tbl-funds .fix-code {
  left: 0;
  width: 116px;
  min-width: 116px;
  max-width: 116px;
}

/* 基金简称列：固定宽度 + 超长省略，hover 显示全名(title) */
#tbl-funds .fix-name {
  left: 116px;
  width: 236px;
  min-width: 236px;
  max-width: 236px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 冻结区与滚动区之间的浅灰分隔竖线（全站统一，2026-09-27 用户指定）：
   用伪元素而非 border（Chrome 对 sticky 单元格 border 滚动时渲染丢失），
   竖线随冻结列固定，横向拖动时始终可见、后面的列"滑到冻结区下"看起来是被盖住的。
   ⚠ 凡做了列冻结的表格，**最后一个冻结列**都必须画这条线（现在是两页的第二列：
   产品列表 `#tbl-funds` 的基金简称、公司排名 `#tbl-company-ranking` 的基金公司）。
   一律写成**成组选择器**，勿逐页复制一份规则（§4.4，复制会在下次调样式时静默分叉）。
   吸顶克隆表头无需在此重复——JS 检测主表该列 ::after 的 content 后自动加 `.has-divider`。 */
#tbl-funds .fix-name::after,
#tbl-company-ranking .fix-name::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--border-strong);
  z-index: 1;
}

/* 行 hover 时冻结列背景同步(tr 的背景会被 td 不透明背景盖住)
   → 2026-09-28 起并入上方「所有白底表的 td hover 重置」组规则，本处不再单独定义 */

/* ---------- 8. 徽标 / 标签(直角) ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid transparent;
}

.badge-primary {
  background: var(--brand-100);
  border-color: var(--brand-100);
  color: var(--brand-500);
}

.badge-neutral {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-2);
}

.badge-warn {
  background: #FDF0E0;
  border-color: #FDF0E0;
  color: #B54708;
}

/* ---------- 9. 空态 / 加载态(虚线边框) ---------- */
/* 首页"本周观察"占位大白框：白底细边框、内容视觉居中 */
.home-wip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  background: #fff;
  border: 1px solid var(--border-strong, #DFE4EC);
  border-radius: 0;   /* 直角矩形(用户指定，不用圆角) */
}
.home-wip-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-2);
}
.empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted);
}

.empty-state .icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-state .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}

.empty-state .desc {
  font-size: 13px;
  max-width: 560px;
  margin: 0 auto 16px;
}

.empty-state .code-block {
  display: inline-block;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  padding: 10px 14px;
  color: var(--text-2);
  max-width: 100%;
  overflow-x: auto;
}

.loading-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted);
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin .8s linear infinite;
}

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

/* ---------- 10. KPI 卡片(左侧品牌蓝竖条) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px 14px 19px;
  transition: transform .18s;
}

.stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-500);
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card .label {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.stat-card .value {
  font-size: 25px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand-900);
  line-height: 1.3;
}

.stat-card .delta {
  font-size: 12px;
  margin-top: 4px;
  font-family: var(--font-mono);
}

.stat-card .hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* ---------- 11. 首页卡片(如未来复用导航卡) ---------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.home-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px;
  transition: transform .18s, border-color .18s;
  display: block;
  color: var(--text);
}

.home-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transition: height .18s;
}

.home-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  color: var(--text);
}

.home-card:hover::before {
  height: 3px;
}

.home-card .card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-card .card-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 10px;
}

.home-card .card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.home-card .card-links a {
  font-size: 13px;
  color: var(--brand-500);
}

.home-card .card-links a:hover {
  color: var(--brand-700);
}

.home-card .tag {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 8px;
  border: 1px solid var(--border);
}

/* ---------- 12. 页脚：网站地图(2026-09-27 用户指定，效仿 dividendstacker.com；同日改浅色 + 加很浅的蓝绿炫彩底纹) ----------
   浅色块（1px 上边框，与顶栏 border-bottom 对称）+ 极浅的线性渐变打底 + 两团径向光晕（参考 .page-head）
   + 多列网站地图；栏目由 js/main.js 的 renderFooter() 依 MENU 渲染（改菜单即改页脚），末尾一列「相关站点」。
   硬约束：浅色、无圆角、无阴影；链接 hover 一律「无下划线 + 变色」（§4.1 / §4.3）。
   ⚠ 若日后某区块改用深色底，必须单独覆写链接色——全局 a:hover 的 --brand-700 在深底几乎不可见。 */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  /* 极浅的蓝调线性渐变打底（白底为主，末端才透出一点天蓝）
     末端 stop 2026-10-01 由 #F5FCFA 改 #F3F9FF（用户指定）：原值 G(252) > B(250) 呈青绿倾向，
     在页脚右半侧（115deg 的 100% 端点）实测 G>B；新值 B(255) 明显大于 G(249) ⇒ 转为纯蓝调。
     中间 stop #FAFCFF 本就偏蓝（B=255）无需改。 */
  background: linear-gradient(115deg, #FFFFFF 0%, #FAFCFF 46%, #F3F9FF 100%);
  color: var(--text-3);
  font-size: 13px;
  overflow: hidden;   /* 裁掉溢出的装饰光晕，避免产生横向滚动 */
}

/* 两团很浅的径向光晕：左上品牌蓝、右下天蓝（参考 .page-head 的手法，用装饰性 token）
   ⚠ 2026-09-30 曾按用户要求改用 logo 的两个颜色（#e0c3fc / #8ec5fc），当日即被退回
     「page-head 和 footer 底色改的还不如刚才，这个部分恢复回去吧」⇒ 已恢复为品牌蓝 + 青绿。
     原因：logo 两色明度过高，同 alpha(.10) 下视觉强度仅剩 43% / 61%，光晕几乎看不见（§4.1）。
   ⚠ 2026-10-01 用户指定（二连改）：① 右下那团由「青绿 --glow-teal」改为「天蓝 --glow-sky」（Tailwind v4 sky-500）；
     ② 随后指出"现在更接近青色"，把**线性打底的末端**（原本仍偏青绿）也改成天蓝调 #F3F9FF。
     两处都只换色值，几何（right/bottom/width/height）与 alpha(.10) 一字未动。 */
.site-footer::before,
.site-footer::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.site-footer::before {
  top: -150px;
  left: -90px;
  width: 440px;
  height: 320px;
  background: radial-gradient(ellipse at center, var(--glow-blue) 0%, transparent 68%);
}
.site-footer::after {
  right: -70px;
  bottom: -170px;
  width: 480px;
  height: 340px;
  background: radial-gradient(ellipse at center, var(--glow-sky) 0%, transparent 68%);
}

.site-footer .footer-inner {
  position: relative;   /* 抬到装饰层之上 */
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 26px 24px 0;   /* 与 .site-main 的 24px 内缩对齐 */
}

/* 页脚网站地图＝**两级结构**（2026-09-27 用户指定）：
     ① `.footer-brand`（品牌信息）② `.footer-cols`（栏目信息，内含 N 个 `.footer-group`）。
   ⚠ 品牌与栏目**本质是两种信息** ⇒ 必须分容器：品牌永远独占自己的层级/行，
     链接列只在**列区内部**换行 —— 于是"窗口再窄、以后再加第 7/8 列"时，
     新列只会落到**现有列的下方**，绝不会跑到品牌信息下面。
   ⚠ 别把 brand 和 group 重新塞回同一个 grid（那样窄屏第 2 行第 1 格＝品牌正下方）。 */
.footer-map {
  display: grid;
  /* 品牌列刻意远宽于单列（用户指定：体现差异、右侧留白多）；右侧整体是"列区"。
     ⚠ 2.24fr 不是随手写的：旧实现是**一个** 6 列网格（`2.4fr repeat(5,1fr)`，5 个 14px 列间距），
        拆成"品牌 + 列区"两级后列间距只剩 1 个，等效换算 2.24fr : 5fr
        ⇒ 宽屏几何与拆分前**逐像素一致**（1440 实测：品牌列 377px、其余各 157px、间距 14px）。 */
  grid-template-columns: 2.24fr 5fr;
  gap: 20px 14px;
  align-items: start;
}
.footer-cols {
  display: grid;
  /* 现 5 列（4 个一级菜单组 + 末尾「相关站点」）；**多余项自动换行到下一行**，
     即"新增列落在现有列下面"，而不是撑宽/溢出 */
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 14px;
  align-items: start;
}

/* 品牌栏：✦ 标识 + 站名/英文副名两行，与顶栏 .brand 同款排版；整块即「首页」入口。
   2026-09-30 加入 logo 后由「纯文字竖排」改为「logo + 文字列」横排。
   ⚠ 用 inline-flex 让链接**收缩到内容宽度**（别拉满整列，否则右侧大片空白也成了可点区域） */
.site-footer a.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-900);
  text-decoration: none;
}
.site-footer a.footer-brand-link:hover {
  color: var(--brand-500);
}
/* 页脚标识尺寸：复用 .brand-logo 类名与同一份 SVG 图形。
   尺寸 = `--brand-text-h`（与页脚两行文字块等高 ⇒ 上/下沿对齐；2026-09-30 用户指定）；
   选择器为 (0,2,0)，特异性高于 mobile.css 里的 .brand-logo(0,1,0) ⇒ 窄屏也保持等高
   （页脚**不隐藏**副名，故不能用窄屏的 --brand-text-h-narrow）。 */
.site-footer .brand-logo {
  width: var(--brand-text-h);
  height: var(--brand-text-h);
}
.footer-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.footer-brand-name {
  font-size: 16.5px;   /* 与顶栏 .brand-name 逐项一致 */
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.15;
  white-space: nowrap;
}
.footer-brand-sub {
  font-size: 9.5px;    /* 与顶栏 .brand-sub 逐项一致 */
  font-weight: 400;
  letter-spacing: .6px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-3);   /* 副名固定灰，不随链接 hover 变蓝 */
}
.footer-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
}

/* 每个一级菜单组 / 相关站点各一列 */
.footer-group-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}

/* 页脚链接：基色弱化、hover 转品牌蓝（无下划线） */
.site-footer a {
  color: var(--text-3);
  text-decoration: none;
  transition: color .18s;
}
.site-footer a:hover {
  color: var(--brand-500);
  text-decoration: none;
}

/* 底栏（版权） */
.footer-bottom {
  margin-top: 22px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---------- 13. 文档页 ---------- */
.doc-page {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px 40px;
  line-height: 1.75;
  font-size: 14.5px;
}

.doc-page h2 {
  font-size: 20px;
  color: var(--brand-900);
  border-bottom: 2px solid var(--brand-500);
  padding-bottom: 8px;
  margin: 32px 0 16px;
}

.doc-page h2:first-child {
  margin-top: 0;
}

.doc-page h3 {
  font-size: 16px;
  color: var(--brand-700);
  margin: 24px 0 10px;
}

.doc-page h4 {
  font-size: 14.5px;
  color: var(--text);
  margin: 18px 0 8px;
}

.doc-page p {
  margin-bottom: 10px;
}

.doc-page ul,
.doc-page ol {
  margin: 0 0 12px 1.6em;
}

.doc-page li {
  margin-bottom: 4px;
}

.doc-page table {
  margin: 12px 0 20px;
  font-size: 13.5px;
}

.doc-page table th {
  background: var(--surface-2);
  font-weight: 700;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border);
}

.doc-page table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.doc-page code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--brand-50);
  border: 1px solid var(--border);
  padding: 1px 6px;
  color: #C2410C;
}

.doc-page pre {
  background: #0B1F3A;
  color: #D1E0F5;
  padding: 14px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 12px 0 20px;
  border-radius: 0;
}

.doc-page pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

.doc-page .note {
  background: var(--brand-50);
  border-left: 4px solid var(--brand-500);
  padding: 10px 14px;
  margin: 12px 0 20px;
  font-size: 13.5px;
}

.doc-page .warn {
  background: #FDF0E0;
  border-left: 4px solid #F79009;
  padding: 10px 14px;
  margin: 12px 0 20px;
  font-size: 13.5px;
}

.toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.toc-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}

.toc a {
  display: block;
  padding: 3px 0;
  font-size: 13.5px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-2);
}

.doc-meta .meta-item strong {
  color: var(--text);
  font-weight: 700;
}

/* ================= 市场规模页(Wind 一级/二级分类月度规模折线图) ================= */
.scale-controls {
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--surface);   /* 与"基金筛选"页筛选器一致：白底 + 浅灰边框 */
}
.scale-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;   /* 间距统一(2026-08-29)：横距 10px 与 tagbar-row 一致 */
  align-items: center;
}
.scale-cats .dd-wrap {
  padding-bottom: 0;   /* 规模页用 fixed 悬浮面板，不再需要内联菜单的 hover 桥 padding，避免"全部"按钮被拉伸得更高 */
}
.scale-range {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scale-view {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scale-chart-wrap {
  position: relative;
  height: 480px;
  padding: 12px 16px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: -1px;   /* 与上方 controls 边框重叠，保持连续 1px */
}
.scale-cats .tag {
  user-select: none;
}
/* AUM / 份额 切换键(panel 标题后) */
.scale-metric-switch {
  display: inline-flex;
  gap: 4px;
  margin-left: 16px;
  vertical-align: middle;
}
.scale-metric-switch .tag {
  padding: 3px 10px;
  font-size: 12px;
}
/* 二级分类悬浮面板(fixed 浮在最表面、不被图表/滚动条等任何元素遮挡；
   top/left 由 JS 按触发按钮位置动态设置，自动视口避让；
   宽度自适应内容：max-content = 按标签文字长度决定，放不下才换行) */
.scale-sub-flyout {
  position: fixed;
  z-index: 200;
  width: max-content;
  min-width: 0;
  max-width: min(880px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  /* 四周留白等距（2026-09-21 用户指定）：原「10px 12px 12px」是为已不存在的 .flyout-title
     预留的上方留白，而实际 4 个浮层(市场规模/清盘/FOF/红利ETF)均无标题行 → 上下不等 */
  padding: 12px;
}
.scale-sub-flyout .flyout-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.scale-sub-flyout .flyout-list {
  display: grid;
  grid-template-columns: repeat(4, max-content);   /* 每行最多 4 个，超过自动换行 */
  gap: 6px;
}
.scale-sub-flyout .dd-sub {
  cursor: pointer;
}

/* 表格原文链接(市场动态等栏目)
   全站 hover 链接统一规范（2026-09-27 用户指定）：**不出现下划线，只变色**（--brand-500 → --brand-700） */
.cell-link {
  color: var(--brand-500, #1D4ED8);
  text-decoration: none;
}
.cell-link:hover {
  color: var(--brand-700, #12345E);
}

/* ================= 市场动态页(周导航 + 块状条目，仿 dividend-guide weekly) ================= */
.weekly-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.weekly-nav-item {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.weekly-nav-item:hover {
  border-color: var(--brand-500, #1D4ED8);
  color: var(--brand-500, #1D4ED8);
}
.weekly-nav-item.active {
  background: var(--brand-500, #1D4ED8);
  border-color: var(--brand-500, #1D4ED8);
  color: #fff;
}
.weekly-block {
  background: var(--surface);
  margin: -1px 0 0;
  border: 1px solid var(--border);
  border-top: none;
}
.weekly-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 16px 16px 4px;
}
.weekly-list {
  padding: 4px 16px 16px;
}
.weekly-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.weekly-item:last-child {
  border-bottom: none;
}
.weekly-item-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
}
.weekly-link {
  color: var(--text);
  text-decoration: none;
}
.weekly-link:hover {
  color: var(--brand-500, #1D4ED8);
}
.weekly-item-sum {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 3px;
}
/* 海外资讯条目(2026-09-25 新增)：中文标题(.weekly-item-text) + 原文标题 + 摘要 + 日期·来源·语种
   视觉基调与国内资讯一致——直角、无阴影、仅用既有 CSS 变量，不另起字号体系
   色彩层级（2026-09-25 用户指定：摘要须与下方提示性文字可区分，且非纯黑）：
     中文标题 --text > 摘要 --text-3 > 原文标题 / meta --muted-2 */
.weekly-item-orig {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-2);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.weekly-item-summary {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-3);
  margin-top: 6px;
}
.weekly-item-meta {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 4px;
}

/* ================= 市场动态控制区(搜索 + 日期选择 + 标签筛选，仿 EverydayNews) ================= */
.news-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.news-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 220px;
}
.news-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.news-search input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.news-search input:focus {
  border-color: var(--brand-500, #1D4ED8);
}
.news-date {
  display: flex;
  align-items: center;
  gap: 4px;
}
.round-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
}
.round-button svg {
  width: 14px;
  height: 14px;
}
.round-button:hover {
  border-color: var(--brand-500, #1D4ED8);
  color: var(--brand-500, #1D4ED8);
}
.date-input {
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.date-input:focus {
  border-color: var(--brand-500, #1D4ED8);
}
.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -1px 0 0;
  padding: 8px 16px 10px;
  border: 1px solid var(--border);
  border-top: none;
  background: var(--surface);
}
.news-tags .tag {
  user-select: none;
}
/* "关键词"引导文字(非选项，2026-09-03 用户指定：筛选器引导，点击聚焦搜索框) */
.news-tags .tag-guide {
  align-self: center;
  padding: 3px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #9aa7bc;   /* 2026-09-03 用户指定 */
  cursor: pointer;
  background: transparent;
  border: none;
}
.news-tags .tag-guide:hover {
  color: #8a97ab;
}

/* 海外资讯的引导文字「资讯来源」是纯标注(不可点)，不出现手型与 hover 变色（2026-09-25） */
.news-tags .tag-guide-static,
.news-tags .tag-guide-static:hover {
  cursor: default;
  color: #9aa7bc;
}

/* ================= 公司排名表(dashboard-company-ranking，2026-08-27) ================= */
#tbl-company-ranking.data-table {
  min-width: 1520px;
  table-layout: fixed;   /* 数据列等宽（2026-09-01 用户指定：排名/基金公司外各列宽度一致） */
}
/* 前两列冻结(排名 / 基金公司) */
#tbl-company-ranking .fix-col {
  position: sticky;
  background: var(--surface);
}
#tbl-company-ranking thead th {
  z-index: 3;
}
#tbl-company-ranking thead th.fix-col {
  z-index: 4;
  background: var(--surface-2);
}
#tbl-company-ranking tbody td.fix-col {
  z-index: 2;
}
#tbl-company-ranking .fix-rank {
  left: 0;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}
#tbl-company-ranking .fix-name {
  left: 64px;
  width: 140px;          /* 短名后收窄（2026-09-01 用户指定，空出列宽给数据列） */
  min-width: 140px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 16 个数据列等宽（排名/基金公司列除外，用户指定 2026-09-01） */
#tbl-company-ranking th.num,
#tbl-company-ranking td.num {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  text-align: right;
}
/* 摩根基金行高亮：与全站表格行 hover **同一色**（--row-hover = Tailwind indigo-50；2026-09-28 首次指定同色，
   2026-10-01 随 --row-hover 换为 indigo-50）。
   ⚠ 因两者同色，需注意"悬停普通行时会看起来像摩根行" —— hover 态由下面的 --row-hover-strong 承担：
   普通行 hover = 淡紫(=摩根常态)，摩根行 hover = 同色系更深一档(indigo-100) ⇒ 语义仍是「越深越当前」。 */
#tbl-company-ranking tbody tr.row-morgan td {
  background: var(--row-hover);
}
#tbl-company-ranking tbody tr.row-morgan td.fix-col {
  background: var(--row-hover);
}
@media (hover: hover) {
  #tbl-company-ranking tbody tr.row-morgan:hover td {
    background: var(--row-hover-strong);
  }
  #tbl-company-ranking tbody tr.row-morgan:hover td.fix-col {
    background: var(--row-hover-strong);
  }
}
/* 注：原「底部数据来源」用 .cr-note（12px 灰字 + border-top，与表格连体）；
   2026-09-26 起全站统一为页面末尾独立的 .data-source 面板（见文件末尾该节），.cr-note 已无引用并删除。 */

/* 公司排名：普通列(第3列起)白底——避免透明透出页面浅灰背景(2026-08-27 用户指定) */
#tbl-company-ranking tbody td {
  background: var(--surface);
}

/* ⚠ 2026-10-01 删除两条**页面级表格边框**规则（原本各写 `border: 1px solid var(--border)`）：
     #tbl-company-ranking  ← 2026-08-27 加
     #tbl-fof-holdings     ← 2026-08-28 加（两个 FOF 页共用此 id）
   删因：`.table-scroll` 通用规则在 **2026-09-28** 已统一提供「白底 + 1px `--border`」外框
        （见上文 `.table-scroll` 段与 §4.19），这两条随之变成**冗余**，叠加后外框变 **2px 双层**
        —— 视觉上比其它页多一圈灰边（用户 2026-10-01 报「表格外部有阴影」，即此）。
        实测：删前 FOF 两页 + 公司排名页 = 2px；清盘页（无此冗余）= 1px。
    ⇒ **列表页表格外框一律只用 `.table-scroll` 那一条，各页勿再给 `<table>` 加 border**（§4.19）。 */

/* FOF持仓变动：表格白底(2026-08-28 用户指定；筛选器样式复用 .filter-bar.tagbar) */
#tbl-fof-holdings tbody td {
  background: var(--surface);
}

/* FOF持仓变动：筛选器留白继承 .tagbar 基类 16px（原 14px 18px 12px 覆盖已于 2026-09-21 删除，统一全站） */
#fof-filters.filter-bar.tagbar {
  margin-bottom: 18px;
}
#fof-filters .tagbar-row {
  margin-bottom: 12px;
}
#fof-filters .tagbar-row:last-child {
  margin-bottom: 0;
}

/* ⚠ 此处原有 `#tbl-fof-holdings { border: 1px solid var(--border); }`（2026-08-28 加：
   「结果表格加 hero 同款浅灰边框」）—— **2026-10-01 已删除**，原因见上方
   「删除两条页面级表格边框」注释：与 `.table-scroll` 的 1px 叠加成 2px 双层外框。 */

/* 市场规模页：筛选器区内统计口径按钮左对齐(原 margin-left:16px 为 panel-head 场景设计) */
.scale-controls .scale-metric-switch {
  margin-left: 0;
}

/* 公司排名页：统计口径筛选器留白继承 .tagbar 基类 16px（原 14px 18px 覆盖已于 2026-09-21 删除，统一全站） */
#cr-filters.filter-bar.tagbar {
  margin-bottom: 18px;
}



/* 首页今日摘要（2026-08-29 用户指定：白底浅灰框、标签深色加粗、三类缩进一致；wi- 前缀避免与市场动态 weekly-* 冲突） */
.wi-insight {
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.wi-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}
.wi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* 首页今日摘要（2026-08-29 重写：flex 精确对齐 + 真实方块元素） */
.wi-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.7;
  font-size: 13px;
  color: var(--text);
}
.wi-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.wi-head {
  display: flex;
  align-items: center;
  gap: 10.5px;
}
.wi-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--brand-500);
}
.wi-tag {
  color: #1a2b45;
  font-weight: 600;
  font-size: 14px;
}
.wi-text {
  margin: 6px 0 0 16.5px;   /* 小标题与正文行距 6px，与 .wi-sub 一致（2026-08-30 用户反馈统一） */
}
.wi-sub {
  list-style: none;
  margin: 6px 0 0 16.5px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wi-sub li {
  position: relative;
  padding-left: 14px;
}
.wi-sub li::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
  color: #1a2b45;
}


/* 今日摘要复制摘要按钮：与筛选页"下载到本地"同款（蓝字加粗、无边框无背景，button 重置） */
#wi-copy.note-download {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
}

/* 基金清盘页：筛选器留白继承 .tagbar 基类 16px（原 14px 18px 12px 覆盖已于 2026-09-21 删除，统一全站）+ 表格白底(用户指定 2026-08-29) */
#cf-filters.filter-bar.tagbar {
  margin-bottom: 18px;
}
#cf-filters .tagbar-row + .tagbar-row {
  margin-top: 12px;
}
#tbl-closed tbody td {
  background: var(--surface);
}
/* ---------- 概览统计卡(全站直角/无阴影)：红利页「净现金流概览」+ 公司排名页「摩根基金概览」共用 ----------
   2026-09-21 新增（红利页）；2026-09-25 公司排名页复用，选择器合并成组，避免两份规则各自漂移。
   命名：df-* = 红利页，cr-* = 公司排名页(company ranking)。 */
.df-stats {
  margin-bottom: 16px;
}
.cr-stats {
  margin-bottom: 0;   /* 公司排名页：卡片是该面板最后一项，底部不留尾距（面板自身 margin-bottom 20px 已足够） */
}
.df-stat, .cr-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
}
.df-stat-label, .cr-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.df-stat-value, .cr-stat-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.df-stat-value.up, .cr-stat-value.up { color: var(--pos); }
.df-stat-value.down, .cr-stat-value.down { color: var(--neg); }
.df-stat-sub, .cr-stat-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
/* 基金产品页统计卡（2026-09-27 用户指定）：复用 .cr-stat 卡片，置于「产品列表」筛选器之前。
   ⚠ 卡片值是**基金名称**（长文本）⇒ 值字号由 24px/800 降到 16px/700
     （站内硬规则：800 字重只给统计卡的大数字，见 §4.1）。 */
.prod-stats {
  margin: 0 0 16px;   /* 面板内：与下方筛选器留 16px（.cr-stats 默认 margin-bottom:0 是给"面板末位"用的） */
}
.prod-stats .cr-stat-value.name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* ---------- 核心品类(红利)：明细表区域白底（2026-09-21 用户指定） ---------- */
/* ⚠ 2026-09-28：本页 .table-scroll 的「白底 + 边框」已由通用规则提供（见上文 `.table-scroll` 段），
   不再逐页重复。原注释写的「沿用 #tbl-closed / #tbl-fof-holdings 同款处理」**当时并未真正落地** ——
   那两页一直没有边框，属本轮修掉的不一致（用户 2026-09-28 指出）。 */
#tbl-df tbody td {
  background: var(--surface);
}
/* 分页条紧贴白底表格下方，不再额外留空隙 */
#df-table #df-pager {
  margin-top: 12px;
}
/* ---------- 通用：图表卡片（标题 + 描述置于图表【上方】、左对齐；三者同属一个外框且中间不加分隔线）----------
   2026-09-21 用户指定，首例红利ETF页「分组累计净现金流」，后按同一逻辑推广至市场规模页。
   整块观感像一张完整的财经图表（便于截图）。图表高度仍由 .scale-chart-wrap 的 480px 决定。 */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
}
.chart-card--attached { margin-top: -1px; }   /* 与上方筛选器连框：红利ETF页 */
.chart-card--detached { margin-top: 16px; }   /* 与上方筛选器之间留出一段页面底色(灰)的空白：市场规模页 */
/* ⚠ 2026-09-30 用户指定「图例与说明文字左对齐、与说明/图表内容上下等距」：
   图例是画在 canvas 里的，它的上方间距 = 本块的下内边距 + 图表容器上内边距 + canvas 的 layout.padding.top
   + labels.padding；下方间距由 JS 插件 CHART_LEGEND_GEOM 补足到同一数值。
   为了不让上方留出无谓的空白，本块**下内边距归 0**（上内边距仍是标题区需要的 16px）。 */
.chart-card-head {
  padding: 16px 16px 0;
}
.chart-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0B1F3A;
  line-height: 1.4;
}
.chart-card-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.chart-card-desc b {
  color: var(--text-2);
  font-weight: 600;
}
/* 内层图表容器去掉自带边框与负外边距，否则标题区与图表之间会出现一条分隔线。
   ⚠ 2026-09-30：上内边距归 0 —— 图例在 canvas 内、其上方间距由 JS 统一算（见 .chart-card-head 注释），
   这里再留 12px 会让"图例上方"比"图例下方"多出一截。左右 16px 保留（画布左缘 = 说明文字左缘 = 卡片内容左缘）。 */
.chart-card .scale-chart-wrap {
  border: none;
  margin-top: 0;
  padding-top: 0;
}
/* 概览面板「分组累计净现金流」汇总表同步白底，与面板内其他白块(统计卡/控制条/图表/说明)连成一体的连续 1px 边框 */
/* 概览面板「分组累计净现金流」汇总表：与上方白块**连框**（-1px 合并相邻边框）；
   白底与边框由通用 .table-scroll 规则提供，此处只负责"连框"这一条 */
#df-overview .table-scroll {
  margin-top: -1px;
}
#tbl-df-groups tbody td {
  background: var(--surface);
}
/* 行 hover：td 的白底会盖住 .data-table tbody tr:hover 的底色
   → 2026-09-28 起并入上方「所有白底表的 td hover 重置」组规则（原两条独立规则已删） */

/* ============================================================
   公司看板 · 基金经理（2026-09-26 上线；同日改版：列表 5 列 + 模板详情页）
   列表复用 .data-table（姓名列是进详情页的链接）；详情页 #/fund-managers/detail?id=<东财经理ID>；
   统计卡复用 .cr-stat（与公司排名页同源）。全站硬约束：无圆角、无阴影；头像方角 + 1px 边框。
   ============================================================ */

/* ---------- 列表页：姓名 = 详情页链接 ---------- */
.mgr-link {
  color: var(--brand-500);
  font-weight: 600;
}
.mgr-link:hover { color: var(--brand-700); }

/* ---------- 详情页：面板内的白色卡片体（与 .wi-insight 同款观感） ---------- */
.mgr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 20px;
}

/* ---------- 详情页：档案块（左头像 + 右姓名与键值） ---------- */
.mgr-profile {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.mgr-profile-photo { flex: 0 0 160px; }
.mgr-photo-lg {
  display: block;
  width: 160px;
  height: 205px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border-strong);
  background: var(--brand-50);
}
.mgr-photo-lg-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 700;
  color: var(--muted);
}
.mgr-profile-main { flex: 1 1 auto; min-width: 0; }
.mgr-profile-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.mgr-profile-pos {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-2);
}

/* 键值：按维度分组，每组占一行（2026-09-26 用户指定——时间维度一行、产品维度一行）；
   组内**等宽三列**，且每列「指标名在上、指标值在下」上下对齐（同日用户指定，web 端） */
.mgr-meta-rows {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.mgr-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 两组都是 3 个指标 → 上下两行的列也对齐 */
  gap: 8px 24px;
}
.mgr-meta-item {
  display: flex;
  flex-direction: column;   /* 名称在上、值在下 */
  gap: 3px;
  min-width: 0;
}
.mgr-meta-item i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.mgr-meta-item b {
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- 详情页：简介（跟随卡片宽度正常换行；white-space 显式 normal 防被表格的 nowrap 影响） ----------
   ⚠ 2026-09-26 用户反馈「文字换行有问题，每行达到一定字数后强行换行」：原写死 `max-width: 880px`，
   而卡片内容宽 1232px ⇒ 每行到 ~74 字就断、右侧空出 ~350px，看着像「按固定字数硬换行」。
   现取消限宽、**跟随容器宽度**换行（窄屏同此逻辑，故 mobile.css 里那条同款覆盖已删）。
   若日后确需控制每行字数，改这里的 max-width 像素值即可（别再引入"固定字数"式写法）。 */
.mgr-intro {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text);
  white-space: normal;
}

/* ---------- 在管基金标签（2026-09-27 用户指定：点击复制基金代码） ---------- */
.mgr-funds { display: flex; flex-wrap: wrap; gap: 8px; }
.mgr-fund-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: default;
}
/* 可复制的标签：cursor 指针 + 「底色/边框」型 hover 反馈
   （⚠ 标签不是链接，不出下划线，见 §4.3；无圆角无阴影，§4.1） */
.mgr-fund-tag[data-fund-code] { cursor: pointer; }
.mgr-fund-tag[data-fund-code]:hover { background: var(--brand-50); border-color: var(--brand-100); }
.mgr-fund-tag[data-fund-code]:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.mgr-fund-tag[data-fund-code]:active { background: var(--brand-100); border-color: var(--brand-400); }
.mgr-fund-tag em { font-style: normal; font-size: 11px; color: var(--muted); }
.mgr-fund-tag[data-fund-code]:hover em { color: var(--brand-500); }

/* ---------- 通用：轻提示条 toast（复制成功等一次性反馈，2026-09-27 新增） ----------
   单一实例，建在 document.body 上（路由重渲染 #app 不打断它），1.6s 自动淡出。
   ⚠ 位置＝**屏幕正中间**（2026-09-27 用户指定："在屏幕最中间弹出显示"），
     水平/垂直都居中；进出场靠位移 + 透明度，不用缩放（避免文字模糊）。
   硬约束：无圆角、无阴影（§4.1）；用品牌深色底 + 白字。 */
.app-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 300;
  padding: 9px 16px;
  background: var(--brand-900);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .2px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.app-toast.is-on { opacity: 1; transform: translate(-50%, -50%); }

/* ============================================================
   数据来源面板（全站统一，2026-09-26 用户指定）
   每页末尾单独一块，与上方内容块区分开：白底 + 1px 边框 + 12px 灰字。
   .data-panel 自带 margin-bottom:20px，故与上方面板自然分开；勿再包第二层卡片。
   组件来源 = js/app.js 的 appendDataSourcePanel()（默认文案「数据来源：Wind。」；专属文案登记在 DATA_SOURCE_TEXT）。
   ============================================================ */
/* 数据来源面板（页面末尾统一追加，见 appendDataSourcePanel）。2026-09-28 用户指定「改法 C」：
   ① 去掉白底与**四边外框**；② 线色用 --border-strong（比表格分隔线 --border 略深一档）；
   ③ **左右 padding 归零** ⇒ 说明文字与上方表格左对齐。
      依据：.data-panel 无 padding，表格容器（.panel-body / .table-scroll）也是 padding:0，
      故「表格框左缘 == .data-panel 左缘 == 本面板文字左缘」——归零后才真正对齐。
   ⚠ 2026-10-01 用户指定：**把上方那条横线也去掉**，并让**字符上侧顶到原来横线的位置**。
      ① `border: none`（去线）+ `padding: 0`（原 12px）——两者合计把文字块上移 13px，落到原横线上沿（= 盒子顶）；
      ② ⚠ 行盒自带半行距（12px × line-height 1.8 ⇒ 上下各 ≈4.8px），只归零 padding **不足以**让字形墨迹顶
         贴到盒子顶 ⇒ 由下面 `.data-panel:has(> .data-source)` 的负 `margin-top` 精确补偿 **4px**。
         **该值经像素实测校准**（标定页 `scripts/_verify/measure_data_source_top.html` + 判读
         `scripts/_verify/measure_data_source_top.py` → Chrome headless 截图扫行：
         参考线 y=40、未补偿时墨迹顶 y=44 ⇒ 差 4px；补偿后二者同为 y=40、**偏差 0px**），
         **勿凭直觉改**；改字号或 line-height 都要重跑该脚本复核。
         ⚠ 补偿必须加在 **`.data-panel` 上**、不能加在 `.data-source` 上：`.data-panel` 有 `overflow:hidden`，
         子元素的负 margin 会把文字上半**裁掉**；而 panel 自身的负 margin 是布局位移、不受自身 overflow 影响。 */
.data-source {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
/* 只命中 appendDataSourcePanel() 产出的「纯来源面板」（页面上其它 .data-panel 不含直接子级 .data-source）。
   负 margin 的净效果 = 本面板相对原位置整体上移 4px ⇒ 字形墨迹顶正落在原横线所在的那 1px 上。
   与上方兄弟的 margin 折叠与否结果相同（20→16 或直接相加），两种情形面板 top 都 = 原值 − 4px。 */
.data-panel:has(> .data-source) {
  margin-top: -4px;
}

/* ---------- 返回链接（来源说明已迁至页面末尾的 .data-source 面板） ---------- */
.mgr-back {
  display: inline-flex;   /* svg 箭头与文字同基线（替代 ← 字符） */
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;       /* 2026-09-27 用户指定：返回链接加粗，与右侧灰字（数据更新至…）拉开层级 */
  color: var(--brand-500);
  /* 右侧间距一律由 .panel-tools 的 gap 给（2026-09-26 已删掉原 margin-right:16px —— 它叠在 gap 上
     会让分隔符「|」左 24px / 右 8px 左右不对称）。 */
}
/* ⚠ 2026-09-27 用户指定：本工具条的分隔符「|」**前后各两个空格**，与基金产品页
   「数据更新至 …  |  下载到本地」逐像素一致 ⇒ 目标就是全站默认值，故
   **原来那条 `.panel-tools.mgr-tools { gap: 4px }`（各一个空格）已删除**，
   现在本工具条直接吃 .panel-tools 的 `gap: 8px` —— 与产品页 `#panel-note` 同款、无需任何覆盖。
   千万不要再为本页加 gap 覆盖：两页的间距规则必须同源，否则下次调一处必分叉（§4.4）。 */

/* 箭头 = 一级菜单下拉箭头同款 chevron（同 viewBox / 线宽 / 圆头），此处指向左；
   用 currentColor 着色以跟随链接色（导航里那枚是 var(--muted)） */
.mgr-back-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.mgr-back:hover { color: var(--brand-700); }
/* 注：原 .mgr-src（详情页脚注式来源说明）已在 2026-09-26 并入页面末尾的 .data-source 面板 */

/* ---------- 通用：分页表「行内展开」钩子（renderPagedTable 的 expandable / rowDetail） ----------
   2026-09-26 起无页面使用（基金经理页的折叠区已改为详情页），钩子保留备用；
   下列规则仅在传了 expandable 时才会命中，不影响其它页面。 */
tbody tr.row-toggle { cursor: pointer; }
tbody tr.detail-row > td {
  background: var(--surface-2);
  padding: 0;
  white-space: normal;
}
/* td 有不透明底色时须显式重置行 hover（否则 hover 静默失效，见 page-authoring-rules §4.3） */
tbody tr.detail-row:hover > td { background: var(--surface-2); }