/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 拍策 design tokens v5 — 2026-08-18「彻底 Arco 化」
 *
 * 单一来源；所有页面通过 <link rel="stylesheet" href="/static/css/design-tokens.css?v=..."> 引用。
 *
 * v5 由来（鹏哥拍板）：v1-v4 在 Apple HIG / Stripe / Arco / 自创「纸感墨蓝金」之间来回摇摆，
 *   同一个站里并存四套设计语言。鹏哥原话：「仿的不够彻底，有些摇摆」「我承认我终究还是要随大流了」。
 *   v5 起**全站只认一套：Arco Design**（字节跳动设计系统，火山引擎控制台同源）。
 *
 * 实测依据（2026-08-18 抓的真实页面）：
 *   火山引擎 volcengine.com  主色 #1664FF / 正文 #0C0D0E / 圆角 0-4px / 字号 14px 主导
 *   Arco arco.design         主色 #165DFF / 正文 #1D2129 / 圆角 0-2px / 字号 14px 主导
 *   微盟 weimob.com          主色 #0071EF / 正文 #17181B / 圆角 0-4px
 *
 * 纪律：**下面每一个色值都必须是 Arco 官方色板里的某一阶，不许自创。**
 *   唯一的自由度是「选哪一阶」—— 文字类一律选到对比度达标的阶（-7/-8），
 *   因为 Arco 默认阶（-6）对比度只有 2.4-3.3，不达标。底色用 -1 阶。
 *   这样既是 Arco 原色，又不牺牲可读性。
 *
 * 已放弃（v5 起界面不再出现）：金色点缀 / 衬线标题 / 卡片投影 / 6px 圆角 / 13.5px 字号
 *   —— 三家大厂都没有，保留即是摇摆。金仅存于 logo.py / favicon.svg / 两个 PDF renderer。
 *
 * PDF 输出物不受影响：dd_report_renderer.py / monthly_report_renderer.py 自带独立色常量，
 *   维持暖纸感「Claude 风」，鹏哥明确要求保留。
 *
 * ⚠ 改字体 / token 后必须撞所有引用的 ?v= 版本号(Fastly 30 天 + 浏览器 1 天双层 cache)
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 数字字符走 Arial(macOS/Windows/Linux 都自带或 metric-compatible)
   unicode-range 把 0-9 + 常用标点单独拎出来,无需 web font 下载 */
@font-face {
  font-family: 'BodyNum';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+002F, U+0025, U+00A5, U+0024;
  font-display: swap;
}

