/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 拍策 design tokens v1 — 2026-04-19
 *
 * 单一来源；所有页面通过 <link rel="stylesheet" href="/static/css/design-tokens.css?v=..."> 引用。
 *
 * 设计原则：
 *   mac 优先（Apple HIG 严格对齐：semibold 590、12px 卡圆角、4px 软晕 focus）
 *   Windows 兜底（字体 fallback 补全、focus-visible 可见、prefers-reduced-motion 适配）
 *
 * 修改任何 token 前请先读 CLAUDE.md「关键设计决策」表，避免破坏品牌系统一致性。
 *
 * ⚠ 改字体 / 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 · 文字（4 级灰阶） ─────────── */
  --color-fg:        #1d1d1f;
  --color-fg-2:      #424245;
  --color-fg-3:      #6e6e73;
  --color-fg-4:      #a1a1a6;

  /* ─────────── Color · 背景（3 级 + 卡片底） ─────────── */
  --color-bg:         #ffffff;
  --color-bg-canvas:  #fbfbfd;
  --color-bg-panel:   #f5f5f7;
  --color-bg-panel-2: #ececef;

  /* ─────────── Color · 边线（软 hairline，3 级） ─────────── */
  --color-border:        rgba(0,0,0,0.08);
  --color-border-strong: rgba(0,0,0,0.14);
  --color-border-hover:  rgba(0,0,0,0.24);

  /* ─────────── Color · 主色（Apple Blue，统一全站） ─────────── */
  --color-accent:       #0071e3;
  --color-accent-hover: #0077ed;
  --color-accent-press: #006edb;
  --color-accent-soft:  rgba(0,113,227,0.14);  /* hover 微强（按钮/tab） */
  --color-accent-weak:  rgba(0,113,227,0.08);  /* hover 微弱（表格行/列表） */
  --color-accent-ring:  rgba(0,113,227,0.2);   /* focus ring 鲜明圈 */

  /* ─────────── Color · 品牌（logo 专用，不用于 UI 主色） ─────────── */
  --color-brand:   #0B1E3B;  /* 深墨蓝 */
  --color-brand-2: #B8894A;  /* 古铜金 */

  /* ─────────── Color · 状态 ─────────── */
  --color-err:    #c8372d;
  --color-err-bg: #fff4f2;
  --color-err-bd: rgba(200,55,45,0.22);
  --color-warn:   #8a5a0b;
  --color-warn-bg:#fff8ec;
  --color-warn-bd:rgba(203,143,30,0.22);
  --color-ok:     #2fa971;
  --color-ok-bg:  #ebf8f1;
  --color-ok-bd:  rgba(47,169,113,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:    11.5px;
  --text-sm:    12.5px;
  --text-base:  13.5px;  /* 主体 */
  --text-md:    15px;    /* subhead */
  --text-lg:    17px;    /* body large */
  --text-xl:    22px;    /* title 2 */
  --text-2xl:   28px;    /* large title */

  --lh-tight: 1.4;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   590;   /* Apple semibold；Windows 不支持会落到 600 */
  --fw-bold:   700;

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

  /* ─────────── Radius ─────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* ─────────── Shadow ─────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
  --shadow-glass: 0 8px 24px rgba(0,0,0,0.18);  /* tooltip / dropdown 浮层 */

  /* ─────────── Motion ─────────── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --motion-fast: .15s var(--ease);
  --motion-base: .2s var(--ease);
  --motion-med:  .25s var(--ease);
  --motion-slow: .35s var(--ease);

  /* ─────────── Font fallback chain ───────────
     2026-05-16: 全站统一 Stripe 工程风 — 字母等宽 + 数字 Arial + 中文 sans
     2026-05-25: 字母 'SF Mono'+ui-monospace 殊途同归到 SF Mono, 跨 Chrome/Safari 一致
     · 数字 (0-9, 标点) → BodyNum @font-face → Arial / Helvetica Neue / Liberation Sans
     · 字母 (A-Z, a-z) → 'SF Mono' / ui-monospace → Menlo / Monaco (Mac) → Cascadia Mono / Consolas (Win) → DejaVu Sans Mono (Linux)
       (统一 SF Mono: Chrome 用 family 名 'SF Mono' 命中; Safari 不认该名、退到 ui-monospace, 而 Safari 的 ui-monospace=SF Mono → 殊途同归, 实测两边都 297px.
        Menlo 兜底给不支持 ui-monospace 的老浏览器. 别删 ui-monospace 否则 Safari 退 Monaco; 别自托管 SF Mono 字体文件, Apple 授权不允许)
     · 中文      → PingFang SC (Mac) → Microsoft YaHei (Win) → Noto Sans CJK SC (Linux)
     0 网络依赖,全部 local 字体,各平台用各自 local 等价 */
  --font-sans:  BodyNum,
                'SF Mono', ui-monospace, Menlo, Monaco,
                "Cascadia Mono", "Cascadia Code", Consolas,
                "Liberation Mono", "DejaVu Sans Mono",
                "PingFang SC", "PingFang TC",
                "Microsoft YaHei", "Microsoft YaHei UI",
                "Noto Sans CJK SC", "WenQuanYi Micro Hei",
                system-ui, sans-serif;
  --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;
}


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

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

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

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

/* 选中文本 — Apple Blue 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 沿用原生 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-bg-canvas);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.32);
  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（浮动版）—— 全站共享 Apple glass 风
 * 4 处 container 复用：#g-tip（reports）/#adminTooltip（admin）/#tooltip（tax）/任何 .tip-pop
 * 定位策略：锚定在触发元素上方（不够空间则下方），带三角指向
 * 交互：JS 端 mouseenter 延迟 120ms 才加 .show，快速扫过不闪
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tip-pop,
#g-tip,
#adminTooltip,
#tooltip {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background: rgba(29, 29, 31, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #f5f5f7;
  font-size: 13px;
  line-height: 1.65;
  padding: 10px 14px;
  border-radius: 8px;
  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;
  letter-spacing: 0.2px;
  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: #93c5fd; font-weight: 600; }

/* 三角指向 — 默认朝下（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: rgba(29, 29, 31, 0.95);
}
/* 三角朝上 — 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: rgba(29, 29, 31, 0.95);
}