:root {
  /* ─────────── Color · 文字（Arco Gray，选到对比度达标的阶）─────────── */
  --color-fg:        #1D2129;   /* gray-10 · 正文/标题   对白 16.13 */
  --color-fg-2:      #4E5969;   /* gray-8  · 次级        对白 7.10  */
  --color-fg-3:      #6B7785;   /* gray-7 · 弱化/副标   对白 4.56；浅灰底 #F2F3F5 上 4.11、画布上 4.29 未达 4.5 —— 2026-08-19 鹏哥拍板：Arco 官方色板优先，不为达标自造色值 */
  --color-fg-4:      #C9CDD4;   /* gray-4  · 占位/禁用   仅 placeholder / disabled，不承载正文 */

  /* ─────────── Color · 背景（Arco Gray 浅阶）─────────── */
  --color-bg:         #FFFFFF;   /* 卡片 / 表格 */
  --color-bg-canvas:  #F7F8FA;   /* gray-1 · 页面画布 */
  --color-bg-panel:   #F2F3F5;   /* gray-2 · 面板 / 表头 */
  --color-bg-panel-2: #E5E6EB;   /* gray-3 · 更深一档 */

  /* ─────────── Color · 边线（Arco）─────────── */
  --color-border:        #E5E6EB;  /* gray-3 */
  --color-border-strong: #C9CDD4;  /* gray-4 */
  --color-border-hover:  #A9AEB8;  /* gray-5 */

  /* ─────────── Color · 主色（Arco Blue）─────────── */
  --color-accent:       #165DFF;             /* blue-6 · 白字压它 5.19 ✓ */
  --color-accent-hover: #4080FF;             /* blue-5 */
  --color-accent-press: #0E42D2;             /* blue-7 */
  --color-accent-soft:  rgba(22,93,255,0.10);
  --color-accent-weak:  rgba(22,93,255,0.05);
  --color-accent-ring:  rgba(22,93,255,0.20);
  --color-accent-bg:    #E8F3FF;             /* blue-1 · 蓝字压它 4.62 ✓ */

  /* ─────────── Color · 金（v5 起仅 logo.py / favicon.svg / 两个 PDF renderer 使用。
     界面 CSS 一处不许出现 —— 三家大厂都没有金，保留即是摇摆 ─────────── */
  --color-gold:      #B8894A;
  --color-gold-deep: #8A6534;

  /* ─────────── Color · 品牌 ─────────── */
  --color-brand:   #165DFF;  /* 界面主色 */
  --color-brand-2: #B8894A;  /* 古铜金（仅 logo） */

  /* ─────────── Color · 状态（Arco 语义色。文字取 -7/-8 阶保对比度，底取 -1 阶。
     Arco 默认的 -6 阶压 -1 阶只有 2.4-3.3，不达标，故不用 ─────────── */
  --color-err:    #CB272D;   /* red-7    压 red-1    4.76 ✓ */
  --color-err-bg: #FFECE8;   /* red-1 */
  --color-err-bd: rgba(203,39,45,0.24);
  --color-warn:   #A64500;   /* orange-8 压 orange-1 5.68 ✓ */
  --color-warn-bg:#FFF7E8;   /* orange-1 */
  --color-warn-bd:rgba(166,69,0,0.24);
  --color-ok:     #008026;   /* green-8  压 green-1  4.84 ✓ */
  --color-ok-bg:  #E8FFEA;   /* green-1 */
  --color-ok-bd:  rgba(0,128,38,0.24);

  /* ─────────── Spacing（4-base 网格） ─────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ─────────── Typography（Apple HIG body 体系） ─────────── */
  --text-xs:    12px;    /* Arco body-1 · 角标 / 辅助 */
  --text-sm:    13px;    /* Arco body-2 · 次级 */
  --text-base:  14px;    /* Arco body-3 · 主体（大厂通用基准） */
  --text-md:    16px;    /* Arco title-1 · 小标题 */
  --text-lg:    20px;    /* Arco title-2 · 区块标题 */
  --text-xl:    24px;    /* Arco title-3 · 页面标题 */
  --text-2xl:   28px;    /* Arco title-4 · 大标题 */

  --lh-tight: 1.4;   /* 紧凑：大数字 / 单行标题 */
  --lh-base:  1.5;   /* Arco 基准 */
  --lh-loose: 1.6;   /* 长段落 */

  /* Arco 只用两档字重：400 正文 / 500 标题与强调。
     v4 之前用的 590(Apple semibold) / 600 / 700 全部收敛到 500 —— 大厂后台不用粗体撑层级，
     层级靠字号和颜色。 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   500;
  --fw-bold:   500;

  --ls-tight: -0.6px;
  --ls-snug:  -0.3px;
  --ls-base:  0;
  --ls-wide:  0.04em;

  /* ─────────── Radius（Arco：小 2px / 中 4px / 大 8px。
     后台与数据界面一律 2px —— 圆角越小越「工具感」，这是大厂后台的通行做法 ─────────── */
  --radius-xs:   2px;
  --radius-sm:   2px;
  --radius-md:   0;      /* 卡片/面板 — Arco Card 是直角 border-radius-none */
  --radius-lg:   4px;    /* 弹层 / 抽屉 */
  --radius-xl:   4px;
  --radius-full: 999px;  /* 仅胶囊标签 */

  /* ─────────── Shadow（Arco：**卡片不用投影**，靠 1px 边线分层。
     投影只留给浮层：dropdown / tooltip / modal ─────────── */
  --shadow-xs:    none;
  --shadow-sm:    none;
  --shadow-md:    none;
  --shadow-lg:    0 4px 10px rgba(0,0,0,.10);
  --shadow-lift:  none;
  --shadow-glass: 0 4px 10px rgba(0,0,0,.10);

  /* ─────────── Motion（v5：取自 arco.css 源码实测）
     Arco 的过渡是**极快 + 线性**：`all 0.1s cubic-bezier(0,0,1,1)`（29 次，最高频）
     位移类才用缓动：`transform 0.3s cubic-bezier(0.34,0.69,0.1,1)`
     v4 之前用 0.15-0.35s 的 ease 曲线，手感明显比 Arco「黏」 ─────────── */
  --ease:        cubic-bezier(0, 0, 1, 1);              /* Arco 默认=线性 */
  --ease-out:    cubic-bezier(0.34, 0.69, 0.1, 1);      /* 位移/展开 */
  --ease-back:   cubic-bezier(0.34, 0.69, 0.1, 1);
  --motion-fast: .1s var(--ease);
  --motion-base: .1s var(--ease);
  --motion-med:  .2s var(--ease);
  --motion-slow: .3s var(--ease-out);

  /* ─────────── Font fallback chain ───────────
     2026-05-16: 曾统一 Stripe 工程风(字母走 SF Mono 等宽)
     2026-08-18 v2 修订 — 「数字等宽 + 字母中文比例」:
       数理美感真正依赖的是**数字对齐**(BodyNum→Arial + font-variant-numeric:tabular-nums),
       跟字母等不等宽无关;而等宽字母是终端/工程气质,与本站要的人文纸感相反
       (中文业务界面里等宽字母也读着生硬)。故字母改走系统比例字体。
       此举同时把 2026-08-17 后台 v3 的做法扶正为全站标准,消除前后台两套字体栈。
       等宽只保留给**真代码区**(日志 / prompt / SQL),走 --font-mono 显式声明。
     · 数字 (0-9, 标点) → BodyNum @font-face → Arial / Helvetica Neue / Liberation Sans
     · 字母 (A-Z, a-z) → -apple-system / SF Pro Text (Mac) → Segoe UI (Win)
     · 中文            → PingFang SC (Mac) → Microsoft YaHei (Win) → Noto Sans CJK SC (Linux)
     0 网络依赖,全部 local 字体,各平台用各自 local 等价 */
  --font-sans:  BodyNum,
                -apple-system, BlinkMacSystemFont, "SF Pro Text",
                "Segoe UI", "Segoe UI Variable Text",
                "PingFang SC", "PingFang TC",
                "Microsoft YaHei UI", "Microsoft YaHei",
                "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
                system-ui, sans-serif;
  /* ─────────── Windows 字体微调 token(2026-08-20)───────────
     鹏哥报:Win 下比 Mac 丑。查下来两条客观原因,都不是"漏配 Windows 字体"
     (Segoe UI + 微软雅黑本来就在栈里):
       ① 字重层次塌了 —— 全站主力字重是 500。Mac 苹方有真 Medium;
          微软雅黑只有 Regular(400)/Bold(700),按 CSS 字重匹配规则 500 会落回 400,
          于是"强调"和"正文"在 Win 上一样粗,层次消失,看着发平
       ② 字号踩痛点 —— 报告页 12px 以下有 141 处(9px×29 / 10px×51 / 11px×36)。
          苹方为小字优化过 + Mac 灰度抗锯齿,10-11px 仍清秀;
          雅黑在 12px 以下强 hinting 把笔画怼到像素网格,粗细不匀
     做法:token 层给 Win 单独一套值,Mac 走默认值一个像素都不动。
     **想回退只改这里的数字,不用碰任何页面**。
     海报 .poster-canvas 单独重置回默认值 —— 海报是要生成图片分享的,
     两个平台必须版式一致(577px 固定宽,字号一变就换行撑破) */
  --fw-med: 500;      /* 强调字重 */
  --fs-8:   8px;      /* 极小:角标 / 箭头 */
  --fs-8h:  8.5px;    /* 极小:chip */
  --fs-9:   9px;      /* 小:徽章 / 副标 / 分位标签 */

  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                "STSong", serif;
  --font-mono:  'SF Mono', ui-monospace, Menlo, Monaco, Consolas,
                "Liberation Mono", monospace;
}

/* Windows:雅黑无 Medium → 500 落回 400 层次消失,提到 600 走 Bold 找回;
   极小字号各 +1px 让笔画脱离 hinting 痛点区。由 <head> 内联脚本打 is-win 标记 */
html.is-win {
  --fw-med: 600;
  --fs-8:   9px;
  --fs-8h:  9.5px;
  --fs-9:   10px;
}

/* 海报画布不跟随平台微调 —— 生成的图片要跨平台版式一致 */
.poster-canvas {
  --fw-med: 500;
  --fs-8:   8px;
  --fs-8h:  8.5px;
  --fs-9:   9px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 全局 Reset + 普适性补丁
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* v5 已移除氛围层（v2 的纸张纹理 / v3-v4 的网格）——
   Arco 页面是纯色背景,任何纹理都是自创元素。body::before 与 --grid-* 一并删除。 */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-fg);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * Arco 组件基线（v5）—— 实测自 arco.design 组件页，像素级对齐
 *
 * 输入框是 Arco 最好认的特征:**灰底 + 无边框**(不是白底带框)。
 *   常态 background:#F2F3F5 / border:1px transparent
 *   hover 底色加深一档 / focus 才出蓝边 + 白底
 * 尺寸:高 32px / 内边距 0 12px / 圆角 2px / 字号 14px
 * 按钮:高 32px / 内边距 0 15px / 圆角 2px / **字重 400**(不是 500,更不是 600)
 *
 * 只设「元素选择器」基线,页面里已有的 class 规则照旧覆盖,不会打架。
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* :where() 把特异性压到 (0,0,1) — 全局只当兜底,页面任何带 class 的规则都能赢 */
input:where(:not([type="range"]):not([type="checkbox"]):not([type="radio"])),
select,
textarea {
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-bg-panel);
  color: var(--color-fg);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  line-height: var(--lh-base);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
textarea { height: auto; padding: 6px 12px; }
input:where(:not([type="range"]):not([type="checkbox"]):not([type="radio"])):hover,
select:hover,
textarea:hover { background: var(--color-bg-panel-2); }
input:where(:not([type="range"]):not([type="checkbox"]):not([type="radio"])):focus,
select:focus,
textarea:focus {
  background: var(--color-bg);
  border-color: var(--color-accent);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--color-fg-4); }

/* ─── Arco 标签 / 空状态 / 分页（规则直接取自 arco.css 源码）───
   .arco-tag   height:24px; padding:0 8px; border-radius:2px; font-size:12px; line-height:22px
   .arco-card  border-radius: none(0)  ← Arco 卡片是直角
   .arco-empty padding:10px 0
   .arco-pagination-item height:32px; min-width:32px; border-radius:2px  */
.tag, .chip, .badge, [class*="-tag"], [class*="-chip"] {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); line-height: 22px;
  font-weight: var(--fw-normal);
}
.empty, .empty-state, [class*="-empty"] {
  padding: 10px 0; color: var(--color-fg-3); font-size: var(--text-base); text-align: center;
}
.page-btn, .pagination a, .pagination button, [class*="pagination"] a {
  height: 32px; min-width: 32px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); display: inline-flex; align-items: center; justify-content: center;
}

/* ─── Arco L2 组件基线：表格 / 标签 / 卡片 / 分页 ───
   实测自 arco.design 组件页：
     表头 高 41px · 底 #F2F3F5 · 字重 500 · 字号 14px · 下边线 1px #E5E6EB
     单元格 padding 9px 16px · 字重 400 · 下边线 1px #E5E6EB
     表格容器**无边框无圆角**（Arco 靠表头底色 + 行边线构成，不用卡片包）
     标签 高 24px · padding 0 8px · 圆角 2px · 字号 12px
     卡片 1px 边线 + 圆角 2px + **无投影**
     分页 按钮 32×32 · 圆角 2px · 间距 8px · 距表格 12px
   密集表（20+ 列）走 Arco 紧凑规格 .t-compact：padding 2px 8px —— 官方 size 变体，非自创。 */
/* 表格基线只管「视觉」，**不管尺寸** ——
   尺寸(padding/font-size)交给各页面自己定:报告页是 20+ 列宽表,靠 9-10px 小字才塞得下,
   全局强推 14px/9px 16px 会把它挤爆(2026-08-18 已踩)。
   Arco 的 14px 体系是给正常列数的表设计的,**它本身没有 20+ 列宽表的方案**,
   这种表属于必要妥协,不是不规范。 */
table { border-collapse: collapse; }
thead th {
  background: var(--color-bg-panel);
  color: var(--color-fg);
  font-weight: var(--fw-medium);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
tbody td { border-bottom: 1px solid var(--color-border); }
tbody tr:hover { background: var(--color-bg-canvas); }

/* 按钮基线 — Arco:字重 400,圆角 2px,高 32px */
button {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  border-radius: var(--radius-sm);
  line-height: var(--lh-base);
}

/* 等宽数字 — 仅在 .num / .tabular-nums / input[type=number] 启用，
 * 不全局污染中文字体（旧版本错误：tax-meta 用 mono 覆盖中文显示丑） */
.num,
.tabular-nums,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* 选中文本 — 墨蓝 soft */
::selection {
  background: var(--color-accent-soft);
  color: var(--color-fg);
}

/* focus ring — 仅键盘 Tab 显示（mac/Windows 都自然） */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-accent-soft);
  outline-offset: 1px;
  border-radius: inherit;
}

/* 禁用状态 — not-allowed 而非 wait */
[disabled],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* 无障碍：尊重用户的减少动画偏好
 * Win 控面板「显示动画效果」/ mac 辅助功能「减少动态效果」可触发 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 滚动条 — webkit 美化，兼容 Win/mac Chrome/Edge，Safari 沿用原生
 *
 * 2026-08-21 改成「不滚不见」：静止时 thumb 全透明，只有两种时候现身 ——
 *   ① 页面或某个容器正在滚动（scrollbar.js 给 <html> 挂 .is-scrolling，停手 900ms 摘掉）
 *   ② 鼠标压在滚动条上（想拖的时候它就在）
 * 槽位一直占着 10px，只是看不见，所以显隐不引起任何布局跳动。
 * 注意：不能用 *:hover 来显示 —— 鼠标在页面任何地方都会命中 html/body，
 * 页面主滚动条就变成常驻了，等于没改。容器级的 hover 各页自己按需加
 * （报告页表格就加了一条，鼠标在表上时两根滚动条都可见）。
 * webkit 伪元素不吃 transition，显隐是硬切换没有淡出，属浏览器限制。 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.is-scrolling::-webkit-scrollbar-thumb,
html.is-scrolling *::-webkit-scrollbar-thumb {
  background: rgba(60,66,74,0.24);
  border: 2px solid var(--color-bg-canvas);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(60,66,74,0.40);
  background-clip: padding-box;
  border: 2px solid var(--color-bg-canvas);
}

/* 链接 default — 用 token 主色，下划线 hover 才出 */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--motion-fast);
}
a:hover { color: var(--color-accent-hover); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 统一 tooltip（浮动版）—— 全站共享，Arco Tooltip 官方规格
 * container 复用：#g-tip（reports）/#adminTooltip（admin）/#tooltip（tax）/
 *               #vtTooltip（valuation，class="tip-pop"）/任何 .tip-pop
 * 定位策略：锚定在触发元素上方（不够空间则下方加 .below），带三角指向
 * 交互：JS 端 mouseenter 延迟 100-120ms 才加 .show，快速扫过不闪
 * 注意：reports 页的触发属性是 data-tip-key（值=TIPS 字典 key），
 *      admin/tax/valuation 页是 data-tip / data-tip-html（值=字面文本）——两种协议故意不同名
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tip-pop,
#g-tip,
#adminTooltip,
#tooltip {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  /* Arco Tooltip 规格（arco.css 实测）：bg gray-10 / 白字 / 圆角2px / 8px 12px。
     字号:官方默认 14px,2026-08-19 鹏哥拍板收到 12px(Arco body-1,配 20px 行高)——
     本站弹窗文案偏长,14px 一屏太占;12px 与报告页密排语境更配 */
  background: #1D2129;
  color: #fff;
  font-size: 12px;
  line-height: 1.667;
  padding: 8px 12px;
  border-radius: 2px;
  max-width: 360px;
  width: max-content;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.15);
  white-space: normal;
  text-align: left;
  transform: translateY(-2px);
  transition: opacity .12s ease-out, transform .12s ease-out, visibility .12s;
  font-family: var(--font-sans);
}
.tip-pop.show,
#g-tip.show,
#adminTooltip.show,
#tooltip.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s;
}
.tip-pop strong,
#g-tip strong,
#adminTooltip strong,
#tooltip strong { color: #94BFFF; font-weight: 500; }  /* arcoblue-3：深底上的强调 */

/* 三角指向 — 默认朝下（tooltip 在触发元素上方） */
.tip-pop::after,
#g-tip::after,
#adminTooltip::after,
#tooltip::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  top: 100%;
  border-top-color: #1D2129;
}
/* 三角朝上 — tooltip 在触发元素下方时 JS 加 .below */
.tip-pop.below::after,
#g-tip.below::after,
#adminTooltip.below::after,
#tooltip.below::after {
  top: -10px;
  border-top-color: transparent;
  border-bottom-color: #1D2129;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 长说明气泡 .tip-card（2026-08-21）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * Arco 把气泡分成两个组件：Tooltip（深底白字，装一两行提示）和
 * Popover（白底卡片，装多段内容、可交互）。本站的长说明——带算式、
 * 带图例、要拿计算器复核的那几条——内容量是 Popover 的，却一直套在
 * Tooltip 的深底壳里，带来三个毛病：
 *   ① 深底白字读 400 字费眼；
 *   ② pointer-events:none 让鼠标进不去，选不中算式、内容超屏也滚不了；
 *   ③ 正文里的语义色是浅底色板的（绿 #008026 / 红 #CB272D），压在
 *      #1D2129 深底上实测对比度只剩 3.16 / 2.97，图例那行看不清。
 * 换白底三个一起解决——那些语义色本来就是给白底配的。
 *
 * 走哪套壳由内容长度自动判定（纯文本 ≥200 字 → 卡片），不逐条手工标记，
 * 新增 tip 不用记着打标。判定代码在 _report_template.py 的 _LONG_TIP。
 * 深底 Tooltip 保留给短提示和 hist-chip 时间线（后者正文自带深底专用色）。
 *
 * 注意：滚动条给内层 .tip-card-b，不能给 #g-tip 本身——三角是 #g-tip 的
 * 伪元素、长在盒子外面，父级一旦 overflow:auto 就把三角裁没了。
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#g-tip.tip-card {
  background: #fff;
  color: #4E5969;                 /* Arco gray-8 — 白底实测 7.10:1 */
  border: 1px solid #E5E6EB;      /* Arco gray-3 */
  max-width: 420px;               /* 比深底 Tooltip 的 360 宽：算式少换行 */
  padding: 0;                     /* 标题区/正文区各自带内边距 */
  pointer-events: auto;           /* 鼠标能移进来滚动、选中复制 */
  user-select: text;
  box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3);
}
/* 深底上的强调色（arcoblue-3 #94BFFF）在白底几乎看不见，覆盖成墨色 */
#g-tip.tip-card strong { color: #1D2129; }
/* 标题区：正文滚动时它不动——读者滚到一半也知道这是在讲哪一列 */
#g-tip.tip-card .tip-card-h {
  padding: 10px 16px;
  border-bottom: 1px solid #E5E6EB;
  font-size: 13px;
  font-weight: var(--fw-med);
  color: #1D2129;
}
#g-tip.tip-card .tip-card-h strong { font-weight: inherit; }
#g-tip.tip-card .tip-card-b {
  padding: 12px 16px;
  max-height: calc(70vh - 42px);  /* 42px ≈ 标题区高度，合计不超过 70vh */
  overflow-y: auto;
}
/* 三角：白底带边框要两层——外层 6px 走边框色，内层 5px 白色错开 1px 盖住内部 */
#g-tip.tip-card::before {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  top: 100%;
  border-top-color: #E5E6EB;
}
#g-tip.tip-card::after {
  top: calc(100% - 1px);
  border-top-color: #fff;
}
#g-tip.tip-card.below::before {
  top: -12px;
  border-top-color: transparent;
  border-bottom-color: #E5E6EB;
}
#g-tip.tip-card.below::after {
  top: -9px;
  border-top-color: transparent;
  border-bottom-color: #fff;
}